Texture of Box in WEBGL works in Windows but crashes on Mac

[AlexP-N]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• p5.strands
• WebGL
• DevOps, Build process, Unit testing
• Internationalization (i18n)
• Friendly Errors
• Other (specify if possible)

p5.js version

1.11.13

Web browser and version

Chrome - 148.0.7778.179 (Official Build) (arm64), Safari - 18.5 (20621.2.5.11.8)

Operating system

Windows/MacOSX

Steps to reproduce this

Steps:

1. Run my code snippet below

Snippet:

Code Expected Behavior: Camera image is broken up into cubes and each cube rises and falls based on the amplitude of the mp3 being played.

Behavior on Windows using EDGE: Works with minor delay but performance is good
Behavior on Windows using Chrome: Works with NO delay and performance is top notch
Behavior on MacBook using Safari: Cubes do not rise and fall at all
Behavior on MacBook using Chrome: Code works for a few seconds before crashing

// Paste your code here :)

let boxSize = 80;
let factor = 0.08;
let speed = 0.05;
let camImg;
let slicedImg;
let song;
let amp;

function preload() {
  //Load audio file
  song = loadSound("

[jupiter.mp3](https://github.com/user-attachments/files/28291692/jupiter.mp3)

");
}

function setup() {
  createCanvas(800, 800, WEBGL);
  //enable camera
  camera(0, 200, height / 2 / tan(PI / 6), 0, 0, 0, 0, 1, 0);
  camImg = createCapture(VIDEO);
  camImg.size(width, height);
  camImg.hide();

  //Prep amp of song
  song.play();
  amp = new p5.Amplitude();
}
function draw() {
  background(220);
  ambientLight(100);
  directionalLight(255, 0, 0, 0.25, 0.25, 0);
  pointLight(0, 0, 255, -width / 2 + 100, -height / 2 + 100, 200);
  for (let x = -width / 2; x < width / 2; x += boxSize) {
    for (let y = -height / 2; y < height / 2; y += boxSize) {
      push();
      translate(x, y, 0);
      depth = constrain(
        noise(
          x * factor + frameCount * speed,
          y * factor + frameCount * speed
        ) * 300,
        0,
        1000
      );

      let vol = amp.getLevel();
      depth *= vol * 20;
      slicedImg = camImg.get(
        floor(x + width / 2),
        floor(y + height / 2),
        boxSize,
        boxSize
      );
      texture(slicedImg);
      box(boxSize, boxSize, depth);
      pop();
    }
  }
}

[davepagurek]

I gave this a run on my Mac and it seemed to run for a while, but I expect if there's a crash after a certain point, it may be because get() returns a new p5.Image each time, which means uploading a new texture to the GPU, never to be used again. If instead of using get() you call createFramebuffer({ width: boxSize, height: boxSize }) at the start to make a reusable texture, and then you draw camImg to that every frame instead so that you always have texture(yourFramebuffer), does that run without it crashing? (createGraphics would work too.)