Lindenmayer-System based object generation with WebGL
It even (kinda) runs on an Apple Watch :)
On smartphones:
3D L-Systems with Three.js
We used Three.js to create trees and other plant-like structures using Lindenmayer Systems. A code of rulesets can be used and iterated upon to create all kinds of "growing" structures.
Web XR supported AR version: https://bassadin.github.io/Three.LS/ar.html
on IOS it is only supported via: https://apps.apple.com/de/app/webxr-viewer/id1295998056
on Android it works via Chrome Browser
Online auto-deploy version available here: https://bassadin.github.io/Three.LS
Clone the project and install dependencies:
Install node version 14.18.1 here: https://nodejs.org/en/download/releases/
No global dependency is needed other than node and npm. Local dependencies are installed into the repository via package.json. The project works operating system independent. However, the AR application on IOS only works as described above.
npm i / yarn
npm run start / yarn start-
Install mkcert: https://github.com/FiloSottile/mkcert
-
Obtain a local certificate:
mkcert -install && mkcert -key-file snowpack.key -cert-file snowpack.crt localhost -
Run
npm run start-secure -
An online demo is also available at https://bassadin.github.io/Three.LS/ar.html for supported devices