Shader图案demo

小牛码495

于 2025-05-11 16:36:18 发布

阅读量428

点赞数 12

分类专栏： Shader 文章标签： 3d 前端 webgl

本文链接：https://blog.csdn.net/2301_80080127/article/details/147869770

版权

Shader 专栏收录该内容

2 篇文章

订阅专栏

理解gl_FragColor的基本用法

gl_FragColor是GLSL（OpenGL Shading Language）中的一个内置变量，用于指定片元着色器输出的颜色。其类型为vec4，表示一个四维向量，分别对应RGBA（红、绿、蓝、透明度）四个通道。通过修改gl_FragColor的值，可以控制片元的最终颜色。

通过修改RGB通道实现颜色变化

通过调整gl_FragColor的RGB通道值，可以实现不同的颜色效果。例如vec4(vUv, 1.0, 1.0) 创建了一个四维向量。vUv 是一个二维向量，通常表示顶点着色器传递到片段着色器的纹理坐标，片段着色器将其用于生成输出颜色，vUv 的 x 和 y 分量被用作 gl_FragColor 的红色和绿色通道，而 1.0 分别被用作蓝色和透明度通道。

着色器图案demo

通过数学的方式定义rgb来达到不同的图案，下面分享50张图案demo。

gl_FragColor = vec4(vUv,1.0,1.0);

在这里插入图片描述

gl_FragColor = vec4(vUv,0.0,1.0);

在这里插入图片描述

gl_FragColor = vec4(vUv,0.5,1.0);

在这里插入图片描述

gl_FragColor = vec4(vUv.x,vUv.x,vUv.x,1.0);

在这里插入图片描述

float r = 1.0-vUv.x;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = vUv.y;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = 1.0 - vUv.y;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = mod(vUv.y * 10.0, 1.0);
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = mod(vUv.y * 10.0, 1.0);
if (r < 0.5) {
  r = 0.0;
} else {
  r = 1.0;
}
gl_FragColor = vec4(r, r, r, 1.0);

float r = mod(vUv.y * 10.0, 1.0);
r = step(0.5, r);
gl_FragColor = vec4(r, r, r, 1.0);

两种方式都可以，最好避免if语句，下边的更好一些

在这里插入图片描述

 float r = step(0.9, mod(vUv.x * 10.0, 1.0));
 gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

 float r = step(0.9, mod(vUv.y * 10.0, 1.0));
 gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = step(0.9, mod(vUv.x * 10.0, 1.0));
r += step(0.9, mod(vUv.y * 10.0, 1.0));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = step(0.9, mod(vUv.x * 10.0, 1.0));
r *= step(0.9, mod(vUv.y * 10.0, 1.0));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = step(0.4, mod(vUv.x * 10.0, 1.0));
r *= step(0.8, mod(vUv.y * 10.0, 1.0));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float barX = step(0.4, mod(vUv.x * 10.0, 1.0));
barX *= step(0.8, mod(vUv.y * 10.0, 1.0));

float bary = step(0.8, mod(vUv.x * 10.0, 1.0));
bary *= step(0.4, mod(vUv.y * 10.0, 1.0));

float r = barX + bary;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float barX = step(0.4, mod(vUv.x * 10.0, 1.0));
barX *= step(0.8, mod(vUv.y * 10.0 + 0.2, 1.0));

float bary = step(0.8, mod(vUv.x * 10.0 + 0.2, 1.0));
bary *= step(0.4, mod(vUv.y * 10.0, 1.0));

float r = barX + bary;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = abs(vUv.x - 0.5);
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = min(abs(vUv.x - 0.5), abs(vUv.y - 0.5));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = max(abs(vUv.x - 0.5), abs(vUv.y - 0.5));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = step(0.2, max(abs(vUv.x - 0.5),abs(vUv.y - 0.5)));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = floor(vUv.x * 10.0) / 10.0; //向下取整
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = floor(vUv.x * 10.0) / 10.0; 
r *= floor(vUv.y * 10.0) / 10.0; 
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float random(vec2 st){
  return fract(sin(dot(st.xy,vec2(12.9898,78.233)))* 43758.5453123);
}
float r = random(vUv);
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float random(vec2 st){
  return fract(sin(dot(st.xy,vec2(12.9898,78.233)))* 43758.5453123);
}
vec2 gridUv = vec2(
  floor(vUv.x * 10.0) / 10.0,
  floor(vUv.y * 10.0) / 10.0
);
float r = random(gridUv);
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

