Learning Metal for SwiftUI

Issue #919

WWDC23 introduces lots of new additions to SwiftUI, notably Metal shader support with these modifiers

colorEffect: Returns a new view that applies shader to self as a filter effect on the color of each pixel.
layerEffect: Returns a new view that applies shader to self as a filter on the raster layer created from self.
distortionEffect: Returns a new view that applies shader to self as a geometric distortion effect on the location of each pixel.

So you can create effects like these

New in #SwiftUI for iOS 17, you can use Metal Shader for effects 🧙 #WWDC23 #iosdev

There are layerEffect, colorEffect and distortionEffect to apply Shader on raster layer, filter effect and geometric distortion effect.

Now what's left is to learn Metal Shader. Here I wrote… pic.twitter.com/byUSW0EuqX
— Khoa 🔥 (@onmyway133) June 10, 2023

Before we could also use Metal with SwiftUI by wrapping MTKView in UIViewRepresentable or SpriteView with shader, so learning a bit about Metal helps a long way

Here are the resources I’ve found to be very useful

ShaderToy

Shader Toy is a shader community where people share very creative and interesting shader effects in OpenGL. OpenGL and Metal language are somewhat similar so you can read and understand the logic

Metal by example

Great book by Warren Moore, who worked on camera and photo apps at Apple. As of March 2023 you can download the book for free on this site.

Warren also has a very nice 30 days of Metal tutorials that we can follow along the basics like device, buffer and texture.

You can compile HLSL and GLSL using fxc.exe, dxc.exe, glslangValidator.exe, spirv-cross.exe, and mali-sc.exe. You can see the compiler output and disassembly. You can chain multiple shader compilers together to transpile one language to another. You can share permalinks to shaders