WebGL course

This is a course to teach JavaScript 3D graphics ("WebGL") programming on Ancient Brain.

It is based on the WebGL video series by Daniel Shiffman at The Coding Train. The Shiffman code has been ported (with permission under MIT licence) to Ancient Brain "Worlds" that can be run and edited on Ancient Brain in the browser.

When you are finished this course, you will be able to make Worlds like the following. Click to run them.

Tutorial 18.3
12 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 9 Sep 2018
Light and Material
Tutorial 18.5
39 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 2 Jun 2019
Camera and Perspective
Tutorial 18.8
22 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 9 Sep 2018
3D Custom Shapes
Tutorial 18.7
276 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 11 Sep 2018
Tutorial 18.7 with full canvas, resized model, sound. Texture on box is image from another user.


Pre-requisite: Familiarity with coding on Ancient Brain


Contents

  1. Introduction to WebGL in p5.js
  2. 3D Geometries
  3. Light and Material
  4. Texture
  5. Camera and Perspective
  6. createGraphics() as WebGL Texture
  7. Loading OBJ Model
  8. 3D Custom Shapes


Notes


Get started:

Step 1 of 8