21cafeでのイベントが終了した1時間後、突然21cafe管理人のおだんみつ@21cafe_shibuya)宛てにこんなメッセージが届きました。

10月3日(金)WebRTC Meetup Tokyo#4が開催された21cafe。ここで「WebRTC+WebGLで切り拓く新技術・WebAR」というテーマでHTML5で動作するARデモを披露してくれた松田光秀さん@m_mitsuhide)におだんみつが「おだんみつバージョンは作ってくれないの?♡」とおねだりしてみたところ、なんと1時間後に完成したものが届いたのです!!なんてイケメンなんでしょうか……。

20141022_4

こちらが松田光秀さん。24歳の現役高校生エンジニアで「jThree」というJavascriptライブラリを開発しました。せっかくなので今回は松田さんが1時間で仕上げたおだんみつWebARの解説をしちゃいます!

解説!おだんみつWebARのつくりかた

▼開発環境を設定する

jthree手順1

まずはこちらのページ世界初インラインWebGLライブラリ『jThree v2』)からjThreeをダウンロードします。ダウンロードが完了したら専用エディターにアクセス。エディターの初期画面はこのように青く四角いキューブが表示されていて、キューブをクリックすると赤い六角形に変化します。

▼使う素材を準備する

ここからは、ARに使いたい素材(画像)をエディターで使用できるように準備していきます。必要なのは圧縮と背景色の透明化!まず最初にARに使いたい画像を選んだら、サイズを圧縮できるフリーソフト(例:TinyPNG)などを使用しデータ量を小さくします。圧縮した画像の透明化を行いますが、ここでもフリーソフト(例:手軽に透明png)などを駆使し画像の背景色を透明にします。圧縮化と透明化が完了したら、次は画像ファイルをテキストに変換させます。このエディターには画像をアップロードする機能はないため、読み込むためにテキスト化する必要があるのですね。

▼3Dを描画する

ここからは最適化させた画像を3Dとして描画するために必要な情報を書いていきます。3D描画は材質と形状、2つの情報を組み合わせることで1つのデータが完成します。メインになるこの情報を書いていくのが、エディター左画面にある「GOML(Glaphichs object markup language)」でこれはWebGLを書くためのjthree専用のマークアップ言語です。その中でも注目してほしいのは、13行目にあるmeshタグ。meshタグのなかには、材質を表す“geo”と形状を表す“mtl(material)”が含まれているので、それを指定してあげることで描画したい3Dの情報を加えていくことができるのです。これらをすべて終えると……

jthree手順2

じゃじゃーん!おだんみつ登場っ♡
初期画面で青いキューブだった部分に使いたい素材が表示されれば、画像の最適化成功です!

▼ARに対応する

次は3D描画した画像をAR対応にしていきます。先ほどマークアップしたGOMLの2つ隣にあるJavascriptの画面を開き、6~13行目にARのコントローラーとスタートボタンを設置します。6~10行目で先ほど追記したGOMLのなかにあるmeshタグを指定し、最適化した画像をARが連携できるようにします。そのあとは、startと指定すれば再生ボタンが表示!完成図はこのような形です。

jthree手順3

なんと、WebARの作成はこれで終了!取材時間もおおよそ1時間ない程度で終わってしまいました。
非エンジニアやデザイナーでも難なく書けるほど、シンプルで簡単といわれているjThree!その魅力の秘訣はなんでしょうか?開発者本人である松田さんに取材してみました!

3D/CGでコンテンツが気軽に作れる世界を実現したい

20141022_5

―jThreeを作ろうと思ったきっかけは何ですか?

松田氏「3D/CGコンテンツって好きな方も多いですし、初音ミクちゃんを始めとして、素晴らしいコンテンツがたくさんあります。ですが、それを作るためのWebGLはとても高度な技術で、何百行書いて三角形が1つできるような時間も工数もかかる世界。趣味の延長線上で3D/CGコンテンツを作るにはハードルが高すぎますからね。

―jThreeの特徴について教えてください。

松田氏「3D/CGコンテンツを誰しもが気軽に作れるようにするため、ブラウザでの開発を可能にしたのがjThreeです。jThreeは、jQueryとthree.jsの組み合わせなのでこの名前をつけました。良い部分は書く量の短さ。例えば引っ越して住所が変わると、登録している住民票だけではなく保険証やら会員カードやら変更を1つ1つしに行かないといけませんよね?jThreeは、住所を変えました!という記述だけすれば必要な場所にすべて同じ情報を与えてくれます。
一方で、悪い点もあります。それは、処理スピードの遅さです。一度に対応できる範囲を広くしているがゆえにスピーディーさは劣ります。そのため多くの人が一気に使うような、大規模開発には向いていないツールだと思います。」

―どんな人に使ってほしいですか?

松田氏「プログラミングを全く触ったことがない初心者の方やデザイナーの方ですね。特にデザイナーの方においては、HTMLとCSSの延長線上で使えること、ブラウザごとの書き分けが不要なことが好まれる理由です。コーディングが手軽になることで、よりデザインに集中する環境になるのでしょうね。もちろん、それ以外の方にも使ってもらってどんどん新しいコンテンツが生まれるきっかけになれば嬉しいです!」

数時間で3Dコンテンツを作れるイベント開催!

20141022_3

松田さん、ありがとうございました!専門の方だけが作れるイメージがある3D/CGやARコンテンツ。おだんみつは平面の画像しかないので、まさかARにはならないだろうと思っていたのですが、実際にARとして映し出されたときの感動は格別!

誰しもが3Dコンテンツを気軽に作れる世界を実現する「jThree」を使ってWebGLクリエイターになれるイベントが11月23日(月)に開催します。参加条件はただ1つ、「jQueryが好きである」ということだけ。興味のある方はこちらのイベントページをご覧くださいね♪
▼【jQuery初心者超歓迎!秋のWebGL+API祭り】Microsoft Azure x jThree Class Tokyo #2

最新情報はFacebook/Twitterをフォロー!


関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。