🚀babylon.jsプレイグランドの外側はどうなっているのか？　特にエンジン部分のソースについて

エンジンクラスは、WebGL や Audio などのすべての低レベル API とのインタフェースを担当します。

        var canvas = document.getElementById("renderCanvas");

        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }

        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
        class Playground {
            static CreateScene(engine, canvas) {
                // This creates a basic Babylon Scene object (non-mesh)
                var scene = new BABYLON.Scene(engine);
                // This creates and positions a free camera (non-mesh)
                var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
                // This targets the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());
                // This attaches the camera to the canvas
                camera.attachControl(canvas, true);
                // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
                var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
                // Default intensity is 1. Let's dim the light a small amount
                light.intensity = 0.7;
                // Our built-in 'sphere' shape. Params: name, options, scene
                var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2, segments: 32 }, scene);
                // Move the sphere upward 1/2 its height
                sphere.position.y = 1;
                // Our built-in 'ground' shape. Params: name, options, scene
                var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
                return scene;
            }
        }
        createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }
                window.initFunction = async function() {
                    
                    
                    
                    var asyncEngineCreation = async function() {
                        try {
                        return createDefaultEngine();
                        } catch(e) {
                        console.log("the available createEngine function failed. Creating the default engine instead");
                        return createDefaultEngine();
                        }
                    }

                    window.engine = await asyncEngineCreation();
        if (!engine) throw 'engine should not be null.';
        startRenderLoop(engine, canvas);
window.scene = createScene();};
        initFunction().then(() => {sceneToRender = scene                    
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });

new Engine(canvasOrContext: Nullable<HTMLCanvasElement | OffscreenCanvas | WebGLRenderingContext | WebGL2RenderingContext>, antialias?: boolean, options?: EngineOptions, adaptToDeviceRatio?: boolean): Engine

WebGLRenderingContext｜WebGL2RenderingContext>は、レンダリングに使用するキャンバスまたはWebGLコンテキストを定義します。WebGLコンテキストを提供する場合、Babylon.jsは、キャンバス上のイベント（ポインター、キーボードなど...）をフックしないので、イベント観測可能ファイルは利用できません。これは、Babylon.jsが、すでにWebGLコンテキストを使用しているシステム上でプラグインとして使用される場合に、主に使用されます。

通常、シーン作成コードは、すでに定義されているcreateScene関数に記述します。delayCreateScene関数はカメラのないシーンを返すことができます（例えば、delayCreateScene関数の例のように、非同期メッシュロード後にカメラを作成する場合など）。
createEngine関数を定義することで、エンジン作成をオーバーライドすることもできます。これは、例えば、アンチエイリアスなしのシーンをテストしたい場合に便利です：

Diagram 2024-04-20 17-52-46.uxf

1.84 KB

ファイルダウンロードについて

ダウンロード