Three.js:对象相交和着色器 Material

Question

我有一个场景，其中的对象使用 Lambert Material 相交，就像这个 jsFiddle .

现在我需要/想要将该平面的 Material 切换为着色器 Material ，然后该平面变成背景，例如 here .

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

目前不能选择将我的所有工作切换到着色器 Material 以利用着色器。

这是我设置 Material 的方式:

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对于这方面的例子。