# WebGPU + es6 error: Unable to compile effect: #define SHADER\_NAME fragment:clearQuad

**URL:** <https://forum.babylonjs.com/t/webgpu-es6-error-unable-to-compile-effect-define-shader-name-fragment-clearquad/33523>\
**Category:** Bugs\
**Tags:** webgpu\
**Created:** [August 30, 2022, 12:11pm UTC](https://forum.babylonjs.com/t/webgpu-es6-error-unable-to-compile-effect-define-shader-name-fragment-clearquad/33523 "2022-08-30T12:11:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BitOfGold](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bitofgold/32/2104_2.png) [@BitOfGold](https://forum.babylonjs.com/u/BitOfGold)\
**Post date:** [August 30, 2022, 12:11pm UTC](https://forum.babylonjs.com/t/webgpu-es6-error-unable-to-compile-effect-define-shader-name-fragment-clearquad/33523/1 "2022-08-30T12:11:04Z")

</div>

What’s up Babyloners (Babylonians sounds better maybe?), long time no see!

Please see the following very simple demo:  
[https://stackblitz.com/edit/vitejs-vite-bswhg9?file=index.html,main.js](https://stackblitz.com/edit/vitejs-vite-bswhg9?file=index.html,main.js)

It’s just importing babylon es6, and initializing WebGPU.  
It throws an error.

if you set WEBGPU = false, you can see that it works with the WebGL engine.

Do I need to importing something else, or is this a bug?  
Please send help!  
Thank you and have a nice day!

---

<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:** [August 30, 2022, 12:35pm UTC](https://forum.babylonjs.com/t/webgpu-es6-error-unable-to-compile-effect-define-shader-name-fragment-clearquad/33523/2 "2022-08-30T12:35:39Z")

</div>

You are missing a few imports to make it work. We have an open issue to take care of that, but for now you will need to import a few files in order for that to work:

import ‘@babylonjs/core/Engines/WebGPU/Extensions/engine.uniformBuffer’;

---

<div class="post-metadata">

**Author:** ![BitOfGold](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bitofgold/32/2104_2.png) [@BitOfGold](https://forum.babylonjs.com/u/BitOfGold)\
**Post date:** [August 30, 2022, 12:50pm UTC](https://forum.babylonjs.com/t/webgpu-es6-error-unable-to-compile-effect-define-shader-name-fragment-clearquad/33523/3 "2022-08-30T12:50:57Z")

</div>

Thank you!

I ended up including

`import "@babylonjs/core/Engines/WebGPU/Extensions/";`  
in my program, because of more errors.

It kind of works now, but throws a soup of warnings like below.  
(I hope theese will be solved in the future.)

```auto
chunk-LGXWSSHW.js?v=3b7c0c51:110 BJS - [14:43:18]: Float texture filtering is not supported. Mipmap generation and sampling mode are forced to false and TEXTURE_NEAREST_SAMPLINGMODE, respectively.

14:43:18.863 twgsl.js:4 'textureSampleCompare' must only be called from uniform control flow
14:43:18.863 twgsl.js:4 
14:43:18.863 twgsl.js:4 control flow depends on non-uniform value
14:43:18.863 twgsl.js:4 
14:43:18.863 twgsl.js:4 reading from module-scope private variable 'index0' may result in a non-uniform value
14:43:18.863 twgsl.js:4 
14:43:19.456 twgsl.js:4 'textureSampleCompare' must only be called from uniform control flow
14:43:19.456 twgsl.js:4 
14:43:19.456 twgsl.js:4 control flow depends on non-uniform value
14:43:19.456 twgsl.js:4 
14:43:19.457 twgsl.js:4 reading from module-scope private variable 'index0' may result in a non-uniform value
14:43:19.457 twgsl.js:4 
14:43:19.473 test.hu/:1 1 warning(s) generated while compiling the shader:
:1398:26 warning: 'textureSampleCompare' must only be called from uniform control flow
      let x_1601 : f32 = textureSampleCompare(shadowSampler0Texture, shadowSampler0Sampler, x_1599.xy, i32(round(x_1599.z)), x_1599.w);
                         ^^^^^^^^^^^^^^^^^^^^

:1341:5 note: control flow depends on non-uniform value
    if (((x_1463 < 3i) & (x_1465 < 1.0f))) {
    ^^

:1332:24 note: reading from module-scope private variable 'index0' may result in a non-uniform value
    let x_1452 : i32 = index0;
                       ^^^^^^

14:43:19.801 test.hu/:1 1 warning(s) generated while compiling the shader:
:1398:26 warning: 'textureSampleCompare' must only be called from uniform control flow
      let x_1601 : f32 = textureSampleCompare(shadowSampler0Texture, shadowSampler0Sampler, x_1599.xy, i32(round(x_1599.z)), x_1599.w);
                         ^^^^^^^^^^^^^^^^^^^^

:1341:5 note: control flow depends on non-uniform value
    if (((x_1463 < 3i) & (x_1465 < 1.0f))) {
    ^^

:1332:24 note: reading from module-scope private variable 'index0' may result in a non-uniform value
    let x_1452 : i32 = index0;
                       ^^^^^^

```

---

<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:** [August 30, 2022, 12:52pm UTC](https://forum.babylonjs.com/t/webgpu-es6-error-unable-to-compile-effect-define-shader-name-fragment-clearquad/33523/4 "2022-08-30T12:52:15Z")

</div>

cc @Evgeni_Popov

Does it throw the same if you use it in the playground?

---

<div class="post-metadata">

**Author:** ![BitOfGold](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bitofgold/32/2104_2.png) [@BitOfGold](https://forum.babylonjs.com/u/BitOfGold)\
**Post date:** [August 30, 2022, 1:25pm UTC](https://forum.babylonjs.com/t/webgpu-es6-error-unable-to-compile-effect-define-shader-name-fragment-clearquad/33523/5 "2022-08-30T13:25:47Z")

</div>

I tried to include “everything” my program uses, and yes, the warnings are there when I add CascadesShadowGenerator. Also, the environment texture is NEAREST sampled. (Which is somewhere in the warnings too)

[https://stackblitz.com/edit/vitejs-vite-bswhg9?file=index.html,main.js](https://stackblitz.com/edit/vitejs-vite-bswhg9?file=index.html,main.js)

---

<div class="post-metadata">

**Author:** ![BitOfGold](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bitofgold/32/2104_2.png) [@BitOfGold](https://forum.babylonjs.com/u/BitOfGold)\
**Post date:** [August 30, 2022, 1:26pm UTC](https://forum.babylonjs.com/t/webgpu-es6-error-unable-to-compile-effect-define-shader-name-fragment-clearquad/33523/6 "2022-08-30T13:26:14Z")

</div>

~~In the babylon playground, there are no warnings.~~  
In the babylon playground, the warnings are the same, as the texture sampling. It has nothing to do with es6 then…

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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 30, 2022, 3:38pm UTC](https://forum.babylonjs.com/t/webgpu-es6-error-unable-to-compile-effect-define-shader-name-fragment-clearquad/33523/7 "2022-08-30T15:38:18Z")

</div>

The warning are related to the latest spec changes and @Evgeni_Popov will address those soon-ish 🙂

They should not break in subsequent Chrome version as they decided to stay back compat until release IIRC.