This JavaScript program demonstrates how to use the pixel coordiantes in the fragment shader to draw an anti-aliased sine wave 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; float fPixelHeight = 3.14159*2.0/ufCanvasHeight; void main() { // Scale and shift to the range [-pi, pi] float fX = 3.14159*(2.0*gl_FragCoord.x/ufCanvasWidth - 1.0); float fY = 3.14159*(2.0*gl_FragCoord.y/ufCanvasHeight - 1.0); // Distance from the sin graph in the y direction float fDY = abs(fY - sin(fX)); if (fDY < fPixelHeight) { // Anti-alias by subtracting the distance squared float fFill = 1.0 - pow(fDY/fPixelHeight, 2.0); gl_FragColor = vec4(0.0, fFill, 0.0, 1.0); } else { gl_FragColor = vec4(0.0, 0.0, 0.0, 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 lime"></canvas> </body> </html>
© 20072024 XoaX.net LLC. All rights reserved.