WebGL: Comment mélanger chaque dessin avec le framebuffer précédent avec des modes de fusion personnalisés?

Question

Je suis en train de mettre en œuvre un moteur de brosse en utilisant webgl. Pour chaque timbre que je dessine, je veux mélanger ce timbre avec le dessin précédent dans le framebuffer, avec ma propre fonction de mélange personnalisée pour obtenir quelques effets sympas. Je sais que je peux dessiner le tampon à une texture personnalisée et mélanger la texture personnalisée avec le framebuffer dessin précédent en utilisant des shaders. Mais comme la toile est très grande, la performance est très lente car il y a beaucoup de timbres à dessiner.

Je sais que dans OpenGL ES2.0, apple fournit une extension EXT_shader_framebuffer_fetch pour cela, et c'est rapide. Mais comment faire cela en WebGL avec de meilleures performances?

Answer 1

Vous ne pouvez pas encore récupérer le framebuffer de destination dans WebGL, même avec des extensions.

Vous aurez besoin de ping-pong entre deux différents framebuffers à texture soutenue, en échantillonnant de l'un en dessinant dans l'autre. (Vous pouvez dessiner plus d'une fois par image ici si vous le souhaitez, en réponse à des événements de souris!) Ensuite, dessinez simplement la texture du framebuffer le plus récemment dessiné sur le backbuffer à chaque frame de requestAnimationFrame.