Arthur Engel Portfolio

Arthur Engel 专做 WebGL 和 WebGPU 的互动体验，他以自由职业的高级创意开发者身份，和代理商、品牌合作。他的作品集要向这些客户证明，他能把一段完整的三维叙事做出来。所以他没有做一页项目列表，而是写了一个四幕的故事，丛林与传送门、项目、关于、联系，全部由滚动推进。他在 FWA 上的说明写的是一个完全沉浸的 WebGPU 体验，以滚动来导航，另外为手机准备了一个轻量版。

访客进门之前，要先在一道加载门前等一会儿。加载门是深灰色的网格背景，左上角是巨大的 AENGEL 和 CREATIVE DEVELOPER，右下角是一张像产品包装的规格卡，上面有一片黑白的叶子、VARIANT 01、ARCH //、PORTFOLIO、MADE IN EARTH 和一条条形码，旁边一个计数器从 0 走到 100。计数器走满大约要 10 秒，之后访客按 ENTER IN THE EXPERIENCE 进门，左下角另有一个 LITE VERSION 开关，打开后进的是轻量版。

访客进门后，丛林这一幕只占一屏的滚动距离。访客往下滚，拱门的石块炸开、在空中散成一片，再重新聚成一个环，每一块石头上都亮起蓝色的符文纹路。环中间旋出漩涡，漩涡越来越大，最后铺满整个屏幕，变成一片白光，这一段里连页面顶部的导航都会隐藏起来。

镜头穿过白光之后，访客就到了项目这一幕。一块深色的多面晶体立在一片由光点组成的山脉前，晶体中心发着光，下方的地面映出倒影。左下角写着项目名和 DISCOVER PROJECT，右下角是 01 / 06 和 NEXT PROJECT，画面中央一行小字提示 Drag to switch project。六个项目依次是 CGTrader、W3R.ONE、PRESTI.AI、Grandir、Reaali 和 Stream of value，访客拖动或点 NEXT PROJECT 切换，晶体的颜色也跟着换，CGTrader 是蓝色，W3R.ONE 是紫色。访客点 DISCOVER PROJECT，会打开一篇完整的案例。案例里有一句话的定位、年份、项目介绍、上线链接、演示影片、他在项目里的角色和用到的技术，最后是一段他自己写的 TECHNICAL CONSTRAINTS，讲这个项目最难的地方在哪。

关于这一幕从黑暗里的几束蓝色光线开始。光线来回交织，下方一行小字逐句出现，大意是他写的代码在讲故事，美来自简单的规则，而他做的每一个体验都开始于一件他注意到的真实的事。光线最后收拢成一根发光的茎，茎的顶端开出一朵百合，旁边打出大字 I RENDER THE UNSEEN 和他的简介。花的四周拉出一圈细线标注，写着 FREELANCER、flower.glb、computed stem、from france、based in thailand，以及一组经纬度和一个时钟。继续往下滚，标题换成 I RENDER THE NOISE，整朵花变成蓝色。

旅程的最后一幕是联系，一只手从左下角伸进一道从右上方照进来的暖光，右下角写着 REACH OUT 和他的邮箱，下面是 GitHub、X、LinkedIn 三个图标。整段旅程约 32 屏，页面顶部一直留着几个入口，左上角是标志，右上角依次是声音开关、一个红点加 UNAVAILABLE until Oct 的接单状态、复制邮箱，以及一个展开菜单的三点按钮。

这个站的规矩是整片黑暗里只留一个光源。丛林一幕只有从右上方斜射下来的一束昏黄的光，传送门一幕的光来自符文和漩涡本身的蓝光，项目一幕只有晶体中心在发光，关于一幕是花和茎的冷白色，联系一幕是一道暖黄色的光。每一幕基本只有一种光色，画面因此一直很暗、很干净，访客的视线总落在亮着的那个东西上。

这几幕之间，画面的写实程度差得很远。开头的丛林最写实，拱门的石块、藤蔓、蕨类和光束都有质感和阴影。越往后越抽象，项目一幕的山是由光点组成的，关于一幕只剩光线和一朵半透明的花，到了联系一幕，又回到一只有皮肤质感的手。这个起伏和旅程本身对得上，从一个现实的地方出发，穿过传送门进入他的作品，最后伸手回到现实里来找他。

这个站只用两款字，标题用一款粗壮的几何无衬线字 League Spartan，全部大写，AENGEL、CGTRADER、I RENDER THE UNSEEN、REACH OUT 都是它。界面上的小字、字幕和简介用 Manrope，字号很小。标题都压在画面的边上，左下、左中或右下，不和中央的主体抢位置。

