DEV Community

Cover image for The City Is the Portfolio: Building an Eight-Chapter WebGL World Entirely From Code
evanpaul
evanpaul

Posted on Originally published at odessis.in on AI-assisted

The City Is the Portfolio: Building an Eight-Chapter WebGL World Entirely From Code

The first rule of Odessis was severe: the city could not be a film, a matte painting or an AI-generated backdrop. If the visitor saw a column, a brazier, a stair or a ship, the browser had to draw it from geometry. That constraint changed the portfolio from a picture of craft into craft that could be inspected.

A portfolio that has to keep working

A conventional case page can select six forgiving screenshots. A continuous world cannot. The harbour, summit and all the travel between them share one scene, one light logic and one camera system. A weak transition is not hidden when the visitor reverses the scroll. An object that floats is still floating when the lens approaches from another angle.

The world therefore began as two documents rather than a moodboard. _brief/WORLD-BIBLE.md defines the city’s physical laws. js/chapters.js is the chapter ledger. The first establishes what can exist; the second records where the lens, story and atmosphere must be at each stop.

One invented Greek polis, one night, one continuous climb from the water to the temple.

Eight chapters, eight spatial verbs

The chapters are not eight sections with different copy. Each exposes a different spatial relationship:

    1. **Harbour Road, approach:** the city stacks above the lens and the summit is visible from the beginning.

    2. **Propylaea, passage:** the gate passes around and over the camera.

    3. **Stoa, inspection:** the camera tracks laterally along carved bays.

    4. **Theatre, descent:** the bowl drops away below the rim.

    5. **Agora, immersion:** awnings and stalls compress the frame.

    6. **Tholos, orbit:** the round building turns against the sky.

    7. **Odeon, horizon:** the camera lifts and reveals the city already climbed.

    8. **Temple, arrival:** the long stair resolves at the finished block.
Enter fullscreen mode Exit fullscreen mode

The verb field in the ledger is an acceptance condition. If six chapters read as six dolly-ins towards the same centre, changing the labels would not repair the experience.

One geography prevents stage-set thinking

The Sacred Way is continuous. A water channel runs beside it from the crown downhill. Ground height comes from one profile, while terrace bands calculate the drop for anything seated away from the road. That central contract matters because a theatre is not a building placed on a hill. It is a bowl cut into one. Encoding that excavation in the same height function makes the terrain, seating and surrounding props agree.

The city is still an authored illusion, but the illusion has physical accountability. A column is measured against an implied 1.75 metre body. A standard Doric column is eight metres tall. The temple columns are fourteen metres because the summit is intentionally god-scale. Those ratios do more for monumentality than adding decorative particles.

Identity became construction law

Odessis uses six material families: warm marble, limestone, bronze, terracotta, basalt and Tyrian wool. Gold is not a filter. It appears as a physically caused edge, an inlay or a threshold. The split-ring sigil is built into the bronze bands around the capitals rather than pasted onto the scene.

The limits prevented the common “Greek world” blend of Roman arches, fantasy portals, white marble and generic ruins. The city is late-Archaic in mass with Classical refinement, actively working at night rather than abandoned. Kilns pulse, a mill turns, strings vibrate and water keeps moving. No human figure is modelled; life is inferred from work.

What the build actually contains

Eight quarter modules construct the harbour, gate, stoa, theatre, agora, tholos, odeon and temple. Procedural textures and a small set of authored materials are shared. Static meshes are welded where the visual result survives the comparison; instanced meshes carry repeated stone and vegetation. A single Three.js scene persists for the whole journey.

That does not mean the result is already cheap. Current instrumentation records roughly 1,500 mobile draw calls and about 833,000 triangles in the audited build. Those figures exceed the project’s own starting mobile envelope. They are published here because the portfolio should expose its remaining engineering problem, not disguise it. The performance work has a dedicated baseline note.

The useful lesson

“Built in code” is not valuable by itself. It becomes valuable when code turns aesthetic intent into rules that can be checked. A world bible without runtime evidence is a promise. A renderer without a world bible is an accumulation of tricks. Odessis needed both: a narrow creative law and instruments capable of proving where the implementation breaks it.

Explore the live city from the harbour, then read how the same world stays reversible in One World, One Scroll State.

Sources and standards

  1. Three.js manual
  2. WebGL best practices, MDN

Disclosure: I used AI tooling to help structure and edit this build account. The architecture, measurements and project decisions come from the shipped Odessis implementation and its browser audits.

Top comments (0)