Some error questions about WEBGPU

Questions
1

this.canvas = d.gi(“renderCanvas”);
this.motor = new BABYLON.WebGPUEngine(this.canvas, {
powerPreference: “high-performance”,
});
await this.motor.initAsync();

I want to use webgpu in my scene, but I think I’m making some mistakes while streaming, unfortunately my scene creates errors.
Uncaught (in promise) ReferenceError: scene is not defined
I’m getting errors like: What could be the reason for this? Is there any points I missed or a document I need to review further?
Meanwhile, await BABYLON.WebGPUEngine.IsSupportedAsync enters the code I specified if the value returned from this data is true.

2

It’s hard to see without more code. Maybe you could share a little more like the complete function in a code tag.

3

I hope I was able to give an example correctly.
Because it cannot create the scene in the example I gave.

4

There is no need to create an engine, the playground is doing it for you. What you need to do is to switch to the webgpu engine in the select menu on the top bar. This Playground should forward you to webgpu:

5

Maybe you are missing async for your function that creates the engine. View that webGPU uses wait

async function createEngine()
{
    this.canvas = document.getElementById("renderCanvas");
    this.motor = new BABYLON.WebGPUEngine(this.canvas, {
        powerPreference: “high-performance”,
    });
    await this.motor.initAsync();
}

And then create your scene after the engine is initialized.

6

I don’t know if I missed a point but I couldn’t figure it out.

7

Yes, you are right for the experiments here, but if I want to run this on my own machine, unfortunately, such an option is not available.

8

Are you referring to the playground download, or in general for webgpu?

9

Unless the general webgpu usage is fully stated clearly. I’m sorry

10

In the playground you must do this to load your WebGPU engine.
Otherwise the playground already loads a default engine.
But on your project locally just use the create engine function and it should work.

11

It sounds like you may be referencing a scene object in your engine runRenderLoop - you need to manually create a scene first to have it available.

const scene = new BABYLON.Scene(motor);

Then it’s available in your runRenderLoop. Full example here:
https://doc.babylonjs.com/setup/starterHTML

12

Actually, I use it exactly as you mentioned in my code, but unfortunately it is not fully supported. I guess I’ll have to rack my brains a little more to use this.

13

If you post the full code - we may be able to spot where it’s going wrong. It may just be a scope issue

14 
	this.canvas = d.gi("renderCanvas");
	//webGPUSupported = await BABYLON.WebGPUEngine.IsSupportedAsync
	this.gl = this.canvas.getContext("webgl2")
	this.gl.drawingBufferColorSpace = "display-p3";
	this.gl.unpackColorSpace = "display-p3";
	var framebuffer = this.gl.createFramebuffer();
	var texture_gl = this.gl.createTexture();
	this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
	this.gl.bindTexture(this.gl.TEXTURE_2D, texture_gl);
	this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.canvas.width, this.canvas.height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
	this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, texture_gl, 0);
	this.engine = new BABYLON.Engine(this.canvas, true, this.engineOptions, true);
	this.engine.enableOfflineSupport = false;
	this.engine.doNotHandleContextLost = true;
	this.scene = new BABYLON.Scene(this.engine);

this.camera = this.getCamera();

	window.camera = this.camera;
	this.scene.ambientColor = new BABYLON.Color3(0.2, 0.2, 0.2);
	this.scene.collisionsEnabled = true;
	this.scene.useConstantAnimationDeltaTime = true;
	this.getLighting();
	this.getDds();
	// var options = new BABYLON.SceneOptimizerOptions(60, 2000);
	// options.addOptimization(new BABYLON.HardwareScalingOptimization(0.5, 1.5));
	// options.addOptimization(new BABYLON.RenderTargetsOptimization(0));
	// options.addOptimization(new BABYLON.TextureOptimization(1, 0.5));
	// options.addOptimization(new BABYLON.PostProcessesOptimization(2));
	// this.optimizer_fps = new BABYLON.SceneOptimizer(this.scene, options);
	var options = new BABYLON.SceneOptimizerOptions(60, 2000);
	options.addOptimization(new BABYLON.HardwareScalingOptimization(0, 4));
	options.addOptimization(new BABYLON.RenderTargetsOptimization(1));
	options.addOptimization(new BABYLON.TextureOptimization(0, 512));
	options.addOptimization(new BABYLON.PostProcessesOptimization(1));
	this.optimizer_fps = new BABYLON.SceneOptimizer(this.scene, options);

