In this ALL YOUR HTML coding session, you’ll learn how to create a beautiful shape with parametric functions, a hyperbolic helicoid, inspired by J. Miguel Medina’s artwork. We’ll be upgrading MeshPhysicalMaterial with some custom shader code, making an infinite animation.
This coding session was streamed live on January 10, 2021.
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!
In this live stream of ALL YOUR HTML, we will be coding a Raymarching demo in Three.js from scratch. We’ll be using some cool Matcap textures, and add a wobbly animation to the scene, and all will be done as math functions. The scene is inspired by this demo made by Luigi De Rosa.
This coding session was streamed live on December 6, 2020.
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!
In this live stream of ALL YOUR HTML, you’ll learn how image transitions with GLSL and Three.js work and how to build a static website with Svelte.js that will be using a third party API. Finally, we’ll code some smooth page transitions using GSAP and Three.js.
This coding session was streamed live on November 29, 2020.
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!
In this live stream of ALL YOUR HTML, we’ll be replicating the beautiful icosahedron animation from Rogier de Boevé’s website. We’ll be using Three.js and GLSL to make things cool, and also some postprocessing.
This coding session was streamed live on November 22, 2020.
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!
In this live stream of ALL YOUR HTML, we’ll be diving into the code for the beautiful golden spiral city on the website of Creative Cruise that was made by the folks of Superhero Cheesecake. There will be some Fibonacci spiral making using the Pixi.js library and a little bit of math.
This coding session was streamed live on November 15, 2020.
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!
In this live stream of ALL YOUR HTML, I’ll explore the video particles effect from m-trust.co.jp which was made by LIG agency from Japan. Connecting DOM Video and WebGL, we’ll make particles explode on the screen—a really interesting effect!
This coding session was streamed live on November 8, 2020.
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!
In this live stream of ALL YOUR HTML, I’ll show you how to create an infinite scrollable image slider with Pixi.js. It’s based on the website of Lamadone Studio and we’ll also be adding some distortions on scroll. The website was developed by the team of Socialclub.
This coding session was streamed live on November 1, 2020.
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!
In this live stream of ALL YOUR HTML, I’m replicating the particles animation from Mathis Biabiany‘s website. The effect consists of 2^18 particles forming images and a colorful tunnel that creates an interesting transition from one image to another.
This coding session was streamed live on Oct 25, 2020.
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions!
In this episode of ALL YOUR HTML, I’m reconstructing the beautiful scroll animations from Robin Noguier’s portfolio. Learn how to build a custom inertia scroll from scratch, using it in WebGL with some images from HTML, and adding a navigation to the whole experience.
This coding session was streamed live on Oct 18, 2020.
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions plus the demo!
In this episode of ALL YOUR HTML, I decompile the particles effect from Mark Appleby’s website and show you how you can create a particle system from scratch, using no libraries at all. I also address some performance tips, and ideas about SDF in the 2D world.
This coding session was streamed live on Oct 11, 2020.
We’ve done some crazy polygon transitions, and before that some WebGL Image Transitions. But a lot of people have been asking how to translate those techniques into the video world. And I agree, one cannot underestimate the importance of video on the web. So let’s do this!
For today’s demos we’ll be using curtains.js, a really great WebGL tool for animating images and videos. It was created by Martin Laxenaire and the new version is packed with great features. Go check out the docs if you didn’t know about it yet!
What library?
Three.js is the industry standard for creating WebGL effects, but we already had a lot of demos using it. And there are a lot of other awesome WebGL libraries out there. All with a different kind of focus and purpose. So let’s dive into one of them!
Curtains.js
This library was made by Martin Laxenaire. It was just recently updated with a lot of cool stuff, and so I decided to use it for this demo.
The focus of this library is (from the homepage):
A lot of very good JavaScript libraries already handle WebGL but with most of them it’s kind of a headache to position your meshes relative to the DOM elements of your web page. Curtains.js was created with just that issue in mind.
Yes, exactly, connecting the DOM with WebGL! That’s pretty straightforward with curtains.js; one of the demos showcased is this:
And that’s not it! We also have a postprocessing, FBOs, and full control over all of it with our custom shaders!
Our demos
So, yeah, curtains.js is pretty cool and I really recommend you to try it. But let’s get back to our idea of animating videos in WebGL.
Turns out it’s ridiculously easy with curtains.js. Here is the HTML we will be using:
<div id="canvas"></div>
<div class="wrapper">
<div class="plane">
<video src="1.mp4" data-sampler="first"></video>
<video src="2.mp4" data-sampler="second"></video>
</div>
</div>
<!-- and some custom shaders, because we will be using them -->
<script id="vertexShader">...</script>
<script id="fragmentShader">...</script>
But, HTML has never been exciting in WebGL demos, so lets look at what JavaScript you need now to get the video in WebGL:
const curtains = new Curtains({
container: "canvas",
pixelRatio: Math.min(1.5, window.devicePixelRatio),
});
const params = {
vertexShaderID: "vertexShader",
fragmentShaderID: "fragmentShader",
uniforms: {
transition: {
name: "uTransition",
type: "1f",
value: 0,
},
},
};
const multiTexturesPlane = new Plane(
curtains,
[...document.getElementsByClassName("plane")], // could be many Planes
params
);
Well, that’s it! Because the focus of this library is shaders connected to the DOM, we don’t have any Camera or Scene concepts here. And the setup becomes pretty straightforward. That hooked me up immediately and I decided to share that with you guys, by using it in this demo.
Of course this is not the whole code. Because it’s a video we need some kind of user action to play it. And then, we also need some animation for the transition between the videos. But that part is pretty common to all those kind of effects. In curtain.js events are used for that:
multiTexturesPlane
.onReady(() => {
// navigation click events
// play button
})
.onRender(() => {
// updating time or anything
});
And with that kind code you are ready to do any shader transitions like this one:
All the magic is happening in shaders, and just to show you that images and videos are the same in WebGL, I used one of the effects from my previous demo. If you want to learn shaders, I advise you to read the amazing Book Of Shaders.
I hope you liked this short tutorial on getting videos into WebGL. Go get the source and play with the code!
Editor’s note: We want to share more of the web dev and design community directly here on Codrops, so we’re very happy to start featuring Yuriy’s newest live coding sessions that he records twice a month plus the demo he creates during the session!
For this episode of ALL YOUR HTML, I decided to replicate the effect seen on 100 DAYS OF POETRY with the technologies I know. So I did a fragment shader for the background effect, then coded a dummy CSS grid, and connected both of them with the power of GSAP’s ScrollTrigger plugin. This is of course a really simplified version of the website, but I hope you will learn something from the process of recreating this.
This coding session was streamed live on Oct 4, 2020.
Now that we have a grid, we can use GLSL and a vertex shader to animate those triangles. I recommend you read more about shaders and GLSL in “The Book Of Shaders“.
The good news is that we can animate each triangle separately; we can even animate each of its vertices on their own!
In code that looks like this:
vec3 newPosition = move(position, progress);
Where the move function moves and rotates the default position with the change of the progress value. That could be a simple shift on the X-axis, for example:
vec3 newPosition = position + progress*vec3(1.,0.,0.);
Or anything you could imagine doing with numbers.
I had a lot of fun experimenting with those effects, hope you will like them. And the possibilities here are endless of course.
Tell me, or better show me, what geometry figures do you like to animate?
P.S.: I do love all kinds of triangles, I hope no triangle will get offended or mad after reading this article.
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:
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.
So let’s do that final shader with the effect:
// get small circle around mouse, with distances to it
float c = circle(uv, mouse, 0.0, 0.2);
// get texture 3 times, each time with a different offset, depending on mouse speed:
float r = texture2D(tDiffuse, uv.xy += (mouseVelocity * .5)).x;
float g = texture2D(tDiffuse, uv.xy += (mouseVelocity * .525)).y;
float b = texture2D(tDiffuse, uv.xy += (mouseVelocity * .55)).z;
// combine it all to final output
color = vec4(r, g, b, 1.);
A screen has its size, and so do images in 3D. So what we need to do now is to calculate some kind of relation of those two.
Just like I did in my previous article, we can make a plane with a width of 1, and fit it exactly to the screen width. So practically, we have WidthOfPlane=ScreenSize.
For our Three.js scene, this means that if want an image with a width of 100px on the screen, we will make a Three.js object with width of 100*(WidthOfPlane/ScreenSize). That’s it! With this kind of math we can also set some margins and positions easily.
When the page loads, I will loop through all the images, get their dimensions, and add them to my 3D world:
let images = [...document.querySelectorAll('.js-image')];
images.forEach(image=>{
// and we have the width, height and left, top position of the image now!
let dimensions = image.getBoundingClientRect();
// hide original image
image.style.visibility = hidden;
// add 3D object to your scene, according to its HTML brother dimensions
createMesh(dimensions);
})
Another thing that I added here is mouseVelocity. I used it to change the radius of the effect. The faster the mouse moves, the bigger the radius.
To make it scrollable, we would just need to move the whole scene, the same amount that the screen was scrolled. Using that same formula I mentioned before: NumberOfPixels*(WidthOfPlane/ScreenSize).
Sometimes it’s even easier to make WidthOfPlane equal to ScreenSize. That way, you end up with exactly the same numbers in both worlds!
Exploring different effects
With different shaders you can come up with any kind of effect with this approach. So I decided to play a little bit with the parameters.
Instead of separating the image in three color layers, we could simply displace it depending on the distance to the mouse:
vec2 newUV = mix(uv, mouse, circle);
color = texture2D(tDiffuse,newUV);
And for the last effect I used some randomness, to get a pixelated effect around the mouse cursor.
In this last demo you can switch between effects to see some modifications you can make. With the “zoom” effect, I just use a displacement, but in the last one, I also randomize the pixels, which looks kinda cool to me!
I’d be happy to see your ideas for this animation. What kind of effect would you do with this technique?
Do you like to roll up things? Or maybe you prefer rolling them out?
I spent my childhood doing crepes. I loved those rolls.
I guess, the time has come to unroll all kinds of things, including images. And to unroll as many rolls as possible I decided to automate this process with a bit of JavaScript and WebGL.
The setup
I will be using Three.js for this animation, and set up a basic scene with some planes.
Just as in this tutorial by Paul Henschel, we will replace all the images with those PlaneGeometry objects. So, we will simply work with HTML images:
<img src="owl.jpg" class="js-image" />
Once the page loads and a “loaded” class is set to the body, we will hide those images:
.loaded .js-image {
opacity: 0;
}
Then we’ll get the dimensions of each image and position them into our 3D Planes, exactly there where the DOM image elements were.
MY_SCENE.add(
new THREE.Mesh(
new PlaneGeometry(640,480), // some size of image
new Material({texture:’owl.jpg’) // texture i took from DOM
)
)
Because rolling things with CSS or SVG is next to impossible, I needed all the power of WebGL, and I moved parts of my page into that world. But I like the idea of progressive enhancement, so we still have the usual images there in the markup, and if for some reason the JavaScript or WebGL isn’t working, we would still see them.
After that, its quite easy to sync the scroll of the page with the 3D scene position. For that I used a custom smooth scroll described in this tutorial. You should definitely check it out, as it works regardless of platform and actions that you use to scroll. You know this is usually the biggest pain with custom scrolling libraries.
Let’s rock and roll
So, we have what we want in 3D! Now, with power of shaders we can do anything!
Well, anything we are capable of, at least =).
I started from the end. I imagine every animation as some function which takes a number between 0 and 1 (I call it ‘progress’) and returns a visual. So the result of my imaginary RollFunction(0) should be something rolled. And RollFunction(1), should be just the default state of the plane. That’s how I got the last line of my animation:
I had DefaultPosition from the start, it’s usually called ‘position’. So all I needed is to create the RolledPosition and change my progress!
I figured out a couple of ways to do that. I could have had another object (like an .obj file) done in some editor, or even fully exported the animation from Blender or another program.
But I decided to transform DefaultPosition into RolledPosition with a couple of math functions inside my Vertex shader. So, imagine we have a plane lying in the Z plane, so, to roll something like that, you could do the following:
RolledPosition.x = RADIUS*cos(position.x);
RolledPosition.y = position.y; // stays the same
RolledPosition.z = RADIUS*sin(position.x);
If you ever tried to draw a circle yourself, you can easily guess where this is coming from. If not here is a famous GIF illustrating that visualizes that sheds some light on it:
Of course this would just make a (not so) perfect tube out of our plane, but just adding a couple of parameters here, we can make it into a real roll:
RADIUS *= 1 - position.x; // so it gets smaller when we roll the plane
newposition.z = RADIUS*sin(position.x*TWO_PI);
newposition.x = RADIUS*cos(position.x*TWO_PI);
And you will get something like that:
This is done with the help of the D3 library, but the idea is the same.
This two-dimensional animation has really helped me to get the idea of rolling things. So I recommend that you to dig into the code, it’s quite interesting!
After that step, it was a matter of time and arithmetics to play a bit with the progress, so I got this kind of animation for my plane:
There are a number of other steps, to make the angle parametric, and to make it a bit more beautiful with subtle shadows, but that’s the most important part right here. Sine and Cosine functions are often at the core of all the cool things you see on the web! =).
So let me know if you like these rolling effects, and how much time you have spent scrolling back and forth just to see ‘em roll! Have a nice day! =)
Once you want to show more than one image, you can’t help making a transition between them. Or is it just me?
Jokes aside, image transitions are all over the web. They can be powered by CSS, SVG or WebGL. But of course, the most efficient way to work with graphics in the browser is using the Graphics Processor, or GPU. And the the best way to do this is with WebGL, specifically with shaders written in GLSL.
Today we want to show you some interesting image transition experiments that reveal the boundless possibilities of WebGL. These effects were inspired by the countless incredible design examples and effects seen on websites like The Avener and Oversize Studio.
Setup
I will be using the Three.js framework for my transitions. It doesn’t really matter what library you use, it could have also been the amazing Pixi.js library, or simply (but not so straightforward) native WebGL. I’ve used native WebGL in my previous experiment, so this time I’m going to use Three.js. It also seems most beginner friendly to me.
Three.js uses concepts like Camera, Scene and Objects. We will create a simple Plane object, add it to Scene and put it in front of the Camera, so that it is the only thing that you can see. There is a template for that kind of object, PlaneBufferGeometry:
To cover the whole screen with a plane you need a little bit of geometry. The Camera has a fov (field of view), and the plane has a size. So with some calculations you can get it to fill your whole screen:
Looks complicated, but it’s just getting the angle(fov), knowing all the distances here:
That is actually the end of the 3D part, everything else will be happening in 2D.
GLSL
In case you are not yet familiar with this language, I highly advise you to check out the wonderful Book Of Shaders.
So, we have a plane and we have a fragment shader attached to it that calculates each pixels color. How do we make a transition? The simplest one done with a shader looks like this:
Where progress is a number between 0 and 1, indicating the progress of the animation.
With that kind of code you will get a simple fade transition between images. But that’s not that cool, right?
Cool transitions
Usually all transitions are based on changing so called UVs, or the way texture is wrapped on the plane. So for instance, multiplying UV scales the image, adding a number just shifts the image on the plane.
UVs are nothing magical. Think of them as a coordinate system for pixels on a plane:
Let’s start with some basic code:
gl_FragColor = texture2D(texture,uv);
This just shows an image on the screen. Now let’s adjust that code a bit:
gl_FragColor = texture2D(texture,fract(uv + uv));
By taking the fractional part, we make sure that all the values stay between 0 and 1. And if UV was from 0 to 1, doubling it means it will be from 0 to 2, so we should see the fractional part changing from 0 to 1, and from 0 to 1 again!
And that’s what you get: a repeated image. Now let’s try something different: subtracting UV and using the progress for the animation:
First, we make sure that we are only changing one axis of UV, by multiplying it with vec2(1.,0). So, when the progress is 0, it should be the default image. Let’s see:
Now we can stretch the image! Let’s combine those two effects into one.
So basically, we do the stretching and repeat it 5 times. We could use any other number as well.
Much better! Next, if we add another image, we get the effect that you can see in demo 7.
Cool isn’t it? Just two simple arithmetic operations, and you get an interesting transition effect.
That’s just one way of changing UVs. Check out all the other demos, and try to guess what’s the math behind them! Try to come up with your own unique animation and share it with me!
Today we’d like to share an exploding object experiment with you. The effect is inspired by Kubrick Life Website: 3D Motion. No icosahedrons were hurt during these experiments!
The following short walk-through assumes that you are familiar with some WebGL and shaders.
For this effect we need to break apart the respective object and calculate all fragments.
The easiest way to produce naturally looking fragments, is to look at how nature does them:
Giraffes have been using those fashionable fragments for millions of years.
This kind of pattern is called a Voronoi diagram (after Georgy Feodosevich Voronoy, mathematician).
We are lucky to have algorithms that can create those diagrams programmatically. Not only on surfaces, as giraffes do, but also as spatial ones that break down volumes. We can even partition four dimensional space. But let’s stop at three dimensions for today’s example. I will leave the four dimensional explosions as an exercise for the reader 😉
We prepared some models (you could use Blender/Cinema4D for that, or your own Voronoi algorithm):
That looks already beautiful by itself, doesn’t it? ❤
On the other hand, that’s a lot of data to load, so I managed to compress it with the glTF file format using Draco 3D data compression.
Shader
I decided to use three.js for the rendering, as it has a lot of useful built-in stuff. It’s great if you want reflecting materials, and it has some utilities for working with fragments and lightning.
With too many fragments it is not very wise to put all calculations on the CPU, so it’s better to animate that in the shaders, i.e. on the GPU. There’s a really simple vertex shader to tear all those fragments apart:
position = rotate(position);
position += position + direction*progress;
…where direction is the explosion direction and progress is the animation progress.
We can then use some three.js materials and CubeTexture to color all the surfaces, and that’s basically it!
During development, I accidentally typed the wrong variable in one of my shaders, and got pretty interesting result:
So, don’t be afraid to make mistakes, you never know what you end up with when you try something new!
I hope you like the demos and the short insight into how it works, and that this story will inspire you to do more cool things, too! Let me know what you think, and what ideas you have!