AI 开了三盏投影灯、所有物体都投影、阴影贴图 4096。电脑上好看,手机上 draw call 翻几倍、显存吃满,一转就掉帧发烫。
网页 3D · 搭一个场景
光照与阴影Lighting & Shadow
标准材质没有光就是一片黑。环境光补底,方向光像太阳一样有方向并能投影;阴影要从光的位置每帧多画一遍,开得越多、越精细越耗性能。
给这张产品图打光
下面的桌面是真实渲染的,所有物体都用标准材质,一盏灯都没开,所以一片黑。按右边的顺序开环境光、开方向光、开阴影,再选阴影精度和投影对象。画面、左下角的 draw call 读数和验收单会一起变化。
产品图打光验收单 0/5 通过
- 1看得见一盏灯都没开:画面全黑✗ 不行
- 2有立体感,背光面不死黑需要方向光 + 环境光未做
- 3产品的影子落在桌上阴影要靠方向光投,先开方向光未做
- 4影子边缘干净,显存不浪费开阴影后再选精度未做
- 5只让需要的物体投影开阴影后再选未做
从四面八方均匀补光,不分方向,不能投影
先打开方向光
阴影要靠方向光投:先开方向光
画面全黑不是 bug:MeshStandardMaterial 按真实光照计算颜色,没有光就没有颜色。先开环境光。
知识点:先看得见,再有形状,最后才是影子
刚才产品图的每一步变化,对应下面一条。
- MeshStandardMaterial 这类标准材质按真实光照算颜色:没有光就是全黑,这不是模型坏了。
- 环境光(AmbientLight / HemisphereLight)均匀补底,不分方向、不能投影;方向光(DirectionalLight)像太阳,有方向,分出亮面和暗面,还能投影。
- 阴影的代价:渲染器每帧先从光的位置把投影物体再画一遍,draw call 直接上涨;投影的物体越多,多画的越多。
- 阴影贴图精度(mapSize)越高边缘越干净,显存按边长的平方涨:1024 → 2048 显存翻 4 倍,画面差别却很小。
- 只给需要的物体开 castShadow:产品投影、地面接收;看不见的墙、远处小道具不投影。
- 阴影范围(阴影相机的大小)要贴合产品:范围越大,同样的精度分到每个物体上的像素越少,锯齿越明显。
什么时候用、怎么验收
模型放进来一片黑、平得像纸,或者一开阴影手机就卡,都是这一页的问题。
- 信号:AI 报告里出现 AmbientLight、DirectionalLight、castShadow、receiveShadow、shadow.mapSize。
- 需求写法:「一盏环境光 + 一盏投影的方向光;只有产品和地面参与阴影;阴影贴图 1024;报告开阴影前后的帧率和 draw call」。
- 验收一:画面里没有一片死黑或曝光过度的区域;转一圈看背光面。
- 验收二:让 AI 给出开阴影前后的 draw call 和帧率,在真实手机上对比。
- 不适用:纯展示、不动的场景可以把阴影「烘焙」进贴图,就不用每帧实时算——这时要的是美术流程,不是更多灯。
正反例:同一张产品图
都想要「有影子的高级感」,只差一个选择。
画面同样有立体感和落地的影子,阴影通道只多画产品那几次,显存约 8 MB,手机上依然流畅。
快速自测
AI 做的 3D 展厅里放了 200 把椅子,开了阴影后手机明显卡顿,画面里其实只有中间那张桌子的影子显眼。最该先让 AI 改什么?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。