babylon.jsチュートリアル１ - First Steps

babylon.jsのチュートリアルを学習していきます。

babylon.jsとは

https://www.babylonjs.com/
webで動作する3Dレンダリングエンジンで、three.jsのようにwebglを容易に扱うことのできるライブラリです。

First Steps

https://doc.babylonjs.com/babylon101/first
球体を表示するサンプルから、仕組みを理解します。

See the Pen babylon101 first step by nobuyuki ishii (@nobuyuki-ishii) on CodePen.

html

描画領域をcanvasで定義し、ライブラリを読み込む。cdn有。

<!-- babylon.jsの描画領域 -->
<canvas id="renderCanvas" touch-action="none"></canvas>

<!-- babylon.js本体 -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!-- .glTF, .obj, .stlファイルを読み込み可能にするライブラリ -->
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- ポインタイベントの各種ブラウザ対応 -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

js

以下の流れで描画。
１．エンジン生成
２．シーン生成
３．シーンに設定（カメラ、光）追加
４．シーンに図形追加

カメラと光を設定していますが、カメラがないと見えないし、光がないと立体感がでないので、これらは必須の処理になるものと思います。また、最後のレンダー、リサイズ処理もないと正しい表示ができないので必須。
bayblon.js playgroundというサンプルを閲覧、改変できるweb上のエディタでは、createScene関数だけ定義すれば、動作するようになっています。エンジン、レンダー、リサイズといった処理は裏側でやってくれているようです。といったところからも、これらは必須と云えるものと理解しました。
https://playground.babylonjs.com/

var canvas = document.getElementById("renderCanvas");
// エンジン生成
var engine = new BABYLON.Engine(canvas, true);

var createScene = function() {
  // シーン生成
  var scene = new BABYLON.Scene(engine);

  // カメラ追加
  // カメラがないと何も見えない
  var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
  // カメラを操作可能とする
  camera.attachControl(canvas, true);

  // 光設定
  // 光がないと、立体感がでない
  var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
  var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);

  // 球追加
  var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);

  return scene;
};

// シーン作成
var scene = createScene();

// シーンを繰り返しレンダリング
// これがないと、図形が描画されない
engine.runRenderLoop(function () {
  scene.render();
});

// サイズ変更時にリサイズ
// これがないと、ウィンドウサイズを変更したときに状態が保持されない
window.addEventListener("resize", function () {
  engine.resize();
});