WEBGL

One of the two render modes in p5.js, used for computationally intensive tasks like 3D rendering and shaders.

WEBGL differs from the default P2D renderer in the following ways:

• Coordinate System - When drawing in WEBGL mode, the origin point (0,0,0) is located at the center of the screen, not the top-left corner. See the tutorial page about coordinates and transformations.
• 3D Shapes - WEBGL mode can be used to draw 3-dimensional shapes like box(), sphere(), cone(), and more. See the tutorial page about custom geometry to make more complex objects.
• Shape Detail - When drawing in WEBGL mode, you can specify how smooth curves should be drawn by using a detail parameter. See the wiki section about shapes for a more information and an example.
• Textures - A texture is like a skin that wraps onto a shape. See the wiki section about textures for examples of mapping images onto surfaces with textures.
• Materials and Lighting - WEBGL offers different types of lights like ambientLight() to place around a scene. Materials like specularMaterial() reflect the lighting to convey shape and depth. See the tutorial page for styling and appearance to experiment with different combinations.
• Camera - The viewport of a WEBGL sketch can be adjusted by changing camera attributes. See the tutorial page section about cameras for an explanation of camera controls.
• Text - WEBGL requires opentype/truetype font files to be preloaded using loadFont(). See the wiki section about text for details, along with a workaround.
• Shaders - Shaders are hardware accelerated programs that can be used for a variety of effects and graphics. See the introduction to shaders to get started with shaders in p5.js.
• Graphics Acceleration - WEBGL mode uses the graphics card instead of the CPU, so it may help boost the performance of your sketch (example: drawing more shapes on the screen at once).

To learn more about WEBGL mode, check out all the interactive WEBGL tutorials in the "Tutorials" section of this website, or read the wiki article "Getting started with WebGL in p5".