THREE.js中的ID渲染+漫反射

Question

我正在尝试使用onBeforeRender在我的THREEjs应用程序中添加id材质覆盖功能。 这是用于渲染应用程序的非常常见的功能，我希望能够使用scene.overrideMaterial来做到这一点，但是从我的研究看来，我似乎将自己动手。

我的方法如下。

当我实例化对象时：

...
      m.onBeforeRender = function (){
        if(Renderer._renderID){
            this.material = new THREE.MeshBasicMaterial(this.userData.idColor.getHex());
            this.material.needsUpdate = true;

            // Attempt at using a shader material
            //this.material = Renderer._idMat;
            //this.material.uniforms.idColor.value = this.userData.idColor;
            //this.material.uniforms.needsUpdate = true;
        }
      }
      m.onAfterRender = function (){
            if(Renderer._renderID){
                this.material = this.userData.material;
            }
      }
...

在我的渲染循环中：

...
        var idTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
        Renderer._renderID = true;
        Renderer._renderer.render(Renderer._scene, Renderer._camera, idTarget);
        Renderer._renderID = false;
...

现在，id缓冲区和扩散缓冲区都使用扩散材质进行渲染。

任何帮助将非常感激。 请让我知道是否需要其他信息，我将更新此帖子。

Answer 1

Three.js有一个官方的gpu挑选示例，可以在这里看到。

它们似乎在两个不同的场景中以顶点颜色渲染事物。 这不是一个坏方法，我不同意注释和您注释掉的代码。 更改制服并不是实现此目的的唯一方法，官方示例使用顶点颜色并合并所有几何形状。

有很多方法可以给这只猫蒙皮。

您应绝对避免以紧密的循环创建新材料。

这是suuuuper不好的：

  m.onBeforeRender = function (){
    if(Renderer._renderID){
        this.material = new THREE.MeshBasicMaterial(this.userData.idColor.getHex()); //just a big NO
        this.material.needsUpdate = true; //no it doesnt! it's a new material it has this true by default

要实现这样的目标，或者您自己的自定义替代：

const myMesh = new Mesh()
myMesh.myMaterials = [
  someRenderMaterial,
  someIDMaterial,
]

scene.traverse(o=>{if(o.myMaterials) o.material = o.myMaterials[1]})
renderer.render(scene,camera)

scene.traverse(o=>{if(o.myMaterials) o.material = o.myMaterials[0]})
renderer.render(scene,camera)

但是，再次有很多方法可以做到这一点。 您可以制作另一个场景并渲染顶点颜色。 您可以制作替代材料并渲染顶点颜色。 许多参数，许多排列。