How to embed a Babylon.js+HtmlProcessor view inside a SpiderBasic window/container?

Just starting out? Need help? Post your questions and find answers here.
Post Reply
skinkairewalker
Posts: 125
Joined: Tue Jun 14, 2016 7:17 pm

How to embed a Babylon.js+HtmlProcessor view inside a SpiderBasic window/container?

Post by skinkairewalker »

hello everyone !

Hey everyone,

I’m trying to integrate Babylon.js into a SpiderBasic app and render it inside a ContainerGadget (like a viewport), instead of using fullscreen.
I’m loading Babylon.js via the HTML preprocessor, and I’m attempting to inject the canvas into the gadget using GadgetID() with EnableJS.


The issue is a bit tricky:

👉 There are no errors at all
👉 The code runs, but nothing is rendered
👉 The canvas either doesn’t show up or seems to not attach properly to the container

working code :

Code: Select all


;!  <HtmlPreprocessor>
;!    [
;!      {
;!        "search": "</title>",
;!        "replace": "</title>\n<script src='https:\/\/cdn.babylonjs.com\/babylon.js'><\/script>"
;!      }
;!    ]
;!  </HtmlPreprocessor>

Procedure IniciarCena()
  EnableJS
    var canvas = document.createElement('canvas');
    canvas.id = 'renderCanvas';
    canvas.style.width   = '100vw';
    canvas.style.height  = '100vh';
    canvas.style.display = 'block';
    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(); });
  DisableJS
EndProcedure

IniciarCena()

My attempt :

Code: Select all


;!  <HtmlPreprocessor>
;!    [
;!      {
;!        "search": "</title>",
;!        "replace": "</title>\n<script src='https:\/\/cdn.babylonjs.com\/babylon.js'><\/script>"
;!      }
;!    ]
;!  </HtmlPreprocessor>

Enumeration
  #Janela
  #Container3D
  #BotaoInfo
EndEnumeration

Procedure IniciarBabylon(id)
  EnableJS
    var idContainer = v_id;
    function tentarIniciar() {
      var container = document.getElementById(idContainer);
      if (!container) {
        setTimeout(tentarIniciar, 50);
        return;
      }
      container.style.overflow = 'hidden';
      container.style.padding  = '0';

      var canvas = document.createElement('canvas');
      canvas.style.width   = '100%';
      canvas.style.height  = '100%';
      canvas.style.display = 'block';
      container.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}, 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: 8, height: 8}, 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(); });
    }
    setTimeout(tentarIniciar, 100);
  DisableJS
EndProcedure

