Building a Rotating 3D Cube with p5.js WebGL Renderer

Desired outcome

Create a simple, continuously rotating 3D cube rendered with p5.js using the WebGL renderer, complete with basic lighting and a controllable camera view.

Prerequisites

• A modern browser that supports WebGL (Chrome, Firefox, Safari, Edge).
• A text editor for HTML/JavaScript.
• p5.js library version 1.4.0 or later (the examples use the CDN link).
• Basic familiarity with HTML and JavaScript functions.

Procedure

1. Set up the HTML file

   Create a file named index.html and include the p5.js library from the CDN. Add a script tag for your sketch code.

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>p5.js Rotating Cube</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
   </head>
   <body>
     <script>
       // sketch code goes here
     </script>
   </body>
   </html>
   

2. Initialize the canvas with WEBGL

   In the setup() function, call createCanvas with the third argument WEBGL. This tells p5.js to use the WebGL renderer.

   function setup() {
     createCanvas(400, 400, WEBGL);
   }
   

3. Define variables for rotation

   Declare a variable outside setup and draw to hold the current angle. This avoids recreating objects each frame.

   let angle = 0;
   

4. Add lighting

   Inside draw(), add an ambient light and a point light so the cube shows shading.

   function draw() {
     background(30);
     ambientLight(100, 100, 100);
     pointLight(250, 250, 250, 0, 0, 100);
     // ...
   }
   

5. Draw and rotate the cube

   Push the current transformation matrix, rotate around the X and Y axes, draw a box, then pop the matrix. Update the angle each frame.

   function draw() {
     background(30);
     ambientLight(100, 100, 100);
     pointLight(250, 250, 250, 0, 0, 100);
   
     rotateX(angle);
     rotateY(angle * 0.7);
     box(120);
   
     angle += 0.02;
   }
   

6. Adjust the camera (optional)

   If the cube appears clipped, call camera() before drawing to move the viewpoint back.

   function draw() {
     // ... lighting ...
     camera(0, 0, 300, 0, 0, 0, 0, 1, 0);
     // ... rotation and box ...
   }
   

Expected checks

• Open index.html in a browser. You should see a smoothly rotating colored cube.
• Open the browser console (F12) and type typeof p5.prototype.isWebGL === 'function' && p5.prototype.isWebGL(). It should return true, confirming the WebGL renderer is active.
• In the DevTools Elements panel, inspect the <canvas> element; its rendering context should read "webgl" or "webgl2".
• If the cube appears flat or missing, verify that the WEBGL flag was passed to createCanvas and that WebGL is not disabled in browser settings.

Limitations and practical verification

• WebGL may be disabled on some corporate or mobile browsers; test on at least two different browsers and a mobile device.
• Older browsers (e.g., Internet Explorer 11) lack WebGL support; the sketch will fall back to the 2D renderer, showing a static square instead of a rotating cube.
• Performance: keep the geometry simple (a single box) and limit lights to maintain >30 FPS on typical hardware.
• To verify frame rate, open the DevTools Performance panel, record a few seconds, and check that the FPS stays above 30.
• If you suspect context loss, you can access the underlying WebGL context via this._renderer._gl (advanced) and check for gl.getError() returning 0.

Recovery options

If WebGL fails to initialize:

1. Fallback to a 2D sketch by removing the WEBGL argument and drawing a square with rect().
2. Display a message to the user: if (!webglSupported()) { document.body.innerHTML = '

   WebGL not supported in this browser.

   '; }
3. Reload the page after enabling WebGL in browser flags (e.g., Chrome: chrome://flags/#enable-webgl).