Igloo Inc

Igloo Inc 是 Pudgy Penguins 和 OverpassIP 的母公司，abeto 在 Awwwards 上的制作说明里写到，这个站要展示公司投资的几个项目，导航要能滚动、好用，并且符合品牌规范，最大的难题是让访客在一路滚动的过程中始终有东西可玩。公司官网通常是几屏文字加一排品牌标志，这个站要讲的内容其实很少，只有一段宣言、两家投资的公司和三个社交账号，于是团队把每一样内容都做成了一个可以看、可以碰的物件。

整个网站分成三段，首页上没有菜单，所有内容都在一条往下潜的镜头路线上。第一段是雪山上的冰屋，左上角写着公司名，右上角是一段 Manifesto 宣言。第二段在冰里，两块冰各冻着一家投资的公司，标签分别写着 PORTFOLIO_CO_01 和 PUDGY PENGUINS、PORTFOLIO_CO_02 和 OVERPASS。第三段是一个发光的圆环和一座圆台，台上的粒子会变成社交平台的样子。访客滚过结尾之后，镜头又回到第一段的冰屋，整条路线可以一直循环下去。

两块冰都可以点开，访客点一下冰块，页面就换成这家公司的介绍页，网址也跟着变成 /portfolio/pudgy-penguins 或 /portfolio/overpass，所以介绍页可以单独分享，别人打开链接就直接看到这一页。介绍页里有一段公司简介、这家公司的社交账号和官网链接，右上角的 Close 把访客送回冰块前面。在结尾的圆台上，粒子依次聚成 LinkedIn 对应的企鹅、X 的标志和 Medium 的字母，访客选中哪一个，下方的方框就框住哪个平台的名字。

Igloo Inc 首页右上角的宣言在获奖之后改过。现在的宣言说公司要在社区、人工智能和加密的交汇处打造下一代消费品牌，版权年份是 2026 年，但三段场景和两块冰仍然是获奖时的样子。

Igloo Inc 的画面几乎只有一种颜色，从蓝灰到雪白的冷色。加载时的底色是一种带蓝的灰（#A0A5B1），雪山、冰屋和冰雾都在这个色域里，介绍页则换成一种很深的蓝黑。整个站里最显眼的彩色是过渡时冰雾边缘闪过的一道彩虹色，以及冰块折射出来的一点色散，所以访客每次看到彩色，都知道画面正在变化。团队在制作说明里写到，色差效果特别适合这种冷色的美术方向，所以团队把它用在了几处元素和材质上。

三维画面一半写实，一半是数据感，开场的雪山、冰屋和地面有细致的写实质感，雪地上的每一道起伏都看得清。冰块是另一种质感，团队在制作说明里写到，最初的打算是让几个项目共用一块冰，做出来发现几块冰太像，于是给每块冰单独设计，并写了一个程序化的算法，在一个立方体或圆柱的轮廓里模拟冰晶生长，长出冰块内部的纹理。结尾的企鹅完全由颗粒组成，看起来像一座用雪堆起来的雕像。

Igloo Inc 界面上的文字全部是白色的等宽小字，用的是 IBM Plex Mono 的常规和中等两种字重，看起来像实验室仪器上的读数。每一件冻住的东西旁边都拉出几条细线，线的一端是一个小标签，写着编号、温度和日期。背景里还飘着几行半透明的大字，像屏幕上残留的数据。左上角的 IGLOO 标志是一款圆润的粗体字，比界面上的其他文字醒目得多。

这个站的界面部件都用方括号和细线组成，和等宽字的读数感一致。结尾的平台选择器用一个四角带括号的方框框住当前的平台，左右两边是暗下去的相邻平台和两支细线箭头。介绍页右上角的 Close 也套在同样的四角括号里，介绍页里的社交链接写成 [X]、[IG] 这样的方括号加一个小箭头。介绍页的各段标题用斜杠开头，Summary 前面是六道斜杠，下面的 Discover 和 Visit 前面是三道。

