In p5.js, beginGeometry() and endGeometry() are essential functions for optimizing 3D rendering by grouping shapes into reusable models. These functions operate within WebGL mode, requiring a canvas created with createCanvas(width, height, WEBGL).

beginGeometry() initiates a collection phase where subsequent 3D primitives, such as spheres or cones, are agggregated. endGeometry() concludes this phase, returning a p5.Geometry object that encapsulates the combined shapes. This model can be rendered repeatedly using the model() function, enhancing performance for static or complex 3D scenes.

Key Benefit: Improves rendering speed for unchanging 3D models, ideal for scenarios involving frequent redraws.

Note: These functions only work in WebGL mode.

Syntax Explanation

Both functions take no parameters:

beginGeometry(); // Start collecting shapes
// Add 3D shapes here (e.g., sphere(), cone())
let customModel = endGeometry(); // End collection and store the model

Basic Usage

Step 1: Enable 3D Mode (WebGL)

function setup() {
  createCanvas(400, 400, WEBGL); // Enable 3D rendering
}

Step 2: Build a Model with Geometry Functions

let customModel;

function setup() {
  createCanvas(400, 400, WEBGL);
  beginGeometry(); // Start shape collection
  sphere(25); // Add a sphere with radius 25
  translate(50, 0, 0); // Move coordinate system to avoid overlap
  cone(15, 40); // Add a cone with base radius 15 and height 40
  customModel = endGeometry(); // Store the assembled model
}

Step 3: Render the Model

function draw() {
  background(180); // Set background color
  orbitControl(); // Enable mouse interaction for 3D view
  lights(); // Add lighting for depth
  model(customModel); // Draw the model
}

Complete Example Code

let customModel;

function setup() {
  createCanvas(400, 400, WEBGL);
  beginGeometry();
  sphere(25);
  translate(50, 0, 0);
  cone(15, 40);
  customModel = endGeometry();
}

function draw() {
  background(180);
  orbitControl();
  lights();
  model(customModel);
}

Advanced Example: Animated Star Cluster

This example creates a rotating cluster of 12 cones with dynamic colors and lighting.

let starModel;
let rotationAngle = 0;

function setup() {
  createCanvas(600, 600, WEBGL);
  starModel = createStarCluster(); // Generate the model
}

function draw() {
  background(0); // Black background
  orbitControl(); // Mouse-controlled view
  
  // Lighting setup
  ambientLight(100); // Ambient light for overall brightness
  pointLight(255, 255, 255, 150, -150, 200); // Directional light source
  
  // Rotation animation
  rotationAngle += 0.02;
  rotateX(rotationAngle * 0.7); // Rotate around X-axis
  rotateY(rotationAngle); // Rotate around Y-axis
  
  // Dynamic color based on rotation
  colorMode(HSL);
  fill((rotationAngle * 40) % 360, 80, 60); // Hue cycles with angle
  
  model(starModel); // Render the cluster
}

// Function to build the star cluster model
function createStarCluster() {
  beginGeometry();
  
  for (let idx = 0; idx < 12; idx++) {
    push(); // Save current coordinate system
    
    // Calculate angle for even distribution
    let angle = radians(idx * 30); // 30-degree increments
    rotateZ(angle); // Rotate around Z-axis
    
    // Position cone away from center
    translate(100, 0, 0);
    
    // Draw a cone
    cone(12, 35);
    
    pop(); // Restore coordinate system
  }
  
  return endGeometry(); // Return the completed model
}

Features of this example:

• Radial Structure: Uses a loop to poistion 12 cones evenly in a circle.
• Dynamic Rotation: Applies continuous rotation around X and Y axes to animation.
• Color Animation: Changes hue based on rotation angle using HSL color mode.
• Lighting Effects: Combines ambient and point lights to enhance 3D realism.