Category: webgl
-
Case Study: Gabriel Contassot’s Portfolio — 2024
[ad_1] Working with Gabriel on his new portfolio has been a great experience. He initiated the project with a minimalist yet well-conceived design, incorporating animation ideas and maintaining an open-minded approach. This flexibility fostered extensive experimentation throughout the development process, which, in my experience, yields the best outcomes. The core of the website features a…
-
Case Study: 84—24 | Codrops
[ad_1] Introduction Let me introduce myself. I’m Michele Giorgi, a 36-year-old Frontend dev from Rimini, Italy. I got into this gig back when being in the web game meant wearing multiple hats: designer, developer, and sometimes even copywriter, SEO specialist, marketing analyst, and sysadmin. As the field evolved and roles became more specialized, I found…
-
Creating an Interactive 3D Bulge Text Effect with React Three Fiber
[ad_1] In this tutorial, we’ll explore how to generate a engaging bulge effect on text using React Three Fiber. For the past few weeks, I’ve been experimenting with mixing 3D and 2D to create compelling effects. Today, I’ll guide you through replicating this bulge effect on text. To streamline the process and maintain a structured…
-
Case Study: Ronin161’s Portfolio – 2024
[ad_1] Introduction & Motivation We wanted to update our portfolio, which was created in 2018. For this, our main objective was to maintain the essence of the website, retaining its key points, but rework the art direction, make it more colorful, review our 3D character, the performance, go further on the creative side and add…
-
On-Scroll Revealing WebGL Images | Codrops
[ad_1] Having objects appear on scroll is almost standard nowadays. However, there aren’t too many options available when it comes to HTML. Therefore, I decided to add a dash of excitement with some WebGL effects! Starting with a Plane Let’s examine a simple PlaneGeometry object with a ShaderMaterial. What possibilities does this combination offer? Well,…
-
Creating Audio-Reactive Visuals with Dynamic Particles in Three.js
[ad_1] In this tutorial, you will learn how we at ARKx crafted the audio-reactive visuals for Coala Music’s website. We’ll walk through the concepts and techniques used to synchronize audio frequencies and tempo, creating a dynamic visualizer with procedural particle animations. Getting Started We will initialize our Three.js scene only after the user interacts; this…
-
Creating an Interactive Mouse Effect with Instancing in Three.js
[ad_1] Mind-blowing effects that require thousands, possibly millions of objects like hundreds of paper planes, brains made out of triangles, or a galaxy of stars, push the limits of the GPU. However, sometimes it’s not because the GPU cannot draw enough, at times it’s bottlenecked by how much information it’s receiving. In this tutorial, we’ll…