SwiftUI + Metal - Create special effects by building your own 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

[@benpearman50]

Incredible tutorial! One small error at 35:46 though. When dealing with a non-square aspect ratio the correct formula for displacement is: (delta.x • delta.x) + pow((delta.y / aspectRatio), 2); You have to divide your delta Y by the aspect ratio before squaring it, otherwise the circle will be a tad on the long side ;)

[@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.

[@antoniopalomba5123]

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

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

[@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 ;-)

[@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! 👍🏻

[@hoagy_ytfc]

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

[@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 :)

[@0x0skai]

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.

[@Coffeeology]

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

[@UnbekanntesSubjekt]

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

[@atanamvari7610]

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

[@huwrowlands]

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

[@marcusziadev]

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

[@AmitGupta-rt2gp]

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

[@hybridxdesign]

I have learn so much from this turtorial, thanks.

[@XeZrunner]

This is an incredibly useful video! Thank you.

[@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.

[@TheZazatv]

Paul thank u so much I've been wondering how to do these crazy effects and u did show that it can be not that hard thanks! Gonna dig in Inferno etc. Btw these dogs are adorable 2 treats were not enough lol :D

[@WenzelStone]

Oh God, this is mind-blowing!

[@mclandeg1]

Noone is gonna talk about how cute is your dogs ❤❤

[@MarkEvans5]

😂 the windows shortcut was GOLD!!

[@PEPPA_CHAN]

What’s a cute 2 hungry clouds you own❤ I have a question. While you find a hypotenuse you divide a sum of cathetes to aspectRatio. Where you get the aspectRatio? And one more question You use progress to make a blur and a zoom transitions. Where you progress it? It looks great Its the best course of metal Another was to heavy to learn for newbies but your video is cool

[@theblckbird]

congrats on 100K!!!

[@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?

[@zolanihogana]

This guy goes above and beyond for us! Thank you

[@MrMassmaker]

Thanks a lot. really is inspiring.

[@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; }

[@douglasaraujo9763]

Wow, amazing!

[@LyndonMaydwell]

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

[@designckinet]

Really interesting!

[@arkadiusz6688]

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

[@sg1885]

amazing

[@emilvladov3216]

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

[@BlaineL]

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

[@simpleinterest360]

Please make more content around computer graphics and metal

[@VladimirKim-cl3rh]

Amazing !!!

[@sabirayaz7893]

Hi, what happened to spritekit? There is no talk of it by Apple anymore, has been deprecated?

[@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!

[@gmebu]

Wow Paul

[@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.

[@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)'

[@swaaaapnil]

Same, its not working for me as well.. what did you do finally?

[@calmsz]

Thank you Professor!

[@phantuananh2163]

Awesomeeeeeeeeeeeee

[@maksimums6819]

Thank you!

[@olilarkin]

awesome!

[@michaelprenez-isbell8672]

works on Intel too?

[@bartleby222]

thanks Paul!