<commit_before># First Person 3D Navigation in Elm

First-person navigation in a simple 3D world, written in Elm. The code ended up
extremely short and simple thanks to [FRP][frp], [`elm-webgl`][webgl], and Elm's
[easy interop with JS][interop]!

[frp]: http://elm-lang.org/learn/What-is-FRP.elm
[webgl]: https://github.com/johnpmayer/elm-webgl
[interop]: https://github.com/evancz/elm-html-and-js

Make sure you have the latest version of Chrome or Firefox and then click the
following image to try out the **[live demo][demo]**:

[![Live Demo](resources/ScreenShot.png)][demo]

[demo]: http://evancz.github.io/first-person-elm/

Without a specialized 3D framework, just [the basic WebGL bindings][webgl], this
took about [300 lines of Elm][src]. I tried to keep the code super simple so it
is easy to fork and build cooler stuff! This project is also architected to
scale nicely as you add more entities.

[src]: https://github.com/evancz/first-person-elm/tree/master/src

We needed an additional [~95 lines of JS][file] to use the experimental
fullscreen and [Pointer Lock][lock] APIs. This is an experiment in setting up
[ports][interop] in a general and reusable way. The goal is a general "Port
Handler" pattern that lets you pipe signals out to JS to use some native API or
have some side-effect. I hope we can iterate on this idea to make it even
simpler for Elm code to interact with JS!

[lock]: https://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock
[file]: https://github.com/evancz/first-person-elm/blob/master/resources/PointerLock.js

## Build Locally

After installing [the Elm Platform](https://github.com/elm-lang/elm-platform),
run the following sequence of commands:

```bash
git clone https://github.com/evancz/first-person-elm.git
cd first-person-elm
elm-get install
elm --make --only-js --src-dir=src Main.elm
elm-server
```

And then open [http://localhost:8000](http://localhost:8000) to see it in action!

## Possible Extensions

  * Add a [skybox][skybox]
  * Make it possible to crouch
  * Add collisions with boxes
  * Make it possible to jump onto boxes
  * Try to generate interesting shapes to add to the world
  * Procedurally generate terrain
[skybox]: http://en.wikipedia.org/wiki/Skybox_(video_games)<commit_msg>Add reference to @kfish's cool shader stuff :)<commit_after># First Person 3D Navigation in Elm

First-person navigation in a simple 3D world, written in Elm. The code ended up
extremely short and simple thanks to [FRP][frp], [`elm-webgl`][webgl], and Elm's
[easy interop with JS][interop]!

[frp]: http://elm-lang.org/learn/What-is-FRP.elm
[webgl]: https://github.com/johnpmayer/elm-webgl
[interop]: https://github.com/evancz/elm-html-and-js

Make sure you have the latest version of Chrome or Firefox and then click the
following image to try out the **[live demo][demo]**:

[![Live Demo](resources/ScreenShot.png)][demo]

[demo]: http://evancz.github.io/first-person-elm/

Without a specialized 3D framework, just [the basic WebGL bindings][webgl], this
took about [300 lines of Elm][src]. I tried to keep the code super simple so it
is easy to fork and build cooler stuff! This project is also architected to
scale nicely as you add more entities.

[src]: https://github.com/evancz/first-person-elm/tree/master/src

We needed an additional [~95 lines of JS][file] to use the experimental
fullscreen and [Pointer Lock][lock] APIs. This is an experiment in setting up
[ports][interop] in a general and reusable way. The goal is a general "Port
Handler" pattern that lets you pipe signals out to JS to use some native API or
have some side-effect. I hope we can iterate on this idea to make it even
simpler for Elm code to interact with JS!

[lock]: https://developer.mozilla.org/en-US/docs/WebAPI/Pointer_Lock
[file]: https://github.com/evancz/first-person-elm/blob/master/resources/PointerLock.js

## Build Locally

After installing [the Elm Platform](https://github.com/elm-lang/elm-platform),
run the following sequence of commands:

```bash
git clone https://github.com/evancz/first-person-elm.git
cd first-person-elm
elm-get install
elm --make --only-js --src-dir=src Main.elm
elm-server
```

And then open [http://localhost:8000](http://localhost:8000) to see it in action!

## Possible Extensions

  * [Use more exciting textures](https://github.com/kfish/elm-shadertoy)
  * Add a [skybox][skybox]
  * Make it possible to crouch
  * Add collisions with boxes
  * Make it possible to jump onto boxes
  * Try to generate interesting shapes to add to the world
  * Procedurally generate terrain

[skybox]: http://en.wikipedia.org/wiki/Skybox_(video_games)
{'fraction_non_alphanumeric': 0.11224268689057422, 'fraction_numerical': 0.006933911159263272, 'mean_word_length': 4.405152224824356, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 15, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5023636', 'n_tokens_mistral': 1483, 'n_tokens_neox': 1401, 'n_words': 550}