WebGL纹理贴图核心流程是加载图像→创建纹理→上传数据→配置采样→着色器采样；需注意异步加载、尺寸限制（推荐2的幂）和坐标系匹配（图像原点在左上，WebGL在左下）。
WebGL 实现纹理贴图的核心是：加载图像 → 创建纹理对象 → 上传像素数据 → 配置采样参数 → 在着色器中采样使用。整个流程需注意异步加载、纹理尺寸限制和坐标系匹配。
加载图像并创建纹理对象
WebGL 不直接处理文件路径，需先用 <img> 或 fetch() 加载图像，等其加载完成后再绑定到纹理。推荐用 Image 对象配合 onload 回调，避免因图像未就绪导致黑贴图。
- 创建
gl.createTexture()获取纹理 ID - 调用
gl.bindTexture(gl.TEXTURE_2D, texture)激活该纹理单元 - 图像必须完全加载（
img.complete === true）才能传入 WebGL
上传图像数据到 GPU
使用 gl.texImage2D() 将图像像素复制到显存。关键参数包括目标纹理类型（通常是 gl.TEXTURE_2D）、图像格式（如 gl.RGBA）、数据类型（gl.UNSIGNED_BYTE）以及源图像对象。
- 若图像宽高非 2 的整数次幂（如 300×200），默认无法重复或裁剪，需开启
gl.TEXTURE_WRAP_*并设置gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL = true（如有 alpha） - 建议统一预设图像尺寸为 256×256、512×512 等，减少兼容性问题
- 可选调用
gl.generateMipmap(gl.TEXTURE_2D)启用多级渐远纹理提升远距离显示质量
配置纹理采样行为
纹理如何被拉伸、平铺或过滤，由 gl.texParameteri() 控制。常见组合：
立即学习“Java免费学习笔记（深入）”；
-
gl.TEXTURE_MIN_FILTER：缩小采样方式，常用gl.LINEAR_MIPMAP_LINEAR（配合 mipmap）或gl.LINEAR -
gl.TEXTURE_MAG_FILTER：放大采样方式，常用gl.LINEAR（双线性插值）或gl.NEAREST（像素风） -
gl.TEXTURE_WRAP_S和gl.TEXTURE_WRAP_T：控制 U/V 方向的重复方式，gl.REPEAT可平铺，gl.CLAMP_TO_EDGE防止边缘采样越界
在着色器中读取纹理
顶点着色器需传递纹理坐标（vec2 类型），片段着色器用 sampler2D 类型 uniform 接收，并通过 texture2D()（WebGL 1）或 texture()（WebGL 2）采样颜色。
- 确保顶点属性中正确启用并绑定
TEXCOORD属性（如a_texCoord），并关联到缓冲区 - 在 JS 中用
gl.uniform1i(loc, unit)把纹理单元编号（如 0）赋给着色器中的u_sampler - 注意 WebGL 纹理坐标原点在左下角，而 HTML 图像原点在左上角，若需匹配，可在 JS 中翻转 v 坐标（
v = 1.0 - v）或在着色器里处理
