Jump to content

Shader applying to an image


Overkillz

Recommended Posts

 

Hello dear community. Im doing some researchs about shaders and I'm trying to applying a grradient effect to the bell photo.

But the problem is that I know that I don't know how to apply it to the image. I can create a rectangel by drawing the shader, but applying the effect to the texture ..etc its giving me some troubles.

Here is the shader

Spoiler

texture tex;
float4 startColor;
float4 endColor;

sampler Sampler0 = sampler_state
{
    Texture = (tex);
};

float4 PixelShaderFunction(float2 TexCoord : TEXCOORD0) : COLOR
{
	float4 color = tex2D(Sampler0,TexCoord);
	return startColor* (1.0f - TexCoord.x)+endColor * TexCoord.x;
}

technique tec0
{
	pass P0
	{
        PixelShader = compile ps_2_0 PixelShaderFunction();
	}
}

 

SCRIPT

Spoiler

	dxSetShaderValue( gradientShader, "tex", testTexture)
	dxSetShaderValue( gradientShader, "startColor", 207/255, 22/255, 124/255,1)
	dxSetShaderValue(gradientShader, "endColor", 239/255, 56/255, 48/255,1)
	dxDrawImage(100,100,200,200,gradientShader)
	dxDrawImage(450,100,200,200,testTexture)

 

And here it is what I've just reached drawing it.

mta-screen_2019-10-17_10-35-20.png

I know I can use HUDMASK script to reach it, but I want to try to simplify the things

Thanks for reading. Regards.

Edited by Overkillz
Link to comment

@XaskeL

Thanks, it worked, but ...

Now Im trying to merge it with renderTargets and later convert that renderTarget into a texture to later apply the effect. But the draw doesn't take any effect.

mta-screen_2019-10-17_18-44-36.png

CODE

Spoiler

local sX,sY = guiGetScreenSize()
local gradientShader = dxCreateShader("files/shader/gradient.fx")
local rt = dxCreateRenderTarget(sX*0.3, sY*0.05, true)

function drawThings()
	dxSetRenderTarget(rt)
		dxDrawRectangle(0,0,sX*0.3, sY*0.05)
	dxSetRenderTarget()
	texture = dxCreateTexture(dxGetTexturePixels(rt))
	dxSetShaderValue(gradientShader, "tex", texture)
	dxSetShaderValue(gradientShader, "startColor", 207/255, 22/255, 124/255,1)
	dxSetShaderValue(gradientShader, "endColor", 239/255, 56/255, 48/255,1)
	
	addEventHandler("onClientRender",root,renderThings)
end

function renderThings()
	dxDrawImage(sX*0.05,sY*0.1,sX*0.3, sY*0.05,texture)
end

drawThings()

 

I really don't know what could be wrong. No errors in debug.

Regards.

Edited by Overkillz
Link to comment

You need output results from shader. 
 

local rt = dxCreateRendertTarget(600, 600, true)

dxSetRenderTarget(rt)
	dxDrawImage(0, 0, 600, 600, shader)
dxSetRenderTarget()

Test it code:
 

 
local sX,sY = guiGetScreenSize()
local gradientShader = dxCreateShader("files/shader/gradient.fx")
local rt = dxCreateRenderTarget(sX*0.3, sY*0.05, true)

function drawThings()
	dxSetRenderTarget(rt)
		dxDrawRectangle(0,0,sX*0.3, sY*0.05)
	dxSetRenderTarget()
	--texture = dxCreateTexture(dxGetTexturePixels(rt)) -- useless (RENDERTARGET = TEXTURE!)
	
	dxSetShaderValue(gradientShader, "tex", rt)
	dxSetShaderValue(gradientShader, "startColor", 207/255, 22/255, 124/255,1)
	dxSetShaderValue(gradientShader, "endColor", 239/255, 56/255, 48/255,1)

	addEventHandler("onClientRender",root,renderThings)
end

function renderThings()
	dxDrawImage(sX*0.05,sY*0.1,sX*0.3, sY*0.05, gradientShader)
end

drawThings()

Or what do you want to do?

  • Like 1
Link to comment
12 minutes ago, Overkillz said:

@XaskeL

Yes, that was a big mistake by me.

Anyways, If I want to create mulitple rectangles with different gradient colours, Am I forced to create multiple shaders ?

Regards.

You can create several RTs and write the result of the shader into them.  And already display RT themselves.

  • Like 1
Link to comment

@XaskeL

Well, I've just understood more less. Assuming that I want to add a rectangle and an image and apply the shader effect to both of them it doesn't work  correctly.

Its near of reaching the goal, but it does weird things.

imagePath is defined.

local sX,sY = guiGetScreenSize()
local gradientShader = dxCreateShader("files/shader/gradient.fx")
local rt1 = dxCreateRenderTarget(sX*0.3, sY*0.05, true)
local rt2 = dxCreateRenderTarget(sX*0.3, sY*0.05, true)

