Fisheye effect

  • #1, de ke4Thursday, 18. June 2015, 10:27 ver 11 years ago
    Hi,

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

    Asesino de Claves

    810 Posts


  • #2, de fulviovThursday, 18. June 2015, 11:44 ver 11 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

    Fan del Foro

    119 Posts

  • #3, de SimonSThursday, 18. June 2015, 17:38 ver 11 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)
    

    Capitán de los Debates

    1609 Posts

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

    Emperador

    7289 Posts

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

    Asesino de Claves

    810 Posts

  • #6, de afrlmeThursday, 18. June 2015, 18:05 ver 11 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.

    Emperador

    7289 Posts

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

    Asesino de Claves

    810 Posts

  • #8, de afrlmeThursday, 18. June 2015, 18:42 ver 11 years ago
    game.ShaderExclude = eShaderExcludeInterfaces
    

    ... will exclude interfaces, cursors & texts.

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

    Emperador

    7289 Posts

  • #9, de ke4Thursday, 18. June 2015, 18:45 ver 11 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

    Asesino de Claves

    810 Posts

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

    Emperador

    7289 Posts

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

    Asesino de Claves

    810 Posts