# Transparency issue

**URL:** <https://discourse.threejs.org/t/transparency-issue/69055>\
**Category:** Questions\
**Created:** [August 7, 2024, 12:16pm UTC](https://discourse.threejs.org/t/transparency-issue/69055 "2024-08-07T12:16:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [August 7, 2024, 12:16pm UTC](https://discourse.threejs.org/t/transparency-issue/69055/1 "2024-08-07T12:16:52Z")

</div>

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

```javascript
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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/c/cc776095fe6cdc089a844d77b7688581ee2cd789.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/9/a94bdb2e795455aeda7b86c52a3d6c11a970dfe6.jpeg)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [August 7, 2024, 6:21pm UTC](https://discourse.threejs.org/t/transparency-issue/69055/2 "2024-08-07T18:21:15Z")

</div>

I can put only links:  
[https://raw.githack.com/pailhead/three.js/depth-peel-example/examples/webgl\_materials\_depthpeel.html](https://raw.githack.com/pailhead/three.js/depth-peel-example/examples/webgl_materials_depthpeel.html)

> <https://github.com/mrdoob/three.js/pull/15490#issue-241462789>
>
> \### Problem
> 
> Multiple \`WebGLRenderTarget\` can't share the same depth / stenci…l render buffer because \`WebGLRenderer\` creates them in a private cache. This is possible to do with webgl, \[but not with three.js. \](https://github.com/mrdoob/three.js/issues/15440)
> 
> \### Proposal
> 
> Have the \`WebGLRenderer\` attempt to use an existing buffer if one is provided. And allow the targets to be used so:
> 
> \`\`\`
> targetA.ownDepthBuffer = buffer
> targetB.ownDepthBuffer = buffer
> \`\`\`
> 
> \### Use case
> 
> This \[depth peel example\](https://raw.githack.com/pailhead/three.js/depth-peel-stencil/examples/webgl\_materials\_depthpeel.html), goes from not being interactive to working on phones when stencil masking is used (\[video\](https://www.youtube.com/watch?v=nMfQeotbN8s)).
> 
> \### Argument for
> 
> There are a few things in three.js that already work like this i think. \`defines\`, \`customDepthMaterial\` are the two that pop to mind - you could set them, and they would make \`WebGLRenderer\` do certain things, but were not present in documentation for a long time. This does not change the behavior of the renderer in any way, and allows WebGL to be fully utilized. 
> 
> \### Optional
> 
> Document it:
> 
> \> Sets the render buffer on the target. If one is not provided, three creates one internally for this target. You can share render buffers between targets:
> \`\`\`
> const gl = renderer.getContext()
> 
> const buffer = gl.createRenderBuffer()
> 
> targetA.ownDepthBuffer = buffer
> targetB.ownDepthBuffer = buffer
> \`\`\`
> 
> \### Future (if accepted)
> 
> Make an API:
> 
> \`\`\`
> const buffer = new THREE.RenderBuffer(config)
> 
> targetA.depthBuffer = buffer
> targetB.depthBuffer = buffer
> \`\`\`

[https://tsherif.github.io/webgl2examples/oit-dual-depth-peeling.html](https://tsherif.github.io/webgl2examples/oit-dual-depth-peeling.html)

---

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [August 9, 2024, 8:53am UTC](https://discourse.threejs.org/t/transparency-issue/69055/3 "2024-08-09T08:53:29Z")

</div>

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

> <https://stackoverflow.com/questions/36947704/rendering-a-transparent-shell>