function drawThings()
	-- ##RENDER TARGET #1
	dxSetRenderTarget(rt1)
		dxDrawRectangle(0,0,sX*0.3, sY*0.05)
		dxDrawImage(0,15,sY*0.02,sY*0.02,imagePath)
		dxDrawImage(0,0,sX*0.3, sY*0.05, gradientShader)
	dxSetRenderTarget()
	dxSetShaderValue(gradientShader, "startColor", 207/255, 22/255, 124/255,1)
	dxSetShaderValue(gradientShader, "endColor", 239/255, 56/255, 48/255,1)
	dxSetShaderValue(gradientShader, "tex", rt1)
	
	-- ##RENDER TARGET #2
	dxSetRenderTarget(rt2)
		dxDrawRectangle(0,0,sX*0.3, sY*0.05)
		dxDrawImage(0,15,sY*0.02,sY*0.02,imagePath)
		dxDrawImage(0,0,sX*0.3, sY*0.05, gradientShader)
	dxSetRenderTarget()
	dxSetShaderValue(gradientShader, "startColor", 207/255, 22/255, 124/255,1)
	dxSetShaderValue(gradientShader, "endColor", 239/255, 56/255, 48/255,1)
	dxSetShaderValue(gradientShader, "tex", rt2)

	addEventHandler("onClientRender",root,renderThings)
end

function renderThings()
	dxDrawImage(sX*0.05,sY*0.1,sX*0.3, sY*0.05, rt1)
	dxDrawImage(sX*0.05,sY*0.4,sX*0.3, sY*0.05, rt2)
end

drawThings()

 

Edited by Overkillz
Link to comment
24 minutes ago, XaskeL said:

Now I'm completely confused about what you want to do

For example. I want to create a renderTarget which containt a square (dxDrawRectangle) and an image, like a star (dxDrawImage)

and apply the gradient shader effect to both of them. to later draw it. However, I wont create just one renderTarget, I want to create multiples of them with different gradient colors.

Thats why I asked you if I need to create a shader per renderTarget (which containt the square and the star).

 

Link to comment
2 hours ago, Overkillz said:

For example. I want to create a renderTarget which containt a square (dxDrawRectangle) and an image, like a star (dxDrawImage)

and apply the gradient shader effect to both of them. to later draw it. However, I wont create just one renderTarget, I want to create multiples of them with different gradient colors.

Thats why I asked you if I need to create a shader per renderTarget (which containt the square and the star).

 

 

local sX,sY = guiGetScreenSize()
local gradientShader = dxCreateShader("files/shader/gradient.fx")
local rt1 = dxCreateRenderTarget(sX*0.3, sY*0.05, true)
local rt2 = dxCreateRenderTarget(sX*0.3, sY*0.05, true)

function drawThings()
	-- ##RENDER TARGET #1
	dxSetRenderTarget(rt1)
		dxDrawRectangle(0,0,sX*0.3, sY*0.05) -- Box
		dxDrawImage(0,15,sY*0.02,sY*0.02, imagePath) -- Star?
		-- dxDrawImage(0,0,sX*0.3, sY*0.05, gradientShader) -- what for?
	dxSetRenderTarget()
	
	-- first shader
	dxSetShaderValue(gradientShader, "startColor", 207/255, 22/255, 124/255,1)
	dxSetShaderValue(gradientShader, "endColor", 239/255, 56/255, 48/255,1)
	dxSetShaderValue(gradientShader, "tex", rt1)
	
	dxSetRenderTarget(rt1, true)
		dxDrawImage(0, 0, sX*0.3, sY*0.05, gradientShader) -- return to render target results from shader
	dxSetRenderTarget()
	
	-- ##RENDER TARGET #2
	dxSetRenderTarget(rt2)
		dxDrawRectangle(0,0,sX*0.3, sY*0.05) -- Box
		dxDrawImage(0,15,sY*0.02,sY*0.02, imagePath) -- Star
		-- dxDrawImage(0,0, sX*0.3, sY*0.05, gradientShader) -- are you sure?
	dxSetRenderTarget()
	
	-- second shader
	dxSetShaderValue(gradientShader, "startColor", 207/255, 22/255, 124/255,1)
	dxSetShaderValue(gradientShader, "endColor", 239/255, 56/255, 48/255,1)
	dxSetShaderValue(gradientShader, "tex", rt2)

	dxSetRenderTarget(rt2, true)
		dxDrawImage(0, 0, sY*0.02, sY*0.02, gradientShader) -- return to render target results from shader
	dxSetRenderTarget()

	addEventHandler("onClientRender",root,renderThings)
end

function renderThings()
	dxDrawImage(sX*0.05,sY*0.1,sX*0.3, sY*0.05, rt1)
	dxDrawImage(sX*0.05,sY*0.4,sX*0.3, sY*0.05, rt2)
end

drawThings()

 

  • Like 1
Link to comment

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