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

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

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

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

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

このページの目次

手始めにWebViewに three.js（WebGL）で赤球を表示してみた
お次はテクスチャ付きの球体（木星）を表示してみた
画像の読み込みはWebViewで設定が必要だった
最後に。WebGL（three.js）は開発工程を大幅に減らせそう

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

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

▼ 主な手順

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

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

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

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

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

ICS MEDIA

Three.jsのマテリアルの基本 - ICS MEDIA

https://ics.media/tutorial-three/material_basic/

このサイトはWebGLのJSライブラリ「Three.js」の入門サイトです。canvas要素を使ってWebサイトに動きのある3D表現を取り入れましょう。

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

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

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

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="three.min.js"></script>
  </head>
  <body>
  
    <!-- ここにレンダリング -->
    <canvas id="appCanvas"></canvas>
    
    <script type="text/javascript">
    window.addEventListener('load', init);
    
    // サイズを指定
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    function init() {
      // レンダラーを作成
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#appCanvas')
      });
      renderer.setSize(width, height);
    
      // シーンを作成
      const scene = new THREE.Scene();
    
      // カメラを作成
      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
      camera.position.set(0, 0, +1500);
    
      // 赤い球体を作成
      const geometry = new THREE.SphereGeometry(300, 20, 20);
      const material = new THREE.MeshStandardMaterial({color: 0xFF0000});
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    
      // 平行光源
      const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
      directionalLight.position.set(0, 0, 1);
      scene.add(directionalLight);
    
      tick();
    
      // 毎フレーム時に実行
      function tick() {
        // メッシュを回転させる
        mesh.rotation.y += 0.01;
        // レンダリング
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
      }
    }
    </script>
  </body>
</html>

<html>

<head>

</head>

<body>

window.addEventListener('load', init);

// サイズを指定

const width = window.innerWidth;

const height = window.innerHeight;

function init() {

// レンダラーを作成

const renderer = new THREE.WebGLRenderer({

canvas: document.querySelector('#appCanvas')

});

renderer.setSize(width, height);

// シーンを作成

const scene = new THREE.Scene();

// カメラを作成

const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

camera.position.set(0, 0, +1500);

// 赤い球体を作成

const geometry = new THREE.SphereGeometry(300, 20, 20);

const material = new THREE.MeshStandardMaterial({color: 0xFF0000});

const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

// 平行光源

const directionalLight = new THREE.DirectionalLight(0xFFFFFF);

directionalLight.position.set(0, 0, 1);

scene.add(directionalLight);

tick();

// 毎フレーム時に実行

function tick() {

// メッシュを回転させる

mesh.rotation.y += 0.01;

// レンダリング

renderer.render(scene, camera);

requestAnimationFrame(tick);

}

</script>

</body>

</html>

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

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

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

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

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

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

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

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

app.html（さっき作ったやつ）
three.min.js（公式からDL）

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

３．WebViewからWebGLを呼び出す

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

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

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

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById( R.id.web_view );

        /// Init WebView settings.
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled( true );

        /// 球体表示するHTMLファイルを読み込み
        webView.loadUrl( "file:///android_asset/app.html" );
    }
}

public class MainActivity extends AppCompatActivity {

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

webView = findViewById( R.id.web_view );

/// Init WebView settings.

WebSettings settings = webView.getSettings();

settings.setJavaScriptEnabled( true );

/// 球体表示するHTMLファイルを読み込み

webView.loadUrl( "file:///android_asset/app.html" );

}

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

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

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

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

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

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

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

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

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

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

ICS MEDIA

Three.jsのマテリアルの基本 - ICS MEDIA

https://ics.media/tutorial-three/material_basic/

このサイトはWebGLのJSライブラリ「Three.js」の入門サイトです。canvas要素を使ってWebサイトに動きのある3D表現を取り入れましょう。

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

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

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

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

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

▼ そのコードがコチラ

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <script src="three.min.js"></script>
  </head>
  <body>

    <!-- ここにレンダリング -->
    <canvas id="appCanvas"></canvas>
    
    <script type="text/javascript">
    // ページの読み込みを待つ
    window.addEventListener('load', init);
    
    // サイズを指定
    const width = window.innerWidth;
    const height = window.innerHeight;
    
    function init() {
      // レンダラーを作成
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#appCanvas')
      });
      renderer.setSize(width, height);
    
      // シーンを作成
      const scene = new THREE.Scene();
    
      // カメラを作成
      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
      camera.position.set(0, 0, +1500);
    
      // 木星テクスチャの球体を作成
      const geometry = new THREE.SphereGeometry(300, 20, 20);
      const loader = new THREE.TextureLoader();
      const texture = loader.load('jupitermap.jpg');
      const material = new THREE.MeshStandardMaterial({
        map: texture
      });
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    
      // 平行光源
      const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
      directionalLight.position.set(0, 0, 1);
      scene.add(directionalLight);
    
      tick();
    
      // 毎フレーム時に実行されるループイベントです
      function tick() {
        // メッシュを回転させる
        mesh.rotation.y += 0.01;
        // レンダリング
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
      }
    }
    </script>
  </body>
</html>