Heat Haze Shader

  • #1, by ke4Saturday, 04. November 2017, 15:54 7 years ago
    Hi,

    can the current shader achieve something as heat haze effect? Maybe something like this but rather as a wave.
    https://www.youtube.com/watch?v=Qghhbkk1HqY

    It is possible to add custom shader effects, right?

    Key Killer

    810 Posts


  • #2, by caligarimarteSaturday, 04. November 2017, 16:44 7 years ago
    Here is a little Archive for you:

    It is one of the most basic Shaders, so a nicely easy Script for you to get started. smile
    The Archive includes the Visionaire5-Version for the Shader-Toolkit (in Case you don't have it in your Project), one Script which you have to set up as Definition-Script after the Shader-Toolkit, the actual Shader-Code which you have to copy-paste into a new Shader named "HeatwaveShader" in the Shader-Tab, and an "effects"-Folder (with a Cloud-Texture of mine) which you simply copy into your Project-Folder. If all that is done, you should get a very similar Effect on your Screen, once you start the Game.

    Forum Fan

    145 Posts

  • #3, by ke4Saturday, 04. November 2017, 17:11 7 years ago
    Thank you mate. Did you wrote that?
    It's just a few lines, shouldn't be that hard to code something like this i guess, though this code doesn't look like anything i coded before.
    How do i learn this? Any tips for some good learning resources?

    Key Killer

    810 Posts

  • #4, by caligarimarteSaturday, 04. November 2017, 17:25 7 years ago
    Yes, I wrote it. I am not sure what the best Method of learning would be (I cannot recommend any specific Tutorials), but I taught myself coding GLSL (and by Extension HLSL) by looking at other Shader-Scripts other People have uploaded to the Internet -- I looked at them, changed a Value here, changed a Command there, and kept watching what the Effects would be (so, my Understanding of Shaders is admittedly somewhat restricted, but sufficient for most Things I need). There are some rather advanced Shader-Examples on this Site: https://www.shadertoy.com/

    If you want a slightly more complex Shader ready for Visionaire-Implementation to inspect, play around with and maybe learn from, here is a Reflection-Shader I recently shared on Discord: https://www.dropbox.com/s/k0wg4cyyta9rlr3/reflection_shader....

    EDIT: Keep in Mind that if you create your own Mask-Image (for this Reflection-Shader), there should be one Pixel in each Corner that is at Least 0.001 white, or else Visionaire misinterprets the Image-Size. Also keep in Mind that if you change the Mask, the "Mirror_PosY"-Value must be changed to fit the new Image.

    Forum Fan

    145 Posts

  • #5, by sebastianSaturday, 04. November 2017, 21:40 7 years ago
    looks great. Its still some kind of magic to me how shaders work. 

    Thread Captain

    2346 Posts

  • #6, by caligarimarteSunday, 05. November 2017, 01:54 7 years ago
    looks great. Its still some kind of magic to me how shaders work. 
    Thanks. In Case a short Explanation of that Magic is implicitly being requested here, I would rather compare it to an Effects Pedal that you plug between your E-Guitar and your Amplifier -- it picks up the basic Signal that your Machine has already processed but will modify it before it reaches the Output. Here, the Shader takes Information from every single Pixel (i.e. Fragment, thusly also called "Fragment-Shader") of the rendered Texture either the entire Screen or just an Object in the Scene, and will modify each single Pixel according to certain Values set in the Shader, before the Texture will then continue to be sent to the Display-Output. (Not the most professional Description, but still.)

    In the two Shaders I have offered here, the given Cloud-Texture modifies each Pixel of the Screen or just Part of it, but not by changing the Color-Values of the Texture, but primarily by modifying the Texture-Coordinates, distorting the Texture-Coordinates depending on the Brightness of certain Spots of the the Cloud-Texture as it is being projected onto the Texture (and in Case of the Reflection-Shader there is also a simple Inversion (and Offsetting) of the Texture-Coordinates taking Place).
    If the Effect should look a Bit different, you can just change the Distortion-Texture (and also get some interesting Effects by trying certain Shapes and Contrasts) -- such Distortions can also be generated in Realtime with Sinewave-Function and the like, but producing even just a very simple Cloud-Effect in Realtime with very little Detail can take a Lot of Processing-Power, so you are better off just using a Texture (if your Engine allows it, as is the Case with Visionaire5).

    Also keep in Mind that with more (and more complex) Operations inside of a Shader or even just with the Size of a Texture to be modified (think Screen-Resolution), the Amount of Operations to be done on the Amount of Pixels can, as it gets bigger, possibly have a negative Input on your Game's Performance. However, so far I have had far less Performance-Issues with Screen-Shaders in Visionaire than in any of the 3D-Engines I have coded Shaders in (i.e. BGE and Unity), so I wouldn't worry about Performance when implementing Shaders.

    Forum Fan

    145 Posts

  • #7, by wimfSaturday, 10. March 2018, 01:03 7 years ago
    Hello.

     CaligariMarte, thank you for your example for the shaders.

    I have one question.

    I have a room with a bridge, and under the bridge, i have a picture of water.

    I cut the water area and made a mask as on your example, but the shader remains "square"

    I'm trying to understand the principle of the shader but I do not know if it is possible that the effect "reflection" only plays on the alpha zone of the mask and to the correct position.

    I attached the picture of the result and my mask

    thank you

    Forum Fan

    238 Posts

  • #8, by caligarimarteSaturday, 10. March 2018, 13:51 7 years ago
    Oh, that's a little tricky: The Shader is, in its current state, not intended for Perspective -- we would need to distort the Shader a little to make it match up somewhat. Then again, another Problem will be that the Reflection will look very wrong, because the Reflection should actually show the Bridge from below, but the Shader will still depict it as from above, which won't make much Sense for the Reflection -- this could be avoided to some Degree by making the Reflection very, veeery blurry, but even then the Area where the Bridge touches the Water would be problematic, because of the Angles (the Bridge-Pillar (Pillar? I don't know how it is called) and its Reflection would together make an X-Shape).

    So, my Suggestion is that you don't use an actual Reflection but instead render that the Bridge's Reflection would look like properly rendered, add that to your Background, and then apply the mere Wave-Shader (not the Reflection-Shader). Since the Character would probably remain unseen anyway in the Reflection (due to the high Camera Angle), you might not lose anything (except if the Character walks up to the Railing, I guess the Player would then expect to see a Reflection).

    Forum Fan

    145 Posts

  • #9, by wimfSaturday, 10. March 2018, 14:32 7 years ago
    Thank you for your answer.

    I just tested but if I apply shader wave, all the elements of my image is impacted by the wave, so also my characters. The shader effect should only apply to an object.

    It's a shame that the shader reflection does not work, because I would have liked to use it also for the reflection of the mirrors smile

    Have a nice day

    Forum Fan

    238 Posts

  • #10, by afrlmeSaturday, 10. March 2018, 14:42 7 years ago
    You can apply some shader effects directly to scene objects only. I don't remember how to apply effects directly to a scene object off the top of my head or whether the method is still the same as when I tested it ages back, but maybe someone on here remembers or has used it recently & can tell you how to sort it out...

    Imperator

    7285 Posts

  • #11, by wimfSaturday, 10. March 2018, 15:20 7 years ago
    Thank you and AFRLme and caligarimarte

    It's working for my object with this code

    local eff = "HeatwaveShader"

local obj = "eaubas"



shaderRemoveEffect(eff)



bind(eff, "time", field("getTime()*0.001"))



shader_effects[eff] = { shader = Shaders[eff].Compiled }

shaderAddEffect(eff)



shaderRemoveEffect(eff)



graphics.shaderUniform(shader_effects[eff].num.num, "_t_DistortTex", "vispath:effects/clouds02.png")



Objects[obj].ShaderSet = shader_effects[eff].num.num


    Now, i search for use reflect shader on my mirror smile

    Forum Fan

    238 Posts