WebGL: Everything is blurry despite using same code

Question

Just starting out with WebGL, trying to draw some basic lines, not even polygons. I found a few examples, copy-pasted them locally and run them out of Firefox, they look good: sharp, clearly 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 bad antialiasing setting is messing everything up. I tried everything, at first my code looked somewhat different (though functionally the same, IMHO), then I refactored more to make it look almost identical to the sample, and I'm still seeing blurry lines.

What am I doing wrong?

Sample Code: http://jsfiddle.net/6QCNR/ Live working version of 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 refactored code:

main.js (loaded via 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;
        }
    };
});

Answer 1

The problem is NOT with the Javascript code you posted, but with the Canvas element.

Contrary to the usual html elements, a Canvas element needs it's width and height attribute and uses it as a logical size.

The CSS width and height you set only stretches the result, that's why you see the blurring.

A more detailed explanation can be found on this question: Canvas width and height in HTML5