Awesome

WebGL Seed

A simple hello triangle example you could use to as a basis when starting WebGL.

• 🔳 Codepen Example

• 💬 Blog Post

Setup

First install:

• Git

• Node.js

• A Text Editor such as Visual Studio Code.

Then type the following in any terminal your such as VS Code's Integrated Terminal.

# 🐑 Clone the repo
git clone https://github.com/alaingalvan/webgl-seed

# 💿 go inside the folder
cd webgl-seed

# 🔨 Start building the project
npm start

Refer to this blog post on designing web libraries and apps for more details on Node.js, packages, etc.

Project Layout

As your project becomes more complex, you'll want to separate files and organize your application to something more akin to a game or renderer, check out this post on game engine architecture and this one on real time renderer architecture for more details.

├─ 📂 node_modules/   # 👶 Dependencies
│  ├─ 📁 gl-matrix      # ➕ Linear Algebra
│  └─ 📁 ...            # 🕚 Other Dependencies (TypeScript, Webpack, etc.)
├─ 📂 src/            # 🌟 Source Files
│  ├─ 📄 renderer.ts    # 🔺 Triangle Renderer
│  └─ 📄 main.ts        # 🏁 Application Main
├─ 📄 .gitignore      # 👁️ Ignore certain files in git repo
├─ 📄 package.json    # 📦 Node Package File
├─ 📄 license.md      # ⚖️ Your License (Unlicense)
└─ 📃readme.md        # 📖 Read Me!

Some key dependencies are:

• gl-matrix - WebGL's best linear algebra library, perfect for people used to linear algebra libraries like GLM or the built in GLSL data structures.

• Webpack - Compiles our TypeScript files and creates binaries for us to use.

• TypeScript - JavaScript with types, makes it significantly easier to program web apps with instant autocomplete and type checking.