Monthly Archives: June 2011

Three.js now with 3D Glasses!

I was digging around the Three.js docs on github the other day and saw a reference to a renderer I had not seen before. It was labeled AnaglyphWebGLRenderer. I already knew about the canvas renderer and the WebGL renderer. I thought I would throw it in and give it a try. Changing one line of code from our previous Three.js tutorial I now had a 3D model rendering with support for the old school 3D glasses. Pretty cool! Or a raging headache.

Change this line in the previous Three.js example.

Mr. Bird in Stereo

We make this look good…

Now all you need to do is get your 3D glasses on and check out the new and improved Mr. Bird

Pixel Pushing with Canvas

Today we are going to explore what I think is one of the coolest features of the canvas tag. The ability to extract and manipulate pixel data. This is an amazing feature to canvas that will help developers create all sorts of cool applications from image manipulations to code driven artwork.
I think this graphic sums it up…

Preview

I wanted to make a special graphic for this post so I cracked open Blender and came up with this HTML5 rocks 3D scene. The idea was to have a very distinct difference between the range of colors so that I could detect when I was over a orange pixel versus a grey pixel. For a surprise hover over any orangish pixel in the scene. See it in action.

Loading an image onto the Canvas

In order to get the pixels from our image we will first need to load it onto the canvas. This process is pretty simple. First we need to create some canvi : ) (Is that a word?)

Next, we will need to load our image and shove it into the “rocks-canvas” element. Upon load we will fire an init function. Init will setup references to our canvas and canvas context. The main magic is line 11. We can take our loaded rocksImg and use the drawImage function to draw it directly to the canvas context. If you recall we used this drawImage function in our canvas spritesheet example as well.

Mouse Movin’

Once we have our image drawn we need to sample pixels based on the mouse movement. As you can see from our previous code snippet the last line is setting up the onMouseMove event so we should be ready to go. FYI, in order to keep it simple we are going to condense down the code from the working example. The full source is at the bottom if you want all the bells and whistles.

Ok so we first get ev.offsetX and ev.offsetY which will give us our mouse position. Next, we call getImageData from our canvas context and pass in the x and y coordinates followed by a width and height which in our case we want a 1px x 1px sample size. Then we call the data attribute. This will get our image data into a byteArray. The pixel data is stored in this byteArray in RGBA format. This means that our resulting pixels values in the byteArray are pixel[0] = RED, pixel[1] = GREEN, pixel[2] = BLUE, pixel[3] = ALPHA. RGB values range from 0 to 255 so each of these values returned from the byteArray will be within those ranges. The last thing we can do is check each of the RGB values for a range of colors and we could trigger something on the page if the user is on a certain color. (Example Lines 13 – 19)

Tip: If you want to see what the value will look like just pull up the color picker in photoshop.

Conclusion

Accessing canvas pixel data opens up many possibilites for cool and interesting projects. As always I would be interested in any cool applications of these techniques. Feel free to post a comment or link.

Source links.
Code Source
HTML5 Blend file. If you want to change the colors in the 3D file… : )

A day at the beach with HTML5

Recently I was looking back at some previous work I had done in Flash and my mind started to wonder. Could I take some of the techniques I have used in the past with Flash and apply them using only HTML5 and JavaScript? After a little bit of playing around I discovered that yes quite a few things that were great in Flash we can now make work with HTML5. (Sorry still no alpha channel on video). With that A day at the beach with HTML5 was created.

Preview


Preview “A day at the beach with HTML5” here.

What’s the big deal?

The big deal is that we are using non-web fonts, video, audio, and canvas all without the need for an external plugin. That’s pretty cool. In the next couple sections we will hi-light some of these features.

Web Fonts. Old and busted.

It’s about time… I thought for a min if I had to look at one more site done all in Arial I would have to Chuck Norris roundhouse someone. Anyway, if you haven’t noticed already the type in the top left corner: 1 is not Arial :), 2 is selectable, and 3 is not a local font on my computer. This is possible via Google Webfonts. here

Google Webfonts take advantage of the css property @font-face and make it easy to add different type to your page. Google does all the heavy lifting so that all you have to do is add a link tag like so…

And then you can use the font name in your css like so….

With Google Webfonts we can finally move into the year 3000 with our typography! Or at least be able to use more than 5 fonts.

Integrated Video

Next up on the list are the waves. They were originally a FLV file that was used for a flash project. I was able to easily convert the file to HTML5 video formats using Miro Video Converter which is a free GUI wrapper for FFMPEG. I converted the video to mp4 and ogv files since the browser vendors cannot seem to agree on a standard. One little trick to note about this video is that it was masked in After Effects and flattened with background jpg for the main site. This was done so the video would layer like it is part of the beach scene. When using this technique we remove the need to use an alpha channel on the video which is not allowed in HTML5 video formats.

Audio

This was the easiest part of the whole site. Using the standard audio tag with HTML5 made it easy to add some sea sound ambiance.

Canvas fun

Last but not least is the HTML5 canvas. In this example we are making a very simple drawing tool. This is not by any means polished but it more a proof of concept. First we will get the canvas element using document.getElementById. Next we will need to get the canvas context. On mousedown we will do a moveTo() the position on the canvas based on the mouse position. Lastly, when the mouse is moving we need to draw a lineTo() on the canvas for each movement and stroke it. Once again this is a very simple example and could easily be improved upon. However it illustrates the potential of canvas.

Conclusion

With all these interesting and exciting new features in HTML5 it is easier than ever for web developers and designers to create immersive experiences that are plugin free! Feel free to post a comment and link to other neat uses of HTML5 and JavaScript as a replacement to using Flash.

1 2