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

[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 ?