Three.js:对象相交和着色器材质 [英] Three.js: Objects intersected and shader material
问题描述
我有一个场景,其中的对象使用Lambert材质相交,例如 jsFiddle .
I have a scene with objects intersected using Lambert material, like in this jsFiddle.
现在,我需要/想要将该平面的材质切换为Shader材质,并且该平面变成背景物体,例如此处.
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.
问题是,我可以在对象中使用不同的材质并且仍然保留相交效果吗?这是Three.js的限制,还是着色器的工作方式?还是我在渲染器/材质中缺少参数?
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,
} );
谢谢!
推荐答案
使用ShaderMaterial,您可以控制着色器glsl.因此,为了使logarithmicDepthBuffer正常工作,您需要向着色器添加四组代码.
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.
代码在:
顶点着色器声明
#ifdef USE_LOGDEPTHBUF
#ifdef USE_LOGDEPTHBUF_EXT
varying float vFragDepth;
#endif
uniform float logDepthBufFC;
#endif
顶点着色器主体
#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
片段着色器声明
#ifdef USE_LOGDEPTHBUF
uniform float logDepthBufFC;
#ifdef USE_LOGDEPTHBUF_EXT
#extension GL_EXT_frag_depth : enable
varying float vFragDepth;
#endif
#endif
片段着色器主体
#if defined(USE_LOGDEPTHBUF) && defined(USE_LOGDEPTHBUF_EXT)
gl_FragDepthEXT = log2(vFragDepth) * logDepthBufFC * 0.5;
#endif
如果要在js中构建着色器,而不是直接从HTML中提取着色器,则可以将其包含在ShaderChunks中,例如THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ]
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" ]
请参见 https://github.com /mrdoob/three.js/blob/master/src/renderers/shaders/ShaderLib.js 作为示例.
这篇关于Three.js:对象相交和着色器材质的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!