A free and open-source JavaScript library for accessible creative coding
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Complete 3D graphics system with primitives, lighting, materials, shaders, cameras, and advanced WebGL features for creating immersive 3D experiences.
Creating 3D-enabled canvas and basic 3D functionality.
/**
* Create canvas with WebGL renderer for 3D graphics
* @param {number} width - Canvas width
* @param {number} height - Canvas height
* @param {string} WEBGL - Use WEBGL constant for 3D mode
*/
function createCanvas(width, height, WEBGL);Basic 3D geometric primitives for building 3D scenes.
/**
* Draw 3D box
* @param {number} [width] - Box width
* @param {number} [height] - Box height
* @param {number} [depth] - Box depth
* @param {number} [detailX] - X-axis detail level
* @param {number} [detailY] - Y-axis detail level
*/
function box(width, height, depth, detailX, detailY);
/**
* Draw sphere
* @param {number} [radius] - Sphere radius
* @param {number} [detailX] - Horizontal detail level
* @param {number} [detailY] - Vertical detail level
*/
function sphere(radius, detailX, detailY);
/**
* Draw cylinder
* @param {number} [radius] - Cylinder radius
* @param {number} [height] - Cylinder height
* @param {number} [detailX] - Radial detail level
* @param {number} [detailY] - Height detail level
* @param {boolean} [bottomCap] - Include bottom cap
* @param {boolean} [topCap] - Include top cap
*/
function cylinder(radius, height, detailX, detailY, bottomCap, topCap);
/**
* Draw cone
* @param {number} [radius] - Cone base radius
* @param {number} [height] - Cone height
* @param {number} [detailX] - Radial detail level
* @param {number} [detailY] - Height detail level
* @param {boolean} [cap] - Include base cap
*/
function cone(radius, height, detailX, detailY, cap);
/**
* Draw ellipsoid
* @param {number} [radiusX] - X-axis radius
* @param {number} [radiusY] - Y-axis radius
* @param {number} [radiusZ] - Z-axis radius
* @param {number} [detailX] - X-axis detail level
* @param {number} [detailY] - Y-axis detail level
*/
function ellipsoid(radiusX, radiusY, radiusZ, detailX, detailY);
/**
* Draw torus
* @param {number} [radius] - Torus radius
* @param {number} [tubeRadius] - Tube radius
* @param {number} [detailX] - Radial detail level
* @param {number} [detailY] - Tubular detail level
*/
function torus(radius, tubeRadius, detailX, detailY);
/**
* Draw plane
* @param {number} [width] - Plane width
* @param {number} [height] - Plane height
* @param {number} [detailX] - Width detail level
* @param {number} [detailY] - Height detail level
*/
function plane(width, height, detailX, detailY);Extended transformation functions for 3D space.
/**
* Translate in 3D space
* @param {number} x - X translation
* @param {number} y - Y translation
* @param {number} z - Z translation
*/
function translate(x, y, z);
/**
* Rotate around X-axis
* @param {number} angle - Rotation angle
*/
function rotateX(angle);
/**
* Rotate around Y-axis
* @param {number} angle - Rotation angle
*/
function rotateY(angle);
/**
* Rotate around Z-axis
* @param {number} angle - Rotation angle
*/
function rotateZ(angle);
/**
* Scale in 3D space
* @param {number} s - Uniform scale or X scale
* @param {number} [y] - Y scale
* @param {number} [z] - Z scale
*/
function scale(s, y, z);Camera control and projection settings for 3D scenes.
/**
* Set camera position and orientation
* @param {number} [x] - Camera X position
* @param {number} [y] - Camera Y position
* @param {number} [z] - Camera Z position
* @param {number} [centerX] - Look-at X coordinate
* @param {number} [centerY] - Look-at Y coordinate
* @param {number} [centerZ] - Look-at Z coordinate
* @param {number} [upX] - Up vector X component
* @param {number} [upY] - Up vector Y component
* @param {number} [upZ] - Up vector Z component
*/
function camera(x, y, z, centerX, centerY, centerZ, upX, upY, upZ);
/**
* Set perspective projection
* @param {number} [fovy] - Field of view angle in Y direction
* @param {number} [aspect] - Aspect ratio (width/height)
* @param {number} [near] - Near clipping plane distance
* @param {number} [far] - Far clipping plane distance
*/
function perspective(fovy, aspect, near, far);
/**
* Set orthographic projection
* @param {number} [left] - Left clipping plane
* @param {number} [right] - Right clipping plane
* @param {number} [bottom] - Bottom clipping plane
* @param {number} [top] - Top clipping plane
* @param {number} [near] - Near clipping plane
* @param {number} [far] - Far clipping plane
*/
function ortho(left, right, bottom, top, near, far);
/**
* Set frustum projection
* @param {number} [left] - Left clipping plane
* @param {number} [right] - Right clipping plane
* @param {number} [bottom] - Bottom clipping plane
* @param {number} [top] - Top clipping plane
* @param {number} [near] - Near clipping plane
* @param {number} [far] - Far clipping plane
*/
function frustum(left, right, bottom, top, near, far);
/**
* Create camera object
* @returns {p5.Camera} Camera object
*/
function createCamera();Lighting system for realistic 3D rendering.
/**
* Create ambient light
* @param {...(number|string|p5.Color)} args - Light color values
*/
function ambientLight(...args);
/**
* Create directional light
* @param {...(number|string|p5.Color|p5.Vector)} args - Color and direction values
*/
function directionalLight(...args);
/**
* Create point light
* @param {...(number|string|p5.Color)} args - Color and position values
*/
function pointLight(...args);
/**
* Create spot light
* @param {...(number|string|p5.Color|p5.Vector)} args - Color, position, direction, angle, concentration values
*/
function spotLight(...args);
/**
* Remove all lights from scene
*/
function noLights();Material properties and shader system for advanced rendering.
/**
* Set ambient material properties
* @param {...(number|string|p5.Color)} args - Material color values
*/
function ambientMaterial(...args);
/**
* Set emissive material properties
* @param {...(number|string|p5.Color)} args - Material color values
*/
function emissiveMaterial(...args);
/**
* Set specular material properties
* @param {...(number|string|p5.Color)} args - Material color values
*/
function specularMaterial(...args);
/**
* Set material shininess
* @param {number} shine - Shininess value
*/
function shininess(shine);
/**
* Apply normal material (shows surface normals as colors)
*/
function normalMaterial();
/**
* Apply texture to geometry
* @param {p5.Image|p5.MediaElement|p5.Graphics} tex - Texture image
*/
function texture(tex);
/**
* Set texture coordinate mode
* @param {string} mode - NORMAL or IMAGE
*/
function textureMode(mode);
/**
* Set texture wrapping behavior
* @param {string} wrapX - Horizontal wrap mode (CLAMP, REPEAT, MIRROR)
* @param {string} [wrapY] - Vertical wrap mode
*/
function textureWrap(wrapX, wrapY);
/**
* Load shader from files
* @param {string} vertFilename - Vertex shader file path
* @param {string} fragFilename - Fragment shader file path
* @param {function} [callback] - Success callback
* @param {function} [errorCallback] - Error callback
* @returns {p5.Shader} Shader object
*/
function loadShader(vertFilename, fragFilename, callback, errorCallback);
/**
* Create shader from source code
* @param {string} vertSource - Vertex shader source
* @param {string} fragSource - Fragment shader source
* @returns {p5.Shader} Shader object
*/
function createShader(vertSource, fragSource);
/**
* Apply shader to geometry
* @param {p5.Shader} s - Shader to apply
*/
function shader(s);
/**
* Reset to default shader
*/
function resetShader();Key classes for advanced 3D graphics programming.
/**
* 3D camera with position, orientation, and projection controls
*/
class p5.Camera {
/**
* Move camera to position
* @param {number} x - X position
* @param {number} y - Y position
* @param {number} z - Z position
*/
move(x, y, z);
/**
* Set camera look-at target
* @param {number} x - Target X coordinate
* @param {number} y - Target Y coordinate
* @param {number} z - Target Z coordinate
*/
lookAt(x, y, z);
/**
* Orbit camera around point
* @param {number} radius - Orbit radius
* @param {number} theta - Horizontal angle
* @param {number} phi - Vertical angle
*/
orbit(radius, theta, phi);
/**
* Copy camera state from another camera
* @param {p5.Camera} cam - Camera to copy from
*/
copy(cam);
}
/**
* GLSL shader program wrapper
*/
class p5.Shader {
/**
* Set uniform variable value
* @param {string} uniformName - Uniform variable name
* @param {*} data - Uniform value
*/
setUniform(uniformName, data);
}
/**
* 3D geometry container with vertices, faces, normals, UVs
*/
class p5.Geometry {
/** Array of vertex positions */
vertices;
/** Array of face indices */
faces;
/** Array of normal vectors */
vertexNormals;
/** Array of UV coordinates */
uvs;
/**
* Compute face and vertex normals
*/
computeNormals();
/**
* Normalize geometry to unit size
* @returns {p5.Geometry} This geometry for chaining
*/
normalize();
}
/**
* WebGL texture wrapper for images, videos, graphics
*/
class p5.Texture {
/**
* Update texture from source
*/
update();
}
/**
* Off-screen rendering target
*/
class p5.Framebuffer {
/** Framebuffer width */
width;
/** Framebuffer height */
height;
/**
* Begin drawing to framebuffer
*/
begin();
/**
* End drawing to framebuffer
*/
end();
/**
* Get framebuffer as texture
* @returns {p5.Texture} Framebuffer texture
*/
color;
/**
* Get depth buffer as texture
* @returns {p5.Texture} Depth texture
*/
depth;
}See complete 3D graphics examples, shader tutorials, and WebGL-specific documentation in the p5.js reference.
Install with Tessl CLI
npx tessl i tessl/npm-p5