Conversion to TSL Troika Three Text

[Kaz3015]

Troika Three Text can't be used in for webgpu since it's written in GLSL. If you convert the shader code to TSL it can run on GLSL and the language used for webgpu

[Shifer112]

Are there any plans to switch to TSL?

[lojjic]

Yes, but it's a tough situation right now for libraries because we still need to be usable in the standard WebGLRenderer, but TSL/NodeMaterial is currently only supported in the newer WebGPURenderer. So at best we'd have to maintain two separate sets of code, and that's not something I've got the bandwidth to take on at the moment.

I'm keeping an eye on mrdoob/three.js#30185 and hoping that could give us a path for moving to TSL while maintaining legacy support.

[SebastianTusk]

https://github.com/SebastianTusk/troika

Here I added support for NodeMaterial to text rendering. So it works with three.js WebGPURenderer. You need to either set Text.webGPU=true or provide a NodeMaterial as base material. Otherwise the legacy material system will be used.

[lojjic]

@SebastianTusk Amazing!! Thank you for taking that on!

The only thing I'd like to change before pulling this in is to make all the TSL/NodeMaterial bits a separate optional build artifact, something like troika-three-text/webgpu to mirror how three/webgpu does it. That's important because the library needs to continue to function with older versions of Three, and to not pull in all the TSL code if it's being used in WebGL.

Spitballing...

troika-three-text/webgpu artifact would export:

class WebGPUText extends Text {
  // ...override createTextDerivedMaterial etc. for NodeMaterial handling and defaults
}
export {WebGPUText as Text}

Then users would import either:

import {Text} from 'troika-three-text'
or
import {Text} from 'troika-three-text/webgpu' 

Thoughts?

[danrossi]

That is an epic job converting the shader to nodes system. I tried myself but it was too difficult.

However for webgpu to work outputEncoding needs to be changed to colorSpace. I had a PR for that not merged. I can try and do it again if needed.

d99ef63

[SebastianTusk]

The only thing I'd like to change before pulling this in is to make all the TSL/NodeMaterial bits a separate optional build artifact, something like troika-three-text/webgpu to mirror how three/webgpu does it. That's important because the library needs to continue to function with older versions of Three, and to not pull in all the TSL code if it's being used in WebGL.

import {Text} from 'troika-three-text'
or
import {Text} from 'troika-three-text/webgpu'

Good idea. That would make it more clear what is going on.

Forgetting to use the right Text or using the wrong material happens fast. Therefore I would like to have a warning if one uses the wrong backend or material. But renderer.isWebGPURenderer and material.isNodeMaterial should work without introducing any actual dependencies.

[SebastianTusk]

I updated my changes. As discussed the WebGPU specific code is build into a separate artifact.

The WebGPU variant can be imported like this: import { WebGPUText as Text } from 'troika-three-text/webgpu'; I found it clearer to have a different name for the text class. Especially if someone has issues this shows better which version is used.

See main -> webgpu

[lojjic]

@SebastianTusk Thanks! Do you feel your branch is ready for opening a PR? Also, do you have an example of it running so we can see it in action?

[DennisSmolek]

@SebastianTusk Amazing!! Thank you for taking that on!

The only thing I'd like to change before pulling this in is to make all the TSL/NodeMaterial bits a separate optional build artifact, something like troika-three-text/webgpu to mirror how three/webgpu does it. That's important because the library needs to continue to function with older versions of Three, and to not pull in all the TSL code if it's being used in WebGL.

Just wanted to chime in thats how we're handling this at React-three-fiber and Drei

Our <Text> component is a Trokia wrapper so this would be huge for us too. Let me know if you need any help/testing.
I'm 130 components into conversion so my brain is melting but I've got experience fixing weird quirks.

[DennisSmolek]

One thing to point out,

When using the WebGPURenderer you import from three/webgpu. People often think you only have to import WebGPU things from that path.

However, if you do:

import {Vector3 } from 'three';
import { NodeMaterial } from 'three/webgpu';

The fact you imported ANYTHING from base three will include the entire WebGLRenderer codebase. Turns out to be a few MB and impossible to shake out.

It's made our builds a little more complex but what we've done is add aliasing to our builds. So 'three' becomes '#three'

That lets us do:

import {Vector3 } from '#three'; // build will find the right platform
import { NodeMaterial } from 'three/webgpu'; //always from here

Our build then points to those paths and only bundles the right version of three.

Here's how we do it

[lojjic]

Thank you @DennisSmolek for the gotchas and tips! I think that makes sense.