The National Theatre in Prague, walked through together

Lukáš Eršil’s open 3D model of the Národní divadlo, turned into a place for several people at once: walk the street, the foyer and the auditorium in a headset or a browser, dress for 1883, talk, and wind the building back to its foundations.

The scenes with a crowd were filmed in a browser, and their fifteen visitors are simulated: scripted figures connected to a real room through the same relay people use, with invented names and lines. The scenes marked so in the film were recorded by one person in a Meta Quest 3. The foyer of the National Theatre in Prague as a 3D model: a long hall with a white and red star-patterned floor, gilded walls, chandeliers and painted ceiling panels, where a dozen figures in dresses, frock coats and top hats of the 1880s stand talking, each with a name plate above the head and two with speech bubbles.

Open the appContinue from it in GraspableRuns in a browser, on a Quest or a Vision Pro.

The request, word for word

This is the text that was sent to the agent to start the project. Nothing was edited for this page.

I found an incredible open project: an interactive 3D model of the National Theatre in Prague (Národní divadlo) by Lukáš Eršil. Its whole source is in reference/narodni-divadlo-3d (MIT licence; read its README.md first, then index.html and src/). It is a single page you orbit around with the mouse. I want to take it further: make it a place several people walk through together, on a screen and in a headset. This first step is the building itself, walking, and keeping everyone in step. Menus in the headset, avatars and chat come in later requests, so leave room for them but do not build them now.
Read the rest of the request (1,179 more words)1. Bring the whole model into this project - Everything Lukáš's model has must be here and work the same: the seven construction stages on the build clock (0 to 7) with their animations, Play through the whole construction, Exterior and X-ray with the ten layers (each on or off, all, none), the long section and the horizontal section with their two sliders, day and night, the fire of 1881 with the collapse and "Rebuild 1883", the eight viewpoints, the hotspots with their cards and pictures, Czech and English, and "About the model" with every source and licence he lists. - Reuse his code for the geometry, the registry and the data as it is wherever you can; do not redraw the theatre by hand. His page uses three.js r186 with the WebGPU renderer and node materials. This project uses React Three Fiber and has to run in WebXR on a standalone headset, where the WebGL renderer is the safe choice: keep one renderer for screen and headset, and port the materials and effects (night lighting, the X-ray ghost look, the section planes with the dark cut walls, the fire, the sky) to it so they look as close to his as you can get. Update three.js if his code needs a newer version, and check that the multi-user kit and the XR emulator still work afterwards. - Copy the pictures and textures the model needs from reference/narodni-divadlo-3d/assets into public/, except avatar.png: that is his portrait and signature, do not use it. - Remove the lounge, the table objects and the board of the starting template. The place is now the theatre and the streets around it. 2. Walking - Real size, 1:1. People start on Národní street in front of the main façade, facing it, a few steps apart from each other. - On a computer: W A S D to walk, arrow keys left and right to turn, arrow keys up and down to look up and down, Shift to walk faster, and dragging with the mouse to look around. No orbit camera. - In a headset: left thumbstick to walk in the direction you look, right thumbstick to turn in steps. - Physics: nobody walks through walls, columns, railings or closed parts of the building, and you stand on what is under you (street, steps, floors, the stage, the tiers). Use the physics engine that is already in the project, with colliders made from the model's own geometry, kept simple enough for a headset. Colliders must follow the model: a wall that is not built yet at the current stage, or is cut away by the section, or has collapsed in the fire, does not stop anyone. - One setting, "Walk through walls", off at the start. When a person turns it on, only they pass through everything and can also move up and down (E and Q on a computer, right thumbstick up and down in a headset), so they can reach the dome or the cellars. - The eight viewpoints become places you are taken to: you arrive standing at that spot looking the way his camera looks. In a headset this is an instant move with a short fade, never a camera flight. Viewpoints that are in mid-air (above the roofs, from the river) put the person there with "Walk through walls" on, and say so. - Add "Back to the street" which returns you to the start. 3. Together - Everyone in the room sees the same building: the build clock and Play, Exterior or X-ray and the layers, the section and its sliders, day or night, the fire and the rebuild are shared. When one person changes them, everyone sees it. Language, viewpoints, open cards, "Walk through walls" and where you stand are each person's own. - A person who joins later sees the current state at once. - Keep the template's avatars for now so people can see each other; they must be drawn where each person really stands in the theatre. - It must work alone, and without a connection to the relay. 4. Controls on a computer for now - On a flat screen, keep Lukáš's interface as an HTML layer over the canvas: his toolbar, side panel with viewpoints, section sliders and layers, the stage card, the timeline with Play, the fire button and card, hotspot markers and cards, About. Keep his visual style (black panels, white type, one yellow accent, Bebas Neue and DM Sans), but replace his masthead with one that reads "Národní divadlo" and under it "Model by Lukáš Eršil. Multi-user WebXR version made in Graspable." Add the "Walk through walls" switch and "Back to the street" to the toolbar. This HTML layer is wanted here, on purpose; it is hidden while a headset session runs. - Keep the "Enter VR" button. 5. It has to run well in a headset - His page draws about 830 meshes in about 1,000 draw calls and 1.4 million triangles, with a 4096 shadow map and a bloom pass. That is too much for a standalone headset. In a headset session aim for under 300 draw calls and under 700,000 triangles in view at 72 frames a second on a Quest 3: merge what never moves apart once a stage is finished, draw the far surroundings cheaply, do not draw the inside while you are outside and the other way round unless X-ray or a section needs it, no real-time shadow map in the headset (a baked or simple contact shadow is enough), no post-processing pass in the headset. - On a computer keep his quality: shadows and the glow at night. - The construction animation, X-ray, section and fire must still work after merging: it is fine to switch between a merged finished state and the separate animated pieces while something animates. - Show a small readout I can switch on with the P key: frames per second, draw calls and triangles. 6. Credit - "About the model" keeps all of Lukáš's sources and licences word for word (RÚIAN, IPR Praha, OpenStreetMap, the Wikimedia photographs with their CC BY-SA authors, the historic plans), and adds at the top: "The model is by Lukáš Eršil (github.com/lukasersil/narodni-divadlo-3d, MIT). We found it through his post on X (x.com/lukasersil/status/2107068853154992567), and Michal Takáč thought it would be fun to test how far Graspable can take it: this multi-user WebXR version was made in Graspable." in English, and the same in Czech. - Keep his LICENSE file in the project next to the code that comes from him, and a NOTICE.md at the root that lists what comes from his project and the licences of the textures and data. When you are done, check it yourself: the page loads without errors, you can walk from the street up to the façade and are stopped by it, each of the modes above works, and two browser windows in the same room see each other and the same building state. Tell me what you could not make work and what you could not check.

