Schlagwort: voxels
Teil 1: Vite, Babylon.js und ein Dichtefeld
Richte 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.
Profi20 Min.
Teil 1: Blöcke auf dem Terrain
Setz Blöcke auf das glatte Voxel-Terrain: ein Gitter aus halbmetergroßen Zellen, Blöcke in drei Größen, die ganze Zellen füllen, ein Mesh pro Region ohne die verdeckten Seiten, und ein Werkzeug, das Blöcke dort setzt und abbaut, wo du hinschaust.
Profi40 Min.
Teil 2: Marching Cubes mit einer erzeugten Tabelle
Mach 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.
Profi35 Min.
Teil 2: Bemalte Blöcke und ihr Licht
Mal sechs Materialien in Code, von Ziegeln bis Kupfer, und leg sie nach ihrem Ort in der Welt auf die Blöcke, damit Wände als eine Fläche wirken. Eine Leiste zeigt die Materialien, und Blöcke in Höhlen werden dunkel, aus den Lichtgittern, die die Worker ohnehin ausrechnen.
Profi40 Min.
Teil 3: Surface Nets
Ergä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.
Profi25 Min.
Teil 3: Auf Blöcken gehen
Mach die Blöcke für die Spielfigur fest: der vorzeichenbehaftete Abstand zu einer Box, die nächste Oberfläche von Terrain und Blöcken zusammen, ein Weg aus einer Wand, der ins Freie führt, und keine Blöcke dort, wo die Spielfigur steht.
Profi25 Min.
Teil 4: Terrain aus Rauschen: Hügel, Überhänge und Höhlen
Erzeuge 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.
Profi30 Min.
Teil 4: Ein Meißel für runde Kanten
Runde Blockkanten mit einem Meißel: zwölf Bits pro Block, eine Form aus acht Oktanten, je eine Box, ein Viertelzylinder, zwei gekreuzte Zylinder oder ein Kugelachtel, ihr vorzeichenbehafteter Abstand fürs Gehen, und ein Werkzeug, das die anvisierte Kante, Ecke oder Seite aufleuchten lässt.
Profi45 Min.
Teil 5: Chunks und Nähte
Zerleg 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.
Profi20 Min.
Teil 5: Schrägen und Dächer
Gib dem Meißel ein zweites Profil: eine Kante, flach von Seite zu Seite abgeschnitten. Ein Würfel, von einer Ebene pro Kante beschnitten, ergibt Keile, Firste, Pyramiden und Walmecken; die Spielfigur geht sie wie Rampen hinauf, und Schiefer liegt auf einem Dach in waagrechten Reihen.
Profi40 Min.
Teil 6: Meshing in Web Workern
Verlege 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.
Profi20 Min.
Teil 6: Was einen Block hält
Entscheide, welche Blöcke stehen: Ein Block hält, solange eine Kette sich an Seiten oder Kanten berührender Blöcke zu einem führt, den der Boden hält. Durchsuche Gruppen den untersten Block zuerst, zeig in Orange, was mit dem anvisierten Block fiele, und bau eine Szene zum Ausprobieren.
Profi35 Min.
Teil 7: Eine endlose Welt streamen
Lade 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.
Profi30 Min.
Teil 7: Fallende Stücke
Lass lose Gruppen als starre Körper fallen, ohne Physik-Engine: Masse, Mitte und Trägheit aus den Blöcken, ein Quaternion, das sich dreht, Kontakte an den Ecken der Zellen gegen Terrain und Blöcke, Stöße, die sie draußen halten, Reibung, die sie anhalten lässt, und Ruhe, wenn sie still liegen.
Profi50 Min.
Teil 8: Triplanare Texturen
Gib 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.
Profi35 Min.
Teil 8: Schutt
Mach aus ruhenden Stücken Schutt: fest für die Spielfigur und für die Stücke, die noch fallen, in jedem Winkel, nicht zum Bebauen, Block für Block abzubauen, in Stücke zerfallend, wo er sich teilt, und wieder fallend, wenn verschwindet, worauf er liegt.
Profi35 Min.
Teil 9: Graben und Bauen
Grab 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.
Profi40 Min.
Teil 9: Kettenreaktionen
Lass fallende Stücke die Blöcke zerbrechen, die sie treffen: Merk dir, welchen Block ein Kontakt berührt und wie schnell, mach aus Tempo und Gewicht Schaden, gib jedem Material eine Festigkeit, und lass den Halt den Rest tun, damit ein zerbrochener Block ein ganzes Gebäude einstürzen lassen kann.
Profi25 Min.
Teil 10: Auf dem Terrain gehen
Geh 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.
Profi30 Min.
Teil 10: Staub und Klang
Gib dem Einsturz Gewicht: Staubwolken in der Farbe des Materials, wo Stücke landen und Blöcke zerbrechen, und dumpfe Schläge, Krachen und Klopfen, mit der Web Audio API aus Rauschen und einem fallenden Ton gemacht, lauter und tiefer bei schwereren, härteren Treffern, ohne Sounddateien.
Profi30 Min.
Teil 11: Höhlenlicht
Lass 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.
Profi35 Min.
Teil 12: Fernsicht bis zum Horizont
Zeig 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.
Profi30 Min.