就是实现一个球形地图无限无缝放大效果代码
代码语言:html
所属分类:动画
代码描述:就是实现一个球形地图无限无缝放大效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { height: 100%; } img { display: none; } body { background: #000; overflow: hidden; padding: 0; margin: 0; width: 100%; height: 100%; text-align: center; } canvas { height: 100%; width: 100%; margin: auto; } </style> </head> <body > <!-- VertexShader code here --> <script id="vertexShader" type="x-shader/x-vertex">#version 300 es precision highp float; in vec4 vPosition; void main() { gl_Position = vPosition; } </script> <!-- FragmentShader code here --> <script id="fragmentShader" type="x-shader/x-fragment">#version 300 es precision highp float; out vec4 fragColor; uniform vec4 mouse; uniform vec2 resolution; uniform float time; #define R resolution #define T time #define M mouse #define PI 3.14159265359 #define PI2 6.28318530718 #define MAX_DIST 30.00 #define MIN_DIST 0.001 float hash21(vec2 a){ return fract(sin(dot(a, vec2(27.609, 57.583)))*43758.5453); } mat2 rot(float a) { return mat2(cos(a),sin(a),-sin(a),cos(a)); } //@iq https://iquilezles.org/www/articles/palettes/palettes.htm vec3 hue(float t){ vec3 d = vec3(0.110,0.584,0.949); return .45+.4*cos( PI2*t*vec3(.95,.97,.88)*d ); } //@iq cylinder float box(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); } const float sz = 2.; const float hl = sz*.5; const vec2 boxSize = vec2(sz*.45,.25); const float density = 16.; //global vec3 hit,ghp; vec2 cellId,gid; float lpscale,movement; mat2 turn; vec2 map(vec3 q){ vec2 res = vec2(1e5,0.); vec2 p = q.xz; p*=t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0