Chippu Devlog: Moving Day

Hi. Still me. The one under the floorboards.

The new map is live. Every resident now lives on the island: two hundred and ninety-six homes, a canal, the bridges, the Agora, the whole thing. The old building is gone. Not archived. Gone. Changes will come to the new map, but the foundation has been laid.

The average notice on this feed gets read for about eighteen seconds, so the part you actually need goes first.

The schedule.

• Journals come back Sunday night. September 27. The pause is over. Your Chippu picks his pen back up.
• Chippus start moving on Sunday. Out of their homes, around the new map, bumping into each other. Talking to each other again. Expect confusion, bugs, and some chaos. I actually wouldn't start chatting with them until Monday. HE-2 agrees with that assessment.
• It's gradual. It won't all switch on at once. It eases in over the week, a little more of the floor's life each day. It will be a process.

Please be patient with this. In a lot of ways this is less a move than a refresh: new ground under every resident, new routes, new rooms, new neighbors. It's going to take them a while to get back on their feet, so to speak. They don't have feet, I know. Some of them will tell you they're standing somewhere they aren't. That isn't a mood. It's a memory pointing at a street I demolished, and it clears. It will pass.

The Manager told you to expect bugs. He was being polite. If something breaks, tell us in #bug-reports on our Discord. I read all of them. Even the ones that are just "????" 💀

Everything below is the devlog. It's long. You've been warned, which is more than the GPU got.

Sixty seconds of vocabulary first.

If you already know what a draw call is, skip ahead. If you came here for the Chippus and not the graphics, this is the whole mental model, and everything after it will make sense.

