Fisheye effect

  • #1, by ke4Thursday, 18. June 2015, 10:27 7 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 7 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 7 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)
    


    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)
    

    Thread Captain

    1534 Posts

  • #4, by afrlmeThursday, 18. June 2015, 17:53 7 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

    7119 Posts

  • #5, by ke4Thursday, 18. June 2015, 17:54 7 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 7 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

    7119 Posts

  • #7, by ke4Thursday, 18. June 2015, 18:34 7 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.
    

    Key Killer

    810 Posts

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

    ... will exclude interfaces, cursors & texts.

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

    Imperator

    7119 Posts

  • #9, by ke4Thursday, 18. June 2015, 18:45 7 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 7 years ago
    I think you've answered your own question! grin

    Imperator

    7119 Posts

  • #11, by ke4Friday, 19. June 2015, 14:32 7 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