WebGL sur mesure Shader fluide sur l'image

Question

J'essaie actuellement de plonger dans le thème des ombrages WebGL avec Three.js. J'apprécierais que quelqu'un puisse me donner quelques points de départ pour le scénario suivant:

Je voudrais créer un matériau semblable à un fluide, qui soit interagit avec la souris de l'utilisateur ou «flux» sur il est allumé. un peu comme ce http://cake23.de/turing-fluid.html

Je voudrais passer une image d'arrière-plan, ce qui sert de point de départ en termes dont les couleurs sont indiquées dans la «sauce liquide» et où ils sont au début. pour ainsi dire: je définis l'image initiale qui est ensuite transformée par un liquide auto-initié qui coule et aussi par l'interaction des utilisateurs.

Comment je procéderais, avec ma connaissance limitée:

créer un plan avec l'image recherchée comme une texture. En plus (entre l'image et la caméra) créer un nouveau maillage (plan trop?) Et ce maillage a un sommet personnalisé et fragment shaders appliqué. Ces shaders devraient d'une manière ou d'une autre prendre la couleur par derrière (à partir de l'image) puis déplacer ces sommets suivant des règles physiques ...

Je réalise que l'exemple donné ci-dessus a un code non-validé, mais ça l'est encore beaucoup, que je ne peux pas vraiment décomposer en termes plus simples, que je comprends parfaitement. J'apprécierais donc vraiment que quelqu'un puisse me donner des concepts plus simples qui me serviront de point de départ.

plusieurs pages traitant des choses comme ça:

http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm

https://29a.ch/sandbox/2012/fluidwebgl/

https://haxiomic.github.io/GPU-Fluid-Experiments/html5/

Eh bien, en tout cas merci pour chaque lien ou une référence, pour chaque concept de base ou tout ce que vous souhaitez partager.

Vive

Edit: Obtenir un résultat similaire (visuellement) comme cette image serait génial:

Answer 1

Je suis en train d'accomplir une chose semblable. Je surfe beaucoup sur le web. Je cherche tout indice que je peux utiliser. à ce jour, mes conclusions sont les suivantes:

• Essayez de vous soutenir en utilisant Three.js

• La magie sont vraiment dans les shaders, la plupart du temps dans les fragments shaders, il pourrait être une bonne chose commencer à comprendre comment écrivez-les et comment ils fonctionnent. Ce lien est un bon début. shader tutorial

• comprendre la dynamique comportement (naturel/réel) de fluide pourrait être utile. (équations)

• peut-être, cela peut vous aider un peu trop. Raindrop simulation

Si vous avez trouvé quelque chose de plus à ce sujet, faites le moi savoir.

J'ai trouvé ces shaders déjà créés. Peut-être, n'importe lequel d'entre eux peut vous aider sans vous forcer à apprendre beaucoup de choses. splash shaders

bonne chance