Yo! Welcome back to The Loop Chronicles 🎃 👻. This edition comes to you from Tokyo 🗼. October was a big month: TresJS was on stage twice at Vue Fes Japan 2026, and WebGPU stopped being a setup trick and became a proper entry point in @tresjs/core@5.10, @tresjs/cientos@5.10 and @tresjs/nuxt@5.8. Let's go 🚀.

TresJS at Vue Fes Japan 2026

Vue Fes Japan 2026 took place on October 24 at Otemachi Place in Tokyo. Two of the talks were about TresJS, and for us that is a dream come true 🇯🇵.

Spatial Computing, Written in Vue

Shingo Hiranuma (@mistorun), CTO at GENEROSITY inc., gave Spatial Computing with Vue: Frontend Development for XR Devices Using TresJS and WebXR.

The idea: you can build spatial computing apps for devices like the Meta Quest 3 and the Samsung Galaxy XR with the Vue Composition API you already know. No new framework to learn. Shingo showed implementation patterns for XR frontends with Vue, TresJS and WebXR:

With glasses-type devices like XREAL Project Aura and Snap Specs arriving this fall, this talk is a great map of where Vue can go next. The slides are available in English and in Japanese. Thank you, Shingo, for taking TresJS into XR 🥽🙌.

How I recreated the Vue Fes Japan 2025 website using TresJS and TSL

Later that afternoon, I gave How I recreated Vue Fes Japan 2025 website using TresJS and TSL (WebGPU).

The Vue Fes Japan 2025 website had a beautiful hero: a V-shaped cone for Vue and a sphere for the Hinomaru of the Japanese flag, both masked with a suminagashi shader. Suminagashi is a Japanese ink-marbling technique that is hundreds of years old. The original scene was made with raw Three.js r178 by the Vue Fes Japan 2025 team, and all credit for the design goes to them.

In the talk, I showed how I ported that scene to Vue with TresJS components, and how I moved the GLSL shader to TSL on top of WebGPU. We went through the FBM noise that flows through warped vector fields, the ink bands, and the color palettes that change over time.

The live demo is in the lab.

A big thank you to the Vue.js Japan User Group and all the Vue Fes Japan staff and volunteers. The event was organized with so much care, and the community made us feel at home ありがとうございます 🙏.

WebGPU gets its own entry

The headline of this release. Until now, you had to pass a renderer factory to TresCanvas and extend() the node classes yourself to use WebGPU. In @tresjs/core@5.10.0, you change one import (#1543):

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core/webgpu'
import { color, mix, positionLocal, sin, time } from 'three/tsl'

const colorNode = mix(
  color('#82dbc5'),
  color('#fbb03b'),
  sin(time.add(positionLocal.y.mul(4))).mul(0.5).add(0.5),
)
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
    <TresMesh>
      <TresTorusKnotGeometry :args="[0.6, 0.2, 128, 32]" />
      <TresMeshStandardNodeMaterial :color-node="colorNode" :roughness="0.3" />
    </TresMesh>
    <TresDirectionalLight :position="[3, 5, 2]" />
  </TresCanvas>
</template>

What @tresjs/core/webgpu gives you:

The root entry @tresjs/core does not change. Its TresCanvas still uses WebGLRenderer, and a build check fails if the root entry can reach three/webgpu or three/tsl. When the browser has no WebGPU, WebGPURenderer falls back to its WebGL2 backend, and node materials still work.

The same release fixes a bug that made TSL feel broken: patching a node prop such as colorNode now recompiles the node material (#1540). Before, the renderer kept the old pipeline and nothing changed on screen. isNode and isNodeMaterial are new public exports.

Everything is in the WebGPU guide.

Cientos speaks TSL

@tresjs/cientos/webgpu has the same names and props as the root entry, so you only change the import path:

import { TresCanvas } from '@tresjs/core/webgpu'
import { OrbitControls, Sparkles, Stars } from '@tresjs/cientos/webgpu'

Components that used GLSL in the root entry are now TSL ports in the WebGPU entry. WebGPURenderer compiles them to WGSL, or to GLSL on the WebGL2 fallback:

WebGPU draws Points at 1 pixel only, so Sparkles, Stars and Precipitation render one instanced Sprite with PointsNodeMaterial in their WebGPU versions.

Some components are not ported yet: the ones that write GLSL with render targets (ContactShadows, MeshTransmissionMaterial, MeshPortalMaterial...), the line components, and the ones built on three-stdlib shaders (Sky, Reflector, Stage...). If you import one of them from @tresjs/cientos/webgpu, the build and the type check fail and name the component. If you use one from the root entry on a WebGPU canvas, cientos logs one warning that names it. TSL versions will come one by one. The full list is in the Cientos WebGPU guide.

Nuxt: one option

@tresjs/nuxt@5.8.0 has a new renderer option (#1527):

export default defineNuxtConfig({
  modules: ['@tresjs/nuxt'],
  tres: {
    renderer: 'webgpu',
  },
})

With it, <TresCanvas>, useTres() and the cientos components are auto-imported from the /webgpu entries. A cientos component with no WebGPU version yet still resolves, but it throws an error that names it when it mounts, instead of Vue's generic "Failed to resolve component". @tresjs/post-processing is not auto-imported in this mode, because its effects work only with WebGLRenderer, and the module tells you so.

N8AO ambient occlusion

@tresjs/post-processing@3.10.0 adds N8AO, the screen-space ambient occlusion pass by N8python (#1518). AO darkens corners, crevices and the contact areas below objects, so flat scenes get depth. It comes in both families:

<Suspense>
  <EffectComposerPmndrs :multisampling="0">
    <N8AOPmndrs :ao-radius="2" :intensity="3" />
    <SMAAPmndrs />
  </EffectComposerPmndrs>
</Suspense>

Every prop is reactive, and renderMode gives you debug views, including a split view with and without AO. Hardware multisampling does not work with AO, so add <SMAAPmndrs /> or <FXAAPmndrs /> after the pass. The Rapier Object Clump experiment in the lab now uses the package component.

Fixes worth knowing about

Core

The first two fixes come from Felix Schwämmle, in their first contributions to TresJS, with a reproduction test for each. Welcome, Felix 🎉!

Cientos

PointMaterial converted its color to sRGB twice (#1539). color="#ffa500" rendered yellow, now it renders orange.

Rapier

@tresjs/rapier@1.1.3 brings two fixes:

Tres Leches

Better dark mode contrast for folders and inputs (#1517), slot content that stays visible when the panel height changes (#1523), and a collapsed panel that keeps its size when the window resizes (#1546).

Everything in sync

The family moved together on October 6, October 22 and again on October 28. These are the latest:

pnpm up @tresjs/core @tresjs/cientos @tresjs/nuxt @tresjs/post-processing @tresjs/rapier @tresjs/leches

👉 Full Release Notes

From the community

Thanks

Thank you to Shingo Hiranuma for bringing TresJS to XR devices on the Vue Fes stage, to the Vue Fes Japan 2025 team for the design that inspired my talk, to the Vue.js Japan User Group for an amazing conference, to Felix Schwämmle for their first two core fixes, and to N8python for N8AO. And thanks to everyone who opened an issue this month 🙌.

Coming next: TSL composables

/webgpu is the foundation. The next step is in review: a set of experimental TSL composables for @tresjs/core/webgpu (#1545).

The API can still change, so watch the PR. If you have a TSL use case you want us to cover, tell us.

Got something cool built with Tres? Share it in our Discord. It might headline the next Loop Chronicles.

Happy crafting ✌️.