Question

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

现在我需要/想要将该平面的材质切换为Shader材质，并且该平面变为背景物，如here。

问题是，我可以在物体中使用不同的材料并保持交叉效果吗？这是一个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

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

＆＃34;问题＆＃34;在我的测试中，这一行是对数深度缓冲区：

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

没有该选项，按预期工作。

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

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：交叉的对象和着色器材质

2 个答案: