SceneRecorder Apply Delta not working

Hello I am using Babylon version 5.0.0-alpha.22 with a react project
Here are the dependencies:
@babylonjs/core”: “^5.0.0-alpha.22”,
@babylonjs/inspector”: “^5.0.0-alpha.22”,
@babylonjs/loaders”: “^5.0.0-alpha.22”,

I uploaded a glb model to the inspector, made some changes and downloaded the diff.json file which holds all the changes on the model.
In the project I load the same 3d model and put the json file (changes file) in the src folder

This is how my Custom.js Component looks like

import { Component } from "react";

import Helper from "./Helper";

import carChanges from "./diff.json";

var scene;

var engine;

class CustomScene extends Component {

  constructor(props) {
    super(props);
    this.helperInstance = new Helper();
  }

  componentDidMount() {
    this.start();
  }

  start = () => {

    let canvas = document.getElementById("scene-canvas");

    engine = this.helperInstance.createEngine(canvas);

    scene = this.helperInstance.createScene(engine);

    this.helperInstance.loadModel(scene, "Car.glb");

    this.helperInstance.applyChanges(scene, carChanges);

    // Add Events

    window.addEventListener("resize", this.onWindowResize, false);

    // Render Loop

    engine.runRenderLoop(() => {

      scene.render();

    });

  };

  onWindowResize = (event) => {

    engine.resize();

  };

  render() {

    return (

      <div>

        <canvas id="scene-canvas"></canvas>

      </div>

    );

  }

}

export default CustomScene;

Helper.js class

import { SceneLoader, Scene, Engine } from "@babylonjs/core";

import "@babylonjs/loaders"; // for models to be uploaded to the scene

import "@babylonjs/inspector"; // for scene debug layer show

import { SceneRecorder } from "@babylonjs/core/Misc/sceneRecorder";

class Helper {

  createEngine(canvas) {

    const engine = new Engine(canvas, true);

    return engine;

  }

  createScene(engine) {

    //Create Scene

    let scene = new Scene(engine);

    scene.createDefaultCameraOrLight(true, true, true);

    scene.createDefaultEnvironment({ createGround: false, createSkybox: false });

    scene.debugLayer.show();

    return scene;

  }

  applyChanges(scene, changes) {

    console.log("Inside the apply changes function ...");

    console.log(changes);

    console.log(scene);

    // scene and changes are correct

    SceneRecorder.ApplyDelta(changes, scene);

  }

  // load a glb model in a scene

  loadModel(scene, model) {

    SceneLoader.Append(`${process.env.PUBLIC_URL}/assets/`, model, scene, (scene) => {});

  }

}

export default Helper;

When I apply the delta file in the inspector it works fine so I think the SceneRecorder feature is working

Is there a problem with my code and how I am using SceneRecorder?

Ideally we could use a repro in the PG to help because checking your code like that is not an easy task
Did you looked at the inspector code:
Babylon.js/toolsTabComponent.tsx at master · BabylonJS/Babylon.js (github.com)

@Deltakosh

Created a playground, the changes from the object are not being applied to the scene
https://playground.babylonjs.com/#9ZS92P

here we are: ApplyDelta Not Working | Babylon.js Playground (babylonjs.com)

1 Like