この記事は、「Babylon.js Advent Calendar 2024」の 5日目の記事です。

はじめに

以下の MDN のページの話です。

●Babylon.js を使った基本的なデモの作成 - ゲーム開発 | MDN
https://developer.mozilla.org/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js

MDN の該当箇所

JavaScript を使っている方は、誰もが 1度はお世話になると思われる（1度どころではなく、何度もお世話になったりするかもな） MDN のページで、JavaScript で 3D系の内容を扱う話をとりあげている部分があります。

A-Frame や PlayCanvas、Three.js とともに Babylon.js の話も掲載されています。

MDN はよくお世話になるものの、この部分を見たことがなかったため、何が扱われているかを見てみようと思います！

記事の具体的な内容

扱われている内容

記事の具体的な内容は、冒頭に記載されている「画面内に立方体をレンダリング」というシンプルなもののようです。

その付近の記載を見ていると、「基本デモを作成するシリーズ」で「Three.js、 PlayCanvas、 A-Frame」も、わりとシンプルな内容を掲載しているっぽいです（そちらはあまり見られてない）。

作成準備

Babylon.js を扱う環境としては、手元などで HTMLファイルを扱う形のようです。

CDN の https://cdn.babylonjs.com/babylon.js を読みこむ HTML が提示されていました。

簡単に扱える公式環境

Babylon.js を扱う環境としては、公式が提供しているもので「Babylon.js Playground（ https://playground.babylonjs.com/ ）もあったりします。

MDN の記事はゼロから作ってみようという趣旨のようなので、デフォルトでオブジェクトが表示される「Babylon.js Playground」は、そのあたりの趣旨と合わない等が出てきますが、Babylon.js での開発や作ったものの共有でとても便利なものです。
（あと、HTML を含む全体構成とかも分かりにくくなるというか、それを気にせず使えるようにしてくれている環境なので、そのあたりもゼロからやっていこうという記事の流れに合わない部分が出てくるかもというところ）

土台を作る

最初に提示されている HTMLファイルでは、 /* all our JavaScript code goes here */ の部分が完全に空なので、その後に土台を作る部分が出てきます。

    <script src="babylon.js"></script>
    <canvas id="render-canvas"></canvas>
    <script>
      var canvas = document.getElementById("render-canvas");
      /* all our JavaScript code goes here */
    </script>