Archive 17/01/2023.

Decal from Image

I3DB

Is there a preferred way to convert an image to a decal?

If I use Material.FromImage(“Urho2D/Aster.png”) (an image from the 2D Sprite feature sample) the resulting decal flickers (using the Decals Feature sample code).

When using the Feature Samples decal material (Materials/UrhoDecal.xml) everything is fine.

I’m not experienced enough with materials and such to know if there is an easy way to fix Material.FromImage to make it more palatable to the eye, or how to create decals.

I3DB

on other platforms I tested doesn’t crop the image but also doesn’t flicker,and the flicker is only on hololens.

Modanung

This flickering is commonly called z-fighting and can be solved by adding a slight depth bias to your decal material, just like the UrhoDecal material has:

<depthbias constant="-0.00001" slopescaled="0" />
I3DB

@Modanung Yes, that mostly took care of the flickering.

If using this ResourceCache.GetMaterial("Materials/UrhoDecal.xml") it never flickers.
If using the code below, then it doesnt flicker unless the decal is on top of another decal, then it flickers, so if the Material.FromImage("Urho2D/Aster.png") decal is put on top of ResourceCache.GetMaterial("Materials/UrhoDecal.xml") then it will flicker.

But ResourceCache.GetMaterial("Materials/UrhoDecal.xml") on top itself never flickers.

Also, the resulting decal is uncropped and paints as a rectangle rather than showing up as a flower, for instance in the 2D Sprites Feature sample where the Aster.png gets cropped to just the petals of the flower.

var decal = targetNode.CreateComponent\<DecalSet\>();
var decalMaterial = Material.FromImage("Urho2D/Aster.png");
decal.Material = decalMaterial.Clone("");
decal.Material.SetShaderParameter("MatDiffColor", new Color(NextRandom(1.0f), NextRandom(1.0f), NextRandom(1.0f), 1));
decal.Material.DepthBias = new BiasParameters(-0.00001f,0f);
I3DB
decal.Material.DepthBias = new BiasParameters(NextRandom(-0.0001f,-0.00001f), 0f);

No more flickering. But still don’t know how to crop the image.

Modanung

Sounds like something you could do by setting the material’s UV offset.

I3DB

Using code like this makes no change. Is it a setting on the texture?

 decal.Material.SetShaderParameter("UVOffset",new Color(.1f,.2f,.3f,.4f));
Modanung

There’s two material parameters for that, namely UOffset and VOffset. Both are Vector4s.

I3DB
var uoffset = decal.Material.GetShaderParameter("UOffset");
var voffset = decal.Material.GetShaderParameter("VOffset");

returns 1,0,0,0 and 0,1,0,0

What new UVOffsets would hide the background of the .png?

Modanung

You mean how to use the alpha transparency of the image?

I3DB

Aster

When painted as a decal produces a rectangle. I just want the flower and no background rectangle.

UVOffset adjustment just moves the actual flower around within the rectangle. But has no effect on transparency.

I"m not experienced with materials or textures, so just trying to get up from the deep water here to the surface to see what’s happening.

Modanung

For transparency to show up your material will need to use an Alpha technique.

I3DB

This works …

decalMaterial.SetTechnique(0, ResourceCache.GetTechnique("DiffAlpha.xml"));