SwiftUI & Metal: Elevating Apps with Shader Techniques

Set up the shaders 101 project in Xcode as an app, create folders for views, shaders, layer effects, distortion effects, and color effects, and test responsiveness with hello Metal shaders.

Learn the shader signature and build color, distortion, and layer effect snippets in SwiftUI with Metal, including passing window or view size to shaders.

Explore creating a custom distortion shader with a float amplitude parameter, wired to a SwiftUI state variable via a slider to control real-time preview.

Learn to build a grayscale shader in SwiftUI using a Metal shader, adjusting brightness with RGB weights and a dot-product approach, and explore sliders and Swift data for customization.

Build a grayscale shader in SwiftUI using three weights, with w3 computed as 1 minus w1 and w2; manage weights via a weights model, sliders, and an add button.

Enhance the grayscale shader view in SwiftUI by fixing weight-based parameters w1, w2, w3, adding sliders and text indicators, and implementing default presets to save shader configurations.

Develop UV pixel coordinates using a metal shader and a SwiftUI UV view, computing UV from position over size to render color effects, and create size parameter snippet for reuse.

Continue exploring UV pixel coordinates by refining multiple UV shader examples, manipulating UV x and UV y, and introducing simple UV mix and image-based shaders.

Explore how uv coordinates map to an image and drive shader-based color mixing, including swizzling techniques with half4 colors and adjustable mix factors.

Resolve main actor isolated property warnings in Swift 6+ by adding brackets around parameters in closures for a visual effect, updating code for columns, rows, and mix factor.

Create a time-driven shader animation by building a time-varying view and a cool center shader, exposing time, min radius, and max radius with sliders in a timeline animation.

Develop and refine a time-driven center shader with sine time modulation, normalizing distance to center, composing red, green, and blue channels, and introducing adjustable opacity.

Learn to incorporate touch by using a metal shader called opacity zero circle, adjust color weights and mix level, and drive the effect with a drag gesture on an image.

Create a swizzle view in SwiftUI, define shader items, and present shaders in a form with a navigation title, using color effects and before-after visuals.

Learn swizzling in metal shaders by mapping color channels, preserving alpha, and experimenting with permutations like rgb, gbr, and x y z w to create varied visuals.

Learn to implement a smooth step shader in SwiftUI using a Metal color effect, with adjustable step start, line width, graph opacity, and background opacity to graph function.

Finish the smoothstep shader and implement a plot function to graph functions in UV coordinates, exploring smoothstep versus step, and shaping the area under the graph with delta and width.

Create a p curve shader in SwiftUI and Metal, translating GLSL code, with two sliders for A and B, using UV coordinates and a gradient color effect.

Learn to create and organize shader code snippets for SwiftUI and Metal, including color and distortion effects with size and time parameters, using a resource folder and test builds.

Create a grainy linear-gradient view using a dedicated metal noise shader. Build a reusable SwiftUI grainy view with configurable opacity, animation, and a three-color gradient overlay.

Implement a noise shader to create a grainy view using random values and uv coordinates. Animate via timeline and overlay on content with a linear gradient and adjustable opacity.

Create a split red blue (RB) shader that divides the view by a float percentage, and optionally implement drag gesture interaction for dynamic control.

Explore building a split red-blue shader in Metal, replacing time with percent and using step and mix to avoid if statements. Learn hands-on shader editing workflow in SwiftUI and Metal.

Learn to solve a shader challenge without if statements by using step and mix functions to create a red and blue split with a position-based mask in Metal shader.

Set up a SwiftUI and Metal glow project, creating a glowing circle shader and a SwiftUI view, with a delta slider to shape the glow.

Replace the if-statement with the step function, using Len and delta with edge to drive the threshold and produce a concise half4 output.

Add a glow by computing a distance value from length minus delta, apply a glow inversely proportional to distance, clamp to 0–1, and use a 0.01 constant.

increase the glow intensity by adding an intensity parameter to the glowing circle shader, wired through a SwiftUI view with a slider from 0 to 20 to disable glow.

Learn how to apply a shader to the foreground text and to a shape style in SwiftUI. Explore shape style shader signature and its color return as a fill pattern.

