Textured bitmap

totebo

Is it possible to apply a texture to a bitmap somehow, maybe with shaders?

hgy29

Yes, possible with a mesh, two input textures and a shader, but also possible with two bitmap, one above the other, and the use of blending modes.

totebo

I was thinking of bitmaps and blend modes, but I was hoping to apply the same texture to many different irregular shapes.

How would the Mesh method work practically?

antix

Why not just use a RenderTarget?

totebo

Use a RenderTarget how?

antix

Err okay my bad, I didn't really read the first post fully (or just read it incorrectly)

With the mesh, I suppose you could create the shape, assign the texture to the mesh, copy that to a RenderTarget, and then use that as a texture for your bitmap.

You could also use a shape but they are a bit munty because they don't get filtering.

totebo

The thing is I want to apply a Texture to a Bitmap; I don't know the shape of it.

Maybe I need to trace the Bitmap (a tool for tracing bitmaps was posted the other day) and use that as a Shape with a Texture?

antix

You must know the shape of the bitmap

totebo

You're not helping, @antix.

@hgy29, how would your mesh method work?

hgy29

@totebo, here's what I have in mind:
1) Build a square mesh to display your bitmap
2) apply the bitmap to it with Mesh:setTexture()
3) attach your pattern as a second texture with Mesh:setTextureSlot(1,)
4) attach a shader to the mesh for combining texture 0 (bitmap) and texture 1 (pattern) while rendering.
The shader fragment would do something like multiplying both textures contents.
I'll try to come with a practical implementation later.

hgy29

@totebo: try this!

totebo

@hgy29, missed this. Holy cow, this is exactly what I wanted! Please let me in on some of the magic.

It looks like you're "popping" the white colour in bitmap.png. I suppose this is done by the shader. Would it be possible to instead use transparency?

hgy29

Sure, I didn't want to pre process your images, but this can be changed in the shader easily. In the fragment shader, I current check if red channel>0.9 as a threshold for masked/unmasked parts. If you ensure alpha=0 for masked parts and alpha=1 for visible ones, then the shader code is even simpler: replace the whole if/else block by frag.rgba=frag.aaaa and you're done.

totebo

That is AWESOME. It supports semi-transparency, which means smooth edges. This should be simplified and highlighted as a major feature of Gideros I reckon.

totebo

See below.

totebo

See below.

totebo

@hgy29 my plan is to apply textures to many bitmaps. With the current implementation it seems I can only apply it to one bitmap, and when I try to apply it to the second bitmap nothing happens. Is this how the shader works?

totebo

How would I use this on many bitmaps at the same time?

hgy29

You should be able to apply it to several meshes, I don't see why it wouldn't work

totebo

Found the issue: I created a new shader each time I attempted to apply it. Then only the first shader worked, and subsequent (identical) shaders had no effect.

I solved it by creating a global shader that all objects use.

antix

@totebo, ahahah you used a global

totebo

I shall have you know that I have re-evaluated globals after your words of wisdom.

antix

Yay, they really are fantastic!

totebo

All works now, amazing. One niggle I have is with the anti-aliasing. Please see below for with and without texture applied. @hgy29, is there anything I can do to make it smoother?

Without texture:


With texture:

hgy29

Ah yes I suppose what is your fragment shader code right now ?

totebo

It looks like this at the moment. Please don't hurt me, as you know this is magic to me.

fShader.hlsl:

Texture2D fTexture : register(t0); Texture2D fPattern : register(t1); SamplerState samLinear : register(s0);   cbuffer cbp : register(b1) { float4 fColor; float fPatternScale; };   float4 PShader(float4 position : SV_POSITION, float2 texcoord : TEXCOORD) : SV_TARGET { float4 frag=fTexture.Sample(samLinear, fTexCoord);   //Multiply with pattern frag*=fPattern.Sample(samLinear,fTexCoord/fPatternScale);   //Discard transparent parts if (frag.a==0.0) discard; return frag; }

fShader.glsl:

uniform lowp vec4 fColor; uniform lowp sampler2D fTexture; uniform lowp sampler2D fPattern; uniform mediump float fPatternScale; varying mediump vec2 fTexCoord;   void main() {   lowp vec4 frag=texture2D(fTexture, fTexCoord);   //Multiply with pattern frag*=texture2D(fPattern, fTexCoord/fPatternScale);   //Discard transparent parts if (frag.a==0.0) discard; gl_FragColor = frag;   }

totebo

Maybe if I use the Sprite.setBlendMode instead of applying the MULTIPLY in the shader?

totebo

Removing all transparent pixels helped a lot:

if (frag.a<1.0) discard;

totebo

Would it be possible to mask the bitmap with the texture bitmap (see first message), rather than masking a repeated texture?

I think this would actually work better for me, because I then get more control over width and height of the pattern. It would also allow me to use a spritesheet, rather than a png in the library.