MENU


Fragment Coordinates

The fragment shader provides two built-in variables:
gl_FragCoord stores the window coordinates of the fragment.
gl_PointCoord is a 2-dimensional vector that stores the position of the fragment in the drawn point (0.0,1.0).
Note that gl_PointSize and gl_PointCoord are applicable only for point rasterization only, ie. when the drawing 'mode' is POINTS.

This draws a round, colorful circle at the center.
RESETRUNFULL
<!DOCTYPE html><html>
<head>
<script src="/shared/webgl-library.js"></script>
<script id="vs" type="x-shader/x-vertex">
   void main(){
      gl_Position = vec4(0.0,0.0,0.0,1.0);
      gl_PointSize=100.0;
   }
</script>
<script id="fs" type="x-shader/x-fragment">
   precision mediump float;
   void main(){
      float dist=distance(gl_PointCoord,vec2(0.5,0.5));
      if (dist<0.5){
         gl_FragColor=vec4(gl_PointCoord,0.0,1.0);
      } else {
         discard;
      }
   }
</script>
<script>
function draw_point(){
   var canvas = document.getElementById("myCanvas");
   var gl = canvas.getContext("webgl");
   initShaders(gl,"vs","fs");
   gl.clearColor(0.0,0.0,0.0,1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.drawArrays(gl.POINTS,0,1);
}
</script>
</head>
<body onload="draw_point()">
   <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>