2017-08-06 7 views
-1

J'essaye de modifier ce ShaderToy example pour créer des 'étincelles' . Ont essayé de jouer avec gl_PointCoord et gl_FragCoord sans aucun résultat. Peut-être que quelqu'un ici pourrait m'aider?GLSL vertex shader

J'ai besoin effet similaire à ce gif animé:

]

uniform float time; 
uniform vec2 mouse; 
uniform vec2 resolution; 

#define M_PI 3.1415926535897932384626433832795 

float rand(vec2 co) 
{ 
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); 
} 

void main() { 

    float size = 30.0; 
    float prob = 0.95; 

    vec2 pos = floor(1.0/size * gl_FragCoord.xy); 

    float color = 0.0; 
    float starValue = rand(pos); 

    if (starValue > prob) 
    { 
     vec2 center = size * pos + vec2(size, size) * 0.5; 

     float t = 0.9 + sin(time + (starValue - prob)/(1.0 - prob) * 45.0); 

     color = 1.0 - distance(gl_FragCoord.xy, center)/(0.5 * size); 
     color = color * t/(abs(gl_FragCoord.y - center.y)) * t/(abs(gl_FragCoord.x - center.x)); 
    } 
    else if (rand(gl_FragCoord.xy/resolution.xy) > 0.996) 
    { 
     float r = rand(gl_FragCoord.xy); 
     color = r * (0.25 * sin(time * (r * 5.0) + 720.0 * r) + 0.75); 
    } 

    gl_FragColor = vec4(vec3(color), 1.0); 


} 

Comme je comprends doivent jouer avec vec2 pos, la mise à une position de sommet.

+0

Would il ne sera pas plus facile d'adapter [THREE.PointsMaterial] (https://github.com/mrdoob/three.js/blob/dev/src/materials/PointsMaterial.js)? Jetez un coup d'œil aux exemples [three.js] (https://threejs.org/examples/) sous les points. – 2pha

Répondre

1

Vous n'avez pas besoin de jouer avec pos. Comme Vertex Shader n'est exécuté que par chaque sommet, il n'y a aucun moyen de traiter ses valeurs de pixels en utilisant Pos. Cependant, vous pouvez faire un pixel de traitement en utilisant gl_PointCoord.

je peux penser à deux manières seulement pour changer l'échelle d'une texture

  1. gl_PointSize dans Vertex Shader en opengl es
  2. Dans Fragment Shader, vous pouvez modifier la valeur UV texture, par exemple,

    vec4 couleur = texture (texture0, ((gl_PointCoord-0.5) * facteur) + vec2 (0.5));

Si vous ne souhaitez pas utiliser une texture mais seulement le traitement des pixels dans FS,

vous pouvez définir UV comme ((gl_PointCoord-0.5) * factor) + vec2(0.5) au lieu de uv qui est normalement défini comme fragCoord.xy/iResolution.xy dans Shadertoy