Fisheye effect

  • #1, by ke4Thursday, 18. June 2015, 10:27 5 years ago
    Hi,

    Is it possible in some way to use shader to achieve fisheye effect on the whole screen? thanks.

    Key Killer

    810 Posts


  • #2, by fulviovThursday, 18. June 2015, 11:44 5 years ago
    You will need to integrate a glsl shader into the shader toolkit, like this one:

    https://github.com/ruby-processing/Example-Sketches/blob/mas...

    Shouldn't be too difficult to do, have a look at how glow and blur are implemented into the toolkit smile

    Forum Fan

    119 Posts

  • #3, by SimonSThursday, 18. June 2015, 17:38 5 years ago
    The shader toolkit is very extensible, I've coded a small test part (include the shader toolkit before running this)

    shader_effects["fisheye"] = {shader=basic_fsh..[[
    uniform float amount;

    void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
    vec2 p = fragCoord.xy / iResolution.x;//normalized coords with some cheat
    //(assume 1:1 prop)
    float prop = iResolution.x / iResolution.y;//screen proroption
    vec2 m = vec2(0.5, 0.5 / prop);//center coords
    vec2 d = p - m;//vector from center to current fragment
    float r = sqrt(dot(d, d)); // distance of pixel from center

    float power = ( 2.0 * 3.141592 / (2.0 * sqrt(dot(m, m))) ) *
    (amount - 0.5);//amount of effect

    float bind;//radius of 1:1 effect
    if (power > 0.0) bind = sqrt(dot(m, m));//stick to corners
    else {if (prop < 1.0) bind = m.x; else bind = m.y;}//stick to borders

    //Weird formulas
    vec2 uv;
    if (power > 0.0)//fisheye
    uv = m + normalize(d) * tan(r * power) * bind / tan( bind * power);
    else if (power < 0.0)//antifisheye
    uv = m + normalize(d) * atan(r * -power * 10.0) * bind / atan(-power * bind * 10.0);
    else uv = p;//no effect for power = 1.0

    vec3 col = texture2D(iChannel0, vec2(uv.x, uv.y * prop)).xyz;//Second part of cheat
    //for round effect, not elliptical
    fragColor = vec4(col, 1.0);
    }

    void main()
    {
    vec4 color;
    mainImage(color, texcoord.xy*iResolution.xy);
    gl_FragColor = color;
    }
    ]]}

    shaderAddEffect("fisheye")
    shaderEffectParam("fisheye", "amount", 0.45)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43


    I've based this on https://www.shadertoy.com/view/4s2GRR. You can change the amount on the botton, with 0.5 being no change and 0.0 maximum fisheye and 1.0 being maximum bulge.

    You can even easily animate that:
    fisheye_amount = 0.5
    bind("fisheye", "amount", field("fisheye_amount"))
    startTween("fisheye_amount", fisheye_amount, 0.44, 1000, easeQuadInOut, true, true)
    1
    2
    3
    4

    Thread Captain

    1351 Posts

  • #4, by afrlmeThursday, 18. June 2015, 17:53 5 years ago
    Interesting & trippy as shit. Only problem is that the object interaction polygons will probably no longer match the scene, due to the scene graphics being stretched or compressed.

    Imperator

    6815 Posts

  • #5, by ke4Thursday, 18. June 2015, 17:54 5 years ago
    Thanks, that's great, i'm gonna try it. :-)
    ..Don't know about the objects, but i'll try it and write back.

    Key Killer

    810 Posts

  • #6, by afrlmeThursday, 18. June 2015, 18:05 5 years ago
    Was my experience when I tried it. It stretches the scene, which means that the object polygons are no longer correctly shaped / aligned to the scene objects. As long as it's only a small value you use then it probably won't be much of a problem.

    Imperator

    6815 Posts

  • #7, by ke4Thursday, 18. June 2015, 18:34 5 years ago
    Aha, i want just weak effect of the fish eye and it seems to work ok.
    I'm building a scene where the character walks over the ledge.
    The problem is that it affets inventory as well, but i think someone wrote on the forum about excluding in the shader once.

    EDIT:
    It was actually you grin

    game.ShaderExclude = eShaderExcludeInterfaces -- excludes text, cursors &; interfaces, or...
    game.ShaderExclude = eShaderExcludeTextsAndCursor -- excludes text &; cursors, or...
    game.ShaderExclude = eShaderExcludeCursor -- excludes cursors.
    1
    2
    3
    4

    Key Killer

    810 Posts

  • #8, by afrlmeThursday, 18. June 2015, 18:42 5 years ago
    game.ShaderExclude = eShaderExcludeInterfaces
    1
    2

    ... will exclude interfaces, cursors & texts.

    * edit: seems you beat me to the punch! grin

    Imperator

    6815 Posts

  • #9, by ke4Thursday, 18. June 2015, 18:45 5 years ago
    But is it possible to exclude the balance animation? I guess i can create it as an interface otherwise.
    And btw the shader is really cool thing razz

    Key Killer

    810 Posts

  • #10, by afrlmeThursday, 18. June 2015, 19:34 5 years ago
    I think you've answered your own question! grin

    Imperator

    6815 Posts

  • #11, by ke4Friday, 19. June 2015, 14:32 5 years ago
    Yeah.. great grin

    This is really strange, is there a reason why the exact same image has different colors? One is from the scene, the second is in the interface.
    It doesn't make sense to me.

    Key Killer

    810 Posts

Write post