Jump to content

[REL] 50p - Masking textures shader


50p

Recommended Posts

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:

mtasa_mask_shader.png

REMEMBER:

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

Example:

masked: destroy(); 

  • Like 1
Link to post

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):

radar_small_perspective.png

Link to post

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 ?

Link to post

@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.

Link to post
  • 3 weeks later...
  • 4 weeks later...
  • 2 weeks later...
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.mtasa.com (maybe something is already included with default MTA package as well - don't know)

Link to post
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.mtasa.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.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...