Mixing
Textured glass refraction and transparency
I am trying to create a shader that would allow a sprite to both slightly magnify (or just offset a bit) its background and showing its texture at the same same, just like a piece of painted glass would do.
I found a shader that almost does it, however it also changes the background based on how bright the upper layer/sprite is:
sampler2D img;
sampler2D bkd : register(s1);
float4 ps_main(in float2 In: TEXCOORD0) : COLOR0 {
float4 L = tex2D(img,In);
float4 B = tex2D(bkd,In);
return (L<0.5)?min(B,(2.0*L)):max(B,(2.0*(L-0.5)));
}
technique tech_main { pass P0 { PixelShader = compile ps_2_0 ps_main(); } }
I tried to modify the parameters but the results are awful.
shader hlsl
asked Jan 2 at 12:42
John VJohn V
2,02482546
add a comment |
I am trying to create a shader that would allow a sprite to both slightly magnify (or just offset a bit) its background and showing its texture at the same same, just like a piece of painted glass would do.
I found a shader that almost does it, however it also changes the background based on how bright the upper layer/sprite is:
sampler2D img;
sampler2D bkd : register(s1);
float4 ps_main(in float2 In: TEXCOORD0) : COLOR0 {
float4 L = tex2D(img,In);
float4 B = tex2D(bkd,In);
return (L<0.5)?min(B,(2.0*L)):max(B,(2.0*(L-0.5)));
}
technique tech_main { pass P0 { PixelShader = compile ps_2_0 ps_main(); } }
I tried to modify the parameters but the results are awful.
shader hlsl
asked Jan 2 at 12:42
John VJohn V
2,02482546
add a comment |
I am trying to create a shader that would allow a sprite to both slightly magnify (or just offset a bit) its background and showing its texture at the same same, just like a piece of painted glass would do.
I found a shader that almost does it, however it also changes the background based on how bright the upper layer/sprite is:
sampler2D img;
sampler2D bkd : register(s1);
float4 ps_main(in float2 In: TEXCOORD0) : COLOR0 {
float4 L = tex2D(img,In);
float4 B = tex2D(bkd,In);
return (L<0.5)?min(B,(2.0*L)):max(B,(2.0*(L-0.5)));
}
technique tech_main { pass P0 { PixelShader = compile ps_2_0 ps_main(); } }
I tried to modify the parameters but the results are awful.
shader hlsl
asked Jan 2 at 12:42
John VJohn V
2,02482546
I am trying to create a shader that would allow a sprite to both slightly magnify (or just offset a bit) its background and showing its texture at the same same, just like a piece of painted glass would do.
I found a shader that almost does it, however it also changes the background based on how bright the upper layer/sprite is:
sampler2D img;
sampler2D bkd : register(s1);
float4 ps_main(in float2 In: TEXCOORD0) : COLOR0 {
float4 L = tex2D(img,In);
float4 B = tex2D(bkd,In);
return (L<0.5)?min(B,(2.0*L)):max(B,(2.0*(L-0.5)));
}
technique tech_main { pass P0 { PixelShader = compile ps_2_0 ps_main(); } }
I tried to modify the parameters but the results are awful.
shader hlsl
shader hlsl
asked Jan 2 at 12:42
John VJohn V
2,02482546
asked Jan 2 at 12:42
John VJohn V
2,02482546
asked Jan 2 at 12:42
John VJohn V
2,02482546
asked Jan 2 at 12:42
John VJohn V
2,02482546
asked Jan 2 at 12:42
John VJohn V
2,02482546
2,02482546
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
To combine the textures, either lerp between B and L, or lerp between B and L*B. You can expose the lerp factor as a uniform for control.
For the magnification, you want to scale the UV coordinates of the background texture in the texture lookup. Just scaling it outright won't work though, you need to get the distance between the UV coordinates of your screen buffer sample and the center of your magnifying glass, scale that, then add it to your original UV coordinates.
Here is a short magnifying glass shader on shadertoy showing you what i mean (in GLSL):
https://www.shadertoy.com/view/lsjczh
answered Jan 7 at 14:28
Kalle HalvarssonKalle Halvarsson
381210
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54006610%2ftextured-glass-refraction-and-transparency%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
To combine the textures, either lerp between B and L, or lerp between B and L*B. You can expose the lerp factor as a uniform for control.
For the magnification, you want to scale the UV coordinates of the background texture in the texture lookup. Just scaling it outright won't work though, you need to get the distance between the UV coordinates of your screen buffer sample and the center of your magnifying glass, scale that, then add it to your original UV coordinates.
Here is a short magnifying glass shader on shadertoy showing you what i mean (in GLSL):
https://www.shadertoy.com/view/lsjczh
answered Jan 7 at 14:28
Kalle HalvarssonKalle Halvarsson
381210
add a comment |
To combine the textures, either lerp between B and L, or lerp between B and L*B. You can expose the lerp factor as a uniform for control.
For the magnification, you want to scale the UV coordinates of the background texture in the texture lookup. Just scaling it outright won't work though, you need to get the distance between the UV coordinates of your screen buffer sample and the center of your magnifying glass, scale that, then add it to your original UV coordinates.
Here is a short magnifying glass shader on shadertoy showing you what i mean (in GLSL):
https://www.shadertoy.com/view/lsjczh
answered Jan 7 at 14:28
Kalle HalvarssonKalle Halvarsson
381210
add a comment |
To combine the textures, either lerp between B and L, or lerp between B and L*B. You can expose the lerp factor as a uniform for control.
For the magnification, you want to scale the UV coordinates of the background texture in the texture lookup. Just scaling it outright won't work though, you need to get the distance between the UV coordinates of your screen buffer sample and the center of your magnifying glass, scale that, then add it to your original UV coordinates.
Here is a short magnifying glass shader on shadertoy showing you what i mean (in GLSL):
https://www.shadertoy.com/view/lsjczh
answered Jan 7 at 14:28
Kalle HalvarssonKalle Halvarsson
381210
To combine the textures, either lerp between B and L, or lerp between B and L*B. You can expose the lerp factor as a uniform for control.
For the magnification, you want to scale the UV coordinates of the background texture in the texture lookup. Just scaling it outright won't work though, you need to get the distance between the UV coordinates of your screen buffer sample and the center of your magnifying glass, scale that, then add it to your original UV coordinates.
Here is a short magnifying glass shader on shadertoy showing you what i mean (in GLSL):
https://www.shadertoy.com/view/lsjczh
answered Jan 7 at 14:28
Kalle HalvarssonKalle Halvarsson
381210
answered Jan 7 at 14:28
Kalle HalvarssonKalle Halvarsson
381210
answered Jan 7 at 14:28
Kalle HalvarssonKalle Halvarsson
381210
answered Jan 7 at 14:28
Kalle HalvarssonKalle Halvarsson
381210
381210
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54006610%2ftextured-glass-refraction-and-transparency%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
