Three.js transparency projection

Questions
, ,
1

image
image565×578 4.07 KB

image
image471×564 4.31 KB

I’m using the code below.
I can’t touch depthwrite and depthTest because of other rendering issues.
I used a shader to make my one tubegeometry transparent in the front and not transparent in the back, but I want to have a line projected from the transparent part to the back…
How do I do this.

  const lineMaterial = new THREE.ShaderMaterial({
      uniforms: {
          color: { value: new THREE.Color("red") },
          maxZ: { value: 0.0 },  
          minZ: { value: 0.0 }   
      },
      vertexShader: `
      uniform float maxZ;
      uniform float minZ;
          varying float alpha;
          void main() {
          float range = maxZ - minZ;
          alpha = smoothstep(0.5, 1.0, (abs(position.z - minZ) / range));
          alpha = min(alpha, 0.8);  // 최대 0.7까지 제한
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
          }
      `,
      fragmentShader: `
          uniform vec3 color;
          varying float alpha;
          void main() {
          gl_FragColor = vec4(color, 1.0 - alpha);  // 처음이 밝고 뒷부분이 어둡게
          }
      `,
      transparent: true,
      depthTest: true,  // 선이 다른 객체를 가리지 않도록 depthTest를 비활성화
      depthWrite: true,
  });
2

in vertexShader, make a


varying vec3 vPosition;

in vertexShader main:


vPosition = position;

then in fragment shader:

varying vec3 vPosition;

at the end of fragment shader main:


if( abs( vPosition.x )<.1)gl_FragColor = vec4(1.);
3

The part you mentioned doesn’t work the way I want it to, I need to set the line behind to be visible through the transparent part in front, even if the lines overlap.

4

I think I tried to explain this to you before. Alpha blended transparency doesn’t work that way. If it looks correctly layered from one direction, it will look wrong from the other side, since the triangles are always rendered in the same order.

You could try using single sided materials, and draw the same mesh twice… once with side: THREE.FrontSide and once with THREE.BackSide.

5

image
image690×838 11.2 KB

The image above shows the result of setting depthTest to false.
Am I correct in understanding that to get this result with depthTest set to true, we would need to create the same material twice?

6

yeah and you would have to duplicate the mesh and apply the material to it.
One material with side: THREE.FrontSide and the other with THREE.BackSide.


let backSideMesh = mesh.clone();

mesh.parent.add(backSideMesh)
backSideMesh.material = backSideMesh.material.clone();
backSideMesh.material.side = THREE.BackSide;