Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>Minimum WebGL Page</title>
</head>
<body onload="start()">
  <canvas id="mycanvas" width="200" height="200"></canvas>
</body>
​
<!-- All of the magic follows in the scripts. I've tried to put it
   all in one big function so everything is in one place -->
<script type="text/javascript">
// global variables ?
var gl;
var trianglePosBuffer;
var shaderProgram;
​
   var vertexPos = [
         -.5,  .5,  0.0,
         -.5, .75,  0.0,
         -.75, .75,  0.0,
         -.75, .75,  0.0,
         -.75, .5, 0,
         -.5,  .5, 0
    ];
​
function start()
{
  // first we need to get the canvas and make an OpenGL context
  // in practice, you need to do error checking
    var canvas = document.getElementById("mycanvas");
  gl = canvas.getContext("experimental-webgl");
​
  // now we can do standard OpenGL stuff
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
​
  // make a triangle in a buffer
  trianglePosBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, trianglePosBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPos), gl.STATIC_DRAW);
    trianglePosBuffer.itemSize = 3;
    trianglePosBuffer.numItems = 6;
​
  // make the shaders
  // the getShader is defined below - it just runs the compiler 
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");
​
    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
​
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
      alert("Could not initialise shaders");
    }
​
    gl.useProgram(shaderProgram); 
    
    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
    
    drawScene();
}
​
function drawScene()
{
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
​
    gl.bindBuffer(gl.ARRAY_BUFFER, trianglePosBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, trianglePosBuffer.itemSize, gl.FLOAT, false, 0, 0);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
}
​
// nifty function that grabs a shader stored as a page script
// and compiles it based on the MIME type
// 
// this script is all over the web, i think I got it from:
// http://learningwebgl.com/cookbook/index.php/Loading_shaders_from_HTML_script_tags
 function getShader(gl, id) {
      var shaderScript = document.getElementById(id);
      if (!shaderScript) {
          return null;
      }
​
      var str = "";
      var k = shaderScript.firstChild;
      while (k) {
          if (k.nodeType == 3)
              str += k.textContent;
          k = k.nextSibling;
      }
​
      var shader;
      if (shaderScript.type == "x-shader/x-fragment") {
          shader = gl.createShader(gl.FRAGMENT_SHADER);
      } else if (shaderScript.type == "x-shader/x-vertex") {
          shader = gl.createShader(gl.VERTEX_SHADER);
      } else {
          return null;
      }
​
      gl.shaderSource(shader, str);
      gl.compileShader(shader);
​
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
          alert(gl.getShaderInfoLog(shader));
          return null;
      }
​
      return shader;
  }
</script>   
    
<!-- SHADERS FOLLOW -->  
<script id="shader-fs" type="x-shader/x-fragment">
  #ifdef GL_ES
  precision highp float;
  #endif
​
  void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
</script>
​
<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
​
  void main(void) {
    gl_Position = vec4(aVertexPosition, 1.0);
  }
</script>
​
</html>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x