Prof. Hart's
JavaScript
Tryer Outer
Run
<!DOCTYPE HTML> <html> <body onload="main();"> <canvas id="myGLCanvas" width="500" height="500"></canvas> </body> <script> function main() { var canvas = document.getElementById("myGLCanvas"); var gl = canvas.getContext("webgl"); if (!gl) alert("Failed to create WebGL context!"); var vertexShaderSource = "attribute vec3 aVertexPosition; \n" + "void main() { \n" + " gl_Position = vec4(aVertexPosition, 1.0); \n" + "} \n"; var vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) alert(gl.getShaderInfoLog(vertexShader)); var fragmentShaderSource = "precision mediump float; \n"+ "void main() { \n"+ " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); \n"+ "} \n"; var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) alert(gl.getShaderInfoLog(fragmentShader)); var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) alert("Failed to setup shaders"); gl.useProgram(shaderProgram); shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); var vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); var triangleVertices = [ 0.0, 0.5, 0.0, -0.5, -0.5, 0.0, 0.5, -0.5, 0.0 ]; gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW); vertexBuffer.itemSize = 3; vertexBuffer.numberOfItems = 3; gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems); } </script> </html>