到了手机上，三段场景照样保留，只是镜头按竖屏重新取景，冰屋、冰块和圆环都放在竖长的画面中间。界面的位置几乎不变，标志和宣言仍在顶部，声音开关仍在左下角，标签换成更小的字号贴在冰块旁边。

Igloo Inc 的开场是一段实时生成的动画，不是一段影片。加载画面是一片蓝灰，中间先出现一个很小的进度提示。一组细线接着在空中连成网格，勾出冰屋的轮廓，一个发着白光的穹顶在中间亮起来，雪一样的颗粒再把冰屋的形状填满，最后贴上写实的质感，雪山同时铺开。大约 6.5 秒后，标志、宣言和左下角的提示依次出现，整片雪山完整亮起。团队在制作说明里写到，开场是在引擎里用代码和着色器做的动画，所以文件小，风格和后面的场景一致，改起来也不用重新渲染。

冰屋在开场之后会回应光标，光标靠近哪一侧，那一侧的冰块就一块块浮起、散开、发出白光，冰块上冒出小小的编号，几条细线把编号连起来，光标移开后，冰块又落回原位。访客开始滚动时，冰屋的接缝先透出一道道光，像是里面有什么东西要醒过来。

访客滚动的是镜头在整条路线上的位置，这条路线的手感很柔。网站把滚轮的每一下先变成一点速度，速度每一帧衰减一点，镜头再柔和地追上这个位置，所以停手之后镜头还会滑一小段。访客如果停在两段场景交接的中间，网站会自动用约 2 秒、先慢后快再慢地把镜头推到最近的一段，访客不会停在过渡的半中间。

两段场景之间的过渡是全站最有辨识度的动作。一道斜切线从屏幕下方往上扫，切线的边缘是像冰裂开一样的锯齿形。切线经过的地方，像素被错开、分出红黄蓝的彩虹边，旧场景往上滑出画面，新场景从下面滑进来，所以画面像是被一块冰从下往上替换掉。界面上的小字也在这时被撕开、错位，再恢复原样。团队在制作说明里写到，过渡混合了色差、科技感的位移和一层霜冻效果。

冰块那一段的动作都围着物件转，两块冰在冰雾里慢慢转动，标签出现时先是一串乱码，再一个字一个字地变成能读的词。访客点一下冰块，网站先用最多 1.5 秒把镜头对准这块冰，然后画面在约 1.25 秒里沉进深蓝黑的介绍页，介绍文字同样从乱码变成正文。访客在介绍页里滚动，文字就往上走，点 Close，画面再退回冰块前面。

结尾的粒子企鹅是全站唯一真正可以玩的东西。镜头先看着弧形的冰块拼成一个圆环，再穿过圆环发光的中心，落到圆台前。访客点画面右半边、按右方向键或者在手机上横着快速一划，粒子就切换到下一个平台。粒子先被一阵扰动打散，扰动在 0.5 秒里平息，粒子再收拢成新的形状，脚下的圆台也跟着动起来，在 3 秒里先快后慢地停下，一声音效同时响起。聚好之后，粒子会一直绕着竖轴慢慢转。光标划过粒子时会把它们搅开，跑得快的粒子会发出白光，光标停下后，粒子再慢慢聚回原来的形状。

声音和这些动作配在一起，但默认是关着的。左下角一开始写着 Sound: Off，访客第一次点击、触碰或者按键之后，背景音乐、风声和室内的回响就响起来，开关变成 Sound: On。网站给点开冰块、进入和离开介绍页、切换平台和界面里的小提示各配了一段音效，粒子发出的声音也跟着光标搅动的速度变大变小。

Igloo Inc 要同时画冰屋、冰雾和十几万颗粒子，从冰屋到粒子企鹅，画面在滚动和停住时却都保持在每秒 60 帧。网站不读取系统里减少动态效果的设置，打开之后，过渡、粒子和冰屋的动画全部照常播放。

