案例库 07 — 实时 3D

一家在雨里自己运转的得来速。

一家雨夜里的得来速餐厅——排队的车、来往的顾客、落在每一处表面上的雨——在浏览器里实时模拟。

属性
概念作品 · 自主设计
方向
实时 3D · Web
场景
得来速、餐厅、停车场、街道
体积
无模型、无图片文件
一家在雨里自己运转的得来速。
01

课题

大多数建筑可视化,展示的都是正午、空无一人的建筑。得来速恰恰相反:它由穿过它的东西来定义,而且最忙的时候是夜里、是坏天气、是招牌在干活的时候。

所以这次的题目是一个会运转、而不是摆姿势的场景——雨夜里车队在走、人来人往、湿地面把每一盏灯都映成两盏——只用一个页面,全部由代码生成,按一下按钮就能在中英文之间切换。

02

设计决策

01

车队是模拟出来的。每辆车沿样条曲线行驶,和前车保持距离,按真正刹得住的距离减速,在点餐屏、付款窗和取餐窗依次等待,遇到横穿的行人会让行。刹车灯和转向灯跟着车的实际动作走。

02

雨只用一次绘制:三万条雨丝在顶点着色器里围绕镜头循环,雨棚下的会被丢弃,并被最近的八个光源照亮。地面水圈、雨棚滴水和闪电是另外三个小着色器。

03

除了代码什么都不下载。柏油、外墙波纹板、木板、石材、混凝土、草地和玻璃,都在加载时用 canvas 画出来,每一种都带有从自身高度图推导出的法线贴图。招牌也是这样画的,所以切换语言时,每一块招牌、菜单屏和车牌都会重绘。

03

结果

一个不靠脚本也能让人一直看下去的场景:六到八辆车在车道里依次通过,顾客进进出出,九个镜头预设从餐厅里一直到某辆车的后保险杠,还有实时的排队计数。建筑、场地和城市在加载时按材质合并,静态部分只需几十次绘制调用,而不是几千次。

交付内容
3
个停靠点
点餐屏、付款窗、取餐窗。
30,000
条雨丝
一次绘制,被最近的招牌照亮。
2
种语言
切换时所有招牌、菜单和车牌一起重绘。

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

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

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

打开完整案例 →
下一个案例
08 08 — 社区平台 Luna Bloom Society 母婴社区 查看

从两周诊断开始。

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

办公地址
23A Dromorne Rd, Remuera
Auckland