WebGL:尽管使用相同的代码，但一切都很模糊 [英] WebGL: Everything is blurry despite using same code
问题描述
刚开始使用 WebGL，尝试绘制一些基本的线条，甚至不是多边形.我找到了一些例子，将它们复制粘贴到本地，然后在 Firefox 中运行，它们看起来不错:锐利、清晰的边缘.然后，我创建了自己的项目，重构了(糟糕的！)示例代码，使用 RequireJS 加载等，示例仍然有效，但现在我的边/点/线都是模糊的.就像一些糟糕的抗锯齿设置把一切都搞砸了.我尝试了所有方法，起初我的代码看起来有些不同(尽管功能相同，恕我直言)，然后我进行了更多重构以使其看起来与示例几乎相同，但我仍然看到模糊的线条.
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.
我做错了什么?
示例代码:http://jsfiddle.net/6QCNR/示例代码的实时工作版本:http://dl.dropbox.com/u/17612367/OpenGL%20to%20WebGL/figure%202.16%20-%20dot%20plot/index.html
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
我的版本:http://bernardofanti.azurewebsites.net/
我重构的代码:
main.js(通过 index.html 中的 data-main 属性加载):
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:
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;
}
};
});
推荐答案
问题出在不是您发布的 Javascript 代码，而是 Canvas 元素.
The problem is NOT with the Javascript code you posted, but with the Canvas element.
与通常的 html 元素相反，Canvas 元素需要它的 width 和 height 属性并使用它作为逻辑大小.
Contrary to the usual html elements, a Canvas element needs it's width and height attribute and uses it as a logical size.
您设置的 CSS 宽度和高度只会拉伸结果，这就是您看到模糊的原因.
The CSS width and height you set only stretches the result, that's why you see the blurring.
可以在这个问题上找到更详细的解释:HTML5 中的画布宽度和高度
A more detailed explanation can be found on this question: Canvas width and height in HTML5
这篇关于WebGL:尽管使用相同的代码，但一切都很模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
