正在打开每日关注
正在打开每日关注
Blake 用 57 张 Blender 预渲染帧与 CRT 着色器，把作品集入口做成仅 11.6 KB JS、每帧 0.2ms 开销的可点击复古电脑。
Made my portfolio's front door a cozy little computer. - No realtime 3D, just 57 Blender renders - CRT shader over the live site, 11.6 KB of JS - 0.2 ms of JS time per frame Click the screen to go in. Dunno if I'll keep it as it's not very practical, but it's cute! https://t.co/ewawzF6mAl
是什么 开发者 Blake（@cyze_dev，Avatone 产品工程负责人）把个人作品集的入口页做成一台黄色复古小电脑：屏幕上有 Click 按钮，点击后 CRT 屏幕翻开、进入真实的个人站点。三张画面完整呈现了从「看到机器—光标靠近—进入站内」的体验闭环。
核心设计 技术方案非常克制：不使用实时 3D，而是预渲染 57 张 Blender 静态帧，通过帧序列切换模拟环视/推近的立体感；再用一层 CRT 着色器覆盖在实时网站之上，制造扫描线与玻璃屏的复古质感。整个效果仅 11.6 KB JS，每帧 JS 耗时 0.2ms，性能预算几乎可以忽略。这是一种「预渲染资产 + 轻量运行时」的经典组合，用资产体积换运行时算力。
关键洞察 拟真 3D 体验不一定要上 Three.js 或 WebGL 场景图；当交互自由度有限（视角固定、只有少量状态切换）时，序列帧方案在体积、兼容性与性能上都更优。同时作者坦诚「不确定会不会保留，因为不太实用」，体现了对趣味性与可用性权衡的自省。
边界与风险 此类入口牺牲了直达内容的效率，对移动端、可访问性与 SEO 也不友好，更适合作为可选彩蛋而非必经路径；预渲染帧一旦需要新视角就必须回到 Blender 重新产出，迭代成本高于实时方案。