GLSL 触发顶点着色器答案

【问题标题】：GLSL sparking vertex shaderGLSL 触发顶点着色器
【发布时间】：2017-08-06 16:40:10
【问题描述】：

我正在尝试调整这个 ShaderToy example 的顶点以创建“火花” 出他们。尝试使用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，将其设置为 顶点位置。

【问题讨论】：

适应THREE.PointsMaterial不是更容易吗？看一下three.js examples下的点数。

标签： animation glsl shader vertex-shader

【解决方案1】：

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

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

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

vec4 颜色 = 纹理(texture0, ((gl_PointCoord-0.5) * 因子) + vec2(0.5));

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

你可以像((gl_PointCoord-0.5) * factor) + vec2(0.5)一样设置UV 而不是在 Shadertoy 中通常设置为 fragCoord.xy / iResolution.xy 的 uv

【讨论】：