SwiftUI Metal Shader Tutorials + Replacement from GLSL to MSL

IKEH — Thu, 16 Nov 2023 15:35:56 GMT

Introduction

Up until now, when I wanted to play with Metal, I always talked about low-level things like queues and pipelines, which made it difficult to get started.
— Example: Metal by Tutorials
At that time, a Metal Shader modifier that can be used with SwiftUI was released at WWDC2023.
This makes it possible to implement it without worrying about low-level layers, and allows you to easily try out Metal Shader.
However, even at WWDC, it was briefly mentioned in What’s new in SwiftUI , and the official documentation is only briefly written.

Fortunately, there are many technical articles, so in this article I would like to use these as a reference to systematize the content and talk about rewriting an existing shader (ShaderToy’s GLSL) to Metal.

References

Metal for SwiftUI
— Easy to understand and recommended for beginners
I made a raindrop effect for the iOS 17 weather app
Effect like rare card hologram with Metal Shader on SwiftUI
SwiftUI Metal Shader API in iOS 17
How to add Metal shaders to SwiftUI views using layer effects
SwiftUI transitions with distortion effect and Metal Shaders
Screen transition using Shader

GitHub

swiftui-metal-shader-tutorial
— I would be happy if you could star me if you like!

Introduction to Shader modifier

Introduction to colorEffect

First, let’s try how to actually write a Shader.
This time, we will create a Shader that will fill in the color passed as an argument.
Shader modifier can be written as follows.
— There are several types of modifiers (described later), and here we will use colorEffect(_:isEnabled:) .
ShaderFunctionSpecify the shader to use.
— This time fillColorwe have specified a shader called , which will be implemented in the Metal file that we will create later.
— Also, arguments are the arguments to be passed to the Shader, and are converted to a struct called Shader.Argument .
— This time I am converting SwiftUI to ColorSwiftUI .Shader.Argument

Rectangle()
    .frame(width: 100, height: 100)
    .colorEffect(
        Shader(function: ShaderFunction(library: .default,name: "fillColor"),
               arguments: [.color(Color.blue)])
    )

It can also be written more concisely as follows.
— Since ShaderLibrary @dynamicMemberLookupimplements , it can be written like this (reference)

Rectangle()
    .frame(width: 100, height: 100)
    .colorEffect(
        ShaderLibrary.default.fillColor(.color(Color.blue))
    )

fillColorNow let's implement the Metal Shader that we declared earlier .
Create a Metal file with an appropriate name as shown below.

The Shader function is as follows.
The language used is Metal Shader Language (MSL).
stitchablerepresents an MSL function ( for reference )
half4is the return type of this function, fillColorand is the function name.
There are three arguments here, and the first two colorEffectare the values passed by default when using , and are the current pixel position and color, respectively.
— Since this MSL function is called for each pixel, operations can be performed on a pixel-by-pixel basis.
The third and subsequent arguments argumentscorrespond to the arguments passed in .
colorEffectIn this case, the return value of the function is reflected in the color of the pixel at the current position, so in this case the original shape will be newColorfilled with.

#include 
using namespace metal;

[[ stitchable ]] half4 fillColor
(
 float2 position, // Current pixel position (given by default)
 half4 color, // Color of current pixel (given by default)
 half4 newColor
 ) {    
    return newColor; // r, g, b, a
}

When you build with the above steps, a Rectangle filled with the specified color will be displayed as shown below.

For example, if you return the original color if the x coordinate is less than 30px as shown below, it will be as follows.

#include 
using namespace metal;

[[ stitchable ]] half4 fillColor
(
 float2 position,
 half4 color,
 half4 newColor
 ) {
    if (position.x < 30 ) {
        return color;
    }
    return newColor; // r, g, b, a
}

Another colorEffectexample is implementing a Shader that makes an image monochrome.
Here we are using the original View color and calculating the gray color from the current pixel color.

Image(.xcode)
    .resizable()
    .frame(width: 100, height: 100)
    .colorEffect(
        ShaderLibrary.default.monochrome()
    )

[[ stitchable ]] half4 monochrome
(
 float2 position,
 half4 color
 ) {
    half v = (color.r + color.g + color.b) / 3.0;
    return half4(v, v, v, 1.0);
}

In this way, colorEffect(_:isEnabled:) can be said to be a modifier that can be used for the following purposes.
— If you want to freely draw shapes etc.
— If you want to manipulate the color of the original View

