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.
46 lines
1.7 KiB
HLSL
46 lines
1.7 KiB
HLSL
// A simple animated shader that draws an inverted line that scrolls down the screen
|
|
|
|
// 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 color = shaderTexture.Sample(samplerState, tex);
|
|
|
|
// Here we spread the animation over 5 seconds. We use time modulo 5 because we want
|
|
// the timer to count to five repeatedly. We then divide the result by five again
|
|
// to get a value between 0.0 and 1.0, which maps to our texture coordinate.
|
|
float linePosition = Time % 5 / 5;
|
|
|
|
// Since TEXCOORD ranges from 0.0 to 1.0, we need to divide 1.0 by the height of the
|
|
// texture to find out the size of a single pixel
|
|
float lineWidth = 1.0 / Resolution.y;
|
|
|
|
// If the current texture coordinate is in the range of our line on the Y axis:
|
|
if (tex.y > linePosition - lineWidth && tex.y < linePosition)
|
|
{
|
|
// Invert the sampled color
|
|
color.rgb = 1.0 - color.rgb;
|
|
}
|
|
|
|
return color;
|
|
}
|