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

Question

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

现在我 need/want 将该平面的 material 切换为着色器 material 并且该平面变成背景事物，例如 here.

问题是，我可以在对象中使用不同的 material 并且仍然保留相交效果吗？这是 Three.js 限制还是着色器的工作原理？还是我在 renderer/material?

中缺少参数

目前不是一个选项，不能将我的所有工作切换到着色器 materials 以利用着色器。

我是这样设置的 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

好的，寻找另一个主题，我找到了这个例子http://stemkoski.github.io/Three.js/Shader-Glow.html。

我测试中的"problem"是对数深度缓冲区这一行：

var renderer = new THREE.WebGLRenderer({logarithmicDepthBuffer: true});

没有那个选项，按预期工作。

现在，我不知道这是否是三中的错误，或者为了使用对数深度缓冲区，我必须以另一种方式编写着色器，或者就这样。

Answer 2

使用 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。

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

Three.js: Objects intersected and shader material

vertex-shader

fragment-shader

three.js