This JavaScript program demonstrates how to draw a single point in a WebGL program.
<!DOCTYPE html> <html> <head> <title>XoaX.net's WebGL</title> </head> <script> function render() { // Get A WebGL context var qCanvas = document.querySelector("#idWebGL"); var qGL = qCanvas.getContext("webgl"); qGL.clearColor(0.75, 0.75, 0.75, 1.0); qGL.clear(qGL.COLOR_BUFFER_BIT); // The Vertex Shader var sVertextShaderCode = 'void main() { gl_Position = vec4(0.5, -.2, 0.0, 1.0); gl_PointSize = 25.0; }'; var qVertexShader = qGL.createShader(qGL.VERTEX_SHADER); qGL.shaderSource(qVertexShader, sVertextShaderCode); qGL.compileShader(qVertexShader); // The Fragment Shader var sFragShaderCode = 'void main() { gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0); }'; var qFragmentShader = qGL.createShader(qGL.FRAGMENT_SHADER); qGL.shaderSource(qFragmentShader, sFragShaderCode); qGL.compileShader(qFragmentShader); // Compile and link the program var qProgram = qGL.createProgram(); qGL.attachShader(qProgram, qVertexShader); qGL.attachShader(qProgram, qFragmentShader); qGL.linkProgram(qProgram); // Deallocate qGL.detachShader(qProgram, qVertexShader); qGL.detachShader(qProgram, qFragmentShader); qGL.deleteShader(qVertexShader); qGL.deleteShader(qFragmentShader); // Initialize Attributes var qBuffer; qGL.enableVertexAttribArray(0); qBuffer = qGL.createBuffer(); qGL.bindBuffer(qGL.ARRAY_BUFFER, qBuffer); qGL.vertexAttribPointer(0, 1, qGL.FLOAT, false, 0, 0); qGL.useProgram(qProgram); qGL.drawArrays(qGL.POINTS, 0, 1); // Deallocate qGL.useProgram(null); if (qBuffer) qGL.deleteBuffer(qBuffer); if (qProgram) qGL.deleteProgram(qProgram); } </script> <body onload="render()"> <canvas id="idWebGL" width="400" height="400" style="border:1px black solid;"> </canvas> </body> </html>
© 20072024 XoaX.net LLC. All rights reserved.