# [XNA] Pixel Shader Issue (Again)

This topic is 2507 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi guys, well to get down to the issue i'm having basically i'm unsure on how to set the coordinates in which to have my pixel shader take place. Right now it is scaling down the entire background image i have into the image in which i have my shader effect upon.
It currently looks like this:

And it then rendering with the original sized background:

The shader should only affect the area in which it's rendered but i can't seem to get that desired effect :S. What it should show is that tiny Red square inside the circle, the green as a background & part of the Blue rectangle you see. I'm just unsure on how to achieve this & have it map the coordinates to were the actual circle is rendered and then take affect rather than what it's doing now and shrinking the background down.

My shader code is here, i know that i must do something with the UV coordinates, just unsure what & how to do whatever it maybe
 sampler s; sampler s2; float4 PixelShaderFunction(float2 uv : TEXCOORD0) : COLOR0 { float4 lightColor = tex2D(s, uv.xy); float4 bgTextureColor = tex2D(s2, uv.xy); if (lightColor.a > 0.5) { bgTextureColor = float4(bgTextureColor.r, bgTextureColor.g, bgTextureColor.b, 1); } else if (lightColor.a < 0.5) { //bgTextureColor = float4(0, 0, 0, 0); } return bgTextureColor; } 

What happened before was that i was testing with just a purely one coloured background thinking everything was fine, so only recently when i've been trying to Incorporated this into my project i've come across this issue. Though it did work fine with the one coloured background, so in terms of it changing the alpha it works fine, just the Mapping of the coordinates is wrong and i'm unsure how to go about fixing it.

Any help would be Greatly Appreciated!

##### Share on other sites
not sure if i really understand what are you trying to do, but if it's about applying pixel shader to the "part" of image, while drawing it whole and unscaled, i wanted to do something similar in one project, and though i haven't tried it yet, i had an idea to use GraphicsDevice.Viewport. It's usually used to draw two/more views/cameras when doing a split-screen game, e.g. you set the viewport to "cover" one half of screen, draw your scene as usual using camera of player1, then set the viewport to other half, and draw the scene as usual, exept using camera of player2, which implies that the shader is used&mapped only to the current viewport which it treats as a whole screen. in your case, you should be able to draw whole scene to backbuffer in your case, then set the viewport just to the part where you want the shader applied, grab that part of backbuffer, and draw it through the ps as if it were your whole backbuffer, exept you'll probably have to supply it just the relevant part of image/texture.

i'm not really sure whether i understand what you want to do, or whether this really solves your problem, but there's a chance of it, or at least i may have pointed you in the right/usable direction(?)

##### Share on other sites

not sure if i really understand what are you trying to do, but if it's about applying pixel shader to the "part" of image, while drawing it whole and unscaled, i wanted to do something similar in one project, and though i haven't tried it yet, i had an idea to use GraphicsDevice.Viewport. It's usually used to draw two/more views/cameras when doing a split-screen game, e.g. you set the viewport to "cover" one half of screen, draw your scene as usual using camera of player1, then set the viewport to other half, and draw the scene as usual, exept using camera of player2, which implies that the shader is used&mapped only to the current viewport which it treats as a whole screen. in your case, you should be able to draw whole scene to backbuffer in your case, then set the viewport just to the part where you want the shader applied, grab that part of backbuffer, and draw it through the ps as if it were your whole backbuffer, exept you'll probably have to supply it just the relevant part of image/texture.

i'm not really sure whether i understand what you want to do, or whether this really solves your problem, but there's a chance of it, or at least i may have pointed you in the right/usable direction(?)

Well that's this is somewhat similar to what i have now. The fact is that it doesn't seem to be working.

[color=#333333][font=arial, sans-serif][size=2]You had to convert UV co-ordinate that the shader was giving
you from texture space of the light to screen coordinates:

uv[0] * lightWidthOnScreen + lightPostionX
uv[1] * lightHeightOnScreen + lightPostionY

Pretty straight forward.

Then you need to convert that position from screen space into texture
space of the BG which is also simple:

(uv[0] * lightWidthOnScreen + lightPostionX) / screenWidth
(uv[1] * lightHeightOnScreen + lightPostionY) / screenHeight
[/font]
Thats what I & a friend came up with. And in terms of the code:
 float4 PixelShaderFunction(float2 uv : TEXCOORD0) : COLOR0 { float4 lightColor = tex2D(s, uv); float2 bgTextureUV; bgTextureUV[0] = ((uv[0]*272)+300)/800; bgTextureUV[1] = ((uv[1]*272)+200)/480; float4 bgTextureColor = tex2D(s2, bgTextureUV); if (lightColor.a > 0.5) { bgTextureColor = float4(bgTextureColor.r, bgTextureColor.g, bgTextureColor.b, 1); } else if (lightColor.a < 0.5) { //bgTextureColor = float4(0, 0, 0, 0); } return bgTextureColor; } 
It's pretty much like you said, multiple the UV coordinates by the Width/Height of my Texture, then add on the position in which i render it. Then divide by the viewport width/height.
The result isn't good though, infact more so quite puzzling in the fact that the it seems to have enlarge the pixels. You can see by the image below how it looks, with the shader applied.

It's quite odd that the placement seems to be so off, as you can see it looks around to be by the area to the Left of were i render my image. (So You can see we have a bit of the light blue, the start of the blue rectangle, part of the green around the red square, and the entire bottom half of the red square which for some reason seems to be enlarged? The red square is rather small, yet the red i have at the top of the shader applied area is bigger infact then the original red square :S. )