The Titanium OpenGL Module: Sophisticated Graphics for the Ti Programmer

Richard Salter

Richard M. Salter Logical Labs

� What is OpenGL?

◦ An API for managing a 3D graphics environment.

�  not OO

�  OpenGL “pipeline”

�  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

�  Creates OpenGL context and view �  Initializes Framebuffers and Renderbuffers �  Optionally: can specify ◦  depthbuffer ◦  multisampling

var Ti.Opengl = require('Ti.OpenGL');

var view = Ti.Opengl.createView({backgroundColor:"#aaa",top:0,left:0width:’100%’,height:’100%’,

}),

var squareVertices = [-0.5, -0.33, 0.5, -0.33,-0.5, 0.33, 0.5, 0.33,

],

var squareColors = [255, 255, 0, 255,0, 255, 255, 255,0, 0, 0, 0,255, 0, 255, 255,

],

(-.5, -.33) (5, -.33)

(-.5, .33) (5, 33)

�  OpenGL convenience instructions ◦  setFrameBuffer/clear initialize framebuffer ◦  presentFrameBuffer submits framebuffer for

rendering

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()

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();

};

�  A databuffer is a compact opaque representation of an array of data �  Databuffer properties ◦  data ◦  type ◦  size

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

});

� Vertex Buffers ◦ Databuffers are also used as a bridge to

facilitating greater efficiency through using OpenGL vertex buffers directly.

view.glVertexPointer(2, Ti.Opengl.GL_FLOAT, 0, vertexDB);

view.glColorPointer(4, Ti.Opengl.GL_UNSIGNED_BYTE, 0, colorDB);

� 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.

�  Using a blob

�  To bind this texture:

var txtr = Ti.Opengl.createTexture({filter : Ti.Opengl.GL_LINEAR,view : opengl,image : blob

})

view.glBindTexture(Ti.Opengl.GL_TEXTURE_2D, txtr.name);

�  Shaders ◦ Creating shader programs using Javascript �  reproduce Objective C template

◦ Matrix operations �  Build Javascript library �  Core animation matrix operations (Phase 3)

� 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.

�  (As many as we have time for)