为一家虚构的创意科技工作室打造的概念网站，整站就是一个实时 3D 场景：在四维空间中旋转的玻璃超立方体、由滚动驱动的镜头，以及八个实时着色器世界。
概述
HYPERSOLID 是一家虚构的创意科技工作室，业务涵盖沉浸式网页、实时 3D、XR 和装置。我在 2026 年 9 月 23 日至 24 日，按照沉浸式 WebGL 工作室网站的类型为它搭建了网站：整个页面就是一个实时 3D 场景，界面以文字形式叠加在场景之上。
我给自己定的任务是：让场景本身讲出工作室的主张，同时诚实地展示浏览器能做到什么。标志、世界、转场和音乐都必须专为这个网站制作，并在访客的设备上实时计算，而不是播放视频；网站在开启“减少动态效果”或没有 WebGL 时也必须可用。
8
3D 作品画廊中的实时着色器世界
来源：网站源文件，2026年9月24日
4
程序化生成的配乐曲目，没有音频文件
来源：网站源文件，2026年9月24日
60 fps
14 个状态下的帧率中位数，1600 × 1000，Retina（最低 55.7）
来源：实测，2026年9月24日，MacBook（Apple M5）
0.21 MB
gzip 后的主脚本（未压缩 0.76 MB），含 three.js
来源：实测，2026年9月24日，构建文件
思路
标志是一个超立方体，也就是四维立方体：它在四维空间中旋转，每一帧都被投影到三维。它的棱是带薄膜彩虹光泽和色散效果的玻璃管，周围环绕着 GPU 粒子和体积光。预加载界面一边统计已加载的资源，一边逐笔画出标志，然后展开进入场景。
滚动不是翻动页面，而是推动镜头穿过五个章节：工作室宣言、超立方体展开成六个能力面板、由它的棱构成的隧道、作品，以及联系邀请。作品画廊是由八个项目组成的 3D 圆环，每张卡片都不是图片，而是用光线步进实时渲染的着色器世界；着色器转场把你带进项目，项目以全屏打开，上面叠加着自己的文字。
配乐 100% 程序化生成：四首曲目由 Web Audio API 实时合成，在访客主动打开声音之前保持静音。整个网站用 three.js 构建，打包成使用相对 URL 的静态站点，因此可以在任何目录下运行——这里是 /demos/hypersolid/。开启“减少动态效果”时，镜头飞行改为淡入淡出；不支持 WebGL 的浏览器会看到内容相同的静态版本。
图集
成果
这个概念是一个单页网站，包含五个章节、一个由八个着色器世界组成的画廊、八个项目视图和四首程序化曲目。2026 年 9 月 24 日，我在搭载 Apple M5 的 MacBook 上用无界面（headless）Chrome，以 1600 × 1000、Retina 缩放，在 14 个状态（五个章节、画廊和全部八个世界）中读取了引擎自带的帧率计数（window.__HS.fps，90 帧平均值）：中位数为 60 fps，最低读数为 55.7 fps。
主脚本 dist/assets/app.js（含 three.js）大小为 0.76 MB，gzip 压缩后为 0.21 MB。包括字体和图片在内，整个构建为 1.1 MB，其中没有任何纹理、3D 模型、视频或音频文件：每个世界和每个声音都在浏览器中生成。
本案例不能证明的
HYPERSOLID 是我在 VITON13 为展示能力而做的概念，不是委托项目。工作室、它的八个项目和示例邮箱都是虚构的：网站没有客户、独立域名、用户、流量或咨询，也不声称拥有任何客户、奖项或媒体报道。
帧率只在一台机器上、用无界面 Chrome、在同一天测得。它不能说明旧笔记本或手机上的表现；帧率能够保持，部分原因是画面变慢时引擎会降低较重世界的渲染分辨率。体积和帧率对应 2026 年 9 月 24 日的构建版本；本案例没有做 Lighthouse 或 SEO 评测。
在筹划类似的项目？每条消息我都会亲自阅读。
下一个项目
品牌影片影像与动效
自有2026
全部作品 (21)