Native WebGL: A giant leap for the web development community on the BlackBerry PlayBook

Native SDK Development

Image courtesy of Khronos Group™

BlackBerry® developers, you’re in for a treat. If you haven’t heard already, the BlackBerry web platform for BlackBerry® PlayBook™ tablet OS 2.0 supports WebGL. WebGL is an exciting new technology that is designed to offer advanced rendering capabilities and 3D Graphics for web development. Support for this feature was announced during the BlackBerry DevCon Americas 2011 keynote, and developers can use it as part of their HTML5 and BlackBerry® WebWorks™ web applications.

That’s right – if you wanted to, you could build a standalone BlackBerry application, powered by WebGL, using the BlackBerry WebWorks SDK, and distribute that app to other BlackBerry® PlayBook™ tablet users through the BlackBerry App World™ storefront.

This is a giant step forward for the web development community. As one of the first mobile development platforms to offer a native implementation of WebGL to its developers, BlackBerry provides the web development community a unique opportunity to push the boundaries of what they can do in their application content. WOW!

This is amazing! Wait a sec, what’s WebGL?

WebGL is a cross-platform web standard that is designed to define a specification for enabling 3D graphics, powered by OpenGL ES 2.0. Using WebGL, you can create amazing graphics and subsequently more fun user experiences.

Here is a demo of a game named TunnelTilt running on BlackBerry PlayBook tablet OS 2.0. This sample app was created for the purpose of announcing WebGL at BlackBerry DevCon Americas 2011, and it has since been open sourced as the BlackBerry WebGL-Samples repo in Github:

[YouTube link for mobile viewing]

The 3D graphics are rendered in an HTML5 canvas element that is hardware accelerated. This content can even be interacted with using JavaScript™ and the document object model (DOM).

function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);
initShaders();
initBuffers();

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);

drawScene();
}

Code sample: Learning WebGL Lesson 1 (http://learningwebgl.com/blog/?p=28)

Libraries and Frameworks

The WebGL code that provides highly visual graphics can be very complex, and may present a steep learning curve for new developers who are not familiar with the necessary principles. Building compelling WebGL content may require a deep understanding of trigonometry, geometry and Open GL features.

For example, after reading the following tutorial about how to draw a triangle and square using WebGL, ask yourself if you were expecting to see so many lines of code. There may not be the higher level “draw” or “square” primitives and methods that a developer may find helpful in building real-world applications. WebGL offers lower-level primitives to its developers for building content. Why? It’s because WebGL is a language, not an application framework.

Don’t worry if that’s not what you were hoping to hear! Keep reading.

var square = gl.createBuffer();
var square_vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bindBuffer(gl.ARRAY_BUFFER, square);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(square_vertices), gl.STATIC_DRAW);
square.itemSize = 3;
square.numItems = 4;

Code sample: creating a square using basic WebGL constructs.

Many, and I mean many, developers have recognized the need to simplify WebGL development, and have spent a lot of time and energy building great libraries and frameworks for other developers to use. These libraries translate the low-level functionality of WebGL into higher-level APIs that are easier to use in the context of application development.

Another benefit to developers is that all of this is done using JavaScript APIs. So if you are already familiar with the JavaScript language, you are off to a great start. You can continue to use all of the existing JavaScript development tools that you currently use (e.g. Web Inspector, IDEs, Jslint, etc).

A few examples of community-led projects that web developers can use to build great WebGL content include three.js, CopperLicht, SceneJS, GLGE and Canvas 3d library. There are many more, and the list will continue to grow. These libraries have traditionally focused on desktop browsers, which means authors will need to ensure they have successfully been optimized for mobile too. If you end up using a 3rd party library and find a bug, or if you are concerned about performance, please contact the appropriate author(s) and file an issue with them. Many of these frameworks exist as open source, meaning there is a great opportunity for improvement. As a community, we can work together to ensure these libraries work great on BlackBerry.

var rect = new THREE.Rectangle();
rect.set(0, 0, 100, 100);

Code sample: using three.js library to create a square. Only 2 lines of code!

Performance

So obviously there is a mobile version of the WebGL spec, right? Developers can expect to work with a specification that’s optimized for mobile devices and doesn’t have high memory or CPU requirements as desktop computers?

No, actually, there isn’t! OpenGL ES 2.0 does not have a mobile spec. So the same libraries that are used to produce WebGL content for powerful desktop hardware are also the same libraries used to build content for mobile devices.

What does this mean? It means that WebGL code that was designed for desktop browsers will need to be properly optimized to run on mobile smartphones and tablets. If not, you can expect to experience slow rendering or performance. This is very important for developers to recognize: one cannot assume that if it works on desktop, it will also work on mobile.

Community Activity

Many of you have already seen our web platform team members participating in HTML5 and WebGL developer events worldwide. Recently we had delegates attend and present at events such as onGameStart and New Game Conference. Here are some highlights from these events:

“WebGL is huge!!! And the fact that we will be the first tablet to have it built-in is extra-huge. We need to engage aggressively here to showcase our wares … interest in tablets is high.”

- Laurent Hasson, Director Web Platform, Research In Motion® (RIM®) (onGameStart, Warsaw, Poland)

“Good News! We are actually well positioned in terms of technology … There’s no reason we can’t have the best mobile web platform for gaming and game development.”

- Genevieve Mak, Software Developer, RIM (New Game Conference, San Francisco, USA)

This is awesome. I love WebGL. What should I do now?

The following steps can help you learn how to build a WebGL-powered BlackBerry application:

1. The BlackBerry open source project on Github contains a WebGL-Samples repo where developers can download and/or contribute to code examples. In fact, the source code for the TunnelTilt sample app shown above is available in this repo! Download it today and see how JavaScript, HTML5 and WebGL are being used together to provide an awesome user experience.

2. Log into the DevCon on Demand portal and read through the DEV46 session “Advanced Web Rendering: WebGL, Canvas and Gaming” session that was delivered at BlackBerry DevCon Americas 2011. Don’t miss this session, where Eli Fiddler and Ram Rajagopalan from RIM presented a great overview and best practices about using WebGL as well as some helpful code snippets and examples.

3. Take advantage of the many helpful learning resources you can find online, such as learningwebgl.com by Giles Thomas, which contains many tutorials and sample code. Remember: WebGL is a standard that the BlackBerry web platform supports. This means that most – if not all – tutorials, sample code or labs that you will find can be used to assist you in building WebGL content for BlackBerry. Check out the Mozilla Developer network for a robust collection of WebGL learning resources.

4. Discover how you can use Ripple Mobile Emulator to test WebGL content, and the BlackBerry WebWorks SDK to transform that content into a standalone BlackBerry application.

Did you find a bug? Report bugs in the developer issue tracker. Our goal is to provide developers with a world class WebGL experience on the BlackBerry platform, and we want to hear from you to ensure we are doing so.

Finally, I wanted to extend an invite to you to stay in touch with us. We want to know when you have created a WebGL application, framework and/or game content that runs great on the BlackBerry PlayBook tablet. Send us a message or ask a question in the comments below, or else share a great idea in the forums.

About Adam S.

Adam is a Team Lead on the Developer Relations Team at BlackBerry. He manages technical relationships with ISVs as well as incubating the developing community ecosystem. Adam specializes in producing applications based on web and native technologies.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus