A WebGL & WebGPU project using VueJS and ThreeJS!
Lagrange is a browser application to help you create your own planets, using procedural noise as a foundation to build upon.
🪐✨ Check out the app here! ✨🪐
(note: this is something I am working on during my free time, which means that update frequency will vary!)
- ⭐ Introduces WebGPU support! Renderer selection is now available in the app settings!
- ⭐ Full rewrite of the internal app structure to help future development efforts!
IMPORTANT: to properly run the application, WebGL 2.0 browser support is required!
Additionally, WebGPU browser support is required to use the WebGPU rendering engine.
The following websites will give you more information on your WebGL & WebGPU capabilites: WebGL Report, WebGPU Report
Please check both of them thoroughly before submitting an issue, thanks! <3
For more details on the commands themselves, check the package.json file.
Clone the repository then use the following commands:
- Install dependencies:
npm install - Run the application locally:
npm run dev/npm run dev-host
Lagrange runs on port 5173 by default; dev-host exposes the application to the local network.
Building is done with the following command:
npm run build
Vite copies the output to the dist folder, creating it first if need be.
- 📋 Create, import & export your planets!
- 🔎 See previews of your creations!
- 🪐 Check basic information for each planet, such as its radius, axial tilt & biome composition!
- ☀️ Lighting parameters! (sunlight, ambient light, color)
- 🌍 Planet & Rendering parameters! (transform, water level, PBR settings)
- 🗺️ Surface parameters! (bump mapping, warping, displacement, noise settings, color ramp)
- ⛰️ Biome parameters! (temperature/humidity mapping, per-biome min/max values & color)
- ☁️ Clouds parameters! (transform, warping, noise settings, color, opacity ramp)
- 🌈 Atmosphere parameters! (height, density, color mixing modes)
- 🪐 Ring System parameters! (number of rings, per-ring radii & color ramps)
- Dark side "night lights"!
- Cracks & Craters!
- Asteroid belts!
- Planet animations!
- Galactic Map, to organize them around stars!
This project is heavily inspired by the awesome projects below:
- PlanetMaker Chrome Experiment (2013, Kevin M. Gill)
- NASA's Eye on Exoplanets (Unknown date, NASA)
Special thanks to the awesome people below, without whom this project would likely not exist:
- (pre-0.5) Three.js extensions: Faraz Shaikh (CustomShaderMaterial)
- Main GLSL code snippets: Iñigo Quilez (Voronoi + fBm), GLtracy (atmosphere), Anderson Mancini (lens flare)
- Miscellaneous GLSL code: Daniel Greenheck (bump-mapping)
The "Lagrange" logo, including every update variant, is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license (CC BY-NC-SA 4.0 International)
Original assets and source code from this project are provided under the "I'm So Tired" Software License 1.0 - No-Resale version.
Please consult the license file for full information.
Content from other parties is provided under their respective license, and attribution is given either at the top of the aforementioned content, or in a separate license file.
If you'd like to contribute code, feel free to submit your PRs!
This project makes heavy use of the "Gitflow" branching model. To ensure proper branching, please make sure to respect the following steps:
- Fork the project
- Create a branch from
develop - Request your branch to be merged into
develop