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