Babylon.js + WebGPU + glTF Test

by cx20

HTML

<script src="https://rawcdn.githack.com/BabylonJS/Babylon.js/4624d2a241422d74206040a74f67998bf31468e9/dist/preview release/babylon.js"></script>
<script src="https://rawcdn.githack.com/BabylonJS/Babylon.js/4624d2a241422d74206040a74f67998bf31468e9/dist/preview release/loaders/babylon.glTF2FileLoader.js"></script>

<canvas id="renderCanvas"></canvas>

CSS

html, body {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}

JavaScript

var createScene = function(engine) {

  var scene = new BABYLON.Scene(engine);
  scene.clearColor = new BABYLON.Color3(0, 0, 0);

  var meshes = [];

  Promise.all([
    BABYLON.SceneLoader.ImportMeshAsync(null, "https://cx20.github.io/gltf-test/tutorialModels/SheenCloth/glTF/", "SheenCloth.gltf", scene).then(function(result) {
      var scale = 200;
      var mesh = result.meshes[0];
      var modelScaling = mesh.scaling;
      mesh.scaling = new BABYLON.Vector3(modelScaling.x * scale, modelScaling.y * scale, modelScaling.z * scale);
      meshes.push(mesh);
    }),
  ]).then(() => {
    var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 0, BABYLON.Vector3.Zero(), scene);
    camera.setPosition(new BABYLON.Vector3(0, 5, 15));
    camera.attachControl(canvas, false, false);
    scene.activeCamera = camera;
    let light0 = new BABYLON.HemisphericLight("light0", new BABYLON.Vector3(1, 1, 0), scene); 
    engine.runRenderLoop(function() {
      //scene.activeCamera.alpha -= 0.01;
      scene.render();
    });
  });
  return scene;
}

async function init() {
  try {
    canvas = document.querySelector("#renderCanvas");
    //let engine = new BABYLON.Engine(canvas, true);
    let engine = new BABYLON.WebGPUEngine(canvas);
    await engine.initAsync();
    engine.enableOfflineSupport = false; // Suppress manifest reference

    window.addEventListener('resize', function() {
      engine.resize();
    });
    let scene = createScene(engine);
  }
  catch (e) {
    console.error(e);
  }
}

init();