WebGL Triangle

by soulwire

HTML

<!-- Vertex shader -->
<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec4 vPosition;
    void main() {
        gl_Position = vPosition;
    }
</script>

<!-- Fragment shader -->
<script id="shader-fs" type="x-shader/x-fragment">
    precision highp float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
</script>

<!-- Canvas -->
<canvas id="canvas" width="500" height="500"></canvas>

CSS

html, body {
    background: #f2f2f2;
}
#canvas {
    background: #222;
}

JavaScript

var gl;
var shaderProgram;
var vertexBuffer;
var vertexAttrLoc;

var canvas = document.getElementById('canvas');

// Initialises WebGL context (if available)
function initGL(canvas) {
    try {
        gl = canvas.getContext('experimental-webgl');
        gl.viewport(0, 0, canvas.width, canvas.height);
    } catch(error) {}
}

// Loads and compiles shader code from the DOM
function loadShader(id) {
    var src = document.getElementById(id);
    
    if (!src) { return null; }
 
    var str = "";
    var k = src.firstChild;
    while (k) {
      if (k.nodeType == 3) {
        str += k.textContent;
      }
      k = k.nextSibling;
    }
 
    var shader;
    if (src.type == "x-shader/x-fragment") {
      shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (src.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;
}

// Initialises shaders and creates the shader program
function initShaders() {
    var vertShader = loadShader('shader-vs');
    var fragShader = loadShader('shader-fs');
    
    shaderProgram = gl.createProgram();
    
    gl.attachShader(shaderProgram, vertShader);
    gl.attachShader(shaderProgram, fragShader);
    gl.linkProgram(shaderProgram);
    
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }
    
    vertexAttrLoc = gl.getAttribLocation(shaderProgram, "vPosition");
    
    gl.useProgram(shaderProgram);
}

// Create shape buffers
function initBuffers() {
    var vertices = [
        -0.5, -0.5, 0.0,
         0.0,  0.5, 0.0,
         0.5, -0.5, 0.0
    ];
    
    vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new...