案例库
04 — 实时 3D
行星必须认得出来。
一颗带天气、夜间城市与航路的地球,由两份公开数据和大量运算构成。
属性
概念作品 · 自主设计
方向
实时 3D · Web
随页分发
两个 JSON,200 kB
图片文件
无
01
课题
一颗有天气、有日照、夜半球能看见城市灯光的地球——而且它要撑起首页,不只是案例页。后半句定下了约束:一眼要成立、拖得动、并且在页面第一句话渲染出来之前不该让访客付出任何代价。
它还得对得起这个案例库其余作品的做法。纯生成一颗行星是不可能的,所以妥协被限定得很窄,并且明说:形状来自数据,其余全部现场生成。
02
设计决策
01
1:50m 的 Natural Earth 海岸线(简化到十分之一度)加上全部二十万人以上的聚居地。由此得到:陆地遮罩、让海岸泛出青绿的离岸距离通道、按纬度成带的地貌配色,以及按人口对数缩放的城市灯光。
02
云层在 GPU 上一次烘焙完成——噪声是在每个像素对应的球面位置上采样的,因此在换日线无缝、在两极不打结——再按纬度成带:赤道多雨、副热带干燥、中纬度多风暴。
03
地表着色器读两次云层,一次在脚下,一次沿太阳方向偏移,于是云会在它下面的地面上投出阴影。
03
结果
一颗一眼就成立的地球:天气以自己的速率移动,城市随晨昏线推移次第亮起,边缘的辉光来自空气变薄,而不是因为多画了一个稍大的球。案例页与首页首屏跑的是同一份代码。
交付内容
200 kB
随页分发的数据
海岸线与 2,181 座城市,无任何图像。
0
图片文件
所有贴图都在加载时绘制。
1
光源
一颗固定的太阳,行星在它下面转。
本项目为自主设计的概念作品,非客户委托项目。文中数字描述的是交付的设计系统本身(组件数、屏数、范围与周期),不代表商业业绩。
完整案例已上线,可直接查看。
原始页面将在新标签打开,旁边还有它自己的案例研究页。
从两周诊断开始。
先做 60 分钟评审,再进行固定费用的两周诊断。结束时你会拿到一份带预算的路线图,是否继续合作没有任何附加条件。
办公地址
23A Dromorne Rd, Remuera
Auckland
Auckland