古埃及探险(3D版)
原文作者: Aureon_de_Veyra
原始链接: https://discourse.threejs.org/t/ancient-egypt-in-3d/93504
体验地址: https://expeditione.fun/expeditions/ancient-egypt/

一、原文编译
保留原始 HTML 结构代码:
<div className="aspect-image">
<img
src="https://expeditione.fun/expeditions/ancient-egypt/global-assets/ancient-egypt-interactive-3d-dioramas-pyramids.jpg"
className="thumbnail"
alt=""
width="690"
height="388"
/>
</div>
<h3>
<a
href="https://expeditione.fun/expeditions/ancient-egypt/"
target="_blank"
rel="noopener nofollow ugc"
>Ancient Egypt in 3D | Expeditione</a
>
</h3>
<p>
Embark on an immersive 3D expedition to Ancient Egypt. Explore the Giza
Pyramids, step inside a builder's mudbrick home, inspect active limestone
quarries, study heavy Nile cargo vessels, and visit towering temples, all with
a sassy cat as your...
</p>
中文编译:
开启一场沉浸式古埃及 3D 探险。探索吉萨金字塔,走进建造者的泥砖屋,考察仍处于活跃状态的石灰岩采石场,研究尼罗河上的重型货船,参观高耸的神庙,全程还有一只“毒舌猫”伴你同行……
说明:该 Discourse 原文摘要只提供了帖子导语与封面图,未包含 GLSL/JavaScript 核心代码,因此此处没有可保留的 shader/Three.js 源码。真正的优化逻辑需要前往原帖或项目源码查看。

二、3 个核心优化要点
由于原文摘要未给出源码,以下优化要点基于“大型古埃及室外/室内混合场景 + three.js/WebGL”的常见技术链路推断,可作为阅读原项目源码时的重点验证方向。
1. 大规模场景的 LOD + 双重剔除
古埃及场景同时包含金字塔、采石场、神庙等大尺度物件与泥砖屋室内小空间。必须使用 LOD(Level of Detail,细节层次) 为远处金字塔切换低模,结合 Frustum Culling(视锥剔除) 与 Occlusion Culling(遮挡剔除),避免 CPU/GPU 处理不可见网格,降低 draw call 与顶点压力。
2. 重复物件的 Instancing + Texture Atlas
泥砖、石料、船体构件、柱子等大量重复几何体如果各自单独绘制,会迅速拉高 draw call。应使用 InstancedMesh / GPU Instancing(实例化) 批量绘制,并通过 Texture Atlas(纹理图集) 减少材质切换;必要时加入 Mipmap 解决远景纹理闪烁。
3. 移动端光照、阴影与后处理预算
沙地、石灰岩、泥砖材质依赖 PBR(Physically Based Rendering,基于物理的渲染) 与 Normal Map(法线贴图) 表现质感。移动端应控制 Shadow Map(阴影贴图) 分辨率,优先采用 Lightmap(光照贴图) 或预烘焙光照;SSAO(屏幕空间环境光遮蔽) 可降低采样或关闭;抗锯齿建议使用 MSAA 或低开销 FXAA,避免直接超采样导致帧率下降。
三、GLSL/WebGL 专业术语检查
原文摘要未直接出现 GLSL/WebGL 术语,以下检查表用于规范本文涉及的关键术语:
| 英文术语 | 推荐中文 | 检查说明 |
|---|---|---|
| GLSL | OpenGL 着色语言 / 保留 GLSL | 不建议翻译为“GL脚本” |
| WebGL | Web 图形库 / 保留 WebGL | 不建议写为“网页GL” |
| Shader | 着色器 | 不要译作“着色程序”更正式,但可以接受 |
| Vertex Shader | 顶点着色器 | 规范 |
| Fragment Shader | 片元着色器(也作片段着色器) | 在 GLSL 官方中文中“片元”更常见 |
| Uniform | 统一变量 / 保留 uniform | 不要译为“制服” |
| Varying / in-out | 可变变量 / in-out 变量 | 现代 GLSL 推荐使用 in/out |
| Attribute | 顶点属性 | 规范 |
| Buffer Geometry | 缓冲几何体 | 不要译为“缓冲几何学” |
| Draw Call | 绘制调用 / 保留 draw call | 不是“绘画调用” |
| Frame Buffer | 帧缓冲 | 不是“帧缓存器” |
| Render Target | 渲染目标 | 不要译为“渲染目标对象” |
| Mipmap | 多级渐远纹理 / 保留 mipmap | 不建议译为“贴图层级” |
| UV | UV 坐标 | 保留即可 |
| Normal Map | 法线贴图 | 不要误译为“普通贴图” |
| Displacement Map | 位移贴图 | 与法线贴图区分 |
| Ambient Occlusion | 环境光遮蔽 | 简称 AO |
| SSAO | 屏幕空间环境光遮蔽 | Screen Space Ambient Occlusion |
| PBR | 基于物理的渲染 | Physically Based Rendering |
| IBL | 基于图像的照明 | Image-Based Lighting |
| Tone Mapping | 色调映射 | 不要译为“音调映射” |
| Gamma Correction | 伽马校正 | 不要写为“伽玛校正”可选 |
| sRGB | sRGB 色彩空间 | 色彩空间相关需注意 |
| MSAA | 多重采样抗锯齿 | 不是“超采样抗锯齿” |
| FXAA | 快速近似抗锯齿 | Fast Approximate Anti-Aliasing |
| LOD | 细节层次 | Level of Detail |
| Instancing | 实例化 | GPU Instancing |
| Frustum Culling | 视锥剔除 | 不要译为“截头锥体剔除” |
| Occlusion Culling | 遮挡剔除 | 与视锥剔除区分 |
| Texture Atlas | 纹理图集 | 也可叫纹理集 |
| Lightmap | 光照贴图 | 烘焙光照常用 |
| Shadow Map | 阴影贴图 | 不要译为“阴影地图” |
| Cascaded Shadow Map | 级联阴影贴图 | 大场景阴影常用 CSM |
注:术语会随 three.js 版本与中文社区习惯略有差异,上表以 WebGL/OpenGL 官方中文和 three.js 社区常见译法为准。
