Camera Integration


Set up a simple camera selection and hooked it up to the <video> element with getUserMedia(). It’s still a little low resolution but walking around you can see the changes in color as expected.

Video Test

Trying a video stream as the image source and it’s working perfectly. Wiring this up to a camera at this point is trivial!

Color Averaging

As the image data reaches out to the edges, the #WebGL sphere still retains the same number of facets for each iteration of the spiral. So each iteration is averaged out to produce the same number of pixels. Right now the image is flipped and rotated slightly but it’s very close to the result I... Read the full article

First Attempt

The 3D approach is becoming more complicated than I anticipated. Applying a direct pixel map of the center portion of the image distorts it unrecognizably. It appears as though the sphere polygons are referenced in a spiral pattern starting at the north pole all the way around and down to the south.

Color Sphere

Manual colorization of a #WebGL sphere in three.js. Originally, I was going to make a 2D canvas app that averaged out camera input into a mosaic of hexagons. The 3D environment adds a level of technical complexity but it also has the potential to add spherical distortion effects and possibly some subtle animation.

Basic Controls


The saucer model attached to the camera. Running through the fly-through again, this time with some really basic controls.

(not so)Rough Saucer

Put together a really rough saucer model. The surface material has smoothness and reflectivity bumped way up to add to the rendering complexity.


Added a fly-through of the terrain to get a rough idea of how well #Unity’s complex shapes perform in #WebGL. Even on my aging Mac Mini it holds up great in #Chrome. The video is a little sluggish only because it was capturing at the same time.

Rachel Nevada


Getting back into #Unity with some hot arcade action. I’m calling this one “Attack Area 51!”. I had the idea years ago with what ultimately became Space Anglers. This time I’m focusing on the base itself and seeing how far I can push #WebGL.

AR In The Browser


Trying out AR.js, a browser based AR solution that works remarkably well. It uses a trigger image to anchor an #AFrame scene and overlays a phone camera preview. You can get the trigger image here. Either print it or display it on another screen. Then grab a smartphone and head over to to check... Read the full article