Types of Shader modifiers and their usage

Now, as I mentioned earlier that there are several types of modifiers, there are the following three.
colorEffect(_:isEnabled:)
— If you want to manipulate the color of the original View (e.g. make it monochrome/remove red color)
— If you want to freely draw shapes etc. (only the drawing area is used as information from the original View)
distortionEffect(_:maxSampleOffset:isEnabled:)
— If you want to transform the original image
— (In my personal opinion, I can’t think of any use for it alone, so layerEffect will likely be used in many cases.)
layerEffect(_:maxSampleOffset:isEnabled:)
— If you want to add effects by manipulating the original View (e.g. pixelization, page turning effect)
— Has both colorEffect and distortionEffect functions (*Personal impression)
— I think you can replace it with layerEffect without actually using these two.

Introduction to distortionEffect

Next, let’s talk about distortionEffect(_:maxSampleOffset:isEnabled:) .
As mentioned earlier, this can transform the original image, and this time we will create a Shader that shifts it 10px to the left.

distortionEffectAs with colorEffect, the current pixel position is passed as an argument.
The return value returns the pixel position, and the color of the pixel returned in the return value becomes the color of the pixel at the current position.
It’s difficult to express, so I’ll explain it with this Shader…
— The color referenced by each pixel is the color of the position 10px to the right from the current position.
— For example, the color of the pixel at (x, y) = (10, 10) is the color of the pixel at (20, 10).
— As a result, the figure will be drawn 10px to the left.

#include 
using namespace metal;

[[ stitchable ]] float2 shiftToLeft
(
 float2 position // Current pixel position
 ) {
    return float2(position.x + 10, position.y);
}

*Some shapes have been added to make it easier to see.

ZStack {
    Color.yellow.opacity(0.4)
    Rectangle()
        .stroke(lineWidth: 1)
        .frame(width: 100, height: 100)
        .zIndex(1)
    Rectangle()
        .foregroundStyle(.blue)
        .frame(width: 100, height: 100)
        .distortionEffect(
            ShaderLibrary.default.shiftToLeft(),
            maxSampleOffset: .zero
        )
}
.frame(width: 150, height: 150)

Also, in this case, the shifted portion is not drawn.
So, if you add the code as below, everything will be drawn.

Rectangle()
    .foregroundStyle(.blue)
    .frame(width: 100, height: 100)
+   .padding(.horizontal, 10) // added
+   .drawingGroup() // added
    .distortionEffect(
        ShaderLibrary.default.shiftToLeft(),
-       maxSampleOffset: .zero  // The figure is cut.
+       maxSampleOffset: .init(width: 10, height: 0) // added
    )

I haven’t fully digested this topic yet, so I’d like you to refer to the source article.
— SwiftUI and Metal
Distortion effect and offsets explained
(my vague understanding)
— paddingExpand the drawing range of View using
— paddingis not subject to Shader, so drawingGrouptreat it as one View in SwiftUI.
— maxSampleOffsetto expand the drawing range of Shader modifier?
(I don’t really understand even after looking at the documentation…)

distortionEffect(_:maxSampleOffset:isEnabled:)
maxSampleOffset

The maximum distance in each axis between the returned source pixel position and the destination pixel position, for all source pixels.

Introduction to layerEffect

Finally, try using layerEffect(_:maxSampleOffset:isEnabled:) .

Has both colorEffect and distortionEffect functions (*Personal impression)

The Shader implemented colorEffectin this way can be implemented with.distortionEffectlayerEffect

The implementation of Shader is as follows.
SwiftUI::Layer layerA major feature is that it takes in addition to the current position as an argument .
— #include You can now use it as , and layer.sample(position)get the color at any position like .
This function plays a large role, and allows various expressions of Shader.
The return value also colorEffectreturns the color of the current position.

#include 
#include 
using namespace metal;

[[ stitchable ]] half4 monochromeWithLayerEffect
(
 float2 position,
 SwiftUI::Layer layer
 ) {
    half4 color = layer.sample(position);
    half v = (color.r + color.g + color.b) / 3.0;
    return half4(v, v, v, 1.0);
}

[[ stitchable ]] half4 shiftToLeftWithLayerEffect
(
 float2 position,
 SwiftUI::Layer layer
 ) {
    float2 newPosition = float2(position.x + 10, position.y);
    half4 color = layer.sample(newPosition);
    return color;
}

