mcpField
3
3d-high-resolution-textures

3d-high-resolution-textures

github.com/mengto创意与媒体7.1k548 次安装3 天前更新
代码仓库

关于 3d-high-resolution-textures

一项指导 3D 场景高分辨率纹理选择与实现的技能,面向艺术家和开发者。它侧重在近景材质细节与加载、显存及渲染成本之间取得平衡。

主要功能

  1. 01按相机视图选择分辨率
  2. 02构建一致的 PBR 材质
  3. 03配置 mipmap 与过滤
  4. 04渐进加载并缓存纹理资源
  5. 05估算 GPU 显存
  6. 06检查纹理效果与性能

适用场景

  1. 01为重点表面确定纹理尺寸
  2. 02处理植被图集的 mip 边缘
  3. 03渐进加载场景纹理
  4. 04排查接缝与材质细节问题

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/mengto/skills --skill 3d-high-resolution-textures

安装后在 Claude Code 中输入/3d-high-resolution-textures确认已加载。

附带文件agents/openai.yamlREFERENCES.md

详细介绍

3D 高分辨率纹理

让材质在最近的预期镜头视角下依然经得起细看。应一并指定可见的表面细节、贴图比例和交付成本。

根据视角选择分辨率

找出重点表面、镜头最近距离、投影像素覆盖范围和目标渲染尺寸。纹理需求取决于可见的 UV 覆盖范围:如果一个表面占据 1200 个物理像素,且只显示半个平铺单元,那么以宽约 2400 像素的平铺纹理作为起点较为合适。检查实际效果,而不是给每张贴图都指定 4K 或 8K。

对于需要清晰呈现的近景反照率/法线细节,使用更高分辨率;对于平滑的粗糙度贴图或远处表面,如果效果相当,则使用较低分辨率。让相连表面的纹素密度保持一致。放大小尺寸源文件无法凭空生成采集到的细节;必要时应获取更好的源文件,或制作适当的程序化细节。

构建协调一致的 PBR 材质

贴图用途色彩解读
基础颜色、发光颜色表面颜色或发出的颜色普通 PNG/JPEG/WebP 颜色图像使用 sRGB
法线、粗糙度、金属度、AO、高度数值型材质数据不进行色彩空间转换
HDR 光照图像环境光照的辐射度使用格式/加载器对线性 HDR 的解读

让光照计算保持线性,并仅在最后进行一次输出转换。根据材质和渲染器版本配置贴图;请参阅 Three.js 色彩管理。

预期采用动态光照时,基础颜色中不要烘焙定向高光。木纹应沿构件方向,石材纹理比例应符合实际尺寸,编织纤维方向应符合织物结构。同一材质的各张贴图应共用平铺变换。在移动光源下检查切线空间法线约定和接缝。确认已安装的渲染器支持哪个 AO UV 通道,不要盲目复制已过时的属性名称。

结合大范围色彩变化、中等尺度结构和细微的微观细节。保持凹凸/法线强度合理。法线贴图和凹凸贴图会改变着色效果;轮廓细节则需要几何体,或顶点数量足够的置换效果。木材、石材和布料通常是电介质表面,因此提高金属度并不能解决它们看起来不够闪亮的问题。

保留采样时的细节

普通静态纹理应启用 mipmap 和合适的缩小过滤。对于掠射角下的地板、屋顶和木材,应使用各向异性过滤,并将上限设为 renderer.capabilities.getMaxAnisotropy()。先比较适中的取值,再决定是否处处使用最大值;各向异性过滤能改善斜角采样,无法补回源文件中缺失的细节。

对于带透明镂空的植被,应为图集单元留出边距,将边缘颜色扩散到透明纹素中,并在各级 mipmap 中保留 Alpha 覆盖率。在明亮天空背景下检查远处的卡片面片,观察是否出现暗边或树叶消失。不要对每级 mipmap 都盲目进行阈值处理;应选择与 Alpha 测试或 Alpha 覆盖率抗锯齿兼容的方法。

逐步提供细节

  • 先加载开场视图所需的基本贴图。使用尺寸较小但实用的占位图或低分辨率版本,然后在不改变 UV 缩放或材质身份的情况下,升级为即将进入视野的主体表面。
  • 在镜头抵达可选房间和细节视图前不久,将它们加入加载队列。DOM 的 loading="lazy" 不会安排 WebGL 纹理请求;请明确使用场景可见性、镜头距离或章节状态进行调度。
  • 对请求去重,并按完整资源标识及采样/颜色设置缓存纹理变体。不要使用可能发生冲突的文件名后缀作为键。
  • 将资源保留在外部,以便缓存。WebP/AVIF 可以减少彩色图像的网络传输量;请检查数据贴图是否有压缩伪影。它们通常会解码为未压缩的 GPU 纹理。在支持的情况下,KTX2/Basis 也可以减少 GPU 存储占用;请配置并验证转码器及回退方案。参见 KTX2Loader。
  • 当没有材质再引用已被替换的 GPU 纹理时,将其释放。在不同 WebGL 上下文间复用图像字节,并不会共享 GPU 分配。

一张 4096² RGBA8 纹理带完整 mip 链时,在不计驱动开销的情况下,GPU 存储占用约为 85.3 MiB。因此,即使下载文件很小,也可能产生很大的内存分配。应为整套材质、解码后的 CPU 图像以及并发升级预留预算,而不只是考虑文件大小。

对于程序化贴图,在有帮助的情况下,提前烘焙稳定资源。缓存共享的噪声/高度场,将大型任务分批处理或交给工作线程,并避免在启动时调用数百万次 canvas 绘制。围绕一个巨大的同步操作让出执行权,并不能消除它造成的卡顿。

验证

在预期显示分辨率下检查近景和掠射角视图,然后在更远处查看同一材质并进行对比。检查接缝、纹理颗粒方向、Alpha 边缘、法线朝向,以及中性光照和最终光照下的颜色。分别记录开场所需的字节数与资源总量、请求尺寸、估算的 GPU 内存、纹理升级卡顿,以及移动设备上缺失的资源。

阅读 REFERENCES.md。在 Seijaku 中,检查 barUV、assetTex、叶片 mip/渗色预处理、共享程序化场,以及基于章节的纹理调度。这些模式比单看源图尺寸更能说明其材质细节。

评论

支持 Markdown