案例库 06 — 实时 3D

光才是模型。

把一颗色散玻璃标本重建为实时场景:光谱来自折射本身,而不是折射的照片。

属性
概念作品 · 自主设计
方向
实时 3D · Web
交付物
实时场景、调参面板、案例研究
体积
无模型、无贴图、无 CDN
光才是模型。
01

课题

要对上的画面,是厚玻璃里的矿物体,边缘裂成光谱,细环在前后穿行。做出形状是容易的那一半:导出成模型放进页面,它就是一坨灰色的东西。参考图里真正成立的部分都在照明和折射上,而这两样都无法随导出一起带走。

所以要做的不是复制一张图,而是重建让这张图成立的条件——在任意比例的视窗里、在物体转动时都站得住,并且不传输任何素材文件。

02

设计决策

01

色散是物理的。内核是不透明网格,因此会进入渲染器的折射背景,外壳再按波长折射它——彩色边随物体转动而正确移动,屏幕空间特效做不到这一点。

02

照明由程序化环境承担:暗房里几块宽光板加三条窄亮条,预过滤成环境贴图。被拉成光谱的正是那几条亮条;没有它们,玻璃就无光可折。

03

翼原本做成独立薄片,在暗背景下像灰塑料,于是弃用。改由外壳的位移场长出凸起,让同一张连续折射面一直延伸到轮廓之外。

03

结果

约四十千字节手写代码,跑在随仓库分发的渲染器之上,在加载时生成自己的几何、照明与颗粒。它经得起转动、缩放和换种子,可作为模块嵌入任意页面,组件卸载时把显卡资源交还。

交付内容
0
素材文件
几何、颜色与尘埃都由带种子的噪声生成。
2
位移球体
玻璃本体与沉积内核,法线由切向探针求出。
40 kB
手写代码
跑在随仓库分发的渲染器上,无第三方脚本。

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

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

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

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

从两周诊断开始。

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

办公地址
23A Dromorne Rd, Remuera
Auckland