Babylon.js : Problem with the latest release

Using Javascript from SpiderBasic
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

Babylon.js : Problem with the latest release

Post 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 ;)
Last edited by falsam on Fri May 11, 2018 1:57 am, edited 1 time in total.

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Babylon.js : Problem with the latest release

Post 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
HPW
Posts: 35
Joined: Thu May 04, 2017 4:25 pm

Re: Babylon.js : Problem with the latest release

Post 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
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

Re: Babylon.js : Problem with the latest release

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

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
HPW
Posts: 35
Joined: Thu May 04, 2017 4:25 pm

Re: Babylon.js : Problem with the latest release

Post by HPW »

Hello falsam,

Any News about solving the problem?

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


Regards
Hans-Peter
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Babylon.js : Problem with the latest release

Post by Peter »

HPW wrote:Any News about solving the problem?
I'm afraid that only Fred can solve this problem.

Greetings ... Peter
HPW
Posts: 35
Joined: Thu May 04, 2017 4:25 pm

Re: Babylon.js : Problem with the latest release

Post 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
poshu
Posts: 96
Joined: Mon Feb 24, 2014 11:46 pm

Re: Babylon.js : Problem with the latest release

Post 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.
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

Re: Babylon.js : Problem with the latest release

Post by falsam »

Peter wrote:I'm afraid that only Fred can solve this problem.
Yes, I confirm ;)

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

Re: Babylon.js : Problem with the latest release

Post 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

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
Post Reply