Fundamentals 17 min read

Noise Techniques for Short Video Effects and Their Generation Algorithms

This article explores how various noise algorithms—including value, gradient, simplex, cellular, and FBM—are applied to short video visual effects, compares random number generators for GPU rendering, and provides GLSL code examples to illustrate implementation and performance trade‑offs.

Kuaishou Tech
Kuaishou Tech
Kuaishou Tech
Noise Techniques for Short Video Effects and Their Generation Algorithms

Background Noise is widely used in short video effects to introduce irregularity and randomness, saving artistic resources and enhancing visual diversity.

Noise Effect Showcase Examples include flash/flake effects using noise textures with matcap, distortion via noise‑based displacement, and caustics simulated by sampling noise with tiling and offset.

These examples demonstrate how noise can create random patterns for sparkles, fire distortion, and water ripples, reducing manual asset creation.

How Noise Is Generated Simple value noise starts from integer and fractional parts of coordinates, generating pseudo‑random values and interpolating them with smoothstep. Gradient noise improves visual quality by interpolating gradient vectors (Perlin noise). Simplex noise reduces sampling cost by using simplex cells. Cellular (Worley) noise uses distance to feature points, and FBM combines multiple octaves for fractal detail.

Code snippets illustrate value noise, 2‑D noise, gradient noise, simplex noise, cellular noise, linear congruential generator (LCG), trig‑based noise, and PCG random functions:

float i = floor(x); // 获取坐标的整数部分
float f = fract(x); // 获取坐标的小数部分
y = rand(i); //rand()是一个随机数函数
y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
float noise (in vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);
    float a = random(i); // 左下
    float b = random(i + vec2(1.0, 0.0)); // 右下
    float c = random(i + vec2(0.0, 1.0)); // 左上
    float d = random(i + vec2(1.0, 1.0)); // 右上
    u = smoothstep(0.,1.,f);
    return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}
float noise(vec2 st) {
    vec2 i = floor(st);
    vec2 f = fract(st);
    vec2 u = f*f*(3.0-2.0*f);
    return mix( mix( dot( random2(i + vec2(0.0,0.0) ), f - vec2(0.0,0.0) ),
                     dot( random2(i + vec2(1.0,0.0) ), f - vec2(1.0,0.0) ), u.x),
                mix( dot( random2(i + vec2(0.0,1.0) ), f - vec2(0.0,1.0) ),
                     dot( random2(i + vec2(1.0,1.0) ), f - vec2(1.0,1.0) ), u.x), u.y);
}
float noise( in vec2 p ) {
    const float K1 = 0.366025404; // (sqrt(3)-1)/2;
    const float K2 = 0.211324865; // (3-sqrt(3))/6;
    vec2 i = floor( p + (p.x+p.y)*K1 );
    vec2 a = p - i + (i.x+i.y)*K2;
    float m = step(a.y,a.x);
    vec2 o = vec2(m,1.0-m);
    vec2 b = a - o + K2;
    vec2 c = a - 1.0 + 2.0*K2;
    vec3 h = max( 0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 );
    vec3 n = h*h*h*h*vec3( dot(a,random2(i+0.0)), dot(b,random2(i+o)), dot(c,random2(i+1.0)));
    return dot( n, vec3(70.0) );
}
void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    vec3 color = vec3(.0);
    st *= 6.;
    vec2 i_st = floor(st);
    vec2 f_st = fract(st);
    float m_dist = 1.;
    for (int y=-1; y<=1; y++) {
        for (int x=-1; x<=1; x++) {
            vec2 neighbor = vec2(float(x),float(y));
            vec2 point = random2(i_st + neighbor);
            vec2 diff = neighbor + point - f_st;
            float dist = length(diff);
            m_dist = min(m_dist, dist);
        }
    }
    color += m_dist;
    gl_FragColor = vec4(color,1.0);
}
uint lcg(uint p) {
    return p * 1664525u + 1013904223u;
}
return uvec3(lcg(lcg(u.x) + u.y));
float trig(vec2 p) {
    return fract(43758.5453123*sin(dot(p, vec2(12.9898,78.233))));
}
uint pcg(uint v) {
  uint state = v * 747796405u + 2891336453u;
  uint word = ((state >> ((state >> 28u) + 4u)) ^ state) * 277803737u;
  return (word >> 22u) ^ word;
}

Random Number Algorithm Comparison Various PRNGs are evaluated on quality and performance. LCG is fastest but shows periodic patterns; trig and PCG offer better randomness at higher cost. The choice of PRNG affects real‑time rendering efficiency and visual uniformity, as shown in comparative Perlin noise images.

Conclusion Incorporating noise into short‑video effects improves development efficiency and realism. Modern editors now provide adjustable noise nodes (e.g., Perlin, Cellular) for designers, and upcoming platforms will integrate similar tools.

References (omitted for brevity).

GraphicsGPUShadernoiseProcedural Generationrandom numbervisual effects
Kuaishou Tech
Written by

Kuaishou Tech

Official Kuaishou tech account, providing real-time updates on the latest Kuaishou technology practices.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.