The implementation on the SwiftUI side is as follows.
maxSampleOffsetetc. distortionEffectare the same.

Image(.xcode)
    .resizable()
    .frame(width: 100, height: 100)
    .layerEffect(
        ShaderLibrary.default.monochromeWithLayerEffect(),
        maxSampleOffset: .zero
    )

ZStack {
    Color.yellow.opacity(0.4)
    Rectangle()
        .stroke(lineWidth: 1)
        .frame(width: 100, height: 100)
        .zIndex(1)
    Rectangle()
        .foregroundStyle(.blue)
        .frame(width: 100, height: 100)
        .padding(.horizontal, 10)
        .drawingGroup()
        .layerEffect(
            ShaderLibrary.default.shiftToLeftWithLayerEffect(),
            maxSampleOffset: .init(width: 10, height: 0)
        )
}
.frame(width: 150, height: 150)

This is all about how to use Shader modifiers and how to use them properly.

Replacing GLSL->MSL

Rather than actually writing a Shader from scratch, I think you often want to reuse an existing Shader, so let’s look at an example of actually replacing GLSL (ShaderToy) with MSL.
If you have any questions about the details of GLSL or MSL grammar during the talk, please refer to “MSL and GLSL Grammar” below.

Function declarations and types

First, let’s replace the Shader written in GLSL below with MSL.

https://www.shadertoy.com/view/Md23DV

The values given by the ShaderToy fragColorare fragCoordthe current pixel color and position, respectively.

#elif TUTORIAL == 3

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
 vec3 color = vec3(0.0, 1.0, 1.0);
 float alpha = 1.0;
 
 vec4 pixel = vec4(color, alpha);
 fragColor = pixel;
}

First, replace the function declaration with the MSL one.

[[ stitchable ]] half4 aqua
(
 float2 position,
 SwiftUI::Layer layer
 ) {
    vec3 color = vec3(0.0, 1.0, 1.0);
    float alpha = 1.0;
    
    vec4 pixel = vec4(color, alpha);
    fragColor = pixel;
}

Next, replace the type.
For example, replace vec3 with float3.

[[ stitchable ]] half4 aqua
(
 float2 position,
 SwiftUI::Layer layer
 ) {
-   vec3 color = vec3(0.0, 1.0, 1.0);
+   float3 color = float3(0.0, 1.0, 1.0); # added
    float alpha = 1.0;
    
-   vec4 pixel = vec4(color, alpha);
+   float4 pixel = float4(color, alpha); # added
    fragColor = pixel;
}

In GLSL, the value assigned to fragColor is reflected as the pixel’s color.
On the other hand, in MSL, the return value of return is the pixel color, as described above, and the type is a variable of type half4, so it is used as such.
— It is good to recognize that the replacement of vec can be done with a basic float, and that half appears on the MSL side only when it is related to color.
— There is a difference in precision between float and half, with float being 32 bits and half being 16 bits.

[[ stitchable ]] half4 aqua
(
 float2 position,
 SwiftUI::Layer layer
 ) {
    float3 color = float3(0.0, 1.0, 1.0);
    float alpha = 1.0;
    
    float4 pixel = float4(color, alpha);
-   fragColor = pixel;    
+   return half4(pixel); # added
}

With the above, I was able to rewrite it to MSL!
Basically, it is OK if you replace it mechanically like this.

boundingRect and coordinate system

Next, try replacing the following.

https://www.shadertoy.com/view/Md23DV

*Because I want to check the y coordinate, I replaced the original code r.xwith .r.y

#elif TUTORIAL == 7

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
   // (0, 0) ~ (1, 1)
 vec2 r = vec2(fragCoord.x / iResolution.x,
      fragCoord.y / iResolution.y);
 
 vec3 color1 = vec3(0.841, 0.582, 0.594);
 vec3 color2 = vec3(0.884, 0.850, 0.648);
 vec3 color3 = vec3(0.348, 0.555, 0.641);
 vec3 pixel;
 
 if( r.y < 1.0/3.0) {
  pixel = color1;
 } else if( r.y < 2.0/3.0 ) {
  pixel = color2;
 } else {
  pixel = color3;
 }
 
 fragColor = vec4(pixel, 1.0);
}

First, perform the same replacement as before.

