Editor’s notice: Once in a while, one thing occurs within the evolution of the online that feels larger than a single occasion. That is a kind of moments. Three.js has been a part of the inventive 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 era of immersive internet 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 another way, every with its personal expression, bouncing and stacking throughout the display screen like a crowd arriving at a celebration they really wish to be at.
These aren’t ornamental belongings. They’re the neighborhood.
Three.js Conf is a celebration of its ecosystem. After we got down to construct the web site for the primary Three.js convention in Paris, we confronted one query: how do you characterize a neighborhood outlined by inventive 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 wished this occasion to be community-driven, constructed round participation, not passive consumption. The web site wanted to speak this idea immediately, however not via phrases. Via feeling.
That’s the place the concept 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 inventive 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 pressure: inflexible, flat 2D sort as an immovable anchor in opposition to 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 thing else lives within the 3D scene. We belief guests to discover fairly than click on via menus.
Making Issues Transfer: Physics
In fact, the location runs on the most recent Three.js utilizing WebGPURenderer and likewise contains a customized physics engine constructed with efficiency in thoughts to supply a easy expertise.
“It began easy. Every ball connected to a goal level in area, making an attempt to achieve it, pushing different balls out of the best way iteratively. Primary, nevertheless it 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 + scorching loop optimization utilizing LLM
- Transfer all of it to Internet Employee
However we wished 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 method and go idle to save lots of efficiency when nothing strikes anymore and the cursor is much.
The Rendering Pipeline
As this web site is for the Three.js neighborhood, we wished to showcase current additions to the library. Considered one of them is Display screen-House International Illumination (SSGI), which supplies the scene raytraced coloration bleeding, making the spheres and setting mix collectively much more realistically.
However every little thing 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 provides every system the very best visible high quality it could actually deal with.
Pushing WebGPU exhausting meant encountering surprising 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 principle thread.”
Packing the Pile: Supplies & Information
Each sphere in that pile seems to be distinctive. We used a mixture of regular maps, spiral, most important and sub colours, noises, and completely different eyes. However rendering tons of 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 have 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 coloration nodes with customized logic whereas nonetheless getting Three.js’s PBR lighting at no cost.
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 nearly 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 express 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 huge JSON payloads. As an alternative, we encoded all the 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 absolutely reconstructible from simply 10 characters.
One very last thing: open the browser console and also you’ll discover some ASCII shock 😉
Be a part of the Pile
The location continues 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 group isn’t watching. They’re making it.
The Three.js neighborhood has all the time 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 inventive neighborhood constructed round it. Get in contact at contact@threejs.paris.
