Rotating Twisted 3D Typography with Three.js and Shaders
Replicating the Light Effect from MIDWAM with Three.js and Postprocessing
In this new ALL YOUR HTML coding session we’ll dive into replicating the magical light effects seen on Midwam’s website using Three.js and postprocessing.
Original: https://midwam.com/en
Developed by: https://immersive-g.com/
This coding session was streamed live on January 9, 2022.
Check out the live demo.
Support: https://www.patreon.com/allyourhtml
How to Code a Three.js Postprocessing Transition
In this new ALL YOUR HTML coding session we’ll have a look at how to implement the transition from INSPIRATION by TOPPAN with Three.js and postprocessing, also using GSAP.
Original: https://forest.toppan.co.jp/gdi/
This coding session was streamed live on October 9, 2022.
Support: https://www.patreon.com/allyourhtml
Animating Tiny Triangles with Three.js
In this new ALL YOUR HTML coding session you’ll learn how to animate tiny triangles in Three.js to create an amazing looking whirlwind-like dissolving effect inspired by Mausoleum of Augustus.
Original: http://experience.mausoleodiaugusto.it/en/intro
This coding session was streamed live on Ocotber 2, 2022.
Check out the live demo.
Support: https://www.patreon.com/allyourhtml
How to Recreate Stripe’s Lava Lamp Gradient with Three.js
In this new ALL YOUR HTML coding session you’ll learn how to code the cool lava lamp like gradient with Three.js and shaders.
Original: https://stripe.com/
Minigl version derived: https://whatamesh.vercel.app/
This coding session was streamed live on September 25, 2022.
Check out the live demo.
Support: https://www.patreon.com/allyourhtml
How to Code a Scrollable Text Gallery in Three.js
In this new ALL YOUR HTML coding session you’ll learn how to code the cool gallery seen on https://designembraced.com/ using Three.js.
Original website: https://designembraced.com/
Developer: https://twitter.com/lhbizarro
This coding session was streamed live on September 18, 2022.
Support: https://www.patreon.com/allyourhtml
Checkerboard Transition for Text in Three.js
In this new ALL YOUR HTML coding session we’ll have a look at how to recreate the checkerboard transition from Gleec made by Immersive Garden with Three.js and GLSL, using MSDF text rendering.
Original website: https://gleec.com/
Developer: Immersive Garden
This coding session was streamed live on August 14, 2022.
Support: https://www.patreon.com/allyourhtml
How to Map Texture to a 3D Face with Three.js
In this new ALL YOUR HTML coding session you’ll learn how to wrap a texture on a shape. The shape will be a 3D face and we’ll use Three.js.
Original website: https://www.zikd.space
This coding session was streamed live on July 3, 2022.
Check out the live demo.
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post How to Map Texture to a 3D Face with Three.js appeared first on Codrops.
Volumetric Light Rays with Three.js
In this new ALL YOUR HTML coding session we’ll be decompiling volumetric light rays and recreating them with fragment shaders and Three.js.
Original website: https://moonfall.oblio.io/desktop/
Agency: https://oblio.io/
This coding session was streamed live on June 19, 2022.
Check out the live demo.
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post Volumetric Light Rays with Three.js appeared first on Codrops.
Creating a Particles Galaxy with Three.js
In this new ALL YOUR HTML coding session we will look into recreating the particles galaxy from Viverse using Three.js.
Original: https://www.viverse.com/
Made by: https://ohzi.io/
This coding session was streamed live on June 19, 2022.
Check out the live demo.
Image credit goes to https://www.instagram.com/tre.zen/
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post Creating a Particles Galaxy with Three.js appeared first on Codrops.
Coding an Infinite Slider using Texture Recursion with Three.js
In this new ALL YOUR HTML coding session we’ll be recreating the infinite image slider seen on https://tismes.com/ made by Lecamus Jocelyn using texture recursion in Three.js.
This coding session was streamed live on May 29, 2022.
Image credit goes to https://www.instagram.com/tre.zen/
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post Coding an Infinite Slider using Texture Recursion with Three.js appeared first on Codrops.
Creating an Infinite Distorted Slider with PixiJS and Bézier Curves
In this new ALL YOUR HTML coding session we’ll be replicating the amazing fluid slider from Yuto Takahashi’s website, using PixiJS, Bézier curves and little bit of GLSL.
This coding session was streamed live on May 23, 2022.
Check out the live demo (desktop only).
Image credit goes to https://www.instagram.com/tre.zen/
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post Creating an Infinite Distorted Slider with PixiJS and Bézier Curves appeared first on Codrops.
Growing Sunflowers with Three.js
In this new ALL YOUR HTML coding session we’ll be creating an interactive scene to claim tanks with sunflowers using Three.js and Polycam.
Demo as NFT: https://versum.xyz/token/versum/21733
This coding session was streamed live on April 24, 2022.
Check out the live demo.
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post Growing Sunflowers with Three.js appeared first on Codrops.
Creating a Fluid Distortion Animation with Three.js
In this new ALL YOUR HTML coding session you’ll learn how to code a water-like distortion animation as seen on the PixiJS website using Three.js. We’ll use shaders and render target to achieve the fluid effects.
Original website: https://pixijs.com/
This coding session was streamed live on April 10, 2022.
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post Creating a Fluid Distortion Animation with Three.js appeared first on Codrops.
Replicating the Interweave Shape Animation with Three.js
In this new ALL YOUR HTML coding session you’ll learn how to reconstruct the beautiful shape animation from the website of INTERWEAVE agency with Three.js. We’ll be calculating tangents and bitangents and use Physical materials to make a beautiful object.
Original website: https://interweaveagency.com/
This coding session was streamed live on March 20, 2022.
Check out the live demo.
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post Replicating the Interweave Shape Animation with Three.js appeared first on Codrops.
Noise Pattern Reconstruction from Monopo Studio
In this new ALL YOUR HTML coding session we’ll be reconstructing the beautiful noise pattern from Monopo Studio’s website using Three.js and GLSL and some postprocessing.
Monopo Studio: https://twitter.com/monopo_en
Developer: https://twitter.com/bramichou
This coding session was streamed live on February 20, 2022.
Support: https://www.patreon.com/allyourhtml
Setup: https://gist.github.com/akella/a19954…
The post Noise Pattern Reconstruction from Monopo Studio appeared first on Codrops.
Pixel Distortion Effect with Three.js
The creative coder’s dream is to rule pixels on their screen. To arrange them in beautiful patterns and do whatever you want with them. Well, this is exactly what we are going to do with this demo. Let’s distort and rule pixels with the power of our mouse cursor, just like the developers of the amazing Infinite Bad Guy website did!
Setup
The scene is the usual, we just create a fullscreen image on a screen, so it preserves the aspect ratio, and has its “background-size: cover” applied through the glsl shader. In the end, we have a geometry stretched for the whole viewport, and a little shader like this:
vec2 newUV = (vUv - vec2(0.5))*aspect + vec2(0.5); gl_FragColor = texture2D(uTexture,newUV);
The whole thing just shows the image, no distortions yet.
The Magnificent Data Texture
I hope by this time you know that any texture in WebGL is basically just numbers corresponding to each pixel’s color.
Three.js has a specific API to create your own textures pixel by pixel. It is called, no surprise, DataTexture. So let’s create another texture for our demo, with random numbers:
const size = rows * columns; const data = new Float32Array(3 * size); for(let i = 0; i < size; i++) { const stride = i * 3; let r = Math.random() * 255 ; let r1 = Math.random() * 255 ; data[stride] = r; // red, and also X data[stride + 1] = r1; // green, and also Y data[stride + 2] = 0; // blue } this.texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat, THREE.FloatType);
This is heavily based on the default example from the documentation. The only difference is, we are using FloatType texture, so we are not bound to only integer numbers. One of the interesting things is, that numbers should be between 0 and 255, even though, in the GLSL it will be 0..1 range anyway. You should just keep that in mind, so you are using correct number ranges.
What is also an interesting idea, is that GLSL doesn’t really care what the numbers mean in your data structures. It could be both color.rgb, and color.xyz. And that’s precisely what we will use here, we don’t care about exact color of this texture, we will use it as a distortion for our demo! Just as a nice data structure for GLSL.
But, just to understand better, this is what the texture will look like when you want to preview it:
You see those big rectangles because i picked something like 25×35 DataTexture size, which is really low-res.
Also, it has colors because im using two different random numbers for XY(Red-Green) variables, which results in this.
So now, we could already use this texture as a distortion in our fragment shader:
vec4 color = texture2D(uTexture,newUV); vec4 offset = texture2D(uDataTexture,vUv); // we are distorting UVs with new texture values gl_FragColor = texture2D(uTexture,newUV - 0.02*offset.rg);
The Mouse and its power
So now, let’s make it dynamic! We will need a couple of things. First, we need the mouse position and speed. And also, the mouse radius, meaning, at what distance would the mouse distort our image.
A short explanation: On each step of the animation, I will loop through my grid cells aka pixels of DataTexture. And assign some values based on mouse position and speed. Second, im going to relax the distortion. This needs to be done, if the user stops moving mouse, the distortion should come to 0.
So, now the code looks like this, simplified a bit, for better understanding the concept:
let data = DataTexture.image.data; // loop through all the pixels of DataTexture for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { // get distance between mouse, and current DataTexture pixel let distance = distanceBetween(mouse, [i,j]) if (distance < maxDistance) { let index = 3 * (i + this.size * j); // get the pixel coordinate on screen data[index] = this.mouse.vX ; // mouse speed data[index + 1] = this.mouse.vY ; // mouse speed } } // slowly move system towards 0 distortion for (let i = 0; i < data.length; i += 3) { data[i] *= 0.9 data[i + 1] *= 0.9 } DataTexture.needsUpdate = true;
A couple of things are added to make it look better, but the concept is here. If you ever worked with particle systems, this is exactly that concept, except our particles never move, we just change some values of the particles (distortion inside each big pixel).
Result
I left the settings open in the last demo, so you can play with parameters and come up with your own unique feel of the animation. Let me know what it inspired you to create!
The post Pixel Distortion Effect with Three.js appeared first on Codrops.