简介JavaScriptWebGL使用图像后有一些疑惑。为什么OriginMyGitHub可以通过在纹理坐标中取几个点来获取图像的内容？WebGL中图像坐标系的原点位于左下角，水平正方向向右，垂直正方向向上。纹理坐标是表示图像中位置的两个分量。第一个分量s是距离图像左侧的百分比。第二个分量t是距离图像底部的百分比。WebGL中的几何图形最终由三角形组成。使用图片时，不一定是三角形。您需要使用纹理坐标来指定图像中对应的分解三角形顶点的位置。要将纹理坐标应用于任何图像，请使用百分比指定位置。根据以上信息，纹理坐标与绘制的顶点有关，绘制顶点的方式也影响纹理的获取。纹理坐标必须和顶点坐标一一对应？我试了一下，比如4个顶点，但是只提供了3个顶点对应的纹理坐标，出现如下提示：WebGLwarning:drawElementsInstanced:Indexedvertexfetchrequires4vertices,butattribsonlysupply3.但是没有多余的顶点坐标的影响。激活纹理和绑定纹理目标的顺序有要求吗？在不使用默认纹理单元gl.TEXTURE0的情况下更容易看出区别：先激活后绑定实例Bind后激活实例可以发现纹理需要先激活再绑定。这里还需要注意的是，在创建纹理的时候，会bindTexture一次，但这并不一定会在最后生效。使用时最好重新绑定，以防万一。可以看到一些示例将创建和使用纹理的逻辑分开。在同一个位置有多个纹理呢？我们知道纹理有自己的纹理单元。在绘制时，我们需要激活相应的纹理单元。那么就有下面这种情况：一组顶点，但是关联了多个纹理单元两组顶点在同一位置，每个纹理单元关联了一组顶点，但是关联了多个纹理单元这种情况比较容易预测，经过all，最后指定一个Textureunit，最后一个指定的会被绘制，这个是例子。但是，如果其中一张图像包含透明区域怎么办？这是一个例子，先用猫图纹理，再用狗图纹理，狗图背景透明，最后只显示狗图。同一位置的两组顶点与它们各自的纹理单元相关联。这是一个例子。结果，只能看到最后一组顶点对应的纹理图片。对于包含透明区域的图像示例，结果只是对应于最后一组顶点的纹理图像。总结通过以上测试推断：默认情况下，同一顶点的纹理图像不会保留历史使用过的纹理图像数据。为了再次确认，让我们看一个两个纹理部分相交的例子。发现相交的地方是狗图像纹理透明的地方。可以直接看到Canvas父元素的背景色，不会有历史纹理数据。参考资料纹理贴图使用图像进行纹理映射计算机图形学简介
