Just start with WebGL, trying to draw some basic lines, even polygons. I found several examples, copied them in place and pulled them out of Firefox, they looked good: sharp, well-defined edges. Then I create my own project, refactoring the (bad!) Samle code, using RequireJS to load, etc., The sample still works, but now my edges / points / lines are all BLURRY. Like some poor anti-aliasing settings, everything will ruin everything. I tried everything, at first my code looked a little different (although the functionally the same, IMHO), then I reorganized more so that it looked almost identical to the sample, and I still see blurry lines.
What am I doing wrong?
Code example: http://jsfiddle.net/6QCNR/ Live working version of the sample code: http://dl.dropbox.com/u/17612367/OpenGL%20to%20WebGL/figure%202.16%20-%20dot%20plot/ index.html
My version: http://bernardofanti.azurewebsites.net/
My reorganized code:
main.js (loaded via the data-main attribute in index.html):
define( [ "libs/domReady", "webglengine", "libs/text!../shaders/fragmentShader.glsl", "libs/text!../shaders/vertexShader.glsl" ], function(domReady, GLEngine, fragmentShaderCode, vertexShaderCode) { domReady(function() { GLEngine.init("graphCanvas"); GLEngine.initShaders(fragmentShaderCode, vertexShaderCode); var geometry = (function() { var res = []; var a = document.getElementById("graphCanvas").width / 4.0; var b = document.getElementById("graphCanvas").height / 2.0; for (var x = 0; x < 4.0; x += 0.005) { var y = Math.exp(-x) * Math.cos(2 * Math.PI * x); res.push(x * a, (y + 1) * b, 0); } return res; })(); GLEngine.createBuffers(geometry); GLEngine.render(); }); });
WebGlEngine.js:
define( [ ], function() { "use strict"; // Singleton Pattern through RequireJS var gl = null; var shaderProgram = null; var pMatrix = mat4.create(); var initGl = function(canvasId) { try { var canvas = document.getElementById(canvasId); //gl = canvas.getContext("experimental-webgl", { antialias: true }); gl = (function() { var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"]; var context = null; for (var ii = 0; ii < names.length; ++ii) { try { context = canvas.getContext(names[ii]); } catch (e) { } if (context) { break; } } return context; })(); gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; mat4.ortho(0, gl.viewportWidth, 0, gl.viewportHeight, -1, 1, pMatrix); } catch (e) { } if (!gl) { throw("Could not initialise WebGL"); } } var createShader = function(shaderCode, shaderType) { if(shaderType !== "FRAGMENT_SHADER" && shaderType !== "VERTEX_SHADER") throw("Invalid shader type"); var shader = gl.createShader(gl[shaderType]); gl.shaderSource(shader, shaderCode); gl.compileShader(shader); if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw("Bad shader: " + gl.getShaderInfoLog(shader)); return shader; }; var initShaders = function(fragmentShaderCode, vertexShaderCode) { shaderProgram = gl.createProgram(); var fragmentShader = createShader(fragmentShaderCode, "FRAGMENT_SHADER"); var vertexShader = createShader(vertexShaderCode, "VERTEX_SHADER"); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) throw("Could not initialise shaders"); gl.useProgram(shaderProgram); shaderProgram.vertexPositionLoc = gl.getAttribLocation(shaderProgram, "aVertexPosition"); gl.enableVertexAttribArray(shaderProgram.vertexPositionLoc); shaderProgram.pMatrixLoc = gl.getUniformLocation(shaderProgram, "uPMatrix"); }; var geometry = []; var vertexBuffer = null; var createBuffers = function(vertices) { geometry = vertices; vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(geometry), gl.STATIC_DRAW); }; var render = function() { gl.clear(gl.COLOR_BUFFER_BIT); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.vertexAttribPointer(shaderProgram.vertexPositionLoc, 3, gl.FLOAT, false, 0, 0); gl.uniformMatrix4fv(shaderProgram.pMatrixLoc, 0, pMatrix); gl.drawArrays(gl.POINTS, 0, geometry.length / 3); }; return { init: initGl, initShaders: initShaders, createBuffers: createBuffers, render: render, GL: function() { return gl; } }; });