3D right in the web browser - no plugins required!

webGL

Technology moves quickly so its common for people to miss enhancements and new features.  Even techies have trouble keeping up.  For those that don't know, there is a framework built into all the major browsers called "webGL".  It creates 3D graphics right in your web page.  You can utilise it simply by writing code in Javascript, the native browser language.

Common misconceptions

I've bumped into designers and producers who shy away from webGL, but for the wrong reasons.  I will highlight some of the points here:

"I don't want the user to download a plugin"

It does not require Flash or any other plug-in.  Its built into all major browsers

"It won't run on mobile devices"

It works on all desktop browsers and also mobile browsers

(image from https://www.punkoffice.com/barb)

"I can't use it in my existing website"

It can be combined with typical HTML elements.  You don't need to have a screen which is all 3D

(image from https://www.punkoffice.com/retail)

"Its not SEO friendly"

You can apply SEO to it so you can track what people do in 3D space and you can bookmark 3D locations

"Its too slow"

You can animate tens of thousands of polygons on a mobile browser at around 50 frames-per-second

(image from https://www.punkoffice.com/kickboxing)

"There's too much to load."

You can create a 3D world which makes a 7MB file.  The web server can compress that to under 2MB.  It will load under 2 seconds on a typical DSL speed network.  You can also set quality settings and lazy load assets.

(image from https://www.punkoffice.com/lotsatrees)

Virtual Reality

You don't need an expensive Oculus Rift.  You can use a cheaper mobile phone VR headset.  You don't even need to download an app.  You can create virtual reality scenes in the web browser using webGL.

(image from https://www.punkoffice.com/vr - best viewed on mobile device)

Summary

I've seen a lot of companies showcase their 3D renders by taking a snapshot then putting the image onto their website.  I've also seen companies make a video of someone interacting with a 3D object then putting that video onto their site.  Time and time again I see people say "Check out this 3D render!" then proceed to show a photo of it.  How can I interact with it and see the back side? Why create a 3D object just to display it in 2D space?  With webGL your users can interact with it directly on your website.  You can have houses, furniture, auto-mobiles, power tools, people, clothing, anything displayed in 3D for people to interact with.

If you are a company that cares about user experience you should consider using webGL.  3D in the browser is here, lets start using it!!