# When displaying SheenCloth.gltf in WebGPUEngine, the pattern may be wrong

**URL:** <https://forum.babylonjs.com/t/when-displaying-sheencloth-gltf-in-webgpuengine-the-pattern-may-be-wrong/16160>\
**Category:** Bugs\
**Created:** [November 30, 2020, 4:07pm UTC](https://forum.babylonjs.com/t/when-displaying-sheencloth-gltf-in-webgpuengine-the-pattern-may-be-wrong/16160 "2020-11-30T16:07:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![cx20](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cx20/32/46_2.png) [@cx20](https://forum.babylonjs.com/u/cx20)\
**Post date:** [November 30, 2020, 4:07pm UTC](https://forum.babylonjs.com/t/when-displaying-sheencloth-gltf-in-webgpuengine-the-pattern-may-be-wrong/16160/1 "2020-11-30T16:07:13Z")

</div>

I tried to view [SheenCloth.gltf](https://github.com/KhronosGroup/glTF-Sample-Models/pull/266) using Chrome Canary 89 and Babylon.js v5.0.0 alpha2.  
However, there are times when the displayed pattern is strange.

> **[Babylon.js + WebGPU + glTF Test - JSFiddle - Code Playground](https://jsfiddle.net/cx20/Lapsuc42/)**

correct case:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/ae9f5877c23905331c4a21b7516d1ed591709100.jpeg)

wrong case:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/b/bb72b0bea97fd961d755fe547fcf988645157570.jpeg)

I’ll try it with the same test code, but the results will be different each time the page is reloaded, so timing may be the cause.

---

<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:** [November 30, 2020, 4:33pm UTC](https://forum.babylonjs.com/t/when-displaying-sheencloth-gltf-in-webgpuengine-the-pattern-may-be-wrong/16160/2 "2020-11-30T16:33:37Z")

</div>

Could not repro this after 15+ reload of the page…

---

<div class="post-metadata">

**Author:** ![cx20](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cx20/32/46_2.png) [@cx20](https://forum.babylonjs.com/u/cx20)\
**Post date:** [November 30, 2020, 5:07pm UTC](https://forum.babylonjs.com/t/when-displaying-sheencloth-gltf-in-webgpuengine-the-pattern-may-be-wrong/16160/3 "2020-11-30T17:07:13Z")

</div>

Hmm, maybe it depends on the GPU. It did not reproduce on another desktop PC.  
In the Windows 10 (BootCamp) environment on my MacBook Air, the problem occurred about once every two times.

OK) Desktop PC + Windows 10 + Chrome Canary + GeForce GTX 660  
NG) MacBook Air + Windows 10(BootCamp) + Chrome Canary + Intel UHD Graphics 617

---

<div class="post-metadata">

**Author:** ![cx20](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cx20/32/46_2.png) [@cx20](https://forum.babylonjs.com/u/cx20)\
**Post date:** [December 8, 2020, 11:55am UTC](https://forum.babylonjs.com/t/when-displaying-sheencloth-gltf-in-webgpuengine-the-pattern-may-be-wrong/16160/4 "2020-12-08T11:55:44Z")

</div>

I don’t know if this is the same problem as SheenCloth, but I found a strange pattern in the texture in Babylon.js Playground.  
[https://playground.babylonjs.com/#8MGKWK#25](https://playground.babylonjs.com/#8MGKWK#25)

WebGL2 mode:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/8d26ea99578e098474553661ae0a632d7638bfb9.jpeg)

WebGPU mode:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/d3440083207e927daa510169ca59ff68c8a74f6e.jpeg)

I also tried it in other environments. Since it works on GeForce GTX 660, it seems to be a GPU-dependent problem.

OK) Desktop PC + Windows 10 + Chrome Canary + GeForce GTX 660  
NG) MacBook Air + Windows 10(BootCamp) + Chrome Canary + Intel UHD Graphics 617

---

<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:** [December 8, 2020, 3:27pm UTC](https://forum.babylonjs.com/t/when-displaying-sheencloth-gltf-in-webgpuengine-the-pattern-may-be-wrong/16160/5 "2020-12-08T15:27:31Z")

</div>

This pattern is definitely strange. The PG does work for me on Windows.

The problem with WebGPU is that it is still not production ready yet, Chrome does not fully support it nor Babylon (the spec is not completed yet neither), so when there are problems it can be difficult to know the root cause of them…

---

<div class="post-metadata">

**Author:** ![cx20](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cx20/32/46_2.png) [@cx20](https://forum.babylonjs.com/u/cx20)\
**Post date:** [December 8, 2020, 4:13pm UTC](https://forum.babylonjs.com/t/when-displaying-sheencloth-gltf-in-webgpuengine-the-pattern-may-be-wrong/16160/6 "2020-12-08T16:13:55Z")

</div>

Thanks for the confirmation.

I know that WebGPU specification development is a long way off. However, I can’t resist trying out new features, and Babylon.js is a progressive effort and I am eager to try out many of them.

BTW, I just wrote an article about using WebGPU in Babylon.js. Sorry, it’s in Japanese.

> **[Babylon.js で WebGPU を試してみるテスト - Qiita](https://qiita.com/cx20/items/e46bd22f0d9e47e81df1)**
>
> この記事はWeb グラフィックス Advent Calendar 2020の6日目の記事です。
> 
> 
> はじめに
> 
> この記事では Babylon.js の次バージョンとして開発中の v5.0.0 alpha を用いて、WebGPU を試し...

I hope it will be of interest to many people.

---

<div class="post-metadata">

**Author:** ![cx20](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cx20/32/46_2.png) [@cx20](https://forum.babylonjs.com/u/cx20)\
**Post date:** [January 4, 2021, 12:33pm UTC](https://forum.babylonjs.com/t/when-displaying-sheencloth-gltf-in-webgpuengine-the-pattern-may-be-wrong/16160/7 "2021-01-04T12:33:12Z")

</div>

For reference, this issue seems to occur in samples other than Babylon.js.

> **[Web Graphics API Test](https://toji.github.io/webgpu-clustered-shading/)**

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/a/a8d931b09b59d2a426518753966b2d08e4b8bb70.jpeg)

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/e/ec948f17215da5e97acea71f128f045a24e6aa97.jpeg)

> <https://twitter.com/Tojiro/status/1345766136470597633>
