tag-2021-09-22-tag

### Shapes（图形）

#### Remap（重分）

  vec2 Remap(vec2 p, float t, float r, float b, float l) {
return vec2((p.x - r)/ (l -r), (p.y - b) / (t - b));
}


#### Plot（线条）

  float plot_x(vec2 p, float start, float end, float blur) {
return smoothstep(start, start + blur, p.x)
- smoothstep(end, end + blur, p.x)
}

float plot_y(vec2 p, float start, float end, float blur) {
return smoothstep(start, start + blur, p.y)
- smoothstep(end, end + blur, p.y)
}


#### Grid（表格）

  vec2 uv = fract(uv * 10.0);


#### Sphere（球体）

  float sdSphere( vec3 p, float s )
{
return length(p)-s;
}


#### Cube （立方体）

  float sdBox( vec3 p, vec3 b )
{
vec3 q = abs(p) - b;
return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0);
}


#### Cylinder （圆柱体）

  float sdRoundedCylinder( vec3 p, float ra, float rb, float h )
{
vec2 d = vec2( length(p.xz)-2.0*ra+rb, abs(p.y) - h );
return min(max(d.x,d.y),0.0) + length(max(d,0.0)) - rb;
}


### 颜色

#### RGB和HSV颜色互转


vec3 rgb2hsv(vec3 c){
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}

vec3 hsv2rgb(vec3 c){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0);
rgb = rgb * rgb * (3.0 - 2.0 * rgb);
return c.z * mix(vec3(1.0), rgb, c.y);
}



### View（视角）

#### RayMarch（光线步进）

#define MAX_STEP  255
#define PRECISION 0.01
float RayMarch(vec2 ro, vec2 rd, float start, float end) {
float depth = start;
for(int i=0; i<MAX_STEP; i++) {
vec2 p = ro + rd * depth;
float d = (length(p) - 1.0);
depth += d;

if(depth < PRECISION  || depth > end) break;
}
return depth;
}


#### Camera Matrix(相机矩阵)

  mat3 camera(vec3 ro, vec3 lp) {
vec3 camera_direction = normalize(lp - ro);
vec3 camera_right = normalize(cross(vec3(0.0, 1.0, 0.0), camera_direction));
vec3 camera_up = normalize(cross(camera_xx, camera_direction));
return mat3(
-camera_direction,
camera_right,
-camera_up
);
}


#### 抗阴影锯齿（anti aslising）

WebGL在绘制阴影的过程中，阴影会在边缘显示不平滑的效果。抗阴影锯齿使用平均取值过渡算法，让阴影变得丝滑。最初在Learn OpenGl 教程中学习到:

  float shadows = 0.0;
float opacity= .4;// 阴影alpha值, 值越小暗度越深
float texelSize= 1.0 / 2028.0;// 阴影像素尺寸,值越小阴影越逼真
//  消除阴影边缘的锯齿 去平局差值四周围的
for(float y=-2.0; y <= 2.0; y++){
for(float x=-2.0; x <=2.0; x++){
rgbaDepth = texture(u_texture, depth.xy + vec2(x, y) * texelSize);
}
}
float visibility = min(opacity + (1.0 - shadows), 1.0); // 抗锯齿阴影


### Matrix（矩阵）

#### rotate（旋转）

  mat2 rotate2D(float angle) {
return mat2(cos(angle), -sin(angle),
sin(angle), cos(angle));
}


#### scale（缩放）

  mat2 scale2D(vec2 r) {
return mat2(r.x, 0.0,
0.0, r.y
);
}


### Materials & Light（材质和光照）

#### Ambient（环境光）

  gl_FragColor = ambientColor * a_color;


#### diffuse（漫反射）

  float fDot = dot(a_normal, u_lightDirection);
gl_FragColor = diffuseColor * fDot * a_color;


#### specular（镜面反射）

  vec2 ref = reflect(a_normal, u_lightDirection);
float fDot = clamp(dot(ref, -u_viewDirection), 0.0, 1.0);
float n = pow(fDot, shiness);
gl_FragColor = specularColor * n * a_color;


#### 法线

  vec3 calcNormal(vec3 p, float d) {
vec2 e = vec2(1.0, -1.0) * 0.0005; // epsilon
float r = 1.; // radius of sphere
return normalize(
e.xyy * d +
e.yyx * d +
e.yxy * d +
e.xxx * d);
}


### Position（定位）

#### Canvas（坐标转换）

  vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;


#### 极坐标

  vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y
vec2 polarCoordinate = (atan(uv.x, uv.y), length(uv));

posted on 2021-11-01 10:07  chen·yan  阅读(162)  评论(0编辑  收藏  举报