Transparency issue

Questions
1

Hello guys, on the first image my object looks exactly how I want it to look. On the second image is the same object from a different POV and inside I can see the walls of the other boxes.

Is there any way to fix this with the approach I have taken on displaying this object?

I am using instances because these objects will be bigger than 4 squares, and it will lie on an uneven grid which means that each of the cubes can have different position than the rest, and also a different height depeneding on the type of object, so I cannot merge it into one geometry and i need individual control of the composing cubes

const Map3DObstacleComponent = (props: Map3DObstacleProps): JSX.Element => {
  const { obstacle } = props;
  const [edgesOn, setEdgesOn] = useState<boolean>(false);
  const [selected, setSelected] = useState(false);

  return (
    <Instances
      onAfterRender={() => {
        setEdgesOn(true);
      }}
      position={[0, 0, 0]}
      limit={obstacle.cubes.length}
      onClick={() => setSelected(true)}
    >
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial
        color={selected ? 'red' : 'yellow'}
        transparent
        opacity={0.6}
      />
      {obstacle.cubes.map((cube, index) => (
        <Instance
          key={index}
          scale={cube.hidden ? [0.00001, 0.00001, 0.00001] : cube.dimensions}
          position={cube.hidden ? [0, 0, 0] : cube.position}
        >
          {edgesOn && <Edges color='black' />}
        </Instance>
      ))}
    </Instances>
  );
};

const Map3DObstacle = Map3DObstacleComponent;
export { Map3DObstacle };

image
image693×613 84.6 KB

image

2

I can put only links:
https://raw.githack.com/pailhead/three.js/depth-peel-example/examples/webgl_materials_depthpeel.html

https://tsherif.github.io/webgl2examples/oit-dual-depth-peeling.html

1 Like
3

Okay managed to find a pretty easy solution, just render the object twice - once with colorWrite = false, and once with colorWrite = true