115 lines
5.5 KiB
Plaintext
115 lines
5.5 KiB
Plaintext
---
|
|
title: "Plantarium"
|
|
date: 2022-08-31T20:46:26+02:00
|
|
cover: ./images/plantarium.png
|
|
featured: true
|
|
links: [["website", "https://plant.max-richter.dev"], ["git", "https://github.com/jim-fx/plantarium"]]
|
|
tags: ["Web", "3D", "Svelte", "Node-Systeme"]
|
|
icon: /projects/plantarium/favicon.svg
|
|
draft: false
|
|
toc: true
|
|
---
|
|
|
|
Plantarium ist die Schnittmenge zwischen zwei Dingen die ich sehr faszinierend finde, Pflanzen und 3D Modellierung.
|
|
Es ist eine WebApp die es Nutzern ermöglicht Pflanzen zu erstellen und zu exportieren.
|
|
Die User legen dabei über ein Node-System fest wie die Pflanze aussieht und Plantarium generiert daraus ein 3D Modell.
|
|
|
|
<Image src={plantarium_screenshot} alt="Plantarium Screenshot"/>
|
|
|
|
# Die Anfänge und Herausforderungen
|
|
|
|
Der erste Prototyp war innerhalb von zwei Wochen intensiver Arbeit fertig und sah ungefähr so aus:
|
|
|
|
import ImageSlider from "@components/ImageSlider.svelte"
|
|
import Leaves from "./_components/Leaves.svelte"
|
|
import Image from "@components/Image.astro"
|
|
import page01_0 from "./images/page01-0.jpg"
|
|
import page01_1 from "./images/page01-1.jpg"
|
|
import page01_2 from "./images/page01-2.jpg"
|
|
import page01_3 from "./images/page01-3.jpg"
|
|
import page01_5 from "./images/page01-5.jpg"
|
|
import page01_6 from "./images/page01-6.jpg"
|
|
import screenshot_geometry_nodes from "./images/screenshot-geometry-nodes.jpg"
|
|
import screenshot_houdini from "./images/screenshot-houdini.jpg"
|
|
import screenshot_unreal from "./images/screenshot-unreal.jpg"
|
|
import screenshot_davinci from "./images/screenshot-davinci.jpg"
|
|
import plantarium_screenshot from "./images/plantarium-screenshot.png"
|
|
import Plantarium from "./images/plantarium.png"
|
|
import ImageGallery from "@components/ImageGallery.svelte"
|
|
|
|
<ImageGallery client:load/>
|
|
|
|
<Leaves client:load/>
|
|
|
|
|
|
<ImageSlider title="Erster Prototyp" client:load>
|
|
<Image src={page01_0} alt="Stem Page"/>
|
|
<Image src={page01_1} alt="Branches page"/>
|
|
<Image src={page01_2} alt="Leaves page"/>
|
|
<Image src={page01_3} alt="Import/Export page"/>
|
|
<Image src={page01_5} alt="Design of UI Components"/>
|
|
<Image src={page01_6} alt="Data flow inside app"/>
|
|
</ImageSlider>
|
|
|
|
Schon gar nicht schlecht, aber wie das mit Prototypen so ist gab es noch einiges zu verbessern. Also eine Kurze Historie der größten Änderungen bis heute:
|
|
|
|
# Refactors
|
|
|
|
## Svelte Rewrite
|
|
|
|
Der erste Prototyp war handgeschriebenes ungetestes Javascript. Das kann man sich etwa so vorstellen als ob man ein Auto nur aus Zahnstochern und Ducttape bauen muss.
|
|
Man kriegt es eventuell hin, ist vielleicht sogar ganz begeistert von seiner Kreation, wenn man sich das ganze aber dann ne Woche später nochmal anschaut oder schlimmer noch Verbesserungen daran machen will wird es recht schnell schwierig. Das hieß es war Zeit für die Lieblingsbeschäftigung eines jeden Web Entwicklers; herausfinden was gerade der heiße Scheiß in der Welt der Webentwicklung ist. Sobald man sich dann für eine der tausenden möglichen Technologien entschieden hat, macht man diese zu seiner persönlichen Religion und verteidigt sie mit religiösem Fanatismus. Ganz einfach, oder?
|
|
|
|
Also hab ich mich für das einfachste, schnellste und rundherum beste Framework entschieden: ["Svelte"](https://svelte.dev).
|
|
|
|
Im Grunde helfen einem Frameworks die Daten einer App, also zum Beispiel Nutzernamen, Loginstatus usw. in HTML und CSS zu verwandeln, was der Browser dann anzeigt.
|
|
|
|
|
|
### Node-Systeme
|
|
|
|
Das Interface war in 4 verschiedene Stufen aufgeteilt, "Stamm", "Äste","Blätter" und "Import/Export".
|
|
Die Idee war gar nicht schlecht da jeder Teil an der Pflanze eine eigene Ansicht hatte und man recht schnell die richtigen Einstellungen fand, wenn man etwas ändern wollte.
|
|
Leider werden dadurch die Nutzer extrem eingeschränkt und man kann nur Pflanzen bauen die dem Schema Stam->Ast->Blatt entsprechen. Was ist aber wenn ich mehrere Ebenen von Ästen haben will oder unterschiedliche Blätter an Stamm und Ast? Das war mit dem Model nicht möglich also wie man so schön sagt:
|
|
"Back to the drawing board."
|
|
Im Hinterkopf hatte ich eigentlich schon die Lösung für das Problem, war mir nur nicht ganz sicher, ob ich die nötigen Skills hatte um es zu implementieren.
|
|
|
|
Die Lösung sind Node-Systeme! Hmm, was ist das denn?
|
|
|
|
<div class="center my-4">
|
|
|
|
</div>
|
|
|
|
Node-Systeme bestehen aus Nodes und Connections. Nodes haben inputs und outputs und man kann diese miteinander verbinden.
|
|
|
|
In der Beispielgrafik haben wir zwei `input-color` nodes die jeweils eine Farbe produzieren und eine `mix-color` node die farben miteinander vermixt.
|
|
|
|
Das coole ist das man dieses System sehr generisch gestalten kann und zum beispiel eine `generate-stem`, `generate-branches` oder eine `add-leaves` node programmieren kann. Aufgrund der
|
|
|
|
<ImageSlider title="Beispiele von Node Systemen" client:load>
|
|
<Image src={screenshot_geometry_nodes} alt="Blenders uses nodes to create geometry"/>
|
|
<Image src={screenshot_houdini} alt="Houdini uses nodes for vfx/simulations"/>
|
|
<Image src={screenshot_unreal} alt="Unreal uses nodes for game logic"/>
|
|
<Image src={screenshot_davinci} alt="Davinvi uses nodes for vfx"/>
|
|
</ImageSlider>
|
|
|
|
### Svelte-Kit Rewrite
|
|
|
|
# Architektur
|
|
|
|
Nach einigen unterschiedlichen Versuchen habe ich mich für eine eventbasierte Architektur entschieden.
|
|
Irgendwie passt das sehr gut zu Node-Systemen da die einzelnen Komponenten über Events miteinander kommunizieren können.
|
|
|
|
<div class="center my-4">
|
|
|
|
</div>
|
|
|
|
# Design
|
|
|
|
# Zukunft
|
|
|
|
# Abschluss
|
|
|
|
Aktuell sieht die Architectur in etwa so aus:
|
|
|
|
|