如何将 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)

并将片段的 material 设置为：

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.

中的所有功能

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

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

如果您的可重现案例无法在此处公开发布，请将其发送至 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 );

而它的结果是这样的。是不是如你所愿？

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

How to apply Three.js shaders to nodes

three.js

autodesk-forge

autodesk

autodesk-viewer