Your SlideShare is downloading. ×
0
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Richard Salter: Using the Titanium OpenGL Module
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Richard Salter: Using the Titanium OpenGL Module

3,373

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 …

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
1 Like
Statistics
Notes
No Downloads
Views
Total Views
3,373
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×