O'Reilly logo

OpenGL Insights by Christophe Riccio, Patrick Cozzi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Porting Mobile Apps to We bGL
Ashraf Samy Hegab
4.1 Introduction
WebGL provides direct graphics hardware acceleration hooks into web browsers, al-
lowing for a richer application experience. This experience is now becoming compa-
rable with native applications. However, the development environment for creating
these new types of rich web apps using WebGL is different.
This chapter walks us through the aspects of porting a typical OpenGL mobile
app from Android and iOS to the web, covering steps from setting up your GL
context to drawing a textured button or handling the camera and controls to finally
debugging and maintaining your application.
This chapter includes accompanying source code that demonstrates the concepts
introduced in iOS, Android, Qt, and WebGL to help developers get up to speed on
web development using WebGL.
4.2 OpenGL across Platforms
Mobile apps have exploded into the scene since the arrival of smartphones. The new
app model introduced by Apple drove the development for interface and style, which
meant a higher utilization of graphics hardware to power animations and graphics in
mobile games and apps. In order for this model to successfully move over to the
web, Microsoft lead the way in providing a hardware-accelerated HTML5 canvas
component. Next to come was the standardization of a 3D hardware-accelerated API
47
4
48 IDiscovering
named WebGL, built as a standard component of a modern web browser. WebGL
is based on the OpenGL ES spec and used in the context of a web browser and
JavaScript. And now, with companies like Facebook and Google leading the way
with web app stores, the app market on the web is projected to grow [Gartner 11b].
As application developers, the more platforms we can retail our app on, the more
potential revenue we can earn. One way of architecting our apps user interface is to
utilize the native drawing components pro vided per platform, which means Objec-
tive C’s UIKit on iOS, Javas native Android views and Canvas for Android, and C#
and Silverlight for Windows Phone 7. While our application will benefit from the
platforms natural look and feel, most of the specific UI code will be required to be
rewritten per platform. However, with the emergence of gamification [Gar tner 11b],
which suggests the use of game mechanics to provide for a more enticing user expe-
rience, the design trends of breaking a platforms standard UI for something more
game-like is now practiced among newer mobile apps. This practice requires us to
develop our UI using OpenGL ES in order to do more than what the native com-
ponents offer and, as a design task, tone down the experience to respect the natural
interface of the platform.
With web a pps moving to WebGL and mobile apps moving to OpenGL ES,
porting between them can be made much easier because they share a common API.
But that’s not the end of the story: as the implementation of WebGL becomes
more robust and optimized, we see a future where the norm may be to develop
our application completely for the web and deploy a native shell application that
launches the native web view component directed to the web source as used in Phone-
Gap [Adobe 11]. This further reduces the cost involved in porting.
4.3 Getting Started
This section covers how to go from drawing things on an iOS and Android NDK app
todrawingthingsonaWebGLapp. ThisrequiresustoinitializetheOpenGLES
context, load basic shaders, initialize draw buffers, and finally draw.
4.3.1 Initializing an OpenGL ES context
iOS. In order to initialize OpenGL ES on iOS, we need to allocate and set an
EAGLContext. To generate and bind render buffers, CAEAGLLayer is provided
to allow us to allocate storage on native views (see Listing 4.1).
iOS typically sets the render buffer’s size to the devices screen resolution. We can
request different sizes by modifying the properties of the EAGLLayer:
// Set the back buffer to be twice the density in resolution.
glView .contentScaleFactor = 2.0f;
eaglLayer.contentsScale = 2.0;

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required