webgl着色器利用相关函数编写各种类型图案

夏暖冬凉

已于 2025-03-14 23:18:27 修改

阅读量449

点赞数 8

分类专栏： Web3D 文章标签： webgl 着色器

于 2024-08-10 10:44:38 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45487080/article/details/141073255

版权

Web3D 专栏收录该内容

18 篇文章

订阅专栏

<script setup>
import * as THREE from 'three'
import gsap from 'gsap'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 导入 dat.gui
import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; 
import * as CANNON from 'cannon-es'

// const gui = new GUI();
//1.创建场景
const scene = new THREE.Scene()
//2.创建相机 角度  宽高比  近端  远端
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 30)
// 设置相机位置  x y z 
camera.position.set(0, 0, 20)
// 把相机添加到场景中
scene.add(camera)

// 创建纹理加载器对象
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('c4965b97abab46118cb221b818bc74a5.png')

import basicVertexShader from './shader/deep/vertex.glsl'
import basicFragmentShader from './shader/deep/fragment.glsl'

// 自定义着色器材质
const shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: basicVertexShader,
  fragmentShader: basicFragmentShader,
  // wireframe: true // 线框
  transparent: true, // 启用透明度
  side: THREE.DoubleSide,
  uniforms: {
    uTime: {
      value: 0
    },
  }
})

// const material = new THREE.MeshBasicMaterial({color: '#00FF00'})
// 创建平面
const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(1, 1, 64, 64),
  shaderMaterial,
  // material
)

scene.add(floor)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 开启场景中的阴影贴图
renderer.shadowMap.enabled = true
// 将webgel渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 设置控制器的阻尼 更真实 惯性
controls.enableDamping = true

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// 设置时钟
const clock = new THREE.Clock()
function render() {
  let elapsedTime = clock.getElapsedTime()
  shaderMaterial.uniforms.uTime.value = elapsedTime
  // 使用渲染器，通过相机将场景渲染进来
  renderer.render(scene, camera);
  // 渲染下一帧的时候 调用 render函数
  requestAnimationFrame(render)
}
render()

// 监听窗口尺寸变化，更新渲染画面
window.addEventListener("resize", () => {
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新摄像机的投影矩阵
  camera.updateProjectionMatrix()

  // 更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

</script>

vertex.glsl

varying vec2 vUv;
void main(){
  vec4 modelPosition = modelMatrix * vec4(position, 1);
  vUv = uv;
  gl_Position = projectionMatrix * viewMatrix * modelPosition;
}

fragment.glsl

1.通过顶点对应的uv，决定每一个像素在uv图像的位置，通过这个位置x,y决定颜色

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
		gl_FragColor = vec4(vUv, 0.0, 1.0);
    }

2.对第一种变色（默认有个蓝色）

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
		gl_FragColor = vec4(vUv, 1.0, 1.0);
    }

3.利用uv实现渐变效果, 从左到右

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = vUv.x;
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

4.利用uv实现渐变效果, 从下到上

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = vUv.y;
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

5.利用uv实现渐变效果, 从上到下

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = 1.0 - vUv.y;
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

6.利用uv实现短范围内渐变

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = vUv.y * 10.0;
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

7.利用mod()通过取模达到反复效果 x % 1 = [0, 1]

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = mod(vUv.y * 10.0, 1.0);
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

8.利用step(edge, x), 如果 x < edge 返回 0.0，反之 1.0

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = mod(vUv.y * 10.0, 1.0);
      strength = step(0.5, strength);
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

9.利用step(edge, x), 如果 x < edge 返回 0.0，反之 1.0

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = mod(vUv.x * 10.0, 1.0);
      strength = step(0.8, strength);
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

10.条纹相加

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = step(0.8, mod(vUv.x * 10.0, 1.0));
      strength += step(0.8, mod(vUv.y * 10.0, 1.0));
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

11.条纹相乘（只显示相交的地方）

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = step(0.8, mod(vUv.x * 10.0, 1.0));
      strength *= step(0.8, mod(vUv.y * 10.0, 1.0));
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

12.条纹相减

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = step(0.8, mod(vUv.x * 10.0, 1.0));
      strength -= step(0.8, mod(vUv.y * 10.0, 1.0));
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

13.条纹偏移（方块图形）

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = step(0.5, mod(vUv.x * 10.0, 1.0));
      strength *= step(0.5, mod(vUv.y * 10.0, 1.0));
      gl_FragColor = vec4(strength, strength, strength, 1.0);
    }

