# Will direct/standalone WGSL support be included

**URL:** <https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833>\
**Category:** Questions\
**Tags:** materials, shaders\
**Created:** [February 14, 2026, 12:23pm UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833 "2026-02-14T12:23:17Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![o.domokos](https://avatars.discourse-cdn.com/v4/letter/o/9f8e36/32.png) [@o.domokos](https://discourse.threejs.org/u/o.domokos)\
**Post date:** [February 14, 2026, 12:23pm UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833/1 "2026-02-14T12:23:17Z")

</div>

Without TSL.

Thank you in advance.

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [February 16, 2026, 3:47am UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833/2 "2026-02-16T03:47:31Z")

</div>

I haven’t worked with TSL at all, but from reading the documentation, it seems like it is.

`NodeMaterial` has `vertexNode` and `fragmentNode` properties. It seems that you can write the entire shader within them, with some caveats (you still need to initialize and include the uniform nodes for example).

This, to me seems the same as:

```javascript
const m = new ShaderMaterial()
m.vertexShader = ‘…’
m.fragmentShader = ‘…’

```

Basically its

```javascript
const m = new NodeMaterial()
m.vertexNode = WgslFn('...')
m.fragmentNode = WgslFn('...')

```

With some gotchas on how you include the varyings and the uniforms (still TSL).

Again, i have never used TSL, these are just my assumptions. They could be completely and uterly wrong, because it does seem that no one has ever said that even something _similar_ to `ShaderMaterial` will exist in the future versions of three. But judging from this documentation, i don’t think i can be terribly wrong here 🙂

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [February 16, 2026, 11:54am UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833/3 "2026-02-16T11:54:19Z")

</div>

Yes that’s how it’s done. Sadly it doesn’t really work “without TSL”  
It’s also the most unpractical hybrid solution since you need both TSL features on top of your mandatory WGSL declaration to make it work smoothly. Maybe still useful as a starting point to learn pure WGSL?

very basic attempt using `fragmentNode` and passing some values  
[https://codepen.io/William-J-Jones/pen/raLgBqN?editors=1111](https://codepen.io/William-J-Jones/pen/raLgBqN?editors=1111)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [February 16, 2026, 12:27pm UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833/4 "2026-02-16T12:27:11Z")

</div>

Maybe some imports from TSL are not needed (at least in this case)?

```javascript
const resolution = new THREE.Vector2(innerWidth, innerHeight); // no vec2
const mat = new THREE.MeshBasicNodeMaterial();
mat.fragmentNode = customFragment(screenCoord, resolution); // no vec4

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/3/e3f52f32710af3f5715e340e73a28100a819d00f.png)

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [February 16, 2026, 1:16pm UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833/5 "2026-02-16T13:16:54Z")

</div>

fixed 😅 it also confirm you can mix the two  
probably only `WgslFn` is mandatory, but i’m too lazy to look for a raw version of `screenCoordinate`

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [February 16, 2026, 4:22pm UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833/6 "2026-02-16T16:22:51Z")

</div>

Whats custom fragment?

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [February 16, 2026, 4:45pm UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833/7 "2026-02-16T16:45:28Z")

</div>

This is the name of the WGSL function/node. It’s not a class, just a regular call, rename it as you wish.

```javascript
const customFragment = wgslFn(`
    fn customFragment(screenCoord: vec2<f32>, resolution: vec2<f32>) -> vec3<f32> {

```

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [February 17, 2026, 5:29am UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833/8 "2026-02-17T05:29:09Z")

</div>

I wonder why this isn’t being advertised.

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [February 18, 2026, 10:02am UTC](https://discourse.threejs.org/t/will-direct-standalone-wgsl-support-be-included/89833/9 "2026-02-18T10:02:50Z")

</div>

You can use WGSL in Three.js very well without TSL. It’s not completely native, but in my view that’s not a disadvantage. I have a smaller repo here that shows how I use WGSL code.

> **[GitHub - Spiri0/Threejs-WebGPU-Voxelizer: A small Threejs WebGPU repository that shows how...](https://github.com/Spiri0/Threejs-WebGPU-Voxelizer)**
>
> A small Threejs WebGPU repository that shows how to voxel meshes