Igloo Inc 用 Svelte 搭外壳，three.js r165 画三维，GSAP 做动画，开场和各处动作用到了团队自己定义的几条缓动曲线。整个画布被放在一个 closed 模式的 shadow root 里，页面的 DOM 里没有一个文字节点。标志、宣言、标签和介绍页的文字都是用 MSDF 字形在 WebGL 里画出来的，字体是 IBM Plex Mono。团队在制作说明里写到，把界面放进 WebGL 是为了两种文字效果。故障效果用一个简单的着色器就能做，不用在 HTML 里叠遮罩和裁切。乱码换字只需要改动字形在 SDF 贴图上的偏移，浏览器也不用重新计算样式。

三段场景各自画进一张离屏贴图，再由一个全屏的过渡着色器把两张贴图合成到屏幕上。着色器按滚动进度推一条斜切线，切线的边缘用一张冰裂纹的数据贴图决定形状。切线附近，着色器做 5 次取样的色差，再用一张蓝噪声贴图把取样打散，色差的边缘就不会出现一圈圈的接缝。数据贴图的另一个通道把像素按块错开，这就是科技感的位移，旧场景和新场景同时按进度上下错开，带出视差。整个过渡只是一道后期处理，所以三段场景可以完全独立地搭建和优化。过渡之外，画面还要过 SMAA 抗锯齿和景深这几道后期处理，每一帧一共约 40 到 64 次普通绘制，另外还有冰屋的一次多重绘制。

开场的冰屋是一个 three.js 的合批网格 BatchedMesh，每一块冰是网格里的一份几何体，顶点事先挪到以这块冰的中心为原点，WebGL2 下整座冰屋用 WEBGL_multi_draw 一次画完。每一帧，脚本给每块冰算一个位移量，取两个值里大的那个，一个是空闲时按时间和冰块的横向位置起伏的波浪，另一个来自光标。脚本先把光标投到镜头前方一个平面上，再让一个跟随点平滑地跟过去，离这个点 1 到 3 个单位以内的冰块推得最多。冰屋上只有上半部的冰块会动，位移经过两级平滑追赶，冰块沿着从冰屋中心指向自己的方向浮出去，同时带一点摇晃的旋转。访客往下滚动的前 40% 里，上半部的冰块还会按各自的随机量向外散开。位移量每帧写进一张数据贴图，着色器按它让浮起的冰块发出蓝光，开场时也是这个着色器按高度把冰屋从下往上一层层显出来。

冰块的三维素材用 Houdini 和 Blender 制作，团队写了一个程序化的冰晶生长算法，先选一个立方体或圆柱作为容器，再在容器里长出细致的冰晶结构。团队在制作说明里写到，选择程序化的做法，也是考虑到以后还会加新的项目。到了浏览器里，冰块用 three.js 物理材质的透射来折射后面的画面，并打开了色散，红、绿、蓝三个颜色各按略有不同的折射率取一次样，所以冰的边缘会分出一点彩色。冰块的法线和粗糙度贴图每张约 1 MB，环境光来自一张 EXR 格式的环境贴图。

结尾的企鹅由 15 万个粒子组成，全部在显卡上模拟。粒子的位置和速度存在两组浮点贴图里，每一帧轮流读写。粒子要聚成的形状来自体积数据，团队在制作说明里写到，团队写了一个导出工具，把 VDB 格式的体积数据转换成浏览器能用的格式，再压缩，最后的文件比一张普通的网页图片还小。网站上企鹅的体积数据约 818 KB，X 的约 312 KB，Medium 的分辨率只有一半。切换平台时，网站换一张体积贴图，再加 0.5 秒的扰动。光标驱动着一个 128×128 的二维流体模拟，流体的速度推着粒子走，粒子的颜色也按速度变亮。

