Vue Fes Japan 2025 の Web サイトを TresJS と TSL（WebGPU）で再現する
このトークでは、Vue Fes Japan 2025のウェブサイトのヒーローイメージを、VueとTresJS、そしてWebGPU上で動くThree.js Shading Language（TSL）を使って再現した過程を共有します。オリジナルのシーンは素のThree.js r178で動作しており、V字型のコーン（Vueを表現）と、日本の国旗の日の丸にインスパイアされた球体を組み合わせ、日本の伝統技法である墨流し（すみながし）を再現するカスタムシェーダーでマスクをかけています。
このセットアップをTresJSのコンポーネントを使ってVueに移植した方法、シーンを宣言的に構成した方法、そして元のGLSLシェーダーのロジックを、Vueアプリの中で自然に感じられる形でTSLへと移行した方法を解説していきます。墨流しのエフェクトが、歪んだベクトル場を流れるFBMノイズからどのように構築されているか、アニメーションが時間経過とともに複数のカラーパレットをどのように循環しているか、そして従来のWebGLパイプラインの代わりにWebGPU APIを活用することで何が変わるのかを見ていきます。
セッションの終わりまでに、参加者は既存のThree.jsのシーンをTresJSでVueに移植する際の考え方、複雑なシェーダーエフェクトをコンポーネント駆動のアーキテクチャの中で整理する方法、そしてVueを使って美しいビジュアル体験を作り出す方法を理解できるようになります。
ライブデモ：https://lab.tresjs.org/experiments/vuefes-japan-2025
TresJS：https://tresjs.org/
Alvarosabu
Vue Fes Japan 2025 の Web サイトを TresJS と TSL（WebGPU）で再現する
このトークでは、Vue Fes Japan 2025のウェブサイトのヒーローイメージを、VueとTresJS、そしてWebGPU上で動くThree.js Shading Language（TSL）を使って再現した過程を共有します。オリジナルのシーンは素のThree.js r178で動作しており、V字型のコーン（Vueを表現）と、日本の国旗の日の丸にインスパイアされた球体を組み合わせ、日本の伝統技法である墨流し（すみながし）を再現するカスタムシェーダーでマスクをかけています。
このセットアップをTresJSのコンポーネントを使ってVueに移植した方法、シーンを宣言的に構成した方法、そして元のGLSLシェーダーのロジックを、Vueアプリの中で自然に感じられる形でTSLへと移行した方法を解説していきます。墨流しのエフェクトが、歪んだベクトル場を流れるFBMノイズからどのように構築されているか、アニメーションが時間経過とともに複数のカラーパレットをどのように循環しているか、そして従来のWebGLパイプラインの代わりにWebGPU APIを活用することで何が変わるのかを見ていきます。
セッションの終わりまでに、参加者は既存のThree.jsのシーンをTresJSでVueに移植する際の考え方、複雑なシェーダーエフェクトをコンポーネント駆動のアーキテクチャの中で整理する方法、そしてVueを使って美しいビジュアル体験を作り出す方法を理解できるようになります。
ライブデモ：https://lab.tresjs.org/experiments/vuefes-japan-2025
TresJS：https://tresjs.org/