This JavaScript WebGL program demonstrates how draw a simple polygon using a triangle fan.
<!DOCTYPE html> <html> <head> <title>XoaX.net's WebGL</title> <script id="idVertexShader" type="c"> attribute vec2 qCoordXY; void main() { gl_Position = vec4(qCoordXY, 0.0, 1.0); } </script> <script id="idFragmantShader" type="c"> void main() { gl_FragColor = vec4(0.5, 0.3, 0.3, 1.0); } </script> <script type="text/javascript"> var gqGL = null; var gqProgram = null; function CreateProgramAndContext() { // Get the WebGL Context var qCanvas = document.querySelector("#idCanvas"); gqGL = qCanvas.getContext("webgl"); // Compile the vertex shader var sVertexShaderCode = document.querySelector("#idVertexShader").text; var qVertexShader = gqGL.createShader(gqGL.VERTEX_SHADER); gqGL.shaderSource(qVertexShader, sVertexShaderCode); gqGL.compileShader(qVertexShader); // Compile the fragment shader var sFragmentShaderCode = document.querySelector("#idFragmantShader").text; var qFragmentShader = gqGL.createShader(gqGL.FRAGMENT_SHADER); gqGL.shaderSource(qFragmentShader, sFragmentShaderCode); gqGL.compileShader(qFragmentShader); // Compile and link the program gqProgram = gqGL.createProgram(); gqGL.attachShader(gqProgram, qVertexShader); gqGL.attachShader(gqProgram, qFragmentShader); gqGL.linkProgram(gqProgram); gqGL.useProgram(gqProgram); } function Initialization() { CreateProgramAndContext(); var faVertices = [0.0, 0.46, 0.55, 0.1, 0.32, -0.41, -0.32, -0.41, -0.55, 0.1]; var iVerticesBuffer = gqGL.createBuffer(); gqGL.bindBuffer(gqGL.ARRAY_BUFFER, iVerticesBuffer); gqGL.bufferData(gqGL.ARRAY_BUFFER, new Float32Array(faVertices), gqGL.STATIC_DRAW); var iCoordXY = gqGL.getAttribLocation(gqProgram, "qCoordXY"); gqGL.vertexAttribPointer(iCoordXY, 2, gqGL.FLOAT, false, 0, 0); gqGL.enableVertexAttribArray(iCoordXY); gqGL.clearColor(0.5, 0.5, 0.3, 1.0); gqGL.enable(gqGL.DEPTH_TEST); gqGL.clear(gqGL.COLOR_BUFFER_BIT); gqGL.drawArrays(gqGL.TRIANGLE_FAN, 0, 5); } </script> </head> <body onload="Initialization()"> <canvas id="idCanvas" width="400", height="400" style="border:1px solid lightgray"></canvas> </body> </html>
© 20072024 XoaX.net LLC. All rights reserved.