DEV Community

Cover image for 3D Graphics in the Browser with Elm
lucamug
lucamug

Posted on • Updated on

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

This demo allows dragging objects with mouse, try flipping the table!

Duckling

This demo loads a convex shape and a mesh from the same OBJ file

Circuit Breaker

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
Photo



Ian Mackenzie

GithubTwitterDiscourse
Photo



Nacho Martín

GithubTwitter
Photo



Luca Mugnaini

GithubTwitterMedium
Photo



Evan Czaplicki

GithubTwitter
Photo



Conrad Parker

Github
Photo



Thomas Kumlehn

GithubTwitter
Photo



Mika Jauhonen

GithubTwitter
Photo



Michel van der Hulst

GithubMedium
Photo



Marco Sehrer

GithubMedium
Photo



Aaron VonderHaar

GithubTwitter
Photo



Tobias Wentzlaff

Github
Photo



Patrik Sandahl

Github
Photo



McMaster Start Coding

Twitter
Photo



Matthieu Pizenberg

GithubTwitterDiscourse
Photo



MartinSStewart

Github
Photo



Kofi Gumbs

GithubTwitter
Photo



Karl Dray

Github
Photo



John P Mayer, Jr

Github
Photo



Jeff Cole

Github
Photo



Francis De Brabandere

GithubTwitter
Photo



Elm Explorations

Github
Photo



Dave Jeffrey

Github
Photo



Brian J Ball

GithubTwitter
Photo



Ben Postlethwaite

Github
Photo



Andrea Peltrin

GithubTwitterDiscourse
Photo



Alexander Foremny

Github
Photo

Top comments (3)

Collapse
 
konung profile image
konung

Wow! Thank you for putting this togeather, and sharing!

Collapse
 
perty profile image
Per Lundholm

Great one! The link for the code to the procedural landscape points back here, though.

Collapse
 
lucamug profile image
lucamug

Thank you, I fixed the link. This is the code: github.com/lucamug/3D_Graphics_in_...