如何将Three.js着色器应用于节点

Question

我正在尝试应用shaderLib中的着色器，但大多数都会将节点变为白色或黑色。只有normal着色器似乎有效。

这是我应用它的方式：

const shader = THREE.ShaderLib.depth;
const uniforms = shader.uniforms;
const material = new THREE.ShaderMaterial({
  fragmentShader: shader.fragmentShader,
  vertexShader: shader.vertexShader,
  uniforms
})

this._viewer.impl.matman().addMaterial(
  data.name, material, true)

并使用以下内容设置片段的材质：

function setMaterial(fragIds, material) {

    const fragList = this._viewer.model.getFragmentList()

    this.toArray(fragIds).forEach((fragId) => {

      fragList.setMaterial(fragId, material)
    })

    this._viewer.impl.invalidate(true)
  }

就像在这个例子中一样：https://forge.autodesk.com/blog/forge-viewer-custom-shaders-part-1

我也试图为这个例子的制服添加颜色，但它没有帮助。

为什么他们不工作的任何想法？

Answer 1

正如我在评论中所说，Forge Viewer使用的是私人拥有的three.js，其WebGLRender并未实现three.js所有功能。因此，它可能不支持three.js中的所有函数。

为了确定此案件发生的情况，您可以考虑提供一个可重复的案例，证明这一点，我很乐意将其传递给我们的开发团队。以下项目应在可重现的案例中：

1. 您要实现的目标的简短描述。您观察到的行为与您的期望，以及为什么这是一个问题。
2. 用于运行测试的完整但最小的样本源模型。
3. 一个完整但最小的Forge app，可以使用一个简单的程序运行和调试，以分析其行为在样本模型中。
4. 可以运行并演示您想要的着色器效果的完整但最小的three.js app。 注意。 Forge Viewer正在使用r71 three.js。
5. 有关复制问题的详细逐步说明，例如：选择哪个元素，启动什么命令等。

如果您的可复制案例无法公开发布，请将其发送至forge.help@autodesk.com和remove sensitive data or information before you send。

========旧回复

您能否提供更多详细信息以供进一步调试？

似乎在我这边工作得很好。这是我的测试代码。它在Forge RCDB（https://forge-rcdb.autodesk.io/database?id=57efaf0377c8eb0a560ef467）上进行了测试。

var shader = THREE.ShaderLib.depth;
var uniforms = shader.uniforms;
var material = new THREE.ShaderMaterial({
  fragmentShader: shader.fragmentShader,
  vertexShader: shader.vertexShader,
  uniforms
})

NOP_VIEWER.impl.matman().addMaterial( 'ShaderLabDepth', material, true );

var sel = NOP_VIEWER.getSelection();

var fragList = NOP_VIEWER.model.getFragmentList();
var it = NOP_VIEWER.model.getData().instanceTree;
it.enumNodeFragments( sel[0], function( fragId ) {
  fragList.setMaterial( fragId, material )
});

NOP_VIEWER.impl.invalidate( true );

它的'结果是这样的。这是你想要的吗？