# Some error questions about WEBGPU

**URL:** <https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143>\
**Category:** Questions\
**Tags:** webgl\
**Created:** [April 29, 2024, 1:15pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143 "2024-04-29T13:15:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [April 29, 2024, 1:15pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/1 "2024-04-29T13:15:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [April 29, 2024, 2:01pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/2 "2024-04-29T14:01:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [April 29, 2024, 2:28pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/3 "2024-04-29T14:28:39Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#2AH4YH%23181)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 29, 2024, 3:06pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/4 "2024-04-29T15:06:38Z")

</div>

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:

> **[Babylon.js Playground](https://playground.babylonjs.com/#2AH4YH%23182)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [April 29, 2024, 4:34pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/5 "2024-04-29T16:34:42Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [April 30, 2024, 6:12am UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/6 "2024-04-30T06:12:37Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#2AH4YH%23185)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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

---

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [April 30, 2024, 6:13am UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/7 "2024-04-30T06:13:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [April 30, 2024, 7:31am UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/8 "2024-04-30T07:31:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [April 30, 2024, 7:44am UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/9 "2024-04-30T07:44:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [April 30, 2024, 12:56pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/10 "2024-04-30T12:56:13Z")

</div>

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.

> **[Babylon.js Playground](https://playground.babylonjs.com/#2AH4YH%23187)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [April 30, 2024, 1:36pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/11 "2024-04-30T13:36:19Z")

</div>

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](https://doc.babylonjs.com/setup/starterHTML)

---

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [April 30, 2024, 1:40pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/12 "2024-04-30T13:40:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [April 30, 2024, 1:55pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/13 "2024-04-30T13:55:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [April 30, 2024, 1:58pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/14 "2024-04-30T13:58:53Z")

</div>

```
	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.

---

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [April 30, 2024, 2:00pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/15 "2024-04-30T14:00:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [April 30, 2024, 3:46pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/16 "2024-04-30T15:46:08Z")

</div>

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?

```auto
     //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.

```auto
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](https://doc.babylonjs.com/setup/starterHTML)

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

```auto
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(); } });

```

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [April 30, 2024, 4:31pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/17 "2024-04-30T16:31:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [April 30, 2024, 8:15pm UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/18 "2024-04-30T20:15:01Z")

</div>

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [May 1, 2024, 12:34am UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/19 "2024-05-01T00:34:26Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![Knifepro](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/knifepro/32/39429_2.png) [@Knifepro](https://forum.babylonjs.com/u/Knifepro)\
**Post date:** [May 1, 2024, 8:29am UTC](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143/20 "2024-05-01T08:29:15Z")

</div>

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.

[Next page](https://forum.babylonjs.com/t/some-error-questions-about-webgpu/50143.md?page=2)