3D Graphics in the Browser with Elm

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.

If you want to learn more about 3D Graphics in Elm, you can start reading the documentation of these libraries and joining the channels #webgl and #gamedev in the Elm Slack.

Enjoy! 🎉

Content

Demos

Balls and Blocks

Cloth

Cloth simulation built using many particle bodies and distance constraints between adjacent points.

Duckling

Overlay

Lack

Floating City

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

Car

This shows how hinge constrains can be used to assemble a car. Use the arrow keys to steer and speed!

Boxes

This demo is used to test performance. It drops 5×5×5 boxes. Try changing boxesPerDimension to drop even more!

Teapot

Slimy Broccoli with Perlin Noise

Randomize

This demo drops random bodies. It also shows how to make a compound body out of multiple shapes.

Procedural Landscape

Dice

Physically simulated dice roller!

Viewer

This example demonstrates how to load a mesh from a file. It can also be used to test the parser.

Pod

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 🚁

Morph

Cubik

Bumping Car 🚗

A modified version of RaycastCar written by Andrey Kuzmin.

Quake Arena

Hannover

Lesson 10 — First person perspective

Lesson 14 — Teapot

Lesson 15 — Earth

Terrain

3D Tetris

Planet 3D

Generates a planet with randomized surface.

Live MIDI dancer

Exposure and Tone Mapping

Dominoes

Multiple Shadows

Oslo Elm Day

A demo similar to Oslo Elm Day 2019, but implemented in Elm instead of Three.js.

Shadertoy

Renders the shader code from https://www.shadertoy.com/view/Ms2SD1 using Elm WebGL.

Other demos

Videos

A 3D Rendering Engine for Elm

Delightful WebGL in Elm

Now you’re thinking in functions

Rendering text with WebGL

Evan Czaplicki, Andrey Kuzmin — API Design Sessions — Part 2

Evan Czaplicki, Andrey Kuzmin — API Design Sessions — Part 1

ElmLive — Codevember Day 10 (2016) — Part 2 — Slimy broccoli with perlin noise

Posts

Libraries

  • 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.

People

List of people mentioned in this post.

Andrey Kuzmin

GithubTwitterDiscourse

Ian Mackenzie

GithubTwitterDiscourse

Nacho Martín

GithubTwitter

Luca Mugnaini

GithubTwitterMedium

Evan Czaplicki

GithubTwitter

Conrad Parker

Github

Thomas Kumlehn

GithubTwitter

Mika Jauhonen

GithubTwitter

Michel van der Hulst

GithubMedium

Marco Sehrer

GithubMedium

Aaron VonderHaar

GithubTwitter

Tobias Wentzlaff

Github

Patrik Sandahl

Github

McMaster Start Coding

Twitter

Kofi Gumbs

GithubTwitter

Karl Dray

Github

John P Mayer, Jr

Github

Jeff Cole

Github

Francis De Brabandere

GithubTwitter

Elm Explorations

Github

Dave Jeffrey

Github

Brian J Ball

GithubTwitter

Ben Postlethwaite

Github

Andrea Peltrin

GithubTwitterDiscourse

Alexander Foremny

Github

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store