Interactive WebGL Hover Effects

Interactive WebGL Hover Effects tympanus.net3 months ago in #Silicon Valley Love64

From our sponsor: Don’t spend all day sending messages. Automatically reach out to fans based on how they behave. I love WebGL, and in this article I will explain one of the cool effects you can make if you master shaders. The effect I want to recreate is originally from Jesper Landberg’s website. He’s a really cool dude, make sure to check out his stuff: So let’s get to business! Let’s start with this simple HTML: Some title Lorem ipsum. Couldn’t be any easier! Let’s style it a bit to look prettier: All the animations will happen in a Canvas element. So now we need to add a bit of JavaScript. I’m using Parcel here, as it’s quite simple to get started with. I’ll use Three.js for the WebGL part. So let’s add some JavaScript and start with a basic Three.js setup from the official documentation: import * as THREE from “three”; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); camera.position.z = 5; var animate = function () { requestAnimationFrame( animate ); cube.rotation.x = 0.01; cube.rotation.y = 0.01; renderer.render( scene, camera ); }; animate(); Let’s style the Canvas element: body { margin: 0; } canvas { display: block; position: fixed; z-index: -1; // put it to background left: 0; // position it to fill the whole screen top: 0; // position it to fill the whole screen } Once you have all this in place, you can just run it with `parcel index.html`. Now, you wouldn’t see much, its an empty 3D scene so far. Let’s leave the HTML for a moment, and concentrate on the 3D scene for now. Let’s create a simple PlaneBufferGeometry object with an image on it. Just like this: let TEXTURE = new TextureLoader().load(‘supaAmazingImage.jpg’); let mesh = new Mesh( new PlaneBufferGeometry(), new MeshBasicMaterial({map: TEXTURE}) ) And now we’ll see the following: Obviously we are not there yet, we need that color trail following our mouse. And of course, we need shaders for that. If you are interested in shaders, you’ve probably come across some tutorials on how to displace images, like displacing on hover or liquid distortion effects. But we have a problem: we can only use shaders on (and inside) that image from the example above. But the effect is not constrained to any image borders, but rather, it’s fluid, covering more area, like the whole screen. Postprocessing to the rescue It turns out that the output of the Three.js renderer is just another image. We can make use of that and apply the shader displacement on that output! Here is the missing part of the code: // set up post processing let composer = new EffectComposer(renderer); let renderPass = new RenderPass(scene, camera); // rendering our scene with an image composer.addPass(renderPass); // our custom shader pass for the whole screen, to displace previous render let customPass = new ShaderPass({vertexShader,fragmentShader}); // making sure we are rendering it. customPass.renderToScreen = true; composer.addPass(customPass); // actually render scene with our shader pass composer.render() // instead of previous // renderer.render(scene, camera); There are a bunch of things happening here, but it’s pretty straightforward: you apply your shader to the whole screen.  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply