2. Todayʼs Menu
• JSAR – future of user interface
– JavaScript Augmented Reality
• Re: “Improve web performance using CDN”
• Brief history of JavaScript 3D techs
• A glance into the latest JUI conference
– DIY Flash Player by Yukoba
– JSplash by Gyuque
– JS Synthsizer by Moriyoshi
– JS Keynote by Amachang
JUI @ OSDC.TW 2009 2
3. Yusuke Kawasaki(川﨑 有亮)
• Perl monger
– XML::TreePP, XML::FeedPP, etc.
• JavaScript addict
– Shibuya.js, the JUI confʼs organizer
• Xiaolongbao♥
– ⼩籠包! ⼩籠包! ⼩籠包!
• Media Technology Labs
– Recruit Co., Ltd. in Japan
http://www.kawa.net/
http://twitter.com/kawa0117
JUI @ OSDC.TW 2009 3
4. DOM Manipulation
Last year, I manipulated
the DOM by Wiimote at
OSDC.TW 2008.
JUI @ OSDC.TW 2009 4
5. Journey started from Taipei
I went around the world to manipulate it.
8⽉
Copenhagen
6⽉ 5⽉
Chicago 東京
4⽉
台北
2008.04 OSDC.TW
2008.05 YAPC::Asia
2008.06 YAPC::NA
2008.08 YAPC::Europe
JUI @ OSDC.TW 2009 5
6. JS
AR
JSAR
AR (Augmented Reality)
Future of user interface
DEMO #1
JUI @ OSDC.TW 2009 6
7. AR (Augmented Reality)
【AR】
– 拡張現実(⽇)
– 增強現實(中)[zeng1 qiang2 xian4 shi2]
– Augmented Reality (英)
http://en.wikipedia.org/wiki/Augmented_reality
• Augmented reality (AR) is a field of computer
research which deals with the combination of real-
world and computer-generated data (virtual reality),
where computer graphics objects are blended into
real footage in real time.
• AR ≒ VR materials on live video
JUI @ OSDC.TW 2009 7
8. JSARToolKit
• JSAR
– JavaScript Augmented Reality
• JSARToolKit
– A library to run AR by JavaScript
– A proxy wrapper for a Flash app using FLARToolKit
• Genealogy
– 2008.03 – NyARToolKit for Java - by A⻁@nyatla.jp
– 2008.05 – FLARToolKit for ActionScript3 by Saqoosha
– 2009.04 – JSARToolKit for JavaScript by Kawanet
JUI @ OSDC.TW 2009 8
9. AR marker
• AR marker patterns must be square.
• Only center quarter in it is used. (by default)
1 2 1
JUI @ OSDC.TW 2009 9
10. 16x16 pixel marker segment
• Center pattern is degitalized to 16x16 pix.
• Segment resolution is extensible to 32x32,
64x64, and more.
16
pixel
16 pixel
JUI @ OSDC.TW 2009 10
12. ARToolKit Marker Generator Online
• Flash application to generate .pat file on the fly.
http://flash.tarotaro.org/ar/MarkerGeneratorOnline.html
JUI @ OSDC.TW 2009 12
13. Run JSAR on your website
It needs just several lines of JavaScript code to use AR.
When a marker found, it calls onDetect callback function.
<scrip t typ e=quot;t ext/ jav asc rip tquot; src =quot;swfobject.jsquot;></script>
<scrip t typ e=quot;t ext/ jav asc rip tquot; src =quot;jsar.jsquot;></script>
<scrip t typ e=quot;t ext/ jav asc rip tquot;><!- -
va r pat s= [ 'j sar log o.p at' ];
va r jsa r= new JSA R(' jsa r_here ');
js ar .dr awMa rker Rec t = tr ue;
js ar .on Dete cted = functi on (re sult) {...};
js ar .in it() ;
js ar .se tMar ker(pats);
js ar .st artL oop();
--></s cr ipt >
<div i d= quot;js ar_herequot;></div>
JUI @ OSDC.TW 2009 13
15. Now ready to augment the reality!
• You can overlay something
on screen where markers
detected. Itʼs an AR.
• Use <canvas> element
or any HTML elements something here
to show something on it.
{ quot;xquot;: 346, quot;yquot;: 201 },
{ quot;xquot;: 277, quot;yquot;: 191 },
{ quot;xquot;: 353, quot;yquot;: 130 },
{ quot;xquot;: 395, quot;yquot;: 154 }
JUI @ OSDC.TW 2009 15
16. JSAR is written in JavaScript
• JSAR is not written in ActionScript nor Java.
• To augment the reality, overlay something,
every HTML elements are allowed by JSAR!
• Ex:
AR web form
AR buttons
AR EC
JUI @ OSDC.TW 2009 16
22. Air Yakiniku is a SaaS?
SaaS (software as a service) means it
requires no package software sold in town.
Using the Air Yakiniku, ...
1. You donʼt need install any software to
your PC because itʼs an web application.
2. You donʼt need to go to supermarket
to buy a beef package anymore.
Then, I could say itʼs a SaaS. :)
JUI @ OSDC.TW 2009 22
23. Yahoo! Bomb
Few days leter, we got
more than 70Mbps traffic
through Yahoo! search
word ranking.
It exhausted our network
and made MRTG failed.
JUI @ OSDC.TW 2009 23
24. Solution: Amazon CloudFront
• We decided to use CloudFront in a hurry. (2h)
• Soon reached to 1Gbps limit of CloudFront.
• Costs only US$2,400 for the first month.
Enough worth for us to keep the service on.
JUI @ OSDC.TW 2009 24
26. JSAR future
• AR has a big opportunity to augment the
user interface technology.
• JSAR could be one of the affordable
solutions to implement AR on the Net.
• The current version of JSAR doesnʼt have a
3D engine included though. But...
JUI @ OSDC.TW 2009 26
27. Brief history of JavaScript's
3D tech development
- How to use 3D by JavaScript -
JUI @ OSDC.TW 2009 27
28. 2006.04 - Animation.Cube
• Three years ago, Yusuke Kawasaki wrote a library
named Animation.Cube which slices images into many
vertical lines to show rotating cube.
• The code is on JSAN. JSAN is almost dead however.
http://www.kawa.net/works/js/animation/cube-e.html
JUI @ OSDC.TW 2009 28
29. 2006.10 - Triangles by Div Border
Useless Pickles (Jeff Lau) shows polygons drawn
by many triangles made by <div> elements using
trick of borders. It means we could develop Virtua
Fighter (1) by JavaScript since that time.
http://www.uselesspickles.com/triangles/demo.html
JUI @ OSDC.TW 2009 29
30. 2008.03 - 3D on Canvas
Again, Yusuke Kawasaki wrote a new 3D engine
using <canvas> element to draw wireframe image
and polygons. The code was written to manipulate
Wii Remote controllers at OSDC.TW 2008.
http://kawa.at.webry.info/200804/article_1.html
JUI @ OSDC.TW 2009 30
31. 2008.03 - 3D Renderer with Textures
At just about the same time, Jacob Seidelin gave
a great demo with texture mapped polygons using
<canvas> element.
http://www.nihilogic.dk/labs/canvas3dtexture_0.2/
JUI @ OSDC.TW 2009 31
32. 2009.02 - Sphere Environment Mapping
Satoshi Ueyama reported that Chrome had
extremely fast canvas rendering engine named Skia.
He demonstrated it and showed benchmarks. He
also implemented physical computing and sphere
environment mapping feature on it.
http://d.hatena.ne.jp/gyuque/20090211#1234364019
JUI @ OSDC.TW 2009 32
33. The JUI Digest
Recent topics on the JavaScript
User Interface conference.
JUI @ OSDC.TW 2009 33
34. JUI #1 - 2008.05
Paul Bakaus amachang inucara iandeth
gugod chris monjudoh noriaki ingy
JUI @ OSDC.TW 2009 34
35. JUI #2 - 2009.01
• Itʼs held as a sub-conference in the
Adobe MAX 2009 Japan conference.
Five JavaScript addicts gave talks.
川崎 有亮 (kawanet)
http://www.kawa.net/
上⼭ 智⼠ (gyuque)
http://d.hatena.ne.jp/gyuque/
⼩泉 守義 (moriyoshi)
http://d.hatena.ne.jp/moriyoshi/
⼩林 悠 (yukoba)
http://d.hatena.ne.jp/yukoba/
天野 仁史 (amachang)
http://d.hatena.ne.jp/amachang/
JUI @ OSDC.TW 2009 35
51. Amachangʼs online presentation
http://amachang.sakura.ne.jp/misc/max/
It runs on Safari current
or Chrome dev branch.
No IE.
No Firefox.
JUI @ OSDC.TW 2009 51