HTML5 And WebGL Fit Interactive Embedded Applications

March 16, 2011
Technology Editor Bill Wong discusses the addition of WebGL to HTML5 that brings 3D hardware acceleration to browsers.

WebGL complements HTML5 and fills out the Web browser, providing access to accelerated 3D display technology.

Designers can Add a front end to an embedded application by using a number of mechanisms, including the use of a Web browser, which offers a number of advantages. For example, this technique allows the browser to be local or remote.

A standalone device with an LCD can run a browser, enabling developers to provide the interface using HTML and Javascript. Moving the browser off-board via a network connection does not change the definition of the user interface.

The HTML5 Wave

HTML5 promises to revolutionize the browser by providing a consistent platform for developers to target. It’s designed to provide streaming video without a host of plug-ins. With its enhancements in cascading style sheets (CSSs), developers can target a wider range of devices while splitting the content from its display methodology as well.

Also, HTML5 addresses the deficiencies of HTML4, which has served relatively well for a number of years. An HTML5 browser can support a wide range of features including video and 3D graphics, which are handled by the recent addition of WebGL to the mix (see the figure).

WebGL Provides a 3D Canvas

The Khronos Group is known for a range of technologies including OpenGL and OpenGL/ES. WebGL requires these 3D technologies, which are normally accelerated by hardware. Native applications such as games also use OpenGL interfaces. Now, Web-based applications will have consistent access to the 3D hardware.

WebGL makes it possible to create 3D heads-up displays (HUDs), which typically require native applications that deal with device drivers like OpenGL. Also, WebGL is very flexible and isn’t restricted to a rectangular window. It integrates with HTML5’s tag and even allows the canvas to be used as a texture. All of the OpenGL 3D technology is available to a Web browser that supports HTML5 and WebGL.

WebGL has been available in beta form on most platforms like Firefox, Google’s Chrome, and Apple’s Safari. Microsoft has not committed to WebGL for Internet Explorer (IE) yet, though HTML5 is on its roadmap.

Still, support is available for WebGL on IE using Google’s Angle project. Angle provides an OpenGL subset using DirectX that’s required by IE. Internet Explorer has a competing strategy called Silverlight. Likewise, many of the services in HTML5 and WebGL are found in Adobe’s Flash.

Flash is Adobe’s very popular proprietary platform, and it has been ported to a range of platforms. Microsoft’s Silverlight leverages and requires .NET. On the plus side, the support is extensive and the development tools are well integrated. On the downside, .NET runs on Windows platforms, and these days the Web is being viewed on smart phones and iPads.

Embedding HTML5

From an embedded standpoint, the flexibility to move the user interface onto the browser means the actual user interface can be multiple devices, especially given the wide range of mobile devices that will support HTML5 and WebGL.

The devices running the browser are already networked, so a user interface does not have to be restricted to displaying information from only an embedded device. It may integrate information from any number of servers.

HTML5 and WebGL are a boon to Web developers, but they can also be a tool that embedded developers can exploit.

Adobe
www.adobe.com

Khronos Group
www.khronos.org

Microsoft
www.microsoft.com

World Wide Web Consortium (W3C)
www.w3.org

About the Author

William G. Wong | Senior Content Director - Electronic Design and Microwaves & RF

I am Editor of Electronic Design focusing on embedded, software, and systems. As Senior Content Director, I also manage Microwaves & RF and I work with a great team of editors to provide engineers, programmers, developers and technical managers with interesting and useful articles and videos on a regular basis. Check out our free newsletters to see the latest content.

You can send press releases for new products for possible coverage on the website. I am also interested in receiving contributed articles for publishing on our website. Use our template and send to me along with a signed release form. 

Check out my blog, AltEmbedded on Electronic Design, as well as his latest articles on this site that are listed below. 

You can visit my social media via these links:

I earned a Bachelor of Electrical Engineering at the Georgia Institute of Technology and a Masters in Computer Science from Rutgers University. I still do a bit of programming using everything from C and C++ to Rust and Ada/SPARK. I do a bit of PHP programming for Drupal websites. I have posted a few Drupal modules.  

I still get a hand on software and electronic hardware. Some of this can be found on our Kit Close-Up video series. You can also see me on many of our TechXchange Talk videos. I am interested in a range of projects from robotics to artificial intelligence. 

Sponsored Recommendations

Comments

To join the conversation, and become an exclusive member of Electronic Design, create an account today!