Textured bitmap

totebo · July 2016

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

hgy29 · July 2016

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 · July 2016

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 · July 2016

Why not just use a RenderTarget?

totebo · July 2016

Use a RenderTarget how?

antix · July 2016

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 · July 2016

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 · July 2016

You must know the shape of the bitmap

totebo · July 2016

You're not helping, @antix.

@hgy29, how would your mesh method work?

hgy29 · July 2016

@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 · July 2016

@totebo: try this!

totebo · July 2016

@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 · July 2016

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 · July 2016

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 · July 2016

See below.

totebo · July 2016

See below.

totebo · July 2016

@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 · July 2016

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

hgy29 · July 2016

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

totebo · July 2016

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 · July 2016

@totebo, ahahah you used a global

totebo · July 2016

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

antix · July 2016

Yay, they really are fantastic!

totebo · July 2016

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 · July 2016

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

totebo · July 2016

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 · July 2016

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

totebo · July 2016

Removing all transparent pixels helped a lot:

if (frag.a<1.0) discard;

totebo · August 2016

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.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Textured bitmap

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Textured bitmap

Comments