2016年5月26日、世界中のウェブエンジニア・デザイナーに向けたオープンソースのWeb3D/VRライブラリ「Solufa（ソルファ）」が公開された。
公開前のSolufaトップページ
開発したのは渋谷にある起業家シェアオフィス「TECH LAB PAAK」で活動するAMATELUS Inc.代表の松田光秀氏。
松田光秀氏
Solufaの名前の由来はラテン語で太陽を意味する「Sol」と開発者の松田氏が初めて購入したCDアルバムのタイトル「ソルファ」を組み合わせたものだという。
Solufaが最も注力しているのは「使いやすさと表示速度の両立」
Solufaの最大の特徴はプログラミング手法にある。
本来ウェブエンジニアである松田氏が「jQuery以来のパラダイムシフト」と評価する「VirtualDOM（仮想DOM）」という概念が採用されている。
VirtualDOMはFacebookエンジニアによって生み出された概念で、ウェブ開発においてそれまでトレードオフだと考えられていた「設計（スケーラビリティ）と表示速度」の両立を可能にしている。
VirtualDOMについての詳細は以下をご確認ください。
「なぜ仮想DOMという概念が俺達の魂を震えさせるのか –Qiita」
つまりSolufaとは、従来のウェブ製作の現場で生まれた開発手法であるVirtualDOMをWeb3D/VRにも応用することによってウェブエンジニアやデザイナーがすでに獲得してきた知見と使い慣れた開発環境で最先端のアウトプットを生み出せるようになることを目指したライブラリとも言える。
今回の記事ではプログラミングの解説はしないが、コードサンプルを以下に掲載しておく。クリックするたびに色が切り替わる立方体を1つ描画するだけの内容だが、60行に満たないHTMLファイル一つで記述できている簡易さは十分に伝わるだろう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="solufa" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;"></div>
<script src="./viewer/js/Solufa.min.js"></script>
<script src="./viewer/js/Solufa-OrbitVp.js"></script>
<script src="./viewer/js/MSXTransformer.js"></script>
<script type="text/msx;harmony=true">
S( function( m ) {
var App = {
controller: function() {
return {
geo: {
type: "Box",
value: [ 3, 3, 3 ]
},
mtl: {
type: "MeshPhong",
value: { specular: "#999" }
},
color: "#00f",
changeColor: function() {
this.color = this.color === "#00f" ? "#f00" : "#00f";
},
camStyle: { pos: [ 0, -5, 8 ] }
};
},
view: function( ctrl ) {
return <scene>
<mesh geo={ ctrl.geo } mtl={ ctrl.mtl } style={{ color: ctrl.color }}
onclick={ ctrl.changeColor.bind( ctrl )}/>
<cam id="mainCam" style={ctrl.camStyle}>
<light init={{ type: "Dir" }} style={{ pos: [0, 10,10 ] }}/>
</cam>
<light init={{ type: "Amb" }}/>
</scene>;
}
};
m.mount( S.document.body, App );
m.render( S.document.head,
<rdr init={{ frame: "#solufa", antialias: true }}>
<OrbitVp cam="#mainCam"/>
</rdr>
);
});
</script>
</body>
</html>
上記コードで3Dブロックの色が変化します
SolufaとA-Frameを比較
Web3D技術はVRの盛り上がりとともに需要が高まっているものの、行列・ベクトル・三角関数などの3D専門数学の知識を要するため「HTML5最高峰にして最難関」と呼ばれるほどに高い参入障壁が存在している。
Solufa以前にもこの課題を解決するために生まれたライブラリは多数存在し、その中でも代表的なのが、Firefoxで有名なMozilla財団が2016年2月に公開した「A-Frame」。
A-Frame
実は松田氏はA-Frameの登場より2年も早くHTMLタグでWeb3Dコンテンツを簡易に扱えるライブラリ「jThree（ジェイスリー）」を公開している。
その後、「簡単に扱えるWeb3D/VRライブラリ」として生まれた後発のSolufaはどんな戦略でA-Frameをはじめとした競合に打ち勝っていくのか、そのカギは「コンテンツの表示速度」にあると松田氏は言う。
これまでの常識として、Web3Dの「使いやすさ」と「表示速度」はトレードオフの関係であり、エンジニアはコンテンツの規模や要件に応じてライブラリを使い分けていく。
ただ、ウェブの場合は読み込みの遅延＝離脱につながるため、使いやすさよりも表示速度の方が重視されるケースがほとんどであり、この課題を解決を目指したのがSolufaだ。
その結果、A-Frame並みの使いやすさと表示速度で上回ることに成功したとのことなので、実際にデモを比較してどれだけ速いのか確かめてみた。
今回は単純なボックスを1千個と8千個それぞれ表示してユーザー目線で「描画された」と認識できるまでの時間を録画した動画をAdobe Premiere Proのタイムライン上で1フレーム単位で確認・計測（目測なのは、両ライブラリとも描画完了のタイミングをプログラムで補足するのが難しかったため）。
結果は以下の通り。
| ライブラリ | 1000個 | 8000個 |
|---|---|---|
| A-Frame | 3.01秒 | 15.26秒 |
| Solufa | 0.1秒 | 2.14秒 |
確かにSolufaの方が圧倒的に速い結果となった。
デモ準備の都合で今回はSolufaの方が重い処理（回転・色・透明度アニメーション）をさせたにも関わらずこれだけ速いのは正直驚きました。
デモの様子は以下の動画でご確認ください。
Solufaの隠れた強みは「省メモリ性能」
Solufaの表示速度に着目してきたが、松田氏はもうひとつの重要な強みがあるという。
それが「省メモリ性能」。
メモリ容量がiPhoneなら1～2GB、Androidでも2～3GB程度しかない現在においては速度と同じくらい省メモリ性能が重視される。
Solufaは3DオブジェクトをVirtualDOMだけで管理しており、実体のDOMを利用するA-Frameに対し圧倒的なメモリパフォーマンスを実現できるという。
従来のウェブ製作に使われるVirtualDOMライブラリとの違いもここにあって、通常はVirtualDOMであっても最終的に実体のDOMを扱わざるを得ないのだがSolufaは実体のDOMを一切生成しない。ここもまたSolufaが速い理由である。
それでは、実際のベンチマークを確認してみる。2つのライブラリでボックス8千個を描画してみた結果が以下の通り。
SolufaとA-Frameのメモリ比較
ご覧の通り3〜5倍ほどの省メモリ性能を発揮している。この差はアプリケーションが巨大になるほど顕著になり、逆に小さなコンテンツを作る場合にはさほど差が出なくなるとのこと。
実際に松田氏が担当した開発案件でメモリ不足のためiPhoneで再生出来なかったスマホVRコンテンツをSolufaで書き換えたところ、全く同じ内容のまま軽快に動作するようになったという。
ちなみにファイルサイズは圧縮後でA-Frameが720KB、Solufaが670KB。JavaScriptライブラリとしてはどちらもやや重たいかと思われる。
Solufaが最も力を発揮するのは「新規顧客獲得を目的とした中規模以上の3D/VRプロモーション」
Solufaの有能性に触れてきたが、何にでも万能に使えるというではない。
FPSゲームなど高い描画クオリティとフレームレートが求められるコンテンツの開発にはUnityやUnreal Engineを差し置いてSolufa（Web3D）を選択するのは難しいだろうと松田氏は言う。
「Web3Dを記述するJavaScriptは、エンジニアがどんなに努力してもフレームレート（1秒間あたりの画面更新回数）や表現力の最大値はUnityの半分にも満たないという現状があるから」とのことだ。
「ウェブ」という領域に絞ったとしても、「360度画像・動画プレーヤーや簡易なオブジェクトを表示するだけのケースなら先ほど紹介したA-Frameを使うのが適切だろう。」と松田氏は言う。
では、Solufaはどこで輝くライブラリなのか？
Solufaがターゲットとするのは「新規顧客獲得を目的とした中規模以上の3D/VRコンテンツプロモーション」とのことだ。
背景には「ウェブ＋VirtualDOM記法＋高速描画」を武器とするSolufaが最も価値を発揮できる市場であるという松田氏の戦略がある。
その意図をSolufa開発者の松田氏に詳しく聞いてみたのでインタビュー形式で紹介します。
松田氏インタビュー
――「新規顧客獲得」にフォーカスした理由を教えてください。
松田氏：ウェブの強みがそこにあると考えているからです。
表現力やフレームレートでUnityの足元にも及ばない現状でアプリのVRではなくWebVRを選んでもらうメリットは見込み顧客にリーチしやすいことにあります。
テレビCMや検索エンジンからのユーザー流入を求める場合、ダウンロードの心理的負荷が少ないWebVRが圧倒的に有利です。ならばここにフォーカスしようと決めました。
Solufaの強みであるコンテンツの表示速度の短縮はサイトを訪れたユーザーの離脱率低下に貢献するので広告効果を高めてくれることにも期待しています。
――「小規模開発」をターゲットから除外した理由を教えてください。
松田氏：簡易なWebVRコンテンツを作るにはやはりA-Frameの方が圧倒的に適しているからです。
HTMLベースでわかりやすく、同じことをやるなら最も短い行数で実現できる点が素晴らしいと思います。
また、いくらSolufaが高速を売りにしているとは言っても小規模なコンテンツにおいてはユーザーが体感できるほどの差は生まれません。
VirtualDOMを採用したSolufaは「設計と速度の両立」が重視される中規模以上の開発案件に貢献してくれます。
――VRには色んな可能性があるなかで「プロモーション用途」を選んだのはなぜでしょうか。
松田氏：正確にはプロモーションではなく「ゲーム以外」なんです。
3Dゲームを作るためには行列・ベクトル・三角関数・細かいパラメータ設定を出来ることが求められるのですが、Solufaはこの領域の機能をサポートしていません。
サポートしても速度にはほとんど悪影響を与えないのですが、使いやすさを犠牲にしてしまいます。
ユースケースを絞ったことでターゲットとなるウェブエンジニアやデザイナーが必要とする機能だけを搭載したシンプルなライブラリを実現したのです。
――Solufaの今後の展開をお聞かせください。
松田氏：開発拠点は東京ですが、海外のエンジニアに受け入れられることを最初の目標としています。基準はGitHubのスター数を指標にして6ヶ月でA-Frameを越えることですね。
英語でサイトとドキュメントを公開し、海外エンジニア向けのメディアにリーチしていきます。Slackを利用したユーザーサポートも行います。
一方で地の利が活きる日本市場も同時に攻めていきます。4年後の東京オリンピック―ロンドンに変更される可能性もあるらしいですが―での莫大なVR需要を見据えて強固な開発者コミュニティを形成します。
具体的にはハンズオンや講習会で地道に普及させていきます。過去3年間で積み上げてきた地盤を活かし、自社製のVR端末を普及させたい国内外の企業とのタイアップでイベントを早ければ6月末から開催する計画です。
――新しく追加されていく機能についても聞きたいです。
松田氏：市場環境としては360度動画がトレンドなのですがSolufaはこの領域に注力しません。
3D技術の応用例であることは確かなんですが、動画関連の知識や技術がメインで我々の強みを活かせません。VirtualDOMであることも動画再生にはほとんど貢献しませんし。
その代わりに直近半年くらいで
・スマホブラウザをターゲットとした軽量な物理エンジン対応
・タッチやピント調節など拡張機能付きのスマホVRデバイス向けプラグインの開発
・3Dモデルデータ読み込みのさらなる高速化
・VirtualDOM以外の方法で書きたいエンジニア向けにインターフェースをjQuery/Vue/Angularなどのメジャーライブラリに変更可能なプラグインの提供
を実現していく見込みです。
――ありがとうございます
余談ではあるが、松田氏はVRだけでなくWebAR/MRについても技術開発を進めている。
先ほど紹介しましたが、Solufa以前に松田氏が自身で開発した別のライブラリ「jThree（ジェイスリー）」で実現した以下のようなデモを見せてもらった。
現在はリアルタイムにウェブカメラを取得できるAndroid/Chromeでしか動作しないらしく、iPhoneでウェブカメラが有効になるまでSolufaに対応させる予定はないとのこと。
Solufaが変えていく未来に託した希望は「日本がソフトウェア事業で世界一の国家になること」
松田氏はSolufaをオープンソースで公開するものの、趣味ではなく事業として開発している。
今は取るに足らないほど小さい「Web3D/VR市場」をSolufaで拡大し別のサービスによって収益化を図るという。
事業体である「AMATELUS Inc.」はアメリカのデラウェア州に昨年登記し、海外での市場開拓と資金調達を目指すスタートアップとして活動している。
驚くべきことにこの松田氏、なんと学歴は高校を2回中退して中卒だという。
約3年前に行列もベクトルも知らないまま3Dプログラミングの世界に飛び込んで以来、Web3D/VRを普及させるためのサービスを独学で作りながら試行錯誤し、ようやっと「Solufa」にたどり着いた。
「家賃を2ヶ月払えなくて家を追い出されそうな時期もあった」と笑いながら語る松田氏には大きな夢がある。
学歴も金もコネも無くたって、五体満足で日本に生まれて義務教育さえちゃんと受けていれば世界を変えるような大きな夢も叶えられることを証明したい。
ソフトウェアが世界を支配しつつある今、プログラミングは無謀に思えるような夢を叶えるために最も強力な手段であり、強い願いに呼応してくれる相棒です。
今の私に説得力は無いけれど、本当に世界を変えた未来にもう一度この想いを伝えたいですね。
日本のソフトウェア技術は決して海外に負けていないと思っています。しかし、事業で負けている。
私に世界レベルの技術は無いけれど、日本に生まれたアドバンテージと成功するまで諦めない粘り強さでアメリカ企業にビジネスで勝ち、日本のソフトウェア産業が世界一になる未来に貢献したいです。
「あの松田でも勝てたんだから俺はもっと上手くやれる」と次の世代の若者に思ってもらえるようになれば本望ですね。以上、松田氏のメッセージ
松田氏は野望実現のためにも、当面の目標はSolufaの普及で、A-FrameのGithubでのスター獲得数が一つの指標目標となりそうだ。
Solufaウェブサイト
http://solufa.io/
Solufa GitHubリポジトリ
https://github.com/amatelus/solufa/
Copyright ©2016 VR Inside All Rights Reserved.
