Kawanet Blog II

アクセスカウンタ

zoom RSS #lltiger 「LTの虎」で #shibuyajs チームが優勝!「3D JavaScript」

<<   作成日時 : 2010/08/02 18:59   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

2010年7月31日(土)は、虎ノ門のニッショーホールで開催された軽量プログラミング言語に関する総合カンファレンス「Lightweight Language Conference 2010」こと(通称:LL Tiger)に参加。出場8チームがトーナメント方式で対戦していく LT ライトニングトーク大会『LTの虎』に Shibuya.js 選抜チームとして参戦してきました。

結果:優勝 Shibuya.js チーム!

ありがとうございました!

川崎も、2回戦に出場し、「3D JavaScript」のタイトルで発表しました。
5月の OSDC.TW(台北)で発表した内容 のバージョンアップ版です。
資料は以下です。クリックまたはカーソル右キーで進みます。


http://www.kawa.net/text/shibuyajs/lltiger/lltiger.html

カーソル左キーで前のスライドに戻ります。
数字の 0 キーで最初のスライドに戻ります。
数字の 3 キーで、3D 表示と 2D 表示をトグル切り替えします。
内容は、3D JavaScript とは言っても、WebGL は 3D ができて当たり前なので、割愛しています。

Shibuya.js 選抜チームの前日の予選の様子から、当日の模様・戦略をレポートします。

選抜チーム予選会で事前に発表


Shibuya.js 選抜チームは、LL Tiger の前日に開催したイベント Shibuya.js beyond HTML5 にて、出場者の予選会を行ないました。

このイベントでの発表は、LT 向きのネタ系トークだけでなくて、仕事でも使える・ためになる実用系トークもあるのですが、事前に一通りのプレゼンの発表練習ができたという意味でも良かったです。デモの手順を練習しつつ、ウケがいいところ、難し過ぎかったり説明が足りず分かりにくいところが確認できました。

イベントの模様を Ustream 配信するかは直前まで悩んでいましたが、ATND の参加登録者数が多く最大50人くらい補欠になってしまっていたので、Ustream での配信も実施。事前にトーク内容を公開して敵(?)にも手の内を見せてしまうことになりましたが、事前に自分だけで発表練習するのではなくて、人前で練習(というか、たくさんの人に聞いてもらうから本番として)発表しておくのはいいですね。


(写真は @takesako さん撮影)

1回戦は、昔懐かしいモデム音で勝利(gyuque)


そして LL Tiger 当日、「LL の虎」の本番の第1回戦は、@gyuque さん の JavaScript によるモデム実装のトーク(正確には「モデム」の「モ」のみ)。LL Tiger は日本UNIXユーザ会の主催ですから、その参加者の年齢層を考慮すれば鉄板ネタだろう、という読みです。昔懐かしい「ピーガラガラ〜〜」の音が会場に響いた時点で勝利を確信しました。

技術的には、JavaScript 生成した音声の波形を data: スキームのデータにして、流行の HTML5 を取り入れて audio 要素で再生する仕組みです。

2回戦(準決勝)は、3D のネタ系トーク(kawanet)


2回戦(準決勝)は、川崎 or @yukoba さんのトークの順序を決めていませんでしたが、前日の Shibuya.js 内予選で発表内容を見ていた @takesako さんの『プロジェクト:-D』チームは、トーナメントの反対側なので、技術系の @yukoba さんのトークを決勝戦用に温存。ネタ系の川崎のトークで2回戦を乗り切ることにしました。

しかし、今年はチーム対戦のトーナメント方式のため、3人チームで出場していても、負けたらそれ以降のトークは発表できないという過酷なルール。しかし、対戦相手となる各チームのトークのレベルも高く、凄まじいプレッシャーです。

1回戦と2回戦の間に、休憩+他の発表で時間が2時間半あったため、2回戦の内容をパワーアップするために、急遽、デモを追加することにしました。スピーカー控え室に戻らずにロビーで作戦会議をして、ゲームを作ろうとか話して テトリスなら作れそう と思ったものの、テトリスは2Dなので、3D描画しても面白くない。

