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)