Jump to content

Optimize scene


Recommended Posts

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() {
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);
scene: this.scene,
engine: this.engine,
canvas: this.$refs.canvas
handlResize() {
if (this.engine) {
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);
        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) {

        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) {



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.


Screenshot from 2018-08-31 15-10-04.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...