This is a collection of cool 3D stuff made 100% in Elm.
Get inspired to play with these tools, build stuff and contribute to public libraries!
If you think that something is missing, you spotted a mistake or you have some feedback, send me a message or — even better — open an issue or send a pull request in this repository.
Balls and Blocks
Cloth simulation built using many particle bodies and distance constraints between adjacent points.
A three dimensional representation of Tokyo rendered in SVG, used for the Elm Japan Conference website
3D Vector Animations
Implementing 3D vector visualizations in Elm, rendered as pure SVGs
This shows how hinge constrains can be used to assemble a car. Use the arrow keys to steer and speed!
This demo is used to test performance. It drops 5×5×5 boxes. Try changing
boxesPerDimension to drop even more!
Slimy Broccoli with Perlin Noise
This demo drops random bodies. It also shows how to make a compound body out of multiple shapes.
Physically simulated dice roller!
This example demonstrates how to load a mesh from a file. It can also be used to test the parser.
This example demonstrates how to extract multiple meshes with shadows from an OBJ file and render with elm-3d-scene.
Quicklook Shelf Configurator
Table and Chairs 🪑🪑
3D Game of Life
Copter 3D 🚁
Bumping Car 🚗
Lesson 10 — First person perspective
Lesson 14 — Teapot
Lesson 15 — Earth
Generates a planet with randomized surface.
Live MIDI dancer
Exposure and Tone Mapping
Oslo Elm Day
A demo similar to Oslo Elm Day 2019, but implemented in Elm instead of Three.js.
Renders the shader code from https://www.shadertoy.com/view/Ms2SD1 using Elm WebGL.
- Quicklook RAL Configurator by Thomas Kumlehn. Demo⬈ Code⬈
- Julia Set by Marco Sehrer. Demo⬈ Code⬈ Post⬈
- Textured Sphere by Ian Mackenzie. Demo⬈ Code⬈ Ellie⬈
- Landscape (terrain) by Mika Jauhonen. Demo⬈ Code⬈
- Animated Light by Ian Mackenzie. Demo⬈ Code⬈
- Tangram by Andrey Kuzmin. Elm tangram pieces in 3D, composing different logos of Elm-related projects. Demo⬈ Code⬈
- Drag by Andrey Kuzmin. Demo⬈ Code⬈
- Countdown by Patrik Sandahl. Demo⬈ Code⬈
- Dream Buggy by Conrad Parker. Demo⬈ Code⬈
- Shadow Volume by Andrey Kuzmin. Real-time shadows using the shadow volume technique. Demo⬈ Code⬈ Post⬈
- First Person by Jeff Cole. Demo⬈ Code⬈
- Sun Path by Karl Dray. Demo⬈ Code⬈
- Glelm by Ben Postlethwaite. Demo⬈ Code⬈
- First Person 3D Navigation in Elm by Evan Czaplicki. Demo⬈ Code⬈
A 3D Rendering Engine for Elm
- Author: Ian Mackenzie
Delightful WebGL in Elm
- Author: John P Mayer, Jr
Now you’re thinking in functions
- Author: Ian Mackenzie
Rendering text with WebGL
- Author: Andrey Kuzmin
Evan Czaplicki, Andrey Kuzmin — API Design Sessions — Part 2
- Author: Evan Czaplicki
Evan Czaplicki, Andrey Kuzmin — API Design Sessions — Part 1
- Author: Evan Czaplicki
ElmLive — Codevember Day 10 (2016) — Part 2 — Slimy broccoli with perlin noise
- Author: Aaron VonderHaar
- Clicking a 3D mesh in elm-webgl⬈ by Michel van der Hulst.
- A low poly water shader in Elm WebGL⬈ by Michel van der Hulst.
- 3D Physics Engine Pt. 4⬈ by Andrey Kuzmin.
- 3D Physics Engine Pt. 3⬈ by Andrey Kuzmin.
- 3D Physics Engine Pt. 2⬈ by Andrey Kuzmin.
- 3D Physics Engine Pt. 1⬈ by Andrey Kuzmin.
- Rendering Real-Time Shadows in WebGL Using Shadow Volumes⬈ by Andrey Kuzmin.
- A 3D rendering engine for Elm: elm-3d-scene 1.0 is now out!⬈ by Ian Mackenzie.
- Elm 3D Scene Tutorial⬈ by Ian Mackenzie.
- 3D Bee Game⬈ by McMaster Start Coding.
- Quaternion⬈ by Conrad Parker.
- Shader Toy⬈ by Conrad Parker.
- Webgl Playground⬈ by Andrey Kuzmin.
- Slides: Bringing the fun to Graphics Programming⬈ by Andrey Kuzmin.
- Slides: Introduction to Elm Webgl⬈ by Andrey Kuzmin.
- Slides: How to flip a table with Elm⬈ by Andrey Kuzmin.
- Slides: Rendering text with Webgl⬈ by Andrey Kuzmin.
- A collection of examples for
elm-3d-sceneordered by complexity.⬈ by Ian Mackenzie.
- Learn Webgl in 15 lessons. A collection of examples written with
elm-explorations/webgl.⬈ by Nacho Martín.
- elm-3d-scene⬈ by Ian Mackenzie. This is a high-level Elm package for producing 3D Graphics, with support for lighting, shadows and realistic materials.
- elm-physics⬈ by Andrey Kuzmin. Experimental toy physics engine.
- webgl⬈ by Elm Explorations. A simple API for rendering with WebGL. This is useful for both 2D and 3D rendering because it lets you take advantage of hardware acceleration with the GPU, meaning you can render things more quickly. This library was created by Evan Czaplicki and John P Mayer, Jr. Andrey Kuzmin is now the main maintainer.
- elm-geometry⬈ by Ian Mackenzie. This package provides a wide variety of geometric data types such as points, vectors, arcs, spline curves and coordinate frames, along with functions for transforming and combining them in many different ways.
- elm-3d-camera⬈ by Ian Mackenzie. This package provides convenient ways to define and use perspective and orthographic cameras in 3D.
- elm-obj-file⬈ by Andrey Kuzmin. An Elm package to decode 3D models from the OBJ file format. Helpful to create objects in Blender and render them with elm-3d-scene.
- elm-playground-3d⬈ by Luca Mugnaini. A package to draw simple three-dimensional objects in SVG.
List of people mentioned in this post.
- Library elm-obj-file
- Library elm-physics
- Video Rendering text with WebGL
- Post Slides: Rendering text with Webgl
- Post Slides: How to flip a table with Elm
- Post Slides: Introduction to Elm Webgl
- Post Slides: Bringing the fun to Graphics Programming
- Post Webgl Playground
- Post Rendering Real-Time Shadows in WebGL Using Shadow Volumes
- Post 3D Physics Engine Pt. 1
- Post 3D Physics Engine Pt. 2
- Post 3D Physics Engine Pt. 3
- Post 3D Physics Engine Pt. 4
- Demo Shadow Volume
- Demo Shadertoy
- Demo Drag
- Demo Tangram
- Demo Oslo Elm Day
- Demo Dominoes
- Demo Planet 3D
- Demo Cubik
- Demo Copter 3D 🚁
- Demo Table and Chairs 🪑🪑
- Demo Pod
- Demo Viewer
- Demo Dice
- Demo Randomize
- Demo Boxes
- Demo Car
- Demo Lack
- Demo Cloth
- Library elm-3d-camera
- Library elm-geometry
- Library elm-3d-scene
- Video Now you’re thinking in functions
- Video A 3D Rendering Engine for Elm
- Post A collection of examples for
elm-3d-sceneordered by complexity.
- Post Elm 3D Scene Tutorial
- Post A 3D rendering engine for Elm: elm-3d-scene 1.0 is now out!
- Demo Animated Light
- Demo Textured Sphere
- Demo Multiple Shadows
- Demo Exposure and Tone Mapping
- Demo Teapot
- Demo Overlay
- Demo Duckling
- Demo Balls and Blocks
- Post Learn Webgl in 15 lessons. A collection of examples written with
- Demo Lesson 15 — Earth
- Demo Lesson 14 — Teapot
- Demo Lesson 10 — First person perspective
- Video Evan Czaplicki, Andrey Kuzmin — API Design Sessions — Part 1
- Video Evan Czaplicki, Andrey Kuzmin — API Design Sessions — Part 2
- Demo First Person 3D Navigation in Elm
Michel van der Hulst
- Video ElmLive — Codevember Day 10 (2016) — Part 2 — Slimy broccoli with perlin noise
- Demo Slimy Broccoli with Perlin Noise
- Demo 3D Tetris
- Demo Countdown
McMaster Start Coding
- Post 3D Bee Game
- Demo Live MIDI dancer
- Demo Sun Path
John P Mayer, Jr
- Video Delightful WebGL in Elm
- Demo First Person
Francis De Brabandere
- Demo Morph
- Library webgl
- Demo Terrain
Brian J Ball
- Demo Procedural Landscape
- Demo Glelm
- Demo Quake Arena
- Demo Hannover