Overlay dynamic texture over canvas

[grzybu]

Hi,

I'm preparing some kind of proof of concept demo using scene exporter from blender.

Loading the scene works fine using such code:

Quote

<script>
    if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        BABYLON.SceneLoader.Load("", "scene.babylon", engine, function (newScene) {
            // Wait for textures and shaders to be ready
            newScene.executeWhenReady(function () {
                // Attach camera to canvas inputs
                newScene.activeCamera.attachControl(canvas);

                // Once the scene is loaded, just register a render loop to render it
                engine.runRenderLoop(function() {
                    newScene.render();
                });
                window.addEventListener("keydown", function (evt) {
                        switch (evt.keyCode) {
                            case 82:  
                                //do something to display overlay with texture
                                break;
                            default: break;
                        } 
                });

               window.addEventListener("resize", function () {

                   engine.resize();

               });
            });
        }, function (progress) {
            // To do: give progress feedback to user
        });
    }
</script>

It works fine, but now I need to load load image file when button is pressed and be able to show/hide it over on the top of rendered scene.

What will be the best solution?

 

[GameMonetize]

To display overlay you should use Layer:

http://doc.babylonjs.com/classes/2.2/Layer

[grzybu]

Thanks, that's exactly what I needed