Normalizing coordinates in shaders

[schiller-manuel]

Can you please explain why and how coordinates in shaders must be normalized?

I looked at the example here:

https://shopify.github.io/react-native-skia/docs/shaders/overview#simple-shader

const source = Skia.RuntimeEffect.Make(`
vec4 main(vec2 pos) {
  vec2 normalized = pos/vec2(256);
  return vec4(normalized.x, normalized.y, 0.5, 1);
}`)!;

It produces the following output:

Without normalizing, it produces:

Where does the 256 come from?

If I want to fully fill the screen, should pos.x be divided by screen width and pos.y be divided by screen height?
This produces a uniformly distributed gradient:

If my canvas is not fullscreen, where do I get its dimensions from for normalization?

[chrfalch]

Great question, @schiller-manuel - will get back to you soon with a quick example and some pointers!

[wcandillon]

256 is the width and height of the documentation examples. when doing pos/256 is equivalent to pos/vec2(width, height), the goal behind to get a value that goes from 0 to 1

[chrfalch]

Another way to solve this which is common when writing shader code is to provide the resolution x/y as uniforms to the shader.

[schiller-manuel]

OK, how can I get the canvas size in case it's not fullscreen?
e.g. if layout is calculated using flexbox, the size is not explicitly given.

[schiller-manuel]

There once were intrinsics in skia that provided access to width and height:
google/skia@d3a1df8
Unfortunately, those were ultimately removed: https://skia-review.googlesource.com/c/skia/+/394898/2

I tried using the onLayout event to measure the Canvas, but it is never called.
Do you have any other ideas how I can access the Canvas dimensions?

[wcandillon]

Haha thks for pointing us to these commits :))

We do have a useCanvas() hooks that will provide you the width and height.
This is indeed a very common use case.
This needs to be slightly cleaned up and documented, will do it now.

[wcandillon]

I just had a look and it looks like this will need further discussion with @chrfalch so we agree on the final form of this and document it.

[chrfalch]

Sounds like a plan!