TSL fragCoord pendant

Questions
1

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?

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

Thanks for helping out!

2

have you tried pasting the line here… three.js - webgpu - tsl transpiler

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

1 Like
3

Cool tip (transpiler) many many thanks!

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

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()?

4

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

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

…somewhat like that?

6

I would do like this:

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 :thinking:
Thus, you get centered screen UV.

1 Like
7

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

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

…telling me

ReferenceError: div is not defined

8

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

9

did an typo!!! Sorry!

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

10

Fixed it by adding negate()

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

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

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

1 Like