How does this compare to TSL (Three.js Shading Language)?

[gtnbssn]

I am curious what TypeGPU will offer that TSL won't.

I admit I haven't looked much in TypeGPU yet, my immediate guess is:

• it's not part of three.js, so you just get the ability to write shaders for WebGPU and that's it, instead of a much bigger library
• it does not try to do WebGL at all

Both points are pretty much "a more specialized tool, less bloat".

What are the other differences and use cases for which one would prefer TypeGPU?

[iwoplaza]

Hi! Thanks for reaching out, I'll try to approach this question from two angles: Ergonomics/DX and Capability

We've been really focused on GPU code having access to rich type information about the program, making use of the TypeScript language server to do the heavy lifting. When you're working with values in TypeGPU, you can hover over expressions and know what their type is. The code itself might feel more natural to read and write for JS developers too, comparing the following example:

TSL:

Loop({ start: ptrStart, end: ptrEnd, type: 'uint', condition: '<' }, ({ i }) => {
  const springId = springListBuffer.element(i).toVar('springId');
  const springForce = springForceBuffer.element(springId);
  const springVertexIds = springVertexIdBuffer.element(springId );
  const factor = select(springVertexIds.x.equal(instanceIndex), 1.0, -1.0);
  force.addAssign(springForce.mul(factor));
});

TypeGPU:

for (let i = ptrStart; i < ptrEnd; i++) {
  const springId = springListBuffer.$[i];
  const springForce = springForceBuffer.$[springId];
  const springVertexIds = springVertexIdBuffer.$[springId];
  const factor = std.select(-1, 1, springVertexIds.x === idx);
  force = force.add(springForce.mul(d.f32(factor)));
}

When it comes to capability, our APIs map very closely to vanilla WebGPU APIs, with the added benefit that the functions you write that are pure business logic (no access to GPU resources) can be called both on the CPU and the GPU, which can be useful for unit testing and debugging. We also support calling console.log on the GPU, which lets you debug actual values flowing through your shader with familiar syntax.

[gtnbssn]

Thanks for taking the time to reply and give a detailed example! Much appreciated.