Load JS library before SB libs

[Danilo]

In the following example we load Babylon.js before SpiderBasic libs.

1.) We get the page source (incl. head and body)
2.) We add the new library in front of SpiderBasic libs
3.) We restart with the modified page source, inside a new iframe

I think it‘s okay for developing. In the final release we would just add the scripts to the HTML file, so this dirty trick is not required.

Code: Select all

Global isInitialized

Procedure.s GetInnerHTML()
	!return document.documentElement.innerHTML;
EndProcedure

Procedure LoadJSLibFirst(file.s)
	Protected string.s = GetInnerHTML()
	output.s = ~"<script type=\"text/javascript\" fetchpriority=\"high\" src=\""+file+~"\"></script>"
	If Not FindString(string,output)
		string = ReplaceString(string,"</title>","</title>"+#LF$+output+#LF$)
		
		;Debug string
		!var iframe = document.createElement('iframe');
		!iframe.style.width   = '100vw';
		!iframe.style.height  = '100vh';
		!iframe.allowfullscreen = true;
		!iframe.style.display = 'block';
		!iframe.style.background = '#000000FF';
		!document.body.style.margin   = '0';
		!document.body.style.overflow = 'hidden';
		!document.body.appendChild(iframe);
		!iframe.srcdoc = v_string;
		isInitialized = #False
	Else
		isInitialized = #True
	EndIf
EndProcedure

LoadJSLibFirst("https://cdn.babylonjs.com/babylon.js")


Procedure BabylonAvailable()
	Protected result=0
	!try {
	!    var testingBabylonNamespace = new BABYLON.NullEngine();
	     result = #True
	!} catch {
		 result = #False
	!}
	ProcedureReturn result
EndProcedure
	
Procedure.i InitBabylon()
	Protected result=0
	EnableJS
	try {
	    var canvas = document.createElement('canvas');
	    canvas.id = 'renderCanvas';
	    canvas.style.width   = '100vw';
	    canvas.style.height  = '100vh';
	    canvas.style.display = 'block';
	    canvas.style.background = '#80808080';
	    document.body.style.margin   = '0';
	    document.body.style.overflow = 'hidden';
	    document.body.appendChild(canvas);

	    var engine = new BABYLON.Engine(canvas, true);
	    var scene  = new BABYLON.Scene(engine);
	
	    var camera = new BABYLON.ArcRotateCamera('cam', -Math.PI / 2, Math.PI / 3, 10, BABYLON.Vector3.Zero(), scene);
	    camera.attachControl(canvas, true);
	
	    var light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
	    light.intensity = 0.9;
	
	    var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 2, segments: 32}, scene);
	    sphere.position.y = 1;
	    var matSphere = new BABYLON.StandardMaterial('matSphere', scene);
	    matSphere.diffuseColor = new BABYLON.Color3(0.8, 0.2, 0.2);
	    sphere.material = matSphere;
	
	    var ground = BABYLON.MeshBuilder.CreateGround('ground', {width: 10, height: 10}, scene);
	    var matGround = new BABYLON.StandardMaterial('matGround', scene);
	    matGround.diffuseColor = new BABYLON.Color3(0.3, 0.6, 0.3);
	    ground.material = matGround;
	
	    var box = BABYLON.MeshBuilder.CreateBox('box', {size: 1.5}, scene);
	    box.position = new BABYLON.Vector3(-3, 0.75, 0);
	    var matBox = new BABYLON.StandardMaterial('matBox', scene);
	    matBox.diffuseColor = new BABYLON.Color3(0.2, 0.3, 0.9);
	    box.material = matBox;
	
	    scene.registerBeforeRender(function() {
	      box.rotation.y += 0.01;
	    });
	
	    engine.runRenderLoop(function() { scene.render(); });
	    window.addEventListener('resize', function() { engine.resize(); });
		v_result = 1;
	}
	catch {
		v_result = 0;
	}
	DisableJS
	ProcedureReturn result
