HowTo: Draw with OpenGL3 using MultitouchScreenOpenGL3Renderer framework

(This HowTo assumes you have already covered Preparing the programming environment and Creating an Xcode project in HowTo: Create your first multi-touch project)

Preparing you project skeleton

Creating a TableObject:

  • In Xcode, right-click your project, select 'New File...', choose Mac OS X > Cocoa > Objective-C class.
  • Call this class for example: 'TORootWindow'
  • In TORootWindow.h file, import TableEngine.h, and make TORootWindow a subclass of TableObject:
    #import <TableEngine/TableEngine.h>
    @interface TORootWindow : TableObject
  • In TORootWindow.m add the following method:
    - (id) initWithFrame:(NSRect) frame
    self = [super initWithFrame:frame];
    if (self){}
    return self;
    -(void) draw {}

Setting the AppDelegate:

  • In AppDelegate.h, import TORootWindow.h, and create a prototype of type TORootWindow:
    #import <Cocoa/Cocoa.h>
    #import "TORootWindow.h"
    @interface AppDelegate : NSObject <NSApplicationDelegate>
    @property (assign) IBOutlet NSWindow *window;
    @property (nonatomic, strong) TORootWindow* win;
  • In AppDelegate.m, in applicationDidFinishLaunching method:
    [TableEngine initTableEngineWithMSAA:8 SSAA:1];
    win = [TORootWindow alloc] initWithFrame:NSMakeRect(100, 100, 0 , 0)]; // NSMakeRect(100, 100, 0 , 0) locates the table object's lower left corner at location x = 100, y = 100.
    [[TableEngine tableEngine].rootTableObjects win];

