Some error questions about WEBGPU

Questions
25

To create your engine currently you do this:

 //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);

It should do just like this:

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

Now you want to use WebGPU. You simply have to do it like this:

I use a class because you use the ‘this’ keyword in your code. So I assume you use ES6 with classes or prototypes

class Main 
{
constructor()
{
    this.engineOptions = {
        //your options
     };
}

async createEngine()
    var canvas = document.getElementById("renderCanvas");
    this.engine = new BABYLON.WebGPUEngine(canvas, true, this.engineOptions, true);
    await this.engine.initAsync();
}

this.createEngine().then(() => {
    //Create your scene
}).then(() => {
     //Create engine.runRenderLoop()
});
}

And it should work.
You don’t need the whole this.gl thing (Babylon does it under the hood)

When you say you followed the documentation, I don’t see where you saw the use of

this.gl = this.canvas.getContext("webgl2")
...
this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, texture_gl, 0);

Could you show where you saw this in the documentation? Maybe there is an error in the documentation.

Else, just delete all of that.

Maybe you could also send a little more code showing the complete functions or a complete script page to see your function calls.

And, yes, this forum is there to help. This is what we have been trying to do since the initial message. We’re trying to point you in the right directions, but it’s difficult without seeing more code.

I showed you a playground with WebGPU that works here:

Open the console and you can see that it is the WebGPU engine that is used.

If you do otherwise, you simply won’t succeed.

That looks like a nice project you have there. If you want to create a WebGPU engine remove everything that is this.gl and create your WebGPU engine. You don’t need gl objects (neither for WebGL nor for WebGPU)
And if it works for WebGL, the same won’t work for WebGPU.

I don’t know how to help you more and be clearer to you. I hope you get there.

1 Like