The requests that followed

Sent one after another, each after looking at what the last one built. Also unedited.

  1. Request 2: The theatre is here and the interiors look very close to Lukáš's. I went through it on a computer and found th…
    The theatre is here and the interiors look very close to Lukáš's. I went through it on a computer and found these. Fix them before we go on; reproduce each one first, in the same browser you check with. 1. The picture freezes - Open the page, choose the viewpoint "Foyer", then "Národní Street". The interface reacts (the readout changes, the hotspot markers move to where they would be on the street) but the 3D picture still shows the foyer. It stays frozen through "From the river", "Dome" and changes of stage, and only comes back when something like the fire or "From the stage" starts. - The same after the fire: go to "From the river", press "Fire of 1881", wait for the collapse, press "Rebuild 1883", wait eight seconds. The picture shows the finished building with black smoke standing over it and never changes again: choosing "Load-bearing walls" changes the readout to 172 draw calls but the picture still shows the finished building and the smoke, and "Back to the street" leaves the picture at the river. - I suspect the moment the glow pass switches off (leaving a room, the fire ending), but find the real cause. After the fix, the picture must always show the current state. Go through every change between glow and no glow: indoors to outdoors and back, night on and off, X-ray on and off, fire start, collapse, rebuild, and a stage change in the middle of each. - When the fire is over (rebuild finished, or any timeline action during the fire, as in his page) no flames or smoke are left. 2. Where people start - The start is too close to the façade and between two lamp posts: you see a lamp post and three doors, not the theatre. Start people on the far pavement of Národní, opposite the middle of the main façade, clear of lamp posts, trees and tram tracks, looking at the entrance with the head tilted up a little so the loggia and the trigas are in view. Several people start side by side along that pavement, not behind each other. - Trams must not run through people standing at the start. 3. Night - At night from the start a street lamp near the camera turns into a white blob that covers a third of the picture. Lamps should glow as in his page: bright globes with a soft halo, never a white-out. Check the night from the start, from the loggia and from the river. 4. One way into the headset - There are two buttons, "Enter XR" at the top and "Enter VR" in the masthead. Keep one, in the masthead, in the interface's style; it says "Enter VR" (or "Enter AR" is not offered: this is a place, not a room overlay). 5. Sections and X-ray in the headset - In the cut-away half of a section a person falls about 24 m. Nobody should fall because of a display mode: with a section on, the floors, stairs and ground stay solid everywhere, also where they are cut away and not drawn; only the walls that are cut away let people through. - X-ray and the section draw about 1.1 to 1.2 million triangles per eye in the headset. Bring both under the 700,000 target there: in X-ray and in a section do not draw the far surroundings, the trams and the trees in the headset, simplify what the ghost shell draws (it is a transparent hint, it does not need every baluster and window frame), and say what the numbers are afterwards. On a computer keep everything. 6. Phones and tablets - Many people will open this from a link on a phone. A touch screen needs walking too: a thumb stick in the lower left corner to walk, dragging anywhere else to look around, two buttons for up and down when "Walk through walls" is on. Keep Lukáš's phone layout for the interface (his style sheet already has one) and make sure the thumb stick and the timeline do not cover each other. On a phone use the headset's lighter drawing (merged pieces, no shadow map, no glow) so it runs. 7. Small things - Starting the page must not show the section as switched on unless it is. - "Play" on a computer: since nobody is flown around any more, a person standing at the façade sees little of the construction. When a person presses Play while standing on the street, offer one line "Watch from the river" that takes them to that viewpoint; do not move anyone without asking. Then check again as before, plus: every item above, two windows in one room, and the emulated headset. Give me the readout numbers on the street, in the auditorium, in X-ray and in a section, for the computer and for the emulated headset.
  2. Request 3: Now the menu inside the headset. Everything the HTML interface does on a computer must be possible from within…
    Now the menu inside the headset. Everything the HTML interface does on a computer must be possible from within XR, with the same wording and the same look. Build it with @react-three/uikit (add the package): real 2D panels in the 3D scene, in Lukáš's style (black panels, white type, one yellow accent for what is active, square corners; Bebas Neue for headings and DM Sans for text, loaded as uikit fonts and shipped with the project so it works offline). 1. Where it is - The menu is attached to the left hand: to the left controller, or with hand tracking to the left wrist, tilted towards the face like a watch you look at. It is operated with the right hand: the controller's ray and trigger, or with bare hands by touching it with the index finger (and a pinch from a distance). - It opens and closes with the left controller's menu or Y button, and with bare hands by turning the left palm towards the face. Closed, nothing is in view. - One button "Pin" leaves the open menu standing in the room where it is, so several people can gather around their own; "Unpin" brings it back to the hand. - Left-handed people can switch sides in the menu. - Readable: the smallest text is at least 1.5% of its distance from the eyes in height (at 45 cm that is about 7 mm letters). Check sizes by measuring, not by looking at an emulator screenshot. 2. What is in it (tabs across the top; the same actions as on the computer) - Timeline: the eight stages as buttons with their years and names, the current one marked; a slider for the build clock; Play and Pause; the stage card with its title and text below. - View: Exterior / X-ray; the ten layers with their colour dots, each on or off, All, None (only in X-ray); Section on or off with the two sliders and their values (long section in metres from the axis, horizontal section in metres above sea level); Day / Night. - Fire: "Fire of 1881" with its card (title, text, the engraving and its credit) and "Rebuild 1883". - Places: the eight viewpoints as buttons, "Back to the street", and the "Walk through walls" switch. - About: language CZ / EN, the About text with all sources, licences and the credit to Lukáš Eršil, scrollable. - Sliders must be easy to drag with a ray and with a fingertip, and show their value while dragged. 3. Hotspots in the scene - In a headset the numbered hotspots are small round markers standing in the building where they belong, always turned to the viewer, the same ones the current stage or X-ray layer shows on the computer. Pointing and pressing the trigger, or touching one, opens its card as a panel beside the marker facing the person: year or layer, title, text, the picture with its credit, and a close button. Only one card is open at a time. 4. The same for everyone and for each - Shared things changed in the menu (clock, Play, X-ray and layers, section, night, fire) change for everybody, exactly as on the computer. Each person's menu shows the current shared state, also when someone else changed it. 5. Do not lose frames - The menu and the cards must not cost more than a few draw calls when open and nothing when closed. Text that does not change is not redrawn every frame. Check it in the emulated headset: open the menu, press through every tab, drag both section sliders, start the fire and rebuild, open a hotspot card, switch the language. Tell me what you could not check without a real headset.
  3. Request 4: Now the people. Replace the template's avatars with full figures dressed as people were in Prague while the th…
    Now the people. Replace the template's avatars with full figures dressed as people were in Prague while the theatre was being built, 1868 to 1883, and let everyone choose who they are. 1. The figures - A whole person at real size, about 1.6 to 1.8 m: head, body, arms and legs, built from simple shapes in code (no downloaded models), stylised like the statues in Lukáš's model, with clean silhouettes and cloth colours of the time. Each figure is one or two draw calls and a few thousand triangles at most, so twenty people in the room cost little. - The head follows where the person looks. In a headset the hands follow the controllers or tracked hands and the arms follow the hands. On a computer the arms hang and swing while walking. Legs step while the person moves and stand still when they stand. The body turns smoothly towards the walking direction. - The name plate from the multi-user kit stays above the head. - You do not see your own head from the inside; looking down you see your own body and hands. 2. The wardrobe: at least eight outfits that are right for the years 1868 to 1883, each with a name in Czech and English - A gentleman in a black frock coat, waistcoat, cravat and top hat. - A burgher in a čamara, the braided Czech patriotic coat, with a soft round hat. - A lady in a bustle dress with a fitted bodice, gloves and a small hat with a ribbon. - A young woman in a day dress with an apron-front overskirt and a bonnet. - A stonemason from the building site: shirt with rolled sleeves, waistcoat, leather apron, flat cap. - A carpenter: linen shirt, braces, rolled trousers, a soft cap. - A Sokol member in the red shirt, the jacket worn over one shoulder and the round cap with a feather. - A painter of the "National Theatre generation": velvet jacket, loose bow tie, wide beret, with a brush in the breast pocket. - For every outfit the person can pick one of four cloth colours that suit it, and one of four skin tones. Get the cuts right: frock coats to the knee, the bustle at the back, 1870s hats. 3. Choosing, in a headset - A new tab "Wardrobe" in the hand menu: the outfits as a list with small pictures, the colours and skin tones as swatches, and a field for the name shown on the plate. - "Mirror" in that tab stands a tall mirror in a gilded frame about 1.5 m in front of the person, facing them: a real mirror that shows them in their outfit, moving as they move, and whoever stands beside them. It stays until closed, and only the person who opened it sees it. Draw the mirror at a modest resolution and only while it is open, so the headset keeps its frame rate. - There is also one fixed mirror for everyone in the foyer, on the wall between the doors, lit, with a plate that reads "Šatna · Wardrobe". 4. Choosing, on a computer - A "Wardrobe" button in the toolbar opens a panel in the same style: the same list, swatches and name field, and a live preview of the figure turning slowly, drawn in a small canvas of its own. Pressing M shows your own figure from the front for a moment in the 3D view (the camera steps back and returns). 5. For everyone - The choice travels with the person: others see the outfit, colour, skin tone and name at once, and a person who joins later sees everyone as they are. Keep what is sent small (a few numbers and the name), through presence, not through shared state. - The choice is remembered on this device for the next visit. - A newcomer gets a random outfit, so a room full of people looks like a street of 1880 and not like copies. Check with two browser windows: each sees the other's figure walk, turn its head, and change outfit; the mirror shows your own figure; the readout (P) with five figures in view stays inside the budget from before. Tell me what you could not check.
  4. Request 5: Last part: people should be able to write to each other, from a computer and from inside the headset.
    Last part: people should be able to write to each other, from a computer and from inside the headset. 1. The chat - Short text messages for everyone in the room. Each shows the sender's name in their colour, the text, and the time. The last 50 are kept for the room, so a person who joins sees what was said before; older ones are dropped. Messages are at most 240 characters, plain text only: nothing a person types is ever treated as markup or a link. - When a message arrives, a speech bubble with its text stands above the sender's head for six seconds, turned to the viewer, readable from ten metres, and then fades. So you see who is speaking in the street. - People can also be seen typing: three dots above the head while they write. 2. On a computer - A chat panel in the lower left corner in the same style as the rest: the message list, and a field you type in. Enter sends; T or Enter puts the cursor into the field; Escape leaves it. While the cursor is in the field, W A S D and the other keys type letters and do not move the person. - The panel can be folded to a small tab that shows the number of unread messages. 3. In a headset - A new tab "Chat" in the hand menu: the message list, scrollable, and below it a keyboard built in the same uikit style, large enough to type on with two controller rays or with two index fingers: Czech and English letters (a key switches between the QWERTZ layout with the Czech accented letters and QWERTY), digits, space, backspace, shift, and Send. Keys answer with a short pulse on the controller and a quiet click. - Above the keyboard a row of ready phrases in the menu's language that send with one press: "Hello!", "Look at this", "Follow me", "Meet me in the foyer", "To the stage!", "Beautiful, isn't it?", "Thank you". - Where the browser offers speech recognition, a microphone key writes what the person says into the field for them to check and send; hide the key where it is not offered. Nothing is recorded or sent anywhere by us. - With the menu closed, a new message shows for a few seconds as a small line near the left hand, with the sender's name. 4. Good manners - A person can mute another from the list of people in the room (a new small list in the Chat tab and in the computer panel: name, outfit, and "Mute"). Muted people's messages and bubbles are not shown to the person who muted them. - At most one message a second per person. 5. Everything together - Go through the whole thing once more with two browser windows, one of them in the emulated headset: walking and collisions, the timeline and Play, X-ray and layers, both sections, night, the fire and the rebuild, every viewpoint, hotspot cards, language, the wardrobe and mirrors, and chat in both directions. Fix what does not hold. Then give me the readout numbers (frames per second, draw calls, triangles) on the street, in the auditorium and in X-ray, on the computer and in the emulated headset, and a list of what still needs a real headset to be sure.
  5. Request 6: It all works together. A last pass on how it looks before I show it to people.
    It all works together. A last pass on how it looks before I show it to people. 1. People at night - With Night on, the figures are almost black: you see the name plate and the speech bubble but not the person or the outfit. People standing near the street lamps and the lit façade should be lit by them, warm and soft, so a top hat, an apron or a red Sokol shirt can still be told apart at ten metres. Do it without real lights per lamp (the headset cannot afford them): a night tint and a little light of their own on the figures is enough. Check from the start and inside the foyer and auditorium, by day and by night. 2. My own arms in the headset - Looking down in the headset, my arms are two long straight tubes from the shoulders to the controllers, like stilts. Arms have an elbow: bend them (upper arm and forearm of fixed, natural lengths, the elbow down and slightly out) so the hand reaches the controller the way an arm does. When the controller is further away than the arm is long, the arm stretches out straight and stops there; it never gets longer. The same for how others see a headset wearer. 3. The menu's tabs - With seven tabs the labels are too small and crowded. Put the tabs in two rows, or give each a simple pictogram above a short label, so each is as easy to hit and read as the buttons below them. Keep the smallest text at the size rule from before. - With the menu on the hand, the Chat keyboard hangs so low that its lower rows are out of view. When the Chat tab is open and the menu is not pinned, place the list and the keys so both are in view at a natural arm position, or pin the menu automatically in front of the person while they type and put it back afterwards. Say which you chose. 4. Small things - The page asks for favicon.ico and gets a 404: add a small icon (a yellow square with the dome's outline in black is enough). - On a computer at the start, other people who stand closer to the theatre are cut off by the timeline at the bottom of the screen. Start with the head tilted up a little less, so both the loggia and the people on the street are in view. Check each in the browser and the emulated headset, re-record the headset tests that change, and give me the readout numbers on the street by day and by night with five people in view.
  6. Request 7: I tried it in a Meta Quest 3 and it works very well. One thing is missing before I show it to people: teleport…
    I tried it in a Meta Quest 3 and it works very well. One thing is missing before I show it to people: teleporting. Walking with the thumbstick makes some people queasy, so they need to be able to point at a spot and be there. 1. Teleport with controllers - Push the right thumbstick forward and hold: an arc leaves the right controller and lands on what is under it, with a ring where you would stand. Release the stick and you are there, behind the same short fade as the viewpoints. While the arc is out, turning the stick left or right before releasing turns the ring's arrow, and you arrive facing that way. - The right stick keeps its other jobs: left and right alone still turn in steps, and with "Walk through walls" on, up and down still move you up and down (so with it on, teleport is on the left controller's trigger while pointing, or say what you chose). - Left-handed people who switched the menu's side get teleport on the other hand. 2. Teleport with bare hands - Point with the right hand, palm up, index finger out: the same arc and ring appear. Pinch thumb and index finger to go there. It must not fire while the hand is busy with the menu, a slider, the keyboard or a hotspot. 3. Where you may land - Only on what a person can stand on: the street, pavements, steps, floors, the stage, the tiers and balconies, the loggia. Never on a wall, a roof slope, a statue, the river, a tram or another person. A spot you may not land on shows the ring in red and nothing happens on release. - The same rules as walking: what is not built yet at the current stage, or has collapsed in the fire, cannot be landed on; with a section on, floors stay floors. - At most 12 metres at a time, and never through a closed wall: the arc stops at the first thing it hits. Through an open arch or a door opening is fine. - With "Walk through walls" on, you may land anywhere the arc reaches, also in mid-air at its end. 4. For everyone else - Others see you disappear and arrive, not slide: your figure fades out for a moment where you were and in where you land. 5. On a computer and a phone - Double-click (or double-tap) on the ground does the same: you are taken there, facing the way you were looking. A place you may not land on does nothing. 6. Menu and help - The Places tab gets one line that says how to teleport with what is in the person's hands right now (controllers or bare hands), in Czech and English, and a switch "Teleport only" that turns off thumbstick walking for people who never want it. - The hint shown at the start on a computer mentions the double-click. Check it in the emulated headset with controllers and with hands: land on the street, on the loggia steps, inside the foyer through the open arches, on a tier of the auditorium; try a wall, the river and a roof and see the red ring; turn the arrow before landing. Check that a second window sees the arrival. Re-record the headset tests that change and add one for a teleport. Give me the readout with the arc showing, and tell me what still needs the real headset.

How it went

Runs
7 runs: the request above, then 6 follow-up requests. A run ends only when the project builds and loads in a real browser without errors.
Started from
The Multi-user template: A room several people open at once: everyone sees each other, picks up the same objects and presses the same board.
Notes and credits
The model of the theatre is by Lukáš Eršil (github.com/lukasersil/narodni-divadlo-3d, MIT licence). We found it through his post on X (x.com/lukasersil/status/2107068853154992567), and Michal Takáč thought it would be fun to test how far Graspable can take it. His geometry, data and texts are used as they are; walking, the shared state, the figures and their wardrobe, the menu in the headset, chat and teleporting were made in Graspable in seven requests, all shown below. His sources and their licences (RÚIAN, IPR Praha, OpenStreetMap, photographs from Wikimedia Commons under CC BY-SA, the historic plans) are listed in the app under About the model. Tried on a Meta Quest 3 after the sixth request; teleporting came with the seventh and has been checked in the emulated headset only. A room holds sixteen people. AI: Claude Code with Claude Opus 5.5.

Build your own

Graspable is a desktop app. Describe the scene you want, and the agent builds it as a real project on your computer and checks that it runs. It is free with your own AI account.

Download GraspableYour first project

More examples

See all examples