Source Code


 
<!-- Use minimal HTML tags and error handling for brevity -->
<head>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 vPosition;

  void main() {
     gl_Position = vPosition;
  }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
      gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // green color
  }
</script>

<script type="text/javascript">
//////////////////////////////////////////////////////////////////////////////////////////////

var gl = null; // Hold WebGL context object

function draw() { // Draw the picture
    var vertices = [ 0.0, 0.5, 0.0,
                            -0.5, -0.5, 0.0,
                            0.5, -0.5, 0.0 ];
    gl.bufferData(gl.ARRAY_BUFFER, new CanvasFloatArray(vertices), gl.STATIC_DRAW);

    gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0); // Load the vertex data
    gl.enableVertexAttribArray(0);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    gl.flush();
}

function error(errorMessage) {
    alert(errorMessage + " Please see http://learnwebgl.blogspot.com/");
}

function getFragmentShader() {
    var shaderNode = document.getElementById("fragmentShader"); // fragmentShader has been defined at the top
    var shaderSource = getShaderSource(shaderNode);

    var shader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);

    return shader;
}

function getGl() {
    var theCanvas = document.getElementById("webGlCanvas");

    gl = theCanvas.getContext("moz-webgl"); // Firefox
    if (!gl)
        gl = theCanvas.getContext("webkit-3d"); // Safari or Chrome

    if (!gl)
        error("Failed to get WebGL context.");
}

function getShaderSource(shaderNode) {
    var shaderSource = "";
    var node = shaderNode.firstChild;
    while (node) {
        if (node.nodeType == 3) // Node.TEXT_NODE
            shaderSource += node.textContent;
        node = node.nextSibling;
    }

    return shaderSource;
}

function getVertexShader() {
    var shaderNode = document.getElementById("vertexShader"); // vertexShader has been defined at the top
    var shaderSource = getShaderSource(shaderNode);

    var shader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);

    return shader;
}

function initialize() {
    getGl();

    var vertexShader = getVertexShader();
    var fragmentShader = getFragmentShader();

    var shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.bindAttribLocation(shaderProgram, 0, "vPosition"); // vPosition has been defined at the top
    gl.linkProgram(shaderProgram);

    gl.useProgram(shaderProgram);

     var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // Bind a buffer object. Accepted values for target are: ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER

}

// Main program starts here. The above functions are alphabetical order
function main() {
    initialize();
    draw();
} // main

window.onload = main; // Call the main() function when the window has been loaded

//////////////////////////////////////////////////////////////////////////////////////////////
</script>
</head>

<canvas id="webGlCanvas" style="border: 1px solid green" width="300" height="300"></canvas>


Go to Learn WebGL blog.