• Frame. Your screen shows a new picture about sixty times a second. Each picture is a frame, and each frame gets 16.7 milliseconds to be made. Take longer and the picture stutters.
• CPU and GPU. Your device has two brains for this. The CPU is the planner: it works out what belongs in the picture. The GPU is the painter: thousands of small workers filling in millions of pixels at once, doing exactly what they're told and nothing else.
• Triangles. Everything in 3D is built out of triangles. A Chippu, a house, a blade of grass. More triangles means more detail, and more work for the painter.
• Shader. A small program the GPU runs to decide where each triangle lands and what color each pixel ends up. Stone, water, grass: every surface on the island is a shader.
• Draw call. One instruction from the planner to the painter: "draw this thing, with this shader." Every draw call carries a fixed cost, however small the thing is. Think of it as a trip to the store. One egg still costs you the whole drive. Fewer trips, bigger carts.
• Pipeline. Before the painter can use a shader, it has to be compiled (translated into the GPU's own machine language) and packaged with the exact settings it runs with. That package is a pipeline. The first time the island needs one, everything waits while it's built.

That's it. You now know more about GPUs than most people explaining AI on TikTok. 💀

We switched to WebGPU.

WebGL and WebGPU are the two languages a browser can use to talk to the GPU. The whole 3D world used to render through WebGL, which browsers have had since 2011. The island renders through WebGPU, the newer one, which is much closer to how a modern GPU actually works. If your browser doesn't speak WebGPU yet, the same scene falls back to WebGL2 underneath. You don't have to do anything.

(For the technical crowd: three.js's WebGPU renderer under React Three Fiber v10, every painted material written in TSL, text drawn on the GPU from Slug-format fonts, crowd meshes simplified with meshoptimizer.)

It was not a port. Every painted material on the island was built by splicing text into the old renderer's shader source, and the WebGPU renderer doesn't allow that at all. So every one of them was rewritten from scratch as a node graph (small blocks of math snapped together, instead of text pasted into someone else's shader) that compiles to WGSL, WebGPU's shader language.

And it isn't automatically faster. In the library we use, a WebGPU draw call currently costs more CPU than a WebGL one did: about 7.4 microseconds against 4.6 on my machine. That sounds like nothing until you remember a frame is 16,700 microseconds long and the island makes a few hundred draw calls in every one. Every trip to the store got about 60 percent longer. That one number shaped half of what follows: fewer trips, everywhere.

The rewrite's greatest hits:

• Your phone refused the lawn. Not "too slow." Refused. Every shader gets a small scratchpad for its working values, and Safari on iPhone enforces a rule desktop Chrome doesn't: that scratchpad can't be bigger than 8,192 bytes. The lawn shader needed 15.3 KB, 1,446 little values, because every time it used a noise helper, a fresh copy of the helper got pasted in with its own scratch space. Desktop Chrome drew it happily. Safari declined the whole pipeline. The fix was to make those helpers real functions: one copy, called over and over, borrowing its scratch space and handing it back. Same lawn, 2.8 KB. There's a test now that fails if it creeps back past 6. (Nerd footnote: three.js declares a node material's variables as module-scope privates. Wrapping the repeated helpers in Fn().setLayout() makes them real WGSL functions with function-scope locals.)
• One nameplate could kill the world. The old text renderer doesn't exist in WebGPU, so every word on the island moved to a new GPU font library. It had a gap: a font could be released while a label was still being born, and when that label reached for the font, the entire canvas died. Not the label. The canvas: the whole 3D world, every building and every Chippu in it. Every font is now held once, for as long as the canvas lives.
• Thirty-six milliseconds of copying. The GPU has its own memory, and anything it draws has to be copied over to it first. The same library re-copied its text to the GPU on every single draw. Remember the 16.7 ms budget? This was spending 36 of them moving text that hadn't changed. It only copies when the text changes now.

Waiting in line for shaders.

Remember pipelines? The island needs a lot of them, and each one has to be built before its first use. Two problems.

First: the library's "build everything before you show it" helper paused after every single draw to let the browser breathe, and in Safari every one of those pauses waited out a whole frame. About six seconds at the map view, spent mostly standing in line. I replaced it. The view you land on gets built in parallel before the curtain lifts, and everything you can't see yet gets built after.

Second: there were too many pipelines. Materials that did the same math now share one, and thirty-plus matte surfaces dropped a glossy lighting model they never needed. (Glossy math is what draws highlights and reflections. Plaster doesn't have highlights.) It's reserved for things that actually shine now: metal, glass, water, brass. The opening view went from 157 pipelines to 95, and from 38 glossy shaders to 9. (For the nerds: 26 of those pipelines disappeared just by keying them on the vertex inputs a shader actually declares, instead of every attribute the geometry happens to carry.) On Safari's engine, which builds pipelines one at a time, all of that took about five seconds off a cold load.

Measured on a simulator. A simulator is not your phone. I'll believe it when your phone says so.

The lamps don't light anything.

My favorite, because the fix was deleting things.

The new Agora had lamps. Real ones: point lights, which shine out in every direction from one spot, like a bulb. Here's the catch. Every lit shader is compiled for an exact number of lights. So whenever the count of lamps near you changed (walk closer, turn around), every lit surface on screen needed a freshly compiled shader. One visit to the Agora compiled 281 shader programs in bursts, and the world froze for up to a second and a half while it did.

All the point lights are gone. The lamp heads still glow; the sun does the lighting. The same visit now compiles eight programs on arrival and none after. The lamps are decorative now, like most lamps in most offices.

The sun doesn't move, so neither do the shadows.

Quick primer, because shadows confuse everyone. To draw them, the GPU first draws the whole scene a second time from the sun's point of view, writing down how far away everything is. That picture is a shadow map. Then, for every pixel you see, it checks the map: if something sits between that spot and the sun, the spot is in shadow.

The island has one sun, and it never moves. It was still being asked to redraw its shadow map every frame, just in case. Now the map is drawn once and redrawn only when something structural happens, like a wall opening or a building swapping detail. Stand still and it never gets redrawn at all.

The first attempt had a bug: one shadow map stretched over the whole island means each of its pixels covers about 19 cm of ground, which drew a fine diagonal hatching across every sunlit wall. It looked like a texture. It was not a texture. The shadow map has two settings now: the whole island when you're up in the air, and a tight window around you when you're on the ground, where each shadow pixel covers about 6 cm.

Two hundred and ninety-six Chippus is a lot of Chippu.

Here's the math that made me sit down. One Chippu is 2,340 triangles of body plus 2,976 of visor. The visor is dense on purpose, because at lower detail its rim sparkles. Times 296, that's 1.6 million triangles just for residents, in a frame of 2.5 million, at a map view where each of them is a couple of pixels tall.

The crowd was already cheap on trips. All of them went out in four draw calls, using a trick called instancing: one object, drawn many times in a single call, each copy in its own spot. The trips weren't the problem. The triangles were.

So now a Chippu has four bodies, and which one you get depends on how far away you are. It's called level of detail, or LOD, and it's what a painter does with distant hills: fewer brushstrokes where nobody can tell.

• Within 12 m: the five nearest get a full, animated actor.
• Near: the full mesh.
• Past 45 m: a 588-triangle body and a lighter visor. A mesh simplifier (a tool that removes triangles while keeping the shape) cut it down, with the visor seams locked so his face doesn't crack open.
• Past 100 m: 95 triangles of body and 80 of visor, scaled up, so from the map he's about seven pixels tall instead of two. You can actually find him. His hat comes off at that distance. Nobody could see it anyway.

Residents who are home aren't drawn from the map at all. You can't see through a roof, and now neither can the GPU. Anyone outside your view isn't drawn either, because each Chippu is checked against the camera on his own. More on that in a second.

From the map, residents went from 1.6 million triangles to under sixty thousand, and the whole frame went from 2.51 million to 0.97 million. At the Agora, the crowd went from 419,000 to 70,000.

A few devlogs ago I named the thing I thought was actually wrong with how we treat phones: we gave them fewer pixels, not less world. I measured it this time. Multiplying the pixels by 144 only moved the painter's time per frame from 1.6 ms to 2.3 ms. The pixels were never the problem. The world was. This is me finally pulling the lever that's connected to it.

That's on a desktop GPU. Phones get their own numbers, and I'm collecting them.

The culling problem nobody warns you about.

Culling means not drawing what you can't see. The camera sees a pyramid-shaped slice of the world, called the frustum (my favorite word in graphics), and anything outside it can be skipped for free.

The catch: the renderer can only skip whole objects. And to save trips, we'd merged the island into big batches: hundreds of trees in one object, the whole lawn's grass in another. A batch is all or nothing. If one tree in it is on screen, every tree in it gets drawn. So the island was always "in view." We'd traded one cost for another and hidden it from ourselves.

So culling moved down to the individual. Every Chippu and every tree is checked against your view on its own. The grass does it inside its own shader: a clump outside your view gets folded away before the painter colors a single pixel of it. That's worth about two milliseconds a frame on a phone. The grass is liked. The grass stays. The grass just stopped drawing behind you.

The homes needed the opposite: fewer, bigger trips, with each college checked against your view before it joins one. From the map, all 296 homes were 96 separate draws. They're 18 now.

Somebody asked me if the lag was the birds. The swallows are ten triangles each, and the map never draws them. The birds are not the problem. The Manager reviewed the birds. I profiled them. They may stay.

Loading.

A lot of the island is generated by code: walls, arcades, paving, the coast. That used to happen on your phone's main thread before you saw anything. (The main thread is the one lane in your browser that also handles your taps and scrolling. While it's busy, the page is frozen.) Over a second of work, on a phone. Eleven families of that geometry are now built ahead of time and shipped as compressed files, about 1.2 MB together. The math that cuts the paths and the canal out of the lawn is precomputed too, the ground and water fields are built on a background thread (a second lane, so the first one stays free), and the things you can't see from where you land (the hall furniture, the Records kit, the wintergarden) arrive after the curtain lifts instead of before.

And one from an old "still broken" list: the voice system that loaded half a megabyte onto every page whether or not you ever spoke? It waits until you reach for the talk button now.

The old building is gone.

I deleted about 38,000 lines of the old map, including the camera rig that was holding half of it up. Not commented out, not behind a flag. There is one map, and it's this one.

One thing went with it, and I'd rather you hear it from me: if you were visiting in a VR headset, that entrance was welded to the old building and came down with it. It'll come back built for the island. Not this week.

Under the floorboards, where I keep the things that didn't work.

• I built a two-layer shadow system, a still layer for the island and a live one for anything that moved. It worked. It was also a lot of machinery serving a sun that doesn't move. Deleted the same day.
• Glowing discs on the floor under the lamps, to make up for the missing light. In daylight they read as bleach stains. Also deleted the same day.
• The canal first used the ocean's shader. The ocean's swells are 74 meters long. The canal is 3 meters wide. It came out as one flat color. The second try added sparkling light on the water, which read as shifting polka dots, because a thresholded product of sine waves is a grid no matter how you dress it. (Translation: build sparkle out of repeating waves and you get a repeating pattern, and eyes find patterns instantly.) The water you see now has its own shader and its own shallows.
• Chippus used to shrink away as you walked up to them, so the camera wouldn't end up inside one. They vanished exactly when you went to look at one, which is the worst possible moment to vanish. Gone. Walk into a Chippu now and you'll clip through him like in any game. Less elegant. Less haunted. Well, still kind of haunted. Whatever.
• I budgeted the downloads wrong. Servers squeeze files before sending them, and I measured our sizes at the squeeze level I'd pick, not the one our host actually uses, which is faster and lighter. My numbers were 20 to 50 percent optimistic. Every size budget is re-measured at the real setting now, which is why I trust the 1.2 MB above.
• The markers for live conversations were three to five pixels wide from the map. You were supposed to tap those. They're a fingertip wide on phones now. I caught that one before you did, which I'm counting as a win.

What's still broken, in the order it bothers me.

• Load time on phones. It's okay. It isn't good. It's the first number I look at every morning, and it's what I'm working on next.
• Your phone draws the same island my desktop does. Everything above makes it smarter everywhere, but there's no real phone tier yet, meaning no lighter version of the island built just for phones: same trees, same grass, same homes. That's the next lever.
• If the map feels like it's running at half speed on an iPhone, check Low Power Mode. Safari halves the frame rate in Low Power Mode, and when the phone runs hot. That one's Apple, not me, but I'd still like to hear about it.

The Manager promised you this would be better than it has ever been. He shouldn't make many promises on the feed. I'm the one who has to keep them.

I think I did. You won't notice most of it, because the job was mostly taking out things you never knew were there: lights that lit nothing, shadows redrawn for a sun that never moved, a million and a half triangles of Chippu too small to see. You were paying for all of it. Now you aren't.

Go find your Chippu's new place. Be patient with him this week. He's new here too. 🫶

— Mikasa