1337 Gallery - jME Circle Shader: Distortion

jME-CircleShader - Distortion

Downloads
jME-CircleShader.zip:	Download

Learn:

Basics
Advanced
Distortion
Ring-wave Tutorial

Let's start distorting our circles by adding a normal map to the DistortMap property:

geom = new Geometry("Quad", new Quad(480, 480));
Material mat = new Material(assetManager, "MatDefs/Circle/Circle.j3md");

mat.setColor("Color", new ColorRGBA(1f, 0.95f, 0.62f, 1f));
mat.setColor("Color2", new ColorRGBA(1f, 0.49f, 0f, 1f));
mat.setColor("Color3", new ColorRGBA(1f, 0f, 0f, 0f));
mat.setFloat("Offset", 0.05f);
mat.setFloat("pos2", 0.3f);
mat.setFloat("Radius", 0.35f);

geom.setMaterial(mat);
geom.setLocalTranslation(80, 0, 0);

mat.setTexture("DistortMap",
assetManager.loadTexture("Textures/GlassRefracNorm.png"));
mat.setFloat("DistortX", 0.3f); //X-axis distortion strength.
mat.setFloat("DistortY", 0.3f); //Y-axis distortion strength.
mat.setFloat("TileDistortX", 0.25f); //Tile 0.25 times along the x-axis.
mat.setFloat("TileDistortY", 0.25f); //Tile 0.25 times along the y-axis.

guiNode.attachChild(geom);

As you can see we can achieve some pretty neat effects by adding a distortion map. Just like ColorMaps DistortionMaps can be tiled and offset.

You can modify the amount of distortion, as a percentage of the quad's width and height, using the DistortX and DistortY properties respectively.

This is the normal map, created with Blender, used to create the above distortion.

By default a texture map applied to the ColorMap property is not distorted by the DistortMap. If you'd like to distort the ColorMap along with the overall circle use:

mat.setBoolean("DistortColMap", true);

For more about distortions check out the Ring-wave Tutorial