using <Text /> as texture on shaderMaterial

[marekalgoud]

Hello,

I would like to use <Text /> from the drei library with a shaderMaterial and use the texture as a uniform in the shader. (I'm trying to recreate something as explain here : https://tympanus.net/codrops/2020/06/02/kinetic-typography-with-three-js/ with r3f),
I've understand who to create the renderTarget thanks to this example https://codesandbox.io/s/r3f-render-target-kdj94. Now I would like to do the equivalent of this :

this.material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms: {
      uTime: { value: 0 },
      uTexture: { value: this.rt.texture }
    }
  });

but I can't figure out who to do that. What is the equivalent of this.rt.texture ?
Thanks for your help :)

Marek

[drcmda]

it probably comes from a webglrendertarget https://codesandbox.io/s/r3f-render-target-qgcrx

here's something similar with text projected onto a sphere https://codesandbox.io/s/r3f-render-target-kdj94

[marekalgoud]

Ok, I was close :) I finally dit it (I forgot a setter in my shaderMaterial) !
Thanks again for your amazing work, I really love react-three-fiber and drei !

[hjopel]

Do you still remember how you resolved the issue? Looking to do the same thing, however the Text texture from the rt isn't properly displayed

[riju-stone]

@marekalgoud @drcmda Can you please share your fix here. I'm facing a similar issue and your solution might help.

Just for context, I'm trying to create a unique text hover effect using MSDF bitfonts and WebGL shaders. I have implemented the shader however, it needs the text as a texture map as one of its uniforms.

So I tried to use the Text and Text3D components from the @react-three/drei package but they don't really support msdf json files. So I'm kind of stuck.

Need to create a Text Geometry with the custom shader material.