Changes between Initial Version and Version 1 of webgl


Ignore:
Timestamp:
Oct 4, 2013, 4:09:40 PM (10 years ago)
Author:
Leon Kos
Comment:

Demo

Legend:

Unmodified
Added
Removed
Modified
  • webgl

    v1 v1  
     1
     2== WebGL ==
     3
     4{{{
     5#!html
     6<b>hi</b>
     7<script type=”text/javascript”>
     8var gl;
     9var canvas;
     10var shaderProgram;
     11var vertexBuffer;
     12 
     13function createGLContext(canvas) {
     14  var names = [“webgl”, “experimental-webgl”];
     15  var context = null;
     16  for (var i=0; i < names.length; i++) {
     17    try {
     18      context = canvas.getContext(names[i]);
     19    } catch(e) {}
     20    if (context) {
     21      break;
     22    }
     23  }
     24  if (context) {
     25    context.viewportWidth = canvas.width;
     26    context.viewportHeight = canvas.height;
     27  } else {
     28    alert(“Failed to create WebGL context!”);
     29  }
     30  return context;
     31}
     32
     33function loadShader(type, shaderSource) {
     34  var shader = gl.createShader(type);
     35  gl.shaderSource(shader, shaderSource);
     36  gl.compileShader(shader);
     37 
     38  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
     39      alert(“Error compiling shader” + gl.getShaderInfoLog(shader));
     40      gl.deleteShader(shader);   
     41      return null;
     42  }
     43  return shader; 
     44}
     45 
     46function setupShaders() {
     47  var vertexShaderSource =
     48    “attribute vec3 aVertexPosition;                 \n” +
     49    “void main() {                                   \n” +
     50    “  gl_Position = vec4(aVertexPosition, 1.0);     \n” +
     51    “}                                               \n”;           
     52   
     53   var fragmentShaderSource =
     54     “precision mediump float;                    \n”+
     55     “void main() {                               \n”+
     56     “  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);  \n”+
     57     “}                                           \n”;
     58     
     59  var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
     60  var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
     61 
     62  shaderProgram = gl.createProgram();
     63  gl.attachShader(shaderProgram, vertexShader);
     64  gl.attachShader(shaderProgram, fragmentShader);
     65  gl.linkProgram(shaderProgram);
     66 
     67  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
     68    alert(“Failed to setup shaders”);
     69  }
     70 
     71  gl.useProgram(shaderProgram);
     72 
     73  shaderProgram.vertexPositionAttribute =
     74  gl.getAttribLocation(shaderProgram, “aVertexPosition”);
     75}
     76 
     77function setupBuffers() {
     78  vertexBuffer = gl.createBuffer();
     79  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     80  var triangleVertices = [
     81         0.0,  0.5,  0.0,
     82        -0.5, -0.5,  0.0,
     83         0.5, -0.5,  0.0
     84  ];
     85  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices),
     86  gl.STATIC_DRAW);
     87  vertexBuffer.itemSize = 3;
     88  vertexBuffer.numberOfItems = 3;
     89}
     90 
     91function draw() {   
     92  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
     93  gl.clear(gl.COLOR_BUFFER_BIT);
     94 
     95  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
     96                         vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
     97               
     98  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
     99                         
     100  gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
     101}
     102 
     103function startup() {
     104  canvas = document.getElementById(“myGLCanvas”);
     105  gl = createGLContext(canvas);
     106  setupShaders();
     107  setupBuffers();
     108  gl.clearColor(0.0, 0.0, 0.0, 1.0);
     109  draw(); 
     110}
     111</script>
     112 
     113</head>
     114 
     115<canvas id=”myGLCanvas” width=”500” height=”500”></canvas>
     116<form><input type="button" value="Draw" onclick="startup()"/></form>
     117
     118}}}