Graphics with WebGL

This is an implementation of the demos in Learn OpenGL using JavaScript (more specifically TypeScript) and WebGL 2.

This does not aim to be a one-for-one replication of the Learn OpenGL repository just in JavaScript. Instead, it is simply an attempt to learn graphics programming by going through the Learn OpenGL book.

N/B: You can download a PDF version of the contents of Learn OpenGL here

I intend to go through the following parts of the book:

• Part I - Getting started (done)
• Part II - Lighting (done)
• Part III - Model Loading (done)
• Part IV - Advanced OpenGL (in progress)
• Part VIII - 2D Game (done)

Dependencies

• glMatrix - Fast Javascript matrix and vector math library
• Assimpts - For interfacing with the C++ Assimp (Asset Importer Library) (a library that handles importation of 3D models and supports many different file formats) in TypeScript
• Svelte and SvelteKit - For state management, routing and navigation for the different scenes
• Lucide (for Svelte) - For the few GUI icons used
• TailwindCSS - For styling
• Tauri - Here, it is simply used to package the web application into a native executable and run it in a native window. This makes the application more similar to Learn OpenGL (the demos are rendered in native windows).

Running locally

This requires pnpm be installed on your system. Refer to the installation instructions if you don't have it.

You can optionally install Rust to run the application in a native window using Tauri.

Here are the steps:

1. Clone the repository

   git clone https://gitlab.com/learn-webgl-graphics-programming/graphics-with-webgl-svelte
   

   Alternatively, you can download the repository's code in a zip file from the GitLab (or GitHub) website and extract it to a location of your choice.
2. Install dependencies using pnpm

   pnpm install
   

3. Run the application using either:

   # For running the web application
   pnpm dev
   

   or:

    # To run the application in a native window
   pnpm tauri dev
   

Recommended IDE Setup

VS Code + Svelte + (optionally) Tauri and rust-analyzer.

Helpful Resources

• The MDN articles on WebGL 2
• The WebGL2 fundamentals website
• The MDN articles on the Web Audio API (for the game)
• DevDocs, for helping me access the information from the above resources (and more) while offline