Ivress

【项目概览】

客户：株式会社イヴレス（Ivress）— 日本网络安全企业

制作：Utsubo

网站：brand.ivress.co.jp

技术：Three.js · WebGPU · 自定义 GLSL Shader · 空间音效

【项目背景】

Ivress 是一家专注于网络安全领域的日本企业。品牌重塑之际，他们希望打破行业惯有的冷峻与技术感，转而以一种诗意的方式向世界诉说自己的价值观——逆境是进化的养料，每一次挑战都是成长的契机。

Utsubo 受邀为其打造品牌官方网站，核心命题只有一个：让用户沉浸在一段真正触动人心的故事之中，而不仅仅是阅读文字。

【叙事结构：SPIN A TALE ー 紡ぐ物語 ー】

整个网站是一部完整的 3D 叙事旅程，由 7 个连续场景构成，用户通过滚动与互动推动故事向前发展。每个场景都是独立的视觉诗篇，共同编织出一个关于成长、勇气与感恩的寓言。

01 · Prologue（序章）—「ここは、光を拒む世界」光所拒绝的世界，故事从黑暗中开始。

02 · Encounter（相遇）— 旅人在世界的角落遇见了无名者，背后的阴影轻轻摇曳。

03 · Power（力量）— 旅人释放光芒，驱散黑暗，赐予守护神与勇气。

04 · Oath（誓约）— 无名者心中萌生渴望：「我也想成为某人。」

05 · Bond（羁绊）— 前方浮现化の城，他们终于迈出了步伐。

06 · Trial（试炼）— 越靠近城堡，阴影愈发壮大——但因为不再孤单，脚步从未停歇。

07 · Expansion（展开）— 抵达之处并非终点，无名者们开始思索，答案是「感恩」。

08 · Spiral（螺旋）— 曾经的无名者，终将成为引路的旅人，故事永恒流转。

【技术实现】

本项目基于 Three.js + WebGPU 构建，是目前极少数将 WebGPU 渲染管线应用于正式商业项目的案例之一。WebGPU 带来了更低的 GPU 调用开销与更强的并行计算能力，为复杂粒子系统和实时着色提供了坚实基础。

着色器（Shader）是本项目视觉表现的核心。团队为每个场景单独编写了定制化的 GLSL/WGSL 着色器，涵盖体积光散射、粒子流动、大气雾气、光晕与阴影过渡等多种效果，使每一帧都具有电影级的质感。

音效设计同样倾注了大量心血。场景音乐与音效随用户的交互行为动态响应——滚动速度、悬停位置都会影响音景的变化，实现了视听的深度同步，进一步强化了沉浸感。

【设计理念】

整体视觉以深邃的暗色调为基底，以粒子光点和体积光为主要表现语言，营造出介于梦境与现实之间的独特氛围。色彩从序章的冷蓝与深黑，随着故事推进逐渐暖化，最终在 Spiral 场景中迸发出宏大的光与能量，象征着从阴暗走向光明的精神蜕变。

网站并非线性的信息展示，而是一个需要用户主动参与的体验装置。每一次滚动都是叙事的推进，每一次停留都是与故事的共鸣。Utsubo 团队将「品牌传播」与「情感体验」合二为一，让这个企业网站同时成为一件互动艺术作品。

「逆境を進化の糧としろ — 以逆境为进化的养料」

这是 Ivress 的品牌宣言，也是这个网站真正想传递的声音。