如何将 Three.js 着色器应用于节点
Posted
技术标签:
【中文标题】如何将 Three.js 着色器应用于节点【英文标题】:How to apply Three.js shaders to nodes 【发布时间】:2018-02-06 14:40:53 【问题描述】:我正在尝试应用来自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
我也尝试像该示例那样为制服添加颜色,但没有帮助。
任何想法为什么它们不起作用?
【问题讨论】:
【参考方案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.ShaderLib.depth
做了什么。 Forge Viewer 使用的是私有的three.js
,因此它可能不支持three.js
的所有内容。
您知道 Autodesk 中有谁知道如何在查看器中使用着色器或为查看器实现着色器吗?
不,我不知道,但你可以考虑提供一个可重现的案例给我,我很乐意将它传递给我们的开发团队。我已经更新了答案来描述一个可重现的案例应该有什么,谢谢。
您基本上已经在查看器中复制了它。最后,我想要一个在节点的每个顶点之间绘制一条线的着色器,例如这里:homepages.loria.fr/BLevy/GEOGRAM/geobox.html 或这里:threejs.org/examples/#webgl_materials_wireframe,但最后一个链接在查看器中不起作用。以上是关于如何将 Three.js 着色器应用于节点的主要内容,如果未能解决你的问题,请参考以下文章