WebGL - culling mesh and hide the border

user_19508993 0
Viewed 26

I have the following problem in WebGL. I 'm drawing a a simple mesh with a border in the 3D space with the culling activated.

gl.frontFace(gl.CCW);
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.FRONT)

If the camera is set in front of the mesh, it is correcly visualized with the border FrontView

But if the camere is set back the mesh the border does not disappear BackView

The internal part of the mesh is draw as triangles

gl.drawElements(gl.TRIANGLES, indexBuffer.numberOfItems, gl.UNSIGNED_SHORT, 0);

while the border as LINE_STRIP

gl.drawElements(gl.LINE_STRIP, borderIndex.numberOfItems, gl.UNSIGNED_SHORT, 0);

Is there any option for lines to have the same behavior of the mesh without using normals in the shader?

webgl javascript
1 Answers

While triangles have an inherent front and back face based on their winding order lines don't have that so they're not affected by hardware culling.

user_9780570
Related