EndProcedure

If isInitialized And BabylonAvailable() And InitBabylon()
	Debug GetInnerHTML()
	Debug "OKAY"
	win = OpenWindow(#PB_Any,100,100,300,200,"Title",#PB_Window_SizeGadget|#PB_Window_SystemMenu)
EndIf

[Danilo]

There is a more direct way of loading Babylon.js and other libs, by hiding define:

Code: Select all

Global nLoaded
Global nImports = 1

Procedure BabylonAvailable()
	Protected result=0
	!try {
	!    var testingBabylonNamespace = new BABYLON.NullEngine();
	     result = #True
	!} catch {
		 result = #False
	!}
	ProcedureReturn result
EndProcedure

Procedure.i InitBabylon()
	Protected result=0
	EnableJS
	try {
	    var canvas = document.createElement('canvas');
	    canvas.id = 'renderCanvas';
	    canvas.style.width   = '100vw'; //'100vw';
	    canvas.style.height  = '100vh';
	    canvas.style.display = 'block';
		canvas.style.background = '#80808080';
	    document.body.style.margin   = '0';
	    document.body.style.overflow = 'hidden';
	    document.body.appendChild(canvas);

		var engine = new BABYLON.Engine(canvas, true);
	    var scene  = new BABYLON.Scene(engine);
	
	    var camera = new BABYLON.ArcRotateCamera('cam', -Math.PI / 2, Math.PI / 3, 10, BABYLON.Vector3.Zero(), scene);
	    camera.attachControl(canvas, true);
	
	    var light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
	    light.intensity = 0.9;
	
	    var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {diameter: 2, segments: 32}, scene);
	    sphere.position.y = 1;
	    var matSphere = new BABYLON.StandardMaterial('matSphere', scene);
	    matSphere.diffuseColor = new BABYLON.Color3(0.8, 0.2, 0.2);
	    sphere.material = matSphere;
	
	    var ground = BABYLON.MeshBuilder.CreateGround('ground', {width: 10, height: 10}, scene);
	    var matGround = new BABYLON.StandardMaterial('matGround', scene);
	    matGround.diffuseColor = new BABYLON.Color3(0.3, 0.6, 0.3);
	    ground.material = matGround;
	
	    var box = BABYLON.MeshBuilder.CreateBox('box', {size: 1.5}, scene);
	    box.position = new BABYLON.Vector3(-3, 0.75, 0);
	    var matBox = new BABYLON.StandardMaterial('matBox', scene);
	    matBox.diffuseColor = new BABYLON.Color3(0.2, 0.3, 0.9);
	    box.material = matBox;
	
	    scene.registerBeforeRender(function() {
	      box.rotation.y += 0.01;
	    });
	
	    engine.runRenderLoop(function() { scene.render(); });
	    window.addEventListener('resize', function() { engine.resize(); });
		v_result = 1;
	}
	catch {
		v_result = 0;
	}
	DisableJS
	ProcedureReturn result
EndProcedure

Procedure Main()
	If BabylonAvailable() And InitBabylon()
		Debug "OKAY"
		win = OpenWindow(#PB_Any,100,100,300,200,"Title",#PB_Window_SizeGadget|#PB_Window_SystemMenu)
	EndIf
EndProcedure

;----------------------------------------------------------
; by the.weavster
;
; https://forums.spiderbasic.com/viewtopic.php?p=8053#p8053
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

Define_Disable() ; temporarily move define so it doesn't interfere with our imports
LoadScript("https://cdn.babylonjs.com/babylon.js", @ScriptLoaded())

The iframe workaround from first posting is not required.

[Dirk Geppert]

Well done Thanks, Danilo!

[falsam]

There is a more direct way of loading Babylon.js and other libs, by hiding define:

Wow, thank you so much! Thank you for this code and for the time you spent writing it. It's great. I love it.