无需登录 数据私有 本地保存

WebGL 纹理加载演示 - 多种格式与过滤对比

图形 开发工具 WebGL 加载 纹理 过滤
38
0
0
0
纹理图案
纹理格式
包裹模式 S/T
全局缩放
0.15x1.00x8x
画布 A — 过滤模式
A
1.00x
画布 B — 过滤模式
B
1.00x

提示：使用鼠标滚轮缩放纹理，拖拽平移查看。缩放时观察不同过滤模式的差异。Mipmap模式在缩小纹理时效果最明显。

纹理过滤常见问题与知识点

什么是纹理过滤（Texture Filtering）？
纹理过滤是当纹理被缩放（放大或缩小）时，GPU如何从纹理中采样颜色值的技术。当纹理像素（Texel）与屏幕像素不完全对应时，过滤决定了最终显示的颜色。常见的过滤模式包括最近邻（NEAREST）和双线性（LINEAR），以及结合Mipmap的各向同性过滤。
NEAREST和LINEAR过滤有什么区别？
NEAREST（最近邻）：直接取距离采样点最近的纹理像素颜色，速度快但放大时会产生明显的像素块（马赛克效果）。适合像素风游戏或需要保持锐利边缘的场景。
LINEAR（双线性）：取采样点周围4个纹理像素进行加权平均，产生平滑过渡。放大时画面柔和但略模糊，缩小时可能产生摩尔纹。适合大多数3D场景。
什么是Mipmap？为什么需要它？
Mipmap是预先计算好的纹理缩小版本序列（每一级尺寸减半）。当纹理在屏幕上缩小时，使用Mipmap可以：①减少锯齿和摩尔纹；②提升缓存命中率，提高性能；③避免远处纹理闪烁。Mipmap过滤（如LINEAR_MIPMAP_LINEAR）会在两级Mipmap之间再进行线性插值，获得最平滑的缩小效果。
纹理包裹模式（Wrap Mode）有哪些？各有什么用途？
REPEAT：纹理在UV超出[0,1]范围时重复平铺，适合地板、墙壁等需要无缝重复的场景。
CLAMP_TO_EDGE：将UV钳制在[0,1]范围内，边缘像素会被拉伸填充，适合UI元素、精灵图。
MIRRORED_REPEAT：镜像重复，每次重复时翻转纹理，产生对称效果，适合水面反射等特效。
RGBA、RGB、LUMINANCE格式有什么区别？
RGBA（4字节/像素）：完整的红绿蓝+Alpha透明度，最常用。
RGB（3字节/像素）：无Alpha通道，采样时Alpha恒为1.0，节省25%显存。
LUMINANCE（1字节/像素）：灰度格式，采样结果为(L,L,L,1)，极致节省显存。
ALPHA（1字节/像素）：仅存储透明度，采样结果为(0,0,0,A)，适合遮罩纹理。选择合适的格式可以显著优化移动端和Web应用的性能。
为什么WebGL中Mipmap需要2的幂次（POT）纹理？
WebGL 1.0规范中，非2的幂次（NPOT）纹理不能生成Mipmap，且包裹模式只能使用CLAMP_TO_EDGE。这是因为GPU硬件对POT纹理有优化。WebGL 2.0放宽了此限制。为获得最大兼容性，建议使用256×256、512×512、1024×1024等2的幂次尺寸的纹理。
🔧 相关工具