Introduction Features
Definitions Principles The AI model
Teaching Register a class
Getting started P5 tutorial Three.js tutorial
Coding course Coding course II Coding for kids WebGL course AI exercises
Starter Worlds
Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds
Advanced search
Docs API docs
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.5
96 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 17 Sep 2023
Camera and Perspective
Tutorial 18.3
67 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 17 Sep 2023
Light and Material
Tutorial 18.8
94 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 17 Sep 2023
3D Custom Shapes
Tutorial 18.7
424 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 17 Sep 2023
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