Introduction Features
Definitions How to run Worlds
Teaching practicals The AI model
How to code
How to code P5 Tutorial (P5)
How to code Three.js Tutorial (Three.js)
Coding course Coding course II Coding for kids WebGL course AI exercises
Starter Worlds
Editor's Choice Showcase Worlds Multi-user Worlds
P5 Editor Worlds Coding Train Worlds Random Worlds
Advanced search
JavaScript P5 Three.js
AB APIs
AB World and Mind AB runs AB legacy
Resources Ace editor
Register Forgot password
 

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
56 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 9 Sep 2018
Light and Material
Tutorial 18.5
84 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 2 Jun 2019
Camera and Perspective
Tutorial 18.7
375 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.
Tutorial 18.8
78 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 9 Sep 2018
3D Custom Shapes


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