Converting Shadertoy code to DirectX HLSL

Lessons learned from someone who didn't know GLSL, HLSL, or any kind of shader code a week ago.

Shadertoy is an online tool that uses WebGL (a version of GLSL) to write and run shader code. You don't need a compiler or an IDE, and you can even use it on mobile.

Shadertoy

        void mainImage( out vec4 fragColor, in vec2 fragCoord )
        {
                vec2 uv = fragCoord/iResolution.xy;
                vec4 col = texture(iChannel0, uv);
                fragColor = col;
        }

Since Shadertoy code is almost exclusively pixel shaders, your HLSL code will be a pixel shader as well. In HLSL, fragColor is COLOR0, fragCoord is SV_POSITION, and uv is TEXCOORD0. This means your mainImage() function will look like

HLSL

        float4 MainPS(float4 pos : SV_POSITION, float4 color0 : COLOR0, float2 texCoord : TEXCOORD0) : COLOR
        {
                float2 iResolution = float2(<resolutionX>, <resolutionY>);
                float4 color = tex2D(<sampler>, texCoord);
                return color;
        } 

Everything else is a 1:1 conversion between GLSL and HLSL. For example, vec4 becomes float4 and mix() becomes lerp(). Here are a few reference lists for that:

• https://learn.microsoft.com/en-us/windows/uwp/gaming/glsl-to-hlsl-reference
• https://anteru.net/blog/2016/mapping-between-HLSL-and-GLSL/