简介这份天空盒贴图素材面向3D游戏开发、建筑可视化与影视特效方向的创作者用于为虚拟场景快速搭建逼真的天空与环境背景解决环境氛围单一、背景资源匮乏的问题。压缩包共523个文件约80.69MB以144张jpg与59张tga贴图为主体配合278个meta、35个mat及6张png覆盖海边、郊外、广场等不同场景的六面贴图可直接映射到立方体模型上使用。资源已积累11322人学习下载说明其在同类素材中具备较高的参考与复用价值。使用者可从中获得多套风格各异的天空盒涵盖晴天、黄昏、星空等氛围既能用于Unity、OpenGL等引擎的背景渲染也能作为学习纹理坐标与渲染模式的实践素材帮助提升场景真实感与沉浸感。1. 天空盒贴图素材从六张图到一套能用的环境光照做实时渲染的人迟早会撞上同一个问题模型材质调得再细场景里没有一套像样的天空盒贴图素材画面就是“塑料感”扑面而来。天空盒Skybox本质是包裹整个场景的立方体或球体用六张或一张全景图提供背景与环境反射。它不只是背景板在 PBR 流程里它直接决定 IBL基于图像的光照的质量——金属反射什么、漫反射染什么色全看这套贴图。这次拆的这份天空盒贴图素材覆盖了从晴天、黄昏、阴天到室内棚拍、太空星云等常见环境类型格式以等距柱状投影Equirectangular全景图和立方体六面图为主分辨率从 2K 到 8K 不等。适合做游戏场景、建筑可视化、产品渲染以及任何需要快速搭建可信环境光照的从业者。下面按“怎么选、怎么转、怎么接进引擎、坑在哪”的顺序讲透。2. 天空盒贴图的投影方式与选型等距柱状还是立方体拿到一堆天空盒贴图素材第一件事不是往引擎里拖而是判断它的投影类型。用错了投影天空盒会拉伸、接缝错位甚至反射方向全乱。这一章把两种主流格式的差异、转换方法和选型逻辑讲清楚。2.1 等距柱状投影与立方体投影的本质差异等距柱状投影Equirectangular简称 EQ把整个球面展开成一张 2:1 的矩形图经度映射到横轴、纬度映射到纵轴。它的优点是单文件、易编辑、全景相机和 HDRI 采集设备默认输出这种格式。缺点是两极区域被严重拉伸靠近天顶和天底的部分像素利用率极低——一张 4K 的 EQ 图真正清晰的赤道区域可能只占一半有效像素。立方体投影Cubemap把环境拆成前、后、左、右、上、下六张正方形图每张对应立方体的一个面。它的优点是采样均匀、无极点拉伸GPU 采样时直接按方向向量命中对应面效率高。缺点是六张图分开管理接缝处如果处理不好会出现细线。选型逻辑很直接如果你用的是 HDRI 做 IBL优先保留 EQ 格式因为大多数引擎的 HDRI 导入流程会自动做卷积如果你要做实时反射探针Reflection ProbeCubemap 是更合适的目标格式采样开销更低。常见做法是素材库同时提供两种格式或者提供 EQ 源图加一个转换脚本。2.2 用 Python 把 EQ 全景图转成六面 Cubemap很多素材包只给 EQ 图但引擎需要 Cubemap。手动在 Photoshop 里切六面既慢又容易算错朝向。我一般用一段 Python 脚本批量转核心是把球面坐标映射到立方体六个面的 UV。import numpy as np from PIL import Image def equirect_to_cubemap(eq_path, out_size1024): # 读取等距柱状全景图转为浮点数组便于计算 eq Image.open(eq_path).convert(RGB) eq_arr np.asarray(eq, dtypenp.float32) h, w, _ eq_arr.shape # 立方体六个面的方向定义X, -X, Y, -Y, Z, -Z # 每个面用 (u, v) 在 [-1, 1] 范围内生成方向向量 faces { px: lambda u, v: ( 1, -v, -u), nx: lambda u, v: (-1, -v, u), py: lambda u, v: ( u, 1, v), ny: lambda u, v: ( u, -1, -v), pz: lambda u, v: ( u, -v, 1), nz: lambda u, v: (-u, -v, -1), } # 生成立方体每个面的像素网格坐标 lin np.linspace(-1, 1, out_size, dtypenp.float32) u, v np.meshgrid(lin, lin) result {} for name, fn in faces.items(): x, y, z fn(u, v) # 归一化方向向量 norm np.sqrt(x*x y*y z*z) x, y, z x/norm, y/norm, z/norm # 球面坐标转经纬度再映射到 EQ 图像素 theta np.arctan2(z, x) # 经度 [-pi, pi] phi np.arccos(np.clip(y, -1, 1)) # 纬度 [0, pi] px ((theta np.pi) / (2 * np.pi) * (w - 1)).astype(np.int32) py (phi / np.pi * (h - 1)).astype(np.int32) # 双线性采样可进一步优化这里用最近邻保证可读性 face eq_arr[py, px] result[name] Image.fromarray(face.astype(np.uint8)) return result # 调用示例转换一张 4K EQ 图输出 1024 的六面 faces equirect_to_cubemap(sky_eq_4k.jpg, out_size1024) for name, img in faces.items(): img.save(fcubemap_{name}.png)这段脚本的逻辑分三步先把 EQ 图读成数组再为立方体每个面生成方向向量最后把方向向量反算成经纬度去 EQ 图上采样。参数out_size控制输出面分辨率一般设成 512 或 1024 就够实时反射用做离线渲染可以拉到 2048。注意faces字典里的方向定义要和引擎的 Cubemap 朝向一致不同引擎的 Y/-Y 约定可能不同转完最好在引擎里目视检查一下天地有没有颠倒。2.3 分辨率、位深与文件格式的取舍天空盒贴图素材的分辨率不是越高越好。实时渲染里反射探针用的 Cubemap 通常 256 到 512 就足够因为最终会经过粗糙度卷积高频细节会被模糊掉。真正需要高分辨率的是背景直接可见的场景比如建筑漫游里用户会盯着天空看这时候 4K 甚至 8K 的 EQ 图才有意义。位深方面做 IBL 的 HDRI 必须是 32 位浮点.hdr 或 .exr因为太阳亮度可能比阴影区域高几个数量级8 位图直接截断成白色光照信息就丢了。如果只是当背景板用8 位 JPEG 或 PNG 完全够。文件格式上.hdr 兼容性最好.exr 支持更多通道但体积大。我一般会准备两套一套 32 位 .hdr 用于光照一套 8 位 .jpg 用于快速预览和背景。提示拿到素材先看文件头用file命令或 Python 的 PIL 读一下 mode确认是浮点还是整型别把 8 位图当 HDRI 用否则金属反射会一片死白。3. 把天空盒接进渲染管线Unity、Unreal 与 Three.js 的实操差异素材选好了接下来是接进引擎。不同引擎对天空盒的处理流程差异不小这一章按 Unity、Unreal、Three.js 三个常见环境分别给步骤重点讲参数怎么设、光照怎么绑。3.1 Unity 里用 HDRI 做天空盒与反射探针Unity 的流程相对标准。把 EQ 格式的 .hdr 拖进 Project 窗口Inspector 里把 Texture Shape 改成 CubeMapping 选 Latitude Longitude Layout然后 Apply。这一步 Unity 会自动把 EQ 转成 Cubemap。接着打开 Lighting 窗口Environment 标签下把 Skybox Material 换成新建的材质Shader 选 Skybox/Cubemap把刚才的 Cubemap 拖进去。如果要做反射在场景里放一个 Reflection ProbeType 选 Baked 或 RealtimeRealtime 模式下把 Resolution 设成 128 或 256Cubemap 会自动更新。关键参数是 Lighting 窗口里的 Environment Lighting。Source 选 Skybox 时Unity 会用天空盒做环境光Intensity Multiplier 控制强度一般 1.0 起步室内场景可以降到 0.5。如果场景偏暗别急着加平行光先调这个乘数往往更自然。3.2 Unreal Engine 的 Sky Light 与 HDRI BackdropUnreal 里天空盒的入口是 Sky Light 组件。把 .hdr 导入后在 Sky Light 的 Details 面板里Source Type 选 SLS_SpecifiedCubemap然后指定 Cubemap。如果导入的是 EQ 图Unreal 会自动识别并转换。移动端项目要注意Sky Light 的 Mobility 设成 Static 才能烘焙设成 Movable 则每帧实时计算开销大但支持动态天空。Cubemap Resolution 默认 128做高质量反射可以提到 256再高收益递减。如果只是想要一个好看的背景而不参与光照可以用 HDRI Backdrop 插件它把天空盒、背景网格和光照打包在一起拖进场景就能用。但要注意它的光照是简化的做产品级渲染还是老老实实走 Sky Light 加 Reflection Capture。3.3 Three.js 中加载 EQ 贴图并设置环境映射Web 端用 Three.js 的话流程又不一样。Three.js 从 r140 之后推荐用RGBELoader加载 .hdr再用PMREMGenerator做预卷积。import * as THREE from three; import { RGBELoader } from three/examples/jsm/loaders/RGBELoader.js; const renderer new THREE.WebGLRenderer({ antialias: true }); const scene new THREE.Scene(); const pmrem new THREE.PMREMGenerator(renderer); new RGBELoader().load(sky_eq_4k.hdr, (texture) { // 设置映射方式为等距柱状否则贴图会按 UV 平铺 texture.mapping THREE.EquirectangularReflectionMapping; // 用 PMREM 生成环境贴图供 PBR 材质使用 const envMap pmrem.fromEquirectangular(texture).texture; scene.environment envMap; scene.background texture; // 背景直接用原图省一次采样 texture.dispose(); pmrem.dispose(); });这里有两个容易翻车的点。一是texture.mapping必须设成EquirectangularReflectionMapping否则 Three.js 会把它当普通贴图平铺反射方向全错。二是scene.environment和scene.background可以分开设environment 用预卷积后的background 用原图这样背景清晰、反射高效。如果背景也用 envMap会看到明显的模糊。注意Three.js 的 PMREM 生成有开销别在每帧里调用。加载完成后生成一次存下来复用。4. 天空盒贴图的避坑与排查接缝、色偏、光照不匹配天空盒这东西用对了是氛围神器用错了就是玄学现场。下面五条是我和周围人踩过的真实坑按现象、原因、解决三段写。4.1 立方体接缝处出现细线现象Cubemap 六个面拼起来后面与面交界处有一条亮线或暗线转动相机时尤其明显。原因六个面在边缘像素上做了独立采样双线性插值到边界时没有跨面取邻居像素导致边缘值不连续。或者转换脚本里 UV 映射到了图像边界外被 clamp 成了边缘色。解决转换时在面边缘留 1 到 2 像素的 padding或者用GL_TEXTURE_CUBE_MAP_SEAMLESS开启无缝采样。Unity 和 Unreal 默认开启无缝Three.js 需要检查renderer.capabilities.isWebGL2WebGL2 默认支持。4.2 HDRI 导入后整体偏暗或偏亮现象同一张 .hdr在引擎里看比在 Photoshop 或在线预览里暗一大截金属反射发灰。原因色彩空间没设对。HDRI 通常是线性空间但引擎默认按 sRGB 解读导致亮度被 gamma 曲线压暗。或者曝光设置和素材的 EV 值不匹配。解决Unity 里把 .hdr 的 sRGB 选项取消勾选Unreal 里确认 Color Space 是 LinearThree.js 里texture.colorSpace THREE.LinearSRGBColorSpace。如果还是不对调 Environment Intensity 而不是改贴图本身。4.3 天空盒和场景光照方向对不上现象天空盒里太阳在左边但场景里的平行光从右边打过来阴影方向矛盾画面很假。原因天空盒只做了背景没有和主光源绑定。或者 HDRI 里的太阳位置和手动加的 Directional Light 角度不一致。解决要么从 HDRI 里提取太阳方向用脚本算出方位角和仰角再同步给平行光要么干脆不用手动平行光完全依赖 HDRI 的 IBL 光照。后者更省事但需要 HDRI 本身有足够的动态范围。4.4 移动端上天空盒导致帧率骤降现象桌面跑得好好的场景打包到移动端后帧率掉一半Profiler 里显示 Cubemap 采样开销很大。原因用了实时 Reflection Probe 或者高分辨率 Cubemap移动端 GPU 的纹理采样带宽有限。或者 HDRI 是 32 位浮点移动端对浮点纹理支持不好。解决移动端把 Cubemap 分辨率降到 64 或 128Reflection Probe 改成 BakedHDRI 换成 8 位 RGBM 编码。RGBM 用一张 8 位图存高动态范围精度略降但带宽省很多。4.5 EQ 图两极拉伸导致天顶出现旋涡现象用 EQ 图直接做背景时抬头看天顶纹理像被拧成一团。原因等距柱状投影的固有缺陷极点处所有经度汇聚到一点像素被无限拉伸。解决如果天顶是纯色或云层拉伸不明显如果有明显图案建议转成 Cubemap 再用或者用天空盒素材里专门处理过极点的版本。有些素材包会额外提供一张天顶补丁图贴上去盖住旋涡区域。5. 进阶技巧从天空盒提取定向光与批量验证素材用熟之后可以再往前走一步。天空盒不只是背景它本身携带了场景的光照信息能把这份信息榨出来手动打光的活儿就省了。5.1 从 HDRI 估算主光源方向与颜色很多引擎支持从 HDRI 自动提取定向光但如果你用的管线没有这个功能可以自己算。思路很简单把 EQ 图按亮度排序找到最亮的区域它的经纬度就是主光源方向平均颜色就是光源颜色。import numpy as np from PIL import Image def extract_sun(eq_path, top_percent0.5): img np.asarray(Image.open(eq_path).convert(RGB), dtypenp.float32) h, w, _ img.shape # 用亮度加权避免纯色高光区域干扰 luminance 0.2126*img[:,:,0] 0.7152*img[:,:,1] 0.0722*img[:,:,2] threshold np.percentile(luminance, 100 - top_percent) mask luminance threshold ys, xs np.where(mask) # 经度横轴映射到 [-pi, pi]纬度纵轴映射到 [0, pi] lon (xs / w) * 2 * np.pi - np.pi lat np.pi / 2 - (ys / h) * np.pi # 转成方向向量再平均避免角度环绕问题 x np.cos(lat) * np.cos(lon) y np.sin(lat) z np.cos(lat) * np.sin(lon) direction np.array([x.mean(), y.mean(), z.mean()]) direction / np.linalg.norm(direction) color img[mask].mean(axis0) / 255.0 return direction, color direction, color extract_sun(sky_eq_4k.hdr) print(主光方向:, direction, 颜色:, color)top_percent控制取最亮多少比例的像素默认 0.5% 适合大多数户外 HDRI。如果 HDRI 里有多个亮源比如室内多盏灯这个简单方法会给出一个平均方向这时候还是手动打光更可控。算出来的方向可以直接喂给平行光的 rotation颜色乘上强度就是光色。5.2 批量检查素材的投影类型与分辨率素材一多难免混进格式不对的文件。写个批量检查脚本把目录里所有图片扫一遍输出投影类型猜测和分辨率比一个个打开看快得多。检查项判断依据处理建议投影类型宽高比 2:1 且内容连续 → EQ六张同尺寸方图 → Cubemap非 2:1 的 EQ 图需要裁剪或重采样位深PIL mode 为 F 或 I → 浮点RGB → 8 位浮点图用于 IBL8 位图仅作背景分辨率短边小于 1024 → 低清低清图别用于主反射可做远景文件格式.hdr/.exr → 高动态.jpg/.png → 低动态按用途分流import os from PIL import Image def scan_skybox(folder): for f in sorted(os.listdir(folder)): path os.path.join(folder, f) try: img Image.open(path) except Exception: continue w, h img.size ratio round(w / h, 2) kind EQ if ratio 2.0 else (Cubemap面 if ratio 1.0 else 未知) depth 浮点 if img.mode in (F, I) else 8位 print(f{f}: {w}x{h}, 比例{ratio}, {kind}, {depth})跑一遍就能把素材库理清楚哪些能直接进引擎、哪些需要转换、哪些只能当预览图一目了然。5.3 验证天空盒是否正确的三个快速方法接完天空盒别急着渲染最终图先做三个检查。第一放一个纯金属球在场景中央粗糙度设 0看反射里天空盒的太阳位置和背景是否一致不一致说明 Cubemap 朝向错了。第二放一个纯白漫反射球看它被环境光照亮的颜色是否和天空盒整体色调吻合偏冷偏暖一眼就能看出来。第三转动相机一圈看接缝处有没有跳变有跳变说明 Cubemap 边缘没处理好。这三个检查花不了两分钟但能挡掉后面几小时的返工。从那以后我每次导入新的天空盒贴图素材都强制走一遍金属球、白球、转一圈这三步确认没问题再往下做。希望帮到你。本文还有配套的精品资源点击获取