davcri / webgl-study

"WebGL Programming Guide" done in modern ES6 JS

WebGL introduction

Source code created while studying the WebGL Programming Guide book.

Why WebGL?

WebGL powers many web game frameworks: Phaser, Pixi.JS, Construct, BabylonJS, three.js, etc...

WebGL can be used for online data visualizations, simulators, games, virtual museums, interactive configurators and many other things like:

• the SpaceX ISS web simulation
• British Museum & Google - https://britishmuseum.withgoogle.com/
• https://www.nike-react.com/
• https://www.oeufkicetou.fr/
• https://experiments.withgoogle.com/collection/chrome

Run the project

npm install # only the first time
npm run start

or the shortcut for VSCode: CTRL+SHIFT+B

Why I created this repo

I wanted some quality of life features while studying WebGL, so I added:

• Hot reload
• ES6 modules
• Clean, updated and documented code
  • Enforced style with ESLint airbnb code style
  • JSDoc for most important classes/methods
• Some fixes to the libraries provided by the book WebGL Programming Guide:
  • Fixed spelling errors
  • Converted CRLF to LF
  • Updated JSDoc
• VSCode:
  • Autocompletion working out of the box
  • Firefox debugger task (needs the Firefox debugger extensions)
  • Launch shortcut (CTRL+SHIFT+B)

Resources

• Book sources - https://github.com/Lapsec/webgl-programming-guide-source-code
• https://www.khronos.org/registry/webgl/specs/1.0.3/
• https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
• MDN Transformation matrices
• Typed array objects - ECMA standard - http://www.ecma-international.org/ecma-262/6.0/#sec-typedarray-objects