# Can I use the TintWASM library in the Babylon.js repository?

**URL:** <https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673>\
**Category:** Questions\
**Tags:** webgpu\
**Created:** [September 8, 2021, 2:44pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673 "2021-09-08T14:44:44Z")\
**Posts on this page:** 11\
**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:** [September 8, 2021, 2:44pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/1 "2021-09-08T14:44:44Z")

</div>

I noticed that a library called `TintWASM` has been placed in the Babylon.js repository.

> **[Babylon.js/dist/preview release/twgsl at master · BabylonJS/Babylon.js](https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview%20release/twgsl)**
>
> master/dist/preview%20release/twgsl

This seems to convert `SPIR-V` to `WGSL`.

> <https://github.com/BabylonJS/Babylon.js/blob/master/src/Engines/WebGPU/webgpuTextureHelper.ts#L198-L204>

I have some example code of WebGPU using GLSL, and I would like to convert it to WGSL using this library.

> **[webgpu-test/examples/webgpu at master · cx20/webgpu-test](https://github.com/cx20/webgpu-test/tree/master/examples/webgpu)**
>
> master/examples/webgpu

Can I use this library in my own projects?

---

<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:** [September 8, 2021, 3:00pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/2 "2021-09-08T15:00:03Z")

</div>

It will cost you a lot 😉

Just kidding obviously. Feel free to reuse and abuse it in your own projects !!! You will also need the glslang lib to convert first from glsl to SPIRV.

We are at the moment also evaluating a move to Naga in order to improve our bundle size.

cc @syntheticmagus

---

<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:** [September 8, 2021, 3:17pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/3 "2021-09-08T15:17:07Z")

</div>

Thank you! I’ve incorporated it into the triangle example to try it out, and it’s working in `Google Chrome 94 beta`, so perhaps the conversion is working.

[https://cx20.github.io/webgpu-test/examples/webgpu/triangle/index.html](https://cx20.github.io/webgpu-test/examples/webgpu/triangle/index.html)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/6/d6319b8c6ed6e7266a5f2c1143915a47100e96e5.png)

I don’t know if I’m using it correctly, but I tried using it like `glslang` and it worked.

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [September 8, 2021, 4:52pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/4 "2021-09-08T16:52:43Z")

</div>

Maybe you will find this helpful

> **[GitHub - pjoe/wasm-shaders: Created with CodeSandbox](https://github.com/pjoe/wasm-shaders)**
>
> Created with CodeSandbox. Contribute to pjoe/wasm-shaders development by creating an account on GitHub.

---

<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:** [September 21, 2021, 11:14am UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/5 "2021-09-21T11:14:22Z")

</div>

I made a simple tool to convert from GLSL to WGSL using TintWASM.  
[https://jsfiddle.net/cx20/vmkaqw2b/](https://jsfiddle.net/cx20/vmkaqw2b/)  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/0/b01f1c4e36535cd7baf4b04c837490d80ffc47c6.png)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [September 21, 2021, 4:39pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/6 "2021-09-21T16:39:04Z")

</div>

Woot! is this the same that you used @Evgeni_Popov?

---

<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:** [September 21, 2021, 4:44pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/7 "2021-09-21T16:44:51Z")

</div>

Yes, @cx20 is using our TWGSL module created by @syntheticmagus.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [September 21, 2021, 4:48pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/8 "2021-09-21T16:48:00Z")

</div>

lovely!

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [November 2, 2021, 4:14pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/9 "2021-11-02T16:14:50Z")

</div>

@cx20 the problem you’re probably having (and I am also having currently) is that you have to convert glsl100 and glsl300 to glsl400 or spirv before running it through naga’s glsl to wgsl. The easiest way to do that is to transform the glsl to spirv using naga or glslang, like sebavan mentioned, then do a second pass using naga again to go from spirv to wgsl. BUT see my ping to syntheticmagus below, there is maybe even a better tool.

@Evgeni_Popov  
@syntheticmagus  
I was working on a cli yesterday and found something very nice, especially for the babylon shaders.  
.[GitHub - scoopr/naga-include-poc](https://github.com/scoopr/naga-include-poc)

you can use includes and mix glsl and wgsl  
ex1:

```auto
//include:example-util.wgsl
float sqr(float a) {
    return mul(a,a);
}

```

or  
ex2

```auto
//include:example-util.glsl
//include:example-types.glsl
//include:example-types.wgsl
//include:example-widget.glsl

struct WidgetThing {
    widget: Widget;
    color: vec4<f32>;
};

[[block]]
struct Input1 {
    quux: Quux;
    xyzzy: Xyzzy;
};

[[group(0), binding(0)]]
var<uniform> input1: Input1;

struct VertexOutput {
    [[builtin(position)]] position: vec4<f32>;
};

[[stage(vertex)]]
fn example_vertex_entrypoint() -> VertexOutput {

    let sz = sqr(2.0);
    let widget_thing = WidgetThing(make_widget(sz), vec4<f32>(0.0, 0.0, 0.0, 1.0));

    return widget_thing.widget.pos;    
}

```

Curious if you guys think the cross-syntax includes would be useful or not

---

<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 2, 2021, 4:41pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/10 "2021-11-02T16:41:50Z")

</div>

We have evaluated Naga as a replacement for GLSLang+TintWASM but unfortunately decided not to use it for two/three reasons:

- it’s the work of a single person and we don’t know how the codebase will be maintained in the future (what if that person goes away?)
- we fear the code could be a bit fragile because the path GLSL=\>WGSL is not used by the browser. On the contrary, Tint is also used by the browser for the SpirV to WGSL path (which assures us that this path will be up to date and maintained ~forever).
- (less important than the two reasons above because it will eventually be fixed, though we don’t know when) Half of the validation tests (~15/30) we tested with Naga failed because of some yet unsupported features

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [November 2, 2021, 6:12pm UTC](https://forum.babylonjs.com/t/can-i-use-the-tintwasm-library-in-the-babylon-js-repository/23673/11 "2021-11-02T18:12:30Z")

</div>

All good reasons, plus little benefit of switching to naga for the same capabilities and only size. Didn’t know that u guys had made a final decision on tint vs naga. I have no reason to prefer naga vs anything else, its just i can actually make rust/cargo build things, whereas cpp, im probably batting .003 and zig breaks shit every release (still hopeful on that front though)
