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

夏暖冬凉

已于 2024-08-11 01:36:32 修改

阅读量349

点赞数 8

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

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

本文链接：https://blog.csdn.net/qq_45487080/article/details/141073255

版权

Web3D 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<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
})

// 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()

  // 使用渲染器，通过相机将场景渲染进来
  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.利用通过取模达到反复效果 x % 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.利用绝对值

在这里插入图片描述

    precision mediump float;
    varying vec2 vUv;
    void main(){ 
      float strength = abs(vUv.x - 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 = 1.0 - 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.利用取整,实现条纹渐变

在这里插入图片描述

    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.2条相乘,实现渐变格子

在这里插入图片描述

    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.向上取整

在这里插入图片描述

    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));
      gl_FragColor = vec4(strength, strength, strength, 1);
    }