This JavaScript program demonstrates how to use the fragment shader to access pixel coordinates in a WebGL program.
<!DOCTYPE html> <html> <head> <title>XoaX.net's WebGL</title> <script id="idVertexShader" type="c"> attribute vec2 av2Vertex; void main() { gl_Position = vec4(av2Vertex, 0.0, 1.0); } </script> <script id="idFragmantShader" type="c"> precision mediump float; uniform float ufCanvasWidth; uniform float ufCanvasHeight; void main() { gl_FragColor = vec4(gl_FragCoord.x/ufCanvasWidth, gl_FragCoord.x/ufCanvasWidth, gl_FragCoord.y/ufCanvasHeight, 1.0); } </script> <script type="text/javascript"> var gqProgram = null; var gqGL = null; function CreateProgramAndContext() { // Get the WebGL Context var qCanvas = document.querySelector("#idCanvasWebGL"); 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 CreateBuffers() { var faVertices = new Float32Array([1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, -1.0]); var qVerticesBuffer = gqGL.createBuffer(); gqGL.bindBuffer(gqGL.ARRAY_BUFFER, qVerticesBuffer); gqGL.bufferData(gqGL.ARRAY_BUFFER, faVertices, gqGL.STATIC_DRAW); var qVertexLoc = gqGL.getAttribLocation(gqProgram, 'av2Vertex'); gqGL.vertexAttribPointer(qVertexLoc, 2, gqGL.FLOAT, false, 0, 0); gqGL.enableVertexAttribArray(qVertexLoc); // Unbind the buffer gqGL.bindBuffer(gqGL.ARRAY_BUFFER, null); } function Initialization() { CreateProgramAndContext(); CreateBuffers(); var fCanvasWidth = gqGL.getUniformLocation(gqProgram, 'ufCanvasWidth'); var fCanvasHeight = gqGL.getUniformLocation(gqProgram, 'ufCanvasHeight'); gqGL.uniform1f(fCanvasWidth, gqGL.drawingBufferWidth); gqGL.uniform1f(fCanvasHeight, gqGL.drawingBufferHeight); gqGL.clearColor(0.0, 0.0, 0.0, 1.0); gqGL.clear(gqGL.COLOR_BUFFER_BIT); gqGL.drawArrays(gqGL.TRIANGLE_STRIP, 0, 4); } </script> </head> <body onload="Initialization();"> <canvas id="idCanvasWebGL" width="400", height="400" style="border:1px solid black"></canvas> </body> </html>
© 20072024 XoaX.net LLC. All rights reserved.