Create a stripes view in SwiftUI, setting up a shader-ready interface with a blue placeholder, circle clip, and sliders for stripe width, preparing to apply Metal shaders later.

Create a stripes shader in metal to render red, green, and blue stripes with a configurable width, using a stripes fill shader and color effects.

Learn to implement a tile shader in SwiftUI and Metal, add a size parameter, set up columns and rows, and apply fmod-based tiling for a distortion effect.

Create an angle view in SwiftUI with force and angle sliders, a reset button, and angle buttons; rotate an arrow with a rotation effect and convert radians to degrees, shader-ready.

Implement the angle shader in the distortion effect, using cosine and sine with a force parameter to compute displacement, adjust for a flipped y axis, and drive animated visuals.

Build a generic angle shader in SwiftUI by creating an angle view that accepts a shader function, with min/max force and param n, wired to the angle shader for experimentation.

Explore how to create this inspirational shader and use a tap gesture to toggle between a rectangle and full screen.

Set up a SwiftUI view with a shader and sliders to adjust speed and complexity. Toggle between a pizza and full screen, refining the inspirational shader.

Explore an inspirational shader that iterates RGB color components over time using adjustable UV coordinates, aspect ratio, and a time-based oscillation, with sliders and tap gestures to reset values.

Create a lava lamp effect in a dedicated project using shader techniques. Explore how SwiftUI & Metal enable this visual effect.

Set up a lava lamp view in SwiftUI by adding a lava lamp shader in a metal file and applying a full-screen color shader that ignores safe area.

Create a lava lamp shader with multiple blobs in SwiftUI and Metal, using blob centers and strength to influence pixels, while adjusting threshold and distance factor with sliders.

Apply the sine function to drive blob positions in x and y, adjust speed and offset, and square the result to keep values between 0 and 1.

Color blobs by height using uv coordinates to bias color, achieving red at the top and yellow at the bottom, then blend two colors and adjust opacity.

Explore creating a background centered gradient by mixing a center blue color with an edge magenta, using uvex to shape the gradient, and fine-tuning colors for a vivid shader effect.

Enhance blob colors by defining yellow bottom and red top, adjust opacity, and blend with the y UV values to create a lava lamp effect.

Explore Voronoi shaders that divide space by proximity to points to form cell-like patterns used for organic textures such as stone or water, with distance function drastically changing the effect.

Create a voronoi shader in a multi-platform Xcode project, using 30 seed points and 30 seed colors to color pixels by nearest seed point via distance and min distance threshold.

Display seed points by computing distance, show those within a circle radius, color them black when below the radius, and explore min distance values for color blending and animation.

Animate the voronoi shader with an animated seed and time-based oscillation using sine and cosine, producing subtle seed shifts and evolving colors for future color mixing of adjacent seeds.

Learn to mix adjacent seed colors using time-based shader variations and seed-color modulation. Tweak parameters like min distance and amplitude to craft evolving, creative color blends.

Translate GLSL code into the Metal shading language (MSL) to create a colorful shader. Focus on translating code and consult a detailed tutorial for deeper understanding.

Translate GLSL code to the metal shading language and implement a color shader driven by time and size, porting vec3 to half3 for efficient colors.

Demonstrates a GLSL to MSL variation by replacing blue with a linear gradient, experimenting with mix values (0.5, 0.8) and UV coordinates to generate colorful shader results.

Set up the view in SwiftUI for shader-driven fractal Brownian motion, using clouds imagery, overlays, and a toggle to reveal explanation, and prepare a dedicated fractal Brownian motion button view.

Set up the shader code in a Metal file and integrate the FPM shader into SwiftUI. Align the signature with bounding rect and time to drive the red color effect.

Explore setting up a shader noise function and fractional brownian motion (fbm) with octaves, rotating and shifting uvs, using a 2x2 rotation matrix, and integrating a hash-based random.

Explore fractal brownian motion shading by implementing the fvwm shader, generating uv coordinates, integrating a glow factor, and rendering animated color lines with time-based sine/cosine oscillations.