Unity WebGL构建版本材质纹理比编辑器/本地构建版本模糊如何解决

• 调整纹理导入基础配置
  • 选中对应模糊纹理，在Inspector面板将Filter Mode设置为Point (no filter)（像素类游戏）或Bilinear，避免三线性过滤在WebGL环境下的采样偏移
  • 关闭Generate Mip Maps选项，2D游戏、UI纹理不需要Mipmap，WebGL下缩放时自动调用低层级Mipmap会直接导致纹理发虚
  • 将Texture Compression设置为None，或手动选择WebGL兼容的ASTC压缩格式，默认的ETC/ETC2压缩格式在WebGL端无硬件支持时会自动转成低质量纹理
• 调整WebGL专属项目配置
  • 打开Edit > Project Settings > Player > WebGL面板，在Resolution and Presentation分类下，关闭分辨率自动拉伸适配，开启像素对齐选项
  • 在Rendering分类下，取消勾选Automatic Graphics API，手动添加WebGL 2.0作为唯一渲染API，WebGL 1.0对纹理尺寸、压缩格式的支持限制会强制降质纹理
  • 进入Edit > Project Settings > Quality面板，将WebGL对应的质量档位的Texture Quality设置为Full Res，关闭全局纹理降采样
• 调整UI适配规则（如果模糊内容为UI元素）
  • 选中场景内Canvas，将Canvas Scaler组件的UI Scale Mode设置为Constant Pixel Size，避免动态缩放导致的纹理拉伸模糊
  • 若使用Screen Space - Overlay渲染模式，可切换为Screen Space - Camera并绑定主相机，减少渲染层级缩放带来的精度损失
• 构建配置检查
  • 正式构建时不要开启Development Build模式下的纹理压缩选项，构建压缩格式选择Gzip/Brotli即可，不要对纹理资源做二次压缩

效果对比 #

• 编辑器端效果
  
• WebGL端效果
  

内容的提问来源于stack exchange，提问作者Ashmeet SIngh