Rollout Context
Three.js and WebGL development in Perth: when immersive earns its weight
Transformation Study began with a simple creative question: how can an abstract idea about change feel real on a screen? The answer was not another scrolling sequence of flat panels. It was a digital object that could shift, fracture, reform and respond as visitors move through the story.
This is our own work — an in-house experiment rather than a client commission. That matters, because it let us test where immersive 3D genuinely earns its place and where it does not, without a client’s launch date depending on the answer. What follows includes the costs, not just the results.
When WebGL is right, and when it is a liability
Three.js and WebGL let a browser render real-time 3D: dimensional form, light, particles and motion that respond to the visitor rather than playing back as video. Used well, that creates a first impression a conventional marketing page cannot match.
Used badly, it is one of the most expensive mistakes on the web. A 3D scene ships significantly more JavaScript than an entire ordinary website, takes over the scroll, and can leave a mid-range phone hot and stuttering. If the visitor came to find your pricing or your phone number, every one of those costs is pure loss.
Our working rule is narrow. Immersive 3D is worth it when the motion is the message — a launch, a campaign, an innovation story, a brand whose whole proposition is transformation or craft — and when the page’s job is to create an impression rather than to complete a task.
It is the wrong choice for a service page, a booking flow, an ecommerce catalogue, or anything a customer needs to get through quickly. We say this to clients before quoting, because the honest answer is often that a fast conventional site will make them more money.
Transformation Study is a deliberate example of the first case: the subject is change, so the technique and the message are the same thing.
Four scenes, one visual system
The experience opens on a luminous procedural sculpture — geometry generated in code rather than modelled by hand, which is why it can fracture and reform rather than simply rotate.
From there it moves through distinct chapters: a particle world, a typographic creative statement, and a network of connected nodes. Each shifts the mood while staying inside one visual system, so the journey reads as a single piece rather than four demos in a row.
Structurally, the scene is not one large script. It is about seventeen focused modules — geometry, materials, lights, particles, camera, scroll, interaction, post-processing, quality, and the individual sequences — each owning one concern. That matters more than it sounds: WebGL code becomes unmaintainable faster than almost anything else in front-end work, and a single thousand-line scene file is a project nobody can safely change six months later.
The performance budget, stated honestly
The hero scene ships around 84 KB of JavaScript, with the animation layer adding roughly 115 KB.
We are not going to pretend that is small. It is roughly twenty times the JavaScript of a well-built conventional site, and it is precisely why this technique is reserved for pages where the visual is the product rather than applied to a whole website.
What makes it defensible is that the cost is contained and managed rather than ignored.
The site detects device capability at runtime and selects one of three quality tiers, adjusting particle counts, geometry detail, pixel ratio and bloom accordingly:
- Desktop runs the full scene.
- Mobile — triggered by a coarse pointer, a narrow viewport, four or fewer CPU cores, or 4 GB or less of device memory — cuts particle and geometry density substantially.
- Reduced drops particle counts to a fraction of desktop, pins pixel ratio to 1 and disables bloom entirely.
That third tier is chosen automatically whenever the visitor’s operating system says prefers-reduced-motion: reduce. Heavy parallax and continuous motion are a genuine accessibility problem — they cause nausea and dizziness for people with vestibular conditions — and honouring that setting is not optional. It is respected across every scene in the project, not just the hero.
What happens when WebGL cannot run
Every immersive project needs an answer to the question of what a visitor sees when the 3D does not load — because sometimes it will not. WebGL can be unavailable on older hardware, disabled in the browser, or blocked by a driver issue, and a scene that fails leaves a blank screen with no explanation.
The companion Elemental Convergence experience carries a dedicated fallback component that renders the same narrative as ordinary semantic HTML: headings, sections and cards containing the identical copy the 3D scenes present.
This is genuinely two deliverables rather than one, and it is the part most immersive builds skip. It also happens to be what search engines and AI crawlers read — a WebGL canvas is opaque to them, so without a real HTML layer the page has no indexable content at all. The accessible version and the crawlable version turn out to be the same thing.
What this proves about the work
The project is a proof point for our Web Development Perth service, and specifically for the judgement around it rather than the effects.
Anyone can add a spinning object to a page. The harder and more valuable skills are deciding whether the technique serves the business at all, structuring the code so it stays maintainable, budgeting the performance cost explicitly, degrading properly on weak hardware, and guaranteeing that the content still exists for people and crawlers when the 3D does not run.
If your project has a genuine reason to be immersive, those are the questions worth asking your developer before anything gets built.
The result: a scroll-directed Three.js experience built from around seventeen focused modules, with three automatically selected quality tiers, reduced-motion support throughout, and a full semantic HTML fallback carrying the same narrative.
Explore the live Transformation Study experience to move through the interaction yourself.
