Archive for the ‘WebGL’ Category

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...

Building a Game with Three.js, React and WebGL

Posted on: No Comments
I'm making a game titled "Charisma The Chameleon." It's built with Three.js, React 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...

Building A Cross-Platform WebGL Game With Babylon.js

Posted on: No Comments
  Here’s a challenge for you: what about building a 3D game over the weekend? Babylon.js is a JavaScript framework for building 3D games with HTML5, WebGL and Web Audio, built by yours truly and the Babylon.js team. To celebrate the new ver...