Integrating TypeGPU with Three.js: A Proof-of-Concept for Shared TSL Resources

Questions
, , ,
1

Hi,

I’m reaching out on behalf of the TypeGPU team to explore potential interoperability between our libraries, specifically leveraging the new Three Shading Language (TSL). We greatly admire the Three.js ecosystem and its commitment to providing flexible, powerful tools for 3D web rendering, and we believe that integrating our low-level, type-safe API with TSL could unlock exciting new possibilities for developers.

To that end, we recently developed a proof-of-concept that demonstrates some key ideas:

  • Shared Resources: Utilizing TSL’s node-based structure, we can intercept and inject WebGPU resources into selected nodes. Our POC shows how a StorageBufferAttribute can share a buffer with a TgpuBuffer, effectively creating a shared resource between Three.js and TypeGPU.
  • TypeGPU resources → Nodes: We’ve implemented a ComputeNode based on TgpuComputeFn, which can be used just like any other TSL node, seamlessly blending TypeGPU’s workflow into the TSL environment.

While this approach is promising, it currently depends on internal mechanisms that might change over time. We’re curious whether there might be a more straightforward or robust method to create shared resources—perhaps through officially supported APIs or design patterns—that we might have overlooked.

Our ultimate goal is to enable developers to combine the rich Three.js ecosystem with TypeGPU’s low-level, type-safe API. Whether by creating dedicated TSL counterparts for our resources or establishing a translation layer, we’re eager to ensure that users can pick and choose the best features from both worlds without compromise.

We’d love to hear your thoughts on these ideas and discuss any potential collaboration opportunities. Thank you for your time!