【Android】WebViewを使ってWebGL(three.js)動かしてみた

昔は CG を扱おうとすると大変でした。
(一度C++で OpenGLとか書いたことあるけど、意味不明のキワミ)

でも今は WebGL が標準化してきたので、"行列計算" とか "法線" とか良く分からないことしなくても、ブラウザさえあれば3D表現が簡単になってきてます。

あと  three.js とかのライブラリも沢山あって開発もしやすいです。

自分もWebGLを使ったアプリが作ってみたいので、
Android環境で WebView + WebGL(three.js) を動かしてみました。

手始めにWebViewに three.js(WebGL)で赤球を表示してみた

まずは3DCG入門とかでよく見る、球体を表示してみることに・・・

▼ 主な手順

  1. WebGLを動かすHTMLファイル作成
  2. アセットにそのHTMLファイル埋め込み
  3. WebViewから球体を表示

Android Studio の場合、次の手順で表示できました。

1.まず three.js で球を表示するHTMLファイルを作成

初めに three.js で球体を表示するHTML作成

自分は three.js に詳しくないから、次ページを元に作成させてもらいました。

ここを参考に、球体をキャンバス表示するHTMLを書いてみます。

 

実際に作ったのは app.html という名前の次のHTMLです。

▼ その three.js を含むHTMLは次の通り

まず一意なID(ここでは #appCanvas  )を持つcanvas要素を作成

そこにシーン・カメラを用意し、レンダリングしていくのが three.js の基本的な書き方です。

2.assetsディレクトリにHTML・JSファイルを追加

こっからがAndroidアプリ開発で重要な部分

次は assets ディレクトリを作り、HTMLリソースを追加します。

Android Studio の場合、assets は次の操作で作れます。

  1. 左クリックし「New」=>「Folder」を選択
  2. その中で「Assets Folder」をクリック
  3. assetsという名前のディレクトリが作られる

そして assetsフォルダを作成したら、その中に次の2つを貼り付け

  • app.html(さっき作ったやつ)
  • three.min.js(公式からDL)

ちなみに three.min.js についてはCDN経由で埋め込むことも可能です。

3.WebViewからWebGLを呼び出す

最後に WebView を含む適当なActivityを作成

その中で WebView  からassetsに配置した app.html を呼び出せばいいだけです。

▼ 例えば自分が書いたコードはこういう感じ(Java)

ここで大事なポイントは次の2つ

  • 必ずJavaScriptを有効にする
    このコードの settings.setJavaScriptEnabled( true );  の部分。これを有効にしておかないと three.js も何も動かない
  • HTMLファイルをassetsから読み込み
    この読み込みは "file:///android_asset/app.html"  のようにしてassetsディレクトリ以下のファイルを参照することが可能(もちろんディレクトリも参照できる)

以上でシンプルだけど。、WebGLが動かせるアプリの完成

 

実際にできあがったアプリはこんな感じです。

AndroidアプリからWebGL(three.js)を使って赤い球体を表示してみた

なんかシュールだけど、一応表示できたということで、、、

あと画像だと分からないですが、実際のアプリだと球体が回転して表示されてます。

お次はテクスチャ付きの球体(木星)を表示してみた

何か楽しくなってきたので、色々試してみます。

次は マテリアル付きで球体 を表示してみることにしました。

ただthree.js について全くの素人なので、今度も次のページを参考にさせてもらってます。

このサイトだと月のマテリアル画像を用意しておき、それを球体にマテリアルとして貼り付けて月を表示してるみたいです。

 

でも同じだと面白くなから、

ここでは次みたいな 木星のマテリアル画像 をDL

URL : http://planetpixelemporium.com/jupiter.html

そして球体の表面にこのマテリアル画像を貼り付けるコードを書いてみました。

▼ そのコードがコチラ

マテリアルの貼り方とは詳しく解説されてるページがあるので省きます。

 

そしてさっきと同じ方法でWebViewから表示してみました。

すると・・・

Androidアプリから木星を表示しようとしたけど失敗したときの画像

アレ?木星が表示されるはずなのに・・・

なぜか真っ黒になってしまってます。

画像の読み込みはWebViewで設定が必要だった

どうやら file:  で始まる画像はそのままだと読み込めないみたいでした。

そこで色々調べてみると、WebViewに次の設定が必要だったこと が判明

これで http や https 以外のローカルなファイル( 例 : file:/// から始まるもの)でも問題なく読み込めるようになったはずです。

 

これで動くはずだけど、果たして結果は・・・

▼ 実際に表示されたアプリ画面は次の通り

今度はちゃんと木星のマテリアルが反映されて球が木星になった

画像だと止まったままだけど、実際は ☯ぐるぐるぐるぐる☯ 回ってます。

書いたのはたった数十行のHTMLファイルと数十行のJavaコードだけ。
それでもここまで簡単に表示できるのが感動しました。

アプリに限らず、色々なことに応用できそうです。ではまた バイバイ(^_^)/~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください