Posts Tagged ‘canvas’

2010 visual experiments

January 7th, 2011

Happy new year everyone!

2010 was a year full of visual experiments for me, I hope that you like what you see on this blog. In this post I’m making a little overview of all visual experiments created by me during this year. This is an opportunity to catch-up something you’ve missed! I’d like also to thanks some person that have been helping me too:

Visual experiments created in 2010:

During this year I have added some features to Ogre3D:

  • ArToolKitPlus: augmented reality marker-based system
  • Cuda: for beginner only (at least advanced user could grab some useful code)
  • OpenCL: for beginner only (at least advanced user could grab some useful code)
  • Html5 Canvas: implementation based on skia for graphics and V8 for javascript scripting
  • Kinect: this is a very hacky solution, I’ll improve it later

I also have learned GPGPU programming by myself while coding a partial GPUSurf implementation based on Nico Cornelis paper. But this implementation is not complete and I’m willing to rewrite it with a GPGPU framework based on OpenGL and CG only (not Ogre3D). With such a framework writing Sift/Surf detector should be easier and more efficient.

I have created some visual experiments related to Augmented Reality:

My outdoor 3D tracking algorithm for augmented reality needs an accurate point cloud: this is why I’m interested in structure from motion and I’ve created two SfM toolkit:

Posts published in 2010:


Ogre::Canvas, a 2D API for Ogre3D

June 20th, 2010

In my previous post I have announced Ogre::Canvas but It wasn’t available for download.
Now I have released the source code of Ogre::Canvas and some demo.

What is Ogre::Canvas ?

It is a new 2D API for Ogre3D that is based on the Html5 Canvas specifications. I have chosen this API because it is easy to understand, has a lot of cool demos, and it’s easy to prototype in browser using javascript. But you could be asking: what the point of having fast prototyping in a web browser if you’ll have to translate everything in C++ ? This is why I have also implemented Ogre::CanvasV8: a javascript binding for Ogre::Canvas using V8 the javascript engine of Google Chrome. That means that your prototype written in javascript for a browser will run in Ogre::CanvasV8 (with minor tweaks). The three Canvas demos belows are all working using Ogre::CanvasV8, grab and try yourself !

Tutorials from MDC Clocks Canvascape

What could I do with Ogre::Canvas ?

Well, it’s a 2D API, so you get a context on which you can execute drawing calls:

  • Transformation: scale, rotate, …
  • Image drawing: drawImage
  • Line styles: lineWidth, lineCap, …
  • Colors, styles and shadows: strokeStyle, fillStyle, …
  • Paths: moveTo, lineTo, arc, …
  • Text: fillText, strokeText, …
  • If you need a full overview of the Html5 Canvas API, grab the excellent Cheat Sheet.

You could create really complex UI element using Canvas. If you need an example of what you could create using this, take a look at the timeline I have created for a multitouch prototype. In fact it is because I got poor performance using Awesomium that I have decided to create this library. Awesomium is really a good product but integrating a full web page is overkill if you are only interested by a 2D Canvas tag…

What is the development status ?

It is not really “production ready”, I still have some issues with drawing images with alpha channels… You’ll get all information about license (MIT), svn repository and documentation on the Ogre::Canvas page.


Ogre::OpenCL and Ogre::Canvas

May 9th, 2010

This is a short post to show stuff I’m working on. After announcing Ogre::Cuda to the Ogre Community I have realized that OpenCL could interest more people… Although I never get a chance to play with OpenCL I have created another library very similar to Ogre::Cuda but this time for OpenCL. Ogre::OpenCL is still in a very experimental stage but you can grab it from my google code or get more information from the demo page. I’m also wondering if I could create another library that would help GPGPU in Ogre3D. Indeed GPGPU computation is not that easy to setup, you have to :

  • create RenderTarget texture
  • desactivate auto update on the render target
  • add a viewport with a camera
  • add a compositor to the viewport
  • add a listener to the compositor (optional)
  • manualy call update() to do the computation

That’s why I was thinking in creating a library to do all this things in a more user friendly manner, will see …

I also have decided to anounce Ogre::Canvas. This is my Html5 canvas API implementation for Ogre3D. In short, you get a Canvas context on which you can call standard 2D functions (lineTo, moveTo, fill, stroke, …) and once you want an update, the Canvas context is uploaded to an Ogre::Texture. Furthermore, I have implemented a Javascript binding using V8 that is identical to the Html5 Canvas specification. So the same javascript code used in browser can be executed by Ogre::Canvas (with minor tweaks). You’ll get more information on the demo page.

And I have finally managed to translate my resume in English.