[REL] 50p - Masking textures shader

I've always wanted to do this shader but never had enough motivation. It's very simple and works great when images are the same size (that is, texture and mask). This basically is used to mask part of an image (the texture). Scroll down to see an example.

I'm not going to release a resource of this because it's just 2 files that you need to add to your resource and as far as I remember you can't export classes from resources. Anyway here is what you need.

Create the following 2 files:

c_50masker.lua

--[[ 
    Author: 50p 
    Version: v1.0 
    Description: 
     This class allows easy creation of masked images. You can create an image and mask it using another (grayscale) image. 
]] 
  
  
CMasker = { }; 
CMasker.__index = CMasker; 
  
function CMasker: create( texture, mask ) 
    local cShader = {  
        shader = dxCreateShader( "50masktexture.fx" ), 
        texture = dxCreateTexture( texture, "argb", true, "clamp" ), 
        maskTexture = dxCreateTexture( mask, "argb", true, "clamp" ), 
    }; 
    dxSetShaderValue( cShader.shader, "ScreenTexture", cShader.texture ); 
    dxSetShaderValue( cShader.shader, "MaskTexture", cShader.maskTexture ); 
    self.__index = self; 
    setmetatable( cShader, self ); 
    return cShader; 
end 
  
  
function CMasker: draw( x, y, width, height ) 
    if self.shader then 
        dxDrawImage( x, y, width, height,  self.shader ); 
    end 
end 
  
  
function CMasker: destroy( ) 
    if self.shader then 
        destroyElement( self.shader ); 
    end 
    if self.texture then 
        destroyElement( self.texture ); 
    end 
    if self.maskTexture then 
        destroyElement( self.maskTexture ); 
    end 
end 

50masktexture.fx

/* 
    Author: 50p 
    Version: v1.0 
    Description: 
     This shader allows you to mask a texture with a mask texture (black and white). 
*/ 
  
  
texture ScreenTexture; 
sampler implicitInputTexture = sampler_state 
{ 
    Texture = <ScreenTexture>; 
}; 
  
texture MaskTexture; 
sampler implicitMaskTexture = sampler_state 
{ 
    Texture = <MaskTexture>; 
}; 
  
  
float4 MaskTextureMain( float2 uv : TEXCOORD0 ) : COLOR0 
{ 
     
    float4 sampledTexture = tex2D( implicitInputTexture, uv ); 
    float4 maskSampled = tex2D( implicitMaskTexture, uv ); 
    sampledTexture.a = (maskSampled.r + maskSampled.g + maskSampled.b) / 3.0f; 
    return sampledTexture; 
} 
  
technique Technique1 
{ 
    pass Pass1 
    { 
        AlphaBlendEnable = true; 
        SrcBlend = SrcAlpha; 
        DestBlend = InvSrcAlpha; 
        PixelShader = compile ps_2_0 MaskTextureMain(); 
    } 
} 

Now, make sure the shader file (50masktexture.fx) is in the root folder of your resource otherwise change the path to the shader in c_50masker.lua. When you've done this, you're ready to use the CMasker class.

How to use the class?:

It's simple:

local masked; 
  
addEventHandler( "onClientResourceStart", resourceRoot, 
    function( ) 
        masked = CMasker: create( "gtasa_radar_small.png", "mask.png" ); 
    end 
) 
  
addEventHandler( "onClientRender", root, 
    function( ) 
        if masked then 
            masked: draw( 700, 250, 256, 256 ); 
        end 
    end 
) 

Result:

REMEMBER:

When you don't need to use the masked image, use destroy method to free used memory!

Example:

masked: destroy(); 

Great work, I'm going to try this, I'm really impressed, Good Job!

nice!

Really helpful. Well done!

Great job!

I was looking for one of these. Thanks a heap mate.

Good job

Good Job.

Awesome-o

Thanks for the comments guys. I'm glad you find it useful.

I want to make a "3D" radar, similar to the radar you find in GTA V but but in GTA V only roads are rendered. I want to use the "high detail" texture but I suck at shaders and it's going to take forever.

Something like this (it's photoshopped):

Where did you learn using the .fx laughing?

But seriously, http://msdn.microsoft.com/en-us/library ... 06(v=vs.85).aspx and anywhere on the internet. I use 3DPEE for writing/testing shaders http://marino.boletus.hr/3dpee.zip

This is really an awesome work ! Keep it up!

This proved to be very useful http://tog.acm.org/resources/shaderx/

Tips_and_Tricks_with_DirectX_9 - Advanced Image Processing With DirectX9 PS p.439 (464/729 in pdf)

Tips_and_Tricks_with_DirectX_9 - Image Effects With DirectX9 PS p.481 (506/729 in pdf)

other stuff worth mentioning:

http://digitalerr0r.wordpress.com/tutorials/

http://www.rastertek.com/

http://rbwhitaker.wikidot.com/hlsl-tutorials

I don't know if I got this right - you want to add a detail texture for the bigmap texture ? You want to rotate the texture around the Z axis ? Just like https://wiki.multitheftauto.com/wiki/Dx ... rTransform but with the .fx ?

@Ren_712, yes. It'll let me transform easier. Since dxSetShaderTransform with offset rotations makes the shader float around the screen, it's difficult to make it rotate around that point and have it rendered at X and Y if you know what I mean.

Besides, I'm not sure if I could mask a "shader" (after using dxSetShaderTransform) to simply show circular radar.

... renderTarget. you can setShaderTransform the bigmap, which is just a dxDrawImage on the center of renderTarget. This can be done this way.

How do to mask an image that is in dxDrawImage? And if possible make the image move up, down and around...

Nice, great job. (Y)

its possible to mask a HUD component like the radar?

its possible to mask a HUD component like the radar?

Why not.

@myonlake

Can you give me a exemple, I try it but I can't make work.

ksTakor said:

@myonlake

Can you give me a exemple, I try it but I can't make work.

You can't really mask the default San Andreas HUD. You can't even get the image out of it.

For radar map, there's a Lua-replacement built from ground up, though. Not sure which is the best one, but there are many when you search for "radar" in community.multitheftauto.com (maybe something is already included with default MTA package as well - don't know)

madis said:

ksTakor said:

@myonlake

Can you give me a exemple, I try it but I can't make work.

You can't really mask the default San Andreas HUD. You can't even get the image out of it.

For radar map, there's a Lua-replacement built from ground up, though. Not sure which is the best one, but there are many when you search for "radar" in community.multitheftauto.com (maybe something is already included with default MTA package as well - don't know)

He didn't want that. He wanted to make his own, and that is possible by masking.

I must have read a different post then.