babylon.js 最初の一歩: シーンを描画する #JavaScript

WebGL フレームワークに Microsoft の人が作った babylon.js というものがあります。

今回はそれを使ってまず 3D シーンを描画するまでの最初の部分をどう作っていくか紹介します。

今回の完成図↓

See the Pen babylon.js 最初の一歩: シーンを描画する by 山岸 "あかいいぬ?" Masaru (@akai_inu) on CodePen.

HTML

<!-- 実際に WebGL を描画するキャンバス -->
<canvas id="renderCanvas"></canvas>

<!-- BabylonJS の最新バージョンへのリンク -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!-- 全てのブラウザでポインタイベントに一貫性を持たせるための pep.js のリンク -->
<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>

依存ライブラリに pep.js というものを要求します。別になくても動作自体はしますが、ないとスマホなどでの操作がおかしくなったりします。

CSS は省略します。

JavaScript

function main() {
  // canvas DOM 要素を取得する
  const canvas = document.getElementById('renderCanvas');

  // 全ての基礎となる 3D エンジンを生成
  const engine = new BABYLON.Engine(canvas);

  function createScene() {
    // 新しいシーンオブジェクトを作成する
    const scene = new BABYLON.Scene(engine);

    // 自由移動出来るカメラを生成
    // ドラッグで視点回転、矢印キーで移動
    const camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

    // カメラの向きを座標0地点にする
    camera.setTarget(BABYLON.Vector3.Zero());

    // canvas 要素をクリックやドラッグなどで操作出来るようにする
    camera.attachControl(canvas, false);

    // 照明を追加
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

    // 球体メッシュを生成
    var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

    // 少し上に持ち上げる
    sphere.position.y = 1;

    // 地面メッシュを生成
    var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

    return scene;
  }

  const scene = createScene();

  // 描画ループ関数を定義する
  engine.runRenderLoop(() => {
    scene.render();
  });

  // リサイズ処理
  window.addEventListener('resize', () => {
    engine.resize();
  });
}

// 全ての DOM 要素が読み込み終わってから処理を始める
window.addEventListener('DOMContentLoaded', main);

やっていることは単純です。

エンジンを生成
3Dシーンを生成
シーンにカメラや照明、球体などを追加
描画ループ

という四段階でブラウザ 3D シーンの描画や操作までが可能になっています。シンプルでいいですね。

このサンプルは doc.babylonjs.com に書かれているものを少し改変したものとなっています。

また、 babylon.js は Playground を用意しているので、 CodePen などを使わなくてもより簡単に babylon.js を体験することが可能です。

createScene という関数を定義することで、面倒な HTML やリサイズ処理などを省略して書くことが出来ます。

サンプルとして例えばこちらがあります。読み込みに少し時間がかかりますが、物理演算を利用した素晴らしいデモが体験できます。