MENU


Facet Culling

A triangle has two sides – the front side and the backside. It is possible to draw only one side without drawing the other side.

frontFace(mode) specifies which side is considered to be the front side. 'mode' can be 'CCW' (vertices specified in counter-clockwise order) or 'CW' (vertices specified in clockwise order).

cullFace(mode) specifies which side to discard. 'mode' can be 'BACK', 'FRONT', or 'FRONT_AND_BACK'.

Nothing is drawn, as the front side is discarded.
RESETRUNFULL
<!DOCTYPE html><html>
<head>
<script src="/shared/webgl-library.js"></script>
<script>
var VS_SOURCE=`
   attribute vec4 p;
   attribute vec4 c;
   varying vec4 c2;
   void main(){
      c2=c;
      gl_Position = p; 
      gl_PointSize=20.0;
   }`;
var FS_SOURCE=`
   precision mediump float;
   varying vec4 c2;
   void main(){
      gl_FragColor=c2;
   }`;
var gl, m, mL;function start(){
   var canvas = document.getElementById("myCanvas");
   gl = canvas.getContext("webgl");
   initShaders(gl, VS_SOURCE, FS_SOURCE);
   var points=new Array();
   var vc= new Float32Array([ 0.0,-0.5,0.0,  1.0, 0.0, 0.0,
                             -0.5, 0.5,0.0,  1.0, 0.0, 0.0,
                              0.5, 0.5,0.0,  1.0, 0.0, 0.0]);
   var ESIZE=vc.BYTES_PER_ELEMENT;
   var b=gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, b);
   gl.bufferData(gl.ARRAY_BUFFER, vc, gl.STATIC_DRAW);
   pL=gl.getAttribLocation(gl.program, 'p');
   gl.vertexAttribPointer(pL, 3, gl.FLOAT, false, ESIZE*6, 0);
   gl.enableVertexAttribArray(pL);
   cL=gl.getAttribLocation(gl.program, 'c');
   gl.vertexAttribPointer(cL, 3, gl.FLOAT, false, ESIZE*6, ESIZE*3);
   gl.enableVertexAttribArray(cL);
   gl.enable(gl.CULL_FACE);
   gl.frontFace(gl.CW);
   gl.cullFace(gl.FRONT);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   gl.drawArrays(gl.TRIANGLES, 0, 3);}</script></head><body onload="start()">
   <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>