加载门和关于一幕都用了一套像仪器界面的细节。加载门的规格卡有条形码、型号、网格和一枚小标志，像一件产品的包装盒。关于一幕的细线标注把那朵花当成一件被测量的标本，每一条线连着一个小标签，写着模型文件名、他的国籍和所在地，底部的时钟和经纬度指向泰国南部。这两处让一个奇幻的故事带上了一点工程师的冷静。

整段旅程由滚动推进，而且是一幕一幕地推进。访客滚动滚轮时，镜头顺着一段固定的路线往前走，滚过一幕的边界之后，页面会自己滑到下一幕的开头。访客用键盘时，按几下方向键、PageDown 或空格，就能从丛林走到项目这一幕的开头。平滑滚动由 Lenis 处理，从头滚到尾全程每秒 60 帧，最慢的一帧不超过 24 毫秒。

开头的变形是这个站最费工的一段。拱门的石块先向外炸开，在空中停留、转动，再朝一个圆周聚拢，拼好的那一刻每块石头亮起蓝色的纹路。漩涡从环中心转出来，先是深蓝色，越转越大、越转越白。镜头推进去，整屏被白光吞没，再从白光里淡出项目的山谷。

项目一幕里的动作，比开头的变形轻得多。访客拖动时，晶体会换一种颜色，里面映出的内容也跟着换。访客点开案例时，案例页从一片像水下往上看的烟雾光斑里浮出来。

关于一幕的光线动画，是整个站上最像手绘的一段。几束蓝色的光线在黑暗里缓慢地交织、分开，镜头慢慢往前推，字幕一句一句浮现又消失。光线最后收拢成一根茎，茎的顶端绽开成花。花开好之后，一个矩形框罩住花的一部分，框里的花瓣显出蓝色，框外仍是白色的透明体。

声音是这段旅程的另一半，访客一进门，环境音就开始播放，不同的段落配着不同的环境声，站上一共准备了二十八段音频。访客可以用右上角的声音开关随时静音。

这个站用 Next.js 和 React 搭成，三维画面由 three.js 的 WebGPU 渲染器画在一块铺满屏幕的画布上，滚动由 Lenis 接管。WebGPU 是浏览器上比 WebGL 更新的一套图形接口，能更直接地调用显卡。贴图用的是显卡可以直接读取的压缩格式 KTX2，模型是 glTF 格式，声音是体积很小的 Opus 格式。

这个站几乎把所有的下载都放在了进门之前。加载门那 10 秒里，浏览器已经下载了 31.5 MB，其中贴图占 18.1 MB，最大的是一张 7.1 MB 的环境光照贴图和一张 4.9 MB 的岩石法线贴图，法线贴图用来在平面上画出凹凸。除了贴图，进门前还下载了五段项目影片 8.5 MB、二十八段音频 2.1 MB 和十一个模型 1.6 MB。进门之后，整段旅程只再下载了约 2 MB 的图片，走完全程一共约 33.6 MB。这样安排的结果是，访客进门后几乎不再等待，但必须先在加载门前看着计数器走完。

加载门本身出来得不算快，服务器 620 毫秒才返回首字节，接近 Google 建议的 0.8 秒上限，首次内容绘制（FCP）是 0.98 秒，画出来的是 AENGEL 这几个大字。加载过程中有八个长任务，合计 1.3 秒，最长的一个 415 毫秒。从加载门到进门，页面没有发生布局位移。

轻量版是这个站上另一条单独的路。访客在加载门左下角打开 LITE VERSION 再进门，看到的是一条弯曲的胶片带，项目的截图一张张排在上面。滚动时胶片带平移，它同样画在画布上，但没有丛林、传送门和花。FWA 的说明里写明，这个轻量版是为手机准备的。

只用键盘的访客也能走完这段旅程。在加载门上按 Tab，先选中 LITE VERSION，再选中进门按钮，焦点框清晰可见，按回车就能进门。站点把进门按钮上的字拆成一个个字母做动画，但给按钮另外加上了一个完整的名字 Enter the experience，读屏软件念得出来。进门之后，Tab 依次选中首页标志、声音开关、复制邮箱、菜单、DISCOVER PROJECT 和 NEXT PROJECT，方向键和 PageDown 可以一幕一幕往前走。样式表里有 20 条针对减少动态效果的规则，管的是滚动提示、拖动提示和邮箱箭头这些界面小动画。

这个站在 FWA 上拿到 83 分，由 24 张票算出，归在动画、实验和个人作品集三类下面。团队的说明只有一句，完全沉浸的 WebGPU 体验，以滚动来导航，并为手机准备了一个轻量版。这句话里的沉浸体验、滚动导航和轻量版，站上都能找到。

这个站是 Arthur Engel 在 FWA 上拿到的第一个奖。他在 FWA 的个人页上说自己的工作是在大胆的设计和可上线的工程之间搭桥，把复杂的创意变成流畅、经过优化的成品。这个站在 FWA 上只署了他一个人的名字。