本文探讨了JavaScript WebGL中使用图片的一些疑问，包括为何仅几个纹理坐标就能获取图片内容、是否必须使纹理坐标与顶点坐标一一对应、激活和绑定纹理的顺序要求，以及在多个纹理覆盖相同位置时的行为分析。通过实验，作者发现不匹配的纹理坐标会导致警告，而纹理应用顺序和激活是关键，相同位置的多个纹理通常只会显示最后一个。
引子
JavaScript WebGL 使用图片之后产生了一些疑问。
为什么纹理坐标取几个点就可以获取图片内容？
WebGL 中图像的坐标系原点位于左下角，水平正方向向右，垂直正方向向上。纹理坐标是表示图像中位置的两个分量。第一个分量 s 是距离图像左侧的百分比。第二个分量 t 是距离图像底部的百分比。WebGL 中几何体最终都是由三角形构成，使用图片的时候不一定都是三角形，需要使用纹理坐标指定对应分解的三角形顶点在图像中的位置。为了让纹理坐标适用任何图像，使用百分比指定位置。
根据上面的信息可知，纹理坐标跟绘制的顶点有关联，绘制顶点的方式，同样影响到获取纹理。
纹理坐标跟顶点坐标一定要一一对应？
尝试了一下，例如 4 个顶点，但只提供了 3 个顶点对应的纹理坐标，出现下面提示：
WebGL warning: drawElementsInstanced: Indexed vertex fetch requires 4 vertices, but attribs only supply 3.</
最低0.47元/天 解锁文章
879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
