Gérer l'état webgl et émettre des appels de tirage séquentiels avec three.js

Question

J'essaie de créer un nœud de scène complexe, qui entraînerait plusieurs appels de tirage et un changement d'état entre les deux, lorsqu'il est rencontré dans l'appel WebGLRenderer.render() de trois.

Spécifiquement je veux travailler avec le tampon stencil, qui n'est pas exposé comme une API de plus haut niveau.

Si je

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

je dois avoir cela se avant qu'il ne soit établi:

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) 
    //... 

} 

Suivi par plus draw appelle:

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) 

} 

Que pouvais-je faire avec trois, comme c'est, r87 pour y parvenir avec le moins de maux de tête?

Je souhaite que je pourrais appeler une sorte de renderGeometryDirect méthode qui Dessinez la géométrie en utilisant le même nœud que le onBeforeRender ou onAfterRender est appelé, et par la même camera qui est déjà utilisé dans le niveau supérieur render(scene, camera) appel.

Ou s'il est simplement appelé render(myObject3D, camera). Au lieu de cela, je pense à quelque chose qui pourrait gérer la création de ces graphiques fantômes qui fonctionneraient avec render() mais je ne suis pas sûr de ce que la meilleure ligne de conduite est.

Answer 1

Juste une idée, peut-être vous pouvez utiliser des couches pour réaliser quelque chose comme ceci (voir here et here)? Cela devrait au moins vous permettre de spécifier des sous-ensembles du graphe de scène à afficher dans un appel de rendu.

donc quelque chose comme ceci:

_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);