NEW - REFRACT 2D - Refractions, Reflections, Image-based Lighting, Image Distortions

Version 1.2 Now Available and ON SALE, 50% OFFRefract 2D
Realtime rendering of refractive, reflective and lit surfaces
Refractions, Relections, Image-Based 2D Lighting, Image Distortions, Lenses and more!

→ Buy Now - PRICE REDUCED TO $25 at the Unity Asset Store! ←

Read the Free Manual

Features

  • Dynamically adjustable rendering and animation of distorted/bumpy surfaces
  • Not the same as Normal Mapping - takes advantage of a fixed camera viewpoint
  • Realtime combined-surface animation and per-pixel lens control, better than geometry-based distortions
  • Up to 3 textures and 3 distortions combine and animate in realtime with 1 draw call/2 triangles
  • Add to your game a wide variety of awesome animated effects, including (but not limited to) Glass, Bumps, Lenses, Fire, Image distortions, Water, Heat, Ripples, Warps, Shockwaves, Refractive and Reflective text/logos, Plasmas, Ice, Transitions, Environment mapping, Image-based lighting/shadows, and more!
  • Excellent for 2D games and works in 3D too (with some limitations)
  • Use multiple distortion effects in your scene simultaneously - fire, water, heat, etc
  • Animatable transitions between refraction and refraction using the same Distortion Maps
  • Control refraction/reflection on a per-texture and per-Distortion-Map basis
  • Distortion Maps can be used for a variety of purposes and can be hugely over-powered
  • Animate and modify multi-layer image-warping effects in realtime
  • Over 40 highly-optimized, mobile and desktop friendly shaders - Shader Model 2 where possible, also model 3 but only when necessary (e.g. lots of layers)
  • Works in all versions of Unity - Free, Pro, mobile, etc… Unity 3.5 or later
  • Height-Map conversion tool included for creating Distortion Maps in the Unity Editor
  • Over 30-page detailed manual with color images, free to READ RIGHT HERE!
  • For example, refract a background, reflect a foreground, and apply image-based light and shadow in one draw call

Enjoy no less than 12 hand-crafted, fully animated example scenes (see below to view live) demonstrating various uses and techniques
Easy Workflow
Refract 2D features a simple and flexible workflow. The typical workflow is as follows:
1) Create one or more Height Map textures/background
2) Process the Height Map textures with the Height Map Tool to produce Distortion Maps
3) Create a material with one of Refract 2D’s shaders chosen
4) Assign the Distortion Map texture(s) to the material
5) Create background, foreground, mid-ground and/or light-map textures
6) Assign those textures to the material
7) Adjust the material’s settings to get the effect you want with realtime WYSIWYG feedback

→ Buy Now - PRICE REDUCED TO $25 at the Unity Asset Store! ←
Version 1.2 Now Available and ON SALE, 50% OFF!

Challenge your graphics card: 12 LIVE WEB PLAYERS!

Actually, Refract2D is fast and efficient so these demos should run well on most systems. Simply click an image of interest to go to the web player. Remember to go full screen for best performance and effect. Try them at your highest resolution! Although these demos are all full-screen, imagine several effects running in various areas of your game environment at the same time, a little fire here, a waterfall there, etc.

Fire

