Canvas.drawVertices - Incredibly fast, incredibly low-level, incredibly fun

[@mahmood466]

This is some excellent quality content in Flutter! Please continue!!

[@thanhdatvo0]

We missed you! Welcome back!

[@AntonioBrandao]

29:44 can these drawn shapes be tapped / made interactive with a GestureDetector or so? How would the hit area work there?

[@CodeWithImem]

the depth of the informations you provide it's amazing .

[@yf4453]

Amazing talk. Thakn you!

[@HezOmanjo]

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 👍🏽

[@jjny916]

This is excellent and incredibly valuable content. Thank you.

[@imaNNeO]

That was really great. I learned a lot. Thank you Filip

[@mivoligo]

Just wanted to say Thank You! ❤

[@mksln]

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.

[@lemomar]

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

[@Andreasonline3]

absolutley dope keen to see more

[@reacct1002]

Thanks Filip!

[@SecondFlight]

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.

[@giiyms4408]

Thanks Filip. Keep it up. Learning a lot!

[@Dotafreak]

Fear of canvas is slowly reducing. Thanks for sharing this.

[@CarlosHenrique-er7zq]

Amazingggg video! Thanks for it

[@pankajkoirala6563]

Really happy to watch such content :)

[@saqibshafin]

I love your work. So much. Keep it up! Also, please finish the Self Improving Developer book!

[@SmashHighlights]

Really interesting, thanks for sharing! I always enjoy your focus on performance and low level stuff in Flutter.

[@mohanedy]

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 😂

[@Apenschi]

VERY good! Thanks!

[@dhruvinvainsh743]

This is superb

[@Hamiiidev]

Great. waiting for Flutter Forward analysis.

[@iy908]

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

[@TadejKanizar]

Very cool. I'm going to start drawing all widgets using drawVertices from now on ;)

[@filiphracek]

Lol. Yes. It also helps to render all text via Vertices.raw, inputting each vertex by hand while juggling a chainsaw.

[@محمدمهدی-س2ط]

great. love your way.

[@chiefolk]

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

[@chiefolk]

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?

[@chiefolk]

55:00 yeah i was close ✨

[@JessicaPereira-wy6ru]

Thanks for this amazing talk Filip, you inspire me... Do you have the code source?

[@filiphracek]

Not the one I show in the talk, but have a look at github.com/zesage/flutter_cube, for example.

[@mkc11267]

Awesome!!

[@MohamedSalah-pi7fn]

This is awesome ❤️

[@alexandergorny]

Yes nerdy, but love it! feels like first days of creating assembler triangles on vc20 ;) So curious about your SciFi UIs, please share !!!

[@TheDescrout]

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 ?

[@SimonNielsen-zm7mq]

Nice! Will it be possible for you to share the comparison app?

[@tluanga-ruatpuii-pa]

Can you please release a video about your desk setup

[@mojtabana6322]

thanks for sharing

[@ttv_tej]

Gonna start Flutter again I did first start in 2017

[@rlrl5879]

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.

[@mrverdant13]

I really love this video I wonder how could we add interactivity tho

[@aytunch]

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

[@erlangparasu6339]

Great! Thanks 👍

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?

[@filiphracek]

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

[@SecondFlight]

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.

[@R4IVI]

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' ! 🤓

[@gaosdatastory8884]

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.

[@dokinds]

nice work @Flip :)

[@RioM8z]

You seem to prefer Android Studio as your editor ?! Isn't the little program that is an example available ?

[@babydoll-li9ng]

What should we do to fastest the widget build ?

[@nonnulls]

Please, can you add a link to repo with source code to the description?

[@kausikmr]

Canvas.drawVertices is not Anti Aliased even after adding the antiAliased = true in the Paint(). Is there a solution for this @Filip Hráček ?

[@kronoszombieguidesapp]

can you recommend any reading material on using the raw vertices/float lists?

[@filiphracek]

I was going from the docs, tbh. They're terse, but they have everything you'll need.

[@becbelk]

Good idea that the vertex eat from the buffer of the next data

[@Pewdew]

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😢

[@filiphracek]

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.

[@Pewdew]

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

[@zainroyan1556]

Love your content, but iam interested as to how can u make ur vs code transparent

[@musoftware]

I felt the felling of OpenGL 2 era. Ah... That nostalgic glVertex3f function...

[@DominikRoszkowski]

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

[@filiphracek]

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

[@SirJohn2024]

Nerdy... But interesting... Basically you can build a 3D engine on top of that, Flutreal Engine maybe? 😏

[@hyungtaecf]

Or Flame 3D

[@KennyFully]

I’m tired of flame. I’m going to do it myself.

[@atmega3212]

It's kinda like OpenGl, I love it

[@odewoleabdul-jemeel8859]

This is awesome. Where can we get the source code?

[@yf4453]

What theme is he using?

[@filiphracek]

The theme is called "high contrast" or something like that.

[@danielduvana]

Is it not possible to draw circles with drawVertices? What's the most performant way to draw circles? Just Canvas.drawCircle?

[@filiphracek]

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

[@LuisFernandez-cz7gb]

code example please 😊😊

[@_AnikSaha]

Gem💎

[@ankitverma3932]

how do i get this code?

[@coldwolf5050]

Will you put this on github?

[@shubhamyeole2881]

First comment before watching... 😀

[@cycomkid]

Hoping shaders deepdive

[@babydoll-li9ng]

can you please share me the code ?

[@Kiriyaki65548]

🚀 🚀 🚀 🚀 🚀

[@himmelkami3308]

for one day , real game engine built by flutter.

[@AmazingGrace0412]

Please bring Native integration with cockroachdb and interfaces like algolia 💪

[@henryriehl2058]

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.

[@DmitriiGordeev]

This is not black magic )

[@RaphaëlRail]

How does it work by providing "this" as TickerProvider ?

[@ghost_7701]

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 🫡

[@filiphracek]

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.

[@ghost_7701]

​@@filiphracek I will give it a try I love these challenges. Thanks for the inspiration.