WebGL : How do make part of an object transparent?

Question

I have a 3D ball in the browser , now I want to dig a hole on it to see its back.

How can I make it possiable ?

For example, I want the white triangle part of the cube could be transparent(I mean we could see the background behind the cube).

I've tried to change the alpha in fragment shader(the area in the code is a square not triangle, doesn't matter):

<script id="shader-fs-alpha" type="x-shader/x-fragment">
    precision mediump float;

    varying vec4 vColor;

    uniform float uAlpha;

    void main(void) {
      if( gl_FragCoord.x < 350.0 && gl_FragCoord.x > 300.0
        && gl_FragCoord.y < 300.0 && gl_FragCoord.y > 230.0
        ) {
        gl_FragColor = vec4(0, 0 ,0, 0.0);
      } else {
        gl_FragColor = vec4(vColor.rgb, 1.0);
      }
    }
</script>

This actually works but the area turns to be white(not transparent), so then I tried to enable blending, but that makes the whole cube transparent.

So now I thought if there's a way to enable bleanding in fragment shader and I could disable it in the else block.

Here's my whole project https://gist.github.com/royguo/5873503:

• index.html : Shader script here.
• buffers.js : All obejcts here.
• shaders.js : Init shaders.

Answer 1

You should use stencil buffer. 2 steps: One, draw the triangle on stencil. Two, draw the cube with stencil test.

// you can use this code multiple time without clearing stencil
// just increment mask_id
mask_id = 1;

// allow to draw inside or outside mask
invert_mask = false;

1) Activate stencil buffer. Configure it: no testing and write mask_id value

glEnable(GL_STENCIL_TEST);
glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);
glStencilFunc(GL_ALWAYS, mask_id, 0);

2) Remove color & depth writing

glDepthMask(GL_FALSE);
glColorMask(GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE);

3) here draw your triangle :)

4) Enabled depth & color writing for the cube

glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE);
glDepthMask(GL_TRUE);

5) Configure stencil for the cube: no writing and test stencil value

glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);
glStencilFunc(invert_mask ? GL_NOTEQUAL : GL_EQUAL, mask_id, 0xff);

6) here draw your cube :)

7) cleanup: remove stencil test

glDisable(GL_STENCIL_TEST);

Don't forget to request a stencil when you create your opengl context (see WebGLContextAttributes, second parameter of getContext)

This code run well with Opengl ES 2 on Ios platform. It didn't depend of any extension. WebGL use the same API.

The only small defect: no msaa on triangle borders. There is no free lunch :)

Answer 2

You could render part of the scene without the object (or the objects insides) to a texture and then project the texture onto a surface in front of the object. Just make sure that the surface faces the camera directly (is parallel to the x-y-plane in cam-space) and that the texture is rendered with the same center and perspective as the screen.

Use Learning WebGL: Rendering to Textures if you require help doing this. You should also check the light options to make sure the surface itself isn't affected by the lighting that your object gets.

Also: official WebGL reference sheet

Answer 3

try add these lines

glEnable (GL_BLEND);                                                              
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

It worked for me with OpenGL ES.

Answer 4

Or remove some triangles from the ball mesh, or apply texture to it that has transparent parts, turn on blending and turn off any type of culling, so you don't loose back-oriented triangles.

EDIT:

Here's a tutorial on blending in webGL: http://learningwebgl.com/blog/?p=859 You have multiple modes to choose from how two pixels will me blended, and by adjusting alpha values you could have anything you want.

Eventually, you apply texture that has alpha set to 1.0 everywhere, except those parts where it should be "hollow" and then enable blending. I hope I made myself clear.

TIP: Instead of reading documentation (which sometimes can be more confusing than helping), try this http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm,. It lists all functions in a very nice manner.