SwiftUI + Metal - Create special effects by building your own shaders
Вставка
- Опубліковано 20 лип 2024
- 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 - Наука та технологія
Thank you so much for this tutorial Paul! I was looking for some inspiration to start my Metal study.
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 ;)
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!
Make sure and check out the Inferno repository - all contributions welcome! github.com/twostraws/Inferno
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! 👍🏻
This was enlightening and inspiring. Btw I must have rewatched the part around 45:40 like 5 times
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 :)
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 ;-)
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.
Freshly baked Two Straws video. Perfect for my morning coffee.
Thank you Paul. This video is super helpful. Thank you for always putting out such rich and helpful content.
Watched this over 2 morning coffees. Good stuff. Shared at work
Just keep doing what you're doing man. So thorough
I must admit that you, sire, are a didactic genius. Love your instructions, and your dogs are nice, too.
Not something _every_ developer needs to know - but for those of us who do, this is a great tutorial. Thanks Paul.
Noone is gonna talk about how cute is your dogs ❤❤
The full sinebow effect reminds me of something used to advertise blank VHS tapes
Great work!
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.
I have learn so much from this turtorial, thanks.
congrats on 100K!!!
Oh God, this is mind-blowing!
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.
😂 the windows shortcut was GOLD!!
This guy goes above and beyond for us! Thank you
amazing
Wow, amazing!
Really interesting!
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?
Amazing !!!
Thank you!
Thank you done much for this Paul. Truly awesome ! Just don't know how you find the time!
👍
awesome!
Thank you Professor!
Awesomeeeeeeeeeeeee
This is great! Is there a way to output values computed in a shader back to a state variable, etc?
Wow Paul
Please make more content around computer graphics and metal
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?
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;
}
Adjusting the maxSampleOffset seems to get rid of the clipping at 25:19 instead of the padding
Wonder if there's something like shader language but for audio programming.
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!
I couldn't find how to make .float(elapsed) work. Tried to swap it with (time) but Generic parameter 'Content' could not be inferred
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)'
works on Intel too?
(@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)?
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.
thanks Paul!