この記事は先日投稿したこちらの記事の続きとなります。

はじめに

前回までで、生のWebGLでの描画を行いました。
描画ができましたので、今回はthree.jsを使用して感動したいと思います。

three.js is何

wikiを引用

three.jsは、ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリ及びアプリケーションプログラミングインタフェースである。
WebGLというWeb標準技術の登場により商用のブラウザ拡張機能に頼る必要なしに、HTMLファイル内に埋め込まれたJavaScriptを介して、GPUアクセラレーションによる動的表現を描画することが可能になった。three.jsは、WebGLのAPIを簡略化するためのラッパである。

ラッパ

れっつthree.js

特に用意するものも必要ない上に、公式のサンプルも丁寧で豊富です。

<html>
<head>
    <title>Hello three.js.</title>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
    <script>
        window.addEventListener('load', init);
        function init() {

            // 表示領域を指定
            const width = 600;
            const height = 600;

            // レンダラーを作成
            const renderer = new THREE.WebGLRenderer({
                canvas: document.querySelector('#canvas')
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(width, height);

            // カメラを作成
            const camera = new THREE.PerspectiveCamera(45, width / height);
            camera.position.set(0, 0, +1000);

            // シーンを作成
            const scene = new THREE.Scene();

            // boxを作成
            const geometry = new THREE.BoxBufferGeometry(200, 200, 200);

            // マテリアルを作成
            const material = new THREE.MeshNormalMaterial();

            // メッシュを作成
            const mesh = new THREE.Mesh(geometry, material);

            // シーンに追加
            scene.add(mesh);

            animate();

            // フレーム時に実行されるイベント
            function animate() {

                // 回転速度
                mesh.rotation.x += 0.005;
                mesh.rotation.y += 0.01;

                // レンダリング
                renderer.render(scene, camera);
                requestAnimationFrame(animate);
            }
        }       
    </script>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
</html>

今回は公式のこちらの例を参考に自分なりにやっていることを修飾してみました。

作成しているジオメトリを変更するだけで描画物が変更されます。

// boxを作成
const geometry = new THREE.BoxBufferGeometry(200, 200, 200);
// ↓
// sphereを作成
const geometry = new THREE.SphereBufferGeometry(200, 200, 200);

例えば、上記の変更のみで描画物が箱から球体に変化します。

くるくる

おわりに

シェーダのコンパイルや回転行列の生成、描画物の頂点の定義などを意識しなくても様々なオブジェクトを生成できるのはやはり便利です。
実際にサンプルを参考にして、多少手を加えるだけですぐにイメージしていたものを作ることができました。
このようなライブラリを使用すれば、中で何をしているかを知らなくてもそれっぽいものはかんたんに作れてしまうと思います。

今回は自分はあえて生のWebGLでの描画からはじめたので、こちらのサンプルコードや公式の説明がなにを意味しているのかをわりとすんなりイメージすることができました。
なにかライブラリを使用する前にその機構が裏で何をしているかを簡単にでも理解すると、ライブラリを使用した際になにをしているかのイメージができることがわかりましたので、今後も時間に余裕があれば事前に生を試して行こうと思います。