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

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）：

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