网站用自己的程序计算滚动，没有交给浏览器。程序先把滚轮的位移乘上一个很小的系数，变成镜头的速度，速度再按和帧率无关的摩擦系数衰减，所以快慢不同的电脑上手感一样。三段场景首尾相接，进度走到头又回到开头，这就是路线能循环的原因。停在两段场景交界处时，网站算出离得最近的那一侧，用约 2 秒的缓动把进度推过去。两个项目的介绍页有自己的路由 /portfolio/:project，点开冰块和直接打开链接走的是同一套过场，只是直接打开时开场被跳过。

为了让首屏快一点出现，网站把加载拆进了几个后台线程。网站开了四个 Web Worker，分别解码位图、EXR 环境贴图、MSDF 字形和音频，主线程只负责搭场景。团队在制作说明里写到，团队写了自己的几何体导出器来缩短首次加载，贴图的加载和着色器的编译也有一部分放到后台进行。模型用 Draco 压缩，合起来只有约 0.55 MB，贴图全部是 KTX2 格式，由 Basis 转码器转成显卡能直接用的格式。

网站按设备给渲染分辨率设了上限，还会按帧率自动调整。像素比不超过 2 的屏幕最多按 1.15 倍渲染，像素比为 3 的手机最多按 1.5 倍，也就是只画屏幕一半宽、一半高的像素。打开 2 秒后，网站开始每 4 秒统计一次平均帧率，低于每秒 30 帧就把分辨率降一成，最低降到六成，回到 60 帧以上再升回一成。升降方向反复 4 次之后，网站就停止调整，以免画面在清晰和模糊之间来回跳。团队在制作说明里写到，团队在整个开发过程中都在测性能，好让低端设备上也能顺畅地浏览。

所有设备下载的都是同一套资源，一共约 15 MB。最大的单个文件是约 1.5 MB 的背景音乐，其次是约 1.26 MB 的过渡数据贴图和两张约 1 MB 的冰块法线贴图，贴图合计约 10.8 MB，声音约 2.9 MB。服务器在 0.04 到 0.14 秒内开始返回页面，加载画面在 0.17 到 0.22 秒出现，冰屋约 6.5 秒完整出现。加载期间页面最长卡住约 0.23 秒，画面不跳动。

Igloo Inc 的内容全部画在画布里，读屏软件的用户几乎用不了它。页面上没有一个能聚焦的元素，Tab 键一直停在页面本身，读屏软件只读得到网页标题。键盘的方向键倒是能用，上下键推动镜头，在介绍页里滚动文字，左右键在结尾切换平台，但 Page Down 和空格键没有反应。

Igloo Inc 同时是 Awwwards 2024 年的年度最佳和年度开发奖。它在 FWA 拿到的是当日最佳和 7 月的月度最佳，FWA 给它打了 86 分，归入动画、商业与企业和实验三个类别。

这个站的创意 Creativity 拿到 8.31 分，是 Awwwards 四项里最高的，冻在冰里的品牌和会散开重组的粒子企鹅很可能是这一项高的原因。可用性 Usability 最低，为 7.50 分，网站没有菜单，内容只能一路滚动着看，读屏软件又完全读不到内容，这些都可能拉低了这一项。开发奖的五位评委给出 7.66 分，动画 Animations 最高，为 9.60 分，标记 Markup 最低，为 6.40 分，和工程章里 DOM 里没有任何文字正好对应。

abeto 在制作说明里说自己是一支很小的团队，成员都是技术美术，既写代码又做三维，团队直接在浏览器里一边写代码一边调美术，用自己做的工具实时更新着色器、贴在模型表面的图片和模型本身。Bureaux 提供了情绪板、一部分渲染图和三维素材、内容大纲，以及音乐和音效。abeto 的战绩算到写报告时为止，它在 Awwwards 上只有三件作品，三件都拿过当日最佳，两件拿过年度奖，Bureaux 在 FWA 上的两个奖则都来自这个站。