WebGL course

This is a series of Ancient Brain "Worlds" based on the WebGL course (video tutorials) by Daniel Shiffman at The Coding Train.

This is a course to teach WebGL with P5. It assumes you know some JavaScript and P5. If not, do the Foundations of Programming course first.

The Coding Train course provides source code for the video tutorials. The code has been ported here to Ancient Brain "Worlds" that can be run and edited in the browser. Done with permission of The Coding Train under MIT licence. On Ancient Brain, you can clone, edit, run, host, share, comment, like and embed these Worlds. You can upload your own resources (images, music, etc.) to use in these Worlds.

Here is the kind of World you will be able to create when you are finished this course:


Tutorial 18.7
By "Coding Train" project
Tutorial 18.7 with full canvas, resized model, sound. Texture on box is image from another user.

Notes

  • If you are unfamiliar with the Ancient Brain platform, work through the Start Tutorial first.

  • This course uses the P5 graphics library. The "Docs" menu above provides a quick link to the P5 docs to consult when coding.

  • For more on The Coding Train, see their site and YouTube channel.

The course

Tutorial Title Videos Worlds
18.1 Introduction to WebGL in p5.js

18.2 3D Geometries

18.3 Light and Material

18.4 Texture

18.5 Camera and Perspective

18.6 createGraphics() as WebGL Texture

18.7 Loading OBJ Model

18.8 3D Custom Shapes



The background is a program, showing the JavaScript graphics used on this site.
 
Font:

© Ancient Brain Ltd. All rights reserved.

Ancient Brain ™ is a trademark of Ancient Brain Ltd.

Beta      Bug bounty      Contact      Stats      The name      Terms and conditions