This JavaScript program demonstrates how to draw a line segment in a WebGL program.
<!DOCTYPE html> <html> <head> <title>XoaX.net's WebGL</title> <script id="idVertexShader" type="c"> // The attribute receives data from the buffer attribute vec2 afEndPoints; void main() { gl_Position = vec4(afEndPoints, 0.0, 1.0); } </script> <script id="idFragmantShader" type="c"> precision mediump float; void main() { gl_FragColor = vec4(.5, 1, 1, 1); } </script> <script type="text/javascript"> function Render() { // Get the WebGL Context var qCanvas = document.querySelector("#idCanvasWebGL"); var qGL = qCanvas.getContext("webgl"); // Compile the vertex shader var sVertexShaderCode = document.querySelector("#idVertexShader").text; var qVertexShader = qGL.createShader(qGL.VERTEX_SHADER); qGL.shaderSource(qVertexShader, sVertexShaderCode); qGL.compileShader(qVertexShader); // Compile the fragment shader var sFragmentShaderCode = document.querySelector("#idFragmantShader").text; var qFragmentShader = qGL.createShader(qGL.FRAGMENT_SHADER); qGL.shaderSource(qFragmentShader, sFragmentShaderCode); qGL.compileShader(qFragmentShader); // Compile and link the program var qProgram = qGL.createProgram(); qGL.attachShader(qProgram, qVertexShader); qGL.attachShader(qProgram, qFragmentShader); qGL.linkProgram(qProgram); // Set up the buffer for the endpoints var qEndpointAttributeLocation = qGL.getAttribLocation(qProgram, "afEndPoints"); var qEndpointBuffer = qGL.createBuffer(); qGL.bindBuffer(qGL.ARRAY_BUFFER, qEndpointBuffer); qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array([ -.5, -.8, .7, .8]), qGL.STATIC_DRAW); qGL.enableVertexAttribArray(qEndpointAttributeLocation); qGL.vertexAttribPointer(qEndpointAttributeLocation, 2, qGL.FLOAT, false, 0, 0); qGL.useProgram(qProgram); qGL.clearColor(0, 0.7, 0.8, 1.0); qGL.clear(qGL.COLOR_BUFFER_BIT); qGL.drawArrays(qGL.LINES, 0, 2); } </script> </head> <body onload="Render();"> <canvas id="idCanvasWebGL" width="400", height="400" style="border:1px solid red"></canvas> </body> </html>
© 20072024 XoaX.net LLC. All rights reserved.