Three.js-着色器（glsl内置函数实现各种效果2）

最新推荐文章于 2025-10-31 15:14:44 发布

原创最新推荐文章于 2025-10-31 15:14:44 发布 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#着色器 #three.js #Three.js #3d

Three 同时被 2 个专栏收录

23 篇文章

订阅专栏

着色器

6 篇文章

订阅专栏

该博客详细介绍了如何使用Three.js中的着色器和GLSL内置函数来创建各种图形效果，包括绘制圆、圆环、靶子环、波浪环、角度视图、螺旋渐变、雷达扫射、光芒四射、噪声算法实现的效果等，并附带了示例代码和实现效果展示。

Three.js-着色器（glsl内置函数）_HM-hhxx！的博客-优快云博客Threejs中着色器（glsl内置函数）的介绍及使用，利用内置函数实现各种图形及效果。https://blog.youkuaiyun.com/damadashen/article/details/125807156?spm=1001.2014.3001.5501

接上一篇，继续使用着色器及内置函数实现各种图形及效果。

1. 绘制圆

1）白色圆

  float strength = 1.0 - step(0.5,distance(vUv,vec2(0.5))+0.25) ;
  gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

2）黑色圆

    float strength = step(0.5,distance(vUv,vec2(0.5))+0.25) ;
    gl_FragColor =vec4(strength,strength,strength,1);

2.绘制圆环

    float strength = step(0.5,distance(vUv,vec2(0.5))+0.35) ;
    strength *= (1.0 - step(0.5,distance(vUv,vec2(0.5))+0.25)) ;
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

3.靶子环

    float strength = step(0.1,abs(distance(vUv,vec2(0.5))-0.25))   ;
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

4.波浪环

    vec2 waveUv = vec2(
        vUv.x,
        vUv.y+sin(vUv.x*30.0)*0.1
    );
    float strength = 1.0 - step(0.01,abs(distance(waveUv,vec2(0.5))-0.25))   ;
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

5. 根据角度显示视图（atan（））

反正切函数

    float angle = atan(vUv.x,vUv.y);
    float strength = angle;
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

6.根据角度实现螺旋渐变

    float angle = atan(vUv.x-0.5,vUv.y-0.5);
    float strength = (angle+3.14)/6.28;
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

7.实现雷达扫射效果

    vec2 rotateUv = rotate(vUv,-uTime*5.0,vec2(0.5));
    float alpha =  1.0 - step(0.5,distance(vUv,vec2(0.5)));
    float angle = atan(rotateUv.x-0.5,rotateUv.y-0.5);
    float strength = (angle+3.14)/6.28;
    gl_FragColor =vec4(strength,strength,strength,alpha);

实现效果：

8. 光芒四射效果

    float angle = atan(vUv.x-0.5,vUv.y-0.5)/(2.0*PI);
    float strength = sin(angle*100.0);
    
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

9. 使用噪声算法实现各种效果

在fragment.glsl文件的main（）函数前对噪声算法进行声明：

// 噪声函数
float noise (in vec2 _st) {
    vec2 i = floor(_st);
    vec2 f = fract(_st);

    // Four corners in 2D of a tile
    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));

    vec2 u = f * f * (3.0 - 2.0 * f);

    return mix(a, b, u.x) +
            (c - a)* u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
}

原始noise（）使用

    float strength = noise(vUv);
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

1）实现细碎黑白花效果

在main（）函数中调用noise（）进行实现：

    float strength = step(0.5,noise(vUv * 100.0)) ;
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

10.噪声算法二-cnoise（）的使用

在main（）函数前对cnoise（）进行声明：

//	Classic Perlin 2D Noise 
//	by Stefan Gustavson
//
vec4 permute(vec4 x)
{
    return mod(((x*34.0)+1.0)*x, 289.0);
}

vec2 fade(vec2 t)
{
    return t*t*t*(t*(t*6.0-15.0)+10.0);
}

float cnoise(vec2 P)
{
    vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0);
    vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0);
    Pi = mod(Pi, 289.0); // To avoid truncation effects in permutation
    vec4 ix = Pi.xzxz;
    vec4 iy = Pi.yyww;
    vec4 fx = Pf.xzxz;
    vec4 fy = Pf.yyww;
    vec4 i = permute(permute(ix) + iy);
    vec4 gx = 2.0 * fract(i * 0.0243902439) - 1.0; // 1/41 = 0.024...
    vec4 gy = abs(gx) - 0.5;
    vec4 tx = floor(gx + 0.5);
    gx = gx - tx;
    vec2 g00 = vec2(gx.x,gy.x);
    vec2 g10 = vec2(gx.y,gy.y);
    vec2 g01 = vec2(gx.z,gy.z);
    vec2 g11 = vec2(gx.w,gy.w);
    vec4 norm = 1.79284291400159 - 0.85373472095314 * vec4(dot(g00, g00), dot(g01, g01), dot(g10, g10), dot(g11, g11));
    g00 *= norm.x;
    g01 *= norm.y;
    g10 *= norm.z;
    g11 *= norm.w;
    float n00 = dot(g00, vec2(fx.x, fy.x));
    float n10 = dot(g10, vec2(fx.y, fy.y));
    float n01 = dot(g01, vec2(fx.z, fy.z));
    float n11 = dot(g11, vec2(fx.w, fy.w));
    vec2 fade_xy = fade(Pf.xy);
    vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);
    float n_xy = mix(n_x.x, n_x.y, fade_xy.y);
    return 2.3 * n_xy;
}

1）通过时间设置变化波形

    float strength = step(uScale,cnoise(vUv * 10.0+uTime)) ;
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

2）实现发光路径

    float strength =1.0 - abs(cnoise(vUv * 10.0)) ;
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

3）利用时间实现波纹效果

    float strength = sin(cnoise(vUv * 10.0)*5.0+uTime) ;
    gl_FragColor =vec4(strength,strength,strength,1);

实现效果：

11. 混合颜色

    vec3 purpleColor = vec3(1.0, 0.0, 1.0);
    vec3 greenColor = vec3(1.0, 1.0, 1.0);
    vec3 uvColor = vec3(vUv,1.0);
    float strength = step(0.9,sin(cnoise(vUv * 10.0)*20.0))  ;
    vec3 mixColor =  mix(greenColor,uvColor,strength);
    gl_FragColor =vec4(mixColor,1.0);

实现效果：