GLSL点燃顶点着色器
问题描述:
我想调整这个ShaderToy example顶点创建'火花' 他们。已尝试玩gl_PointCoord
和gl_FragCoord
没有任何结果。也许,这里有人可以帮助我?GLSL点燃顶点着色器
我需要类似这样的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);
}
据我了解有VEC 2 POS玩,将其设置为顶点位置。
答
你不需要玩pos。由于顶点着色器仅由每个顶点运行,因此无法使用Pos来处理其像素值。但是,您可以使用gl_PointCoord来处理像素。
我能想到的两种方法仅适用于OpenGL ES的
在片段着色器改变纹理的规模
- gl_PointSize在顶点着色器,你可以改变纹理UV值,例如, vec4 color = texture(texture0,((gl_PointCoord-0.5)* factor)+ vec2(0.5));其中,
如果你不想使用FS任何纹理,但只有像素处理,
可以设置UV像((gl_PointCoord-0.5) * factor) + vec2(0.5)
代替UV这通常是在Shadertoy
将设置为
fragCoord.xy/iResolution.xy
适应[THREE.PointsMaterial](https://github.com/mrdoob/three.js/blob/dev/src/materials/PointsMaterial.js)并不容易?看看点[three.js示例](https://threejs.org/examples/)。 – 2pha