richard salter: using the titanium opengl module
DESCRIPTION
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.)TRANSCRIPT
![Page 1: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/1.jpg)
The Titanium OpenGL Module: Sophisticated Graphics for the Ti Programmer
Richard Salter
![Page 2: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/2.jpg)
Richard M. Salter Logical Labs
![Page 3: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/3.jpg)
� What is OpenGL?
◦ An API for managing a 3D graphics environment.
� not OO
� OpenGL “pipeline”
![Page 4: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/4.jpg)
� 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
![Page 5: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/5.jpg)
![Page 6: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/6.jpg)
� 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%’,
}),
![Page 7: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/7.jpg)
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)
![Page 8: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/8.jpg)
� 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()
![Page 9: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/9.jpg)
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();
};
![Page 10: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/10.jpg)
� 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
});
![Page 11: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/11.jpg)
� 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);
![Page 12: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/12.jpg)
� 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.
![Page 13: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/13.jpg)
� 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);
![Page 14: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/14.jpg)
� Shaders ◦ Creating shader programs using Javascript � reproduce Objective C template
◦ Matrix operations � Build Javascript library � Core animation matrix operations (Phase 3)
![Page 15: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/15.jpg)
� 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.
![Page 16: Richard Salter: Using the Titanium OpenGL Module](https://reader034.vdocuments.mx/reader034/viewer/2022051313/54b4d8564a795994558b45b6/html5/thumbnails/16.jpg)
� (As many as we have time for)