Lights can really make the difference between a seemingly flat scene and a visual masterpiece. Think of any photo-realistic painting or photograph and then imagine it with poor lighting and the impact is just not…
Tag: web
Three.js Introduction
Three.js is an open source javascript library for drawing 3d graphics on the web. It was created by Ricardo Cabello (aka. Mr. doob). It grew out of the work he had done for Flash on…
Three.js Getting Started
Let’s set up a basic scene in Three.js. The first thing you need to do is include the Three.js library. You can download it at threejs.org. You can also use the CDN url from cdnjs…
Three.js Geometry
Geometry defines the shape of the objects we draw in Three.js. Geometry is made up of a collection of vertices and often faces which combine three vertices into a triangle face. You can create your…
Three.js Materials
Materials determine how the surface of our geometry is drawn in Three.js. If the Geometry is our skeleton, defining the shape, then the Material is our skin. There are a variety of different types of…
Three.js Custom Materials with ShaderMaterial
Three.js comes with many materials built in. All these materials drawn in WebGL utilize shaders. Shaders are small programs that run on the GPU written in GLSL. We can create our own custom materials in…
Tiny Javascript Libraries
I used to do a lot of flash banner ads. Banner ads have tight requirements around file size so as not to bloat the hosting page’s download. With banner ads migrating to HTML this is…
Evolution of the Web: SXSW Interactive 2015
I was fortunate to have the opportunity to speak at SXSW Interactive again this year. My talk, the Evolution of the Web, covered how the web has changed and where it seems to be heading.…
Custom Filters with Pixi.js using GLSL Shaders
NOTE: This applies to Pixi v3 Pixi.js is Mat Groves’ lightning fast 2D rendering engine for the web utilizing WebGL or 2D Canvas. When used with WebGL it supports filters, which are basically a simple…
Masking in Canvas
Because the canvas requires manual drawing through scripting we need to leverage the 2d canvas API, through the canvas’ 2d context. Clip paths in canvas are pretty straight forward. First we simply draw a path…