JSARToolKit - AR (Augmented Reality) by JavaScript

After my talk at OSDC.TW 2009 in Taipei, I've released JSAR's source code on the Spark project's repository:
http://www.libspark.org/svn/js/JSARToolKit/trunk

JSARToolKit is a JavaScript library to run AR (augmented reality).
This is the first JavaScript project on the Spark. :)

Demo #1 - Show Logo

Try: JSAR Logo Demo
Download and print marker pdf: Maker PDF (JSAR Logo Only)

Demo #1 shows a label "JSAR" in DIV element overlayed on Flash. Red square border on marker was drawn by canvas. It means both of label and lines are controlled by JavaScript not by ActionScript.

Demo #2 - Mic Volume

Try: Mic Volume Demo
Download and print markers pdf: Makrers PDF (4 patterns)

Demo #2 shows a label for each markers and changes its font size effected by microphone volume inputed.

Sample Code

<script type="text/javascript" src="../js/swfobject.js"></script>
<script type="text/javascript" src="../js/jsar.js"></script> 
<script type="text/javascript"><!--

  var jsar;
  function init () {
    jsar = new JSAR( 'jsar_here' );
    jsar.drawMarkerRect = true;
    jsar.onDetected = function ( result ) { ... };
    jsar.onLost     = function ( result ) { ... };
    jsar.captureX   = 320;
    jsar.captureY   = 240;
    jsar.displayX   = 640;
    jsar.displayY   = 480;
    jsar.init();
    jsar.setMarker( [ '../code/jsarlogo.pat' ] );
  }
  window.onload = init;
--></script> 
<div id="jsar_here"></div> 

How To Compile It

JSARToolKit uses FLARToolKit in it. This means JSAR is not pure JavaScript, but flash powered. Download JSARToolKit from the Spark project by svn command, and compile it by Flash CS4 or by FlashDevelop + Flex SDK.

svn co http://www.libspark.org/svn/js/JSARToolKit/trunk jsar
mkdir -p jsar/src/org/libspark
svn co http://www.libspark.org/svn/as3/FLARToolKit/trunk/src/org/libspark/flartoolkit jsar/src/org/libspark/flartoolkit

In fact, you can use jsar.swf pre-compiled. So you don't need to compile it by your self.

I need say thank you to Saqoosha who has developed FLARToolKit.

* Original post of this was written in Japanese at 2009/05/05 01:46.