SHADER Question (Solved)

  • #1, by joemidSunday, 06. March 2016, 03:28 4 years ago
    Saw this on Shadertoy. Any help as to how to implement into the Shader Toolkit?

    uniform sampler2D texture;
    uniform vec2 resolution;
    uniform vec3 overlayColor;

    void main()
    {
    vec2 uv = gl_FragCoord.xy / resolution.xy;

    if (uv.y > 0.3)// is air - no reflection or effect
    {
    gl_FragColor = texture2D(texture, vec2(uv.x, uv.y));
    }
    else
    {
    // Compute the mirror effect.
    vec4 color = texture2D(texture, vec2(uv.x, 0.6 - uv.y))
    vec4 finalColor = vec4(mix(color.rgb, overlayColor, 0.25), 1.0);
    gl_FragColor = finalColor;
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21


    Thanks!

    Newbie

    87 Posts


  • #2, by joemidSunday, 06. March 2016, 03:29 4 years ago
    Oh, sorry. This is a water reflection. Here is an example link...

    https://www.shadertoy.com/view/Xll3R7

    Newbie

    87 Posts

  • #3, by unrealSunday, 06. March 2016, 16:26 4 years ago
    Sorry, I'm not answering your question but there is a similar shader FX made by SimonS. I made a downloadable demo project for the visionaire community (or just look at the youtube video), hope this help. See the link :

    Newbie

    66 Posts

  • #4, by afrlmeSunday, 06. March 2016, 17:00 4 years ago
    Sorry, I'm not answering your question but there is a similar shader FX made by SimonS. I made a downloadable demo project for the visionaire community (or just look at the youtube video), hope this help. See the link :


    Well he can create the ripple effect using the shader toolkit. There are 4 ripple effects available that you could apply to a scene object. Make sure you add the water image into a scene object. The reflection though you might have to do by adding the reflections directly into the water image itself, either as a static image or as an animation, if the scene changes at all.

    I believe it is possible to create custom shader scripts too, as Simon provided an example of one ages back after he first implemented the shader stuff into the engine. I don't think it's as simple as copy / pasting an existing shader script into it though. You may have to rewrite certain things in the script to get it to work.

    Imperator

    6842 Posts

  • #5, by joemidSunday, 06. March 2016, 21:02 4 years ago
    Thanks Unreal. I am familiar with your demo- love it, BTW!

    Thanks Lee- yeah, I started using Simon's ripple shaders as a placeholder applied to objects.

    As there is no pre-made reflect shader, I had been planning to add a transparent animation for the reflection made in Sqirlz Morph, plus a mirrored character, adjusted, following the current character with a loop.

    But, this became pretty graphically intensive, especially when I tried to add additional characters- I hit a wall and reversed.

    Mucking around in the shader script, however, led me to a link to Shadertoy and then the water reflection script.

    As a layman; reflection seems like a simple proposition for the Shader Toolkit, right? In the roughest sense we are just duplicating the image and flipping it on the y axis.

    Unfortunately, I haven't had any luck implementing it! That may have to do with me not knowing what I'm doing.grin

    Maybe this is impossible with the current vers of the toolkit?

    Thanks again, guys.

    Newbie

    87 Posts

  • #6, by joemidSunday, 06. March 2016, 21:06 4 years ago
    I mean, am I crazy? I think it looks sooo good! With some parallax scroll? It could add such depth to a room.

    Newbie

    87 Posts

  • #7, by SimonSSunday, 06. March 2016, 21:49 4 years ago
    There are some requirements for the shaders. If you don't understand C it might be hard to get through. Try this:
    shader_effects["reflect"] = {shader=basic_fsh..[[

    #define texture iChannel0
    vec3 overlayColor = vec3(.5,1,1);

    void main()
    {
    vec2 uv = texcoord.xy;
    float sepoffset = 0.005*cos(iGlobalTime*3.0);
    if (uv.y > 0.3 + sepoffset)// is air - no reflection or effect
    gl_FragColor = texture2D(texture, vec2(uv.x, uv.y));
    else
    {
    // Compute the mirror effect.
    float xoffset = 0.005*cos(iGlobalTime*3.0+200.0*uv.y);
    float yoffset = ((0.3 - uv.y)/0.3) * 0.05*(1.0+cos(iGlobalTime*3.0+50.0*uv.y));
    vec4 color = texture2D(texture, vec2(uv.x+xoffset , (0.6 - uv.y+ yoffset)));
    //
    vec4 finalColor = vec4(mix(color.rgb, overlayColor, 0.25), 1.0);
    gl_FragColor = color;
    }
    }
    ]]}

    shaderAddEffect("reflect")
    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

    Thread Captain

    1369 Posts

  • #8, by joemidMonday, 07. March 2016, 20:53 4 years ago
    Thanks, Simon! That is perfect!

    Newbie

    87 Posts

  • #9, by afrlmeMonday, 07. March 2016, 22:39 4 years ago
    That actually looks pretty funky. wink

    Imperator

    6842 Posts

Write post