If OpenWindow(#Janela, 0, 0, 800, 600, "BabylonJS", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  ButtonGadget(#BotaoInfo, 10, 10, 120, 30, "Olá BabylonJS!")
  ContainerGadget(#Container3D, 10, 50, 780, 540)
  CloseGadgetList()

  Debug "ID do container: " + Str(GadgetID(#Container3D))
  IniciarBabylon(GadgetID(#Container3D))
EndIf

someone know how can i do it ?
Top
User avatar
Danilo
Posts: 67
Joined: Wed Feb 26, 2014 7:11 am

Re: How to embed a Babylon.js+HtmlProcessor view inside a SpiderBasic window/container?

Post by Danilo »

skinkairewalker wrote: Mon Apr 13, 2026 8:00 pmsomeone know how can i do it ?
Change the first lines of your procedure to:

Code: Select all

 Procedure IniciarBabylon(id)
  ; // set container name
  !v_id.div.id = 'babylon_container';
  EnableJS
    var idContainer = v_id;
    function tentarIniciar() {
      var container = document.getElementById('babylon_container'); // use container name
Complete:

Code: Select all

;!  <HtmlPreprocessor>
;!    [
;!      {
;!        "search": "</title>",
;!        "replace": "</title>\n<script src='https:\/\/cdn.babylonjs.com\/babylon.js'><\/script>"
;!      }
;!    ]
;!  </HtmlPreprocessor>

Enumeration
  #Janela
  #Container3D
  #BotaoInfo
EndEnumeration

Procedure IniciarBabylon(id)
  ; // set container name
  !v_id.div.id = 'babylon_container';
  EnableJS
    var idContainer = v_id;
    function tentarIniciar() {
      var container = document.getElementById('babylon_container'); // use container name
      if (!container) {
        setTimeout(tentarIniciar, 50);
        return;
      }
      container.style.overflow = 'hidden';
      container.style.padding  = '0';

      var canvas = document.createElement('canvas');
      canvas.style.width   = '100%';
      canvas.style.height  = '100%';
      canvas.style.display = 'block';
	  //canvas.style.background = '#202020FF';
      container.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}, 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: 8, height: 8}, 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(); });
    }
    setTimeout(tentarIniciar, 100);
  DisableJS
EndProcedure

If OpenWindow(#Janela, 0, 0, 800, 600, "BabylonJS", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
	  ButtonGadget(#BotaoInfo, 10, 10, 120, 30, "Olá BabylonJS!")
	  ContainerGadget(#Container3D, 10, 50, 780, 540)
	  CloseGadgetList()
	  
	  IniciarBabylon(GadgetID(#Container3D))
EndIf

Without HTMLpreprocessor:

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


Enumeration
  #Janela
  #Container3D
  #BotaoInfo
EndEnumeration

Procedure IniciarBabylon(id)
  ; // set container name
  !v_id.div.id = 'babylon_container';
  EnableJS
    var idContainer = v_id;
    function tentarIniciar() {
      var container = document.getElementById('babylon_container'); // use container name
      if (!container) {
        setTimeout(tentarIniciar, 50);
        return;
      }
      container.style.overflow = 'hidden';
      container.style.padding  = '0';

      var canvas = document.createElement('canvas');
      canvas.style.width   = '100%';
      canvas.style.height  = '100%';
      canvas.style.display = 'block';
	  //canvas.style.background = '#202020FF';
      container.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}, 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: 8, height: 8}, 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(); });
    }
    setTimeout(tentarIniciar, 100);
  DisableJS
EndProcedure

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

If isInitialized And BabylonAvailable()
	If OpenWindow(#Janela, 0, 0, 800, 600, "BabylonJS", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
	  ButtonGadget(#BotaoInfo, 10, 10, 120, 30, "Olá BabylonJS!")
	  ContainerGadget(#Container3D, 10, 50, 780, 540)
	  CloseGadgetList()
	  
	  IniciarBabylon(GadgetID(#Container3D))
	EndIf
EndIf
cya,
...Danilo
Top
User avatar
Danilo
Posts: 67
Joined: Wed Feb 26, 2014 7:11 am

Re: How to embed a Babylon.js+HtmlProcessor view inside a SpiderBasic window/container?

Post by Danilo »

There is a direct way of using Babylon.js:

Code: Select all

Global nLoaded
Global nImports = 1

Enumeration
  #Janela
  #Container3D
  #BotaoInfo
EndEnumeration

;
; https://forums.spiderbasic.com/viewtopic.php?t=3763
;
Procedure IniciarBabylon(id)
  ; // set container name
  !v_id.div.id = 'babylon_container';
  EnableJS
    var idContainer = v_id;
    function tentarIniciar() {
      var container = document.getElementById('babylon_container'); // use container name
      if (!container) {
        setTimeout(tentarIniciar, 50);
        return;
      }
      container.style.overflow = 'hidden';
      container.style.padding  = '0';

      var canvas = document.createElement('canvas');
      canvas.style.width   = '100%';
      canvas.style.height  = '100%';
      canvas.style.display = 'block';
	  //canvas.style.background = '#202020FF';
      container.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}, 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: 8, height: 8}, 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(); });
    }
    setTimeout(tentarIniciar, 100);
  DisableJS
EndProcedure

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

Procedure Main()
	If BabylonAvailable() And OpenWindow(#Janela, 0, 0, 800, 600, "BabylonJS", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
	  ButtonGadget(#BotaoInfo, 10, 10, 120, 30, "Olá BabylonJS!")
	  ContainerGadget(#Container3D, 10, 50, 780, 540)
	  CloseGadgetList()
	  
	  IniciarBabylon(GadgetID(#Container3D))
	  Debug "OKAY"
	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())
cya,
...Danilo
Top
Post Reply

Return to “Coding Questions”