User Tools

Site Tools


Sidebar

General

Python Tutorials

WebGL Tutorials

Node.js Tutorials

Node.js in WebStorm


Martin Christen

View Martin Christen's profile on LinkedIn


Twitter

Timeline of @MartinChristen

MartinChristen avatar

I just signed up as @europython volunteer. Still many spaces available! Do it now! https://t.co/Bam6ZJCjFR
About 2 days ago by: Martin Christen (@MartinChristen)

MartinChristen avatar

@Mr_Robinini I will do a talk about this at @EuroSciPy in August...
About 2 days, 22 hours ago by: Martin Christen (@MartinChristen)

MartinChristen avatar

@Mr_Robinini Try jupyterhub, you can start jupyterlab too (change config file). https://t.co/kDKr9oV946
About 2 days, 22 hours ago by: Martin Christen (@MartinChristen)
webgl:tutorial03

WebGL Tutorial 3: Draw a Checkerboard in Shader

(unfinished: work in progress)

In the next few tutorials we focus on the fragment shader. For that we draw two triangles filling the entire canvas:

The goal is to draw some procedural images like the checkerboard shown here:

The Code

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script id="vertexshader" type="x-shader">
      attribute vec2 aVertexPosition;
      varying vec2 pos;

      void main() {
      gl_Position = vec4(aVertexPosition, 0.0, 1.0);
      pos = aVertexPosition;
      }
   </script>
   <script id="fragmentshader" type="x-shader">
      #ifdef GL_ES
      precision highp float;
      #endif

      uniform vec4 uColor;
      varying vec2 pos;

      void main() {
         float x = 0.5*(pos.x+1.0); // range [0,1]
         float y = 0.5*(pos.y+1.0); // range [0,1]
         // checkerboard shader:
         if ((mod(4.0*x, 1.0) < 0.5) ^^ (mod(4.0*y, 1.0) < 0.5))
         {
            gl_FragColor = vec4(0.0,0.0,0.0,1.0);
         }
         else
         {
            gl_FragColor = vec4(x,1.0,1.0-y,1.0);
         }
      }
   </script>
   <script type="text/javascript">

      function initWebGL()
      {
         var canvas = document.getElementById("canvas");
         var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
         if (!gl) return null; // can't initialize WebGL
         return gl;
      }

      function main()
      {
         var gl = initWebGL();

         // Setup Shaders:
         var v = document.getElementById("vertexshader").firstChild.nodeValue;
         var f = document.getElementById("fragmentshader").firstChild.nodeValue;

         var vs = gl.createShader(gl.VERTEX_SHADER);
         gl.shaderSource(vs, v);
         gl.compileShader(vs);

         if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
            alert(gl.getShaderInfoLog(vs));

         var fs = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(fs, f);
         gl.compileShader(fs);

         if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
            alert(gl.getShaderInfoLog(fs));

         program = gl.createProgram();
         gl.attachShader(program, vs);
         gl.attachShader(program, fs);
         gl.linkProgram(program);


         if (!gl.getProgramParameter(program, gl.LINK_STATUS))
            alert(gl.getProgramInfoLog(program));

         // Setup Geometry
         var vertices = new Float32Array([
            -1, 1, 1, 1, 1,-1,  // Triangle 1
            -1, 1, 1,-1,-1,-1   // Triangle 2
         ]);

         vbuffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
         gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

         itemSize = 2; // we have 2 triangles!
         numItems = vertices.length / itemSize;

         // Viewport
         gl.viewport(0, 0, canvas.width, canvas.height);
         gl.clearColor(0, 0, 0, 1);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

         // Setup Geometry:
         gl.useProgram(program);

         program.uColor = gl.getUniformLocation(program, "uColor");
         gl.uniform4fv(program.uColor, [0.5, 0.0, 0.0, 1.0]);

         program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
         gl.enableVertexAttribArray(program.aVertexPosition);
         gl.vertexAttribPointer(program.aVertexPosition, itemSize, gl.FLOAT, false, 0, 0);

         // Draw:
         gl.drawArrays(gl.TRIANGLES, 0, numItems);
      }
   </script>
</head>
<body onload="main()">
<div style="text-align: center">
   <canvas id="canvas" width="512" height="512"></canvas>
</div>
</body>
</html>


webgl/tutorial03.txt ยท Last modified: 2013/09/03 15:32 by mchristen