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, .5 * 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 uniform float time; uniform vec2 resolution; uniform vec2 touch; uniform int pointerCount; out vec4 fragColor; #define T time #define S smoothstep #define rot(a) mat2(cos(a), -sin(a), sin(a), cos(a)) #define hue(a) (.6+.6*cos(6.3*(a)+vec3(0,23,21))) #define mouse (touch / resolution) float tick(float t, float e) { return floor(t)+pow(S(.0, 1., fract(t)), e); } float smin(float a, float b, float k) { float h = clamp( .5+.5*(b-a)/k, .0, 1. ); return mix(b, a, h)-k*h*(1.-h); } float box(vec3 p, vec3 s, float r) { p = abs(p) -s; return length(max(p, .0))+ min(.0, max(max(p.x, p.y), p.z))-r; } float codepen(vec3 p, vec3 s, float e, float r) { p = abs(p)-s; vec3 q = abs(p+e)-e; return min(min( length( max(vec3(p.x, q.y, q.z), .0))+ min(max(p.x, max(q.y, q.z)), .0) - r, length( max(vec3(q.x, p.y, q.z), .0))+ min(max(q.x, max(p.y, q.z)), .0) - r), length( max(vec3(q.x, q.y, p.z), .0))+ min(max(q.x, max(q.y, p.z)), .0) - r); } float oct(vec3 p, float s) { p = abs(p); return (p.x+p.y+p.z-s)*(1./sqrt(3.)); } float mat = .0; float map(vec3 p) { float d = 5e5, room = box(p, vec3(7), .05); p.xz *= rot(.82); float bx = box(p, vec3(1.2), .125); p.yz *= rot(.5); p.xz *= rot(-.82); float cp = codepen(p, vec3(.75, .5, .75), .1, .0125); d = min(d, -room); d = min(d, max(bx, -cp)); if (d == -room) mat=1.; else if (d == -cp) mat=2.; else mat=.0; return d; } vec3 norm(vec3 p) { vec2 e = vec2(1e-3, 0); float d = map(p); vec3 n = d-vec3( map(p-e.xyy), map(p-e.yxy), map(p-e.yyx) ); return normalize(n); } void cam(inout vec3 p) { if (pointerCount > 0) { p.yz*=rot(-mouse.y*acos(-1.)-acos(.0)); p.xz*=rot(mouse.x*acos(-1.)*2.); } else { p.yz*=rot(tick(sin(T), 5.)); p.xz*=rot(tick(T*.25, 5.)*acos(.0)+acos(.0)*.5); } } void main() { vec2 uv = ( gl_FragCoord.xy-.5*resolution ) / min(resolution.x, resolution.y); float zoom = pointerCount > 0 ? 2. : exp(-cos(T)); vec3 col = vec3(0), ro = vec3(0,0,zoom-6.), rd = normalize(vec3(uv, 1)); cam(ro); cam(rd); vec3 p = ro; const float steps=200., maxd=40.; float dd=.0, at=.0, bnz=.0, side=1., e=1.; for (float i=.0; i<steps; i++) { float d = map(p)*side; if (d<1e-3) { vec3 n = norm(p)*side, l = normalize(vec3(1,3,-1)-p); if (dot(l, n) < .0) l = -l; float fog = 1.-clamp(dd/maxd, .0, 1.), fres = max(.0, dot(-rd, n)), diff = max(.0, dot(l, n)); if (mat==1.) { vec2 dr = p.xy; if (abs(p.z) < abs(p.x)) dr = p.yz; vec2 g = abs(fract(dr*.5)-.5)*2.; float pat = step(min(g.x, g.y.........完整代码请登录后点击上方下载按钮下载查看
网友评论0