icon-fb icon-tw icon-index_hero icon-cb

Solufaに触ってみる(ダウンロードからサンプルをアップしてみるまで。)

Solufaとりあえず触れてみます。

先日のVR Tech Tokyoで開発者の松田さん(@m_mitsuhide)からリリースほやほやのタイミングで発表があった、速くて軽いwebVRライブラリ「Solufa」

VirtualDOMベースということで、恥ずかしながらVirtualDOMさっぱりなんですが、とりあえず触るだけ触ってみようと思います。
まずは、ほんとの基本、ダウンロードからサンプルをアップしてみるまでです。まだソースはさわりません!!(きっぱり)

・Solufa公式サイト

VR INSIDEさんの記事を参考にしています。

アップするサンプルは2つ。
・公式サイトからダウンロードしたライブラリデータに入ってるサンプル(BOXが1000個ならぶやつなど)
・VR Insideのサンプル(箱がひとつ。タップすると色が変わるやつ)

Solufaファイルのダウンロード

ますは、ライブラリのファイルをダウンロードしましょう。

公式サイトをスクロールしていくと、「Dounload ZIP」というボタンがあるのでポチリ。
または、GitHubでも。

【solufa-master.zip】というファイルがダウンロードされるので、適当な場所に解凍します。

Gulp使ってるひとは
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>

※上記記事より転載。

これを動作させます。

1.適当なサイトデータ用のフォルダを作り、上記のコードを【index.html】として保存します。

2.index.htmlと同階層に【viewer】フォルダをつくりさらにviewerフォルダの中に【js】フォルダを作ります。

3.さきほどダウンロードした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を実行すれば、空間内に青い立方体があり、クリックで色が変わるサンプルが見れると思います。

ファイル構造は下記。

/site┬index.html
   └/viewer ─ /js ┬ Solufa.min.js
        ├ Solufa-OrbitVp.js
        └ MSXTransformer.js

サーバーにアップするならこのフォルダごと。

アップしたのがこちら

いかがでしょうか?
といっても、まだVRにもしていないサンプルだけですが。

とりあえず、なんとなく読めそうですが、VirtualDOMの基礎くらいは勉強してからかなーと。

簡単なものならA-Frameのほうが使いやすい、複雑になるならSolufaのほうが速くていい。

て感じで使い分けられればベストかなー思います。