The WEBGL-Renderer (p5.js) • tim rodenbröker creative coding

The WEBGL-Renderer (p5.js)

Courses / The Third Dimension / The WEBGL-Renderer (p5.js)

Please note that this element is still in development

P5.js users beware!

In Processing the 3D renderer is called P3D. In p5.js, however, it is called WEBGL.

In P5.js you also need to specify a third parameter in the createCanvas()-function to indicate you want to work in 3D.
WEBGL and P3D have the same use case but there are a few differences how the renderers work and what they can handle.

//P5.js
createCanvas(500, 500, WEBGL);

Related Links

Published by Tim on Friday November 4, 2022

Last modified on January 18th, 2023 at 11:09

← The P3D-Renderer (Processing)

3D Matrix Basics →
  1. The P3D-Renderer (Processing)
  2. The WEBGL-Renderer (p5.js)
  3. 3D Matrix Basics
  4. 3D Transformations
  5. push() and pop() recap
  6. 3D Geometry
  7. 3D Geometry (Examples)
  8. Lighting your Scene
  9. Directional Light
  10. The Camera
  11. Wrapping Up