Hello, after unsuccessful searches on the forum for a solution, I’m asking the Babylon community for help. I’m not used to asking for help, but I’m really stuck…
I want to enable WebGPU in my project. Here’s some background:
- All assets have been modeled by myself on Blender. They are optimized for lightness, going from a high-poly scene of over 500MB on Blender to less than 20MB (including all assets, including LODs) on BabylonJS. All assets exported as GLTF
- Assets display and load correctly in my scene.
- I can move around my scene using a first-person view.
- The scene lags enormously, probably because 20MB is still very heavy to manage in WebGL.
- I want to activate the WebGPU, I’m using Chrome 114 (official build), I’m also testing on Chrome Canary and Edge (my scene displays and behaves “normally” in WebGL, at 6 FPS). My PC is equipped with an Nvidia RTX 3060, drivers up to date.
- Here’s what I try to do to activate webGPU, but without success, the scene doesn’t load. The code is over 100 lines long, so I’ll remove anything that doesn’t concern the engine and get straight to the point:
import * as BABYLON from "babylonjs";
import "babylonjs-loaders";
import "babylonjs-serializers";
import * as Lighting from "./Lighting";
import Display from "./Display";
import CameraController from "./Controller";
import '@babylonjs/core/Engines/WebGPU/Extensions/'
let engine;
let scene;
let cameraController;
async function initScene(canvas) {
if (navigator.gpu) {
engine = new BABYLON.WebGPUEngine(canvas);
await engine.initAsync();
} else {
let engineOptions = { useWebGL2: true };
engine = new BABYLON.Engine(canvas, true, engineOptions);
}
scene = new BABYLON.Scene(engine);
Lighting.applyLighting(scene, BABYLON.Tools.ToRadians(115));
cameraController = new CameraController(scene, canvas);
cameraController.createCamera();
// various settings for the rendering pipeline
qualityParameters();
new Display(scene);
engine.runRenderLoop(() => {
scene.render();
});
window.addEventListener("resize", onWindowResize);
window.addEventListener('resize', function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (engine) {
engine.resize();
}
});
}
window.onload = async function () {
const canvas = document.getElementById("renderCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
await initScene(canvas);
};
window.onbeforeunload = function () {
if (cameraController) {
cameraController.dispose();
}
engine.dispose();
window.removeEventListener("resize", onWindowResize);
};
function onWindowResize() {
if (engine) {
engine.resize();
const camera = scene.getCameraByName("Camera");
if (camera) {
camera.aspectRatio = engine.getAspectRatio(camera);
camera.fov = Math.min(window.innerWidth / window.innerHeight, 1);
camera.fovMode = BABYLON.Camera.FOVMODE_HORIZONTAL_FIXED;
}
}
}
export { initScene };
I had made a first attempt to install the webGPU, there again I had only WebGL but at least my scene was displayed and I could move inside, despite the significant lag due to the mediocre framerate :
import * as BABYLON from "babylonjs";
import "babylonjs-loaders";
import "babylonjs-serializers";
import * as Lighting from "./Lighting";
import Display from "./Display";
import CameraController from "./Controller";
let engine;
let scene;
let cameraController;
function initScene(canvas) {
let engineOptions = { useWebGL2: true };
if (navigator.gpu) {
engineOptions = { useWebGPU: true };
}
engine = new BABYLON.Engine(canvas, true, engineOptions);
scene = new BABYLON.Scene(engine);
Lighting.applyLighting(scene, BABYLON.Tools.ToRadians(115));
cameraController = new CameraController(scene, canvas);
cameraController.createCamera();
// various settings for the rendering pipeline
qualityParameters();
new Display(scene); // Utilisez Display.js pour upload et afficher les assets
engine.runRenderLoop(() => {
scene.render();
});
window.addEventListener("resize", onWindowResize);
window.addEventListener('resize', function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
if (engine) {
engine.resize();
}
});
}
window.onload = function () {
const canvas = document.getElementById("renderCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
initScene(canvas);
};
window.onbeforeunload = function () {
if (cameraController) {
cameraController.dispose();
}
engine.dispose();
window.removeEventListener("resize", onWindowResize);
};
function onWindowResize() {
if (engine) {
engine.resize();
const camera = scene.getCameraByName("Camera");
if (camera) {
camera.aspectRatio = engine.getAspectRatio(camera);
camera.fov = Math.min(window.innerWidth / window.innerHeight, 1);
camera.fovMode = BABYLON.Camera.FOVMODE_HORIZONTAL_FIXED;
}
}
}
export { initScene };
Here are 2 screenshots of my BabylonJS scene and a render preview I made on blender, this is the result I’d like to approach. I’m just a 3D artist, not a developer.
Can anyone help me? Thank you very much