vec2 gridUv = vec2(
  floor(vUv.x * 10.0) / 10.0,
  floor((vUv.y +vUv.x) * 10.0) / 10.0
);
float r = random(gridUv);
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = length(vUv);
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = length(vUv - 0.5);//distance(vUv,vec2(0.5,0.5))效果一样
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = 1.0 -distance(vUv, vec2(0.5,0.5));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = 0.015 / distance(vUv, vec2(0.5,0.5)) + 0.2;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

vec2 lightUv = vec2(
  vUv.x  * 0.1 + 0.45,
  vUv.y
);
float r = 0.015 / distance(lightUv, vec2(0.5,0.5));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

vec2 lightUvX = vec2(vUv.x * 0.1 + 0.45,vUv.y * 0.5 + 0.25);
float lightX = 0.015 / distance(lightUvX, vec2(0.5,0.5));

vec2 lightUvY = vec2(vUv.y * 0.1 + 0.45,vUv.x * 0.5 + 0.25);
float lightY = 0.015 / distance(lightUvY, vec2(0.5,0.5));

float r = lightX * lightY + 0.03;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

vec2 rotate(vec2 uv, float rotation, vec2 mid){//uv为需要旋转的坐标，rotation为旋转角度，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, 0.75, vec2(0.5,0.5));

vec2 lightUvX = vec2(rotateUv.x * 0.1 + 0.45,rotateUv.y * 0.5 + 0.25);
float lightX = 0.015 / distance(lightUvX, vec2(0.5,0.5));

vec2 lightUvY = vec2(rotateUv.y * 0.1 + 0.45,rotateUv.x * 0.5 + 0.25);  
float lightY = 0.015 / distance(lightUvY, vec2(0.5,0.5));

float r = lightX * lightY + 0.03;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = step(0.2, distance(vUv, vec2(0.5,0.5)));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = abs(distance(vUv, vec2(0.5,0.5)) - 0.25);
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = step(0.01, abs(distance(vUv, vec2(0.5,0.5)) - 0.25));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = 1.0 - step(0.01, abs(distance(vUv, vec2(0.5,0.5)) - 0.25));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

float angle = atan(vUv.y, vUv.x );
float r = angle;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float angle = atan(vUv.y - 0.5, vUv.x - 0.5);
float r = angle;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float angle = atan(vUv.y - 0.5, vUv.x - 0.5);
angle = angle / 3.1415926535897932384626433832795 * 2.0;
angle += 0.5;
float r = angle;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float angle = atan(vUv.x - 0.5, vUv.y - 0.5);
angle = angle / 3.1415926535897932384626433832795 * 2.0;
angle += 0.5;
angle *=10.0;
angle = mod(angle, 1.0);
float r = angle;
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

angle = atan(vUv.x - 0.5, vUv.y - 0.5);
angle = angle / 3.1415926535897932384626433832795 * 2.0;
angle += 0.5;
float r = sin(angle * 50.0 );
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float angle = atan(vUv.x - 0.5, vUv.y - 0.5);
angle = angle / 3.1415926535897932384626433832795 * 2.0;
angle += 0.5;
float sinusiod = sin(angle * 40.0 );

float radius = 0.25 + sinusiod * 0.02;
float r = 1.0 - step(0.01, abs(distance(vUv, vec2(0.5)) - radius));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

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

vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.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;
}
float r = cnoise(vUv * 10.0);
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = step(0.0, cnoise(vUv * 10.0));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

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

在这里插入图片描述

float r = sin(cnoise(vUv * 10.0) * 20.0);
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = step(0.9,sin(cnoise(vUv * 10.0) * 20.0));
gl_FragColor = vec4(r, r, r, 1.0);

在这里插入图片描述

float r = step(0.9,sin(cnoise(vUv * 10.0) * 20.0));

vec3 blackColor = vec3(0.0, 0.0, 0.0);
vec3 uvColor = vec3(vUv.x, vUv.y, 1.0);
vec3 mixedColor = mix(blackColor, uvColor, r);
gl_FragColor = vec4(mixedColor, 1.0);