I am faced with the challenge of rendering two cubes on a single non-indexed buffer geometry. My goal is to make these cubes transparent so that all sides are visible simultaneously. To achieve this, I aim to utilize the "vertexAlphas" material property to specify an alpha value for each face of the geometry through the color attribute.
Below is my code snippet:
const geometry = new THREE.BufferGeometry()
const vertices = getVertices() // retrieves array of vertices for the two cubes
const colors = getColors() // retrieves rgba values for the two cubes
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3))
geometry.setAttribute('color', new THREE.BufferAttribute(new Uint8Array(colors)), 4))
geometry.attributes.color.normalized = true
geometry.computeVertexNormals()
const material = new THREE.MeshStandardMaterial({ transparent: true, vertexColors: true, vertexAlphas: true })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)This implementation successfully achieves transparency for the cubes. However, the middle faces are only visible from one side.
Front view: https://i.sstatic.net/8T7D1.png
Rear view: https://i.sstatic.net/CE67C.png
The issue appears to be related to the depthWrite function. While setting DepthWrite to false could potentially resolve it, I require the flexibility to have one of the cubes opaque, making this solution unsuitable. Is there a method to essentially "bypass" depthWrite for the transparent faces (or a similar approach) to ensure everything behind them is always visible regardless of the viewing angle? I prefer to maintain the usage of the vertex alpha property rather than resorting to grouping and multiple materials to avoid multiple render calls.
Could a custom shader offer a solution? Without knowledge in writing a custom shader, I would appreciate insights on whether this approach could be effective. Thank you to anyone able to provide guidance!