Three.js: 对象相交和着色器材质[英] Three.js: Objects intersected and shader material

本文是小编为大家收集整理的关于Three.js: 对象相交和着色器材质的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

我有一个场景,其中有使用兰伯特材料相交的对象,例如在此 jsfiddle ../p>

现在,我需要/想要将那个飞机的材料切换到着色器材料,然后飞机变成背景物,例如在这里.

问题是,我可以在物体中使用不同的材料并仍然保留交叉点效应吗?这是三个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, 
} );

谢谢!

推荐答案

使用ShanderMaterial,您可以控制着色器GLSL;因此,为了使对数的工作起作用,您需要在着色器中添加四组代码.

代码在:

顶点着色器声明

httpps for. com/mrdoob/trim.js/blob/master/src/renderers/danders/shaderchunk/logdepthbuf_pars_vertex.glsl

#ifdef USE_LOGDEPTHBUF

    #ifdef USE_LOGDEPTHBUF_EXT

        varying float vFragDepth;

    #endif

    uniform float logDepthBufFC;

#endif

顶点着色器主体

https httpps://github. com/mrdoob/trim.js/blob/master/src/renderers/danders/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/shaderlib.js 以示例.

其他推荐答案

好吧,寻找另一个主题,我找到了这个示例 http://stemkoski.github.io/three.js/shader-glow.html .

我的测试中的"问题"是对数深度缓冲区:

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

没有该选项,按预期工作.

现在,我不知道这是三个错误还是为了使用对数深度缓冲区,我必须以另一种方式编写着着色器,还是它的方式.

本文地址:https://www.itbaoku.cn/post/2091111.html

问题描述

I have a scene with objects intersected using Lambert material, like in this jsFiddle.

Now I need/want to switch the material of that plane to a Shader material and the plane turns into a background thing, like here.

The question is, can I use different materials in objects and still preserve the intersection effect? Is this a Three.js limitation or this is how shaders works? Or am I missing a parameter in the renderer/material?

At the moment is not an option no switch all my work to shader materials in order to take advantage of shaders.

This is how I set up the 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, 
} );

Thanks!

推荐答案

With ShaderMaterial you control the shader glsl; so in order for logarithmicDepthBuffer to work you need to add four sets of code to your shaders.

The code is in:

Vertex shader declares

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

Vertex shader body

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

Fragment shader declares

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

Fragment shader body

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

If you are building the shaders in js, rather than pulling directly from the HTML then you can include these with ShaderChunks e.g. THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ]

See https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderLib.js for examples of this.

其他推荐答案

Ok, looking for another subject, I've found this example http://stemkoski.github.io/Three.js/Shader-Glow.html.

The "problem" in my tests was the logarithmic depth buffer in this line:

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

Without that option, worked as expected.

Now, I don't know if that is a bug in THREE or in order to use logarithmic depth buffer I must write the shader in another way, or it just the way it is.