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 https://github.com/mrdoob/three.js/issues/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.

https://github.com/protectwise/troika/pull/267/commits/d99ef63bfc9bd7e8dc7fae290fb3246dc07a2b94

[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.