Canvas.drawVertices - Incredibly fast, incredibly low-level, incredibly fun
Вставка
- Опубліковано 14 жов 2024
- One of Flutter's lowest-level APIs is the drawVertices method, which allows you to efficiently draw an astounding amount of stuff on the screen. That stuff can be lines, rectangles, polygons, particles, and whatever else you can think of. This method is how people (including Filip) can even implement specialized 3D renderers on top of Dart that run fast on mobile, web and desktop. In this talk, Filip will explain the API of Canvas.drawVertices() and the Vertices.raw() constructor - both are obscure, very low-level, and hard to explain in documentation alone. But they are worth it when you need to squeeze the last bit of performance out of Flutter.
We'll also cover Canvas.drawLines, for good measure.
This talk is part of Flutter Forward, a 2023 official Flutter conference in Nairobi, Kenya.
Too nerdy for me ... But I'll say this - Filip has always challenged me to push beyond my boundaries of thinking in Flutter. Right from day 1. Amazing man 👍🏽
This is some excellent quality content in Flutter! Please continue!!
the depth of the informations you provide it's amazing .
That was really great. I learned a lot. Thank you Filip
This was great!
I’ve recently begun to work on the canvas after years of being scared of it and I’m enjoying it a lot
This is excellent and incredibly valuable content. Thank you.
Amazing talk. Thakn you!
Just wanted to say Thank You! ❤
We missed you! Welcome back!
Wonderful video Filip! Thanks for the great intro to drawVertices, I didn't even know it was there, it looks like a great way to squeeze out lots more drawing performance when have need of it in Flutter apps.
Fear of canvas is slowly reducing. Thanks for sharing this.
Really interesting, thanks for sharing! I always enjoy your focus on performance and low level stuff in Flutter.
VERY good! Thanks!
Thanks Filip!
Great. waiting for Flutter Forward analysis.
Thanks so much for this talk! I didn't realize this was hidden in the painter API and I'm excited to try it out.
This is superb
I love your work. So much.
Keep it up!
Also, please finish the Self Improving Developer book!
absolutley dope keen to see more
I have enjoyed every second of this video. Really helpful and interesting.
But I think you have drawn the Kotlin logo at 30:50 accidentally, maybe this is how the Kotlin team came up with the logo idea 😂
Thanks Filip. Keep it up. Learning a lot!
Thanks for this amazing talk Filip, you inspire me... Do you have the code source?
Not the one I show in the talk, but have a look at github.com/zesage/flutter_cube, for example.
Amazingggg video! Thanks for it
great. love your way.
Really happy to watch such content :)
thanks for sharing
My first thought when you asked for the "bug" was : "that comes from the 16bits limits !"
I'm not a low level engineer but I learned that when trying to position planets accurately in space in Blender3D, which use a 32-bits number precision, which is ok for entertainment but weak for technical viz' ! 🤓
Very cool. I'm going to start drawing all widgets using drawVertices from now on ;)
Lol. Yes. It also helps to render all text via Vertices.raw, inputting each vertex by hand while juggling a chainsaw.
Awesome!!
Yes nerdy, but love it! feels like first days of creating assembler triangles on vc20 ;) So curious about your SciFi UIs, please share !!!
Please do more videos about high performance flutter/dart! Like how to use SIMD operations in flutter or own implementation of spatial interpolation algo and so on
I think I have a gold rush because this is gold! This is exactly what I needed. So now what I understood is that it's the Float32List is what makes things fast not drawVertices() as much?
Pretty much, yes. TypedData, if you keep it around, makes things go fast. (On the other hand, if you create (and then throw away) a big chunk of typed data every frame, then it might easily be slower.)
It also seems that drawVertices() is a lot closer to the equivalent graphics API call than something like drawLine(). This means Flutter basically doesn't need to transform the data you send it before handing it to the GPU, which I imagine helps quite a bit as well.
Nice! Will it be possible for you to share the comparison app?
Can you please release a video about your desk setup
While looking at the drawVertices docs I saw that flutter also has drawAtlas(and drawRawAtlas) methods. Would these be better for drawing a lot of images ? Also in your example the image in the polygon is not rotating. I assume it could be rotated via some sort of UV coordinates binding. I see that drawAtlas method supports all sort of transformations like scale and rotation that could make our life easier but maybe at the cost of a little performance ?
You seem to prefer Android Studio as your editor ?! Isn't the little program that is an example available ?
Hi Filip, will you make the source code of the snowflake benchmark available? On part you did not mention int he talk was how you are changing the positions of all the vertices. SO it would be very helpful to see the code. Thanks
This is awesome ❤️
Great! Thanks 👍
29:44 can these drawn shapes be tapped / made interactive with a GestureDetector or so? How would the hit area work there?
Gonna start Flutter again I did first start in 2017
Have you tried running this demo on an ios device with impeller enabled? I have an app with some very complex scenes like this that runs fine in skia, but locks up on impeller. I still need to dig into what is goin on, but Im curious if you would see the same with this demo.
Please, can you add a link to repo with source code to the description?
I really love this video
I wonder how could we add interactivity tho
Gem💎
Nerdy... But interesting... Basically you can build a 3D engine on top of that, Flutreal Engine maybe? 😏
Or Flame 3D
I’m tired of flame. I’m going to do it myself.
I felt the felling of OpenGL 2 era. Ah... That nostalgic glVertex3f function...
can you recommend any reading material on using the raw vertices/float lists?
I was going from the docs, tbh. They're terse, but they have everything you'll need.
Love your content, but iam interested as to how can u make ur vs code transparent
nice work @Flip :)
I find it funny that it's indices that overflow, not positions or the list length. The fact that it takes 5 indices for 1 snow-flake made me a little bit puzzled at first ;)
Yeah, I started the experimentation with polygons (any n-gon), so it was easiest to have a vertex in the middle and draw triangles from there. It also made it easier to draw the kind of gradients I wanted. Ideally, I should have rewritten the code for the special case of a rectangle, where you need 1 less vertex and _half_ the triangles... Welp. Next time! :)
What should we do to fastest the widget build ?
Hi filip, Question for you. Can I use Flame in Flutter Casual Games Toolkit? I am a newbie to Flutter Casual Games Toolkit. Not sure if I can use flame in Flutter Casual Games Toolkit or not.
Canvas.drawVertices is not Anti Aliased even after adding the antiAliased = true in the Paint(). Is there a solution for this @Filip Hráček ?
Good idea that the vertex eat from the buffer of the next data
It's kinda like OpenGl, I love it
This is awesome. Where can we get the source code?
51:00 because indices is a typed data of Uint16List which can only hold values from 0 to 65,535. so when we are trying to index from positions maybe greater than that it's breaking it??
so when there are more than 65,536 positions in the positions list and indices array is trying address them but it cannot be fit in 16 bits?
55:00 yeah i was close ✨
First comment before watching... 😀
Is it possible to prepaint custom painters? I can't figure it out how to fix bad performance. I have 15 custom painter widgets and 10 fps😢
Interesting. I admit I've never seen an issue like that. Are you updating them all every frame? Because if not, CustomPainter shouldRepaint() is your friend.
@@filiphracek i turn phone, tilt changes and blocbuilder rebuild CustomPainters with new state. Also these custom painters are similar. Is there any way to paint it once and share to all my widget? Because each paint spent time.
What theme is he using?
The theme is called "high contrast" or something like that.
Is it not possible to draw circles with drawVertices? What's the most performant way to draw circles? Just Canvas.drawCircle?
Yes, drawCircle is really fast. You could use vertices to draw a circle-like polygon but I'm almost sure it would not give you any performance boost (possibly the opposite).
🚀 🚀 🚀 🚀 🚀
Hoping shaders deepdive
code example please 😊😊
Will you put this on github?
how do i get this code?
One very small thing, but you could probably improve the performance a bit for the widget side of things by using valueNotifier with a listenable builder :) Currently the Stack, ColouredBox and SizedBox widgets are being rebuilt unnecessarily.
Please bring Native integration with cockroachdb and interfaces like algolia 💪
for one day , real game engine built by flutter.
can you please share me the code ?
This is not black magic )
How does it work by providing "this" as TickerProvider ?
Me watching this is like monkey watching surgery 😂😂
But I really enjoyed it and I hope one day that I become on that level of understanding 🫡
Trust me, if I was watching this a year ago, I would feel the same. It's low-level and confusing. But once I tried (and failed) to wield this API a couple of times, it clicked.
@@filiphracek I will give it a try I love these challenges.
Thanks for the inspiration.