古埃及探险(3D版)

原文作者: Aureon_de_Veyra
原始链接: https://discourse.threejs.org/t/ancient-egypt-in-3d/93504
体验地址: https://expeditione.fun/expeditions/ancient-egypt/

02. Ancient Egypt Cover-2

一、原文编译

保留原始 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 源码。真正的优化逻辑需要前往原帖或项目源码查看。

Ancient Egypt in 3D

二、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 术语,以下检查表用于规范本文涉及的关键术语:

英文术语推荐中文检查说明
GLSLOpenGL 着色语言 / 保留 GLSL不建议翻译为“GL脚本”
WebGLWeb 图形库 / 保留 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不建议译为“贴图层级”
UVUV 坐标保留即可
Normal Map法线贴图不要误译为“普通贴图”
Displacement Map位移贴图与法线贴图区分
Ambient Occlusion环境光遮蔽简称 AO
SSAO屏幕空间环境光遮蔽Screen Space Ambient Occlusion
PBR基于物理的渲染Physically Based Rendering
IBL基于图像的照明Image-Based Lighting
Tone Mapping色调映射不要译为“音调映射”
Gamma Correction伽马校正不要写为“伽玛校正”可选
sRGBsRGB 色彩空间色彩空间相关需注意
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 社区常见译法为准。