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

我绘制纹理的每一帧。 所以我的问题是，什么是正确的纹理坐标，以及如何绘制具有透明背景的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）

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

不要做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);