this.scene.executeWhenReady((_sceneFinished) => {
this.scene.textures.forEach((el) => {
switch (el.name) {
case “sceneprePassRT”:
el.updateSamplingMode(BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
el.anisotropicFilteringLevel = 8;
el.samples = 8;
break;
default:
break;
}
});
});
this.engine.runRenderLoop(() => {
if (this.scene) {
this.scene.render();
}
});

Actually, the main logic of my code is like this, I just want to add webgpu support to this code.

15

Please let me know if it is not sufficient or suitable. I had to send this type of code because I could not create a complete playground and provide a demo.

16

I don’t understand why you are doing all this to create a WebGPU engine.

You are already not using WebGPUEngine, but Engine :
this.engine = new BABYLON.Engine(this.canvas, true, this.engineOptions, true);

And why create all these things for the canvas?

     //webGPUSupported = await BABYLON.WebGPUEngine.IsSupportedAsync
	this.gl = this.canvas.getContext("webgl2")
	this.gl.drawingBufferColorSpace = "display-p3";
	this.gl.unpackColorSpace = "display-p3";
	var framebuffer = this.gl.createFramebuffer();
	var texture_gl = this.gl.createTexture();
	this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
	this.gl.bindTexture(this.gl.TEXTURE_2D, texture_gl);
	this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.canvas.width, this.canvas.height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
	this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, texture_gl, 0);
	this.engine = new BABYLON.Engine(this.canvas, true, this.engineOptions, true);

You want to use WebGPU and yet:
this.gl = this.canvas.getContext(‘webgl2’)

You just need this for the canvas and create engine.

var canvas = document.getElementById("renderCanvas");
this.engine = new BABYLON.Engine(canvas, true, this.engineOptions, true);

Anything this.gl is useless.
I can’t figure out what you are trying to do with the code you have shown.
I think you’re mixing up a lot of things.

You should start here as brianzinn says :
https://doc.babylonjs.com/setup/starterHTML

If I use your code provided, it should look something like this.

this.canvas = document.getElementById("renderCanvas");	
//webGPUSupported = await BABYLON.WebGPUEngine.IsSupportedAsync;
this.engine = new BABYLON.Engine(this.canvas, true, this.engineOptions, true);
this.engine.enableOfflineSupport = false;
this.engine.doNotHandleContextLost = true;
	
this.scene = new BABYLON.Scene(this.engine);	
this.camera = this.getCamera();
window.camera = this.camera;
this.scene.ambientColor = new BABYLON.Color3(0.2, 0.2, 0.2);
this.scene.collisionsEnabled = true;
this.scene.useConstantAnimationDeltaTime = true;
this.getLighting();
this.getDds();	
	
var options = new BABYLON.SceneOptimizerOptions(60, 2000);
options.addOptimization(new BABYLON.HardwareScalingOptimization(0, 4));
options.addOptimization(new BABYLON.RenderTargetsOptimization(1));
options.addOptimization(new BABYLON.TextureOptimization(0, 512));
options.addOptimization(new BABYLON.PostProcessesOptimization(1));
this.optimizer_fps = new BABYLON.SceneOptimizer(this.scene, options);	
	
this.engine.runRenderLoop(() => { if (this.scene) { this.scene.render(); } });
17

I think it’s just because “this” Is not what you think it is in an anonymous function. Just use a variable and pass it it by reference.

18

Thanks :slight_smile:

19

I would have been curious to understand what you wanted to do with everything related to this.gl.
But if removing “this” helped build your WebGPU engine, that’s great. I like magic or even miracles. :slight_smile:

20

In fact, the speech made here did not help me at all, and thank God, they even made fun of me. The point I wanted to understand was how to enable webgpu in my own project, but unfortunately I couldn’t succeed and gave up.