Pioneer - Corn Revolutionized

这个网站要向种植户说明，Pioneer 的一粒新种子在上市之前要经过多少轮筛选。Resn 在 Awwwards 的月度最佳文章里写到，Resn 要把 Pioneer 培育、测试和推出新玉米品种的过程讲得简单又有吸引力，于是把故事竖着排成一段连续的体验，带访客走过种子研发的每一步。网站把这个过程分成三章，第一章是科学，第二章是田间试验，第三章是结果，每一步只有一句标题和一小段文字。

故事的每一步都对应一个画面上的变化，所以访客读一句话，就看到这一步发生了什么。第一章从 First, a solid foundation 开始，讲 Pioneer 拥有最全的玉米种质库，画面是一根发光的基因链。下一步的标题是 Computers cut down the contenders，计算机用模拟筛掉大批候选，基因链散成一张青绿色的光点网络。这一章最后一步的标题是 Our breeders dial it in further，育种专家把剩下的品系再筛一遍，几粒种子从光点里落进一个剖开的花盆，长出幼苗和根。第二章先把幼苗带到田里，标题是 We take it to the field，再升到高空看 Testing, testing and more testing 的试验田。第三章只有一句话，最后能进 Pioneer 种子袋的种子不到万分之一，画面里只剩一粒放大的玉米粒。

故事的结尾回到了开头，三章讲完之后是一页菜单，访客再往下滚动，镜头就回到第一幕那株玉米。团队在文章里写到，这个无限循环代表自然的循环，从种子到收获，再回到种子。种子研发本来就是年复一年重复的过程，所以这个循环是故事内容的一部分，而不只是一个技术上的小把戏。

每一章里还藏着一层要点开才看得到的内容，入口是一个写着字的圆形按钮。第一章的 Explore the library 打开种质库，一粒种子停在中间，四周几圈轨道上排着基因链的小图标，访客每滚动一下，轨道就转一格。第二章的 Experience the tests 打开 YOUR REGION. YOUR CONDITIONS. 一页，列出风、干旱、病害、土壤和种植密度五种测试，访客点哪一种，画面里那株玉米就换上对应的环境，旁边的文字说明 Pioneer 是怎么测的、测出了什么数字。第三章的 See the new class 介绍 2020 年的新品种，访客拖动一粒放大的玉米粒，就翻到产量、稳定性和 Qrome 系列产品三页说明。主线只给结论，想看数据的访客自己点开，故事因此可以一直保持短句。

Corn Revolutionized 的菜单从左上角打开，左边把三章列成目录，右边是订阅资讯、联系当地销售经理、法律信息和品牌播客四个入口，这几个入口也出现在故事结尾的那一页。

Corn Revolutionized 的画面像一部光线很暗的产品广告片。大多数画面的背景都压得很暗，光只照亮屏幕中的那唯一的主角，开场是一株玉米，第一章是一根基因链，第二章是一株幼苗，第三章是一粒玉米粒。各章的主色跟着内容换，开场是深绿，讲种质库时是带一点棕的暗金，计算机那一步换成青绿色的光点（#12F9B4、#55FFC2），田间是叶子的绿，结果那一章的天边是一片橙粉色的晚霞。第一章的基因链则是一束橙色的细线（#ED863B），在暗背景上和后面的青绿色光点正好互补。团队在文章里写到，团队追求照片般的写实，要有可信的景深、动态的光和成千上万个动起来的粒子，这些后来都用工程章里的几种取巧办法做到了。

这个站的文字只用两款无衬线字体，也就是笔画末端不带小装饰的字。标题用一款很宽、很粗的大写字体 Manifold 的特粗体，排在画面左侧，两三行就占去小半个屏幕。正文、章节名和按钮用一款几何感的字体 Gilroy，章节名用最细的一档，正文用常规粗细，按钮上的小字用粗体，全部是白色。两款字的分工很清楚，粗宽的大字负责一句结论，细的小字负责补充，所以每一屏读起来只有一个重点。

每一屏几乎都是同一个版式，左边是标题和一小段文字，右边是三维画面，主角放在画面中间偏右。右侧边缘竖着一个小圆圈和当前章节的名字，比如 SCIENCE、REAL WORLD TESTING 和 RESULT，告诉访客现在在哪一章。网站上可以点开的入口一律是一个双圈的圆形按钮，内圈是实线，外圈是一段细弧线，按钮中间写着两行粗体小字。打开隐藏内容之后，右上角出现一个圆形的关闭按钮。

测试那一层把同一株玉米放进五种不同的环境，用环境来讲每一种测试。风的测试画面整体变暗，干旱的测试画面里，叶子仍然是绿的，背后的田地变成枯黄的颜色，左上角有一片刺眼的阳光。在病害的测试里，背后的叶子发黄枯萎。在土壤的测试里，茎和叶子上冒出一串发光的小点，像贴在植株上的测量仪器。五种测试的图标排成一排圆圈，选中的那个变成实心的圈，下面标出它的名字。

