This JavaScript program demonstrates how to draw a cross in a WebGL program.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>XoaX.net's WebGL</title> </head> <body> <script type="text/javascript" src="DrawACross.js"></script> <canvas id="idCanvasGL" width="512" height="512"></canvas> </body> </html>
function Start() { try { // Get the WebGL context var qGL = document.getElementById("idCanvasGL").getContext("webgl"); if (!qGL) { throw "WebGL is not supported by your web browser."; } // Create the vertex shader var qVS = qGL.createShader(qGL.VERTEX_SHADER); // w = 5.0 scales by 1/5 qGL.shaderSource(qVS, "attribute vec2 qVertex;"+ "void main() {"+ " gl_Position = vec4(qVertex, 0.0, 5.0);"+ "}"); qGL.compileShader(qVS); if (!qGL.getShaderParameter(qVS, qGL.COMPILE_STATUS)) { throw "Vertex shader compiler failed: "+qGL.getShaderInfoLog(qVS); } // Create the fragment shader var qFS = qGL.createShader(qGL.FRAGMENT_SHADER); qGL.shaderSource(qFS, "void main() {"+ " gl_FragColor = vec4(0.4, 0.3, 0.0, 1.0);"+ "}"); qGL.compileShader(qFS); if (!qGL.getShaderParameter(qFS, qGL.COMPILE_STATUS)) { throw "Fragment shader compiler failed:"+qGL.getShaderInfoLog(qFS); } // Create and link the program var qProgram = qGL.createProgram(); qGL.attachShader(qProgram, qVS); qGL.attachShader(qProgram, qFS); qGL.linkProgram(qProgram); if (!qGL.getProgramParameter(qProgram, qGL.LINK_STATUS)) { throw "Program linker failed!"; } qGL.useProgram(qProgram); // Draw qGL.clearColor(.5, 0.8, 0.5, 1); qGL.clear(qGL.COLOR_BUFFER_BIT); qGL.bindBuffer(qGL.ARRAY_BUFFER, qGL.createBuffer()); qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array([ -.5, -4.5, .5, -4.5, -.5, 2.5, .5, 2.5, 2.5, -.5, 2.5, .5, .5, -.5, .5, .5, -2.5, .5, -2.5, -.5, -.5, .5, -.5, -.5, ]), qGL.STATIC_DRAW); var qAttr = qGL.getAttribLocation(qProgram, "qVertex"); qGL.enableVertexAttribArray(qAttr); qGL.vertexAttribPointer(qAttr, 2, qGL.FLOAT, false, 0, 0); qGL.drawArrays(qGL.TRIANGLE_STRIP, 0, 4); qGL.vertexAttribPointer(qAttr, 2, qGL.FLOAT, false, 0, 32); qGL.drawArrays(qGL.TRIANGLE_STRIP, 0, 4); qGL.vertexAttribPointer(qAttr, 2, qGL.FLOAT, false, 0, 64); qGL.drawArrays(qGL.TRIANGLE_STRIP, 0, 4); } catch (qEx) { alert("Error: " + qEx); } } window.onload = Start;
© 20072024 XoaX.net LLC. All rights reserved.