Changes between Version 4 and Version 5 of webgl

Timestamp:

Oct 4, 2013, 4:32:48 PM (11 years ago)

Author:

Leon Kos

Comment:

startup

webgl

@@ -4 +4 @@
 {{{
 #!html
-<b>hi</b>
 <script type="text/javascript">
 var gl;
@@ -109 +108 @@
   draw();  
 }
+
+startup();
 </script>
 
@@ -115 +116 @@
 
 }}}
+
+{{{
+#!javascript
+<script type="text/javascript">
+var gl;
+var canvas;
+var shaderProgram;
+var vertexBuffer;
+ 
+function createGLContext(canvas) {
+  var names = ["webgl", "experimental-webgl"];
+  var context = null;
+  for (var i=0; i < names.length; i++) {
+    try {
+      context = canvas.getContext(names[i]);
+    } catch(e) {}
+    if (context) {
+      break;
+    }
+  }
+  if (context) {
+    context.viewportWidth = canvas.width;
+    context.viewportHeight = canvas.height;
+  } else {
+    alert("Failed to create WebGL context!");
+  }
+  return context;
+}
+
+function loadShader(type, shaderSource) {
+  var shader = gl.createShader(type);
+  gl.shaderSource(shader, shaderSource);
+  gl.compileShader(shader);
+  
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      alert("Error compiling shader" + gl.getShaderInfoLog(shader));
+      gl.deleteShader(shader);   
+      return null;
+  }
+  return shader;  
+}
+ 
+function setupShaders() {
+  var vertexShaderSource = 
+    "attribute vec3 aVertexPosition;                 \n" +
+    "void main() {                                   \n" +
+    "  gl_Position = vec4(aVertexPosition, 1.0);     \n" +
+    "}                                               \n";           
+   
+   var fragmentShaderSource = 
+     "precision mediump float;                    \n"+
+     "void main() {                               \n"+
+     "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);  \n"+
+     "}                                           \n";
+     
+  var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
+  var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
+  
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+ 
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Failed to setup shaders");
+  }
+ 
+  gl.useProgram(shaderProgram);
+  
+  shaderProgram.vertexPositionAttribute = 
+  gl.getAttribLocation(shaderProgram, "aVertexPosition"); 
+}
+ 
+function setupBuffers() {
+  vertexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  var triangleVertices = [
+         0.0,  0.5,  0.0,
+        -0.5, -0.5,  0.0,
+         0.5, -0.5,  0.0
+  ];
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices),
+  gl.STATIC_DRAW);
+  vertexBuffer.itemSize = 3;
+  vertexBuffer.numberOfItems = 3;
+}
+ 
+function draw() {    
+  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  
+  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 
+                         vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
+                
+  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+                          
+  gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
+}
+ 
+function startup() {
+  canvas = document.getElementById("myGLCanvas");
+  gl = createGLContext(canvas);
+  setupShaders(); 
+  setupBuffers();
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  draw();  
+}
+</script>
+
+<canvas id="myGLCanvas" width="500" height="500"></canvas>
+<form><input type="button" value="Draw" onclick="startup()"/></form>
+
+}}}
+