p5.StorageBuffer

Updates the data in the buffer with new values. The new data must be in the same format as the data originally passed to createStorage().

let particles;
let computeShader;
let displayShader;
let instance;
const numParticles = 100;

async function setup() {
  await createCanvas(100, 100, WEBGPU);
  particles = createStorage(makeParticles(width / 2, height / 2));
  computeShader = buildComputeShader(simulate);
  displayShader = buildMaterialShader(display);
  instance = buildGeometry(drawParticle);
  describe('100 orange particles shooting outward.');
}

function makeParticles(x, y) {
  let data = [];
  for (let i = 0; i < numParticles; i++) {
    let angle = (i / numParticles) * TWO_PI;
    let speed = random(0.5, 2);
    data.push({
      position: createVector(x, y),
      velocity: createVector(cos(angle) * speed, sin(angle) * speed),
    });
  }
  return data;
}

function drawParticle() {
  sphere(2);
}

function simulate() {
  let data = uniformStorage(particles);
  let idx = index.x;
  data[idx].position = data[idx].position + data[idx].velocity;
}

function display() {
  let data = uniformStorage(particles);
  worldInputs.begin();
  let pos = data[instanceID()].position;
  worldInputs.position.xy += pos - [width / 2, height / 2];
  worldInputs.end();
}

function draw() {
  background(30);
  if (frameCount % 60 === 0) {
    particles.update(makeParticles(random(width), random(height)));
  }
  compute(computeShader, numParticles);
  noStroke();
  fill(255, 200, 50);
  shader(displayShader);
  model(instance, numParticles);
}

Reads data from a storage buffer back into JavaScript.

Copies data from the GPU to the CPU using a temporary buffer, so it must be awaited. Returns a Float32Array for number buffers, or an array of plain objects for struct buffers.

Note: This is a GPU -> CPU read, so calling it often (like every frame) can be slow.

let data;
let computeShader;

async function setup() {
  await createCanvas(100, 100, WEBGPU);

  data = createStorage(new Float32Array([1, 2, 3, 4]));
  computeShader = buildComputeShader(doubleValues);
  compute(computeShader, 4);

  let result = await data.read();
  // result is Float32Array [2, 4, 6, 8]
  for (let i = 0; i < result.length; i++) {
    print(result[i]);
  }
  describe('Prints the values 2, 4, 6, 8 to the console.');
}

function doubleValues() {
  let d = uniformStorage(data);
  let idx = index.x;
  d[idx] = d[idx] * 2;
}

Updates a single element in the buffer at a given index. Use this when only a small number of elements need to change. If you need to replace all the data at once, use update() instead.

let buf;

async function setup() {
  await createCanvas(100, 100, WEBGPU);

  // Float buffer: update one value by index
  buf = createStorage(new Float32Array([1, 2, 3, 4]));
  buf.set(2, 9.5); // only index 2 changes → [1, 2, 9.5, 4]

  let result = await buf.read();
  print(result[2]); // 9.5
  describe('Prints 9.5 to the console.');
}

let particles;
const numParticles = 100;

async function setup() {
  await createCanvas(100, 100, WEBGPU);
  particles = createStorage(makeParticles());

  // Replace particle 42 without touching the others
  particles.set(42, {
    position: createVector(0, 0),
    velocity: createVector(1, 0),
  });

  // Read back to confirm the update
  let result = await particles.read();
  print(result[42].position.x, result[42].position.y); // 0, 0
  describe('Prints the position of particle 42 after updating it.');
}

function makeParticles() {
  let data = [];
  for (let i = 0; i < numParticles; i++) {
    data.push({
      position: createVector(random(width), random(height)),
      velocity: createVector(random(-1, 1), random(-1, 1)),
    });
  }
  return data;
}