由 2 个三角形组成的四边形的正确纹理坐标是多少

Question

我不明白为什么会这样。我用以下顶点画了一个四边形（由 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);

每一帧我都绘制纹理。所以我的问题是，正确的纹理坐标是什么以及如何绘制具有透明背景的纹理。

编辑：加载纹理

  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);
};

不能post更多代码但简短摘要

gl.bindBuffer(vbo)
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture()
gl.uniform1i(sampler2D,0)
画东西

编辑 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);

}

Answer 1

你还需要两个纹理顶点

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);

并且不要取消绑定纹理 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);

由 2 个三角形组成的四边形的正确纹理坐标是多少

What are the correct texture coordinates for a quad consisting of 2 triangles

webgl