Babylon.js

Using Javascript from SpiderBasic
Peter53
Posts: 12
Joined: Thu Mar 28, 2019 2:58 pm

Re: Babylon.js

Post by Peter53 »

Dirk Geppert wrote:Hi Falsam, do you know https://threejs.org ? Is it comparable with babylon and may be better usable with SpiderBasic?
Ciao Dirk
I didn't know about Three.js. It's fast, stable, extremely versatile and has everything needed to produce whatever comes to mind.
Thanks for the info. Time to play with Three. :-)
Phil
Posts: 4
Joined: Thu Oct 10, 2019 7:49 pm

Re: Babylon.js

Post by Phil »

falsam wrote: Fri May 12, 2017 7:37 pm Image

Babylon.sbi is a module coded with theSpiderBasic language that provides simplified access to the framework javascript 3D babylonjs.com created by David Catuhe and David Rousset, two web engineers at Microsoft.

Sources and examples on the GitHub platform.
:arrow: https://github.com/falsam/BJS

■ Structure of your folder.
Babylon A folder containing the interfaces with the Babylon.js framework (do not change the name).
sbbjs Folder containing the babylon.custom.js framework that will be exported when creating your application
Data Optional folder that will contain your textures, sound, etc ....
Code.sb Your code. (See examples 00-template.sb)

■ Example

Code: Select all

;Babylon.sbi - Basic Scene
EnableExplicit
 
IncludeFile "babylon/babylon.sbi"
 
Global Camera, Light, Plane, Sphere, Cylinder, Cube, Torus
 
Declare LoadGame()
Declare RenderGame()
 
UseModule BJS
 
InitEngine(@LoadGame())
 
