The Titanium OpenGL Module:  Sophisticated Graphics for the Ti Programmer               Richard Salter
Richard M. SalterLogical 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  ...
var Ti.Opengl = require(Ti.OpenGL);	            var view = Ti.Opengl.createView({	              	backgroundColor:"#aaa",	 ...
var squareVertices = [	                  (5, 33)                           (-.5, .33)  	-0.5, -0.33,	  	 0.5, -0.33,	  	-0...
view.setFrameBuffer();	view.clear();	view.glVertexPointer(2, Ti.Opengl.GL_FLOAT, 0, squareVertices);	view.glColorPointer(4...
setInterval(	         	function(e){	         	   	drawframe(view, new Date().getTime());	         	}, 	         	interval	...
var vertexDB = Ti.Opengl.createDataBuffer({	        	data : Demo.data.squareVertices,	        	type : Ti.Opengl.GL_FLOAT	 ...
view.glVertexPointer(2, Ti.Opengl.GL_FLOAT, 	  	 	 	 	 	 	 	0, vertexDB);	view.glColorPointer(4, Ti.Opengl.GL_UNSIGNED_BYT...
—  Loading    from files  ◦  Easiest    –  Use the pvrtc file format with        glCompressedTexImage2D and a Ti.Filesys...
—    Using a blob           var txtr = Ti.Opengl.createTexture({	              	filter : Ti.Opengl.GL_LINEAR,	           ...
—  Shaders  ◦  Creating shader programs using Javascript    –  reproduce Objective C template  ◦  Matrix operations    –...
—  Building   reusable OpenGL abstractions  ◦  VBBuffers : function(view, dataBufs)    –  Returns 1 or 2 vertex buffers ...
—  (As   many as we have time for)
Richard Salter: Using the Titanium OpenGL Module
Upcoming SlideShare
Loading in …5
×

Richard Salter: Using the Titanium OpenGL Module

4,165 views

Published on

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

Published in: Technology, Art & Photos
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
4,165
On SlideShare
0
From Embeds
0
Number of Embeds
82
Actions
Shares
0
Downloads
32
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Richard Salter: Using the Titanium OpenGL Module

  1. 1. The Titanium OpenGL Module: Sophisticated Graphics for the Ti Programmer Richard Salter
  2. 2. Richard M. SalterLogical Labs
  3. 3. —  What is OpenGL? ◦  An API for managing a 3D graphics environment. –  not OO –  OpenGL “pipeline”
  4. 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
  5. 5. 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
  6. 6. 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, ],
  7. 7. 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
  8. 8. 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(); };
  9. 9. 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
  10. 10. 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.
  11. 11. —  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.
  12. 12. —  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);
  13. 13. —  Shaders ◦  Creating shader programs using Javascript –  reproduce Objective C template ◦  Matrix operations –  Build Javascript library –  Core animation matrix operations (Phase 3)
  14. 14. —  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.
  15. 15. —  (As many as we have time for)

×