結局、川崎が一昨年書いていた JavaScript+Canvas による 3D エンジン のデモの改造と、@gyuque さんが去年の 3D+テクスチャマッピング+物理演算 のデモの改造をそれぞれ平行で進めて、先に完成した @gyuque さんのデモを発表で使わせてもらうことにしました。(発表資料はこちら


http://gyu.que.jp/jscloth/glass/

デモは 3D が見やすいように、テクスチャマッピングは外してワイヤフレーム表示に。
このチームプレイが奏功したのか、無事に2回戦も突破できました!
去年のコードがベースになったとはいえ、たった30分間であそこまで作り上げる @gyuque さんは本当に凄いです。

また、準決勝の2試合目、@takesako さん対 @moriyoshi さんのカードも、大変な激戦でした。

@moriyoshi さんも去年の Adobe MAX の 「出張JUIカンファレンス - Flashはもういらない?」で発表してるし、@takesako さんも Shibuya.js 設立メンバーという関係。どちらが勝っても、決勝は身内対決のようなものです。2人ともプレゼン達者で、@moriyoshi さん(殺伐Pythonチーム)の Rython・Puby の発表も大変面白かったが、結果は @takesako さんの勝利でした。

3回戦(決勝)は、高い JS 技術力で勝負(yukoba)


決勝戦は、先攻 @takesako さんの JavaScript で x86 バイナリを生成するアセンブラのトークも非常に面白かった。

対する @yukoba さん は、JavaScript による MIDP 実装のトーク。Java の .class ファイル(Java 中間コード)から JavaScript ソースコードを生成するコンパイラです。

ターゲットは、MIDP (Mobile Information Device Profile) の携帯電話向けの Java アプリで、Java のソースコード(.java ファイル)は必要ないので、既存の .jar ファイルがあれば何でも JavaScript アプリ化できて、そのままウェブブラウザで動く。

デモしたゲームは、コメントも入れて18万行以上の JavaScript ソースコードで動いています。JVM でなくて、最近はウェブブラウザの JavaScript 処理系でも JIT が効くので、JIT が効きやすいような JavaScript ソースコードを生成しておけば、PC でもスマートフォン上でも、十分なスピードで動きます。Java のスレッドや、MIDP で必要な画面描画周りも全て JavaScript で実装しています。

単純に逐語変換するコンパイラでなくて最適化も入っていて、Java 側のスタック処理は JavaScript の配列で実装せずに、スコープ内のローカル変数として展開しておくと、JIT でレジスタ変数が割り当てられるので、圧倒的に高速化するとか、他のどんな用途で役に立つのか分からない、5分間の LT では言いつくせないテクニックが山ほど詰め込まれています。

(備考)DoJa プロファイルにも対応すれば国内のiアプリ用の膨大なJavaゲームがそのまま iPhone で動くようになるから、需要高そうに思うんだけど、まずは、ガラパゴスな DoJa でなくて海外で通用する MIDP 向けを開発しているとのこと。(好決算な DeNA とか GREE の人とか、高く買わないですか??)

LL 言語の LT 大会だったはずなのに、決勝戦はアセンブラ対コンパイラの対決になるとは。何それ?
決勝戦の結果は、@yukoba さんの勝利。Shibuya.js 選抜チームの優勝が決定しました!

優勝賞品で、川崎は iPad(Wi-Fi 版)をゲットしました。これは、嬉しい!

「LTの虎」は負けると後がないルールで、凄まじいプレッシャーでしたが、非常に楽しめました。
LL Tiger 主催者・スタッフの皆さま、ありがとうございました!お疲れ様でした!
 

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
オライリージャパン
Douglas Crockford

ユーザレビュー:
遠回りを避けたい人へ ...
手っ取り早く習得Ja ...
痒いとこだけ掻いてく ...
amazon.co.jpで買う
Amazonアソシエイト by JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス の詳しい情報を見る / ウェブリブログ商品ポータル



(2010.08.03 追記)
@IT の記事『最強の「LTの虎」は誰だ!? LL Tigerフォトレポ』 もトーナメント1回戦の模様が詳しいです。

(2010.08.22 追記)
* English translation of this post is here.

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
#lltiger 「LTの虎」で #shibuyajs チームが優勝!「3D JavaScript」 Kawanet Blog II/BIGLOBEウェブリブログ
文字サイズ:       閉じる