How to do text mask and used Three.js component as a background

[incum]

Hello, I try to recreate this kind of effect where text is masked and use three.js as a background. Here is some example from akaru

Agence web design à Lyon, création de site internet - Akaru I’m not sure what this kind of effect is called but from what I’ve inspected, I believe it has 2 scenes with slightly different transition one for the background and the second one used as a text background. From what I’ve known to acheive this with regular 2d image we can use CSS background-clip: text and use url of the background like this example I want to acheive this but in my case is a three.js component. I try to get canvas reference and translate to url by using toDataURL() but it doesn’t seems to work at all. I’ve tried with my own project and get blank image from it and also my shader is getting animated and changing overtime. Here is a simple example that I created sweet-goldwasser-cfd3xc - CodeSandbox the TEXT1 from line 52 get url from the canvas2 but it doesn’t show up. Can some one guide me how to achieve this kind of effect. I want to use Three.js component that has animate shader as a background for HTML text

[mjurczyk]

Since three.js’s actual output is just an image / canvas (WebGLRenderer.domElement to me more precise) - you could literally just render a frame, grab that domElement.toDataURL() (docs, keep in mind this may be costly for high canvas resolutions) and set it as CSS background: url(...), then mask it with background-clip.

Alternatively - you can draw three.js rendered frame onto another canvas (canvas2DContext.drawImage(renderer.domElement, 0, 0), and mask it manually (either by using .clip, or just blending set to Multiply - a bit more here.)

You can also do masking in three itself - using multiply blending combined with a masking plane placed right in front of the camera, or postprocessing.

If you’re using react-three-fiber it may be even a bit easier and will allow you to create more flashy effects right in three - see this example by @drcmda (but I would be cautious about porting entire projects to react-three-fiber, if you haven’t already been using it - it works a bit different than vanilla three.)

[prisoner849]

Shader wizardry allows to turn this mask

into something funny

(pictures from two different runs)

Demo: https://codepen.io/prisoner849/full/BaOMPWM