webgl

Les #UI #UX incontournables de février 2020 – Website Design Article

Ils sont beaux, ils sont efficaces, ils sont innovants. Découvrez 22 sites qui ont marqué le mois de février 2020. La traditionnelle sélection des incontournables est là pour vous en mettre plein les yeux. Ce mois-ci, vous y trouverez des sites avec de la belle data-viz (visualisation de données), réalisés par Twitter, Microsoft ou encore Adobe. Il n’y a pas que les plus grosses compagnies du web qui sont capable d’envoyer du lourd : il n’y a qu’a voir le…

Read More

Audio-based Image Distortion Effects with WebGL – Website Design Article

From our sponsor: Market smarter with Mailchimp’s automated messaging tools. We’ve covered in the past how we can read data from Audio, using the p5.sound library and how we can use that data, to draw things in the canvas, using p5.js. Well, what if instead of drawing a sketch, we used audio to distort an image? Today we want to show you some demos that play around that idea. We’ve created some experiments using the theme of movie trailers where…

Read More

Audio-based Image Distortion Effects with WebGL – Website Design Article

From our sponsor: Market smarter with Mailchimp’s automated messaging tools. We’ve covered in the past how we can read data from Audio, using the p5.sound library and how we can use that data, to draw things in the canvas, using p5.js. Well, what if instead of drawing a sketch, we used audio to distort an image? Today we want to show you some demos that play around that idea. We’ve created some experiments using the theme of movie trailers where…

Read More

How to Create Procedural Clouds Using Three.js Sprites – Website Design Article

From our sponsor: Market smarter with Mailchimp’s automated messaging tools. Today we are going to create an animated cloud using a custom shader material, extending the built-in Sprite material of Three.js. We’ll assume that you are familiar with React (including Hooks), Three.js and React-Three-Fiber. If not, you might find this article that I wrote as a beginner’s intro to the library helpful as a quick start. The technique that we’ll explain was used in two recent projects made at Low: 1955-Horsebit:…

Read More

Playing with Texture Projection in Three.js – Website Design Article

From our sponsor: Market smarter with Mailchimp’s automated messaging tools. Texture projection is a way of mapping a texture onto a 3D object and making it look like it was projected from a single point. Think of it as the batman symbol projected onto the clouds, with the clouds being our object and the batman symbol being our texture. It’s used both in games and visual effects, and more parts of the creative world. Here is a talk by Yi-Wen…

Read More

Playing with Texture Projection in Three.js – Website Design Article

From our sponsor: Market smarter with Mailchimp’s automated messaging tools. Texture projection is a way of mapping a texture onto a 3D object and making it look like it was projected from a single point. Think of it as the batman symbol projected onto the clouds, with the clouds being our object and the batman symbol being our texture. It’s used both in games and visual effects, and more parts of the creative world. Here is a talk by Yi-Wen…

Read More

How to Create the Apple Fifth Avenue Cube in WebGL – Website Design Article

From our sponsor: Bloom, the email opt-in and lead generation plugin for WordPress. In September 2019 Apple reopened the doors of its historic store in the Fifth Avenue and to celebrate the special event it made a landing page with a really neat animation of a cube made of glass. You can see the original animation in this video. What caught my attention is the way they played with the famous glass cube to make the announcement. As a Creative…

Read More

How to Create the Apple Fifth Avenue Cube in WebGL – Website Design Article

From our sponsor: Be Theme offers you 450+ pre-built websites that you can easily customize. In September 2019 Apple reopened the doors of its historic store in the Fifth Avenue and to celebrate the special event it made a landing page with a really neat animation of a cube made of glass. You can see the original animation in this video. What caught my attention is the way they played with the famous glass cube to make the announcement. As…

Read More

Real-time Multiside Refraction in Three Steps – Website Design Article

In this tutorial you will learn how to make objects appear glass-like in three steps using Three.js. From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform. When rendering a 3D object you’ll always have to assign it a material to make it visible and to give it a desired appearance, whether it is in some kind of 3D software or in real-time with WebGL. Many types of materials can be…

Read More

Real-time Multiside Refraction in Three Steps – Website Design Article

In this tutorial you will learn how to make objects appear glass-like in three steps using Three.js. From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform. When rendering a 3D object you’ll always have to assign it a material to make it visible and to give it a desired appearance, whether it is in some kind of 3D software or in real-time with WebGL. Many types of materials can be…

Read More

How to Build a Color Customizer App for a 3D Model with Three.js – Website Design Article

Learn how to create a complete color customizer app for a 3D model of a chair using Three.js in this in-depth tutorial. From our monthly sponsor: Take WordPress to a whole new level with Divi’s incredibly advanced visual builder technology. Try it for free. In this tutorial you’ll learn how to create a customizer app that lets you change the colors of a 3D model of a chair using Three.js. See the demo in action: 3D Model Color Customizer App…

Read More

Creating Grid-to-Fullscreen Animations with Three.js – Website Design Article

Learn how to create thumbnail to fullscreen animations for image grids using Three.js. From our monthly sponsor: Ship customer-facing metrics fast with Keen.io. Collect, store, query, & display stunning analytics. Animations play a big role in how users feels about your website. They convey a lot of the personality and feel of your site. They also help the user navigate new and already known screens with more ease. In this tutorial we want to look at how to create some…

Read More

Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber – Website Design Article

Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components. From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool. We will be looking at how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components. React and Three.js, what’s the…

Read More

Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber – Website Design Article

Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components. From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool. We will be looking at how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components. React and Three.js, what’s the…

Read More

How to Create a Sticky Image Effect with Three.js – Website Design Article

A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js. From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool. If you recently browsed Awwwards or FWA you might have stumbled upon Ultranoir’s website. An all-round beautifully crafted website, with some amazing WebGL effects. One of which is a sticky effect for images in their project showcase. This tutorial is going to show how…

Read More

Exploding 3D Objects with Three.js – Website Design Article

A set of WebGL demos that show an exploding 3D object animation inspired by “Kubrick Life Website: 3D Motion”. From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today. 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. The demo is…

Read More

Exploding 3D Objects with Three.js – Website Design Article

A set of WebGL demos that show an exploding 3D object animation inspired by “Kubrick Life Website: 3D Motion”. From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today. 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. The demo is…

Read More