Avokadoen / webgl_playground

Typescript, rxjs and webgl playground

WebGL playground 🖼️

This is a little webgl project to learn some basic webgl and have some fun while doing so. :- )

current features

• Loading assets (shaders) using rxjs (reactive loading)
• Basic mesh instancing

Gifs! 👀

• 5. march 2020

  • cube rotating

• 7. march

  • mesh instancing

• 20. march

  • camera controls

Prerequisite

You will need npm to install dependencies

How to run 🚀

clone

git clone [e-mail]:Avokadoen/webgl_playground.git

install dependencies

npm install

serve the project using webpack

npm run start

go to localhost:8080

Sources 📖

• Mozilla webgl tutorial

  • This was the main source, and a lot of the code is very much copy paste from this awesome tutorial

• Pointer locking

  • To enable more userfriendly free look camera i use the pointer lock API documented by mozilla