106 lines
4.3 KiB
Org Mode
106 lines
4.3 KiB
Org Mode
#+OPTIONS: toc:nil
|
|
|
|
* FP Rendering Engine
|
|
** TL;DR
|
|
Graphics + Web + Functional Programming
|
|
|
|
[[https://ferano.io/3d-fp/][Play it here]]
|
|
|
|
** About
|
|
The goal of this project is to learn about the intersection of 3 different
|
|
topics; graphics, web, and functional programming. The FP acronym refers to both
|
|
the fact that it's a *F*irst *P*erson camera, as well as being implemented using
|
|
*F*unctional *P*rogramming. It uses Elm with WebGL to create a 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.
|
|
|
|
I worked on this project for a few weeks in 2019, however, it was just thrown
|
|
into a git repo without much consideration, along with [[https://git.ferano.io/JosephFerano/pqtorusknot][this]] project. I felt this
|
|
deserved a little bit more TLC, so I decided to spruce it up a little bit and
|
|
move it to its own repository. Here's the original [[https://github.com/JosephFerano/elm-graphics][project]].
|
|
|
|
** Showcase
|
|
|
|
*** First Person Camera
|
|
[[file:screenshots/play1.gif]]
|
|
|
|
[[https://ferano.io/3d-fp/play1.mp4][Higher Resolution Version]]
|
|
*** Sextus
|
|
[[file:screenshots/sextus.gif]]
|
|
|
|
[[https://ferano.io/3d-fp/sextus.mp4][Higher Resolution Version]]
|
|
|
|
|
|
** Building with Elm 0.18.0
|
|
To install the binaries manually, follow this short guide; - [[https://sirfitz.medium.com/install-elm-0-18-0-in-2021-3f64ce298801][Install Binaries]]
|
|
|
|
If you want to use =npm= instead; - =npm install -g elm@elm0.18.0=
|
|
|
|
If you use =npm=, note that you will likely need an older version of Node.js, so
|
|
it is recommended to use [[https://github.com/nvm-sh/nvm][nvm]] for that. I have not attempted this method
|
|
personally, fyi.
|
|
|
|
Once you have the Elm compiler, go ahead and run
|
|
|
|
=elm make Scene.elm=
|
|
|
|
And that should first pull in all the dependencies then generate an =index.html=
|
|
file.
|
|
|
|
*** Issues with dependencies
|
|
One of the dependencies of this project, =Zinggi/elm-obj-loader=, is getting a 404
|
|
when Elm tries to pull in all the deps during compilation. Therefore this
|
|
dependency will be included in version control, on the off chance someone
|
|
actually wants to build this.
|
|
|
|
** Running
|
|
In order to be able to load the textures and models, the files must be served by
|
|
an HTTP server because of browser security, see [[https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy][SOP]] and [[https://developer.mozilla.org/en-US/docs/Glossary/CORS][CORS]] if curious.
|
|
|
|
You can use ~elm-reactor~, run the command and open up your browser to
|
|
~https://localhost:8000~ and then click on ~Scene.elm~ in the nice project webview
|
|
provided. If you don't want to do that and have Python 3 installed, run =python3
|
|
-m http.server=, but make sure to compile with the ~elm make Scene.elm~ command
|
|
first.
|
|
|
|
** How to Play
|
|
You can walk around the scene and also control the robot which I have named
|
|
Emperor Sextus, Conqueror of the Luddites.
|
|
|
|
*** Keybindings
|
|
- Look Around: =Mouse=
|
|
|
|
- FPS Movement: =WASD=
|
|
|
|
- Robot Movement: =◀ ▼ ▲ ▶=
|
|
|
|
- Rotate Robot: =N | M=
|
|
|
|
- Rotate Robot Arm: =H | J=
|
|
|
|
- Rotate Robot Hand: =Y | U=
|
|
|
|
** Takeaways
|
|
The Elm WebGL library provides a few abstractions (namely =WebGL.Entity=) that
|
|
help reduce some of the boilerplate usually associated with creating a WebGL
|
|
application from scratch. While it was useful for the purposes of this
|
|
prototype, it remains to be seen if it would scale if this would become a proper
|
|
3D rendering engine.
|
|
|
|
Despite what might be potentially undiscovered performance issues, Elm was
|
|
pleasant to work with, and it sold me two ideas; functional programming and
|
|
minimalism. The touted safety and correctness were noticeable, the learning
|
|
curve wasn't as steep, and using the Elm debugger to be able to step back in
|
|
time through the game was eye-opening in showing what's possible when you
|
|
architect your state management with immutability in mind. It would be
|
|
interesting to see if a modern game engine could switch between the functional,
|
|
immutable data structures in a debug context and the cache-friendly mutable data
|
|
structures for improved performance in a release build. Thus boosting
|
|
productivity during development, while still remaining performant in the hands
|
|
of players.
|
|
|
|
** License
|
|
This project is licensed under the terms of the MIT license. For more
|
|
information, see the included LICENSE file.
|