[

→ WEB PLAYER 1 - Realtime Animated Fire <-](http://www.venus12.com/UnityFiles/Refract2D/01-Fire/Fire/Fire.html)

The Fire scene shows how it may be possible to animate realistic-looking flames using refractive lenses. The scene uses a single background - an existing image of a real-life flame - and four Distortion Maps. The Distortion Maps do all the work as they scroll up the screen at various speeds. As they move, their distorting qualities combine with each other to produce an overall distortion of the background. This dynamically distorts the image of the flame and results in somewhat realistic fire.

Ice Flame

[

→ WEB PLAYER 2 - Realtime Animated Ice Flame <-](http://www.venus12.com/UnityFiles/Refract2D/02-IceFlame/IceFlame/IceFlame.html)

The Ice Flame is a nice visual effect combining the idea of real-time fire animation with, well, some ice cubes. One of the Distortion Maps remains stationary, comprising the contours of some blocks of ice. With the blue coloring, this gives the flame something of an icy feel. A single background image of a hue-shifted real-life flame is used, which is then distorted in realtime from three combined Distortion Maps. The final result is cool, refreshing effect.

Stained Glass

[

→ WEB PLAYER 3 - Realtime Animated Stained Glass <-](http://www.venus12.com/UnityFiles/Refract2D/03-StainedGlass/StainedGlass/StainedGlass.html)

The Stained Glass demo portrays a beautiful stained-glass window. The same original image of a stained-glass window was used to generate the actual Distortion Map as to color it. This was then blurred. The Distortion Map was then coupled with the original colored image as a mid ground texture. The color image is not distorted by the Distortion Map, but a background Light Map and a background Environment Map are distorted, to give the impression of movement behind the scene. As the window scrolls and the background moves, color from the mid-ground texture colorizes the light coming through the window, showing off the smoothly contoured stained glass.

Liquid Metal

1293753--59536--$Screenshot4.jpg

→ WEB PLAYER 4 - Realtime Animated Liquid Metal ←

The Liquid Metal scene demonstrates realtime bumpy liquid animation in a 3D environment. Although Refract 2D is technically a flat system of distortion that doesn’t take perspective or rotation into account, it can still be used quite effectively in various 3D scenarios. Here, dual Distortion Maps move and combine to create a dynamic liquid surface, colored by a background texture and lit by a light map texture. Can you tell it’s not perfectly 3D?

Plasma


[

→ WEB PLAYER 5 - Realtime Refracted Plasma Effect <-](http://www.venus12.com/UnityFiles/Refract2D/05-Plasma/Plasma/Plasma.html)

The Plasma scene puts Distortion Maps to artistic use, combining 3 background textures and 3 Distortion Maps with an abnormally high degree of Refraction. This produces a beautifully artistic plasma effect. To an observer, you probably can’t tell that this is based on lens refraction. The high degree of Refraction pulls pixel colors from a wide range across and outside of the texture bounds, compacting the colored bands into narrow undulating rings of color. Since this is a very input-heavy shader, Shader Model 3 is used, plus the Refraction value of the second background has to be shared with the third, hence there are only 2 Refraction controls.

Heat Wave

[

→ WEB PLAYER 6 - Realtime Heat Wave <-](http://www.venus12.com/UnityFiles/Refract2D/06-HeatWave/HeatWave/HeatWave.html)

(This effect is subtle, please view the web player) Experience the heat of the desert in this fun heat-wave simulator. Watch those camel-riders wiggle as the shimmering, scorching heat rises up. Is it starting to feel hot in here? The effect is fairly simple - sometimes subtle distortions are useful. A single colored background is distorted by two simple Distortion Maps. With a very low degree of Refraction, the result is a slight wiggle, just enough to give the impression of heat distortion on a hot day.

Frosted Glass

[

→ WEB PLAYER 7 - Realtime Frosted Glass <-](http://www.venus12.com/UnityFiles/Refract2D/07-FrostedGlass/FrostedGlass/FrostedGlass.html)

Sometimes you want highly detailed refractions or reflections, perhaps representing an organic earthy environment, a metal or wood surface, or perhaps a frosted window. The Frosted Glass demo shows the kind of Distortion Map that can be produced when the Smoothing functionality is switched off in the Height Map Tool. By providing a value of 0 for X Smoothing and Y Smoothing, and starting out with a crisp in-focus texture, tiny refractive or reflective details emerge to create that high-detail or frosted look. This demo transitions between colorless glass,which frosts the background, to colored glass, which combines frosting with a glass tint.

​Distortion

[

→ WEB PLAYER 8 - Realtime Animated Image Distortions <-](http://www.venus12.com/UnityFiles/Refract2D/08-Distortion/Distortion/Distortion.html)

Okay, so all of the scenes show distortion, but the Distortion scene especially shows how you can transition between different Distortion Maps, transitioning between refractive and reflective effects in realtime. Four Distortion Maps are used, yet at times any of those Maps may be active to varying degrees. The Power value of each is animated to transition from refractive strength to reflective strength, and at times returns to a Power of 0 to disable effects from a given Distortion Map. Sometimes more than one, or up to four Distortion Maps are in effect. You can see how holding distortion from one Distortion Map while adding-in distortion from another, dynamically modifies the distortion effect. The distortion itself is distorted!

Aquarium


[

→ WEB PLAYER 9 - Realtime Aquarium Simulation <-](http://www.venus12.com/UnityFiles/Refract2D/09-Aquarium/Aquarium/Aquarium.html)

Watch the fish swim in the spherical aquarium. How they got inside, nobody knows. This demo shows an exaggerated Light Map. Refraction of the Light Map is increased three-fold to increase the intensity of the distortion. This creates an increase in the contrast produced by the light shape. Notice in the lightmap that some areas are light and some are dark - the light areas obviously represent light while the dark areas represent shadow. The over-refracted Light Map produces deep bumps on the aquarium surface,which animate between refraction and reflection in realtime. A subtle environment map is also used.

Text / Logo

[

→ WEB PLAYER 10 - Realtime Refractive Text/Logo ←
](http://www.venus12.com/UnityFiles/Refract2D/10-Text/Text/Text.html)

Sometimes when you’ve made a nice logo or show a text message, you want it to reflect an environment, perhaps react to a light map, or distort a background so as to appear like glass. Here, the Text demo shows a large rectangular Distortion Map used in conjunction with a square background texture. Offset and Scale are used to correctly size and animate the text across the colorful background. A high degree of Refraction is used to make the text appear to be highly refractive like a high-powered lens. The text was generated first in a graphics application, then a copy of the layer was made. The copy was blurred heavily and then multiplied by the original text to keep a hard outline edge. This resulted in a smooth interior but defined edges, and coupled with the high degree of Refraction results in beautifully smooth glass text. This is achieved with a single Distortion Map generated from the text Height Map, and a single colored background. It is possible with the right Height Map to give text any kind of contour, bevel, or surface shape.

Water

[

→ WEB PLAYER 11 - Realtime Animated Water + Surface <-](http://www.venus12.com/UnityFiles/Refract2D/11-Water/Water/Water.html)

In the Water demo, special techniques are used to animate a 2D water surface, complete with underwater distortions, lighting, and an un-distorted sky texture, all within a single shader. Two Distortion Maps animate the water ripples and surface. Care has to be taken to avoid over-refractive effects since this would result in blobs of water appearing out of thin air. The water surface ripples and animates with an interesting effect, yet does not distort the sky. While this isn’t a complete simulation of interactive water, movement and positioning of distortions near the surface can produce pleasantly rippling water effects.

The effect is achieved through the use of an alpha channel. The first background includes an alpha channel, with values of 1.0 (or 255) where the water/diver scene is to be shown, and a 0 where sky is to be shown. Provided this texture is used as the first background, and the texture is RGBA32 or ARGB32, the alpha channel can be used by the shader. The light map is distorted by the same two Distortion Maps and, provided the Refraction value is the same for both textures, the water/diver and the lighting will both refract in unison, creating a seamlessly lit water scene. The final touch entails the use of the light map as the third texture, including a strip of white pixels where the sky needs to appear. This is because the values from the light map will be multiplied with the scene - we want the sky to show its own colors so we allow it to be multiplied by white in order to retain its full color. The finishing touch is to move the clouds by individually scrolling the sky texture. With some care, realtime caustics effects could be produced on the underwater objects as well.

3D

[

→ Web Player 12 - Multi-effect 3D scene with interactive movement <-](http://www.venus12.com/UnityFiles/Refract2D/12-3D/3D/3D.html)

In this 3D interactive scene, you can move around in first-person perspective and examine various Refract 2D effects in realtime. Position yourself at various angles to see how the effect works (or doesn’t) in 3D. While Refract 2D is primarily a 2D system, based on flat surfaces, it does have some potential usefulness in 3D scenes, provided the effects meet your requirements in a given situation. Sometimes the effect can create the illusion of 3D, but in certain locations/proximity/angles the effect may be broken. Move around and see for yourself.

In this demo, the entire ground is covered with a rippling water effect. This uses two Distortion Maps, one main texture and a light map texture. The light map moves across the surface highlighting or shading the bumps and pits of the water ripples. Since this is effectively using the Distortion Map as a Height Map and is texture-based, the quality of the ripples is extremely smooth, producing a high quality watery surface. You may notice however, that the Liquid Metal spheres to the right seem to intersect a completely flat, bump-less ground, because the water really doesn’t have any height.

The demo also features various spheres. Some show frosted glass, some show general animated refraction, and also present are the Aquarium and Liquid Metal spheres. You’ll notice that sometimes from a reasonable distance, and given the spheres don’t overlap the ground or sky, they seem believable as refracting the background behind them. Up-close the illusion may be broken - this could possibly be remedied using realtime RenderTextures which capture the actual background in screen-space and then warp and map this texture into the distortion shader. You’ll also notice that some spheres (Aquarium, Liquid Metal) use light maps… this appears to show the placement or movement of a light source which may or may not seem realistic given the environment.

Also present on the right-hand wall is a heat-wave effect… given the effect is flush to the wall it looks correct in 3D - ie the distortions of the surface below are sufficiently close to the surface that you can’t easily tell it’s not three-dimensional, except at acute angles. On the other hand, the same effect seems to form what looks like a solid separate wall off to the left… this should not really be a solid wall, it should be a column of heat that refracts the actual arena wall some distance away, and indeed should refract some of the fire effect. Indeed if you go behind the wall you should be able to view the rest of the scene, distorted through it, but this doesn’t happen. Because the distortion is based on a background texture, which is just the image of a flat wall segment, it appears to bring the wall close to the surface instead of maintaining its 3D position. This shows how refraction does not always work in 3D (it maybe would with a RenderTexture method). Yet as you approach some of the spheres that are close to the walls, the refraction does seem valid - so it really depends on where and how you would use the effects.

Finally on the near wall (behind the initial viewpoint) the Text demo scrolls refractive text across the wall. You can get up-close to zoom in or view from angles. You’ll notice from more acute angles the text is actually flat and not as rounded as it looks straight-on… this again is the side-effect of Refract 2D being a flat system. Again in some situations this kind of effect might be exactly what works for you, but in others where the player gets really close to the effect at an angle it may break the illusion of 3D. Note also that the system doesn’t really understand drawing order other than normal opaque Z-buffering.

Hopefully this 3D demo showcases some of the potentials and pitfalls of using Refract 2D in a 3D game. You could definitely use it for certain special effects, in futuristic environments perhaps, for water effects, to produce semi-realistic lighting, or effects that are close to surfaces, but the system isn’t designed to do everything in 3D as you’d expect. With the use of extra cameras and RenderTextures it’s possible to expand the functionality somewhat, for example a sphere may take a snapshot view toward the player and then use this as its background texture, seeming to reflect the player as they approach the sphere.

Have fun experimenting to find the exact-right effect for your game or app.

Version 1.2 is NOW AVAILABLE and ON SALE - 50% OFF!

→ Buy Now - PRICE REDUCED TO $25 at the Unity Asset Store! ←

Read the Free Manual

Sorry to ask but i do not complete understan, is this only for 2D or can i use this in 3D too?

It is looking great and i hope i can use it in 3D scenes too i.e. when a magician in a rpg do his magic attack :slight_smile:

Yes, you can use it in 3D in the same way that you can use Normal Maps in 3D. A normal map is basically an image of a flat surface, recording the bumpiness. When you use a normal map on a 3D object, perhaps with perspective also, and a camera that moves in 3D, the surface still renders and looks bumpy. Yet it’s not really truly 3D - as the camera begins to view a surface that isn’t straight-on, like towards the curved sides of a 3D model, the representation of the bumps doesn’t really change. You should technically see the sides of the bumps as you move the camera around - to a degree you do, and the reflection of light off the surface helps with the 3D illusion. But the 3D elite among us know it is not physically perfect. This is why clever folks came up with methods like Parallax Mapping or Displacement Mapping, which attempts to make the surface look how it should look when you are seeing it from a different angle - the bumps then look even more 3D.

I’m telling you this because the Distortion Maps which Refract2D uses are similar to Normal Maps in this way - you can use them in 3D and get useful effects (see the Liquid Metal demo above for example), and to the untrained eye you may not notice the shape of the bumps doesn’t have proper perspective, but for many people it will pass for a bumpy surface. My Distortion Maps also differ from normal maps in that they not only pre-calculate the reflection angle of light bouncing off/refracting through the surface, but they convert that data to 2D offsets which are not only quick to render with but you can also combine multiple distortion layers in realtime without much effort. Also I’ve built-in the ability to over refract or over reflect by changing the distorting power of the lenses - you can produce some pretty chunky-looking lenses, far removed from a relatively flat surface.

One caveat of this technique is the way refractions and reflections should behave in 3D, versus how they will behave. A refracted object which is behind another object, from the point of view of the viewer, should be the source of refractions, but because Distortion Maps create their effect perpendicular to the surface (ie the surface is flat), they will distort or reflect textures that are perpendicular to the surface, which won’t look right in 3D. So you won’t see the right background getting refracted, or the right foreground getting reflected. You could work around this by rendering the actual background behind the refractive object into a RenderTexture, somewhat skewed, and then using that texture in the Refract2D shader. But I can’t guarantee it’s going to look correct. If you don’t mind that the effect you get is not totally correct in 3D, you can still make some good use of it in 3D - see the Liquid Metal demo for example - 3D spheres which still look 3D with a reflective looking surface, it’s just that the reflections aren’t real or accurate - but it’s not easy to tell, which is good.

Also one other thing to bear in mind is this system uses its own lighting. It uses a texture which stores an image of light, ie a light map or image-based lighting. This light map could be a panorama or a scene or a sky or a cross-section of some light volumes or some glowing laser lines or point lights or whatever you want. So long as you can represent it in a texture it will work. Then the areas of the light map texture which are light will illuminate the surface, while darker areas will look more like shadows. See the Aquarium demo above for example - it shows deeply pitted surfaces produced by an over-refracted light map. Refract 2D is mainly a 2D system in this way, everything works on a flat plane, and you could render dynamic lights to the light map with a Render Texture, but it therefore will ignore any of Unity’s 3D lights or shadows.

The only other main point to consider is you must give a background to the Refract 2D shader if you want it to do refraction, so that has to be either pre-generated or rendered to a RenderTexture beforehand. In Refract 2D, however, it just regards a Distortion Map as a colorless surface and you can use it for refraction or reflection as you wish, ie think of the color textures as backgrounds or foregrounds depending on whether you’re refracting or reflecting that layer.

For more information take a look at the Distortion Maps in 3D Scenes section of the manual.

can u just make a 3d demo?

This looks really awesome! Will pick this up later.

Btw, is this mobile friendly?

Liquid Metal is a 3D demo… which wraps a distortion around a 3D sphere. It combines two layers of distortion maps in realtime and colors it with a colormap texture and a lightmap texture. It creates a liquid-like surface in 3D. It basically is doing reflections. The scene doesn’t have any regular lights but as far as your eye is concerned it looks fairly believable that there is light somewhere in the scene. The spheres don’t reflect each other, the only reflections are off an environment-map texture which is fixed (though could be a RenderTexture) and which wraps around the surface. It still looks reflective but the reflections are not physically accurate.

Doing refraction in 3D is harder. Refract 2D assumes that the camera does not need to rotate around the X or Y axis. It can render a surface looking straight at it (like in 2D games). If you render your 3D environment to a RenderTexture for example and then you want to put something flat on top of it as an overlay, like a HUD or GUI elements, they will properly refract the pre-rendered background. In this case the background can be moving and have any camera angle. But the only time there are correct results is when the camera rendering the bumpy surface is looking straight at it. Once you wrap a refractive surface around a 3D model you’re effectively also wrapping the camera around the model, so it won’t be correct from the viewpoint of the main camera. Like I said you could possibly fake it by rendering the background objects to a RenderTexture and then passing that into R2D… but it’s not really designed to work in 3D without some hacking. Doing real 3d refractions and reflections is a much much harder problem beyond the scope of what Refract 2D is best at. On the asset store for example there is the hard surface shader pack which has some refraction and reflection support in 3D, but I believe it’s geometry based and doesn’t have the animated surface capabilities of Refract 2D.

Thanks for the appreciation! Mobile friendly… yes. All of the shaders are hand-written to be as optimized as possible for mobile. It uses the absolute smallest/fastest data types and uses efficient algorithms. Also the Height Map Tool pre-calculates the angle of reflection/refraction off the surface and turns it into simple X/Y offset data in the Distortion Map - this saves a LOT of realtime calculations. This is made possible by assuming the camera is looking directly at the surface (which is why this is ideal in a 2D situation but not entirely correct in 3D). This also allows multiple Distortion Maps to be combined in realtime very efficiently without multiple layers of complex calculations. Let’s say it’s as fast as it can possibly be for mobile but depending on complexity the more layers you add the slower it will run on any platform.

In my tests, with one Distortion Map and one texture, it ran about the same speed as the same scene using Normal Mapping, maybe a little faster. This is mostly because both techniques are reading from 2 textures, and it’s the texture reads that govern most of the performance. If you need to add more distortion maps (up to 4 in some cases), or more texture layers (up to 4 in some cases) then obviously it’s going to slow down no matter what platform you’re on. I’d imagine you can use it fairly extensively on more recent tablets/phones provided you don’t get too heavy with it. You should be able to use it at least as much as you would use normal mapping, depending on complexity. Also it depends on how much of the screen you’re covering with distortions, if you just have like a waterfall or a fireplace or something covering only 20% of the screen then it’s going to run much better than having the entire screen distorted.

All of the shaders, where possible, are Shader Model 2. The only reason some of the more complex shaders are Shader Model 3 is because Model 2 doesn’t support enough inputs or variables. This mainly applies to when you’re using 3 Distortion Maps or 3 textures. I’d say overall it’s very good for 2D on mobile where you want local effects that don’t cover the entire screen. … but you might be surprised just how much you can do.

As above… but I forgot to address your question about magic effects. If you can get away with making your magic effect be drawn on a billboard facing the camera, and you can draw the background behind it first to a RenderTexture, then for sure you can do whatever you want in 3D. Most particle systems for example use camera-facing billboards so that whichever way you’re facing you will see the full surface of the particle instead of a flat edge. If that works for you, then you could draw refractive billboards that warp the background to provide magic special effects. One thing to bear in mind is layering - since refraction requires an existing background, you’d have to draw the effects in sorted order from back to front, each time rendering to a RenderTexture, in order to layer them. Alternatively you can try some blend modes … there some tips at the end of the user manual about how to use blending.

You know we don’t really do this because unity should have this done internally.

I don’t entirely follow what you’re saying… are you referring to RenderTextures? … within the OpenGL/DX API there is a distinction between a RenderTexture (target) and the backbuffer… the system only ever displays on-screen the contents of the backbuffer, which is somewhat a legacy thing going back many years. When render-to-texture came along it was added as an extra feature, but you still have to copy from the RenderTexture to the backbuffer in order to see anything. It would be pretty cool if Unity were changed to always render everything to a RenderTexture the size of the screen, if it has the same performance, and if that can then be actually viewed/flipped by the graphics card… but I think there are API issues in the way. In some situations though this would give a tremendous speed boost.

I’m not sure if that’s what you were referring to.

Has anyone experienced all pink in the example scenes instead of proper materials? So far I had one report of this but am having trouble replicating it.

You changed your avatar, imaginaryhuman. Didn’t recognize you. :slight_smile:

They look fine to me in the web player (Win 7, Firefox, Unity Plugin 4.0.1f2).

lol yes, needs a refresh once in a while. Thanks for testing the webplayers. They seem to be fine. The issue is Unity editor 4.1.5… Refract2D seems to be totally fine in 3.5.0, 3.5.7 and 4.0, but in 4.1.5 the example scenes get messed up. Still investigating a possible fix.

[edit]… I’m homing in on the pink issue… seems that on 4.1.5 editor, compilation of the shaders by Unity is running into an issue when trying to make a shader for GLSL, which stops the compilation and breaks the material. I don’t know yet if it’s a Unity bug but I’m looking at how to maybe recode the shaders a bit to get around it.[/edit]

[edit2]Figured out a workaround, will update the shaders and resubmit to the store[/edit]

Version 1.1 has been submitted to the asset store. All shader errors are fixed and all scenes now work in the editor - this only applied to Unity 4.1.5 for some reason. Within a few days the new version should be available for download.

nice work

Thanks, I’m pretty happy with how it turned out.

Version 1.1 is now available on the asset store, with all issues fixed for the Unity 4.1.5 editor.