# Controlling WebGPU blending

**URL:** <https://discourse.threejs.org/t/controlling-webgpu-blending/80488>\
**Category:** Questions\
**Tags:** webgpu, tsl\
**Created:** [April 1, 2025, 4:45am UTC](https://discourse.threejs.org/t/controlling-webgpu-blending/80488 "2025-04-01T04:45:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![eulertour](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eulertour/32/15431_2.png) [@eulertour](https://discourse.threejs.org/u/eulertour)\
**Post date:** [April 1, 2025, 4:45am UTC](https://discourse.threejs.org/t/controlling-webgpu-blending/80488/1 "2025-04-01T04:45:45Z")

</div>

I’m porting some shaders from glsl to tsl but don’t know how to make materials fade to the color behind them rather than fade to white which seems to be the default.  
Additionally, when I set the opacity on a red color to 0 it seems to suddenly switch to a turquoise color.

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/L9hyqvnp/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 1, 2025, 8:16am UTC](https://discourse.threejs.org/t/controlling-webgpu-blending/80488/2 "2025-04-01T08:16:18Z")

</div>

`colorNode` expects a `vec3`. Try it with `opacityNode`:

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/gao1m0us/1/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

---

<div class="post-metadata">

**Author:** ![eulertour](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eulertour/32/15431_2.png) [@eulertour](https://discourse.threejs.org/u/eulertour)\
**Post date:** [April 1, 2025, 2:48pm UTC](https://discourse.threejs.org/t/controlling-webgpu-blending/80488/3 "2025-04-01T14:48:39Z")

</div>

I didn’t use `colorNode` in the example because the shaders I’m porting use signed distance fields which require discarding fragments according to some equation. Is there any way to get the blending from `colorNode` with the flexibility from `fragmentNode`?

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/nLv6780u/)**
>
> JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

Also, I haven’t been able to find a good resource on how to control the node graph for these shaders, but if there’s a way I can keep most of the default shader logic for `MeshBasicNodeMaterial` and insert a node that handles the discarding according to a signed distance field, that would be even better.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 1, 2025, 5:14pm UTC](https://discourse.threejs.org/t/controlling-webgpu-blending/80488/4 "2025-04-01T17:14:52Z")

</div>

> [@eulertour](#):
>
> Is there any way to get the blending from `colorNode` with the flexibility from `fragmentNode`?

Sorry, I’ve missed that you used `fragmentNode`. Then maybe like so? [three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/Lgdbn8wy/1/)

---

<div class="post-metadata">

**Author:** ![eulertour](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eulertour/32/15431_2.png) [@eulertour](https://discourse.threejs.org/u/eulertour)\
**Post date:** [April 2, 2025, 6:11am UTC](https://discourse.threejs.org/t/controlling-webgpu-blending/80488/5 "2025-04-02T06:11:48Z")

</div>

Thanks, that solves it. If there is a simple way to do it by modeling the sdf as a node let me know.