Serie
Glattes Voxel-Terrain in Babylon.js
Bau in TypeScript mit Babylon.js ein endloses Voxel-Terrain: glatte Oberflächen aus Marching Cubes und Surface Nets, Hügel, Überhänge und Höhlen aus Rauschen, Chunks, in Web Workern vernetzt, Texturen, Graben, Gehen, Höhlenlicht und eine Sicht bis zum Horizont.
Zwölf Teile, von einer Zahl an jedem Punkt eines Gitters bis zu einer Welt, durch die du dich graben kannst. Du beschreibst Formen als Dichte, machst daraus mit zwei verschiedenen Algorithmen glatte Meshes, Marching Cubes mit einer Falltabelle, die der Code selbst ausrechnet, und Surface Nets, und schaltest in jeder Demo zwischen beiden um. Dann wächst das Terrain: Hügel, Berge, Überhänge und Höhlen aus Rauschen, zerlegt in Chunks, die ohne Naht aneinanderstoßen, in Web Workern gebaut und rund um die Kamera gestreamt. Es bekommt Texturen, von drei Seiten projiziert, ein Werkzeug zum Graben und Bauen, eine Spielfigur, die darauf geht, Höhlen, die innen dunkel werden, und eine Sicht bis zum Horizont. Jeder Teil endet mit einer Demo, die du direkt auf der Seite spielen kannst, gebaut aus genau dem Code, den er zeigt.
Questreihe
- Teil 1: Vite, Babylon.js und ein DichtefeldRichte ein Vite-Projekt mit TypeScript und Babylon.js 9 ein und beschreibe eine Form so, wie es glattes Voxel-Terrain tut: als Zahl an jedem Punkt eines Gitters, über 0 innen und unter 0 außen.20 Min.
- Teil 2: Marching Cubes mit einer erzeugten TabelleMach aus dem Dichtegitter mit Marching Cubes ein glattes Mesh, mit einer Falltabelle, die der Code aus dem Würfel selbst ausrechnet, sodass benachbarte Würfel immer schließen.35 Min.
- Teil 3: Surface NetsErgänze einen zweiten Mesher, der keine Tabelle braucht: ein Vertex in jeder Zelle, durch die die Oberfläche läuft, und ein Viereck über jeder Kante, an der die Dichte ihr Vorzeichen wechselt. Die Taste M schaltet zwischen beiden um.25 Min.
- Teil 4: Terrain aus Rauschen: Hügel, Überhänge und HöhlenErzeuge ein endloses Terrain aus Simplex-Rauschen mit Seed: Hügel und Bergkämme als Höhe, dann Überhänge und Tunnelhöhlen, die nur eine Dichte fassen kann. Ein Block davon, ausgeschnitten wie ein Stück Kuchen, zeigt das Innere.30 Min.
- Teil 5: Chunks und NähteZerleg die Welt in Chunks von 32 m, vernetze jeden für sich und lass sie ohne Naht aneinanderstoßen, für beide Mesher, indem jeder Chunk an seinen Rändern dieselben Werte bekommt.20 Min.
- Teil 6: Meshing in Web WorkernVerlege Abtasten und Vernetzen von der Seite in ein paar Web Worker, gib die fertigen Arrays ohne Kopieren zurück und halte die Seite bedienbar, während die Chunks gebaut werden.20 Min.
- Teil 7: Eine endlose Welt streamenLade die Chunks in einem Umkreis um die Kamera, die nächsten zuerst, lass die zurückgelassenen fallen, überspring den Himmel über dem höchsten Boden und verteil die Arbeit, Meshes anzuzeigen, über die Frames.30 Min.
- Teil 8: Triplanare TexturenGib dem Terrain Gras, Erde, Fels und Schnee: Texturen, im Code in ein Textur-Array gemalt, in einem GLSL-Shader von drei Seiten projiziert und nach Hangneigung, Höhe und Tiefe unter dem Boden gewählt.35 Min.
- Teil 9: Graben und BauenGrab Kugeln aus dem Boden und bau sie auf: Edits ändern die Dichtewerte, werden nur dort gehalten, wo sie passiert sind, erreichen die Worker als Operationen und bauen die Chunks, die sie berühren, alle im selben Frame neu.40 Min.
- Teil 10: Auf dem Terrain gehenGeh auf dem Terrain ohne Physik-Engine: Die Spielfigur sind zwei Kugeln, die das Dichtefeld selbst fragen, wie weit der Boden ist, auf Hängen stehen, ohne zu rutschen, an Wänden entlanggleiten, springen und in die Löcher fallen, die du gräbst.30 Min.
- Teil 11: HöhlenlichtLass das Licht des Himmels nur so weit in eine Höhle, wie es durch die Luft kommt: ein Gitter aus Lichtknoten, von offenem Himmel aus in Breitensuche gefüllt, an jedem Vertex gelesen, in benachbarten Chunks gleich, und eine Lampe für die Dunkelheit.35 Min.
- Teil 12: Fernsicht bis zum HorizontZeig den Boden jenseits der Chunks bis 4,5 km weit, als billiges Höhenfeld aus Ringen um die Kamera, die mit der Entfernung breiter werden, gebaut in einem eigenen Worker und mit dem Voxel-Terrain über eine Überlappung verbunden, die der Shader versteckt.30 Min.