elm-webgl-playground

elm3dgamejam.elm

Elm Game Jam #5 logo rendering, designed by @kuzminadya. Uses:

• elm-obj-file to load the "3D" mesh, that was created in Blender
• one-true-path-experiment to parse the SVG path and elm-geometry and elm-triangular-mesh to generate the tube-shaped mesh of the lettering
• Rendered with elm-3d-scene

shadowvolume.elm

Real-time shadows using the shadow volume technique.

osloelmday.elm

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

circle.elm

Draws a circle in the fragment shader.

shadertoy.elm

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

css3d.elm

Mixes WebGL and DOM layers in one common 3D space.

The front face of the cube is rendered with a transparent color. This makes a part of the canvas transparent so the DOM element can be seen through it.

Native module had to be used in order to extract the values from Mat4.

tangram.elm

Elm tangram pieces in 3D, composing different logos of Elm-related projects.

copter3d.elm

I found a copter model, that we had modeled together with a schoolmate using just pen and paper when we were kids back in 2002. This used to be rendered with Direct3D in Visual Basic. I converted the model into Elm and WebGL.

planet3d.elm

Demo

Generates a planet with randomized surface. In this demo I also tried to add lightning to the scene.

animation2d.elm

I couldn't find any simple example of how to render 2D with WebGL and Elm, so I decided to create this myself.

This renders an animated object at the mouse position:

Special thanks to Kolja for the awesome illustration. Please check our WebGL game Elm Street 404.

Instructions to run

1. Install elm elm-lang.org/install
2. Clone this repo and cd into it
3. Run elm reactor
4. Open localhost:8000 in the browser