Comment dessiner rapidement une forme courbe?
par "rapidement" je suppose que l'on devrait utiliser autant que possible les installations matérielles
par "courbe", je veux dire des limites définies par des courbes de Bézier quadratiques ou cubiques
par "forme", je veux dire soit un "gros" trait (c'est-à-dire plus de 1px de large) soit un "polygone courbe 2D" pair-impair / non nul, éventuellement avec des trous (ie la lettre "O")
Je demande parce que les options que je connais ont plusieurs inconvénients:
trianguler la forme et l'envoyer à OpenGL - fait le travail le plus difficile sur le CPU et peut utiliser trop / peu de triangles (c'est-à-dire gaspillage / grossier)
Atlas de textures - doit recalculer / télécharger la texture à chaque changement (forme, échelle, rotation, ...)
Champ de distance signé - à grande échelle, les détails ne sont pas jolis ou doivent recalculer / télécharger la texture
NV_path_rendering - pourrait l'être, si cela ne fonctionnait pas uniquement sur les cartes de Nvidia
OpenVG - pourrait l'être, s'il ne fonctionnait pas uniquement sur mobile
?
* Il me semble qu'OpenVG ne va pas exactement de l'avant, pour le moins. Quelqu'un connaît-il ses perspectives d'avenir? Vaut-il la peine de garder un œil sur aujourd'hui?
** OpenGL 4+ fournit des moyens de pavage à la volée de polygones. Pourrait-il être utilisé d'une manière ou d'une autre pour affiner le maillage de l'option "triangulation" afin que la frontière de la forme ne semble pas au moins "inclinée"?
la source
Réponses:
Vous pouvez utiliser les shaders de pavage OpenGl 4.x pour convertir les points de contrôle de Bézier en polygones.
Une recherche google pour "tessellation shader bezier" a trouvé ce contour décrivant la tessellation des surfaces et des courbes de Bézier:
http://web.engr.oregonstate.edu/~mjb/cs519/Handouts/tessellation.1pp.pdf
Cela décharge l'évaluation Bézier du CPU vers le GPU et réduit le flux de données sur le bus.
la source
On peut faire du dessin courbe avec du matériel. Il existe une méthode décrite dans GPU Gems 3 qui décrit comment procéder. L'utilisateur @yuriks commente cela. J'ai en fait fait une démo rapide pour que vous jetiez un coup d'œil.
Image 1 : Forme de courbe accélérée HW (dessinée à l'aide d'un triangle) et source webgl
la source