11

WebGLから始めて、ポリゴンではなく、いくつかの基本的な線を描画しようとしています。私はいくつかの例を見つけ、それらをローカルにコピーして貼り付け、Firefoxから実行しました。それらは見栄えがよく、シャープで明確に定義されたエッジです。次に、独自のプロジェクトを作成し、（悪い！）サンプルコードをリファクタリングし、RequireJSを使用してロードするなど、サンプルは引き続き機能しますが、エッジ/ポイント/ラインはすべてぼやけています。いくつかの悪いアンチエイリアス設定のように、すべてを台無しにしています。私はすべてを試しましたが、最初はコードが多少異なって見えましたが（機能的には同じですが、IMHO）、さらにリファクタリングしてサンプルとほぼ同じに見えるようにしましたが、まだぼやけた線が表示されています。

私は何が間違っているのですか？

サンプルコード： 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;
        }
    };
});
4

1 に答える 1

37

問題は、投稿したJavascriptコードではなく、要素にあります。Canvas

通常のhtml要素とは異なり、要素には属性と属性Canvasが必要であり、論理サイズとして使用されます。widthheight

設定したCSS幅と高さは結果を引き伸ばすだけなので、ぼやけが見られます。

より詳細な説明は、この質問にあります：HTML5のキャンバスの幅と高さ

于 2012-11-18T19:01:57.410 に答える