JavaScript WebGL 使用图片疑惑点

引子

为什么纹理坐标取几个点就可以获取图片内容？

纹理坐标跟顶点坐标一定要一一对应？

激活纹理和绑定纹理目标的顺序是否有要求？

相同位置多个纹理会怎么样？

参考资料

JavaScript WebGL 使用图片之后产生了一些疑问。

• Origin
• My GitHub

先激活后绑定示例

先绑定后激活示例

可以发现纹理需要先激活后绑定。

这里还需要注意的是创建纹理的时候会 bindTexture 一次，但这个不一定最终生效，在使用的时候保险起见最好再绑定一次，看到一些示例都是把创建和使用纹理的逻辑区分开。

示例。

但如果其中有一张包含透明区域的图片会如何？这是示例，先使用的是猫图片纹理，然后使用犬图片纹理，而且犬图片背景是透明的，最终还是只显示了犬的图片。

两套相同位置顶点，关联各自纹理单元

这是示例，结果只看到最后一套顶点对应的纹理图片。

针对包含透明区域的图片示例， 结果也是只看到最后一套顶点对应的纹理图片。

小结

由上面的测试推测：默认情况下，相同顶点的纹理图片不会保留历史使用的纹理图片数据。

为了再次证实一下，看下两个纹理有部分交集的情况示例，发现有交集的地方是犬图片纹理透明的地方，直接看到了 Canvas 父元素的背景色，也是不会有历史纹理数据。

Texture Maps

Texture Mapping Using Images

Introduction to Computer Graphics