Archive for the ‘WebGL’ Category

3D Particle Explorations

Posted on: No Comments
This set of demos explores 3D particle animations using three.js and easing. All of the particles and shapes in these demos are made from basic geometry/material/mesh sets in three.js, such as spheres, lines, and boxes. The Concept Making animations ...

Decorative WebGL Backgrounds

Posted on: No Comments
Today we are going to explore some original and experimental backgrounds generated using WebGL. The main idea is to show interesting animated shapes as decorative page backgrounds, some having subtle interactivity. All the demos are made with the ...

Liquid Distortion Effects

Posted on: No Comments
Today we’d like to share an interesting distortion effect with you. The main concept of this demo is to use a displacement map in order to distort an underlying image, giving it different types of effects. To demonstrate the liquid-like transitio...

Creating Photorealistic 3D Graphics on the Web

Posted on: No Comments
Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be able to create these effects, we would need to use ...

Building a Full-Sphere 3D Image Gallery with React VR

Posted on: No Comments
React VR is a JavaScript library by Facebook that reduces the effort of creating a WebVR application. You may compare React VR with A-Frame by Mozilla, but instead of writing HTML, with React VR we are using JavaScript to create a WebVR scene. React VR...

Infinite Tubes with Three.js

Posted on: No Comments
Since WebGL is getting more and more popular, we start to see a bunch of websites using it for amazing creative designs. The brand Fornasetti recently published their website using the power of WebGL for a very nice effect: an animation that let’...

WebGL Scroll Spiral

Today we want to show you some shader art made with WebGL. The idea is to create a decorative background effect by twisting images and hexagonal grid patterns smoothly on page scroll. The effect aims to be as light as possible on desktops or mobile dev...

Building Gorgeous 3D Maps with eegeo.js and Leaflet

eegeo.js is an open source 3D maps API built on top of Leaflet, the popular mapping library. There are many mapping libraries that allow you to embed or build simple, 2D maps. Notably Google Maps, Bing Maps, HERE, Mapbox and OpenStreetMap. Popular mapp...

Building a Game with Three.js, ReactJS and WebGL

Posted on: No Comments
I'm making a game titled "Charisma The Chameleon." It's built with React, Three.js and WebGL. This is an introduction to how these technologies work together using react-three-renderer (abbreviated R3R). Check out A Beginner's Guide to WebGL and Gettin...