伪造查看器中的剪切平面无法使用 ShaderMaterial 剪切对象 [英] clipping planes in forge viewer not able to clip objects with ShaderMaterial

问题描述

我正在尝试在伪造查看器中添加带有 THREE.ShaderMaterial 的自定义对象，我能够在伪造查看器的 overlayScene 中添加和渲染对象.

I am trying to add custom objects with THREE.ShaderMaterial in forge-viewer, I am able to add and render the objects in forge-viewer's overlayScene.

我提到了这个 用于添加相同内容的博客.

I referred this blog for adding the same.

我面临的问题是:伪造查看器的剪切平面无法剪切自定义添加的对象.如果我尝试使用其他材料添加相同的对象，则剪切平面能够剪切它们.

The problem I am facing is: The forge-viewer's clipping planes are not able to clip the custom added objects. If I try to add same object with other material, then clipping planes are able to clip them.

我已经尝试过这个.但是我收到了 Cannot resolve #include 的错误(其他着色器源也一样).我曾尝试在 THREE.ShaderChunk 中添加这些着色器，但没有奏效.

I have tried this. But I am getting error that Cannot resolve #include<clipping_planes_pars_vertex.glsl> (same for other shader sources). I have tried to add these shaders in THREE.ShaderChunk but not worked.

我已经看到错误来自 ShaderChunk.ts 因为它没有在 chunks[] 中找到着色器.

I have seen that the error comes from in ShaderChunk.ts because it didn't found shader in chunks[].

1. 有没有什么方法可以通过 THREE.ShaderMaterial 使用剪切平面?
2. 我是否需要在 ShaderChunk.ts 的 chunks[] 中添加我的自定义着色器?如果是，如何?

1. Is there any way to use clipping planes with THREE.ShaderMaterial?
2. Do I need to add my custom shaders in chunks[] from ShaderChunk.ts? If yes How?

如果可能，请分享一个演示示例.

Please share a demo example if possible.

推荐答案

与您发现的另一个 Stack Overflow 问题类似，Forge Viewer 中的截面工具使用自定义着色器逻辑，该逻辑仅包含在查看器自己的材质中.尝试在您的材质着色器中包含以下片段:

Similarly to the other Stack Overflow question you found, the section tool in Forge Viewer uses a custom shader logic that is only included in the Viewer's own materials. Try including the following snippets in your material shaders:

在顶点着色器中:

...
#if NUM_CUTPLANES > 0
    varying vec3 vWorldPosition;
#endif
...
void main() {
    ...
    #if NUM_CUTPLANES > 0
        vWorldPosition = vec3(/* include your own vertex world position here */);
    #endif
    ...
}
...

在片段着色器中:

...
#if NUM_CUTPLANES > 0
    varying highp vec3 vWorldPosition;
#endif

#include<cutplanes>
...
void main() {
    ...
    #if NUM_CUTPLANES > 0
        checkCutPlanes(vWorldPosition);
    #endif
    ...
}
...

并且在定义新的 THREE.ShaderMaterial 时，您还需要包含几个特定于分区的统一:

And when defining the new THREE.ShaderMaterial, you also need to include a couple of sectioning-specific uniforms:

const uniforms = {
    ...
    "cutplanes": { type: "v4v", value: [] },
    "hatchParams": { type: "v2", value: new THREE.Vector2(1.0, 10.0) },
    "hatchTintColor": { type: "c", value: new THREE.Color( 0xFFFFFF ) },
    "hatchTintIntensity": { type: "f", value: 1.0 },
    ...
}

请参阅此gist，了解向<代码添加分段支持的完整示例>THREE.ShaderMaterial.

这篇关于伪造查看器中的剪切平面无法使用 ShaderMaterial 剪切对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！