Hot reloading engine

[WhoAteDaCake]

// @flow
// $FlowIgnore
import * as BABYLON from 'babylonjs';
import shortid from 'shortid';

type Color = {
  r: number,
  b: number,
  g: number,
};

export default class Scene {
  _scene: BABYLON.Scene;
  _camera: BABYLON.ArcRotateCamera;
  _light: BABYLON.HemisphericLight;

  constructor(engine: BABYLON.Engine, canvas: HTMLElement) {
    const scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color4(0.5, 0.8, 0.6, 0.8);

    const camera = new BABYLON.ArcRotateCamera('Camera', 1.5 * Math.PI, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, false);

    const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 1), scene);
    light.intensity = 0.5;

    const sphereMaterial = new BABYLON.StandardMaterial('texture1', scene);
    sphereMaterial.alpha = 1;
    // sphereMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5);
    sphereMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0.5);

    const boxCfg = {
      size: 5,
      updatable: true,
    };

    const sphere = BABYLON.MeshBuilder.CreateBox('sphere1', boxCfg, scene);
    sphere.material = sphereMaterial;
    sphere.position.y = 5;

    this._scene = scene;
    this._camera = camera;
    this._light = light;
  }
  render = () => {
    this._scene.render();
  }
  dispose = () => {
    this._scene.dispose();
  }
}


import { Engine } from 'babylonjs';
import Scene from './Scene';

export default class RenderEngine {
  constructor(container) {
    this._container = container;
  }
  animate() {
    this._engine.runRenderLoop(this._scene.render);
    window.addEventListener('resize', this._engine.resize);
  }
  createScene() {
    this._scene = new Scene(this._engine, this._canvas);
  }
  render = () => {
    this._canvas = document.createElement('canvas');
    this._container.appendChild(this._canvas);
    this._engine = new Engine(this._canvas, false);
    this.createScene();
    this.animate();
  }
  reRender = () => {
    this._engine.dispose();
    this._container.removeChild(this._canvas);

    this.render();
  }
}


const root = document.getElementById('root');
const engine = new RenderEngine(root);
engine.render();

if (module.hot) {
  module.hot.accept('./RenderEngine', () => {
    engine.reRender();
  });
}

I am currently learning babylon.js and with my set up I have hot reloading, so when any files are changed, engine.reRender() will be called.

To test it out I change up color of sphereMaterial. It creates new canvas, but for some reason it still shows the old colors...

Is there any way to clear out the scene and engine to load the webgl with new configuration?

Thank you.

[GameMonetize]

This should work  Do you have a sample running somewhere?

[WhoAteDaCake]

@Deltakosh https://bitbucket.org/ajokub/footfalls-3d/, I've made few changes since i've posted this. I am currently just reloading whole webpage on change. You should comment out footData() from index.js. If you try to comment out one of the nodes inside Scene.js it reloads the canvas, but still has 9 nodes instead of 8

[GameMonetize]

By running I mean't a test page already deployed

[WhoAteDaCake]

Oh unfortunately no, it's a work in progress, so I have yet to deploy it anywhere :/

Edit: as @Deltakosh asked, i have deployed it

 

[GameMonetize]

Do you mind commenting where I should look?

[Wingnut]

Hey WATC... it sounds to me like it is (re-) loading the old Scene.js from the browser cache, instead of using the new/modified Scene.js from disk file.

https://stackoverflow.com/questions/118884/how-to-force-browser-to-reload-cached-css-js-files

Lots of talk about this issue... at that url.  Hope this helps.