Three.js ID缓冲区三JS WEBGL非真实感渲染边缘检测

我正在使用THREE.JS和GLSL处理一些屏幕空间着色器。我既要使用每个对象材质/纹理渲染“漫反射”缓冲区，也要渲染“ID”缓冲区，其中每个对象都有用于对象边缘检测的唯一颜色。正如三个.JS示例中的一些示例所示，这对于对象拾取也非常有用

我已经在使用Scene.OverrideMatary渲染普通缓冲区（以及其他一些很酷的东西），但还没有找到一种方法来为ID缓冲区执行类似的操作。有这样的东西存在吗？看起来很有用，很有可能。其他人有没有找到解决这个问题的方法？可能通过将对象UUID映射到颜色值

----->编辑 以下是我使用此示例的尝试：

在这一点上，我不关心选择，尽管这不起作用。我想我可能设置的onBeforeRender（）不正确。有什么帮助吗

谢谢

initPieces = function(geometry){
    ...
    //set id Color to unique color
    //for picking will use setHex(i) method
    m.userData.idColor = material.color;

    ...

    m.onBeforeRender = function (){
        if(Viewer._scene.overrideMaterial){
                if(Viewer._scene.overrideMaterial._name == "id"){
                    var updateList = [];

                    var u = scene.overrideMaterial.uniforms;
                    //picking color in user data
                    var d = this.userData;

                    //Is this just equivalent to checking whether this is the picking material?
                    if(u.idColor){
                        u.idColor.value = (d.idColor);
                        // u.needsUpdate = true;
                        updateList.push("idColor");
                    }

                    //Don't understand what this is doing
                    //Throws "WebGL INVALID_OPERATION: uniformMatrix4fv: location is not from current program"
                    if (updateList.length){
                        var materialProperties = renderer.properties.get(material);

                        if( materialProperties.program){
                            var gl = renderer.getContext();
                            var p = materialProperties.program;
                            gl.useProgram( p.program );
                            var pu = p.getUniforms();

                            updateList.forEach(function(name){
                                pu.setValue( gl, name, u[name].value);
                            });
                        }
                    }
                }
            }
        }

        // Doesn't show onBeforeRender set as I expected?
        console.log(m);

        ...
    }
    ...
}

...

function render(scene, camera){
    ...
    scene.overrideMaterial = getMaterial("id");
    renderer.render(scene, camera, getTarget("id"));
    scene.overrideMaterial = null;
    ...
}

---

我不确定是否有合适的方法使用

场景来实现这一点。覆盖材质

，因为它是一种材质，而不是场景中每个对象都可以修改的材质，这将比只使用GPU拾取示例所做的操作更少麻烦（）通过

Color.setHex（UUID）

设置对象上材质颜色的单独场景。只需为

场景创建一个
着色器材质
。覆盖材质

，并使用自定义制服设置对象颜色。然后，为每个对象指定其

onBeforeRender

函数，以检查是否设置了

场景。覆盖材质

，如果设置了，则将统一设置为该对象的颜色值。您还需要告诉

ShaderMaterial

制服需要更新（

material.uniformsNeedUpdate=true；

），并且它应该正确处理每个制服。尝试一下，并用你的尝试更新你的帖子，我们可以帮助你克服任何阻碍你前进的错误。谢谢@TheJim01我将在这个周末尝试并让你知道！最近我没有太多时间来研究这个问题，但我发现这个例子似乎也在做同样的事情。研究如何将其应用到我的案例中。