Shader applying to an image

[Overkillz]

 

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.

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

Thanks for reading. Regards.

Edited October 17, 2019 by Overkillz

[XaskeL]

float4 color = tex2D(Sampler0,TexCoord);
return startColor* (1.0f - TexCoord.x)+endColor * TexCoord.x;

???

 

float4 color = tex2D(Sampler0,TexCoord);
return color*(startColor*(1.0f-TexCoord.x)+endColor*TexCoord.x); // ?

 

[Overkillz]

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

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 October 17, 2019 by Overkillz

[XaskeL]

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?

[Overkillz]

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

[XaskeL]

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.

[Overkillz]

@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 October 17, 2019 by Overkillz

[XaskeL]

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

[Overkillz]

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

 

[XaskeL]

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