DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Github⬈ Twitter⬈ Discourse⬈
Photo



Ian Mackenzie

Github⬈ Twitter⬈ Discourse⬈
Photo



Nacho MartΓ­n

Github⬈ Twitter⬈
Photo



Luca Mugnaini

Github⬈ Twitter⬈ Medium⬈
Photo



Evan Czaplicki

Github⬈ Twitter⬈
Photo



Conrad Parker

Github⬈
Photo



Thomas Kumlehn

Github⬈ Twitter⬈
Photo



Mika Jauhonen

Github⬈ Twitter⬈
Photo



Michel van der Hulst

Github⬈ Medium⬈
Photo



Marco Sehrer

Github⬈ Medium⬈
Photo



Aaron VonderHaar

Github⬈ Twitter⬈
Photo



Tobias Wentzlaff

Github⬈
Photo



Patrik Sandahl

Github⬈
Photo



McMaster Start Coding

Twitter⬈
Photo



Matthieu Pizenberg

Github⬈ Twitter⬈ Discourse⬈
Photo



MartinSStewart

Github⬈
Photo



Kofi Gumbs

Github⬈ Twitter⬈
Photo



Karl Dray

Github⬈
Photo



John P Mayer, Jr

Github⬈
Photo



Jeff Cole

Github⬈
Photo



Francis De Brabandere

Github⬈ Twitter⬈
Photo



Elm Explorations

Github⬈
Photo



Dave Jeffrey

Github⬈
Photo



Brian J Ball

Github⬈ Twitter⬈
Photo



Ben Postlethwaite

Github⬈
Photo



Andrea Peltrin

Github⬈ Twitter⬈ Discourse⬈
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 Author

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

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›