diff --git a/README.md b/README.md index 765d19d..eb5e7c1 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,60 @@ -# Simple FPS Rendering Engine +# FP Rendering Engine ## About -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. The last major work done -on this was in 2019, however, it was just thrown into a git repo without much -consideration, along with other another small graphics project. Here's the -original [project](https://github.com/JosephFerano/elm-graphics) +TLDR; [Play it here](https://ferano.io/3d-fp/ + +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 First Person camera, as well as being implemented using +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. The last major work done on this was in 2019, however, it +was just thrown into a git repo without much consideration, along with other +another small graphics project. I felt it deserved a little bit more TLC than +that. Here's the original +[project](https://github.com/JosephFerano/elm-graphics). + +## Showcase !["FPS Scene"](screenshots/elm-fps.png) -## Update 2023 +## Building with Elm 0.18.0 + +To install the binaries manually, follow this short guide; +- [Install Binaries](https://sirfitz.medium.com/install-elm-0-18-0-in-2021-3f64ce298801) + +If you want to use `npm` instead; +- `npm install -g elm@elm0.19.0` + +If you use `npm`, note that you will likely need an older version of Node.js, so +it is recommended to use [`npm`](https://github.com/nvm-sh/nvm) for that. + +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 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](https://sirfitz.medium.com/install-elm-0-18-0-in-2021-3f64ce298801) - -If you want to use `npm`, here's a quick guide; -- [Install with npm](https://discourse.elm-lang.org/t/downgrade-to-v18/2005/2) - -Note that for `npm`, you will likely need an older version of Node.js, so it -is recommended to use the [`npm`](https://github.com/nvm-sh/nvm). - +on the off chance someone actually wants to build this. ## Running -In order to be able to load the textures and models, the website must be served +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 [SOP](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) and [CORS](https://developer.mozilla.org/en-US/docs/Glossary/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; +If you have Python 3 installed, simply run `python3 -m http.server`. If you +would like to use `elm-reactor`, run the command and then click on `index.html` +in the nice project webview provided. ## Controls @@ -61,11 +64,11 @@ an HTTP server, you can use the following; - Robot Movement: `◀ ▼ ▲ ▶` -- Rotate Robot: `N and M` +- Rotate Robot: `N | M` -- Rotate Robot Arm: `Y and H` +- Rotate Robot Arm: `Y | H` -- Rotate Robot Hand: `U and J` +- Rotate Robot Hand: `U | J` ## License