14.L形图

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float barX = step(0.4, mod(vUv.x * 10.0, 1.0)) * step(0.8, mod(vUv.y * 10.0, 1.0));
      float barY = step(0.4, mod(vUv.y * 10.0, 1.0)) * step(0.8, mod(vUv.x * 10.0, 1.0));
      float strength = barX + barY;
      gl_FragColor = vec4(vUv, 1.0, strength);
    }

15.T形图

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float barX = step(0.4, mod(vUv.x * 10.0 - 0.2, 1.0)) * step(0.8, mod(vUv.y * 10.0, 1.0));
      float barY = step(0.4, mod(vUv.y * 10.0, 1.0)) * step(0.8, mod(vUv.x * 10.0, 1.0));
      float strength = barX + barY;
      gl_FragColor = vec4(vUv, 1.0, strength);
    }

16.利用绝对值abs()

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = abs(vUv.x - 0.5);
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = abs(vUv.x - 0.5) + abs(vUv.y - 0.5);
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

17.取2个值得最小值

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = min(abs(vUv.x - 0.5), abs(vUv.y - 0.5));
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

18.取最大值(取反)

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = max(abs(vUv.x - 0.5), abs(vUv.y - 0.5));
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = 1.0 - max(abs(vUv.x - 0.5), abs(vUv.y - 0.5));
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

19. 利用step(edge, x), 如果 x < edge 返回 0.0，反之 1.0

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = step(0.2, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5)));
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

20.小正方形

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = 1.0 - step(0.2, max(abs(vUv.x - 0.5), abs(vUv.y - 0.5)));
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

21.利用取整, 实现条纹渐变floor()

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = floor(vUv.x * 10.0) / 10.0;
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

22.两条相乘, 实现渐变格子

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = floor(vUv.x * 10.0) / 10.0 * floor(vUv.y * 10.0) / 10.0;
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

23.向上取整ceil()

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = ceil(vUv.x * 10.0) / 10.0 * ceil(vUv.y * 10.0) / 10.0;
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

24.随机

可参考该网站-点击即可👈
在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    // 随机函数
    float random (vec2 st) {
      return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
    }
    void main(){ 
      float strength = random(vUv);
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

25.随机 + 格子

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    // 随机函数
    float random (vec2 st) {
      return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123);
    }
    void main(){ 
      float strength = ceil(vUv.x * 10.0) / 10.0 * ceil(vUv.y * 10.0) / 10.0;
      strength = random(vec2(strength, strength));
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

26.依据length返回向量长度

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = length(vUv);
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

27.根据distance计算2个向量的距离

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = distance(vUv, vec2(0.5, 0.5));
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

28.根据相除, 实现星星

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = 0.15 / distance(vUv, vec2(0.5, 0.5)) - 1.0;
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

29.设置vUv水平或竖直变量（位移+压缩）

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = 0.15 / distance(vec2(vUv.x, (vUv.y - 0.5) * 5.0), vec2(0.5, 0.5)) - 1.0;
      gl_FragColor = vec4(strength, strength, strength, strength);
    }

30.十字交叉的星星

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = 0.15 / distance(vec2(vUv.x, (vUv.y - 0.5) * 5.0 + 0.5), vec2(0.5, 0.5)) - 1.0;
      strength += 0.15 / distance(vec2((vUv.x - 0.5) * 5.0 + 0.5, vUv.y), vec2(0.5, 0.5)) - 1.0;
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

31.旋转飞镖, 旋转uv 180/4

在这里插入图片描述

   	   uniform float uTime;

	   // 旋转函数，mid中心点
	   vec2 rotate(vec2 uv, float rotation, vec2 mid){
	     return vec2(
	       cos(rotation) * (uv.x - mid.x) + sin(rotation) * (uv.y-mid.y) + mid.x,
	       cos(rotation) * (uv.y - mid.y) - sin(rotation) * (uv.x-mid.x) + mid.y
	     );
	   }
	   
      // vec2 rotateUv = rotate(vUv, 3.14 * 0.25, vec2(0.5, 0.5));
      vec2 rotateUv = rotate(vUv, 3.14 * -uTime, vec2(0.5, 0.5));
      float strength = 0.15 / distance(vec2(rotateUv.x, (rotateUv.y - 0.5) * 5.0 + 0.5), vec2(0.5, 0.5)) - 1.0;
      strength += 0.15 / distance(vec2((rotateUv.x - 0.5) * 5.0 + 0.5, rotateUv.y), vec2(0.5, 0.5)) - 1.0;
      gl_FragColor = vec4(strength, strength, strength, strength);