[[ stitchable ]] half4 tutorial7
(
 float2 position,
 SwiftUI::Layer layer,
 float4 bounds // x,y,z,w = (x, y, width, height)
 ) {
    // (0, 0) ~ (1, 1)
    float2 r = float2(fragCoord.x / iResolution.x,
                      fragCoord.y / iResolution.y);
    
    float3 color1 = float3(0.841, 0.582, 0.594);
    float3 color2 = float3(0.884, 0.850, 0.648);
    float3 color3 = float3(0.348, 0.555, 0.641);
    float3 pixel;
        
    if( r.y < 1.0/3.0) {
        pixel = color1;
    } else if( r.y < 2.0/3.0 ) {
        pixel = color2;
    } else {
        pixel = color3;
    }
            
    return half4(half3(pixel), 1.0);
}

Also, since we need the size of the original View this time, we pass the boundingRect defined in Shader.Argument to arguments.

Rectangle()
    .frame(width: 100, height: 100)
    .layerEffect(
        ShaderLibrary.default.tutorial7(.boundingRect),
        maxSampleOffset: .zero
    )

iResolutionAs stated in GLSL , this float2is the type and information about the size of the View.
In MSL, this corresponds to the boundingRect passed earlier .float4 bounds
*The width corresponds to w, not , so be careful not to write it incorrectly.z

// View width
iResolution.x -> bounds.z
// View height
iResolution.y -> bounds.w

fragCoordor positionapplicable.
Reflecting the above, the code will be as follows.

[[ stitchable ]] half4 tutorial7
(
 float2 position,
 SwiftUI::Layer layer,
 float4 bounds // x,y,z,w = (x, y, width, height)
 ) {
    // (0, 0) ~ (1, 1)
    float2 fragCoord = position;
    float2 r = float2(fragCoord.x / bounds.z,
                      fragCoord.y / bounds.w);
    
    float3 color1 = float3(0.841, 0.582, 0.594);
    float3 color2 = float3(0.884, 0.850, 0.648);
    float3 color3 = float3(0.348, 0.555, 0.641);
    float3 pixel;
        
    if( r.y < 1.0/3.0) {
        pixel = color1;
    } else if( r.y < 2.0/3.0 ) {
        pixel = color2;
    } else {
        pixel = color3;
    }
            
    return half4(half3(pixel), 1.0);
}

However, when you build this and check the display, the y coordinate is reversed.
This is because in GLSL, the origin is at the bottom left, and in MSL, the origin is at the top left, and the y coordinates are reversed.

Therefore, after normalization, it is necessary to correct the y-coordinate by inverting it.

float2 r = float2(fragCoord.x / bounds.z,
                  fragCoord.y / bounds.w);
r = float2(r.x, 1.0 - r.y);

However, I’ve been writing this way for a while, but there’s a problem: There are two ways to normalize the Lower left is the origin(0, 0) ~ (1, 1)coordinates The center is the origin: (-1, -1) ~ (1, 1).
In the latter case, you can just multiply the y coordinate by -1, but the way you write the normalization differs from person to person, and it was a hassle to judge which coordinate system each time.
Therefore, I came up with the idea that it would be possible to handle both by inverting the original coordinates from the beginning, and finally decided to make the following corrections.

- float2 fragCoord = position;
+ float2 fragCoord = float2(position.x, bounds.z - position.y);

The final code is as follows.

[[ stitchable ]] half4 tutorial7
(
 float2 position,
 SwiftUI::Layer layer,
 float4 bounds // x,y,z,w = (x, y, width, height)
 ) {
    float2 fragCoord = float2(position.x, bounds.z - position.y);
    // (0, 0) ~ (1, 1)
    float2 r = float2(fragCoord.x / bounds.z,
                      fragCoord.y / bounds.w);
    
    float3 color1 = float3(0.841, 0.582, 0.594);
    float3 color2 = float3(0.884, 0.850, 0.648);
    float3 color3 = float3(0.348, 0.555, 0.641);
    float3 pixel;
        
    if( r.y < 1.0/3.0) {
        pixel = color1;
    } else if( r.y < 2.0/3.0 ) {
        pixel = color2;
    } else {
        pixel = color3;
    }
            
    return half4(half3(pixel), 1.0);
}

Other replacement examples