到了手机上，网站要求访客竖着拿手机，横过来时整个画面只显示一个手机图标和一句请把设备竖过来的提示。竖屏的版面把标题挪到画面的中下部，正文排在标题下面，三维的主角放大并占据上半屏，左下角多了一个向下的箭头按钮，旁边仍然写着 SCROLL TO DISCOVER。

Corn Revolutionized 最主要的动作，是镜头沿着一条路线不停地往前走，画面在两句标题之间连续变形，中间没有一次切换。开场的玉米转成一根由许多条橙色细线缠成的基因链，基因链散开，变成满屏连线的青绿色光点。光点里落下几粒种子，种子掉进一个花盆，花盆里长出幼苗和根，幼苗长成一株玉米，镜头再升到高空看整片试验田。访客往回滚动，这段变形就倒着播一遍。走到结尾的菜单页之后，再滚动一下，镜头就回到开场的那株玉米。

镜头的推进有停点，每一句标题就是一个停点。访客滚动一下，镜头先获得一点速度，再被吸到下一个停点停住，所以不管滚得快慢，镜头总是停在一句完整的标题前面。两个停点之间的路程越长，同样一下滚动推得越远，屏幕越高也推得越远，访客滚一下就能到下一站，不用在长路段上连续滚很多下。手机上，手指拖动时画面直接跟着手指走，松手时网站按手指的速度预判落点，再像弹簧一样把画面拉到下一个停点，一次最多跨过一个停点。

Corn Revolutionized 的标题出现得也很特别，每一句都先画出白色的字形轮廓，然后才从里面填满。开场和种质库的标题里各有一个词不停地闪烁，字母一会儿碎成光点，一会儿只剩轮廓，比如开场的 REVOLUTIONIZED 和种质库里的 THE。开场的那株玉米还会一直慢慢摇摆，左右转动几度，光也跟着从不同的角度打在玉米上。

三层隐藏内容各有自己的动作，在种质库里，访客每滚动一下，几圈轨道就转一格，中间换上另一粒种子。测试那一层里，访客换一种测试，那株玉米周围的光线和背景就跟着换。新品种那一层里，访客按住那粒玉米粒拖动，它会在三维空间里翻转，松手后翻到下一页说明，下方的 1、2、3 页码同时切换。团队在文章里还写到，花盆里那株幼苗的顶叶会回应光标，光标碰到它时，叶子会被拨得转动起来。

Corn Revolutionized 的画面在从玉米到试验田的整段变形里，无论连续推进故事还是静止不动，都稳定在每秒 60 帧。打开系统里减少动态效果的设置后，网站不读取这个设置，画面的变形和标题的闪烁都照常播放。

Corn Revolutionized 的整个故事画在一块铺满屏幕的 WebGL 画布上，用的是 three.js r102，文档本身不滚动。Resn 在文章里写到，这个站建立在 Resn 自己的 Web3D 制作流程 Jelly 上，这是一套把三维素材、动画和交互拼在一起的工具、模板和流程，前端是一个以 three.js 和 GSAP 为基础的轻量框架。三维素材用 Blender 和 Octane 渲染器制作，服务器端用 GraphicsMagick 和 ImageMagick 处理图片。

这个站画面上的光影是提前烘焙好的，却看起来会随着角度变化。团队在文章里写到，团队在三维软件里把光照和模糊烘焙进贴图，并且从四个不同的光照角度各烘焙一张。开场那株玉米就是这样做的，网站下载左上、右上、左下、右下四张烘焙图，着色器按玉米当前的转角，在四张图之间做双线性混合。玉米最多只左右转十几度，所以四张图就足够覆盖它所有的样子，网站不需要实时打光，也不需要实时计算景深。团队写到，正是因为转动的角度有限，这个办法才行得通。

基因链和光点网络里的几千个粒子，也用一个取巧的办法做出景深。每个粒子是一个点，着色器按它离焦点的距离决定它画多大，离焦点越远画得越大，看起来就像镜头没对准它而散开了，不需要额外的模糊处理。团队在文章里写到，距离同时决定粒子的淡出和模糊程度，这部分用有符号距离场来算，最后再过一道加泛光和噪点的后期处理。

基因链本身是程序生成的，网站按双螺旋的公式算出 13 个点，用转动的半径、频率和相位决定每一个点的位置，在约定的位置让两股线交叉，再用一条样条曲线把这些点串成光滑的曲线，细线和粒子都沿着这条曲线分布。基因链在画面上长出来和散开，靠的是只画曲线上的一段进度区间，区间的起点和终点一推，基因链看上去就像一笔一笔画出来，或者一点一点擦掉。基因链、光点、粒子流这些物件的位置、角度、颜色、粒子大小和出场的进度区间都写在一张配置表里，所以调整一个镜头只需要改表里的数。

