Page 1 of 3

Babylon.js : Problem with the latest release

Posted: Thu May 10, 2018 5:47 pm
by falsam
I can't use the latest release of Babylon.js (3.2.0)

I have this error in the console.
Uncaught ReferenceError: BABYLON is not defined
The auhor of this framework says that babylon.js is not loaded correctly in the DOM.

With the old version there is no problem.

I did this test code. It is functional with the old release of Babylon.js
I commented on the latest version. Decomment her to try.
Code: Select all
Enumeration
  #mf
  #mfRender
EndEnumeration

Global BJSEngine, BJSCanvas, Scene

Declare InitEngine(Callback, CanvasGadget = #PB_Ignore)
Declare Start()
Declare InitGame()
Declare CreateScene()

Procedure InitEngine(Callback, CanvasGadget = #PB_Ignore)   
 
  ! require(["https://cdnjs.cloudflare.com/ajax/libs/babylonjs/3.0.0-alpha/babylon.js"], //Ok with this old release
 
  ;! require(["https://cdnjs.cloudflare.com/ajax/libs/babylonjs/3.2.0/babylon.js"], 
 
  ! function(t) {
  !   if (BABYLON.Engine.isSupported()) {
       
        If CanvasGadget = #PB_Ignore   
          !$('<canvas>').attr('id', 'renderCanvas')
          ! .css({ width : '100%', height : '100%' })
          ! .appendTo('body');
        Else
          !var selector = $(spider_GadgetID(v_canvasgadget))[0].gadget
          !selector.id = "renderCanvas"
          !selector.style.width = '100%'
          !selector.style.height = '100%'
        EndIf
 
  !     v_bjscanvas = document.getElementById('renderCanvas');
  !     v_bjsengine = new BABYLON.Engine(v_bjscanvas, true, { preserveDrawingBuffer: true, stencil: true });
  !     window.addEventListener('resize', function(){v_bjsengine.resize(); }); 
  !     v_callback()
  !   } else {return false}
  ! }
  !);   
EndProcedure 

Start()

Procedure Start()
  OpenWindow(#mf, 0, 0, 800, 600, "Test", #PB_Window_ScreenCentered)
  CanvasGadget(#mfRender, 0, 0, 800, 600, #PB_Canvas_Transparent)
  InitEngine(@InitGame(), #mfRender)
EndProcedure

Procedure InitGame()
  Scene = CreateScene()
  !v_bjsengine.runRenderLoop(f_renderscene)
EndProcedure

Procedure CreateScene()
  !var scene = new BABYLON.Scene(v_bjsengine);
 
  !var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 4, Math.PI / 4, 4, BABYLON.Vector3.Zero(), scene);
  !camera.attachControl(v_bjscanvas, true);
 
  !var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
 
  !var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
  !return scene
EndProcedure

Procedure RenderScene()
    !v_scene.render();
EndProcedure
If you can help me. Thank you ;)

Re: Babylon.js : Problem with the latest release

Posted: Thu May 10, 2018 9:27 pm
by Peter
Hello falsam,

i have often noticed that some JS libraries cannot be loaded using require (for example https://fullcalendar.io/).
In this case, the function returns only the number 3 (instead of the object). It seems that babylon.js would belong to it also.
If you do a little research, you'll find some posts from people who have the same problem.
Unfortunately I can't tell you how to fix it.

Greetings ... Peter

Re: Babylon.js : Problem with the latest release

Posted: Mon Jun 04, 2018 2:50 pm
by HPW
Helo falsam,

Did you find a solution for your problem?
Woud nice to know that te latest Version is usable with spiderbasic.

Regards
Hans-Peter

Re: Babylon.js : Problem with the latest release

Posted: Wed Jun 06, 2018 8:31 pm
by falsam
Unfortunately, I don't have a solution to integrate the new version (3.2) of the babylon.js framework. The framework creator also has no solution at the moment.
Deltakosh@babylon.js wrote:it seems like the babylonjs file is loaded too late.
:arrow: Source (3 Mars)

Re: Babylon.js : Problem with the latest release

Posted: Fri Aug 03, 2018 5:25 am
by HPW
Hello falsam,

Any News about solving the problem?

Or news on this topic: viewtopic.php?f=8&t=1507


Regards
Hans-Peter

Re: Babylon.js : Problem with the latest release

Posted: Fri Aug 03, 2018 7:49 am
by Peter
HPW wrote:Any News about solving the problem?

I'm afraid that only Fred can solve this problem.

Greetings ... Peter

Re: Babylon.js : Problem with the latest release

Posted: Fri Aug 03, 2018 9:41 am
by HPW
I'm afraid that only Fred can solve this problem.


So we hope that he will do it for next update. Currently he seems busy with purebasic 5.7

Regards
Hans-Peter

Re: Babylon.js : Problem with the latest release

Posted: Fri Aug 03, 2018 10:03 am
by poshu
Well, I'm working on the jankiest solution ever (it does work for web export though :3) but yeah, for a more robust and long term solution, we need Fred to fix it.

Re: Babylon.js : Problem with the latest release

Posted: Tue Aug 07, 2018 9:53 pm
by falsam
Peter wrote:I'm afraid that only Fred can solve this problem.
Yes, I confirm ;)

Re: Babylon.js : Problem with the latest release

Posted: Thu Aug 09, 2018 3:21 pm
by falsam
YeahHHHhhh ! Finally, the framework loads correctly in the DOM.

Babylonjs uses the require.js script which was not true in the previous version.

With previous versions of babylon.js I loaded the script like this
Code: Select all
require(["https://cdnjs.cloudflare.com/ajax/libs/babylonjs/3.0.0-alpha/babylon.js"]

With the new version
Code: Select all
require(["babylonjs", "https://cdnjs.cloudflare.com/ajax/libs/babylonjs/3.2.0/babylon.js"

New snippet without babylon.sbi
Code: Select all
Enumeration
  #mf
  #mfRender
EndEnumeration

Global BJSEngine, BJSCanvas, Scene

Declare InitEngine(Callback, CanvasGadget = #PB_Ignore)
Declare Start()
Declare InitGame()
Declare CreateScene()

Procedure InitEngine(Callback, CanvasGadget = #PB_Ignore)   
   
  ! require(["babylonjs", "https://cdnjs.cloudflare.com/ajax/libs/babylonjs/3.2.0/babylon.js"], 
 
  ! function(BJS) {
  !   if (BABYLON.Engine.isSupported()) {
       
        If CanvasGadget = #PB_Ignore   
          !$('<canvas>').attr('id', 'renderCanvas')
          ! .css({ width : '100%', height : '100%' })
          ! .appendTo('body');
        Else
          !var selector = $(spider_GadgetID(v_canvasgadget))[0].gadget
          !selector.id = "renderCanvas"
          !selector.style.width = '100%'
          !selector.style.height = '100%'
        EndIf
 
  !     v_bjscanvas = document.getElementById('renderCanvas');
  !     v_bjsengine = new BABYLON.Engine(v_bjscanvas, true, { preserveDrawingBuffer: true, stencil: true });
  !     window.addEventListener('resize', function(){v_bjsengine.resize(); }); 
  !     v_callback()
  !   } else {return false}
  ! }
  !);   
EndProcedure 

Start()

Procedure Start()
  OpenWindow(#mf, 0, 0, 800, 600, "Test", #PB_Window_ScreenCentered)
  CanvasGadget(#mfRender, 0, 0, 800, 600, #PB_Canvas_Transparent)
  InitEngine(@InitGame(), #mfRender)
EndProcedure

Procedure InitGame()
  Scene = CreateScene()
  !v_bjsengine.runRenderLoop(f_renderscene)
EndProcedure

Procedure CreateScene()
  !var scene = new BABYLON.Scene(v_bjsengine);
 
  !var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 4, Math.PI / 4, 4, BABYLON.Vector3.Zero(), scene);
  !camera.attachControl(v_bjscanvas, true);
 
  !var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0), scene);
 
  !var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
  !return scene
EndProcedure

Procedure RenderScene()
    !v_scene.render();
EndProcedure