Unable to create babylonjs engine from javascript (.js) file

[vijay_krishna]

Hi,

My requirement is we need to separate all business logic (babylonjs code) as separate code into .js file and send the .glb file parameter dynamically from html file.

The error we are getting is Uncaught (in promise) engine should not be null.

The following is the Html code and babyloncode.js in seperate modules:

@line 21 we are invoking babyloncode.js seperately
@line 23 we are passing glb file separately

The following is the babylonjs code

  var MYLIBRARY = MYLIBRARY || (function(){
      var _args = {};
      return {
          init : function(Args) {
              _args = Args;
              // some other initialising
          },
          helloWorld : function() {
              alert('the input is -' + _args[0]);
              
    var canvas = document.getElementById("renderCanvas");
  
          var startRenderLoop = function (engine, canvas) {
              engine.runRenderLoop(function () {
                  if (sceneToRender && sceneToRender.activeCamera) {
                      sceneToRender.render();
                  }
              });
          }
  
          var engine = null;
          var scene = null;
          var sceneToRender = null;
          var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
          var createScene = function () {
      // This creates a basic Babylon Scene object (non-mesh)
      var scene = new BABYLON.Scene(engine);
      engine.displayLoadingUI();
  
  var camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(90), BABYLON.Tools.ToRadians(65), 4.7, BABYLON.Vector3.Zero(), scene);
  
      // This targets the camera to scene origin
      camera.setTarget(BABYLON.Vector3.Zero());
      camera.attachControl(canvas, true);
  
      // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
      var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
  
  BABYLON.SceneLoader.ImportMesh("", 
  "https://raw.githubusercontent.com/myinzack/Riggedavatars/main/", 
  _args[0], scene, function(newMeshes){
      if(newMeshes[0]){
          engine.hideLoadingUI();
  
      }
  });
  
      return scene;
  };
                  window.initFunction = async function() {
                      
                      var asyncEngineCreation = async function() {
                          try {
                          return createDefaultEngine();
                          } catch(e) {
                          console.log("the available createEngine function failed. Creating the default engine instead");
                          return createDefaultEngine();
                          }
                      }
  
                      window.engine = await asyncEngineCreation();
          if (!engine) throw 'engine should not be null.';
          startRenderLoop(engine, canvas);
          window.scene = createScene();};
          initFunction().then(() => {sceneToRender = scene                    
          });
  
          // Resize
          window.addEventListener("resize", function () {
              engine.resize();
          });
  
  
       }
      };
  }());

Pls suggest how can we invoke babylonjs from html by passing the parameters dynamically to babylonjs

Thanks
vijay

[nasimiasl]

you can get the sample html if you download any playground

[vijay_krishna]

@nasimiasl thanks for the quick response

After i downloaded the html, i seperated babylonjs code into seperate file(.js)
I want my babylonjs code to be secure by encrypting it and share the file(.js) and html (.html)
to my peers.

or else pls suggest some way where my babylonjs code will not be readable but i can add local files dynamically thru html in offline mode (without internet)?

I know its bit complicated, pls spare yur time

[nasimiasl]

if you see something in web it is readable you just can make it harder

the only way is you can make blob in your server and read that with non papular image system for use in shader but i dont recomemnd that too
for last 5 years i stop encrypting my codes and try make it more readable

[vijay_krishna]

Able to fix the issue by the following steps:.

@nasimiasl thanks for your inputs

step 1) by using localstorage in html module instead of using javascript functions
Removed the existing MYLIBRARY.init code…

step 2) Invoking the same in babyloncode.js as shown below

Thanks
vijay