html5 - WebGL : How do make part of an object transparent? -

I have a 3D ball in the browser, now I want to lose the hole on it to look back.

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

I snapped the alpha Tried to change the shader (the area of ​​the code is not the square of the triangle, it does not matter):

  & lt; Script id = "shader-fs-alpha" type = "x-shader / x-piece" & gt; Exact maturation float; VC4 vColor different; Uniform float UALIFA; Zero main (zero) {if (gl_FragCoord.x> <350.0 & amp; gl_FragCoord.x> 300.0 & amp; gl_FragCoord.y & lt; 300.0 & amp; gl_FragCoord.y> 230.0) {Gl_FragColor = vec4 0, 0, 0, 0.0); } And {gl_FragColor = vec4 (vColor.rgb, 1.0); }} & Lt; / Script & gt;   
 It actually works but the area becomes white (not transparent), so I tried to enable blending, but it makes the whole cube transparent.  
  So now I thought that if the piece is a way of enabling  bleanding  in the vibrator and I can disable it in the  else  block I am   
 Here's my complete project:  
 
 index.html: Shader script here.  
 buffers.js: All the objects here  
 shaders.js: Init shaders    
 
 
 You should use stencil buffer. Step 2: One, drag the triangle on the stencil. Two, pull the cube with stencil test.  
  // You can use this code multiple times without stencil clearing // just increase mask_id mask_id = 1; // mask allow invert_mask = false to draw inside or out;   
 1) Activate stencil buffer. Configure it: There is no test and type Mask_ID value  
  Glennable (GL_STENCIL_TEST); GlStencilOp (GL_KEEP, GL_KEEP, GL_REPLACE); GlStencilFunc (GL_ALWAYS, Mask_ID, 0);   
 2) Remove Color & amp; Writing Depth  
  Gladrupt Mask (GL_FSLASE); GlColorMask (GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE);   
 3) Attract your triangle here :)  
 4) Enable Depth & amp; Writing color for the cube  
  glColorMask (GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE); GlDepthMask (GL_TRUE);   
 5) Configure the stencil for the cube: any writing and test stencil value  
  glStencilOp (GL_KEEP, GL_KEEP, GL_KEEP); GlStencilFunc (invert_mask? GL_NOTEQUAL: GL_EQUAL, Mask_ID, 0xff);   
 6) Attract your cube here :)  
 7) Cleaning: Remove stencil test  
  glDisable (GL_STENCIL_TEST );   
 When you make your OpenLeag reference (see WebGLContextAttributes, see the second parameter of getContext) Do not forget to request a stencil  
 This code is openLs2 Runs well with the IOS platform it was not dependent on any detail. WebGL uses the same API.  
 The only minor defect: No msaa at triangle boundaries There is no free meal :)