# PBRCustomMaterial shader fails to compile only when using WebGPU

**URL:** <https://forum.babylonjs.com/t/pbrcustommaterial-shader-fails-to-compile-only-when-using-webgpu/42136>\
**Category:** Questions\
**Created:** [July 4, 2023, 10:29am UTC](https://forum.babylonjs.com/t/pbrcustommaterial-shader-fails-to-compile-only-when-using-webgpu/42136 "2023-07-04T10:29:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\
**Post date:** [July 4, 2023, 10:29am UTC](https://forum.babylonjs.com/t/pbrcustommaterial-shader-fails-to-compile-only-when-using-webgpu/42136/1 "2023-07-04T10:29:06Z")

</div>

Hi team,

In need of a PBR splatmap/terrain material, i found this one,

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

made by @Raggar i believe.  
It works in webgl1 & 2, but fails to compile in webgpu.

Errors are very generic.

> Unable to compile effect:  
> …shader code block  
> Error: GLSL compilation failed  
> Trying next fallback.  
> Unable to compile effect:  
> …shader code block

Any ideas?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 4, 2023, 10:48am UTC](https://forum.babylonjs.com/t/pbrcustommaterial-shader-fails-to-compile-only-when-using-webgpu/42136/2 "2023-07-04T10:48:26Z")

</div>

You can’t pass samplers to functions in WebGPU (when converting glsl to wgsl). A simple way to deal with it is to tag a function with `#define inline` to instruct Babylon to inline the function:

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

---

<div class="post-metadata">

**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\
**Post date:** [July 4, 2023, 11:59am UTC](https://forum.babylonjs.com/t/pbrcustommaterial-shader-fails-to-compile-only-when-using-webgpu/42136/3 "2023-07-04T11:59:19Z")

</div>

Thanks! this fixes the compilation errors, but the results are now different 🙁

 ![webgl2_vs_webgpu_result](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/a/fab5350253f9e555c4b781142d4071a4550c30c4.jpeg)

I was cleaning up a bit in the code earlier.

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [July 4, 2023, 12:56pm UTC](https://forum.babylonjs.com/t/pbrcustommaterial-shader-fails-to-compile-only-when-using-webgpu/42136/4 "2023-07-04T12:56:08Z")

</div>

This is because the inlining process isn’t foolproof, it’s string-based and quite simple.

In this case, there’s a collision with variable names after inlining: there’s a `uv1` variable (as well as `uv2`/`uv3`) declared in the `main` function and a `uv1` variable (`uv2`/`uv3`) in the `col` function.

To solve the problem, you can rename `uv1`/`uv2`/`uv3` in the `col` function:

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

---

<div class="post-metadata">

**Author:** ![aWeirdo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aweirdo/32/52_2.png) [@aWeirdo](https://forum.babylonjs.com/u/aWeirdo)\
**Post date:** [July 4, 2023, 1:11pm UTC](https://forum.babylonjs.com/t/pbrcustommaterial-shader-fails-to-compile-only-when-using-webgpu/42136/5 "2023-07-04T13:11:51Z")

</div>

Brilliant, thanks so much!

Shaders still make my mind hurt 😂

Here’s the so-far cleaned up version for anyone interested in the future.  
I simplified it, made it static (4x4) 16 texture support with a (2x2) 4-in-1 splatMap.

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