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 learn 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 learn 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 adetail
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 learn 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 learn 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 "Learn" section of this website, or read the wiki article "Getting started with WebGL in p5".
Notice any errors or typos? Please let us know. Please feel free to edit src/core/constants.js and open a pull request!