Shader resolution-independent/aspect ratio

Solar2D Custom Shader Effects
#1

Problem background

(Described in a tutorial here: https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson3)

Heres is a circle displayed with a fragment shader.

QpLnu.png

Because of x,y coordinates with the range 0-1, the circle becomes an oval when the display object isnt a square.

In this case when width > height you can multiply the texCoord.x with some aspect ratio value (resolution.x/resolution.y) to get a round circle as a result:

YIYFv.png

Corona

In corona we have the provided uniforms CoronaContentScale and CoronaTexelSize. Initially I thought those uniforms could be used to calculate the aspect and or resolution but I just cant get it right.

Right now I ended up sending this information with the vertex userdata occupying 1/4 values since the uniform userdata is a forthcoming feature.

Please help me understand and solve this problem. Thank you

#2

CoronaTexelSize , as its name suggests, will tell you only about the current texture (or the first one, in the case of composite effects), which is probably a small all-white rectangle for stock display objects like circles.

If you’re just getting started with this, one way to go about it would be hard-wire any constants into the shader, so for instance:

local Constants = ([[P\_UV float scale = %f;]]):format(display.contentWidth / display.contentHeight) kernel.fragment = Constants .. [[// REST OF YOUR SHADER HERE, use 'scale' somehow]]

If you don’t need much resolution you could also sneak that scale factor through a color channel (setFillColor() and then use CoronaColorScale() to recover it), though obviously you’d have to take more care if you still want some color!

A few other solutions are possible, but are probably a bit too involved at this stage.

#3

CoronaTexelSize , as its name suggests, will tell you only about the current texture (or the first one, in the case of composite effects), which is probably a small all-white rectangle for stock display objects like circles.

If you’re just getting started with this, one way to go about it would be hard-wire any constants into the shader, so for instance:

local Constants = ([[P\_UV float scale = %f;]]):format(display.contentWidth / display.contentHeight) kernel.fragment = Constants .. [[// REST OF YOUR SHADER HERE, use 'scale' somehow]]

If you don’t need much resolution you could also sneak that scale factor through a color channel (setFillColor() and then use CoronaColorScale() to recover it), though obviously you’d have to take more care if you still want some color!

A few other solutions are possible, but are probably a bit too involved at this stage.