The intention of this project is to learn about the intersection of 3 different topics; graphics, web, and functional programming. It uses Elm with WebGL to create a basic 3D first-person scene implementing several lower level graphics techniques including matrix transformations to model parent/child local transforms, texture mapping, and basic lighting with shaders. Consider it the humble beginnings of a functional 3D graphics engine.

"FPS Scene"

Update 2023

It seems like one of the dependencies for this project, Zinggi/elm-obj-loader, is getting a 404. Therefore this dependency will be included in version control, so as long as you have Elm 0.18.0 tooling, you should be able to just run elm init.

Building

This project is Elm 0.18.0, so you need to have that version installed.

To install the binaries manually, use

Install Binaries

If you want to use npm, you can follow this;

Install with npm

Note that for npm, you will likely need an older version of Node.js, so it is recommended to use the Node Version Manager npm for that.

Running

In order to be able to load the textures and models, the website must be served by an HTTP server because of browser security, see SOP and CORS if curious.

If you have Python 3 installed, simply run python3 -m http.server

Then open up Either open up Scene.html, or use the command elm-reactor, if you want to be able to modify the source file and compile;

You can walk around the scene with simple FPS controls. Open scene.html with an HTTP server, you can use the following;

Controls

Look Around: Mouse
FPS Movement: WASD
Robot Movement: ◀ ▼ ▲ ▶
Rotate Robot: N and M
Rotate Robot Arm: Y and H
Rotate Robot Hand: U and J