Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Shader resolution-independent/aspect ratio
Started by emanuelfrost Feb 24 2016 11:29 PM

1 reply to this topic
glsl resolution aspect coronatexelsize coronacontentscale uniforms
[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

emanuelfrost

[GLOBAL: userInfoPane.html]
emanuelfrost
  • Observer

  • 1 posts
  • Corona SDK

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



[TOPIC: post.html]
#2

StarCrunch

[GLOBAL: userInfoPane.html]
StarCrunch
  • Contributor

  • 848 posts
  • Corona SDK

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.




[topic_controls]
[/topic_controls]