[p5.js 2.0+ Bug Report]: Updating a property of a vector in a storage buffer does nothing

[davepagurek]

Most appropriate sub-area of p5.js?

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

p5.js version

Latest dev-2.0

Web browser and version

All

Operating system

MacOS

Steps to reproduce this

Steps:

1. Make a storage buffer with a vector property in its data
2. Make a compute shader
3. In the compute shader, update a property of the vector, e.g. storage[i].vecProp.x += 1

Changing just a property of the vector has no effect, but it works if you reassign the whole vector, e.g storage[i].vecProp = storage[i].vecProp + [1, 0].

Snippet:

// noprotect
let particles
let updateShader
let drawParticleShader
let instance
const count = 1000

async function setup() {
  await createCanvas(windowWidth, windowHeight, WEBGPU);
  
  let particleData = []
  for (let i = 0; i < count; i++) {
    particleData.push({
      position: createVector(
        random(-1, 1) * width/2,
        random(-1, 1) * height/2,
      ),
      velocity: createVector(
        random(-1, 1),
        random(-1, 1)
      )
    })
  }
  particles = createStorage(particleData)
  
  updateShader = buildComputeShader(update)
  
  drawParticleShader = buildColorShader(drawParticles)
  instance = buildGeometry(drawInstance)
}

function update() {
  let data = uniformStorage(particles)
  let i = index.x
  
  data[i].position += data[i].velocity
  if (data[i].position.x < -width/2 || data[i].position.x > width/2) {
    // data[i].velocity.x *= -1
    // Works:
    // data[i].velocity *= [-1, 1]
  }
  if (data[i].position.y < -height/2 || data[i].position.y > height/2) {
    data[i].velocity.y *= -1
    // Works:
    // data[i].velocity *= [1, -1]
  }
}

function drawInstance() {
  sphere(4)
}

function drawParticles() {
  let data = uniformStorage(particles)
  
  worldInputs.begin()
  let i = instanceID()
  worldInputs.position.xy += data[i].position
  worldInputs.end()
}

function draw() {
  background(0);
  noStroke()
  compute(updateShader, count)
  shader(drawParticleShader)
  model(instance, count)
}

Live: https://editor.p5js.org/davepagurek/sketches/9IF_iOwDr