Drag the background!

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.8
94 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 17 Sep 2023
3D Custom Shapes
Tutorial 18.7
426 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.
Tutorial 18.3
67 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 17 Sep 2023
Light and Material
Tutorial 18.5
96 runs ♦ 0 likes
By "Coding Train" p...  
Created: 9 Sep 2018
Modified: 17 Sep 2023
Camera and Perspective


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

  • The Coding Train videos describe coding JavaScript on localhost or on the p5.js Web Editor. Some things do not apply to Ancient Brain.
  • As always, use the Docs menu for help when coding on Ancient Brain.


Get started:

The background is a program, showing the JavaScript graphics used on this site.
The globes light up when you log in.
 
Font:

Users retain ownership of user content.

Platforms      Stats      The name      Terms and conditions

Call for partners      Contact

Call for partners!
Ancient Brain is looking for a partner to co-write a JavaScript coding book for schools, to be used worldwide. This would be a course for students in learning to code from scratch. The book and course will be integrated into the Ancient Brain site. This is an opportunity for someone looking to develop a course and textbook to partner with a site to promote it. Read more.