Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Textured bitmap — Gideros Forum

Textured bitmap

totebototebo Member
edited July 2016 in General questions
Is it possible to apply a texture to a bitmap somehow, maybe with shaders?

image
My Gideros games: www.totebo.com

Comments

  • hgy29hgy29 Maintainer
    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.

    Dislikes: rodri

    +1 -1 (+0 / -1 )Share on Facebook
  • totebototebo Member
    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?
    My Gideros games: www.totebo.com
  • antixantix Member
    Why not just use a RenderTarget?
  • totebototebo Member
    Use a RenderTarget how?
    My Gideros games: www.totebo.com
  • antixantix Member
    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.
  • totebototebo Member
    edited 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?
    My Gideros games: www.totebo.com
  • antixantix Member
    You must know the shape of the bitmap :D
  • totebototebo Member
    You're not helping, @antix. :)

    @hgy29, how would your mesh method work?

    Likes: antix

    My Gideros games: www.totebo.com
    +1 -1 (+1 / -0 )Share on Facebook
  • hgy29hgy29 Maintainer
    @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.

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
  • hgy29hgy29 Maintainer
    Accepted Answer
    @totebo: try this!
    zip
    zip
    PatternFilling.zip
    30K

    Likes: antix, totebo

    +1 -1 (+2 / -0 )Share on Facebook
  • totebototebo Member
    @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?
    My Gideros games: www.totebo.com
  • hgy29hgy29 Maintainer
    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.
  • totebototebo Member
    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.

    Likes: keszegh, hgy29

    My Gideros games: www.totebo.com
    +1 -1 (+2 / -0 )Share on Facebook
  • totebototebo Member
    edited July 2016
    See below. :)
    My Gideros games: www.totebo.com
  • totebototebo Member
    edited July 2016
    See below. :)
    My Gideros games: www.totebo.com
  • totebototebo Member
    edited 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?
    My Gideros games: www.totebo.com
  • totebototebo Member
    How would I use this on many bitmaps at the same time?
    My Gideros games: www.totebo.com
  • hgy29hgy29 Maintainer
    You should be able to apply it to several meshes, I don't see why it wouldn't work
  • totebototebo Member
    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.

    Likes: hgy29, antix

    My Gideros games: www.totebo.com
    +1 -1 (+2 / -0 )Share on Facebook
  • antixantix Member
    @totebo, ahahah you used a global :D

    Likes: n1cke

    +1 -1 (+1 / -0 )Share on Facebook
  • totebototebo Member
    I shall have you know that I have re-evaluated globals after your words of wisdom. :)

    Likes: antix, n1cke

    My Gideros games: www.totebo.com
    +1 -1 (+2 / -0 )Share on Facebook
  • antixantix Member
    Yay, they really are fantastic!
  • totebototebo Member
    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:
    image

    With texture:
    image
    Screen Shot 2016-07-27 at 11.56.13.png
    224 x 226 - 16K
    Screen Shot 2016-07-27 at 12.04.05.png
    214 x 214 - 19K
    My Gideros games: www.totebo.com
  • hgy29hgy29 Maintainer
    Ah yes I suppose what is your fragment shader code right now ?
  • totebototebo Member
    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;
     
    }
    My Gideros games: www.totebo.com
  • totebototebo Member
    Maybe if I use the Sprite.setBlendMode instead of applying the MULTIPLY in the shader?
    My Gideros games: www.totebo.com
  • totebototebo Member
    edited July 2016
    Removing all transparent pixels helped a lot:
    if (frag.a<1.0) discard;
    My Gideros games: www.totebo.com
  • totebototebo Member
    edited 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.
    My Gideros games: www.totebo.com
Sign In or Register to comment.