feat: Add @typegpu/three package and Three.js integration example

[reczkok]

Disclaimer: Very WIP

[github-actions]

pkg.pr.new

packages
Ready to be installed by your favorite package manager ⬇️

https://pkg.pr.new/software-mansion/TypeGPU/typegpu@3ee568dfdb390bdf923a29117d5285ec9d2ddd82

https://pkg.pr.new/software-mansion/TypeGPU/@typegpu/noise@3ee568dfdb390bdf923a29117d5285ec9d2ddd82

https://pkg.pr.new/software-mansion/TypeGPU/unplugin-typegpu@3ee568dfdb390bdf923a29117d5285ec9d2ddd82

benchmark
view benchmark

commit
view commit

[aleksanderkatan]

Can we make fromTSL work in TGSL?

const getParticleMass = toTSL(() => {
    'use gpu';
    const instanceIndex = instanceIndexAccessor.$;
    randf.seed(instanceIndex);
    const base = (randf.sample() * 3 / 4 + 0.25) *
      fromTSL(particleGlobalMass, { type: d.f32 }).$;
  });

[aleksanderkatan]

I had a situation like the following:

const helper = () => { 'use gpu'; ... }

const anotherHelper = () => { 'use gpu'; helper(); ... }

const tslUpdate = Fn(() => { toTSL(helper); toTSL(anotherHelper); ... }

This resolves helper function twice. Aside from code duplication, this also made my code incorrect, because I used an injected Math.random() and expected different calls to return the same result. I'm not sure if we can do something about it, if we can't, we should definitely mention it in docs.

By the way, a nice side effect of console logs being not supported is that we can check exactly how many times a function is resolved.

[aleksanderkatan]

Great changes! 3️⃣☕📝

[iwoplaza]

I had a situation like the following:

const helper = () => { 'use gpu'; ... }

const anotherHelper = () => { 'use gpu'; helper(); ... }

const tslUpdate = Fn(() => { toTSL(helper); toTSL(anotherHelper); ... }

This resolves helper function twice. Aside from code duplication, this also made my code incorrect, because I used an injected Math.random() and expected different calls to return the same result. I'm not sure if we can do something about it, if we can't, we should definitely mention it in docs.

By the way, a nice side effect of console logs being not supported is that we can check exactly how many times a function is resolved.

I tried to reproduce this behavior with the following code snippet:

const signal = tgpu['~unstable'].comptime(() => {
  console.log('comptime');
  return 1;
});

const helper = () => {
  'use gpu';
  return 0.4 * signal();
};

const lava = t3.toTSL(() => {
  'use gpu';
  const coords = t3.uv().$.mul(2);
  const pattern = perlin3d.sample(d.vec3f(coords, t3.time.$ * 0.2));
  return d.vec4f(tanh(pattern * 5), 0.2, helper(), 1);
});

const lava2 = t3.toTSL(() => {
  'use gpu';
  const coords = t3.uv().$.mul(3);
  const pattern = perlin3d.sample(d.vec3f(coords, t3.time.$ * 0.2));
  return d.vec4f(0.1, tanh(pattern * 5), helper(), 1);
});

material.colorNode = TSL.Fn(() => {
  return lava.add(lava2);
})();

But the result was the following:

Am I missing something?

[aleksanderkatan]

Am I missing something?

Sorry, it was my fault for using this function in compute and in render at the same time.
While trying to repro this, I came across another issue: #1973