3D Graphics in the Browser with Elm
Tags: elm, webgl, webdev
Published: 2020-10-12 00:40:36


<!-- This post is auto-generated. DO NOT EDIT IT HERE               -->    
<!-- Edit it at                                                     -->    
<!-- https://github.com/lucamug/3D_Graphics_in_the_Browser_with_Elm -->    
    
    
<!-- ![Gallery](https://dev-to-uploads.s3.amazonaws.com/i/gt85z0hijw3b4oibjlf9.gif) -->
<!-- TITLE: 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](https://github.com/lucamug/3D_Graphics_in_the_Browser_with_Elm).
    
If you want to learn more about 3D Graphics in Elm, you can start reading the documentation of [these libraries](#libraries) and joining the channels #webgl and #gamedev in the [Elm Slack](https://elmlang.herokuapp.com/). 

Enjoy! 🎉
    
# Content

* [Demos](#demos)
* [Videos](#videos)
* [Libraries](#libraries)
* [Posts](#posts)
* [People](#people)

<a name="demos"></a>

# Demos


<a name="balls_and_blocks"></a>

### Balls and Blocks
* Author: [Ian Mackenzie](#ianmackenzie)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/elm-3d-scene/physics/physics.html)⬈
* [Code](https://github.com/lucamug/3D_Graphics_in_the_Browser_with_Elm/blob/master/examples/elm-3d-scene/physics/Physics.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/cubes-and-spheres.gif "Demo")

<a name="cloth"></a>

### Cloth
Cloth simulation built using many particle bodies and distance constraints between adjacent points.
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-physics/examples/cloth/)⬈
* [Code](https://github.com/w0rm/elm-physics/tree/master/examples/Cloth.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/cloth.gif "Demo")

<a name="duckling"></a>

### Duckling
* Author: [Ian Mackenzie](#ianmackenzie)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/elm-3d-scene/duckling/Duckling.html)⬈
* [Code](https://github.com/ianmackenzie/elm-3d-scene/blob/cfdff607dc867b6751386cd94d1068967f3773a0/testing/Duckling.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/duck.gif "Demo")

<a name="overlay"></a>

### Overlay
* Author: [Ian Mackenzie](#ianmackenzie)
* [Demo](https://ianmackenzie.github.io/elm-3d-scene/examples/1.0.0/overlay.html)⬈
* [Code](https://github.com/ianmackenzie/elm-3d-scene/blob/master/examples/Overlay.elm)⬈
* [Ellie](https://ellie-app.com/bdkzqjBxCtQa1)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/overlay.gif "Demo")

<a name="lack"></a>

### Lack
This demo allows dragging objects with mouse, try flipping the table!
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-physics/examples/lack/)⬈
* [Code](https://github.com/w0rm/elm-physics/blob/master/examples/Lack.elm)⬈
* [Post](https://unsoundscapes.com/slides/2019-12-07-how-to-flip-a-table-with-elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/lack.gif "Demo")

<a name="duckling"></a>

### Duckling
This demo loads a convex shape and a mesh from the same OBJ file
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-physics/examples/duckling/)⬈
* [Code](https://github.com/w0rm/elm-physics/blob/master/examples/Duckling.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/ducks-320px.gif "Demo")

<a name="circuit_breaker"></a>

### Circuit Breaker
* Author: [MartinSStewart](#martinsstewart)
* [Demo](https://martinsstewart.gitlab.io/hackman/)⬈
* [Code](https://gitlab.com/MartinSStewart/hackman)⬈
* [Post](https://dev.to/martinsstewart/what-is-elm-and-a-game-i-m-making-with-it-3di1)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/breaker.gif "Demo")

<a name="floating_city"></a>

### Floating City
A three dimensional representation of Tokyo rendered in SVG, used for the Elm Japan Conference website
* Author: [Luca Mugnaini](#lucamug)
* [Demo](https://github.com/lucamug/elm-japan)⬈
* [Code](https://elmjapan.org/)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/elmjapan.gif "Demo")

<a name="3d_vector_animations"></a>

### 3D Vector Animations
Implementing 3D vector visualizations in Elm, rendered as pure SVGs
* Author: [Marco Sehrer](#pixelvitamina)
* [Demo](https://elm-vector-demo-1.herokuapp.com/index.html)⬈
* [Code](https://github.com/ninjaconcept/elm-vector-demo-1)⬈
* [Post](https://medium.com/ninjaconcept/3d-vector-animations-in-elm-58703993d144)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/vector-demo.gif "Demo")

<a name="car"></a>

### Car
This shows how hinge constrains can be used to assemble a car. Use the arrow keys to steer and speed!
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-physics/examples/car/)⬈
* [Code](https://github.com/w0rm/elm-physics/tree/master/examples/Car.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/car.gif "Demo")

<a name="boxes"></a>

### Boxes
This demo is used to test performance. It drops 5×5×5 boxes. Try changing `boxesPerDimension` to drop even more!
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-physics/examples/boxes/)⬈
* [Code](https://github.com/w0rm/elm-physics/blob/master/examples/Boxes.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/boxes.gif "Demo")

<a name="teapot"></a>

### Teapot
* Author: [Ian Mackenzie](#ianmackenzie)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/elm-3d-camera/teapot.html)⬈
* [Code](https://github.com/ianmackenzie/elm-3d-camera/blob/3.1.0/examples/Teapot.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/teapot-blue.gif "Demo")

<a name="slimy_broccoli_with_perlin_noise"></a>

### Slimy Broccoli with Perlin Noise
* Author: [Aaron VonderHaar](#avh4)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/avh4/smoke/index.html)⬈
* [Code](https://github.com/avh4/codevember-2016/tree/master/Day10)⬈
* [Post](https://www.youtube.com/watch?v=oc9ib2v9I4s&list=PLDA4wlOlLJvXAEsJDje4hdLazsihZiQNf&index=12%22%3Ehttps://www.youtube.com/watch?v=oc9ib2v9I4s&list=PLDA4wlOlLJvXAEsJDje4hdLazsihZiQNf&index=12)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/smoke.gif "Demo")

<a name="randomize"></a>

### Randomize
This demo drops random bodies. It also shows how to make a compound body out of multiple shapes.
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-physics/examples/randomize/)⬈
* [Code](https://github.com/w0rm/elm-physics/tree/master/examples/Randomize.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/randomize.gif "Demo")

<a name="procedural_landscape"></a>

### Procedural Landscape
* Author: [Brian J Ball](#ball)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/procedural-landscape/ProceduralLandscape.html)⬈
* [Code](https://github.com/lucamug/3D_Graphics_in_the_Browser_with_Elm/blob/master/examples/procedural-landscape/ProceduralLandscape.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/procedural-landscape.gif "Demo")

<a name="dice"></a>

### Dice
Physically simulated dice roller!
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.itch.io/dice)⬈
* [Code](https://github.com/w0rm/elm-dice)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/dice.gif "Demo")

<a name="viewer"></a>

### Viewer
This example demonstrates how to load a mesh from a file. It can also be used to test the parser.
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-obj-file/examples/viewer/)⬈
* [Code](https://github.com/w0rm/elm-obj-file/blob/master/examples/src/Viewer.elm)⬈
* [Post](https://twitter.com/unsoundscapes/status/1290351995786792961)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/preview-OBJ-files.gif "Demo")

<a name="pod"></a>

### Pod
This example demonstrates how to extract multiple meshes with shadows from an OBJ file and render with elm-3d-scene.
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-obj-file/examples/pod/)⬈
* [Code](https://github.com/w0rm/elm-obj-file/blob/master/examples/src/Pod.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/pod3.png "Demo")

<a name="quicklook_shelf_configurator"></a>

### Quicklook Shelf Configurator
* Author: [Thomas Kumlehn](#pixelpartner)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/quicklook-shelf-configurator/examples/IvarConfig.html)⬈
* [Code](https://github.com/PixelPartner/quicklook-shelf-configurator/blob/master/examples/IvarConfig.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/shelf.gif "Demo")

<a name="table_and_chairs_"></a>

### Table and Chairs 🪑🪑
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/Table%20and%20chairs/index.html)⬈
* [Code](https://github.com/ianmackenzie/elm-3d-scene/blob/d1a802aaf6a0adc659c2a006b5194396bb225b18/examples/Demo.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/table.gif "Demo")

<a name="3d_game_of_life"></a>

### 3D Game of Life
* Author: [Mika Jauhonen](#mikaxyz)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/mikaxyz/3d-game-of-life/index.html)⬈
* [Code](https://github.com/mikaxyz/elm-game-of-life)⬈
* [Post](https://twitter.com/mikajauhonen/status/1203088763754369024)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/game-of-life.gif "Demo")

<a name="copter_3d_"></a>

### Copter 3D 🚁
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](http://unsoundscapes.com/elm-webgl-playground/copter3d.html)⬈
* [Code](https://github.com/w0rm/elm-webgl-playground/blob/master/Copter3D.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/eli.gif "Demo")

<a name="morph"></a>

### Morph
* Author: [Francis De Brabandere](#francisdb)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/francisdb-glmorph/index.html)⬈
* [Code](https://github.com/francisdb/glmorph)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/cube.gif "Demo")

<a name="cubik"></a>

### Cubik
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.itch.io/cubik)⬈
* [Code](https://github.com/w0rm/elm-cubik)⬈
* [Post](https://discourse.elm-lang.org/t/open-sourcing-the-rubiks-cube-game/746)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/cubik.gif "Demo")

<a name="bumping_car_"></a>

### Bumping Car 🚗
A modified version of [RaycastCar](https://github.com/w0rm/elm-physics/blob/raycast-vehicle/examples/RaycastCar.elm) written by [Andrey Kuzmin](#unsoundscapes).
* Author: [Luca Mugnaini](#lucamug)
* [Demo](https://elm-physics-example.guupa.com/)⬈
* [Code](https://github.com/lucamug/elm-physics-example)⬈
* [Post](https://twitter.com/luca_mug/status/1292948585068335105)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/physics.gif "Demo")

<a name="quake_arena"></a>

### Quake Arena
* Author: [Andrea Peltrin](#passiomatic)
* [Demo](http://lab.passiomatic.com/quake3/)⬈
* [Code](https://github.com/passiomatic/elm-quake3-renderer)⬈
* [Post](https://discourse.elm-lang.org/t/render-quake-3-arena-maps-with-elm-and-webgl/3820)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/quake3.gif "Demo")

<a name="hannover"></a>

### Hannover
* Author: [Alexander Foremny](#aforemny)
* [Demo](https://hannover-elm.github.io/website/)⬈
* [Code](https://github.com/hannover-elm/website/blob/master/src/Logo.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/hannover2.gif "Demo")

<a name="lesson_10__first_person_perspective"></a>

### Lesson 10 - First person perspective
* Author: [Nacho Martín](#nacmartin)
* [Demo](http://localhost:8000/nacmartin-webgl-lessons/lesson-10-room.html)⬈
* [Code](https://github.com/nacmartin/elm-webgl-lessons/blob/master/lessons/Lesson10.elm)⬈
* [Post](https://github.com/nacmartin/elm-webgl-lessons)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/room.gif "Demo")

<a name="lesson_14__teapot"></a>

### Lesson 14 - Teapot
* Author: [Nacho Martín](#nacmartin)
* [Demo](https://nacmartin.github.io/elm-webgl-lessons/out/lesson14.html)⬈
* [Code](https://github.com/nacmartin/elm-webgl-lessons/blob/master/lessons/Lesson14.elm)⬈
* [Post](https://github.com/nacmartin/elm-webgl-lessons)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/teapot.gif "Demo")

<a name="lesson_15__earth"></a>

### Lesson 15 - Earth
* Author: [Nacho Martín](#nacmartin)
* [Demo](https://nacmartin.github.io/elm-webgl-lessons/out/lesson15.html)⬈
* [Code](https://github.com/nacmartin/elm-webgl-lessons/blob/master/lessons/Lesson15.elm)⬈
* [Post](https://github.com/nacmartin/elm-webgl-lessons)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/world.gif "Demo")

<a name="terrain"></a>

### Terrain
* Author: [Dave Jeffrey](#lepoetemaudit)
* [Demo](http://lepoetemaudit.github.io/elm-terrain/)⬈
* [Code](https://github.com/lepoetemaudit/elm-terrain)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/terrain.gif "Demo")

<a name="3d_tetris"></a>

### 3D Tetris
* Author: [Tobias Wentzlaff](#tobiaswen)
* [Demo](https://tobiaswen.github.io/3DelmTRIS/)⬈
* [Code](https://github.com/TobiasWen/3DelmTRIS)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/3dtetris.gif "Demo")

<a name="planet_3d"></a>

### Planet 3D
Generates a planet with randomized surface.
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](http://unsoundscapes.com/elm-webgl-playground/planet3d.html)⬈
* [Code](https://github.com/w0rm/elm-webgl-playground/blob/master/Planet3D.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/earth2.gif "Demo")

<a name="live_midi_dancer"></a>

### Live MIDI dancer
* Author: [Kofi Gumbs](#hkgumbs)
* [Demo](https://rc.kofi.sexy/visualizer/)⬈
* [Code](https://github.com/hkgumbs/rc)⬈
* [Post](https://kofi.sexy/blog/rc-2019)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/man.gif "Demo")

<a name="exposure_and_tone_mapping"></a>

### Exposure and Tone Mapping
* Author: [Ian Mackenzie](#ianmackenzie)
* [Demo](https://ianmackenzie.github.io/elm-3d-scene/examples/1.0.0/exposure-and-tone-mapping.html)⬈
* [Code](https://github.com/ianmackenzie/elm-3d-scene/blob/master/examples/ExposureAndToneMapping.elm)⬈
* [Ellie](https://ellie-app.com/9g2NQtQNxXpa1)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/exposure.png "Demo")

<a name="dominoes"></a>

### Dominoes
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-physics/examples/dominoes/)⬈
* [Code](https://github.com/w0rm/elm-physics/tree/master/examples/Dominoes.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/dominoes.gif "Demo")

<a name="multiple_shadows"></a>

### Multiple Shadows
* Author: [Ian Mackenzie](#ianmackenzie)
* [Demo](https://ianmackenzie.github.io/elm-3d-scene/examples/1.0.0/multiple-shadows.html)⬈
* [Code](https://github.com/ianmackenzie/elm-3d-scene/blob/master/examples/MultipleShadows.elm)⬈
* [Ellie](https://ellie-app.com/9g2PQxgqk49a1)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/multiple-shadow.gif "Demo")

<a name="oslo_elm_day"></a>

### Oslo Elm Day
A demo similar to Oslo Elm Day 2019, but implemented in Elm instead of Three.js.
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://unsoundscapes.com/elm-webgl-playground/osloelmday.html)⬈
* [Code](https://github.com/w0rm/elm-webgl-playground/blob/master/OsloElmDay.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/oslo.gif "Demo")

<a name="shadertoy"></a>

### Shadertoy
Renders the shader code from [https://www.shadertoy.com/view/Ms2SD1](https://www.shadertoy.com/view/Ms2SD1) using Elm WebGL.
* Author: [Andrey Kuzmin](#w0rm)
* [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/elm-webgl-playground/shadertoy.html)⬈
* [Code](https://github.com/w0rm/elm-webgl-playground/blob/master/Shadertoy.elm)⬈
    ![Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/gifs/shadertoy.gif "Demo")

<a name="other_demos"></a>

# Other demos

* <a name="quicklook_ral_configurator"></a>**Quicklook RAL Configurator** by [Thomas Kumlehn](#pixelpartner).  [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/pixel-partner/RALConfig.html)⬈ [Code](https://github.com/PixelPartner/quicklook-RAL-configurator)⬈
* <a name="julia_set"></a>**Julia Set** by [Marco Sehrer](#pixelvitamina).  [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/ninjaconcept-elm-julia-set/index.html)⬈ [Code](https://github.com/ninjaconcept/elm-julia-set-visualization)⬈ [Post](https://medium.com/@fh_95229/julia-set-visualization-with-webgl-for-elm-765e5da88626#.kbcjf8cfi)⬈
* <a name="textured_sphere"></a>**Textured Sphere** by [Ian Mackenzie](#ianmackenzie).  [Demo](https://ianmackenzie.github.io/elm-3d-scene/examples/1.0.0/textured-sphere.html)⬈ [Code](https://github.com/ianmackenzie/elm-3d-scene/blob/master/examples/TexturedSphere.elm)⬈ [Ellie](https://ellie-app.com/9g2R9VDG6NHa1)⬈
* <a name="landscape_terrain"></a>**Landscape (terrain)** by [Mika Jauhonen](#mikaxyz).  [Demo](https://mika.xyz/elm-webgl-experiments/landscape.html)⬈ [Code](https://github.com/mikaxyz/elm-webgl-examples)⬈
* <a name="animated_light"></a>**Animated Light** by [Ian Mackenzie](#ianmackenzie).  [Demo](https://lucamug.github.io/3D_Graphics_in_the_Browser_with_Elm/examples/elm-3d-scene/animated.html)⬈ [Code]()⬈
* <a name="tangram"></a>**Tangram** by [Andrey Kuzmin](#w0rm). Elm tangram pieces in 3D, composing different logos of Elm-related projects. [Demo](http://unsoundscapes.com/elm-webgl-playground/tangram.html)⬈ [Code](https://github.com/w0rm/elm-webgl-playground/tree/master/Tangram)⬈
* <a name="drag"></a>**Drag** by [Andrey Kuzmin](#w0rm).  [Demo](https://unsoundscapes.com/elm-physics/examples/drag/)⬈ [Code](https://github.com/w0rm/elm-physics/tree/master/examples/Drag.elm)⬈
* <a name="countdown"></a>**Countdown** by [Patrik Sandahl](#psandahl).  [Demo](https://www.youtube.com/watch?v=DhSXR7EaJ5E)⬈ [Code](https://github.com/psandahl/count-down)⬈
* <a name="dream_buggy"></a>**Dream Buggy** by [Conrad Parker](#kfish).  [Demo](http://kfish.github.io/dreambuggy/)⬈ [Code](https://github.com/kfish/dreambuggy)⬈
* <a name="shadow_volume"></a>**Shadow Volume** by [Andrey Kuzmin](#w0rm). Real-time shadows using the shadow volume technique. [Demo](https://unsoundscapes.com/elm-webgl-playground/shadowvolume.html)⬈ [Code](https://github.com/w0rm/elm-webgl-playground/blob/master/ShadowVolume.elm)⬈ [Post](https://discourse.elm-lang.org/t/rendering-real-time-shadows-in-webgl-using-shadow-volumes/4029)⬈
* <a name="first_person"></a>**First Person** by [Jeff Cole](#jeffcole).  [Demo](http://jeff-cole.com/first-person-elm/)⬈ [Code](https://github.com/jeffcole/first-person-elm)⬈
* <a name="sun_path"></a>**Sun Path** by [Karl Dray](#karldray).  [Demo](https://karldray.com/sunpath/)⬈ [Code](https://github.com/karldray/sunpath)⬈
* <a name="glelm"></a>**Glelm** by [Ben Postlethwaite](#bpostlethwaite).  [Demo](https://thebookofshaders.com/)⬈ [Code](https://github.com/bpostlethwaite/glelm)⬈
* <a name="first_person_3d_navigation_in_elm"></a>**First Person 3D Navigation in Elm** by [Evan Czaplicki](#evancz).  [Demo](http://evancz.github.io/first-person-elm/)⬈ [Code](https://github.com/evancz/first-person-elm)⬈
* <a name="webgl_depth_map"></a>**Webgl Depth Map** by [Matthieu Pizenberg](#mpizenberg). Visualizations of depth maps in the browser. [Demo](https://mpizenberg.github.io/elm-webgl-depthmap/)⬈ [Code](https://github.com/mpizenberg/elm-webgl-depthmap)⬈ [Post](https://discourse.elm-lang.org/t/using-elm-and-webgl-for-depth-maps-3d-visualizations/6406)⬈

<a name="videos"></a>

# Videos

<a name="a_3d_rendering_engine_for_elm"></a>

### A 3D Rendering Engine for Elm
* Author: [Ian Mackenzie](#ianmackenzie)
    {% youtube Htqc64s5qYU %}
<a name="delightful_webgl_in_elm"></a>

### Delightful WebGL in Elm
* Author: [John P Mayer, Jr](#johnpmayer)
    {% vimeo 97408205 %}
<a name="now_youre_thinking_in_functions"></a>

### Now you're thinking in functions
* Author: [Ian Mackenzie](#ianmackenzie)
    {% youtube F4fuVJNnQoo %}
<a name="rendering_text_with_webgl"></a>

### Rendering text with WebGL
* Author: [Andrey Kuzmin](#w0rm)
    {% youtube qasFxsOCfpA %}
<a name="evan_czaplicki_andrey_kuzmin__api_design_sessions__part_2"></a>

### Evan Czaplicki, Andrey Kuzmin - API Design Sessions - Part 2
* Author: [Evan Czaplicki](#evancz)
    {% youtube vQFGaGPPz2Q %}
<a name="evan_czaplicki_andrey_kuzmin__api_design_sessions__part_1"></a>

### Evan Czaplicki, Andrey Kuzmin - API Design Sessions - Part 1
* Author: [Evan Czaplicki](#evancz)
    {% youtube qaTy_F98Moo %}
<a name="elmlive__codevember_day_10_2016__part_2__slimy_broccoli_with_perlin_noise"></a>

### ElmLive - Codevember Day 10 (2016) - Part 2 - Slimy broccoli with perlin noise
* Author: [Aaron VonderHaar](#avh4)
    {% youtube oc9ib2v9I4s %}

<a name="posts"></a>

# Posts

* <a name="clicking_a_3d_mesh_in_elmwebgl"></a>[**Clicking a 3D mesh in elm-webgl**](https://medium.com/@voorkanter/clicking-a-3d-mesh-in-elm-webgl-faadfdf703a0)⬈ by [Michel van der Hulst](#mahulst).
* <a name="a_low_poly_water_shader_in_elm_webgl"></a>[**A low poly water shader in Elm WebGL**](https://medium.com/@voorkanter/a-low-poly-water-shader-in-elm-webgl-7a7a131e2733)⬈ by [Michel van der Hulst](#mahulst).
* <a name="3d_physics_engine_pt_5"></a>[**3D Physics Engine Pt. 5**](https://discourse.elm-lang.org/t/3d-physics-engine-pt-5/6423)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="3d_physics_engine_pt_4"></a>[**3D Physics Engine Pt. 4**](https://discourse.elm-lang.org/t/3d-physics-engine-pt-4/4895)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="3d_physics_engine_pt_3"></a>[**3D Physics Engine Pt. 3**](https://discourse.elm-lang.org/t/3d-physics-engine-pt-3/3663)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="3d_physics_engine_pt_2"></a>[**3D Physics Engine Pt. 2**](https://discourse.elm-lang.org/t/3d-physics-engine-pt-2/1887)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="3d_physics_engine_pt_1"></a>[**3D Physics Engine Pt. 1**](https://discourse.elm-lang.org/t/3d-physics-engine/1206)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="rendering_realtime_shadows_in_webgl_using_shadow_volumes"></a>[**Rendering Real-Time Shadows in WebGL Using Shadow Volumes**](https://discourse.elm-lang.org/t/rendering-real-time-shadows-in-webgl-using-shadow-volumes/4029)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="a_3d_rendering_engine_for_elm_elm3dscene_10_is_now_out"></a>[**A 3D rendering engine for Elm: elm-3d-scene 1.0 is now out!**](https://discourse.elm-lang.org/t/a-3d-rendering-engine-for-elm-elm-3d-scene-1-0-is-now-out/5972)⬈ by [Ian Mackenzie](#ianmackenzie).
* <a name="elm_3d_scene_tutorial"></a>[**Elm 3D Scene Tutorial**](https://github.com/ianmackenzie/elm-3d-scene/blob/master/TUTORIAL.md)⬈ by [Ian Mackenzie](#ianmackenzie).
* <a name="3d_bee_game"></a>[**3D Bee Game**](https://twitter.com/MacCSOutreach/status/1288157248095649797)⬈ by [McMaster Start Coding](#maccsoutreach).
* <a name="quaternion"></a>[**Quaternion**](https://github.com/kfish/quaternion)⬈ by [Conrad Parker](#kfish).
* <a name="shader_toy"></a>[**Shader Toy**](https://github.com/kfish/elm-shadertoy)⬈ by [Conrad Parker](#kfish).
* <a name="webgl_playground"></a>[**Webgl Playground**](https://github.com/w0rm/elm-webgl-playground)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="slides_bringing_the_fun_to_graphics_programming"></a>[**Slides: Bringing the fun to Graphics Programming**](https://unsoundscapes.com/slides/2018-02-20-bringing-the-fun-to-graphics-programming)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="slides_introduction_to_elm_webgl"></a>[**Slides: Introduction to Elm Webgl**](https://unsoundscapes.com/slides/2016-06-06-introduction-to-elm-webgl)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="slides_how_to_flip_a_table_with_elm"></a>[**Slides: How to flip a table with Elm**](https://unsoundscapes.com/slides/2019-12-07-how-to-flip-a-table-with-elm)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="slides_rendering_text_with_webgl"></a>[**Slides: Rendering text with Webgl**](https://unsoundscapes.com/slides/2018-07-05-rendering-text-with-webgl)⬈ by [Andrey Kuzmin](#w0rm).
* <a name="a_collection_of_examples_for_elm3dscene_ordered_by_complexity"></a>[**A collection of examples for `elm-3d-scene` ordered by complexity.**](https://github.com/ianmackenzie/elm-3d-scene/tree/master/examples)⬈ by [Ian Mackenzie](#ianmackenzie).
* <a name="learn_webgl_in_15_lessons_a_collection_of_examples_written_with_elmexplorationswebgl"></a>[**Learn Webgl in 15 lessons. A collection of examples written with `elm-explorations/webgl`.**](https://github.com/ianmackenzie/elm-3d-scene/tree/master/examples)⬈ by [Nacho Martín](#nacmartin).

<a name="libraries"></a>

# Libraries

* <a name="elm3dscene"></a>[**elm-3d-scene**](https://package.elm-lang.org/packages/ianmackenzie/elm-3d-scene/latest/)⬈ by [Ian Mackenzie](#ianmackenzie). This is a high-level Elm package for producing 3D Graphics, with support for lighting, shadows and realistic materials.
* <a name="elmphysics"></a>[**elm-physics**](https://package.elm-lang.org/packages/w0rm/elm-physics/latest/)⬈ by [Andrey Kuzmin](#w0rm). Experimental toy physics engine.
* <a name="webgl"></a>[**webgl**](https://package.elm-lang.org/packages/elm-explorations/webgl/latest/)⬈ by [Elm Explorations](#elmexplorations). 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](#evancz) and [John P Mayer, Jr](#johnpmayer). [Andrey Kuzmin](#unsoundscapes) is now the main maintainer.
* <a name="elmgeometry"></a>[**elm-geometry**](https://package.elm-lang.org/packages/ianmackenzie/elm-geometry/latest/)⬈ by [Ian Mackenzie](#ianmackenzie). 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.
* <a name="elm3dcamera"></a>[**elm-3d-camera**](https://package.elm-lang.org/packages/ianmackenzie/elm-3d-camera/latest/)⬈ by [Ian Mackenzie](#ianmackenzie). This package provides convenient ways to define and use perspective and orthographic cameras in 3D.
* <a name="elmobjfile"></a>[**elm-obj-file**](https://package.elm-lang.org/packages/w0rm/elm-obj-file/latest/)⬈ by [Andrey Kuzmin](#w0rm). 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.
* <a name="elmplayground3d"></a>[**elm-playground-3d**](https://github.com/lucamug/elm-playground-3d)⬈ by [Luca Mugnaini](#lucamug). A package to draw simple three-dimensional objects in SVG.

<a name="people"></a>

# People

List of people mentioned in this post.

<a name="w0rm"></a>

### Andrey Kuzmin
[Github](https://github.com/w0rm)⬈ [Twitter](https://twitter.com/unsoundscapes)⬈ [Discourse](https://discourse.elm-lang.org/u/unsoundscapes)⬈
![Photo](https://avatars0.githubusercontent.com/u/26506215?s=60&v=4)
  * Library [elm-obj-file](#elmobjfile)
  * Library [elm-physics](#elmphysics)
  * Video [Rendering text with WebGL](#rendering_text_with_webgl)
  * Post [Slides: Rendering text with Webgl](#slides_rendering_text_with_webgl)
  * Post [Slides: How to flip a table with Elm](#slides_how_to_flip_a_table_with_elm)
  * Post [Slides: Introduction to Elm Webgl](#slides_introduction_to_elm_webgl)
  * Post [Slides: Bringing the fun to Graphics Programming](#slides_bringing_the_fun_to_graphics_programming)
  * Post [Webgl Playground](#webgl_playground)
  * Post [Rendering Real-Time Shadows in WebGL Using Shadow Volumes](#rendering_realtime_shadows_in_webgl_using_shadow_volumes)
  * Post [3D Physics Engine Pt. 1](#3d_physics_engine_pt_1)
  * Post [3D Physics Engine Pt. 2](#3d_physics_engine_pt_2)
  * Post [3D Physics Engine Pt. 3](#3d_physics_engine_pt_3)
  * Post [3D Physics Engine Pt. 4](#3d_physics_engine_pt_4)
  * Post [3D Physics Engine Pt. 5](#3d_physics_engine_pt_5)
  * Demo [Shadow Volume](#shadow_volume)
  * Demo [Shadertoy](#shadertoy)
  * Demo [Drag](#drag)
  * Demo [Tangram](#tangram)
  * Demo [Oslo Elm Day](#oslo_elm_day)
  * Demo [Dominoes](#dominoes)
  * Demo [Planet 3D](#planet_3d)
  * Demo [Cubik](#cubik)
  * Demo [Copter 3D 🚁](#copter_3d_)
  * Demo [Table and Chairs 🪑🪑](#table_and_chairs_)
  * Demo [Pod](#pod)
  * Demo [Viewer](#viewer)
  * Demo [Dice](#dice)
  * Demo [Randomize](#randomize)
  * Demo [Boxes](#boxes)
  * Demo [Car](#car)
  * Demo [Duckling](#duckling)
  * Demo [Lack](#lack)
  * Demo [Cloth](#cloth)


<hr>
<a name="ianmackenzie"></a>

### Ian Mackenzie
[Github](https://github.com/ianmackenzie)⬈ [Twitter](https://twitter.com/ianemackenzie)⬈ [Discourse](https://discourse.elm-lang.org/u/ianmackenzie)⬈
![Photo](https://avatars1.githubusercontent.com/u/1576199?s=60&v=4)
  * Library [elm-3d-camera](#elm3dcamera)
  * Library [elm-geometry](#elmgeometry)
  * Library [elm-3d-scene](#elm3dscene)
  * Video [Now you're thinking in functions](#now_youre_thinking_in_functions)
  * Video [A 3D Rendering Engine for Elm](#a_3d_rendering_engine_for_elm)
  * Post [A collection of examples for `elm-3d-scene` ordered by complexity.](#a_collection_of_examples_for_elm3dscene_ordered_by_complexity)
  * Post [Elm 3D Scene Tutorial](#elm_3d_scene_tutorial)
  * Post [A 3D rendering engine for Elm: elm-3d-scene 1.0 is now out!](#a_3d_rendering_engine_for_elm_elm3dscene_10_is_now_out)
  * Demo [Animated Light](#animated_light)
  * Demo [Textured Sphere](#textured_sphere)
  * Demo [Multiple Shadows](#multiple_shadows)
  * Demo [Exposure and Tone Mapping](#exposure_and_tone_mapping)
  * Demo [Teapot](#teapot)
  * Demo [Overlay](#overlay)
  * Demo [Duckling](#duckling)
  * Demo [Balls and Blocks](#balls_and_blocks)


<hr>
<a name="nacmartin"></a>

### Nacho Martín
[Github](https://github.com/nacmartin)⬈ [Twitter](https://twitter.com/nacmartin)⬈
![Photo](https://avatars3.githubusercontent.com/u/154258?s=60&v=4)
  * Post [Learn Webgl in 15 lessons. A collection of examples written with `elm-explorations/webgl`.](#learn_webgl_in_15_lessons_a_collection_of_examples_written_with_elmexplorationswebgl)
  * Demo [Lesson 15 - Earth](#lesson_15__earth)
  * Demo [Lesson 14 - Teapot](#lesson_14__teapot)
  * Demo [Lesson 10 - First person perspective](#lesson_10__first_person_perspective)


<hr>
<a name="lucamug"></a>

### Luca Mugnaini
[Github](https://github.com/lucamug)⬈ [Twitter](https://twitter.com/luca_mug)⬈ [Medium](https://medium.com/@l.mugnaini)⬈
![Photo](https://avatars1.githubusercontent.com/u/5551094?s=60&v=4)
  * Library [elm-playground-3d](#elmplayground3d)
  * Demo [Bumping Car 🚗](#bumping_car_)
  * Demo [Floating City](#floating_city)


<hr>
<a name="evancz"></a>

### Evan Czaplicki
[Github](https://github.com/evancz)⬈ [Twitter](https://twitter.com/evancz)⬈
![Photo](https://avatars3.githubusercontent.com/u/1658058?s=60&v=4)
  * Video [Evan Czaplicki, Andrey Kuzmin - API Design Sessions - Part 1](#evan_czaplicki_andrey_kuzmin__api_design_sessions__part_1)
  * Video [Evan Czaplicki, Andrey Kuzmin - API Design Sessions - Part 2](#evan_czaplicki_andrey_kuzmin__api_design_sessions__part_2)
  * Demo [First Person 3D Navigation in Elm](#first_person_3d_navigation_in_elm)


<hr>
<a name="kfish"></a>

### Conrad Parker
[Github](https://github.com/kfish)⬈
![Photo](https://avatars0.githubusercontent.com/u/38847?s=60&v=4)
  * Post [Shader Toy](#shader_toy)
  * Post [Quaternion](#quaternion)
  * Demo [Dream Buggy](#dream_buggy)


<hr>
<a name="pixelpartner"></a>

### Thomas Kumlehn
[Github](https://github.com/PixelPartner)⬈ [Twitter](https://twitter.com/PixelPartner)⬈
![Photo](https://avatars2.githubusercontent.com/u/73567?s=60&v=4)
  * Demo [Quicklook RAL Configurator](#quicklook_ral_configurator)
  * Demo [Quicklook Shelf Configurator](#quicklook_shelf_configurator)


<hr>
<a name="mikaxyz"></a>

### Mika Jauhonen
[Github](https://github.com/mikaxyz)⬈ [Twitter](https://twitter.com/mikajauhonen)⬈
![Photo](https://avatars2.githubusercontent.com/u/373858?s=60&v=4)
  * Demo [Landscape (terrain)](#landscape_terrain)
  * Demo [3D Game of Life](#3d_game_of_life)


<hr>
<a name="mahulst"></a>

### Michel van der Hulst
[Github](https://github.com/mahulst)⬈ [Medium](https://medium.com/@voorkanter)⬈
![Photo](https://avatars2.githubusercontent.com/u/4232644?s=60&v=4)
  * Post [A low poly water shader in Elm WebGL](#a_low_poly_water_shader_in_elm_webgl)
  * Post [Clicking a 3D mesh in elm-webgl](#clicking_a_3d_mesh_in_elmwebgl)


<hr>
<a name="pixelvitamina"></a>

### Marco Sehrer
[Github](https://github.com/pixelvitamina)⬈ [Medium](https://medium.com/@sushi2kk)⬈
![Photo](https://avatars1.githubusercontent.com/u/11566?s=60&v=4)
  * Demo [Julia Set](#julia_set)
  * Demo [3D Vector Animations](#3d_vector_animations)


<hr>
<a name="avh4"></a>

### Aaron VonderHaar
[Github](https://github.com/avh4)⬈ [Twitter](https://twitter.com/avh4)⬈
![Photo](https://avatars3.githubusercontent.com/u/1222?s=60&v=4)
  * Video [ElmLive - Codevember Day 10 (2016) - Part 2 - Slimy broccoli with perlin noise](#elmlive__codevember_day_10_2016__part_2__slimy_broccoli_with_perlin_noise)
  * Demo [Slimy Broccoli with Perlin Noise](#slimy_broccoli_with_perlin_noise)


<hr>
<a name="tobiaswen"></a>

### Tobias Wentzlaff
[Github](https://github.com/TobiasWen)⬈
![Photo](https://avatars2.githubusercontent.com/u/13774204?s=60&v=4)
  * Demo [3D Tetris](#3d_tetris)


<hr>
<a name="psandahl"></a>

### Patrik Sandahl
[Github](https://github.com/psandahl)⬈
![Photo](http://via.placeholder.com/60x60?text=?)
  * Demo [Countdown](#countdown)


<hr>
<a name="maccsoutreach"></a>

### McMaster Start Coding
 [Twitter](https://twitter.com/MacCSOutreach)⬈
![Photo](http://via.placeholder.com/60x60?text=?)
  * Post [3D Bee Game](#3d_bee_game)


<hr>
<a name="mpizenberg"></a>

### Matthieu Pizenberg
[Github](https://github.com/mpizenberg)⬈ [Twitter](https://twitter.com/mattpiz)⬈ [Discourse](https://discourse.elm-lang.org/u/mattpiz)⬈
![Photo](http://via.placeholder.com/60x60?text=?)
  * Demo [Webgl Depth Map](#webgl_depth_map)


<hr>
<a name="martinsstewart"></a>

### MartinSStewart
[Github](https://github.com/MartinSStewart)⬈
![Photo](https://avatars0.githubusercontent.com/u/5068391?s=60&v=4)
  * Demo [Circuit Breaker](#circuit_breaker)


<hr>
<a name="hkgumbs"></a>

### Kofi Gumbs
[Github](https://github.com/hkgumbs)⬈ [Twitter](https://twitter.com/hkgumbs)⬈
![Photo](https://avatars3.githubusercontent.com/u/72497265?s=60&v=4)
  * Demo [Live MIDI dancer](#live_midi_dancer)


<hr>
<a name="karldray"></a>

### Karl Dray
[Github](https://github.com/karldray)⬈
![Photo](https://avatars1.githubusercontent.com/u/1121686?s=60&v=4)
  * Demo [Sun Path](#sun_path)


<hr>
<a name="johnpmayer"></a>

### John P Mayer, Jr
[Github](https://github.com/johnpmayer)⬈
![Photo](https://avatars0.githubusercontent.com/u/941215?s=60&v=4)
  * Video [Delightful WebGL in Elm](#delightful_webgl_in_elm)


<hr>
<a name="jeffcole"></a>

### Jeff Cole
[Github](https://github.com/jeffcole)⬈
![Photo](https://avatars2.githubusercontent.com/u/1175290?s=60&v=4)
  * Demo [First Person](#first_person)


<hr>
<a name="francisdb"></a>

### Francis De Brabandere
[Github](https://github.com/francisdb)⬈ [Twitter](https://twitter.com/somatik)⬈
![Photo](https://avatars2.githubusercontent.com/u/161305?s=60&v=4)
  * Demo [Morph](#morph)


<hr>
<a name="elmexplorations"></a>

### Elm Explorations
[Github](https://github.com/elm-explorations)⬈
![Photo](https://avatars0.githubusercontent.com/u/26491321?s=60&v=4)
  * Library [webgl](#webgl)


<hr>
<a name="lepoetemaudit"></a>

### Dave Jeffrey
[Github](https://github.com/lepoetemaudit)⬈
![Photo](https://avatars2.githubusercontent.com/u/10742921?s=60&v=4)
  * Demo [Terrain](#terrain)


<hr>
<a name="ball"></a>

### Brian J Ball
[Github](https://github.com/Ball)⬈ [Twitter](https://twitter.com/Myotherpants)⬈
![Photo](https://avatars2.githubusercontent.com/u/20161?s=60&v=4)
  * Demo [Procedural Landscape](#procedural_landscape)


<hr>
<a name="bpostlethwaite"></a>

### Ben Postlethwaite
[Github](https://github.com/bpostlethwaite)⬈
![Photo](https://avatars2.githubusercontent.com/u/1176674?s=60&v=4)
  * Demo [Glelm](#glelm)


<hr>
<a name="passiomatic"></a>

### Andrea Peltrin
[Github](https://github.com/passiomatic)⬈ [Twitter](https://twitter.com/passiomatic)⬈ [Discourse](https://discourse.elm-lang.org/u/passiomatic)⬈
![Photo](https://avatars3.githubusercontent.com/u/56371?s=60&v=4)
  * Demo [Quake Arena](#quake_arena)


<hr>
<a name="aforemny"></a>

### Alexander Foremny
[Github](https://github.com/aforemny)⬈
![Photo](https://avatars3.githubusercontent.com/u/610962?s=60&v=4)
  * Demo [Hannover](#hannover)