共计 1096 个字符，预计需要花费 3 分钟才能阅读完成。
引子
JavaScript WebGL 应用图片之后产生了一些疑难。
- Origin
- My GitHub
为什么纹理坐标取几个点就能够获取图片内容？
WebGL 中图像的坐标系原点位于左下角，程度正方向向右，垂直正方向向上。纹理坐标是示意图像中地位的两个重量。第一个重量 s 是间隔图像左侧的百分比。第二个重量 t 是间隔图像底部的百分比。WebGL 中几何体最终都是由三角形形成，应用图片的时候不肯定都是三角形，须要应用纹理坐标指定对应合成的三角形顶点在图像中的地位。为了让纹理坐标实用任何图像，应用百分比指定地位。
依据下面的信息可知，纹理坐标跟绘制的顶点有关联，绘制顶点的形式，同样影响到获取纹理。
纹理坐标跟顶点坐标肯定要一一对应？
尝试了一下，例如 4 个顶点，但只提供了 3 个顶点对应的纹理坐标，呈现上面提醒：
WebGL warning: drawElementsInstanced: Indexed vertex fetch requires 4 vertices, but attribs only supply 3.
但多余顶点坐标数倒是没有影响。
激活纹理和绑定纹理指标的程序是否有要求？
不应用默认的纹理单元 gl.TEXTURE0 比拟好看到辨别：
- 先激活后绑定示例
- 先绑定后激活示例
能够发现 纹理须要先激活后绑定。
这里还须要留神的是创立纹理的时候会 bindTexture 一次，但这个不肯定最终失效，在应用的时候保险起见最好再绑定一次，看到一些示例都是把创立和应用纹理的逻辑辨别开。
雷同地位多个纹理会怎么样？
在后面咱们晓得纹理都有所属的纹理单元，绘制的时候，须要激活对应的纹理单元。那么就有上面的状况：
- 一套顶点，但关联屡次纹理单元
- 两套雷同地位顶点，关联各自纹理单元
一套顶点，但关联屡次纹理单元
这种状况比拟容易预感，毕竟最终指定了繁多的纹理单元，最初指定的将会绘制进去，这是示例。
但如果其中有一张蕴含通明区域的图片会如何？这是示例，先应用的是猫图片纹理，而后应用犬图片纹理，而且犬图片背景是通明的，最终还是只显示了犬的图片。
两套雷同地位顶点，关联各自纹理单元
这是示例，后果只看到最初一套顶点对应的纹理图片。
针对蕴含通明区域的图片示例，后果也是只看到最初一套顶点对应的纹理图片。
小结
由下面的测试揣测：默认状况下，雷同顶点的纹理图片不会保留历史应用的纹理图片数据。
为了再次证实一下，看下两个纹理有局部交加的状况示例，发现有交加的中央是犬图片纹理通明的中央，间接看到了 Canvas 父元素的背景色，也是不会有历史纹理数据。
参考资料
- Texture Maps
- Texture Mapping Using Images
- Introduction to Computer Graphics
