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

Рет қаралды 25,520

Күн бұрын

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

Пікірлер: 48

@atanamvari7610 4 ай бұрын

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

@marcusziadev 7 ай бұрын

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

@antoniopalomba5123 7 ай бұрын

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

7 ай бұрын

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

@AmitGupta-rt2gp 7 ай бұрын

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

@RBilsland 7 ай бұрын

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

@steveloengard5139 7 ай бұрын

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 7 ай бұрын

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

@NiclasJeppsson 7 ай бұрын

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

@UnbekanntesSubjekt 6 ай бұрын

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

@Coffeeology 7 ай бұрын

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

@leomarcotte4294 7 ай бұрын

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.

@oleksandrlohozinskyi3483 7 ай бұрын

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.

@kbusse 7 ай бұрын

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

@hoagy_ytfc 7 ай бұрын

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

@mclandeg1 7 күн бұрын

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

@hybridxdesign 6 ай бұрын

I have learn so much from this turtorial, thanks.

@huwrowlands 7 ай бұрын

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

@theblckbird 7 ай бұрын

congrats on 100K!!!

@WenzelStone 2 ай бұрын

Oh God, this is mind-blowing!

@mylaluna 7 ай бұрын

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.

@zolanihogana 7 ай бұрын

This guy goes above and beyond for us! Thank you

@sg1885 7 ай бұрын

amazing

@douglasaraujo9763 5 ай бұрын

Wow, amazing!

@designckinet 2 ай бұрын

Really interesting!

@MarkEvans5 7 ай бұрын

😂 the windows shortcut was GOLD!!

@johndoe276 7 ай бұрын

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?

@VladimirKim-cl3rh 7 ай бұрын

Amazing !!!

@BlaineL 7 ай бұрын

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

@maksimums6819 7 ай бұрын

Thank you!

@calmsz 7 ай бұрын

Thank you Professor!

@olilarkin 7 ай бұрын

awesome!

@LyndonMaydwell 7 ай бұрын

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

@phantuananh2163 7 ай бұрын

Awesomeeeeeeeeeeeee

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

@gmebu 7 ай бұрын

Wow Paul

@arkadiusz6688 5 ай бұрын

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

@simpleinterest360 7 ай бұрын

Please make more content around computer graphics and metal

@emilvladov3216 5 ай бұрын

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

@AlanW 7 ай бұрын

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 7 ай бұрын

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 7 ай бұрын

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 7 ай бұрын

works on Intel too?

@williamsquires3070 5 ай бұрын

(@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 4 ай бұрын

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.