1

我写了一段代码，试图在 WebGL 3D 场景中只绘制背景图像。以下是代码的相关部分：

<script id="shader-fs" type="x-shader/x-fragment">
varying highp vec2 vTexCoord;

uniform sampler2D uSampler;

void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying highp vec2 vTexCoord;

void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTexCoord = aTextureCoord;
}
</script>

<script>
var VBack = [
    -24.0,  0.0, 0.0,
     24.0,  0.0, 0.0,
     24.0, 48.0, 0.0,
    -24.0, 48.0, 0.0
    ];

var vTBack = [
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0
    ];

var VBuffer;
var vTBuffer;

function initMatrix() {
    orthoMatrix = makeOrtho(-24.0, 24.0, 0.0, 48.0, 20.0, -20.0);    // From glUtils.js
    mvMatrix = Matrix.I(4);
    ...
}   

function handleBkTex(tex) {
    GL.bindTexture(GL.TEXTURE_2D, tex);
    GL.pixelStorei(GL.UNPACK_FLIP_Y_WEBGL, true);
    GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA, GL.RGBA, GL.UNSIGNED_BYTE, tex.Img);
    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST);
    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST);
    GL.bindTexture(GL.TEXTURE_2D, null);
}

function initBkgnd() {
    backTex = GL.createTexture();
    backTex.Img = new Image();
    backTex.Img.onload = function() {
        handleBkTex(backTex);
    }
    backTex.Img.src = "Bkgnd.jpg";
}

function drawBkgnd() {
    GL.bindBuffer(GL.ARRAY_BUFFER, VBuffer);
    GL.vertexAttribPointer(vertexPositionAttribute, 3, GL.FLOAT, false, 0, 0);

    GL.bindBuffer(GL.ARRAY_BUFFER, vTBuffer);
    GL.vertexAttribPointer(texCoordAttribute, 2, GL.FLOAT, false, 0, 0);

    GL.activeTexture(GL.TEXTURE0);
    GL.bindTexture(GL.TEXTURE_2D, backTex);
    GL.uniform1i(GL.getUniformLocation(shaderProgram, "uSampler"), 0);

    GL.drawArrays(GL.TRIANGLE_STRIP, 0, 4);
}


function start() {
    var canvas = document.getElementById("glcanvas");
    initWebGL(canvas);

    if (GL) {
        initShaders();
        initBuffers();
        initMatrix();
        initBkgnd();
        drawBkgnd();
    }
}

画布大小为512 x 512，与图像大小相同。但我没有在画布上得到正确的图像。如何正确执行此操作？

4

2 回答 2

2

您希望答案是如何设置 3D 矩阵来绘制 2D 图像，还是希望答案是如何有效地做到这一点？

这是有效的答案。没有理由使用 3D 来绘制 2D。将您的顶点更改为

var VBack = [
  -1, -1,
   1, -1,
   1,  1,
  -1,  1,
];

将您对 vertexAttribPointer 的调用更改为

GL.vertexAttribPointer(vertexPositionAttribute, 2, GL.FLOAT, false, 0, 0);

将您的顶点着色器更改为

attribute vec4 aVertexPosition;
attribute vec2 aTextureCoord;

varying highp vec2 vTexCoord;

void main(void) {
    gl_Position = aVertexPosition;
    vTexCoord = aTextureCoord;
}

它应该工作。

有关更多关于 WebGL 中的 2D 的更多信息，请参阅这组文章。

于 2013-10-08T22:26:51.217 回答
1

我在我的代码中发现了一些小错误。他们是这样的：

  • WebGL 场景必须始终重绘。因此drawBkgnd()必须使用setInterval()or重复调用该函数requestAnimationFrame()。

  • 要使用drawArrays()withGL_TRIANGLE_STRIP正确绘制矩形，顶点的顺序必须是：

    *2        *3


*0        *1

    或任何等效顺序，但不是：

    *3        *2


*0        *1

    因此必须将顶点的顺序VBack更改为：

    var VBack = [
    -24.0,  0.0, 0.0,
     24.0,  0.0, 0.0,
    -24.0, 48.0, 0.0
     24.0, 48.0, 0.0,
];

    并且顶点的顺序vTBack也必须相应地改变。

于 2013-10-09T03:51:23.373 回答