Some error questions about WEBGPU

Questions
21

I do hope no one made fun of you. The two community members who have answered you are wonderful people who helped many people on the forum.
Now to the matter in hand. Have you followed the docs? Do you understand the difference between WebGL and WebGPU? Babylon.js docs
WebGPU does not use the gl object, as it is not using a webgl context.

22

In no case did I try to make fun. I was trying to understand what seemed quite surprising to me.
I tried to explain to you that everything you do with the gl object is not useful. The Babylon engine under the hood already does everything necessary in a single line of code.

1 Like
23

My goal was very simple, what I meant by making fun was actually an attitude. I understand you, but I only had one wish: to integrate webgpu into my own site and to understand the problems I was experiencing with it.
First, I sent you the document stating that I was getting the same error in the gaming area, and then I explained that I was experiencing this on my own site. Then, I posted the code in which I used WEBGL2, and my aim was maybe you could tell me ways to integrate webgpu in this code.

Frankly, I am very upset about this situation. It’s a very simple question. I followed the steps in the documentation on using webgpu in my own project, more than once, but I couldn’t do it, so I asked for your help, isn’t this why this forum exists?

It doesn’t matter, I couldn’t solve the problem, I still can’t run webgpu on Google Canary or Google Chrome.

Please tolerate me, I hope I explained myself clearly.

24

This is the reason why we do not give you sample code. My project is very large-scale and I think it will make its name known to the whole world in a few years.

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
26

Yes, that’s all I wanted, I can’t tell you how grateful I am.
I saw this.gl object in some other sources and put it there for testing purposes. Actually, it doesn’t matter much.
I definitely didn’t mean to be rude, I just wanted to do the same thing you are doing now in the first playground I threw.

2 Likes