Three.js：对象相交和着色器材质

Question

我有一个场景，其中的对象使用兰伯特材质相交，就像在这个jsFiddle中一样。

现在我需要/想要将该平面的材质切换为着色器材质，并且该平面变成背景物体，就像这里一样。

问题是，我可以在对象中使用不同的材质并仍然保留相交效果吗？这是 Three.js 的限制还是着色器的工作原理？或者我在渲染器/材质中缺少参数？

目前，无法将我的所有工作切换到着色器材质以利用着色器。

这就是我设置材料的方式：

var material1 = new THREE.ShaderMaterial( { 
    uniforms: {
        color: { type: "c", value: new THREE.Color( 0x22A8E7 ) }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent, 
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent, 
    opacity: 0.5, 
    transparent: true, 
} );

谢谢！

Answer 1

使用 ShaderMaterial，您可以控制着色器 glsl；因此，为了让 logarithmicDepthBuffer 工作，您需要向着色器添加四组代码。

代码位于：

顶点着色器声明

https://github.com/mrdoob/ Three.js/blob/master/src/renderers/shaders/ShaderChunk/logdepthbuf_pars_vertex.glsl

#ifdef USE_LOGDEPTHBUF

    #ifdef USE_LOGDEPTHBUF_EXT

        varying float vFragDepth;

    #endif

    uniform float logDepthBufFC;

#endif

顶点着色器主体

https://github.com/mrdoob/ Three.js/blob/master/src/renderers/shaders/ShaderChunk/logdepthbuf_vertex.glsl

#ifdef USE_LOGDEPTHBUF

    gl_Position.z = log2(max( EPSILON, gl_Position.w + 1.0 )) * logDepthBufFC;

    #ifdef USE_LOGDEPTHBUF_EXT

        vFragDepth = 1.0 + gl_Position.w;

    #else

        gl_Position.z = (gl_Position.z - 1.0) * gl_Position.w;

    #endif

#endif

片段着色器声明

https://github.com/mrdoob/ Three.js/blob/master/src/renderers/shaders/ShaderChunk/logdepthbuf_pars_fragment.glsl

#ifdef USE_LOGDEPTHBUF

    uniform float logDepthBufFC;

    #ifdef USE_LOGDEPTHBUF_EXT

        #extension GL_EXT_frag_depth : enable
        varying float vFragDepth;

    #endif

#endif

片段着色器主体

https://github.com/mrdoob/ Three.js/blob/master/src/renderers/shaders/ShaderChunk/logdepthbuf_fragment.glsl

#if defined(USE_LOGDEPTHBUF) && defined(USE_LOGDEPTHBUF_EXT)

    gl_FragDepthEXT = log2(vFragDepth) * logDepthBufFC * 0.5;

#endif

如果您在 js 中构建着色器，而不是直接从 HTML 中提取，那么您可以将它们包含在 ShaderChunks 中，例如THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ]

有关示例，请参阅https://github.com/mrdoob/ Three.js/blob/master/src/renderers/shaders/ShaderLib.js。