Question

刚开始使用WebGL，尝试绘制一些基本线，甚至不是多边形。我找到了一些例子，在本地复制粘贴它们并用Firefox运行它们看起来很好：清晰明确的边缘。然后，我创建自己的项目，重构（坏！）samle代码，使用RequireJS加载等，样本仍然有效，但现在我的边/点/线都是BLURRY。就像一些不好的抗锯齿设置搞乱了一切。我尝试了所有的东西，起初我的代码看起来有些不同（虽然功能相同，恕我直言），然后我重构了更多，使它看起来几乎与样本相同，而且我仍然看到模糊的线条。

我做错了什么？

示例代码：http://jsfiddle.net/6QCNR/ 实时工作版示例代码： http://dl.dropbox.com/u/17612367/OpenGL%20to%20WebGL/figure%202.16%20-%20dot%20plot/index.html

我的版本： http://bernardofanti.azurewebsites.net/

我重构的代码：

main.js（通过index.html中的data-main属性加载）：

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

问题是不，您发布了 Javascript 代码，但使用Canvas元素。

与通常的html元素相反，Canvas元素需要width和height属性，并将其用作逻辑大小。

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

可以在这个问题上找到更详细的解释：Canvas width and height in HTML5

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

1 个答案: