Solufaに触ってみる（ダウンロードからサンプルをアップしてみるまで。）
Solufaとりあえず触れてみます。
先日のVR Tech Tokyoで開発者の松田さん(@m_mitsuhide)からリリースほやほやのタイミングで発表があった、速くて軽いwebVRライブラリ「Solufa」。
VirtualDOMベースということで、恥ずかしながらVirtualDOMさっぱりなんですが、とりあえず触るだけ触ってみようと思います。
まずは、ほんとの基本、ダウンロードからサンプルをアップしてみるまでです。まだソースはさわりません！！（きっぱり）
VR INSIDEさんの記事を参考にしています。
アップするサンプルは2つ。
・公式サイトからダウンロードしたライブラリデータに入ってるサンプル（BOXが1000個ならぶやつなど）
・VR Insideのサンプル（箱がひとつ。タップすると色が変わるやつ）
Solufaファイルのダウンロード
ますは、ライブラリのファイルをダウンロードしましょう。
公式サイトをスクロールしていくと、「Dounload ZIP」というボタンがあるのでポチリ。
または、GitHubでも。
【solufa-master.zip】というファイルがダウンロードされるので、適当な場所に解凍します。
Gulpを使ってる人は、ダウンロードしたsolufa-masterフォルダにgulpfile.jsやpackage.jsonなどが揃ってるので、Gulpでごにょごにょもできます。（今回はソースはいじらないので、localhost立ててスマホで確認とかくらいですが。）
※Browserifyをインストールしている必要があるので、使ってない人はこことかを参考にインストールしておいてください。
Solufaライブラリ内のサンプルファイル
solufa-masterフォルダを解凍したら、
solufa-master/static/samples/
の中にサンプルファイルがいくつか入っています。
普通にhtmlファイルをダブルクリックすればブラウザで確認出来ますが、スマホで確認するのにサーバにアップするなら、staticフォルダごとアップします。
Solufaメイン部分のソースは下記。
S( function( m ) {
var stats = new Stats();
stats.domElement.style.position = "fixed";
stats.domElement.style.left = "5px";
stats.domElement.style.top = "5px";
document.body.appendChild(stats.domElement);
requestAnimationFrame( function update() {
requestAnimationFrame( update );
stats.update();
});
var App = {
vm: {
geo: {
type: "Box",
value: [ 5, 5, 5 ]
},
mtl: {
type: "MeshPhong",
value: {
color: "#00f",
specular: "#999"
}
},
meshPoses: [],
lightStyle: { pos: [ 1, 10, 10 ], lightColor: "#00f" },
init: function() {
for ( var i = 0; i < 10; i++ ) {
for ( var j = 0; j < 10; j++ ) {
for ( var k = 0; k < 10; k++ ) {
this.meshPoses.push({ pos: [i*10-45,j*10-45,k*10-45] });
}
}
}
},
rotate: function( elem, isInit ) {
if ( isInit ) return;
S.update( function( delta, elapsed ) {
elem.style.rotateY += delta * .0002;
elem.style.rotateX += delta * .0002;
elem.style.opacity = .2 + .8 * Math.abs( Math.sin( elapsed * .0005 ) );
elem.childNodes[ 0 ].style.colorR = Math.abs( Math.sin( elapsed * .0005 ) );
elem.childNodes[ 0 ].style.colorG = Math.abs( Math.cos( elapsed * .0005 ) );
elem.childNodes[ 0 ].style.colorB = 1 - Math.abs( Math.sin( elapsed * .0005 ) );
});
}
},
controller: function() {
App.vm.init();
},
view: function() {
var vm = App.vm;
return <scene>
<obj config={vm.rotate}>
{ vm.meshPoses.map( v => <mesh geo={vm.geo} mtl={vm.mtl} style={v}/>)}
</obj>
<cam id="cam" style={{ posZ: 155 }}/>
<light init={{ type: "Dir" }} style={ vm.lightStyle }/>
<light init={{ type: "Amb" }}/>
</scene>;
}
};
m.mount( S.document.body, App );
m.render( S.document.head, <rdr init={{ frame: "#solufa", antialias: true, preserveDrawingBuffer: false }}>
<OrbitVp cam="#cam"/>
</rdr> );
});
マウスでドラッグしたりできます。
ていうか、描画はや！！
VR Insideのサンプル
A-Frameを越えて世界最速を目指すWeb3D/VRライブラリ「Solufa(ソルファ)」の秘密に迫る【開発者のAMATELUS Inc.代表・松田光秀氏にインタビュー】ーVR Inside
こちらの記事は、松田さんのインタビューやA-Frameとの比較など、Solufaの基本がわかるので、是非一度お読みください。
で、そこに書いてあったサンプルコードはこちら。
<!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>
※上記記事より転載。
これを動作させます。
１．適当なサイトデータ用のフォルダを作り、上記のコードを【index.html】として保存します。
２．index.htmlと同階層に【viewer】フォルダをつくりさらにviewerフォルダの中に【js】フォルダを作ります。
３．さきほどダウンロードしたsolufaのライブラリフォルダから
・solufa-master/static/js/Solufa.min.js
・solufa-master/static/js/MSXTransformer.js
・solufa-master/static/components/Solufa-OrbitVp.js
の3ファイルをコピーして、今作ったjsフォルダに貼り付けます。
これで、index.htmlを実行すれば、空間内に青い立方体があり、クリックで色が変わるサンプルが見れると思います。
ファイル構造は下記。
└/viewer ─ /js ┬ Solufa.min.js
├ Solufa-OrbitVp.js
└ MSXTransformer.js
サーバーにアップするならこのフォルダごと。
いかがでしょうか？
といっても、まだVRにもしていないサンプルだけですが。
とりあえず、なんとなく読めそうですが、VirtualDOMの基礎くらいは勉強してからかなーと。
簡単なものならA-Frameのほうが使いやすい、複雑になるならSolufaのほうが速くていい。
て感じで使い分けられればベストかなー思います。