WebGL/GLSL - Comment un ShaderToy travail?
J'ai été frapper autour Shadertoy - https://www.shadertoy.com/ - récemment, dans un effort pour en apprendre davantage sur OpenGL et GLSL en particulier.
De ce que j'ai compris jusqu'à présent, OpenGL, l'utilisateur doit d'abord préparer l'ensemble de la géométrie à être utilisé et configurer l'OpenGL serveur (nombre de feux de permis, de texture, de stockage, etc). Une fois cela fait, l'utilisateur doit alors fournir au moins un vertex shader programme, et un fragment shader programme avant un programme OpenGL compile.
Cependant, quand je regarde les exemples de code sur Shadertoy, je n'ai jamais vu un programme de shaders, et la plupart de la géométrie utilisée semble être écrite directement dans le code GLSL.
Comment cela fonctionne?
Ma conjecture est qu'un vertex shader est déjà préparé à l'avance, et que l'modifiable/échantillon shader est qu'un fragment shader. Mais cela n'explique pas la géométrie dans certains des exemples plus complexes...
Quelqu'un peut-il expliquer comment Shadertoy fonctionne?
Vous devez vous connecter pour publier un commentaire.
ShaderToy est un outil pour écrire un pixel shaders.
Quels sont les pixel shaders?
Si vous effectuez le rendu d'un écran de quad, ce qui signifie que chacun des quatre points est placé dans l'une des quatre coins de la fenêtre d'affichage, puis le fragment shader pour que le quad est appelé pixel shader, parce que vous pourriez dire que maintenant, chaque fragment correspond exactement à un pixel de l'écran. Ainsi, un pixel shader est un fragment shader pour un plein écran de quad.
Si les attributs sont toujours les mêmes et c'est donc un vertex shader:
Et que le quad est rendu comme
TRIANGLE_STRIP
.Aussi, plutôt que de les
UVs
explicitement, certains préfèrent utiliser le fragment shader est intégré dans la variablegl_FragCoord
, qui est ensuite divisé avec, par exemple, ununiform vec2 uScreenResolution
.Vertex shader:
Et le fragment shader serait alors ressembler à ceci:
ShaderToy peut vous fournir avec un peu d'uniformes par défaut,
iResolution
(akauScreenResolution
),iGlobalTime
,iMouse
,... que vous pouvez utiliser dans votre pixel shader.Pour le codage de la géométrie directement dans le fragment shader (aka pixel shader), développeur d'utiliser quelque chose appelé ray-tracing. C'est assez complexe de la zone de programmation, mais en bref:
Vous présentez votre géométrie par le biais de certaines formules mathématiques, et plus tard dans le pixel shader, lorsque vous souhaitez vérifier si certains de pixel est une partie de votre géométrie vous utilisez cette formule pour récupérer cette information. Google-ing un peu devrait vous donner beaucoup de ressources à lire à partir de quoi et comment ray traceurs sont construits exactement, et ce qui pourrait aider:
Comment faire du lancer de rayons moderne OpenGL?
Espère que cette aide.
ShaderToy affiche simple GLSL qui est programmé pour gérer l'éclairage, de la géométrie, etc, c'est pas le sommet de la géométrie, c'est raycasting de plus, la 3D, ou vous pouvez le faire en 2D shaders, etc.
N'importe quelle couleur et spatiales de mathématiques peuvent être programmés en langage GLSL. Les combinaisons d'algorithmes avancés rend isosurfaces, des formes, et ensuite le projet de textures sur des isosurfaces, et raycasting, l'envoi de lignes imaginaires à partir de l'afficheur à distance, intercepte quoi que ce soit dans le chemin, il y a beaucoup de raycasting techniques pour la 3D.
visite http://www.iquilezles.org pour avoir une idée des différents outils qui sont utilisés dans shadertoy/glsl graphiques
Fondamentalement il s'agit de pousser GLSL shader de pixel de code source directement sur la carte graphique.La vraie magie qui se passe dans le très algorithmes intelligents que les gens utilisent pour créer des effets étonnants, comme des rayons de marcher, de projection de rayons, le ray-tracing. le mieux pour avoir un coup d'oeil à certains autres vivent GLSL sandbox comme: http://glsl.heroku.com/ et http://webglplayground.net/.
C'est en fait la création d'une fenêtre généralement deux triangles qui représentent l'écran, puis le shader fonctionne sur chaque pixel comme un traceur de rayon.
J'ai été à la recherche à un certain temps maintenant, et les algorithmes de gens utilisent sont l'esprit souffle, vous aurez besoin de quelques grave mathématiques de côtelettes et de rechercher des "démo de codage" code source pour pouvoir envelopper votre tête autour d'eux. De nombreux shader jouet, souffler votre esprit !
Donc, pour résumer, vous avez juste besoin d'apprendre GLSL shader de codification et algorithmes. Pas de solution facile.
Traditionnellement à l'informatique graphique, la géométrie est créé à l'aide de sommets et de rendu en utilisant une certaine forme de matériaux (par exemple, les textures, avec un éclairage). En GLSL, le vertex shader processus des sommets et le fragment (pixel shader processus, les matériaux.
Mais ce n'est pas la seule manière de définir les formes. Tout comme une texture pourrait être sur le plan procédural défini (au lieu de regarder ses texels), une forme qui pourrait être sur le plan procédural défini (au lieu de regarder jusqu'à sa géométrie).
Donc, semblable à lancer de rayons, ces fragment shaders sont en mesure de créer des formes sans avoir leur géométrie définie par les sommets.
Il y a encore plus de façons de définir les formes. E. g. les données de volume (voxels), la surface des courbes, et ainsi de suite. Une infographie texte devrait couvrir certains d'entre eux.