sceneToRender.render is not a function

Questions
1 
    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>

        <!-- Babylon.js -->
        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://preview.babylonjs.com/ammo.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/Oimo.js"></script>
        <script src="https://preview.babylonjs.com/libktx.js"></script>
        <script src="https://preview.babylonjs.com/earcut.min.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        var canvas = document.getElementById("renderCanvas");

        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
        
        var main = function (scene) {
            return BABYLON.SceneLoader.LoadAssetContainerAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene).then(function (container) {
                var materials = container.materials;
                
                console.log(scene);
                var obj=scene.getMaterialByName("pbr");
                obj=materials[0];
                
                //container.addAllToScene();
                console.log("here");
            });
        }

        var createScene = async function () {
        
            // 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("light", new BABYLON.Vector3(0, 1, 0), scene);
        
            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;
            var pbr = new BABYLON.PBRMaterial("pbr", scene);
            console.log("hi");
            console.log(scene);
            await main(scene);
            var pbr1 = new BABYLON.PBRMaterial("pbr1", scene);
            console.log(scene);
            console.log("here1");
        
            return scene;
        
        };
var engine;
try {
    engine = createDefaultEngine();
} catch(e) {
    console.log("the available createEngine function failed. Creating the default engine instead");
    engine = createDefaultEngine();
}
        if (!engine) throw 'engine should not be null.';
        scene = createScene();;
        sceneToRender = scene

        engine.runRenderLoop(function () {
            if (sceneToRender) {
                sceneToRender.render();
            }
        });

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

In console I am getting this error

index.html:107 Uncaught TypeError: sceneToRender.render is not a function
at index.html:107
at t._renderFrame (babylon.js:16)
at t._renderLoop (babylon.js:16)

I tried scene =await createScene() but it shows await can be used only in async function.Also I tried .then() but it shows same error.So anyone can help me.

Also I would like suggestion in my approach.In this demo I am trying to import few objects and then extract their material and store them like you can see I am trying to store the material in pbr rightnow similarly I would be storing different model material in pbr1.The motive is to first store all the materials and then do something with them so I am trying to use async so that first this is loaded and then the code below it is executed.

2

@Punit_Jain, copied your code in a Babylon Playground: https://playground.babylonjs.com/#BC4136#3
and it seems to run fine!

However, I’m just using the default engine and scene that comes with Babylon Playground instead of using createDefaultEngine() and scene = createScene() from your code above.

3

Strange on my system its’s showing error.Also if you can comment on my approach

4

I think the error you’re facing is that sceneToRender is not ready to have render() called on it due to the async function createScene() not running to completion until all of the synchronous code (all lines below scene = createScene();) runs first.

5

Have you downloaded this code directly from the playground, or did you make a few modifications?

Remove the ‘async’ call before the createScene function and it will work, unless you need it, and then you need to deal with it as a promise. Downloading an async-scene from the playground SHOULD already include those changes, this is why I wonder if you made any changes yourself

6

I made changes to the code and I want the async functionality for what I am trying to do

7

you will need to handle the scene creation function then.

Instead of this:

scene = createScene();;
        sceneToRender = scene

do this:

createScene().then(scene => { sceneToRender = scene; });
3 Likes