Archive for the ‘WebGL’ Category

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

Animated Heat Distortion Effects with WebGL

View demo Download source Today we want to show you how to create some realistic looking heat haze distortion effects using fragment shaders in WebGL. The idea is to add a subtle animated distortion to a static image a...

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend? Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and ...