7c42ed4cc3
<!-- Enter a brief description/summary of your PR here. What does it fix/what does it change/how was it tested (even manually, if necessary)? --> ## Summary of the Pull Request - Adds two simple animated shaders to the pixel shaders sample folder - Updates the readme in the pixel shaders sample folder to add a section explaining the animated shaders - Modifies some comments in existing shader samples <!-- Please review the items on the PR checklist before submitting--> ## PR Checklist * [ ] Closes #xxx * [x] CLA signed. If not, go over [here](https://cla.opensource.microsoft.com/microsoft/Terminal) and sign the CLA * [ ] Tests added/passed * [ ] Documentation updated. If checked, please file a pull request on [our docs repo](https://github.com/MicrosoftDocs/terminal) and link it here: #xxx * [ ] Schema updated. * [x] I've discussed this with core contributors already. If not checked, I'm ready to accept this work might be rejected in favor of a different grand plan. Issue number where discussion took place: #8994 <!-- Provide a more detailed description of the PR, other things fixed or any additional comments/features here --> ## Detailed Description of the Pull Request / Additional comments The two shaders I wrote are not especially pretty or interesting, but they should hopefully serve as simple examples for anyone looking to do animated effects. One simply draws a line of inverted pixels that scrolls down the screen, and the other fades the background back and forth between two colors. I've added a new section to the readme explaining how the shaders work to achieve animated effects. I've also updated the comments on the existing shaders to clear up a couple of things: 1. Be more explicit that `Time` represents seconds since the shader loaded. Though obvious in hindsight, this was not clear to me when I was first learning/experimenting 2. Explain that `tex` ranges from 0,0 to 1,1. This is important because, when trying to port GLSL shaders from shadertoy, I at first assumed `fragCoord` and `tex` are the same thing but the former actually ranges from 0,0 to the resolution of the canvas, so some of the math doesn't work out if you just substitute it with `tex`. Any and all feedback welcome. <!-- Describe how you validated the behavior. Add automated tests wherever possible, but list manual validation steps taken as well --> ## Validation Steps Performed I ran the shaders manually in a dev build of the Terminal. I auto-spellchecked and manually proofread my additions to the readme and verifed the markdown rendering on github.
59 lines
2.2 KiB
HLSL
59 lines
2.2 KiB
HLSL
// A minimal pixel shader that shows some raster bars
|
|
|
|
// The terminal graphics as a texture
|
|
Texture2D shaderTexture;
|
|
SamplerState samplerState;
|
|
|
|
// Terminal settings such as the resolution of the texture
|
|
cbuffer PixelShaderSettings {
|
|
// The number of seconds since the pixel shader was enabled
|
|
float Time;
|
|
// UI Scale
|
|
float Scale;
|
|
// Resolution of the shaderTexture
|
|
float2 Resolution;
|
|
// Background color as rgba
|
|
float4 Background;
|
|
};
|
|
|
|
// A pixel shader is a program that given a texture coordinate (tex) produces a color.
|
|
// tex is an x,y tuple that ranges from 0,0 (top left) to 1,1 (bottom right).
|
|
// Just ignore the pos parameter.
|
|
float4 main(float4 pos : SV_POSITION, float2 tex : TEXCOORD) : SV_TARGET
|
|
{
|
|
// Read the color value at the current texture coordinate (tex)
|
|
// float4 is tuple of 4 floats, rgba
|
|
float4 color = shaderTexture.Sample(samplerState, tex);
|
|
|
|
// Read the color value at some offset, will be used as shadow
|
|
float4 ocolor = shaderTexture.Sample(samplerState, tex+2.0*Scale*float2(-1.0, -1.0)/Resolution.y);
|
|
|
|
// Thickness of raster
|
|
const float thickness = 0.1;
|
|
|
|
float ny = floor(tex.y/thickness);
|
|
float my = tex.y%thickness;
|
|
const float pi = 3.141592654;
|
|
|
|
|
|
// ny is used to compute the rasterbar base color
|
|
float cola = ny*2.0*pi;
|
|
float3 col = 0.75+0.25*float3(sin(cola*0.111), sin(cola*0.222), sin(cola*0.333));
|
|
|
|
// my is used to compute the rasterbar brightness
|
|
// smoothstep is a great little function: https://en.wikipedia.org/wiki/Smoothstep
|
|
float brightness = 1.0-smoothstep(0.0, thickness*0.5, abs(my - 0.5*thickness));
|
|
|
|
float3 rasterColor = col*brightness;
|
|
|
|
// lerp(x, y, a) is another very useful function: https://en.wikipedia.org/wiki/Linear_interpolation
|
|
float3 final = rasterColor;
|
|
// Create the drop shadow of the terminal graphics
|
|
// .w is the alpha channel, 0 is fully transparent and 1 is fully opaque
|
|
final = lerp(final, float(0.0), ocolor.w);
|
|
// Draw the terminal graphics
|
|
final = lerp(final, color.xyz, color.w);
|
|
|
|
// Return the final color, set alpha to 1 (ie opaque)
|
|
return float4(final, 1.0);
|
|
} |