Procedure LoadGame()    
  If CreateScene()
 
    ;Camera & Light
    Camera  = CreateCamera("camera", 0, 5, 7, #ArcRotate)
    Light   = CreateLight("light", 0, 10, 0)
 
    ;Objects (Plane, Sphere, ....)
    Plane   = CreateGround("plane", 10, 10)
    Sphere  = CreateSphere("sphere", 2)
    MoveMesh(Sphere, 0, 2, 0)
 
    Cylinder= CreateCylinder("cylinder", 2, 2, 2)
    MoveMesh(Cylinder, 3, 1, -2)
 
    Cube = CreateBox("cube", 2)
    MoveMesh(Cube, -3, 1, -2)
 
    Torus = CreateTorus("torus", 2, 1)
    MoveMesh(Torus, -2, 0.5, 2)
 
    RenderLoop(@RenderGame())
  EndIf
EndProcedure
 
Procedure RenderGame()
  RenderWorld() 
EndProcedure
Result
Image

■ ShowCase
Water http://falsam.com/sbbjs/water.html (Use the mouse to explore the scene)
Music http://falsam.com/sbbjs/music.html
particle http://falsam.com/sbbjs/particle.html

■ In french : http://falsam.com/sbbjs/wiki/doku.php?id=babylon
Hi there,

i was working on a project and i needed the latest babylon version and i found a trick to do it, see:

Code: Select all

IncludeFile "babylon/babylon.sbi"

Global nLoaded, nImports = 2

UseModule BJS

Declare LoadGame()
Declare RenderGame()

Procedure Main()
  InitKey()
  !if (BABYLON.Engine.isSupported()) {    
          !$('<canvas>').attr('id', 'renderCanvas')
          ! .css({ width : '100%', height : '100%' })
          ! .appendTo('body');
          !     v_bjscanvas = document.getElementById('renderCanvas');
          !     v_bjsengine = new BABYLON.Engine(v_bjscanvas, true); //, { preserveDrawingBuffer: true, stencil: true }); 
  !     window.addEventListener('resize', function(){v_bjsengine.resize(); });  
  !}
  LoadGame()
EndProcedure

Procedure Define_Disable()
  EnableJS
  window['hide-define'] = null;
  if(typeof define === 'function' && define.amd) {
    window['hide-define'] = define;
    define = null;
  }  
  DisableJS
EndProcedure

Procedure Define_Enable()
  EnableJS
  if(window['hide-define'] != null) {
    define = window['hide-define'];
    window['hide-define'] = null;
  }
  DisableJS
EndProcedure

Procedure ScriptLoaded(URL$, Success)
  If Success
    nLoaded + 1
    If nLoaded = nImports ; the number of files to import
      Define_Enable() ; our imports have completed so restore define
      Main()
    EndIf
  Else
    Debug "Failed to load external: " + URL$
  EndIf
EndProcedure

procedure LoadGame()
  !const canvas = v_bjscanvas; 
  !const engine = v_bjsengine;
  !v_bjscurrentscene  = new BABYLON.Scene(engine); 
  !v_bjsengine = engine;
  Camera = 0
  !v_camera =  new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -30), v_bjscurrentscene);
  Scene = 0
  !v_scene = v_bjscurrentscene;
  !var gravityVector = new BABYLON.Vector3(0,-210.81, 0);
  !var physicsPlugin = new BABYLON.CannonJSPlugin();
  !v_scene.enablePhysics(gravityVector, physicsPlugin);
  !v_scene.clearColor = new BABYLON.Color3( .0, .0, .0);
  
  ;    Camera  = CreateCamera("camera", 0, 5, 7, #BJS_ArcRotate)
    Light   = CreateLight("light", 0, 10, 0)
    
    ;Objects (Plane, Sphere, ....)
    Plane   = CreateGround("plane", 10, 10)
    Sphere  = CreateSphere("sphere", 2)
    MoveMesh(Sphere, 0, 2, 0)
    
    Cylinder= CreateCylinder("cylinder", 2, 2, 2)
    MoveMesh(Cylinder, 3, 1, -2)
    
    Cube = CreateBox("cube", 2 , 2, 4)
    MoveMesh(Cube, -3, 1, -2)
    
    Torus = CreateTorus("torus", 2, 1)
    MoveMesh(Torus, -2, 0.5, 2)
        
    RenderLoop(@RenderGame())
endprocedure

Procedure RenderGame()
  RenderWorld() 
endprocedure

Define_Disable() ; temporarily move define so it doesn't interfere with our imports
LoadScript("https://preview.babylonjs.com/babylon.js", @ScriptLoaded())
LoadScript("https://preview.babylonjs.com/cannon.js", @ScriptLoaded())
;LoadScript("https://cdn.babylonjs.com/babylon.js", @ScriptLoaded())
;LoadScript("https://cdn.babylonjs.com/cannon.js", @ScriptLoaded())
Norbert
Posts: 4
Joined: Wed Oct 11, 2023 4:18 am

Re: Babylon.js

Post by Norbert »

falsam wrote: Fri May 12, 2017 7:37 pm Image

Babylon.sbi is a module coded with theSpiderBasic language that provides simplified access to the framework javascript 3D babylonjs.com created by David Catuhe and David Rousset, two web engineers at Microsoft.

Sources and examples on the GitHub platform.
:arrow: https://github.com/falsam/BJS

■ Structure of your folder.
Babylon A folder containing the interfaces with the Babylon.js framework (do not change the name).
sbbjs Folder containing the babylon.custom.js framework that will be exported when creating your application
Data Optional folder that will contain your textures, sound, etc ....
Code.sb Your code. (See examples 00-template.sb)

■ Example

Code: Select all

;Babylon.sbi - Basic Scene
EnableExplicit
 
IncludeFile "babylon/babylon.sbi"
 
Global Camera, Light, Plane, Sphere, Cylinder, Cube, Torus
 
Declare LoadGame()
Declare RenderGame()
 
UseModule BJS
 
InitEngine(@LoadGame())
 
Procedure LoadGame()    
  If CreateScene()
 
    ;Camera & Light
    Camera  = CreateCamera("camera", 0, 5, 7, #ArcRotate)
    Light   = CreateLight("light", 0, 10, 0)
 
    ;Objects (Plane, Sphere, ....)
    Plane   = CreateGround("plane", 10, 10)
    Sphere  = CreateSphere("sphere", 2)
    MoveMesh(Sphere, 0, 2, 0)
 
    Cylinder= CreateCylinder("cylinder", 2, 2, 2)
    MoveMesh(Cylinder, 3, 1, -2)
 
    Cube = CreateBox("cube", 2)
    MoveMesh(Cube, -3, 1, -2)
 
    Torus = CreateTorus("torus", 2, 1)
    MoveMesh(Torus, -2, 0.5, 2)
 
    RenderLoop(@RenderGame())
  EndIf
EndProcedure
 
Procedure RenderGame()
  RenderWorld() 
EndProcedure
Result
Image

■ ShowCase
Water http://falsam.com/sbbjs/water.html (Use the mouse to explore the scene)
Music http://falsam.com/sbbjs/music.html
particle http://falsam.com/sbbjs/particle.html

■ In french : http://falsam.com/sbbjs/wiki/doku.php?id=babylon
Hello,
I just bought Spiderbasic to test BJS. However, it only runs with version 2.4 on version 2.5 of Spiderbasic nothing is displayed, no error message or anything like that.

What would I have to adjust so that the examples also run under spiderbasic 2.5?

Best regards

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

Re: Babylon.js

Post by Peter »

Norbert wrote: Wed Oct 11, 2023 4:23 amWhat would I have to adjust so that the examples also run under spiderbasic 2.5?
change line 8 in engine.sbi from:

Code: Select all

  !require([bjs$v_bjsenginepath + "/babylon.custom.js"], 
to:

Code: Select all

  !require([bjs$g_bjsenginepath + "/babylon.custom.js"], 
Norbert
Posts: 4
Joined: Wed Oct 11, 2023 4:18 am

Re: Babylon.js

Post by Norbert »

Hi Peter,

Thanks for the quick help.
Norbert
Posts: 4
Joined: Wed Oct 11, 2023 4:18 am

Re: Babylon.js

Post by Norbert »

Hi Peter,

Unfortunately, the example 13-Particle.sb is no longer executable. As soon as I use the old Spiderbasic version and Babylon without your adjustment, the example works again. Do you have an idea what I need to adjust? so that it also runs under 2.5?

Kind regards, Norbert
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Babylon.js

Post by Peter »

Norbert wrote: Fri Oct 13, 2023 9:05 amDo you have an idea what I need to adjust? so that it also runs under 2.5?
change line 4 in particle.sbi from:

Code: Select all

  !var particleSystem =  new BABYLON.ParticleSystem(v_name, v_maxnumberparticles, v_scene);
to:

Code: Select all

  !var particleSystem =  new BABYLON.ParticleSystem(v_name, v_maxnumberparticles, g_scene);

and change line 10 in particle.sbi from:

Code: Select all

  !v_emitter.particleTexture = new BABYLON.Texture(v_filename, v_scene);
to:

Code: Select all

  !v_emitter.particleTexture = new BABYLON.Texture(v_filename, g_scene);

Background: In any of the last SB versions the conversion of global variables was changed. Before they had the prefix v_ and now they have the prefix g_
Norbert
Posts: 4
Joined: Wed Oct 11, 2023 4:18 am

Re: Babylon.js

Post by Norbert »

Hi Peter,

Thank you, also for the background information.
:D
Post Reply