# TSL fragCoord pendant

**URL:** <https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782>\
**Category:** Questions\
**Created:** [December 4, 2024, 11:29am UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782 "2024-12-04T11:29:05Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [December 4, 2024, 11:29am UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/1 "2024-12-04T11:29:05Z")

</div>

Hi,

what´s the pendant to “fragCoord” in TSL. uv()?  
How would I port this line of code to make have 1:1 from glsl to tsl?

```javascript
vec2 p = (-resolution.xy+2.0*gl_FragCoord.xy) / resolution.y;

```

Thanks for helping out!

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [December 4, 2024, 12:07pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/2 "2024-12-04T12:07:49Z")

</div>

> [@blackInk](#):
>
> How would I port this line of code to make have 1:1 from glsl to tsl?

have you tried pasting the line here… [three.js - webgpu - tsl transpiler](https://threejs.org/examples/webgpu_tsl_transpiler)

```javascript
import { screenCoordinate, vec3, mul, vec2 } from 'three/tsl';

const gl_FragCoord = vec3( screenCoordinate.x, screenCoordinate.y.oneMinus(), screenCoordinate.z ).toVar();
const p = vec2( resolution.xy.negate().add( mul( 2.0, gl_FragCoord.xy ) ).div( resolution.y ) ).toVar();

```

you can validate TSL outputs here too… [three.js webgpu - tsl editor](https://threejs.org/examples/webgpu_tsl_editor)

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [December 4, 2024, 12:28pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/3 "2024-12-04T12:28:29Z")

</div>

> [@Lawrence3DPK](#):
>
> ```javascript
> const gl_FragCoord = vec3( screenCoordinate.x, screenCoordinate.y.oneMinus(), screenCoordinate.z ).toVar();
> const p = vec2( resolution.xy.negate().add( mul( 2.0, gl_FragCoord.xy ) ).div( resolution.y ) ).toVar();
> 
> ```

Cool tip (transpiler) many many thanks!

In the code you provided I get an error with negate()

```javascript
const resolution = vec2(resx,resy).toVar(); //resx & resy are uniforms

const p = vec2( resolution.xy.negate().add( mul( 2.0, gl_FragCoord.xy ) ).div( resolution.y ) ).toVar();

```

…throws errors pointing to negate()?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 4, 2024, 12:29pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/4 "2024-12-04T12:29:48Z")

</div>

If you want to work in screen space uv, there is a specific node `screenUV` 🤔

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [December 4, 2024, 12:53pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/5 "2024-12-04T12:53:30Z")

</div>

```javascript
const p_ = vec2(resx, resy).negate().add(float(2.0)).mul(vec2(screenUV.x, screenUV.y)).div(resy).toVar();

```

…somewhat like that?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 4, 2024, 1:01pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/6 "2024-12-04T13:01:24Z")

</div>

I would do like this:

```javascript
import {screenUV, screenSize, mul, div} from 'three/tsl';
...
let uv = screenUV.sub(0.5).mul(vec2(div(screenSize.x, screenSixe.y), 1.)).mul(2.);

```

That’s all 🤔  
Thus, you get centered screen UV.

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [December 4, 2024, 1:11pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/7 "2024-12-04T13:11:39Z")

</div>

Thanks @prisoner849 - in your version console throws and error…

```javascript
const uv = screenUV.sub(0.5).mul(vec2(div(screenSize.x, screenSize.y), 1.)).mul(2.).toVar();

```

…telling me

> ReferenceError: div is not defined

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 4, 2024, 1:14pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/8 "2024-12-04T13:14:41Z")

</div>

> [@blackInk](#):
>
> div is not defined

Did you import it?  
If yes, then it’s hard to say what’s wrong without a working example, that demonstrates the issue.

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [December 4, 2024, 1:19pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/9 "2024-12-04T13:19:45Z")

</div>

did an typo!!! Sorry!

One thing, after that it all seems to work, except screen seems to be upside down…

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [December 4, 2024, 1:22pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/10 "2024-12-04T13:22:51Z")

</div>

Fixed it by adding negate()

```javascript
const uv = screenUV.sub(0.5).mul(vec2(div(screenSize.x, screenSize.y), float(1.).negate())).mul(2.).toVar();

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 4, 2024, 1:24pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/11 "2024-12-04T13:24:15Z")

</div>

Feel free to alternate UV at your will.  
I did it this way:

```javascript
let aspect = vec2(div(screenSize.x, screenSize.y), 1);
let newUV = vec2(screenUV.x, screenUV.y.oneMinus()).sub(0.5).mul(aspect).mul(2);

```

Don’t forget to import `oneMinus`

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [February 14, 2025, 2:16pm UTC](https://discourse.threejs.org/t/tsl-fragcoord-pendant/74782/12 "2025-02-14T14:16:40Z")

</div>

> [@prisoner849](#):
>
> ```javascript
> let aspect = vec2(div(screenSize.x, screenSize.y), 1);
> let newUV = vec2(screenUV.x, screenUV.y.oneMinus()).sub(0.5).mul(aspect).mul(2);
> 
> ```

…and how would you translate

```javascript
void cRay(vec2 p, vec2 r, out vec3 ro, out vec3 rd)
{
	vec2 q = (p + p - r) * .5/r.y; // signed aspect-correct uv

}
cRay(fragCoord, iResolution.xy, ro, rd);

```

to TSL? @prisoner849