SwiftUI + Metal - Create special effects by building your own shaders

In this video I show you how to write your own Metal shaders for use with SwiftUI, so you can create beautiful special effects that run at blazing fast speeds. Get the code here: github.com/twostraws/Inferno
00:00 Introduction
09:19 Passthrough
14:50 Recolor
16:09 Invert Alpha
17:04 Gradient Fill
18:35 Animated Gradient
21:57 Wave
26:07 Relative Wave
32:25 Loupe
40:57 SwiftUI transitions
43:10 Shape transitions
53:00 Crosswarp transition
1:00:13 Generating everything with Metal
1:14:03 Where to find more resources
1:15:30 Get the code for this video

[@antoniopalomba5123]

Thank you so much for this tutorial Paul! I was looking for some inspiration to start my Metal study.

[@leomarcotte4294]

This is by far the best tutorial that can currenlty be found on the internet, thank you so much for taking the time to explain every bit of metal shaders.

[@steveloengard5139]

Thanks, Paul. I wrote some shaders in C++ many years ago and I've been wondering how to incorporate them into SwiftUI and Metal for macOS. This is perfect!

[@twostraws]

Make sure and check out the Inferno repository - all contributions welcome! github.com/twostraws/Inferno

This was enlightening and inspiring. Btw I must have rewatched the part around 45:40 like 5 times

[@hoagy_ytfc]

Not something _every_ developer needs to know - but for those of us who do, this is a great tutorial. Thanks Paul.

[@RBilsland]

Thanks Paul, after attempting to start Metal shaders a number of time I now feel like I actually have a good base to start exploring from this time! 👍🏻

[@UnbekanntesSubjekt]

I must admit that you, sire, are a didactic genius. Love your instructions, and your dogs are nice, too.

[@kbusse]

Great tutorial, thanks a ton! This single video will explode the number of metal shaders used in iOS Slight real life nitpick on the flag animation: The waves run from right to left in your example, so the waves run upwind ;-)

[@NiclasJeppsson]

Love this, more Metal videos! Im currently in the process of learning Metal, and you are completely right, it’s hard. However, with the power we have in our iPhones, there’s so much creativity that can be unlocked by learning it :)

[@Coffeeology]

Freshly baked Two Straws video. Perfect for my morning coffee.

[@huwrowlands]

The full sinebow effect reminds me of something used to advertise blank VHS tapes Great work!

[@AmitGupta-rt2gp]

Thank you Paul. This video is super helpful. Thank you for always putting out such rich and helpful content.

[@oleksandrlohozinskyi3483]

Hey, Paul, i just want to say that love your person as a content creator and will to wish even more imagination in the created content, etc etc.

[@atanamvari7610]

Just keep doing what you're doing man. So thorough

[@marcusziadev]

Watched this over 2 morning coffees. Good stuff. Shared at work

[@hybridxdesign]

I have learn so much from this turtorial, thanks.

[@theblckbird]

congrats on 100K!!!

[@mylaluna]

Good stuff. I have never touched shaders before and I thought only game developers care about it. Now I think I may able to use shaders on my app.

[@WenzelStone]

Oh God, this is mind-blowing!

[@MarkEvans5]

😂 the windows shortcut was GOLD!!

[@sg1885]

amazing

[@zolanihogana]

This guy goes above and beyond for us! Thank you

[@johndoe276]

Great video! Thanks, Paul (as always 😀) Question on the relative wave shader: Shouldn't it be pos.x instead of pos.y within the sin function?

[@designckinet]

Really interesting!

[@douglasaraujo9763]

Wow, amazing!

[@BlaineL]

Thank you done much for this Paul. Truly awesome ! Just don't know how you find the time! 👍

[@maksimums6819]

Thank you!

[@VladimirKim-cl3rh]

Amazing !!!

[@LyndonMaydwell]

This is great! Is there a way to output values computed in a shader back to a state variable, etc?

[@olilarkin]

awesome!

[@calmsz]

Thank you Professor!

[@phantuananh2163]

Awesomeeeeeeeeeeeee

[@arkadiusz6688]

Wonder if there's something like shader language but for audio programming.

[@simpleinterest360]

Please make more content around computer graphics and metal

[@gmebu]

Wow Paul

[@emilvladov3216]

Adjusting the maxSampleOffset seems to get rid of the clipping at 25:19 instead of the padding

[@RyuuzakiJulio]

Really amazing effects! But the alpha 0 value for transparency doesn't show transparent if the image is on top of a colored background like a gradient or an image. How can we make it actually transparent on top of another object?

[@RyuuzakiJulio]

Figured the answer: [[stitchable]] half4 recolor(float2 position, half4 color) { if (color.a > 0) { color.rgb = half3(1.0, 0.0, 0.0); } return color; }

[@AlanW]

Is it possible to use this as the equivalent of a UIVisualEffectView? Our designers continue to insist on Figma, which has no regard for the built in blurs iOS can provide, and this would be great for getting the exact tinted gaussian blurs they keep dreaming up!

[@Desertbynight]

I couldn't find how to make .float(elapsed) work. Tried to swap it with (time) but Generic parameter 'Content' could not be inferred

[@brucknerdevilliers]

Mine worked with time, but you need the @State private var start = Date.now and only one instance of 'let time = start.distance(to: tl.date)'

[@michaelprenez-isbell8672]

works on Intel too?

[@williamsquires3070]

(@38:35) You forgot to define ‘offset’. As a result, the code won’t compile. Error is: (on the line with “TimelineView(.animation) {tl in”) Generic parameter ‘Content’ could not be inferred Explicitly specify the generic parameters to fix this issue. because nothing defines ‘offset’ as something that can be converted to a float2. Also, the loupe() function takes 4 arguments, but only two have been passed in (“.float2(proxy.size)” and “float2(offset)”) Where’s the reference to the SwiftUI::Layer (2nd argument) and the float2 touch (4th argument)?

[@thebrokenpenguin1]

It was my understanding that the position and layer automatically get passed in so we don't have to worry about those. As for the "offset" parameter, this should be the "touch" variable that he defines on the previous slide. You may find that the maxDistance and zoomFactor are too big (I certainly did), so you can experiment with making those smaller.

[@bartleby222]

thanks Paul!