In 3D rendering, a material determines how a surface responds to light. p5’s WEBGL mode supports ambient, emissive, normal, and specular materials.
An ambient material responds to ambient light only. A specular material responds to any light source. In p5, an emissive material displays its color regardless of light source. In other contexts, typically an emissive material emits light. A normal material visualizes the direction each part of the surface faces. A normal material does not respond to light.
Ambient and emissive materials can be combined with each other. They can also be combined with fill and stroke. Fill sets a base color for the surface, and stroke sets the color for the object’s vertices.
Additionally, texture() wraps an object with an image. The model and image texture in this example are from NASA’s collection.
Related Examples
![](/_astro/11_3D-00_Geometries-thumbnail.CIGxWPlb_ZrLzA7.webp)
No alt text
Geometries
Draw 3D shapes, including a custom model.
![](/_astro/11_3D-01_Custom_Geometry-thumbnail.hOI_CIjS_kGC1q.webp)
No alt text
Custom Geometry
Generate a 3D shape programmatically.
![](/_astro/11_3D-02_Materials-thumbnail.BH6mGApZ_Z1y8uVN.webp)
No alt text
Materials
Change 3D objects' color, texture, and how they respond to light.
![](/_astro/11_3D-03_Orbit_Control-thumbnail.-zEVdjrU_Zua1gI.webp)
No alt text
Orbit Control
Control the camera with the mouse.
![](/_astro/11_3D-04_Filter_Shader-thumbnail.BSzfvPSy_Z7FNLg.webp)
No alt text
Filter Shader
Manipulate imagery with a shader.
![](/_astro/11_3D-05_Adjusting_Positions_With_A_Shader-thumbnail.D6XjOyN8_1AWOoU.webp)
No alt text
Adjusting Positions with a Shader
Use a shader to adjust shape vertices.
![](/_astro/11_3D-06_Framebuffer_Blur-thumbnail.Ck8s9IeK_Z1r2Q1P.webp)
No alt text
Framebuffer Blur
Simulate a camera's depth of field.