How I recreated Vue Fes Japan 2025 website using TresJS and TSL (WebGPU)
In this talk I’ll share how I recreated the Vue Fes Japan 2025 website hero using Vue, TresJS and Three.js Shading Language (TSL) on top of WebGPU. The original scene runs on raw Three.js r178 and combines a V‑shaped cone (for Vue) with a sphere inspired by the Japanese flag’s Hinomaru, masked with a custom suminagashi shader that simulates Japanese ink‑marbling.
I’ll walk through how I ported that setup into Vue using TresJS components, how I structured the scene declaratively, and how I moved the original GLSL shader logic over to TSL in a way that feels natural inside a Vue app. We’ll look at how the ink‑marbling effect is built from FBM noise flowing through warped vector fields, how the animation cycles through several color palettes over time, and what changes when you take advantage of the WebGPU API instead of the classic WebGL pipeline.
By the end of the session, participants will understand how to approach porting an existing Three.js scene into Vue with TresJS, how to organize complex shader effects in a component‑driven architecture and how to create beautiful visual experiences using Vue.
Live demo https://lab.tresjs.org/experiments/vuefes-japan-2025
TresJS https://tresjs.org/
Alvarosabu
How I recreated Vue Fes Japan 2025 website using TresJS and TSL (WebGPU)
In this talk I’ll share how I recreated the Vue Fes Japan 2025 website hero using Vue, TresJS and Three.js Shading Language (TSL) on top of WebGPU. The original scene runs on raw Three.js r178 and combines a V‑shaped cone (for Vue) with a sphere inspired by the Japanese flag’s Hinomaru, masked with a custom suminagashi shader that simulates Japanese ink‑marbling.
I’ll walk through how I ported that setup into Vue using TresJS components, how I structured the scene declaratively, and how I moved the original GLSL shader logic over to TSL in a way that feels natural inside a Vue app. We’ll look at how the ink‑marbling effect is built from FBM noise flowing through warped vector fields, how the animation cycles through several color palettes over time, and what changes when you take advantage of the WebGPU API instead of the classic WebGL pipeline.
By the end of the session, participants will understand how to approach porting an existing Three.js scene into Vue with TresJS, how to organize complex shader effects in a component‑driven architecture and how to create beautiful visual experiences using Vue.
Live demo https://lab.tresjs.org/experiments/vuefes-japan-2025
TresJS https://tresjs.org/