Basic 3D rendering in SVG: elm-playground-3d

Lucamug
5 min readNov 17, 2019

Code: https://github.com/lucamug/elm-playground-3d
Demos: https://elm-playground-3d.netlify.com/
Example: https://elmjapan.org/

“floating city”

elm-playground-3d is an experimental library built on top of elm-playground. So let me introduce shortly this library first…

elm-playground

elm-playground is an excellent library to “create pictures, animations, and games with Elm”. It is at the same time simple to use so beginner can learn the basic of programming and also powerful to build complex applications.

It wraps The Elm Architecture providing simple directives to draw objects on the screen (square, circle, triangle, etc.) and to transform them (move, rotate, scale).

It has

  • Three levels of difficulty that you can follow during your learning process: picture, animation, game
  • Information about the screen, the mouse and the keyboard for creating an interactive application
  • Hooks to move object, such as spin, wave, zigzag

The library support two dimensional shapes but I needed to build a simple three dimensional composition and I want to maintain all the features that elm-playground provides, keeping the same level of simplicity

Let’s go 3D!

So I built a simple 3D layer above elm-playground. This is a comparison of usage between the 2D and the 3D versions:

2D

main =
picture
[ square purple 500
|> fade 0.8
|> move 200 0
]

3D

main =
picture
[ cube darkPurple purple lightPurple 500
|> fade3d 0.8
|> move3d 200 0 0
|> shape3dto2d camera1
]

As you can see the two processes follow the same logic. The subtle differences are:

  • Functions in 2D have, when possible, an analogues in 3D with a “3d” suffix in the name. The suffix allows to import everything from the 3D library without generating…

--

--