当前位置：首页 > news >正文

threejs(11)-精通着色器编程（难点）2

news 2025/8/19 19:23:55

一、shader着色器编写高级图案

小日本国旗

在这里插入图片描述

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

绘制圆

在这里插入图片描述

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

圆环

在这里插入图片描述

precision lowp float;
varying vec2 vUv;
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,strength);

渐变环

在这里插入图片描述

precision lowp float;
varying vec2 vUv;
float strength =  abs(distance(vUv,vec2(0.5))-0.25) ;
gl_FragColor =vec4(strength,strength,strength,1);

打靶

在这里插入图片描述

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

波浪环

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

根据角度显示视图

在这里插入图片描述

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

根据角度实现螺旋渐变雷达扫描

在这里插入图片描述

precision lowp float;
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);

实现雷达扫射-通过时间实现动态选择

在这里插入图片描述

precision lowp float;
vec2 rotateUv = rotate(vUv,3.14*0.25,vec2(0.5));
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,1);

万花筒

在这里插入图片描述

precision lowp float;
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);

光芒四射

在这里插入图片描述

precision lowp float;
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);

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

在这里插入图片描述

precision lowp float;
// 噪声函数
float noise (in vec2 _st) {vec2 i = floor(_st);vec2 f = fract(_st);// Four corners in 2D of a tilefloat 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;
}
float strength = noise(vUv);
gl_FragColor =vec4(strength,strength,strength,1);

通过时间设置波形

在这里插入图片描述

precision lowp float;
// 噪声函数
float noise (in vec2 _st) {vec2 i = floor(_st);vec2 f = fract(_st);// Four corners in 2D of a tilefloat 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;
}
float strength = step(0.5,noise(vUv * 100.0)) ;
gl_FragColor =vec4(strength,strength,strength,1);

使用gui调试

const params = {uFrequency: 10,uScale: 0.1,
};...
// 创建着色器材质;
const shaderMaterial = new THREE.ShaderMaterial({vertexShader: basicVertexShader,fragmentShader: basicFragmentShader,uniforms: {uColor: {value: new THREE.Color("purple"),},// 波浪的频率uFrequency: {value: params.uFrequency,},// 波浪的幅度uScale: {value: params.uScale,},// 动画时间uTime: {value: 0,},uTexture: {value: texture,},},side: THREE.DoubleSide,transparent: true,
});
....
gui.add(params, "uFrequency").min(0).max(50).step(0.1).onChange((value) => {shaderMaterial.uniforms.uFrequency.value = value;});
gui.add(params, "uScale").min(0).max(1).step(0.01).onChange((value) => {shaderMaterial.uniforms.uScale.value = value;});

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

在这里插入图片描述

发光路径

在这里插入图片描述

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

使用混合函数混颜色

在这里插入图片描述

    // 使用混合函数混颜色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);gl_FragColor =vec4(mixColor,1.0);