CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-p5

A free and open-source JavaScript library for accessible creative coding

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

webgl-3d.mddocs/

WebGL & 3D Graphics

Complete 3D graphics system with primitives, lighting, materials, shaders, cameras, and advanced WebGL features for creating immersive 3D experiences.

Capabilities

3D Canvas Setup

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);

3D Primitive Shapes

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);

3D Transformations

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 and Projection

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

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();

Materials and Shaders

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();

3D Classes

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

docs

color-system.md

core-structure.md

dom-manipulation.md

drawing-shapes.md

events-input.md

image-processing.md

index.md

io-data.md

math-vectors.md

transforms.md

typography.md

utilities.md

webgl-3d.md

tile.json