A few weeks back I was on a call with my dad and the topic of Cybernaut Studio came up. I got to the part about the interactive 3D jewellery piece, the one you can drag around with your mouse, and he stopped me with a question I wasn’t expecting. “Is that happening right here on my phone, or is there a computer somewhere else doing all that work and just sending me the result?”
At first I was a bit taken aback, since I’d gotten so used to thinking about that split myself that I forgot most people never have to. But it was a genuinely good question. My dad has spent his whole career in finance, but his instinct was a good one. Something that reacts this smoothly to your mouse, in real time, feels like it should be expensive to produce. Surely there’s a powerful machine somewhere doing the heavy lifting, and what you’re watching is really just a recording of that work being streamed to you.
The real answer surprised him. Nothing was being streamed. There’s no machine elsewhere doing the work on your behalf. A 3D model is, underneath everything, mostly just a long list of points marking out a shape in space, plus a handful of images describing what the surface should look like. That’s close to the entire file. And every single time you watch that jewellery piece turn, it’s your own phone or laptop doing the actual work right then, taking that list of points and those images and drawing the jewellery piece from scratch, dozens of times a second, live, while you watch. Around 60 times per second to be exact.
That difference, between a video (something made once, in advance, and simply played back to you) and a real-time 3D model (something built fresh in front of you, over and over, out of nothing more than points and instructions) is what this whole article is actually about.
A Flipbook That Draws Itself
A flipbook is the simplest version of this idea there is. Flick through one fast enough and a stack of still drawings turns into something that looks like movement, even though nothing on the page is actually moving. A video works exactly the same way. It’s a very long flipbook, except every single page was drawn ahead of time, in order, by someone who already knew exactly what each one needed to look like. Once it’s finished, playing it back is just flipping through pages that already exist.
A real-time 3D model is also a flipbook, but a stranger one, and nobody draws its pages ahead of time. There’s no finished stack sitting there waiting to be flipped through. Instead, your device draws a brand new page, completely from scratch, over and over, using nothing but the points that make up the jewellery piece’s shape, some math, and whatever you’re currently doing with your mouse. It does this constantly, whether you’re touching the jewellery piece or not. If you sit completely still and just look at it, your device is still drawing a new page every time, it just happens to look identical to the last one, because nothing about the shape or your input has changed. The speed varies a little from device to device, but it lands somewhere around sixty pages a second or a new page every 16.67 milliseconds.
That’s really the entire trick. Sixty new pages a second is far faster than your eye can tell apart, so it reads as one smooth, continuous motion, the same way a flipbook does. But the difference underneath is enormous. A video is a flipbook hand-made once, by a person, in advance. A real-time 3D model is a flipbook made fresh, sixty times a second, by math, recalculating the same points and instructions over and over and reacting instantly to wherever you’ve just dragged it.
That’s the part worth sitting with for a second, because it’s also the part that answers my dad’s question directly: each one of those pages gets drawn on your own phone or laptop, by your own device, the instant before you see it. Nothing is being shipped to you pre-drawn. The question now is how a device turns a list of points into something that actually looks like a curved, gleaming jewellery piece, which is exactly where the rest of this gets interesting.
A Jewellery Piece Made of Triangles
Every 3D shape your device draws, the jewellery piece, the setting, every individual prong, is built entirely from triangles. Not because triangles are the only option, but because a triangle is the simplest closed shape that can ever exist with straight edges. You cannot make a closed shape with fewer than three sides. And because a triangle is always flat and always has a predictable shape with no awkward edges, the math for working with it never throws up surprises. That predictability is why decades of graphics hardware has been built specifically around processing triangles, and why every 3D shape, no matter how complex, gets broken down into them before a device draws it.
The useful thing about triangles is that you can build absolutely anything out of them. Stack enough together at different angles and you can describe any surface, any curve, any form, no matter how complex. The jewellery piece on your screen is nothing more than a very large collection of triangles arranged to describe the shape of the jewellery piece. Zoom in far enough on any seemingly smooth surface and you’d eventually see the edges.
This creates a tradeoff that every 3D modeller has to manage. Use more triangles and the shape becomes smoother and more detailed, but your device has to process more of them for every single page it draws, which slows things down. Use fewer and the device stays fast, but the edges between triangles start to show, giving surfaces a faceted, angular look rather than a smooth one. A good model uses as many triangles as the shape actually needs and no more, dense where the detail matters, sparse where it doesn’t. Getting that balance right is one of the less glamorous but genuinely important parts of building a 3D model that actually performs well in a browser.
Giving the Jewellery Piece Its Colour
Knowing the shape of the jewellery piece gets you surprisingly far. But a device that only knows the shape of jewellery piece has no idea what colour any of it should be. Without any instructions on colour, it’ll just pick something, usually a flat grey, and apply it everywhere uniformly. The result looks like a plastic toy, not a gold ring, silver necklace, rose gold earrings, or any other jewellery piece.
The fix is straightforward: you give the device an image. Not a photograph of the jewellery piece, just a flat image of what the surface looks like when you unwrap it and lay it out flat, like unfolding a cardboard box. Every point on that image corresponds to a specific point on the geometry, so the device can read it pixel by pixel and know exactly what colour each part of the surface should be. The gold parts of the band get their gold. The prongs get theirs. Any engraving, any finish variation, any surface detail that can be expressed as a colour gets baked into that image.
Wrap that image back around the shape and suddenly the jewellery piece looks recognisably like a ring, necklace, or earring. But only for a moment, because as soon as you look at it closely, something is still obviously wrong. Every surface is the same flat shade of whatever colour it is. There are no highlights. No reflections. No depth. It looks printed rather than physical. The colour is right but the jewellery piece still doesn’t behave like a real object sitting under a real light.
Teaching the Jewellery Piece to Interact with Light
The problem is that colour alone doesn’t tell the device how a surface responds to light, and light is what makes a physical object look real. A polished gold band and a sandblasted gold band can be exactly the same colour and look nothing alike, because one throws sharp reflections and the other scatters light in all directions. Colour is a property of the surface. How it behaves under light is a completely separate property, and it needs its own separate instructions.
So alongside the colour image, the model carries additional images that each describe a different physical property of the surface. One tells the device how rough each point is. Another tells it how metallic each point behaves when reflecting the environment around it. Each image works the same way as the colour one: every pixel maps to a point on the geometry and encodes a value, darker meaning less of that property, brighter meaning more of it, across the entire surface.
When it comes time to draw each new page, the device takes all of these images together and runs them through a set of equations that simulate, closely enough to be convincing, how light actually behaves in the physical world. Light hitting a rough surface scatters. Light hitting a polished surface reflects. Light hitting a metallic surface picks up the colours of whatever is around it. The equations combine all of those properties at every point and calculate what colour that point should appear to be, from the specific angle the camera is currently looking at it, under the current lighting conditions. Change the angle and the calculation runs again. That’s why the highlights on the jewellery piece shift as you drag it. The device isn’t playing back a recording of a highlight, it’s working out where the highlight should be right now, from scratch, for this exact frame.
There’s one more layer to this that goes back to the triangle tradeoff we looked at earlier. Even with all these surface images in place, a model with too few triangles will show flat edges in how it catches light, because each triangle is physically flat and the device knows it. But you can give each triangle a separate instruction for which direction it should pretend to be facing when the lighting equations run, independently of which direction it’s actually facing. A triangle that’s geometrically flat can tell the lighting calculation to treat it as if it curves gently toward its neighbours, blending the shading smoothly across what is physically a hard edge. The shape stays flat. The lighting behaves as if it doesn’t. Combined with the geometry’s own approximation of the curve, the two together can make a model with a fairly modest triangle count look considerably more convincing than the raw geometry would suggest.
The Chip That Was Already There
At this point the natural question is: if your device is doing all of this work every sixteen milliseconds, running lighting equations across thousands of triangles sixty times a second, why doesn’t it feel like a big deal? Why doesn’t your phone get hot the moment you open a product page with a 3D model on it?
The answer is that your device has been doing work exactly like this for years, just in other contexts. Every modern phone and laptop contains a dedicated chip whose entire purpose is processing the kind of triangle-heavy, image-intensive math we’ve been describing. It’s the same chip that runs video games, handles the background in a video call, and processes the camera feed on your phone. It was already there, already doing this kind of work constantly, long before 3D product pages existed.
For most of the internet’s history, websites couldn’t actually reach that chip. They could only use the part of your device that handles more general tasks, reading emails, loading text, running a calculator, which is perfectly capable but not built specifically for sixty-frames-a-second graphics work. The 3D rendering chip sat right there inside every device and websites simply couldn’t talk to it.
That changed. Browsers gained the ability to send work directly to that chip, and when they did, the entire category of what a website could do shifted. Running a 3D model on a product page stopped being a technically heroic feat and became, from the browser’s perspective, roughly the kind of task that chip was designed to handle in its sleep. No app needed, no plugin, no download. The hardware was always there. The website can now just use it.
Getting It Down to Size
Everything we’ve described so far, the triangles, the colour image, the roughness, the metallic instructions, the lighting direction hints, adds up to a file. And that file needs to travel from a server to your customer’s phone before any of the drawing can start. If it’s too large, the customer waits. If they wait long enough, they leave.
The solution is the same one the internet has been using for images since the early days of the web. Take a photo on a decent camera and the raw file can be enormous, tens of megabytes for a single shot. Save that same photo in a format built for the web and it drops to a fraction of the size, often with no visible difference at all. The way this works is by identifying information the human eye wouldn’t notice missing and quietly discarding it. Two pixels of almost identical colour can be stored as one instruction rather than two separate values. Gradual transitions can be described with a formula rather than every individual step. The image looks the same. The file is far smaller.
3D model files go through an equivalent process before they’re sent anywhere near a product page. The triangle positions get compressed. The surface images get compressed. Even the lighting direction hints on each triangle get compressed. Each of these uses methods tuned specifically for that type of data, squeezing out everything the eye wouldn’t catch while keeping everything it would. The result is a file that can describe a fully detailed, properly lit, real-time 3D piece of jewellery in a package small enough to load on a phone in well under a second, even on a middling connection.
It’s not glamorous work. But it’s the difference between a 3D model that actually gets used on a product page and one that technically exists but takes long enough to load that most customers never see it.
A Small Apology About Gemstones
In the interest of getting the ideas across clearly, this article has described real-time 3D rendering as if it were one thing. It isn’t, quite. It’s a family of different techniques, each making different tradeoffs between how accurate the result looks and how much work it asks of your device. Everything described so far represents one reasonable point on that spectrum, good enough to be convincing, fast enough to run in a browser. But it’s worth being honest that it is a point on a spectrum, not the whole story.
The place where this matters most for jewellery is gemstones, and it’s worth explaining why.
When light hits most surfaces, it bounces off. One interaction, one calculation, done. When light hits a gem, something considerably more complicated happens. It enters the stone, bends as it crosses from air into the material, travels through the interior, bounces off an internal face, bends again, possibly bounces again, and eventually exits from a completely different point than it entered. That exit angle depends on every single bounce that preceded it. The fire you see inside a well-cut gem, those flashes of colour and light that shift as the stone moves, comes from this process happening across hundreds of facets simultaneously, with light taking thousands of different paths through the stone at once.
To simulate this accurately, a device would need to follow every one of those paths, through every bounce, for every point of light hitting the stone, sixty times a second. The amount of work that requires multiplies with every additional bounce you track. Two bounces is dramatically more expensive than one. Three is dramatically more expensive than two. Following light to full accuracy through a gem is the kind of work that takes film production software several seconds per frame on a powerful desktop machine, not sixty frames a second on a phone in someone’s pocket.
So we make a tradeoff. We cap the number of bounces the lighting calculation is allowed to follow at one. A single bounce still gives you reflections, still gives you the metallic quality of the setting, still gives you a convincing sense of depth and light interaction across most of the metalic parts of the piece. But inside the gem itself, where the fire comes from multiple internal bounces, one bounce isn’t enough to reproduce it accurately. The stone looks good. It doesn’t look quite the way a real gem looks under a boutique’s lighting rig, and if you know what you’re looking for, you can tell.
We think that tradeoff is worth making. A 3D model that loads in under a second on any phone and gives a customer a genuine, interactive sense of the jewellery piece’s form, scale, and character does more for their confidence in buying than a physically perfect gem simulation that only runs on a desktop. But we’d rather tell you the tradeoff exists than let you discover it yourself.
So, Back to My Dad’s Question
By now the answer is a lot less mysterious than it was at the top of this article. Is the computing happening on your phone or somewhere else? Your phone. Every frame, drawn from scratch, sixty times a second, by a chip that’s been sitting inside every device for years waiting for websites to figure out how to use it properly. A list of triangle positions, a handful of images, some lighting equations, compressed down small enough to arrive before you’ve finished loading the page.
That’s the whole thing. No magic, no powerful machine behind a curtain. Just a lot of very fast math, running locally, on hardware that was already there.
The reason any of this matters for a jewellery brand is the same reason it came up in the first article: a customer who can pick up a piece, turn it over, watch the light move across it, is a different kind of customer from one who’s looking at two photographs and trying to imagine the rest. The first article was about why that difference exists and what it costs when it’s missing. This one is about what’s actually happening under the hood when you close that gap. Both come back to the same point: the technology to do this properly has existed for long enough that not using it is a choice, and it’s a choice customers notice even when they can’t explain why.