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
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 app’s user interface is to
utilize the native drawing components pro vided per platform, which means Objec-
tive C’s UIKit on iOS, Java’s native Android views and Canvas for Android, and C#
and Silverlight for Windows Phone 7. While our application will beneﬁt from the
platform’s natural look and feel, most of the speciﬁc UI code will be required to be
rewritten per platform. However, with the emergence of gamiﬁcation [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 platform’s 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
context, load basic shaders, initialize draw buffers, and ﬁnally 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 device’s 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;