GLSL 触发顶点着色器

Question

我正在尝试调整此 ShaderToy example 以创建顶点 'sparks' 在他们之外。尝试使用 gl_PointCoord 和 gl_FragCoord 没有任何结果。也许，这里有人可以帮助我吗？

我需要类似于这个 gif 动画的效果：

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);


}

据我所知，必须使用 vec2 pos，将其设置为 顶点位置。

Answer 1

你不需要玩pos。由于 Vertex Shader 每个顶点只有运行，因此无法使用 Pos 处理其像素值。但是，您可以使用 gl_PointCoord.

处理像素

我能想到两种方法来改变纹理的比例

gl_PointSize 在 opengl es 中的顶点着色器中
在Fragment Shader中，可以改变贴图的UV值，例如

vec4 color = texture(texture0, ((gl_PointCoord-0.5) * factor) + vec2(0.5));

如果你不想使用任何纹理而只想在 FS 中进行像素处理，

你可以像((gl_PointCoord-0.5) * factor) + vec2(0.5)一样设置UV 而不是通常在 Shadertoy

中设置为 fragCoord.xy / iResolution.xy 的 uv

GLSL 触发顶点着色器

GLSL sparking vertex shader

shader

animation

glsl

vertex-shader