管理webgl状态并用three.js发出顺序绘制调用

Question

我试图制作一个复杂的场景节点，这会导致几次绘制调用和状态之间的变化，当遇到三个WebGLRenderer.render()调用时。

具体而言，我想使用模板缓冲区，它不作为更高级别的API公开。

如果我有

var mesh = new THREE.Mesh(someGeom, someMaterial) 

我需要有这种情况发生它被绘制之前：

mesh.onBeforeRender = (renderer , scene , camera)=>{ 
    //because there is no someMaterial.stencilOp = THREE.SomeStencilOp 
    //i need to work with the gl context 

    _gl.enable(_gl.STENCIL_TEST) 
    _gl.clearStencil(0) 
    _gl.clear(_gl.STENCIL_BUFFER_BIT) 
    _gl.stencilFunc(_gl.ALWAYS , 1 , 1) 
    _gl.stencilOp(_gl.REPLACE , _gl.REPLACE , _gl.REPLACE) 
    //... 

} 

随后更抽奖电话：

mesh.onAfterRender = (renderer , scene , camera)=>{ 

    //more state 
    _gl.stencilFunc(_gl.EQUAL , 1 , 1) 
    _gl.stencilOp(_gl.KEEP , _gl.KEEP , _gl.INCR) 

    //renderer.render(someOtherMesh , camera) //this doesn't really work 
    renderer.render(anotherSceneWithOtherMesh, camera) //this is nightmarish 

    //more state for yet another call 
    _gl.stencilFunc(_gl.EQUAL, 0 ,1) 
    _gl.stencilOp(_gl.KEEP , _gl.KEEP , _gl.KEEP) 

    //renderer.render(mesh , camera) //not a scene so it doesnt work 
    renderer.render(proxySceneForThisMeshWithThisMesh, camera) // :(i need to either bake the transformation, or somehow sync a copy of the scene graph down to this node 

    _gl.disable(_gl.STENCIL_TEST) 

} 

我可以做什么三，就像，R87以最少的头痛达到这个目标？

我希望我能叫某种renderGeometryDirect方法，将使用该onBeforeRender或onAfterRender被调用同一个节点只画几何形状，并通过其已经在顶级render(scene, camera)呼叫使用相同的camera。

或者它只是在render(myObject3D, camera)上被调用。

取而代之的是，我正在考虑创建这些可与render()配合使用的阴影图，但我不确定最佳的行动方案是什么。

Answer 1

只是一个想法，也许你可以使用图层来实现这样的事情（见here和here）？这至少应该允许您指定场景图的子集以在渲染调用中渲染。

因此，像这样：

_gl.enable(_gl.STENCIL_TEST) 
_gl.clearStencil(0) 
_gl.clear(_gl.STENCIL_BUFFER_BIT) 
_gl.stencilFunc(_gl.ALWAYS , 1 , 1) 
_gl.stencilOp(_gl.REPLACE , _gl.REPLACE , _gl.REPLACE) 

camera.layers.set(1);  
renderer.render(scene, camera); 


_gl.stencilFunc(_gl.EQUAL , 1 , 1) 
_gl.stencilOp(_gl.KEEP , _gl.KEEP , _gl.INCR) 

camera.layers.set(2); 
renderer.render(scene, camera); 


_gl.stencilFunc(_gl.EQUAL, 0 ,1) 
_gl.stencilOp(_gl.KEEP , _gl.KEEP , _gl.KEEP) 

camera.layers.enable(1); 
camera.layers.enable(2); 
renderer.render(scene, camera);