Javascript 如何在WebGL中向静态对象添加纹理?
目前,许多关于web中纹理的WebGL教程都是关于向动画对象添加纹理的。我只是尝试向静态对象(立方体的三个面)添加纹理,但它不起作用;对象显示为黑色。以下是部分代码:Javascript 如何在WebGL中向静态对象添加纹理?,javascript,webgl,Javascript,Webgl,目前,许多关于web中纹理的WebGL教程都是关于向动画对象添加纹理的。我只是尝试向静态对象(立方体的三个面)添加纹理,但它不起作用;对象显示为黑色。以下是部分代码: function initBuffers() { VBuffer = gl.createBuffer(); // 3D vertices gl.bindBuffer(gl.ARRAY_BUFFER, VBuffer); gl.bufferData(gl.ARRAY_BUFFER
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();
但我得到的只是一个黑色的物体。有没有解决这个问题的建议?在加载和处理纹理(也称为准备使用)后,再次调用
drawsecene()
,以便拾取纹理
function handleTexture(texture) {
// code....
gl.bindTexture(gl.TEXTURE_2D, null);
drawScene();
}
加载并处理纹理(也称为准备使用)后,再次调用
drawsecene()
,以便拾取纹理
function handleTexture(texture) {
// code....
gl.bindTexture(gl.TEXTURE_2D, null);
drawScene();
}
问题是“tex1.Img.src=texImgs[0];”异步获取纹理数据,因此在纹理加载完成之前调用第一个(也是唯一一个)drawScene()。纹理完全就绪后,需要重新组织代码以调用drawScene()。就像@AbstractAlgorithm提供的示例一样。谢谢大家!我只知道此纹理数据获取是异步完成的。问题是“tex1.Img.src=texImgs[0];”异步获取纹理数据,因此在纹理加载完成之前调用第一个(也是唯一一个)drawScene()。纹理完全就绪后,需要重新组织代码以调用drawScene()。就像@AbstractAlgorithm提供的示例一样。谢谢大家!我只知道这个纹理数据获取是异步完成的。