The above was about replacing GLSL with MSL.
While actually performing the replacement, I came across situations where it was difficult to understand a little bit, such as the reverse of coordinate normalization processing, so it might be a good idea to familiarize yourself with the basics of GLSL by referring to the following. not.
— [Serial] It’s super easy if you try it! First shader coding starting with WebGL and GLSL (1)
— GLSL 2D Tutorials
— — In addition to the coordinate system, it is also useful for how to use functions.
Finally, I will give an example of what I replaced with my MSL.
— (Please forgive any inconsistency as the code was developed through trial and error)
PageCurl effect
— GLSL(ShaderToy)
— MSL

That’s the main topic, and I’ll go into more detail below.

MSL and GLSL grammar

Below is a summary of the pages I referred to regarding grammar and specifications.

GLSL grammar

[Serial] It’s super easy if you try it! First shader coding starting with WebGL and GLSL (1)
— A very easy to understand introduction to GLSL
Notes about GLSL
— List of functions
GLSL~4.1 Basic types
Pi = 3.1415926
— Pi is declared using constants.

#define M_PI 3.1415926535897932384626433832795

ShaderToy features

Shader†Introduction†

fragCoord is “coordinates of the pixel whose color is to be determined (lower left origin)”
fragColor is “a vector whose xyzw components each have the RGBA components of that pixel”.

Handling of iMouse

iMouse is often used with Shadertoy, but is rather troublesome when used with TouchDesigner. Shadertoy’s iMouse holds four values.
“Mouse coordinates XY while the left mouse button is pressed” and “Mouse coordinates XY at the moment the left mouse button is pressed”. The latter part is troublesome, as the XY coordinates become 0 the moment the mouse button stops being pressed.

MSL grammar

constant definition

#define pi float(3.14159265359)
#define blue half4(0.0, 0.0, 1.0, 1.0)
#define radius float(0.1)

Difference between mod and fmod

Since there are differences between GLSL modand MSL fmod, you need to define the mod as shown below.
This is because the treatment of small numbers is different between each and floor and truncate.
refs: Handle differences between the glsl mod function and the metal::fmod function. #802

GLSL

https://qiita.com/edo_m18/items/71f6064f3355be7e4f45
x-y*floor(x/y)

MSL

https://developer.apple.com/metal/Metal-Shading-Language-Specification.pdf

x-y*trunc(x/y)

template
inline Tx mod(Tx x, Ty y)
{
    return x - y * floor(x / y);
}

mix

Since mix is not defined in MSL, define a function.

https://mike-neko.github.io/blog/metal-function/
T mix(T x, T y, T a)
x + (y — x) * a

template
inline Txy mix(Txy x, Txy y, Ta a)
{
    return x + (y - x) * a;
}

textureLod

This article is very helpful.

According to someone who tried to create a raindrop effect for an iOS 17 weather app,
in the implementation of the sample function in SwiftUI::Layer, the sampler was fixed without the sampler’s address::clamp_to_edge option, so the layerEffect caused the image to be distorted. There seems to be a problem with not being able to get the size. Therefore, you can solve the problem by preparing your own sampler and directly accessing and applying the texture in layer.tex.

inout

GLSL allows you to use inout by reference.

void disk(vec2 r, vec2 center, float radius, vec3 color, inout vec3 pixel) {
 if( length(r-center) < radius) {
  pixel = color;
 }
}

On the other hand, in MSL, inout seems difficult, so use a function that returns a return value instead.
Even when I saw the story about inout Equivalent , it was so difficult that I couldn’t understand it. .

half3 disk(float2 r, float2 center, float radius, half3 color, half3 pixel) {
    if( length(r-center) < radius) {
        return color;
    }
    return pixel;
}

Argument quick reference table

We often pass time and drag position to Shader, so here is a quick reference table.

Example of passing elapsed time

struct TimeSampleView: View {
    
    private let startDate = Date()
    
    var body: some View {
        TimelineView(.animation) { context in
            let elapsedTime = context.date.timeIntervalSince1970 - self.startDate.timeIntervalSince1970
            RoundedRectangle(cornerRadius: 12)
                .foregroundStyle(.black)
                .frame(width: 100, height: 100)
                .layerEffect(
                    ShaderLibrary.default.timeSample(
                        .float(elapsedTime)
                    ),
                    maxSampleOffset: .zero
                )
        }
    }
}

#include 
#include 
using namespace metal;


