Javascript WebGL：尽管使用相同的代码，但一切都很模糊

从WebGL开始，试着画一些基本的线，甚至不是多边形。我找到了一些例子，在本地复制粘贴，然后在Firefox中运行，它们看起来很好：清晰的边缘。然后，我创建自己的项目，重构（糟糕的！）样本代码，使用RequireJS加载，等等，样本仍然有效，但现在我的边/点/线都模糊了。就像一些糟糕的抗锯齿设置把一切都搞糟了一样。我尝试了一切，起初我的代码看起来有些不同（虽然功能相同，IMHO），然后我进行了更多重构，使其看起来与示例几乎相同，但我仍然看到模糊的线条

我做错了什么

示例代码： 示例代码的实时工作版本：

我的版本：

我的重构代码：

main.js（通过index.html中的数据主属性加载）：

定义(
[
“libs/domReady”，
“网络游戏”，
“libs/text../shaders/fragmentShader.glsl”，
“libs/text.../shaders/vertexShader.glsl”
],
函数（domReady、GLEngine、fragmentShaderCode、vertexShaderCode）
{
domReady（函数（）
{
GLEngine.init（“graphCanvas”）；
初始化着色器（fragmentShaderCode、vertexShaderCode）；
变量几何体=（函数（）
{
var-res=[]；
var a=document.getElementById（“graphCanvas”）.width/4.0；
var b=document.getElementById（“graphCanvas”）.height/2.0；
对于（变量x=0；x<4.0；x+=0.005）
{
变量y=Math.exp（-x）*Math.cos（2*Math.PI*x）；
推力（x*a，（y+1）*b，0）；
}
返回res；
})();
创建缓冲区（几何）；
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;
        }
    };
});

定义(
[
],
函数（）
{
“严格使用”；
//通过RequireJS的单例模式
var-gl=null；
var shaderProgram=null；
var pMatrix=mat4.create（）；
var initGl=函数（canvasId）
{
尝试
{
var canvas=document.getElementById（canvasId）；
//gl=canvas.getContext（“实验性webgl”，{antialas:true}）；
gl=（函数（）
{
变量名称=[“webgl”、“实验webgl”、“webkit-3d”、“moz webgl”]；
var-context=null；
对于（变量ii=0；ii

问题不在于您发布的Javascript代码，而在于

Canvas

元素

与通常的

html

元素相反，

Canvas

元素需要它的

width

和

height

属性，并将其用作逻辑大小

您设置的

CSS

宽度和高度只会拉伸结果，这就是您看到模糊的原因

---

关于这个问题，可以找到更详细的解释：

Wow。这让我快发疯了——谢谢你的解决方案！我想应该读一下画布规格。精彩的评论，这个问题让我发疯。

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;
        }
    };
});