首页/新闻资讯/正文详情

Three.js 阴影烘焙与环境光遮蔽(AO)贴图实战

发布时间:2026/9/27 8:38:25 来源:云帆数科 栏目:资讯中心
Three.js 阴影烘焙与环境光遮蔽(AO)贴图实战
Three.js 阴影烘焙与环境光遮蔽AO贴图实战在 Web 3D 展厅、建筑漫游与数字孪生大屏中如果场景只依赖实时的平行光阴影Shadow Mapping墙角与地面交界处、家具底部与背光处往往呈现出一片死黑或极不真实的塑料平光感开启 4 盏实时投射阴影的光源会让移动端 Draw Call 与显存带宽直接打爆帧率瞬间跌破 20 FPS。在电影与 AAA 游戏工业中解决该问题的终极武器是**“光影烘焙Light Baking”与“环境光遮蔽Ambient Occlusion, 简称 AO”**。通过在 Blender 或 3ds Max 中预先离线计算全局光照Global Illumination与漫反射反弹并将光影与转角阴影预先烘焙进两张轻量的二维纹理贴图Lightmap AO Map中我们可以在 Web 端以0 额外 Draw Call、0 实时光源开销呈现出真实世界般温润细腻的建筑空间质感。实时阴影 vs AO 烘焙贴图原理对比flowchart LR subgraph RealtimeShadow [传统实时阴影 (Realtime Shadow Map)] Light[实时光源] -- ShadowPass[每帧额外产生 1 次全场景 Shadow Pass] ShadowPass -- HardEdge[硬边锯齿走样 无法计算复杂漫反射反弹 性能消耗极大] end subgraph BakedAO [预烘焙 AO 与光照贴图 (Lightmap / AO)] Offline[Blender 离线光线追踪计算 10 分钟] -- AOTexture[烘焙生成单通道 AO 纹理 (uv2 映射)] AOTexture -- MeshPBR[运行时 PBR 材质乘法叠加: 0 额外渲染通行极致电影级柔光!] endThree.js 材质双 UV 映射体系uv 与 uv2在 3D 模型中应用 AO 贴图和光照贴图必须理解第二套纹理坐标uv2uv第一套坐标用于基础漫反射纹理Map与法线贴图NormalMap通常会在表面高频重复平铺Tilinguv2第二套坐标必须是不重叠、展开至 $[0, 1]$ 空间的唯一展开图Unique Lightmap UV Unwrap专门用于精准对应整座建筑每一个角落的阴影遮蔽信息。如果几何体中缺少uv2属性Three.js 会在控制台抛出警告且 AO 贴图无法生效。import * as THREE from three; export function setupMeshWithAOMap( mesh: THREE.Mesh, aoTexture: THREE.Texture, lightmapTexture?: THREE.Texture ) { const geometry mesh.geometry; // 1. 检查并自动补充 uv2 属性若导出时已有一套 uv可复用或读取第二套 if (!geometry.attributes.uv2 geometry.attributes.uv) { // 将基础 uv 属性克隆为 uv2 属性 geometry.setAttribute(uv2, geometry.attributes.uv); } // 2. 配置 AO 贴图属性 aoTexture.flipY false; // GLTF 规范贴图 Y 轴不翻转 aoTexture.colorSpace THREE.NoColorSpace; // AO 是纯物理遮蔽数据坚决不能应用 sRGB 伽马校正 // 3. 配置 PBR 标准材质 (MeshStandardMaterial) const material new THREE.MeshStandardMaterial({ color: #e2e8f0, roughness: 0.8, metalness: 0.1, aoMap: aoTexture, aoMapIntensity: 1.2, // AO 阴影浓淡强度系数 (1.0~1.5 呈现深沉水墨转角) }); if (lightmapTexture) { lightmapTexture.flipY false; lightmapTexture.colorSpace THREE.SRGBColorSpace; // 光照贴图包含颜色信息需开启 sRGB material.lightMap lightmapTexture; material.lightMapIntensity 1.0; } mesh.material material; }生产级光影质感优化三部曲环境光贴图Environment Map / IBL协同AO 贴图的作用正是遮蔽掉不合理的 IBL 环境反射光。为场景配置一张高动态范围的 HDR 全景图scene.environment hdrTexture结合 AO 贴图模型在暗处沉稳沉静在亮处通透有光轻量朱砂点睛微光源在静态烘焙的柔和空间基底上仅保留 1 盏低强度的点光源PointLight随鼠标移动形成画龙点睛的动态高光掠影显存纹理压缩KTX2 / Basis将 2048x2048 的 AO 贴图转换为 KTX2 压缩纹理文件体积从 16MB 锐减至 800KB实现移动端秒开。以离线算力烘焙永恒光影在极低消耗下赋予 Web 3D 空间以水墨丹青般的浑厚层次。

相关推荐

highlight.io 日志功能落地:从 Logging RFC 到基于 ClickHouse 的全栈日志方案
highlight.io 日志功能落地:从 Logging RFC 到基于 ClickHouse 的全栈日志方案

可观测性后端 【免费下载链接】highlight highlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging, distributed tracing, and more. 项目地址: https://gitcode.com/gh_mirrors/hi/highlight 点击查看 免费下… · 2026/9/27 8:38:13

分层摘要记忆池机制实战:破解长文本大模型上下文遗忘的工程解法
分层摘要记忆池机制实战:破解长文本大模型上下文遗忘的工程解法

分层摘要记忆池机制实战:破解长文本大模型上下文遗忘的工程解法在大语言模型(LLM)处理数百万字超长历史(如多卷本专业医学典籍阅读、大型软件工程全仓库架构问答、数十轮长期智能体交互)时,层次化摘要记忆池… · 2026/9/27 8:38:13

NodeMCU HTTP 服务器 Lua 模块(httpserver)完整实战指南:API 详解与源码级原理剖析
NodeMCU HTTP 服务器 Lua 模块(httpserver)完整实战指南:API 详解与源码级原理剖析

物联网嵌入式 【免费下载链接】nodemcu-firmware Lua based interactive firmware for ESP8266, ESP8285 and ESP32 项目地址: https://gitcode.com/gh_mirrors/no/nodemcu-firmware 点击查看 免费下载 导读 本文围绕 NodeMCU 固件仓库中的 docs/lua-modules/http… · 2026/9/27 8:38:13

网站建设前期团队建设免费工具推荐
网站建设前期团队建设免费工具推荐

不会代码做网站?图解步骤拆解团队建设成本 很多老板手里有项目、有想法,但一听到“开发”两个字就头大。自己不会写代码,又怕被外包公司坑,到底该怎么组个靠谱的团队?别急,今天咱们不聊虚的,直接上干货。… · 2026/9/27 9:09:17

程序员源码网站速查手册:3步搞定被黑挂马自救
程序员源码网站速查手册:3步搞定被黑挂马自救

程序员源码网站速查手册:3步搞定被黑挂马自救 网站突然挂满博彩广告,后台密码怎么改都进不去,或者打开全是乱码?这种半夜被黑搞到崩溃的时刻,90%的独立站长都经历过。别慌,这通常不是硬件坏了,而是你的代码权限管理出了漏洞。… · 2026/9/27 9:09:04

制作网站难不难?被黑挂马后看这份建站报价避坑指南
制作网站难不难?被黑挂马后看这份建站报价避坑指南

制作网站难不难?被黑挂马后看这份建站报价避坑指南 昨天凌晨三点,我被一个客户的电话吵醒,声音都在抖:“网站打不开了,浏览器弹出黄色警告,说被植入了非法链接,客户投诉都打爆了!” 那一刻,我看着他屏幕上密密麻麻的报错日志,心里只有两个字:… · 2026/9/27 9:08:46

正则如何驱动索引查询?深入剖析tgrep的QueryPlan分解与Bloom过滤技巧
正则如何驱动索引查询?深入剖析tgrep的QueryPlan分解与Bloom过滤技巧

正则如何驱动索引查询?深入剖析tgrep的QueryPlan分解与Bloom过滤技巧 【免费下载链接】tgrep Trigram-indexed grep with a client/server architecture for fast regex search in large codebases locally 项目地址: https://gitcode.com/gh_mirrors/tg/tgrep … · 2026/9/27 9:08:40

进阶实战】从单机跑通到高可用架构:我的全栈监控大屏性能与安全优化
进阶实战】从单机跑通到高可用架构:我的全栈监控大屏性能与安全优化

问题执行 docker compose up -d 启动后,docker ps 显示所有容器均为 Up 状态,但访问网站却返回 502。Flask 日志:Cant connect to MySQL server on db原因Up ≠ 能用。MariaDB 启动后要 20-30 秒加载数据、建索引。这段时间容器是 Up&#xf… · 2026/9/27 9:08:10

gitsome 完全指南:基于 xonsh 的 Git/GitHub 超强命令行界面与 29 个集成命令实战
gitsome 完全指南:基于 xonsh 的 Git/GitHub 超强命令行界面与 29 个集成命令实战

开发工具版本控制 【免费下载链接】gitsome A supercharged Git/GitHub command line interface (CLI). An official integration for GitHub and GitHub Enterprise: https://github.com/works-with/category/desktop-tools 项目地址: https://gitcode.com/gh_mirr… · 2026/9/27 9:08:09

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现
MATLAB雷达信号脉冲压缩仿真:LFM线性调频、匹配滤波与距离分辨率实现

简介:这套Matlab仿真工具完整呈现雷达信号脉冲压缩过程,从线性调频(LFM)信号生成、目标回波仿真到匹配滤波压缩处理均有可运行代码支撑,面向电子信息工程、计算机、数学等专业学生,适用于课程设计、期末大作… · 2026/9/27 0:00:01

汕头网站建设制作厂家避坑指南:5大注意事项救急
汕头网站建设制作厂家避坑指南:5大注意事项救急

汕头网站建设制作厂家避坑指南:5大注意事项救急 改个需求建站公司拖一周,这种憋屈事我见得太多了。 很多汕头老板找本地建站团队,签合同前看着方案挺美,一上线就变脸。 今天不聊虚的,直接拆解找 汕头网站建设制作厂家 时的5个核心 注意事项… · 2026/9/27 0:00:01

多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习
多模态虚假新闻检测实战:BERT+ResNet双塔与对比学习

简介:基于PyTorch的多模态虚假新闻检测项目完整代码包,面向自然语言处理与计算机视觉交叉方向的开发者、科研人员及毕业设计选题者,解决社交媒体中文本与图像联合识别虚假新闻的问题。系统以BERT预训练模型提取文本语义特征,以Res… · 2026/9/27 0:00:01

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码