就是实现一个球形地图无限无缝放大效果代码
代码语言: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