News

Create amazing HTML5 3D effects pt1

The web browser is now a rich environment for creating and rendering high-quality 3D graphics using the power of HTML5, CSS, Canvas and WebGL!

HTML5Logo

3D graphics and animation has long been possible on the web with the likes of Shockwave or Flash – there’s always been the opportunity to deliver high-quality 3D renders within the browser. But until recently, creating a compelling 3D experience took expensive authoring tools, as well as obtrusive browser plug-ins for rendering. But why? It’s partly because of the bandwidth demands associated with the amount of data required to render high-quality textures, intricate models and shapes, but also the need for powerful graphics, hardware and fast processors. Until now, these requirements were confined to a small percentage of desktop machines, but in the past couple of years that’s all changed: browser-based native 3D has officially arrived!

There are actually several different complementary technologies that can be used to create 3D objects and scenes within your webpages – some you’ll already be familiar with, while others are a little more like dabbling with the dark arts if you haven’t encountered them before. The principle options are Canvas and WebGL, with the option to use CSS3 to create 3D effects.

WebGL itself isn’t actually a 3D system, rather it provides a method to talk to the graphics card of the host computer directly. This means that graphics produced and rendered using WebGL can be enormously impressive, but at the same time the raw code (normally using JavaScript) can be very challenging to pick up. In this feature we’re taking a look at the different options for getting started with 3D in your webpages, and to simplify the development process we’ll use one of the most popular libraries available to abstract WebGL and make it user-friendly to generate simple scenes without having to understand every aspect of the underlying WebGL code.

The primary driver behind the new 3D capabilities of your web browser is the adoption of the WebGL API by browser vendors. WebGL (Web Graphics Library) is an interface that allows JavaScript to talk directly to the GPU (Graphic Processing Unit) of the device running the web browser, and this allows both 2D and 3D graphics to be rendered inside a canvas element on the page, utilising physics models and image processing effects. WebGL is based on the OpenGL ES 2.0 standard maintained by the Khronos Group, and is now supported by all bar one of the main browser vendors.

WebGL content can be created entirely without the need for programming using 3D modelling software such as Autodesk’s Maya, or the free-to-download Blender application. Scenes are exported to WebGL either natively, or using a plug-in in the case of some commercial 3D suites.

Using 3D in the browser requires several things to be provided either using code or the output from a 3D application. At its simplest, each 3D world requires at minimum a scene to place objects within, a renderer to draw the objects, a camera to act as the viewer, and one or more objects (each with one or more materials). For developers already familiar with 3D modelling, this will all come as second nature, but if you’re new to 3D you may find it a bit overwhelming at first.

Thankfully there are a number of different JavaScript libraries that abstract some of the more complicated aspects of procedurally generating graphics and models in WebGL, so you don’t need to understand all these elements to get started. Most of these libraries default to using WebGL as the renderer for 3D scenes, but some also allow you to use the standard canvas drawing API instead. Canvas is more widely integrated and adopted by browser vendors, but it doesn’t benefit from hardware-accelerated graphics.

A word of warning: the standard WebGL API isn’t friendly in the way that, say, jQuery is. It’s more akin to a C programming library than most modern web-focussed systems, making it feel inaccessible when you start out. It’s also quite a common mistake to think of WebGL as being a 3D engine in itself – it’s not actually 3D at all. What WebGL does is make it possible for you to develop 3D applications within the browser, acting more like a drawing API that gives you direct access to hardware-accelerated graphics rendering.

WebGL uses something called a shader to determine how things are drawn on screen. A shader comprises two different elements: the fragment shader, and the vertices. A vertex helps define the shapes of the items drawn, while the fragment shader deals with filling in the pixels that make up the face of these shapes. The manner in which these shapes are rendered is determined by the camera position, which determines how the shapes appear in space, the material, which assigns different colours and textures to the surface of each shape, and the lighting within the scene. Lights are optional with WebGL in that without them, the entire scene will be rendered flat – without any shading at all. This is perfect for a cartoon-like look, but does nothing to help describe the 3D nature of your scene.

WEBGL TOOLS

There are a number of tools you can use to help you generate and render 3D scenes using WebGL. At its most basic, all you need is a browser capable of rendering WebGL and a text editor, but with these tools it’s a little easier to get started

Blender

www.blender.org
Blender is a 3D modelling tool that’s free to download and use. It works across Windows, Mac OS X and Linux, and has a wide range of books and online resources available to help you get started. There’s also an extremely active community offering plug-ins and support, making Blender an excellent way to get started with 3D in general, and WebGL specifically.

Maya 2013

usa.autodesk.com/maya
Maya is a commercial animation and 3D modelling tool that’s widely used in the game and film business to create high-quality 3D scenes and assets. It supports WebGL through a plug-in, which offers native output to WebGL-compatible code, making it simple to set up your scene and render it using the API. Users can download a free trial of the latest version to try out the software.

Sketchfab

sketchfab.com
Sketchfab is a web service that uses WebGL to render and publish 3D interactive content in the browser. It acts as a free repository for 3D models, which can be authored in most of the popular formats including Blender, 3DS and KMZ. The output can be embedded on your site using a YouTube-style player, making it a great way to get started with using WebGL on your website.

USING CSS3 FOR 3D EFFECTS

If you don’t need fancy lighting and textures, CSS is also becoming capable of rendering content in 3D space and can offer an easier solution to generating simple 3D effects in the browser

For simple 3D effects rendered as part of your website user interface, there’s no need to go to the trouble to use WebGL to render your content. Instead, you can take advantage of one of the newer CSS specifications and use 3D transformations and transitions to pull or push your content around in 3D space. The premise is simple: a series of properties are defined for an element defining it’s translation in 3D space using the transform property to affect the item. When combined with the transition property, elements can be animated in response to user interaction, resulting in index cards that flip over in 3D space to reveal additional information behind, or simple spinning 3D cubes.
The 3D transformation module of CSS3 is already well supported by the most common browsers including (amazingly) Internet Explorer 10, Firefox 10+, Chrome 12+ and Safari 4+. Crucially, it’s also supported by many mobile handsets including iOS devices running Safari, Blackberry browser, Android, and Firefox for Android, but not Chrome.

BROWSER SUPPORT FOR WEBGL

Browser support is growing for WebGL, but there are a few restrictions to be aware of when deciding to deploy your content usin
g WebGL as the renderer. Check out our round-up below.

Chrome

Google Chrome has good support for WebGL and is the best browser for high-performance rendering of content, although mobile versions do not yet support WebGL due to graphics limitations.

Firefox

Older versions of Firefox need a slightly different syntax to work, using gl rather than mgl prefixes. Access and force-enable WebGL using the address about:config in the address bar.

Internet Explorer

Microsoft haven’t yet announced any support for WebGL yet, so those users of Internet Explorer will not be able to view WebGL-rendered content natively.

Safari

WebGL is supported on Mac OS X 10.6 and above, but is disabled by default. Enable it by choosing Safari>
Preferences and checking Show develop menu in menu bar, then choose the Enable WebGL option from the Develop menu.

×