javascript - WEBGL - 如何显示图像？

Question

我只想使用 WEBGL 在 Canvas 上简单地在 x 和 y 坐标处显示图像，但不知道如何操作。我需要包括着色器和所有这些东西吗？我看过显示图像的代码，但它们非常笨重。我不想使用框架。如果可能，您能否评论并解释重要部分的作用？我将使用 WEBGL 开发基于 2d tile 的游戏。

谢谢你的时间

Answer 1

是的，您需要一个顶点和片段着色器，但它们可能相对简单。我建议按照 Ido 的建议从 Mozilla 示例开始，在运行它之后，删除 3D 方面。特别是，您不需要 uMVPMatrix 和 uPmatrix，并且您的坐标数组可以是二维的。对于顶点着色器，这意味着:

attribute vec3 aVertexPosition;  
attribute vec2 aTextureCoord;  

varying highp vec2 vTextureCoord;  

void main(void) {  
  gl_Position = vec4(aVertexPosition, 0.0, 1.0);  
  vTextureCoord = aTextureCoord;  
}