22 WebGL使用多幅纹理

案例查看地址：点击这里

这次案例选用了两张不同格式的图片，一张jpg和一张gif格式的，这节的案例和20节的案例相比区别在三个地方：

（1）第一部分在片元着色器里能访问两个纹理。

由于20节的案例只使用一个纹理，所以只准备了一个unifrom变量存储纹理，在本案例多声明了一个uniform变量存储另一个变量。

然后在main()里面使用两个变量color和color1获取颜色，使用分量乘法——两个矢量中对应的分量相乘作为新矢量的分量，来获取最终的片元颜色并赋值给了gl_FragColor。

（2）第四部分initTextures()方法里面创建了两个纹理对象。

用于存储两个纹理并赋值给unifrom变量，所以我们需要处理两遍，声明了两个Image的dom对象获取图片，每一张图片加载成功调用一次，并将第几张图片传入了方法。

（3）第五部分loadTexture()方法修改成可以配置多个纹理对象。

由于浏览器图片加载是异步加载（不懂得可以去看js基础），所以我们先在外部声明了两个变量用于保存图片的加载状态154行。根据加载成功的图片开启相应的纹理单元，并相应的配置相关的纹理参数，最后将相应的纹理传递进着色器相应的uniform变量。

最后一段如果两个图片都加载成功，就开始绘制，就实现了现在看到结果。