如何在 WebGL 中为静态对象添加纹理？答案

【问题标题】：How to add texture to a static object in WebGL?如何在 WebGL 中为静态对象添加纹理？
【发布时间】：2013-09-12 23:40:59
【问题描述】：

目前，Web 中许多关于纹理的 WebGL 教程都是关于向动画对象添加纹理。我只是尝试向静态对象（立方体的 3 个面）添加纹理，但它不起作用；对象显示为黑色。以下是部分代码：

function initBuffers() {
VBuffer = gl.createBuffer();                            // 3D vertices
gl.bindBuffer(gl.ARRAY_BUFFER, VBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(Verts), gl.STATIC_DRAW);

FBuffer = gl.createBuffer();                            // Facet definition
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, FBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Faces), gl.STATIC_DRAW);

vTBuffer = gl.createBuffer();                           // Texture coordinates
gl.bindBuffer(gl.ARRAY_BUFFER, vTBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vTex), gl.STATIC_DRAW);
}

function handleTexture(texture) {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.Img);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
}

function initTextures() {
tex1 = gl.createTexture();
tex1.Img = new Image();
tex1.Img.onload = function() { handleTexture(tex1); }
tex1.Img.src = texImgs[0];                            // "cubetexture.png"
}

function drawScene() {
    ...  

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, tex1);
gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, FBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, nVF, gl.UNSIGNED_SHORT, 0);
}

这些函数在页面加载时调用如下：

...
initBuffers();
initTextures();
drawScene();

但我得到的只是一个黑色的物体。有什么建议可以解决这个问题吗？

【问题讨论】：

标签： javascript webgl

【解决方案1】：

在您加载和处理纹理（也就是准备使用）之后，再次调用 drawScene() 以便选择纹理。

function handleTexture(texture) {
    // code....
    gl.bindTexture(gl.TEXTURE_2D, null);

    drawScene();
}

【讨论】：

问题是“tex1.Img.src = texImgs[0];”异步获取纹理数据，因此第一个（也是唯一的）drawScene() 在纹理加载完成之前被调用。一旦纹理完全准备好，您需要重新组织代码以调用 drawScene()。就像@AbstractAlgorithm 提供的例子一样。
谢谢，伙计们！我只知道这个纹理数据的获取是异步完成的。