Changes between Version 4 and Version 5 of webgl


Ignore:
Timestamp:
Oct 4, 2013, 4:32:48 PM (7 years ago)
Author:
Leon Kos
Comment:

startup

Legend:

Unmodified
Added
Removed
Modified
  • webgl

    v4 v5  
    44{{{
    55#!html
    6 <b>hi</b>
    76<script type="text/javascript">
    87var gl;
     
    109108  draw(); 
    110109}
     110
     111startup();
    111112</script>
    112113
     
    115116
    116117}}}
     118
     119{{{
     120#!javascript
     121<script type="text/javascript">
     122var gl;
     123var canvas;
     124var shaderProgram;
     125var vertexBuffer;
     126 
     127function createGLContext(canvas) {
     128  var names = ["webgl", "experimental-webgl"];
     129  var context = null;
     130  for (var i=0; i < names.length; i++) {
     131    try {
     132      context = canvas.getContext(names[i]);
     133    } catch(e) {}
     134    if (context) {
     135      break;
     136    }
     137  }
     138  if (context) {
     139    context.viewportWidth = canvas.width;
     140    context.viewportHeight = canvas.height;
     141  } else {
     142    alert("Failed to create WebGL context!");
     143  }
     144  return context;
     145}
     146
     147function loadShader(type, shaderSource) {
     148  var shader = gl.createShader(type);
     149  gl.shaderSource(shader, shaderSource);
     150  gl.compileShader(shader);
     151 
     152  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
     153      alert("Error compiling shader" + gl.getShaderInfoLog(shader));
     154      gl.deleteShader(shader);   
     155      return null;
     156  }
     157  return shader; 
     158}
     159 
     160function setupShaders() {
     161  var vertexShaderSource =
     162    "attribute vec3 aVertexPosition;                 \n" +
     163    "void main() {                                   \n" +
     164    "  gl_Position = vec4(aVertexPosition, 1.0);     \n" +
     165    "}                                               \n";           
     166   
     167   var fragmentShaderSource =
     168     "precision mediump float;                    \n"+
     169     "void main() {                               \n"+
     170     "  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);  \n"+
     171     "}                                           \n";
     172     
     173  var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
     174  var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
     175 
     176  shaderProgram = gl.createProgram();
     177  gl.attachShader(shaderProgram, vertexShader);
     178  gl.attachShader(shaderProgram, fragmentShader);
     179  gl.linkProgram(shaderProgram);
     180 
     181  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
     182    alert("Failed to setup shaders");
     183  }
     184 
     185  gl.useProgram(shaderProgram);
     186 
     187  shaderProgram.vertexPositionAttribute =
     188  gl.getAttribLocation(shaderProgram, "aVertexPosition");
     189}
     190 
     191function setupBuffers() {
     192  vertexBuffer = gl.createBuffer();
     193  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
     194  var triangleVertices = [
     195         0.0,  0.5,  0.0,
     196        -0.5, -0.5,  0.0,
     197         0.5, -0.5,  0.0
     198  ];
     199  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices),
     200  gl.STATIC_DRAW);
     201  vertexBuffer.itemSize = 3;
     202  vertexBuffer.numberOfItems = 3;
     203}
     204 
     205function draw() {   
     206  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
     207  gl.clear(gl.COLOR_BUFFER_BIT);
     208 
     209  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
     210                         vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
     211               
     212  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
     213                         
     214  gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
     215}
     216 
     217function startup() {
     218  canvas = document.getElementById("myGLCanvas");
     219  gl = createGLContext(canvas);
     220  setupShaders();
     221  setupBuffers();
     222  gl.clearColor(0.0, 0.0, 0.0, 1.0);
     223  draw(); 
     224}
     225</script>
     226
     227<canvas id="myGLCanvas" width="500" height="500"></canvas>
     228<form><input type="button" value="Draw" onclick="startup()"/></form>
     229
     230}}}
     231