Canvas.drawVertices - Incredibly fast, incredibly low-level, incredibly fun
ฝัง
- เผยแพร่เมื่อ 24 ธ.ค. 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.
This is some excellent quality content in Flutter! Please continue!!
We missed you! Welcome back!
29:44 can these drawn shapes be tapped / made interactive with a GestureDetector or so? How would the hit area work there?
That was really great. I learned a lot. Thank you Filip
Amazing talk. Thakn you!
the depth of the informations you provide it's amazing .
This is excellent and incredibly valuable content. Thank you.
absolutley dope keen to see more
Fear of canvas is slowly reducing. Thanks for sharing this.
This is superb
Thanks Filip!
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.
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 👍🏽
VERY good! Thanks!
Just wanted to say Thank You! ❤
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
Great. waiting for Flutter Forward analysis.
Really happy to watch such content :)
Really interesting, thanks for sharing! I always enjoy your focus on performance and low level stuff in Flutter.
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 ✨
Amazingggg video! Thanks for it
Thanks Filip. Keep it up. Learning a lot!
I love your work. So much.
Keep it up!
Also, please finish the Self Improving Developer book!
Nice! Will it be possible for you to share the comparison app?
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.
great. love your way.
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
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.
Awesome!!
Can you please release a video about your desk setup
thanks for sharing
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
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 😂
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.
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 ?
This is awesome ❤️
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.
Yes nerdy, but love it! feels like first days of creating assembler triangles on vc20 ;) So curious about your SciFi UIs, please share !!!
Gonna start Flutter again I did first start in 2017
Please, can you add a link to repo with source code to the description?
You seem to prefer Android Studio as your editor ?! Isn't the little program that is an example available ?
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.
I really love this video
I wonder how could we add interactivity tho
nice work @Flip :)
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.
What should we do to fastest the widget build ?
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.
Great! Thanks 👍
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' ! 🤓
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 ?
Love your content, but iam interested as to how can u make ur vs code transparent
What theme is he using?
The theme is called "high contrast" or something like that.
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 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! :)
how do i get this code?
Gem💎
Good idea that the vertex eat from the buffer of the next data
It's kinda like OpenGl, I love it
I felt the felling of OpenGL 2 era. Ah... That nostalgic glVertex3f function...
This is awesome. Where can we get the source code?
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).
Will you put this on github?
code example please 😊😊
Hoping shaders deepdive
can you please share me the code ?
First comment before watching... 😀
🚀 🚀 🚀 🚀 🚀
for one day , real game engine built by flutter.
Please bring Native integration with cockroachdb and interfaces like algolia 💪
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.
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.