一起学 WebGL：纹理对象学习

,大家好，我是前端西瓜哥，今天我们来了解 WebGL 的纹理对象（Texture）,纹理对象，是将像素（texels）以数组方式传给 GPU 的对象，常见场景是贴图，就是将图片的数据应用到 3D 物体上。,先创建纹理对象：,然后绑定到纹理单元：,纹理是要贴到画布的某个区域上的，并不一定刚好设置一下填充方式。,纹理比绘制区域大，就要做缩放；纹理比绘制区域小，就要做放大；纹理没能完全填充绘制区域，就要在水平和垂直方向进行填充。,这些场景都需要对应设置不同的策略。,WebGL 支持设置多个纹理单元（Texture Unit），即我们可以将多个图片放到多个单元中，然后进行切换。,就好像手里拿着不同的盖章，想印哪种图案就掏出哪个盖上去。,纹理单元是有上限的，至少要支持 8 个，主流浏览器一般支持 16 个。,具体支持几个，可通过下面代码获得。,默认使用 0 号纹理单元，可通过下面这一行代码来切换纹理单元：,注意这个要 在将纹理对象绑定纹理单元之前 执行。,最后我们需要设置一下我们的纹理采样器选择使用哪个纹理单元：,不主动调用这个方法，默认会使用 0 号纹理单元。,切换纹理单元是有一定的性能代价的，不建议你在短时间内不断地切换纹理单元。简单的渲染场景可忽略不计。,画个纯纯的红色纹理。,这里选择使用 gl.RGB 格式，设置了一个 (255, 0, 0) 的红色颜色值。,最后我们成功画出一个纯红色块。,,完整代码：,线上 demo：,https://codesandbox.io/s/1hvp4x?file=/index.js。,也可以同时设置多个色块。,,创建了 2×2 4个像素大小的纹理，并制定了这个 4 个像素点的颜色，然后被放大绘制到指定区域上。,线上演示 demo：,https://codesandbox.io/s/7436cs?file=/index.js。,图片纹理，需要加载玩图片，将图片对象绑定到纹理对象上。,纹理对象是很常用的一个对象，用于指定区域要填充的像素。,常见的是加载图片，把图片贴到三维的一个面上。也可以自己指定像素值。