Optimize scene

[freetoplay]

I would like some tips on how to optimize my scene. I am trying to create an app that has at least 3 scenes at even given time. Right now, I am using the Vue framework that has a shared components of scenes that looks like this:

 

export default Vue.extend({
name: "SceneComponent",
data: function() {
return {
engine: null,
scene: null
};
},
props: {
onSceneMount: {
type: Function,
required: true
},
},
mounted() {
this.setupScene();
},
methods: {
setupScene() {
const canvas = this.$refs.canvas as HTMLCanvasElement;
this.engine = new BABYLON.Engine(canvas, true, null, false);
const scene = new BABYLON.Scene(this.engine);
this.scene = scene;
this.$nextTick(() => {
window.addEventListener("resize", this.handleResize);
});
this.handleResize();
this.onSceneMount({
scene: this.scene,
engine: this.engine,
canvas: this.$refs.canvas
});
},
handlResize() {
if (this.engine) {
this.engine.resize();
}
}
},
beforeDestroy() {
window.removeEventListener("resize", this.handleResize);
}
});

 

The HTML template looks like this:

<canvas ref="canvas"></canvas>

 

Then currently all of my onSceneMount function for my scenes look like this:

 

onSceneMount(data: ISceneArgs) {
      const { canvas, scene, engine } = data;
      const { fileLocation, fileName } = this.modelInfo;

      scene.clearColor = new BABYLON.Color4(0, 0, 0, 1);

      const main = async function() {
        await BABYLON.SceneLoader.AppendAsync(fileLocation, fileName, scene);
        BABYLON.SceneOptimizer.OptimizeAsync(scene);
        scene.freezeActiveMeshes();
        scene.createDefaultCameraOrLight(true);
        scene.lights[0].intensity = 1.5;

        scene.activeCamera.useFramingBehavior = true;

        scene.activeCamera.alpha += Math.PI;

        scene.activeCamera.fov = 0.6;

        const framingBehavior = scene.activeCamera.getBehaviorByName("Framing");

        framingBehavior.framingTime = 0;
        framingBehavior.elevationReturnTime = -1;

        const worldExtends = scene.getWorldExtends();
        framingBehavior.zoomOnBoundingInfo(worldExtends.min, worldExtends.max);

        const meshes = scene.meshes;

        for (let i = 1; i < meshes.length; i++) {
          if (meshes[i].material) {
            meshes[i].material.freeze();
          }
        }

        let mesh: BABYLON.AbstractMesh;
        let xStart = 0;

        const handlePointerUp = function(e: PointerEvent) {
          canvas.removeEventListener("pointermove", handlePointerMove);
        };

        const handlePointerLeave = function(e: PointerEvent) {
          canvas.removeEventListener("pointermove", handlePointerMove);
        };

        const handlePointerMove = function(e: PointerEvent) {
          mesh.rotation.y = -0.01 * (e.clientX - xStart);
          xStart = e.clientX;
        };

        const handlePointerDown = function(e: PointerEvent) {
          mesh = scene.getMeshByID("__root__");

          xStart = e.clientX;

          canvas.addEventListener("pointermove", handlePointerMove);
        };

        canvas.addEventListener("pointerdown", handlePointerDown);
        canvas.addEventListener("pointerup", handlePointerUp);
        canvas.addEventListener("pointerleave", handlePointerLeave);

        engine.runRenderLoop(() => {
          if (scene) {
            scene.render();
          }
        });
      };

      main();
    }

 

Rendering one scene works great, but working with multiple scenes has been tough. I have attached a screenshot of what I want to do below.

 

[dbawel]

As you can convert React/Redux scenes to Vue, I suggest you look at what @brianzinn has posted on GitHub.

DB

[brianzinn]

I would look at the Remix3D website.  They have images and as you mouse across them, they are using sprites to animate rotation, so without WebGL (the images are like a film strip).  If you pre-generate the images, you should be able to get the rotation.y on mouse move events like in Remix3D.  Selecting a model could then create the scene and engine - or have an engine with the models loaded for quick transition?  When you say "at least 3 scenes" then I am imagining this is going to struggle on mobile, if they are a target device 

edit: You can try only calling scene.render() in your renderLoop when your mouse enters the canvas, too.