Drawing (the framework was updated, some of these methods don't work anymore)

Each drawing you want to render on the screen is called a 'drawable'. A drawable is attached to a root TableObject. Each TableObject can have other TableObjects as children. The location of a drawable or a child TableObject is relative to the root TableObject, i.e. if TableObject was created with initWithFrame:NSMakeRect (100, 100, 0, 0), as in our example TORootWindow, its lower-left corner will be located at postion x = 100, y = 100 on the screen. If a drawable is initialized at location (200, 200) this means it will be always located 200 pixels away in x and y directions from TORootWindow's lower-left corner.

Drawing basic shapes:

You need to import "MultiScreenOpenGL3Renderer/MultiScreenOpenGL3Renderer.h" in each class you use drawables/textures/shaders in.

MultitouchScreenOpenGL3Renderer provides the wrapper for OpenGL3.2 API. To draw a basic shape use one of the following methods:
Call these methods from initWithFrame method
Note: fillMode is Fill or Stroke
  • Rectangle
    DrawableObject* drect = [[DrawableObject alloc] initRect:NSMakeRect(200, 200, 300, 150) color:[NSColor colorWithCalibratedRed:0.0 green:0.0 blue:1.0 alpha:1.0] fillMode:Fill];
    [self.drawables addObject:drect];
    Note: Rect is a special case in that its lower-left corner is always on the TableObject's lower-left corner, and the location provided with NSMakeRect(200, 200, 300, 150), is ignored, only the width and height are considered.
  • Line
    DrawableObject* line = [[DrawableObject alloc] initLineFrom:CGPointMake(800, 800) to:CGPointMake(500, 500) withColor:[NSColor colorWithCalibratedRed:1.0 green:1.0 blue:0.0 alpha:1.0]];
    [self.drawables addObject:line];
  • Connected points
    CGPoint a = CGPointMake(450, 300);
    CGPoint b = CGPointMake(350, 300);
    CGPoint c = CGPointMake(350, 200);
    CGPoint d = CGPointMake(400, 200);
    NSMutableArray* test = [NSMutableArray arrayWithObjects:
    [NSData dataWithBytes:&a length:sizeof(CGPoint)],
    [NSData dataWithBytes:&b length:sizeof(CGPoint)],
    [NSData dataWithBytes:&c length:sizeof(CGPoint)],
    [NSData dataWithBytes:&d length:sizeof(CGPoint)],
    DrawableObject* dconnectedPoints = [[DrawableObject alloc] initLine:test lineMode:Normal withColor:[NSColor colorWithCalibratedRed:0.0 green:1.0 blue:1.0 alpha:1.0]];
    [self.drawables addObject:dconnectedPoints];
  • Triangle
    CGPoint v1 = CGPointMake(475, 75);
    CGPoint v2 = CGPointMake(550, 0);
    CGPoint v3 = CGPointMake(400, 0);
    NSMutableArray* test2 = [NSMutableArray arrayWithObjects:
    [NSData dataWithBytes:&v3 length:sizeof(CGPoint)],
    [NSData dataWithBytes:&v2 length:sizeof(CGPoint)],
    [NSData dataWithBytes:&v1 length:sizeof(CGPoint)],
    DrawableObject* dtraingle = [[DrawableObject alloc] initTriangle:test2 color:[NSColor colorWithCalibratedRed:1.0 green:0.0 blue:0.0 alpha:1.0] fillMode:Fill];
    [self.drawables addObject:dtraingle];
  • Polygone
  • Circle
    DrawableObject* dcircle = [[DrawableObject alloc] initCircleAt:CGPointMake(600, 400) radius:50 color:[NSColor colorWithCalibratedRed:1.0 green:1.0 blue:1.0 alpha:1.0] fillMode:Stroke];
    [self.drawables addObject:dcircle];
  • Elipse

In draw method call drawWithModelViewMatrix for each darwable object :
[drawable drawWithModelViewMatrix:self totalAffineTransform];

Using textures

  • Add an image file to your main bundel: right-click your project, click 'add files to ""...', choose the image using the file browsers.
  • In Xcode, click on your project, Build Phases tab, click + in Copy Bundel Resources, and add the image.
  • In TORootWindow.m, initWithFrame method:
    DrawableObject* dtexture = [[DrawableObject alloc] initRect:NSMakeRect(100, 700, 100, 50) color:[NSColor colorWithCalibratedRed:1.0 green:0.0 blue:0.0 alpha:1.0] fillMode:Fill];
    [dtexture setupShader:@"basicTextureShader"];
    [self.drawables addObject:dtexture];
    [[TableEngine tableEngine] createTexture:[[NSBundle mainBundle] URLForImageResource:@"ImageName"] withName:@"ImageName"];
  • In draw method:
    [dtexture drawWithModelViewMatrix:self totalAffineTransform texture:@"ImageName"];

Adding a TableObject child

  • Create a new Objective-C class, call it WinChild.
  • In WinChild.h:
    #import <TableEngine/TableEngine.h>
    @interface WinChild : TableObject
  • In WinChild.m create method:
    - (id) initWithFrame:(NSRect) frame inTableObject:(TableObject*) parent
    self = [super initWithFrame:frame inTableObject:parent];
    if (self){}
    return self;
    - (void) draw{}
  • In initWithFrame: inTableObject method:
    DrawableObject* dline = [[DrawableObject alloc] initLineFrom:CGPointMake(0, 0) to:CGPointMake(160, 90) withColor:[NSColor colorWithCalibratedRed:1.0 green:0.0 blue:0.0 alpha:1.0]];
    [dchild.drawables addObject:dline];
  • In draw method:
    [dline drawWithModelViewMatrix:[self totalAffineTransform]];
  • In TORootWindow.m, initWithFrame method:
    WinChild* dchild = [[WinChild alloc] initWithFrame:NSMakeRect(0, 200, 0,0) inTableObject:self]; // self = TORootWindow
    [[TableEngine tableEngine].rootTableObjects addObject:dchild];

Using custom shaders

Created by hamdan. Last Modification: Tuesday 05 of June, 2012 23:20:38 by hamdan.

Media Computing Group at RWTH Aachen