<!-- 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.