Coding Train Live 109: WebGL with p5.js

TL;DR

Learn how to create 3D shapes with WebGL in p5.js, add lights and materials for realistic effects.

Transcript

good morning Tuesday morning a rare and special bonus episode of the coding train my name is something like rhymes with fan and something like that I'm here this is I'm saying bonus episode it's not really a bonus episode it's a little bit of a make up episode I am trying to make a commitment to doing a live stream per week one per week that's abou... Read More

Key Insights

• 👶 WebGL enables 3D graphics rendering in p5.js, offering a new dimension to creative coding projects.
• 🙂 Materials and lights play crucial roles in adding realism and visual effects to 3D shapes in the browser.
• 🙂 Understanding normal vectors, ambient light, and point lights enhances the depth and visual appeal of 3D scenes.

Questions & Answers

Q: What is the significance of normal vectors in 3D geometry?

Normal vectors define the direction of the surface and dictate how light reflects off an object for realistic shading effects.

Q: How does ambient light differ from point light in 3D rendering?

Ambient light uniformly illuminates all objects in the scene, while point lights emit light from a specific location, creating shadows and highlights.

Q: Can multiple light sources be used simultaneously in p5.js for 3D shapes?

It appears there may be limitations in the current p5.js version, where only one light source can affect the 3D scene.

Q: What role does specular material play in rendering realistic 3D objects?

Specular material enhances the shininess of objects by reflecting light in a specific direction, mimicking surfaces like metal or water.

Summary & Key Takeaways

• Introduced 3D geometry basics in p5.js, showcasing shapes like a torus and a sphere.

• Demonstrated the use of material to manipulate object colors affected by light sources.

• Explored point lights for creating realistic shadows and specular materials for shinier surfaces.