我无法弄清楚为什么会这样。 我绘制了一个带有以下顶点的四边形(2个三角形)
let data = [
-0.5, -0.5, 0,
0.5, -0.5, 0,
0.5, 0.5, 0,
-0.5, -0.5, 0,
0.5, 0.5, 0,
-0.5, 0.5, 0
]
以下纹理坐标
let textureData = [0,0,1,0,1,1,0,1];
另一个错误是纹理不透明,但我调用
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
我绘制纹理的每一帧。 所以我的问题是,什么是正确的纹理坐标,以及如何绘制具有透明背景的texutere。
编辑: 加载纹理
this._image.onload = () => {
gl.bindTexture(gl.TEXTURE_2D, this._textureBuffer);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.generateMipmap(gl.TEXTURE_2D);
gl.bindTexture(gl.TEXTURE_2D, null);
};
无法发布更多代码,但简短摘要
gl.bindBuffer(VBO)
gl.activeTexture(gl.TEXTURE0)
编辑2(如何创建包含顶点的缓冲区)
this._vertexBufferObject= gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBufferObject);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
this._textureBufferObject= gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this._textureBufferObject);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureData), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
编辑3:Draw-Method和applyTexture
draw(camera) {
let gl = Core.mGL;
// gl.enable(gl.BLEND);
// gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBufferObject);
this._shaderProgram.activateProgram(camera.vpMatrix);
gl.vertexAttribPointer(this._shaderProgram.vertexAttributeLocation, 3, gl.FLOAT, false, 0, 0);
gl.vertexAttribPointer(this._shaderProgram.textureAttributeLocation, 2, gl.FLOAT, false, 0, 0);
this._shaderProgram.loadTransformation(this._transformation.transform());
this._shaderProgram.applyTexture(this._textureBuffer, gl.TEXTURE_2D);
gl.drawArrays(gl.TRIANGLES, 0, this._data.length / 3);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
this._shaderProgram.deactivateProgram(gl.TEXTURE_2D);
}
applyTexture(id, type) {
this._gl.activeTexture(this._gl.TEXTURE0);
this._gl.bindTexture(type, id);
this._gl.uniform1i(this._mouseSamplerLocation, 0);
}
答案 0 :(得分:0)
你还需要两个纹理顶点
0,0,1,0,1,1,0,1
到
0,0,1,0,1,1, 0,0,1,1,0,1
正确的纹理坐标取决于您的位置顶点,所以看起来很好。
我猜你的纹理不透明。它可能只是白色背景。
<强>#UPDATE1 强>
请这样做 在glTexImage2D()
之后glGenerateMipmap(GL_TEXTURE_2D);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
或只是做
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
不要做unbindtexture gl.bindTexture(gl.TEXTURE_2D,null);
<强>#UPDATE2 强>
this._shaderProgram.activateProgram(camera.vpMatrix);
gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBufferObject);
gl.vertexAttribPointer(this._shaderProgram.vertexAttributeLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, this._textureBufferObject); // **missing**
gl.vertexAttribPointer(this._shaderProgram.textureAttributeLocation, 2, gl.FLOAT, false, 0, 0);