八、WebGL入门，纹理贴图

最新推荐文章于 2025-06-12 20:30:50 发布

原创

最新推荐文章于 2025-06-12 20:30:50 发布 · 8.2k 阅读

6 ·

CC 4.0 BY-SA版权

这篇博客介绍了WebGL中的纹理贴图概念，包括一维到三维纹理的类型，重点讲解了二维纹理的使用。内容涵盖纹理参数设置，如纹理级别、内部格式、放大缩小算法，以及纹理包装模式如REPEAT、CLAMP_TO_EDGE和MIRRORED_REPEAT的效果。通过示例代码解释了如何在着色器中应用纹理坐标和采样。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本节我们来讲WebGL里面很重要的纹理

纹理贴图在游戏开发中十分常见，但是纹理不单单只是一张贴图那么简单。

在WebGL中，纹理有多种，一维纹理：就是一条线；二维纹理：一张二维图片；二维纹理数组：由多张二维图片组成；还有三维纹理，立体纹理，本节主要介绍二维纹理

在早期的OpenGL中，只支持图片大小为2^n的纹理，但现在支持，但是最好用大小为2^n的纹理，这样效率会比较高

先看看效果：

            var jsArrayData =
                [
                0,      0,      0,      0.0,    0.0,
                400,    0,      0,      1.0,    0.0,
                400,    400,    0,      1.0,    1.0,


                0,      0,      0,      0.0,    0.0,
                400,    400,    0,      1.0,    1.0,
                0,      400,    0,      0.0,    1.0,
                ];

void texImage2D(GLenum target, GLint level, GLenum internalformat, GLenum format, GLenum type, TexImageSource? source)：

第一个参数target：指定是什么类型的纹理（2选1），

第二个参数level：是纹理的级别，0是基本文件级别，之后再详细说，

第三个参数internalforma：t是纹理像素在显卡内存中存储的格式，GL_RGBA表示一个像素由4个分量（r,g,b,a）组成，

第四个参数format：是指我们传入的图片像素的存储格式，

第五个参数type：是像素每个分量的存储类型,webgl.UNSIGNED_BYTE表示r,g,b,a的存储类型是unsigned byte,1个字节，范围是[0,255],

最后一个参数source：是图片文件

void texParameteri(GLenum target, GLenum pname, GLint param) 是设置纹理参数用的，

第一个参