The Titanium OpenGL Module (Ti.OpenGL) opens the door to sophisticated graphics development for the Titanium programmer by exposing the entire OpenGL ES 1 and ES 2 graphics API to the Ti Javascript environment. The Ti.OpenGL view extends Ti.UI.View with a graphics rendering canvas that is easily managed within the Titanium view hierarchy. In addition, the module provides a databuffer object to hold large datasets and mitigate any inefficiency that arises from modeling datasets in Javascript. This talk demonstrates the pragmatics of building sophisticated graphics displays using Ti.OpenGL in both ES 1 and ES 2. It will reveal several reusable design abstractions that take advantage of features of the Javascript environment. Among the topics to be covered are: - OpenGL basic setup and animation - Use of databuffers for attribute and index arrays - Connecting databuffers and vertex buffer objects (vbo’s) - Using external resources (textures, shaders, etc.)

1. The Titanium OpenGL Module:
Sophisticated Graphics for the Ti Programmer
Richard Salter

2. Richard M. Salter
Logical Labs

3. — What is OpenGL?
◦ An API for managing a 3D graphics
environment.
– not OO
– OpenGL “pipeline”

4. — Getting Ti/Javascript and OpenGL to play nicely
together
◦ “Objectify” the OpenGL API with respect to a
drawing surface
– Create a natural extension to the Titanium object model.
– Ti.OpenGL.View
◦ Compensate for inefficiencies introduced by moving
programming level to Javascript.
– Cope with the large volume of data associated with a given
OpenGL model.
– Ti.OpenGL.DataBuffer

6. var Ti.Opengl = require('Ti.OpenGL');
var view = Ti.Opengl.createView({
backgroundColor:"#aaa",
top:0,
left:0
width:’100%’,
height:’100%’,
}),
— Creates OpenGL context and view
— Initializes Framebuffers and Renderbuffers
— Optionally: can specify
◦ depthbuffer
◦ multisampling

7. var squareVertices = [ (5, 33)
(-.5, .33)
-0.5, -0.33,
0.5, -0.33,
-0.5, 0.33,
0.5, 0.33, (-.5, -.33) (5, -.33)
],
var squareColors = [
255, 255, 0, 255,
0, 255, 255, 255,
0, 0, 0, 0,
255, 0, 255, 255,
],

8. view.setFrameBuffer();
view.clear();
view.glVertexPointer(2, Ti.Opengl.GL_FLOAT, 0, squareVertices);
view.glColorPointer(4, Ti.Opengl.GL_UNSIGNED_BYTE,
0, squareColors);
view.glEnableClientState(Ti.Opengl.GL_VERTEX_ARRAY);
view.glEnableClientState(Ti.Opengl.GL_COLOR_ARRAY);
view.glDrawArrays(Ti.Opengl.GL_TRIANGLE_STRIP, 0, 4);
view.presentFrameBuffer()
— OpenGL convenience instructions
◦ setFrameBuffer/clear initialize framebuffer
◦ presentFrameBuffer submits framebuffer for
rendering

9. setInterval(
function(e){
drawframe(view, new Date().getTime());
},
interval
);
var drawframe = function(view, timestamp) {
view.setFrameBuffer();
view.clear();
view.glLoadIdentity();
view.glTranslatef(0.0,
Math.sin(mover.iterate(timestamp))/2.0,
0.0);
view.glDrawArrays(Ti.Opengl.GL_TRIANGLE_STRIP, 0, 4);
view.presentFrameBuffer();
};

10. var vertexDB = Ti.Opengl.createDataBuffer({
data : Demo.data.squareVertices,
type : Ti.Opengl.GL_FLOAT
});
var colorDB = Ti.Opengl.createDataBuffer({
data : Demo.data.squareColors,
type : Ti.Opengl.GL_UNSIGNED_BYTE
});
— A databuffer is a compact opaque representation of an array of data
— Databuffer properties
◦ data
◦ type
◦ size

11. view.glVertexPointer(2, Ti.Opengl.GL_FLOAT,
0, vertexDB);
view.glColorPointer(4, Ti.Opengl.GL_UNSIGNED_BYTE,
0, colorDB);
— Vertex Buffers
◦ Databuffers are also used as a bridge to
facilitating greater efficiency through using
OpenGL vertex buffers directly.

12. — Loading from files
◦ Easiest
– Use the pvrtc file format with
glCompressedTexImage2D and a Ti.Filesystem.File
argument
◦ Alternatively
– Use jpg, png, etc. with convenience function
texImage2D and a Ti.Filesystem.File argument.

13. — Using a blob
var txtr = Ti.Opengl.createTexture({
filter : Ti.Opengl.GL_LINEAR,
view : opengl,
image : blob
})
— To bind this texture:
view.glBindTexture(Ti.Opengl.GL_TEXTURE_2D, txtr.name);

14. — Shaders
◦ Creating shader programs using Javascript
– reproduce Objective C template
◦ Matrix operations
– Build Javascript library
– Core animation matrix operations (Phase 3)

15. — Building reusable OpenGL abstractions
◦ VBBuffers : function(view, dataBufs)
– Returns 1 or 2 vertex buffers built from
DataBuffers contained in dataBufs
◦ Shaders : function(vpath, fpath)
– Load and compile vertex and fragment shaders
from files found at vpath and fpath
◦ defaultInit : function(view)
– Initializes view with a default orthographic
projection, etc.

16. — (As many as we have time for)