How do I get tinySDF or Troika into an actual shader?

Does anyone know how I can get tinySDF into a three js shader?

Am I right to assume that I should do this with new THREE.DataTexture and not a standard texture so I can get the scaling benefits of SDFs?

Troika creates the shader for you, that’s certainly the easiest thing. You shouldn’t need mapbox/tiny-sdf if you go that direction.

I haven’t used mapbox/tiny-sdf myself, but fonts created with msdf-bmfont-web would be compatible with shaders from three-bmfont-text. The latter does not work in WebGL 2 the last I checked. So currently Troika is the only well-supported SDF font shader for three.js that I know of.

1 Like

With Troika, I see it creates a geometry but I was hoping for something that would work directly in a shader. I am not seeing how one would do that.

I see I can create a text, but do not see any documentation about putting it inside a shader.

I believe the geometry and the shader are paired; the shader does not work without data in the geometry. I’m not sure if it’s possible to render a SDF font as a shader applied to some new geometry.

1 Like

It must be right? I use SDF’s all the time and combine them inside shaders. I cannot imagine having to use real geometry. I think I will try to solve this issue for TinySDF since it appears to be more lightweight.

1 Like