Problem with custom ShaderMaterial which has transparency

Questions
,
1

I got a Problem with custom ShaderMaterial which has transparency。
threejs version: 0.167.0

I make a floor with transparency and fake light with transparency overlap the floor, both use custom ShaderMaterial .
here is my shader

const di_vert: string = `
varying vec2 vUv;
varying vec2 vMapUv;
uniform mat3 mapTransform;

#include <common>
#include <logdepthbuf_pars_vertex>

void main() {
    vUv = uv;
    vMapUv = (mapTransform * vec3(uv, 1)).xy;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

    #include <logdepthbuf_vertex>
}
`
const di_frag: string = `
uniform sampler2D tDiffuse;
varying vec2 vUv;
varying vec2 vMapUv;

#include <logdepthbuf_pars_fragment>

void main() {
    vec4 color = texture2D( tDiffuse, vMapUv );
    float uFadeBorder = 0.5;
    float h = smoothstep(0., uFadeBorder, vUv.x) - smoothstep(1. - uFadeBorder, 1., vUv.x);
    float v = smoothstep(0., uFadeBorder, vUv.y) - smoothstep(1. - uFadeBorder, 1., vUv.y);
    gl_FragColor = color;
    gl_FragColor.a = h * v;

    #include <tonemapping_fragment>
    #include <colorspace_fragment>
}
`

const material: THREE.ShaderMaterial = new THREE.ShaderMaterial({
                        uniforms: dimianShader.uniforms,
                        fragmentShader: dimianShader.fragmentShader,
                        vertexShader: dimianShader.vertexShader,
                        transparent: true
                    })
material.uniforms.tDiffuse.value = textures[index - 1]
material.uniforms.mapTransform.value.copy(textures[index - 1].matrix)
material.polygonOffset = true;
material.polygonOffsetFactor = -0.01;
material.polygonOffsetUnits = -5;


demo1
demo11293×1148 99.1 KB

when I set

material.depthWrite = false

2

I change floor material to THREE.MeshBasicMaterial and set transparent: false everything is OK, but when I set transparent: true and its bad again.

3

I found a solution, set mesh.renderOrder and everything is fine

1 Like