案例库 04 — 实时 3D

行星必须认得出来。

一颗带天气、夜间城市与航路的地球,由两份公开数据和大量运算构成。

属性
概念作品 · 自主设计
方向
实时 3D · Web
随页分发
两个 JSON,200 kB
图片文件
无
行星必须认得出来。
01

课题

一颗有天气、有日照、夜半球能看见城市灯光的地球——而且它要撑起首页,不只是案例页。后半句定下了约束:一眼要成立、拖得动、并且在页面第一句话渲染出来之前不该让访客付出任何代价。

它还得对得起这个案例库其余作品的做法。纯生成一颗行星是不可能的,所以妥协被限定得很窄,并且明说:形状来自数据,其余全部现场生成。

02

设计决策

01

1:50m 的 Natural Earth 海岸线(简化到十分之一度)加上全部二十万人以上的聚居地。由此得到:陆地遮罩、让海岸泛出青绿的离岸距离通道、按纬度成带的地貌配色,以及按人口对数缩放的城市灯光。

02

云层在 GPU 上一次烘焙完成——噪声是在每个像素对应的球面位置上采样的,因此在换日线无缝、在两极不打结——再按纬度成带:赤道多雨、副热带干燥、中纬度多风暴。

03

地表着色器读两次云层,一次在脚下,一次沿太阳方向偏移,于是云会在它下面的地面上投出阴影。

03

结果

一颗一眼就成立的地球:天气以自己的速率移动,城市随晨昏线推移次第亮起,边缘的辉光来自空气变薄,而不是因为多画了一个稍大的球。案例页与首页首屏跑的是同一份代码。

交付内容
200 kB
随页分发的数据
海岸线与 2,181 座城市,无任何图像。
0
图片文件
所有贴图都在加载时绘制。
1
光源
一颗固定的太阳,行星在它下面转。

本项目为自主设计的概念作品,非客户委托项目。文中数字描述的是交付的设计系统本身(组件数、屏数、范围与周期),不代表商业业绩。

完整案例已上线,可直接查看。

原始页面将在新标签打开,旁边还有它自己的案例研究页。

打开完整案例 →
下一个案例
05 05 — 实时 3D Movement 01 仪器研究 查看

从两周诊断开始。

先做 60 分钟评审,再进行固定费用的两周诊断。结束时你会拿到一份带预算的路线图,是否继续合作没有任何附加条件。

办公地址
23A Dromorne Rd, Remuera
Auckland