Babylon.js

[Peter53]

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]

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.
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


■ 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]

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.
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


■ 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

[Peter]

What 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]

Hi Peter,

Thanks for the quick help.

[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

[Peter]

Do 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]

Hi Peter,

Thank you, also for the background information.