canvas实现webgl三维变色小球螺纹动画效果代码
代码语言:html
所属分类:三维
代码描述:canvas实现webgl三维变色小球螺纹动画效果代码
代码标签: canvas webgl 三维 变色 小球 螺纹 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; overflow: hidden; background: repeating-radial-gradient( circle at center, #444 0 10%, #111 10% 20% ); touch-action: none; } canvas { width: 100%; height: auto; object-fit: contain; } </style> </head> <body > <canvas id="canvas"></canvas> <script > /********* * made by Matthias Hurrle (@atzedent) */ /** @type {HTMLCanvasElement} */ const canvas = window.canvas; const gl = canvas.getContext("webgl2"); const dpr = Math.max(1, window.devicePixelRatio); /** @type {Map<string,PointerEvent>} */ const touches = new Map(); const vertexSource = `#version 300 es #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif in vec2 position; void main(void) { gl_Position = vec4(position, 0., 1.); } `; const fragmentSource = `#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif out vec4 fragColor; uniform vec2 resolution; uniform float time; uniform vec2 touch; uniform int pointerCount; const float TAU = radians(360.); #define PI .5 * TAU #define T time #define S smoothstep #define SURF_DIST .01 #define MAX_DIST 20. #define MAX_STEPS 50 #define hue(v) ( .6 + .6 * cos( 6.3*(v) + vec4(0,23,21,0) ) ) struct Material { float dist; int idx; }; Material MatMin(Material a, Material b) { if (a.dist < b.dist) return a; return b; } mat2 Rot(float alpha) { float s = sin(alpha), c = cos(alpha); return mat2(c, -s, s, c); } float Sphere(vec3 p, vec3 c, float s) { return length(p-c)-s; } Material GetDist(vec3 p) { vec3 pos = vec3(0, 2, -1); return MatMin( Material( Sphere(p, vec3(0), 1.5), 1 ), Material( p.y + 1.64, 0 ) ); } vec3 GetRayDir(vec2 uv, vec3 p, vec3 l, float z) { vec3 f = normalize(l-p), r = normalize(cross(vec3(.0, 1., .0), f)), u = cross(f, r), c = f*z, i = c + uv.x*r + uv.y*u, d = normalize(i); return d; } vec3 GetNormal(vec3 p) { vec2 e = vec2(.001, .0); Material d = GetDist(p); vec3 n = d.dist - vec3( GetDist(p-e.xyy).dist, GetDist(p-e.yxy).dist, GetDist(p-e.yyx).dist ); return normalize(n); } Material RayMarch(vec3 ro, vec3 rd) { float d = .0; Material mat; for (int i = 0; i < MAX_STEPS; i++) { vec3 p = ro + rd * d; mat = GetDist(p); d += mat.dist; if (d > MAX_DIST || abs(d) < SURF_DIST) break; } return Material(d, mat.idx); } vec3 Render(inout vec3 ro, inout vec3 rd, inout float ref) { Material d = RayMarch(ro, rd); vec3 col = vec3(0); if (d.dist > MAX_DIST) return col; vec3 p = ro + rd * d.dist; vec3 lightPos = ro; vec3 l = normalize(lightPos); vec3 n = GetNormal(p); vec3 r = reflect(rd, n); vec3 rn = normalize(r); float fres = clamp(1.+dot(r, n), .0, 1.); float diffuse = smoothstep(.05, .95, dot(l, n) * .5 + .5); float spot = clamp(dot(rn, reflect(n, vec3(0))), .0, 1.); col += .25 * vec3(1.,.9,.95) * pow(diffuse, 8.); col += .5 * pow(spot, 16.); vec3 mat = vec3(1); vec3 tint = hue(T*.1).rgb * 10.; float t = 2.*T; float mx = max(resolution.x, resolution.y); // floor if (d.idx == 0) { float sdf = S( .0, 2./mx, sin(t - 4.*length(p.xz*.5)) + cos(t - 4.*length(p.xy*.5)) ); mat = tint*sdf; ref = mix(.05, .125, fres); }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0