将背景图像添加到 WebGL 3D 场景

Adding background image to WebGL 3D scene

本文关键字：WebGL 3D 场景 添加 背景 图像      更新时间：2023-09-26

我编写了一段代码，试图在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 ，与图像大小相同。但我在画布上没有得到正确的图像。如何正确执行此操作？

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

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

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

将调用更改为 vertexAttribPointer to 

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 的更多信息，请参阅这组文章。

我在代码中发现了一些小错误。以下是它们：

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

  • 要将drawArrays()与GL_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中顶点的顺序也必须相应地改变。

相关文章：