北京
Vercel 的开源着色器库 vgpu 即将发布，但落地页还缺一个撑场面的英雄视觉元素。一位工程师接下了这个任务：重新构想 Vercel 标志性的棱镜——那个把白光拆成彩虹光谱的玻璃块。
他一开始走了最直接的路：模拟光的物理特性。对墙上的每个像素，通过棱镜向后投射光线，检查它们是否到达光源。结果很现实——每像素 16 次抖动的光线追踪器，成本高得离谱，渲染出来的效果还偏软。这条路走不通。
从物理模拟转向几何构造
于是他去研究了折射的几何原理，换了个思路：不再逐像素算光，而是为每个波长计算斯涅尔定律的折射路径，再把相邻路径连接成三角形网格面。这样既保留了基于物理的色彩分离，又拿到了更清晰、成本更低的光束表现。光线追踪让位给了参数化网格生成。
玻璃本身的质感，他也没从零写。之前为 eve.dev 构建过一个由立方体贴图驱动的玻璃着色器，这次直接复用并适配了一下，就实现了棱镜周围逼真的反射和折射。可控的复杂度，换来的是接近物理模拟的视觉效果。
浅色模式是个反直觉的难题
麻烦出在浅色模式。在白色背景上叠加明亮的光效，视觉上自相矛盾。纯靠着色器解决不了，他换了一套合成策略：先用 AI 生成概念艺术当设计目标，再把场景逆向工程成可渲染的图层——预烘焙的阴影纹理、一次性计算的法线贴图、合成光照。这样绕开了昂贵的逐帧噪声和阴影计算。
最后一步是适配异构设备。他搭了一个三信号自适应系统：GPU 等级（移动端和低端 GPU 默认走低质量）、电池电量（低于 30% 且未充电时触发低质量）、实时帧率（帧率不稳定时降级）。高性能设备渲染完整效果，其他设备保证流畅运行。
感知性能工程，不是物理模拟
这位工程师把这次实践定义为"感知性能工程"——目标不是完美模拟现实，而是让效果看起来令人信服且运行流畅。他在记录里写得很直白："构建这样的英雄效果全靠障眼法。关键在于平衡性能与感知。"
从逐像素光线追踪到参数化网格，从纯着色器到 AI 辅助合成，再到三信号自适应降级——这套组合拳的核心逻辑其实很朴素：在视觉保真度和运行时成本之间，找到那个用户感知不到的平衡点。对做 Web 端创意编程的人来说，这个案例的价值不在于棱镜本身，而在于它展示了一条可复用的路径：当物理模拟太贵时，怎么用几何构造和合成策略"骗"过用户的眼睛。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