[[ stitchable ]] half4 timeSample
(
 float2 position,
 SwiftUI::Layer layer,
 float secs
 ) {
    float r = abs(sin(secs * 1.0));
    float g = abs(cos(secs * 1.3));
    float b = abs(tan(secs * 1.5));
    return half4(r, g, b, 1.0);
}

Example of passing drag position

As a side note, withAnimationthere were some Animations that were not usable, for example, the default .springView was not updated.

struct DragGestureSample: View {
    
    @State private var draggingLocation: CGPoint = .init(x: 50, y: 50)
    
    var body: some View {
        RoundedRectangle(cornerRadius: 12)
            .foregroundStyle(.black)
            .frame(width: 100, height: 100)
            .layerEffect(
                ShaderLibrary.default.draggingLocationSample(
                    .boundingRect,
                    .float2(draggingLocation)
                ),
                maxSampleOffset: .zero
            )
            .gesture(
                DragGesture(coordinateSpace: .local).onChanged { value in
                    draggingLocation = value.location
                }.onEnded { value in
                    withAnimation(.easeInOut(duration: 0.1)) {
                        draggingLocation = .init(x: 50, y: 50)
                    }
                }
            )
    }
}

In GLSL (ShaderToy), the drag position iMousecorresponds to .
You don’t need to worry about the MSL logic, but positionthe point is that normalization is necessary as well.

https://note.com/toyoshimorioka/n/nf908ce35d0ea
Shadertoy’s iMouse holds 4 values.

“Mouse coordinates XY while the left mouse button is pressed” and “Mouse coordinates XY at the moment the left mouse button is pressed”. The latter part is troublesome, as the XY coordinates become 0 the moment the mouse button stops being pressed.

half3 disk(float2 r, float2 center, float radius, half3 fillColor, half3 backgroundColor) {
    if( length(r-center) < radius) {
        return fillColor;
    }
    return backgroundColor;
}

[[ stitchable ]] half4 draggingLocationSample
(
 float2 _position,
 SwiftUI::Layer layer,
 float4 bounds, // x,y,z,w = (x, y, width, height)
 float2 _draggingLocation
 ) {
    // center nomarized
    float2 position = float2(_position.x, bounds.w - _position.y);
    float2 draggingLocation = float2(_draggingLocation.x, bounds.w - _draggingLocation.y);
    float2 uv =  2.0 * float2(position.xy - 0.5 * bounds.zw ) / bounds.w;
    float2 uv_draggingLocation =  2.0 * float2(draggingLocation.xy - 0.5 * bounds.zw ) / bounds.w;
    
    half3 backgroundColor = half3(0.3);
    half3 yellow = half3(1.00, 0.329, 0.298);
    half3 pixel = disk(uv, uv_draggingLocation, 0.5, yellow, backgroundColor);
    
    return half4(pixel, 1.0);
}

SwiftUI Metal Shader limitations

Currently (as of 2023–11–11) SwiftUI Metal Shader has some limitations.

Only compatible with SwiftUI View

Currently, SwiftUI’s Metal Shader is only compatible with SwiftUI’s View, and cannot be applied to AppKit/UIKit.
— Reference: How to check that SwiftUI List is internally UIKit

https://developer.apple.com/documentation/swiftui/view/layereffect(_:maxsampleoffset:isenabled:)
Important
Views backed by AppKit or UIKit views may not render into the filtered layer. Instead, they log a warning and display a placeholder image to highlight the error.

Only one image can be passed to the Shader

Currently, only one Image can be passed to the Shader in arguments.

image(_:)
Currently only one image parameter is supported per Shader instance.

Stories by IKEH on Medium

SwiftUI Metal Shader Tutorials + Replacement from GLSL to MSL

Introduction

References

GitHub

Introduction to Shader modifier

Introduction to colorEffect

Types of Shader modifiers and their usage

Introduction to distortionEffect

Introduction to layerEffect

Replacing GLSL->MSL

Function declarations and types

boundingRect and coordinate system

Other replacement examples

MSL and GLSL grammar

GLSL grammar

ShaderToy features

MSL grammar

constant definition

Difference between mod and fmod

mix

textureLod

inout

Argument quick reference table

Example of passing elapsed time

Example of passing drag position

SwiftUI Metal Shader limitations

Only compatible with SwiftUI View

Only one image can be passed to the Shader