32.小日本国旗

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = step(0.5, distance(vUv, vec2(0.5, 0.5)) + 0.25);
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

33.圆环，需要改变第二个白色的范围 1.0*1.0等于白色

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = step(0.5, distance(vUv, vec2(0.5, 0.5)) + 0.35);
      strength *= 1.0 - step(0.5, distance(vUv, vec2(0.5, 0.5)) + 0.25);
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

34.渐变环

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = abs(distance(vUv, vec2(0.5)) - 0.25);
      gl_FragColor = vec4(strength, strength, strength, 1);
    }

35.波浪环

在这里插入图片描述

      precision mediump float;
      varying vec2 vUv;
      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);

36

在这里插入图片描述

      precision mediump float;
      varying vec2 vUv;
      vec2 waveUv = vec2(
        vUv.x + sin(vUv.y * 30.0) * 0.1,
        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);

37.根据角度显示视图，反正切atan()

在这里插入图片描述

      precision mediump float;
      varying vec2 vUv;
      float strength = atan(vUv.x, vUv.y);
      gl_FragColor = vec4(strength, strength, strength, 1);

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

在这里插入图片描述

      precision mediump float;
      varying vec2 vUv;
      float strength = atan(vUv.x - 0.5, vUv.y - 0.5);
      // 实现角度从0到1
      strength = (strength + 3.14) / 6.28;
      gl_FragColor = vec4(strength, strength, strength, 1);

39.实现雷达扫射

在这里插入图片描述

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

40.通过时间实现动态雷达扫射

在这里插入图片描述

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

41.万花筒

在这里插入图片描述

      precision mediump float;
      varying vec2 vUv;
      // 定义常量
      #define PI 3.1415926
      float angle = atan(vUv.x - 0.5, vUv.y - 0.5) / PI;
      float strength = mod(angle * 10.0, 1.0);
      gl_FragColor = vec4(strength, strength, strength, 1);

42.光芒四射

在这里插入图片描述

      precision mediump float;
      varying vec2 vUv;
      // 定义常量
      #define PI 3.1415926
      float angle = atan(vUv.x - 0.5, vUv.y - 0.5) / PI;
      float strength = mod(angle * 10.0, 1.0);
      gl_FragColor = vec4(strength, strength, strength, 1);

43.使用噪声实现烟雾、波纹效果

    // 柏林噪声
    vec4 mod289(vec4 x)
    {
      return x - floor(x * (1.0 / 289.0)) * 289.0;
    }
 
    vec4 permute(vec4 x)
    {
      return mod289(((x*34.0)+1.0)*x);
    }
 
    vec4 taylorInvSqrt(vec4 r)
    {
      return 1.79284291400159 - 0.85373472095314 * r;
    }
 
    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 = mod289(Pi); // 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 = fract(i * (1.0 / 41.0)) * 2.0 - 1.0 ;
      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 = taylorInvSqrt(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;
    }

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    float strength = cnoise(vUv * 10.0);
    gl_FragColor = vec4(strength, strength, strength, 1);

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    float strength = step(0.5, cnoise(vUv * 10.0));
    gl_FragColor = vec4(strength, strength, strength, 1);
    // 通过时间和放大缩小来设置波形
    // float strength = step(uScale, cnoise(vUv * 10.0 + uTime));
    // gl_FragColor = vec4(strength, strength, strength, 1);

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    float strength = abs(cnoise(vUv * 10.0));
    gl_FragColor = vec4(strength, strength, strength, 1);

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    // 发光路径
    float strength = 1.0 - abs(cnoise(vUv * 10.0));
    gl_FragColor = vec4(strength, strength, strength, 1);

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    // 发光路径
    float strength = sin(cnoise(vUv * 10.0) * 20.0);
    gl_FragColor = vec4(strength, strength, strength, 1);
    // 波纹效果
    // float strength = sin(cnoise(vUv * 10.0) * 5.0 + uTime);
    // gl_FragColor = vec4(strength, strength, strength, 1);

44.使用混合函数混颜色mix()

在这里插入图片描述

      precision mediump float;
      varying vec2 vUv;
      vec3 purpleColor = vec3(1.0, 0.0, 1.0);
      vec3 greenColor = vec3(0.0, 1.0, 1.0);
      float strength = step(0.9, sin(cnoise(vUv * 10.0)*20.0));
      // 第三个参数代表混合占比
      vec3 mixColor = mix(purpleColor, greenColor, strength);
      gl_FragColor = vec4(mixColor, 1.0);