Wie kommt ein 3D-Modell in den Browser?
Von der Matrix bis zum Pixel, von WebGL bis glTF – Schritt für Schritt, zum Anfassen und immer live nachgerechnet. Und am Ende steht eine echte Ferienwohnung drehbar im Browser.
Ein Dreieck auf dem Weg zum Pixel: Vertex-Shader, Clip-Space, Division durch w, Rasterisierung, Fragment-Shader, Z-Buffer – 11 Schritte zum Vor- und Zurückspringen.
Model-, View- und Projektionsmatrix live berechnet, Perspektive gegen orthografisch, Brennweite ↔ Bildwinkel an den Kameras der Ferienwohnung.
Lambert, Phong und PBR Pixel für Pixel, UV-Koordinaten und Texturfilter, Szenengraph, Z-Buffer, Anti-Aliasing, Draw Calls.
Eine eigene Szene in rohem WebGL: Shader, Puffer, Uniforms. Regler für Kamera, Licht, Material, Drahtgitter, Normalen, Tiefentest, Culling, MSAA.
Scene, Camera, Renderer, Materialien, Lichter, Szenengraph, Loader, Controls, Raycaster, dispose, InstancedMesh – jeder Code läuft live daneben.
WebGL 1/2, WebGPU, three.js, Babylon.js und <model-viewer> im Vergleich – mit Live-Test deines Browsers und einem echten WebGPU-Dreieck.
Das „JPEG für 3D“ Byte für Byte: Header, JSON-Chunk, BIN-Chunk, Accessoren und Materialien – am echten Modell der Ferienwohnung.
Das Premium Patio Apartment als three.js-Szene: gespeicherte Kamerapunkte, Drahtgitter, Normalen, Bounding-Boxen, Explosionsdarstellung, Statistik.
🗺️ Der Weg eines Modells
Blender (.blend) glTF-Export (Khronos Blender I/O) Browser
+----------------+ +---------------------------+ +------------------------------------------+
| Wände, Möbel, | | apartment.glb | fetch | GLTFLoader --> Scene --> WebGLRenderer |
| Materialien, | -----> | JSON-Chunk 433,1 kB | ------> | Vertex-Shader --> Rasterisierung |
| Kameras | | BIN-Chunk 733,9 kB | | --> Fragment-Shader --> Z-Buffer |
+----------------+ +---------------------------+ +------------------------------------------+
712 Meshes, 16.076 Dreiecke three.js r186, 712 Draw Calls/BildDas Modell ist öffentlich und stammt von der 3D-Ansicht der Ferienwohnung „Premium Patio Apartment“. Alle Seiten dieser App laufen ohne externe Ressourcen: three.js ist gebündelt, das Modell wird vom eigenen Server geliefert.