The power of GLSL with React Three Fiber

When I was around 16 years old, I was mapping for CS1.6 under GTKradiant. During those times, I learnt how to use, create and apply shaders to a texture.

Years later, I could have never guessed those years I passed learning those concepts will be useful. As a Full Stack Developer, I learnt few years ago how to use WebGL for creating 3D effects. I improved my knowledge over time learning Three.js and R3f (React-three-fiber). And eventually, I once again added the shaders to my toolbox. And the effect, you can actually do with those shaders are far from what any other technology could ever offer.

Preview

With shaders, the possibilities are infinite. You can manipulate the pixels how you exactly want. You can create mirror effect, a ripple effect or even create from scratch beautiful lively background. I have some demo pages that can show you all the potential behind it: hover effect demo or backgound demo.

Using three.js and the shaders, you can manipulate the information of each pixel independently. This is how I created this fresnel shader and splitted the blue and the red layer with a small displacement.

I also modified a bit the vertex for creating this strange wavy effect on the border of the image.

This effect can be modified easily for creating other effect effect.

An alternative could be to apply the effect using a displacement texture for apply the effect on the picture at different speed. The new result is already very interesting.

Technical part

Using a shader is a bit tricky. You wont be applying the effect on an image but a texture. In order to do that, you need to transform your image into a textured mesh. You can visualize an example on my demo page.

All the code in available on my GitHub. But I will explain briefly how this kind of effect can be realized on a few line of code.

For creating a mesh, I personally love react-three-fiber since it mixes well with react. So the first step is to install it on your project, this is quite simple using your favorite package manager:

npm install three react-three/fiber        

With this packages installed, we can now create a canvas that will be the parent of our whole react website.

import { Canvas } from 'react-three/fiber'

...

<Canvas camera={{ position: [0, 0, 2], fov: 50 }}
    <Suspense fallback={null}>{children}</Suspense>
</Canvas>>        

From that point, we will create a component as a children of Canvas. This component will be responsible for creating the mesh and apply a texture. In my case, my mesh will be a simple plane surface.

<mesh>
    <planeGeometry args={[1, 1, 32, 32]} />
    <Material ref={ref} uTexture={uTexture} />
</mesh>        

In short snippet, the uTexture will the path of the image I want to manipulate and the Material will be our shader. I created it, imported it and applied it to the previous plane:

{
    uniforms: {
      uTexture: { value: undefined },
      resolution: {
        value: new THREE.Vector2(
          window.innerHeight / window.innerWidth,
          window.innerHeight / window.innerWidth
        )
      },
      uTime: { value: 0 }
    },
    vertexShader: `
    varying vec2 vUv;
    uniform vec2 resolution;
    void main() {
      vUv = uv;
      vec3 pos = position;
      gl_Position = mix(projectionMatrix * modelViewMatrix * vec4(position,1.), projectionMatrix * modelViewMatrix * vec4(pos,1.), 0.5);
    }`,
    fragmentShader: `
    uniform sampler2D uTexture;
    varying vec2 vUv;
    void main()  {
      gl_FragColor = texture2D(uTexture, vUv);
    }`
}        

And with those few blocks of code, you are ready to apply way more complicated shaders to achieve the same as what I did.

Is GLSL worth it to learn ?

If you are a frontend developer and got tired or doing the same effect again and again, GLSL is definitely a new tool to add to your toolbox. It's a bit complex and obscure to take in hand but the reward are worth it. It give you total freedom and what you can do.