Richard Salter: Using the Titanium OpenGL Module

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

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

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,
],

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

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

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

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.

—  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
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);

—  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)

Richard Salter: Using the Titanium OpenGL Module

More Related Content

What's hot (20)

Similar to Richard Salter: Using the Titanium OpenGL Module (20)

More from Axway Appcelerator (20)

Recently uploaded (20)

Richard Salter: Using the Titanium OpenGL Module