three.js所：对象相交和着色材料(Three.js: Objects intersected

我有对象的场景使用兰伯特材料，如在此相交的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对于这方面的例子。

Answer 2:

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

在我的测试中的“问题”是该行的对数深度缓冲 ：

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

如果没有这个选项，和预期一样。

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

文章来源: Three.js: Objects intersected and shader material