Using typed arrays instead of JavaScript objects

[greggman]

I'm doing lots of WebGPU and I'm finding it difficult to use tweakpane because tweakpane seems to want things in JavaScript objects but I need them in typedarrays.

One example: Color, In WebGPU I have color = new Float32Array(4)

AFAICT, tweakpane wants {r: number, b: number, g: number, a: number}

I can work around this issue by making proxy objects that convert to/from one to the other but it would be really great if I could use the typed arrays directly with tweakpane.

Have you given any thought to supporting this use case or accepting a PR for this use case?

What I'm hoping for is something

const wgslCode = `
  struct Uniforms {
     color: vec3f,
     lightDirection: vec3f,
     color: f32,
  } 
  ...
`;

// Make an ArrayBuffer to contain the uniform values
const uniformValues = new ArrayBuffer(8 * 4);

// Make PARAMS that are views into the ArrayBuffer
const PARAMS = {
  color: new Float32Array(uniformValues, 0, 3),   
  lightDirection: new Float32Array(uniformValues, 16, 3),
  mix: new Float32Array(uniformValues, 28, 1),
};

const pane = new Pane();
pane.addBinding(PARAMS, 'color', { color: { type: 'float' } });
pane.addBinding(PARAMS, 'lightDirection');
pane.addBinding(PARAMS, 'mix', { min: 0, max: 1 });

Right now, those first 2 are problematic. Since color and lightDirection are typed arrays, tweakpane will just error internally. Fixing them outside tweakpane with proxies isn't a huge ton of code but it sure would be nice if tweakpane could somehow handle this because it seems like it would get more and more common

The last one can be changed to

pane.addBinding(PARAMS.mix, '0', { min: 0, max: 1, label: 'mix' });

which is probably fine but if we're dreaming then the first way would be supported. Tweakpane could see the min/max or see it's an array with 1 value and make a Number controller.

wdyt?