Editor’s observe: From time to time, one thing occurs within the evolution of the net that feels greater than a single occasion. That is a type of moments. Three.js has been a part of the artistic coding motion we’ve supported at Codrops for a few years. Our pages have been crammed with experiments, tutorials, and explorations constructed with it, and we’ve watched it assist form a technology of immersive net experiences. That’s why supporting the very first Three.js convention as official sponsors means a lot to us. On this case examine, David Ronai takes us behind the scenes of the convention web site and the way it got here collectively. We’ve grown alongside this neighborhood for a very long time, and being a part of this second feels genuinely particular.
The very first thing you discover on threejs.paris isn’t the typography or the gradients, it’s the faces.
Dozens of shiny 3D spheres, every textured in a different way, every with its personal expression, bouncing and stacking throughout the display like a crowd arriving at a celebration they really wish to be at.
These aren’t ornamental property. They’re the neighborhood.
Three.js Conf is a celebration of its ecosystem. Once we got down to construct the web site for the primary Three.js convention in Paris, we confronted one query: how do you signify a neighborhood outlined by artistic variety? A neighborhood of people that make stunning issues on the web and share them freely?
Why not flip everybody into their very own character?
The Idea: Neighborhood as Design Precept
We needed this occasion to be community-driven, constructed round participation, not passive consumption. The web site wanted to speak this idea immediately, however not by phrases. By way of feeling.
That’s the place the thought for the spheres got here in. Each is exclusive: completely different supplies, completely different textures, completely different sizes. However all of them share the identical playful face. We’re all completely different, however we’re all right here collectively.
Audio system get their very own distinct spheres. However they sit in the very same physics-driven pile as everybody else. No pedestals. Only a joyful heap of artistic individuals.
Designing for Playfulness
Hervé Studio‘s artwork course is intentionally anti-corporate. The typography is chunky, uppercase, barely irreverent. “THREE.JS CONF” splashed throughout the viewport in cream-colored block letters. This creates a visible rigidity: inflexible, flat 2D kind as an immovable anchor towards chaotic, bouncing 3D spheres rolling over and round it.
The background shifts between saturated gradients. Pink-purple for the audio system. Lavender-blue for the neighborhood. Each scroll reveals a brand new temper & kawaii faces, mixing “superflat” pop artwork with hyper-modern 3D rendering.
Navigation is minimal: “Line Up”, “Sponsor It”. Every little thing else lives within the 3D scene. We belief guests to discover somewhat than click on by menus.
Making Issues Transfer: Physics
In fact, the location runs on the most recent Three.js utilizing WebGPURenderer and in addition contains a customized physics engine constructed with efficiency in thoughts to supply a easy expertise.
“It began easy. Every ball hooked up to a goal level in area, attempting to succeed in it, pushing different balls out of the way in which iteratively. Primary, but it surely labored and it was enjoyable.” – Makio64
From that basis, the system grew to incorporate:
- Velocity, Springs, Bounciness
- AABB collider for the UI
- Spatial hash for efficiency.
- Profiling + sizzling loop optimization utilizing LLM
- Transfer all of it to Net Employee
However we needed the physics to increase past the 3D scene, the UI buttons use customized SVG shapes with 48 management factors, in order that they react to the customer’s cursor in a easy, natural approach and go idle to save lots of efficiency when nothing strikes anymore and the cursor is way.
The Rendering Pipeline
As this website is for the Three.js neighborhood, we needed to showcase latest additions to the library. One in all them is Display screen-Area International Illumination (SSGI), which supplies the scene raytraced shade bleeding, making the spheres and surroundings mix collectively much more realistically.
However the whole lot comes with a value. In early testing we hit glitches and efficiency issues, so we needed to tune the SSGI aggressively, introduce optimizations and an adaptive efficiency system that offers every gadget the perfect visible high quality it will possibly deal with.
Pushing WebGPU arduous meant encountering sudden difficulties. As Makio64 explains: “I dug into iOS float errors, packing issues, and even needed to patch Three.js itself, fixing Android shadow rendering and integrating newest PRs like Renaud Rohlinger’s non-blocking compileAsync PR so shader compilation doesn’t freeze the primary thread.”
Packing the Pile: Supplies & Information
Each sphere in that pile seems distinctive. We used a mix of regular maps, spiral, fundamental and sub colours, noises, and completely different eyes. However rendering a whole bunch of distinct supplies would immediately kill our 120 FPS goal. We needed to optimize as soon as once more.
First, the textures: Regular, roughness, and diffuse maps had been baked into texture atlases and compressed as KTX2 (ETC1S & UASTC).
The fabric itself is a customized TSL node graph extending MeshStandardNodeMaterial. This allow us to override the conventional, roughness, and shade nodes with customized logic whereas nonetheless getting Three.js’s PBR lighting totally free.
WebGPU imposes strict limits — simply 8 vertex buffers. To outlive, we closely compressed occasion knowledge. Colours, UV areas, tiling values, and metalness are all bit-packed into simply 4 vec4 attributes. The shader unpacks them on the fly.
iPhone testing revealed float precision points virtually instantly. We utilized half-texel insets to forestall bilinear filtering from sampling throughout atlas cell borders. For mipmap artifacts brought on by fract() discontinuities, we handed specific UV gradients (dFdx/dFdy) to maintain sampling steady.
// TSL code utilizing vite-plugin-tsl-operator.
const atlasUV = Fn( () => {
const baseUV = uv()
const tiledUV = vec2(
baseUV.x * ( repeat.x ?? repeat ).fract(),
baseUV.y * ( repeat.y ?? repeat ).fract()
)
// Inset by half-texel to forestall bilinear filter sampling into gutter
const insetUV = vec2(
tiledUV.x * ( 1 - halfTexel.x * 2 ) + halfTexel.x,
tiledUV.y * ( 1 - halfTexel.y * 2 ) + halfTexel.y
)
// Remap UV from [0,1] to [uvStart, uvEnd]
const remappedX = insetUV.x * ( area.z - area.x ) + area.x
const remappedY = insetUV.y * ( area.w - area.y ) + area.y
return vec2( remappedX, remappedY )
} )()The ultimate problem was persistence. When a person creates their very own customized ball, we didn’t wish to bloat the database with large JSON payloads. As an alternative, we encoded the whole visible state of a sphere right into a single 10-character base62 string utilizing a mixed-radix codec. Each person’s distinctive, extremely detailed avatar is totally reconstructible from simply 10 characters.
One last item: open the browser console and also you’ll discover some ASCII shock 😉
Be a part of the Pile
The location remains to be evolving. New audio system, new interactions, new particulars showing because the occasion will get nearer, the digital equal of a venue filling up. Just like the convention itself, it’s designed so the gang isn’t watching. They’re making it.
The Three.js neighborhood has at all times been beneficiant: sharing code, constructing open instruments, celebrating one another’s experiments. It feels proper that their first convention web site is itself an experiment that practices what the neighborhood preaches.
Be a part of the Pile, Be a part of the Waitlist 👉 Threejs.paris
Become involved within the course of!
Three.js Conf Paris is occurring in 2026. We’re searching for sponsors who wish to help this occasion, the Three.js open-source ecosystem and the artistic neighborhood constructed round it. Get in contact at contact@threejs.paris.
