gl-matrix实现三维螺旋球体阴影变化旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:gl-matrix实现三维螺旋球体阴影变化旋转动画效果代码
代码标签: gl-matrix 三维 螺旋 球体 阴影 变化 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #001; } canvas { width: 100%; height: 100%; display: block; } #controls { position: fixed; top: 10px; left: 10px; z-index: 100; display: flex; align-items: center; } .btn { background-color: rgba(0, 0, 0, 0.4); border: none; color: rgba(255, 255, 255, 0.4); padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 2px 2px; cursor: pointer; border-radius: 5px; transition: background-color 0.3s; } .btn:hover { background-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 0, 1); } #fullscreenBtn { font-size: 20px; } </style> </head> <body> <canvas id="glCanvas"></canvas> <div id="controls"> <button id="fullscreenBtn" class="btn" title="Toggle Fullscreen">⤢</button> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gl-matrix-min.js"></script> <script > const canvas = document.getElementById('glCanvas'); const gl = canvas.getContext('webgl2'); if (!gl) { console.error('WebGL 2 not supported'); document.body.innerHTML = 'WebGL 2 is not supported in your browser.'; } const vertexShaderSource = `#version 300 es in vec4 aPosition; void main() { gl_Position = aPosition; }`; const fragmentShaderSource = `#version 300 es precision highp float; uniform vec3 iResolution; uniform float iTime; uniform vec4 iMouse; out vec4 fragColor; /*--- BEGIN OF SHADERTOY ---*/ // 20240927 #define Shadow 1 // 0 or 1 #define rot(t) mat2(cos(t), sin(t), -sin(t), cos(t)) #define time (iTime*2.) int obj; float dist; float smin(float d1, float d2, float k) { float h =clamp(.5 + .5 *(d2-d1)/k,0.,1.); return mix(d2, d1, h)-k*h*(1.-h); } float smax(float d1, float d2, float k) { return smin(d1,d2,-k); } float gyr(vec3 p){ obj=0; float r=4.25; float d1=length(p)-r; vec3 q=p ; float d2= dot(cos(q.yzx*4.),sin(q*4.))/4.-.0; //float k = 48.;//floor(iTime); // 4 12 20 28 36 48 //float d6= dot(cos(p*k),sin(p.zxy*k))/k; // NEW Iteration to follow mouse y-pos float k = 36.;//floor(iTime); // 4 12 20 28 36 48 if(iMouse.x>iResolution.x*.25)k=20.; // NEW if(iMouse.x>iResolution.x*.5)k=12.; // NEW if(iMouse.x>iResolution.x*.75)k=4.; // NEW float d6= dot(cos(p*k),sin(p.yzx*k))/k; float d5 = length(max(abs(vec2(d2,d1)),0.))-.03; dist = .5* smin(d5, length(smax(0.,smax(d1,smax(abs(d2),abs(d6)-.01,.03),.03),.01)-.001), .01);// 202409270516 float flr = (100.+r)-length(p-vec3(0,100,0)); if(flr<dist)obj=1; dist = min(dist,flr); return dist; } float map(vec3 p) { float t = time; // 2..........完整代码请登录后点击上方下载按钮下载查看
网友评论0