Upload
appcelerator-inc
View
3.178
Download
1
Tags:
Embed Size (px)
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.)
Citation preview
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)