花盆里的幼苗是一个几乎扁平的模型，由贴着植物贴图的平面拼成，再绑上骨骼。团队在文章里写到，茎和根的生长是靠放大骨骼做出来的，顶叶的互动则靠一个看不见的碰撞盒，光标碰到它时，网站给骨骼加一个转动速度。这种平面贴图加骨骼的做法比真正的植物模型轻得多，又能做出生长和摆动。

网站的界面和文字大多也画在 WebGL 里，团队在文章里写到，团队以前在 WebGL 画面上叠 DOM 动画时遇到过性能问题，所以这次把大部分界面和文字都放进 WebGL，点击和悬停的判断也是自己用包围盒和碰撞检测写的。标题用的是 MSDF 字形，任何字号下都很锐利，着色器用屏幕空间的导数让笔画粗细和边缘的抗锯齿在任何屏幕上都一致。标题先画轮廓再填满的效果只用 3 次绘制，用实例化的平面加片元着色器里的遮罩完成。网站还把文字层画进一组固定按 2 倍像素比的离屏贴图，所以在像素比为 1 的桌面上，文字层的贴图也有 3840×1890，文字的边缘因此格外清楚。

网站用自己的程序控制滚动，在桌面上，滚轮的量先换算成速度，速度推动一个位置值，再吸附到最近的停点。每一下滚轮的推力，会按到下一个停点的距离放大 1 到 1.6 倍，按屏幕高度放大 0.9 到 1.3 倍，在 Windows 上滚轮的量还会再放大一些。键盘的上下方向键同样给这个位置值加速度，所以键盘也能推动故事。位置值走到页尾时会减去整页的长度，回到开头，这就是故事能无限循环的原因。

三维场景的清晰度按显卡来定，网站用 detect-gpu 判断显卡的档次，档次够高的显卡按设备像素比最多 2 倍绘制场景，档次低的只按 1 倍。手机另有一套低画质的设置，试验田里的玉米株数从 7 乘 9 减到 5 乘 5，背景里的植物也少一些，模糊处理只做四成。所有的三维素材在开场之前一次下载完，站点自己的文件约 14.4 MB，其中 38 张 KTX 压缩贴图约 10.5 MB，模型是 glTF 加二进制数据，合起来约 1 MB。代码会先看显卡支持 ASTC、S3TC 还是 PVRTC，再下载对应格式的那一套贴图。

加载画面把这 14 MB 的等待做成了品牌的一部分。页面一打开，屏幕上就出现 Pioneer 的标志，标志随着百分比一点点填满，首次出现内容在 0.4 到 0.6 秒之间。开场的玉米约 3.5 秒浮现，标题先画出轮廓，4.5 到 6 秒之间才填满。加载期间页面最长卡住约 0.3 秒，画面几乎不跳动。除了站点自己的文件，页面还加载了约 0.8 MB 的同意框、追踪和统计脚本，Facebook、Snapchat、Google Analytics 和 Eloqua 的脚本在访客做出选择之前就已经下载了。

Corn Revolutionized 只照顾到了用鼠标和触屏的访客，读屏软件几乎读不到故事。故事的文字只画在画布上，读屏软件除了菜单和 cookie 按钮之外读不到任何内容。Tab 键打不开菜单，菜单要先用鼠标打开，键盘才能在里面的按钮之间移动。键盘的上下方向键倒是能推动整个故事，Esc 也能关掉种质库那一层。

Corn Revolutionized 是 Awwwards 2020 年的年度最佳，评委从这一年的十二个月度最佳和团队另选的几个当日最佳里选出了它。它在 FWA 拿到的是当日最佳和 6 月的月度最佳，FWA 给它打了 88 分，归入商业与企业、推广和其他三个类别。

创意 Creativity 是 Corn Revolutionized 在 Awwwards 得分最高的一项，为 8.68 分，一段不停变形的镜头把种子的整个研发过程连成了一个故事，这一点很可能是创意分高的原因。可用性 Usability 最低，为 7.75 分，访客要一下一下地滚动才能往前走，三层隐藏内容又都藏在圆形按钮后面，读屏软件也读不到故事，这些都可能拉低了这一项。开发奖的三位评委给出 8.15 分，动画 Animations 拿到了满分 10 分，无障碍 Accessibility 最低，为 6.67 分，和工程章里读屏软件读不到内容正好对应。

这个站由两家代理商分工完成，Bader Rutter 是专做农业领域的广告代理商，Resn 负责创意、三维和开发，团队在文章里说自己已经做了 15 年互动开发和设计。算到写报告时为止，Resn 在 Awwwards 上拿过 62 次当日最佳和 2 次年度最佳，在 FWA 上获奖 146 次。Bader Rutter 在两个平台上都只有这一件作品，它在 Awwwards 和 FWA 拿到的奖全部来自 Corn Revolutionized。