three实现无数三维爱心跳动表白动画效果代码
代码语言:html
所属分类:表白
代码描述:three实现无数三维爱心跳动表白动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <style> body { margin: 0; padding: 0; } #container { left: 50%; position: fixed; transform: translate(-50%, -50%); top: 50%; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script> <script id="vertexShader" type="x-shader/x-vertex"> void main() { gl_Position = vec4( position, 1.0 ); } </script> <script id="fragmentShader" type="x-shader/x-fragment"> uniform vec2 u_resolution; uniform float u_time; uniform vec2 u_mouse; const int octaves = 2; const float seed = 43758.5453123; const float seed2 = 73156.8473192; // Epsilon value const float eps = 0.005; const vec3 ambientLight = 0.99 * vec3(1.0, 1.0, 1.0); const vec3 light1Pos = vec3(10., 5.0, -25.0); const vec3 light1Intensity = vec3(0.35); const vec3 light2Pos = vec3(-20., -25.0, 85.0); const vec3 light2Intensity = vec3(0.2); // movement variables vec3 movement = vec3(.0); // Gloable variables for the raymarching algorithm. const int maxIterations = 256; const int maxIterationsShad = 16; const float stepScale = .7; const float stopThreshold = 0.001; mat4 rotationMatrix(vec3 axis, float angle) { axis = normalize(axis); float s = sin(angle); float c = cos(angle); float oc = 1.0 - c; return mat4(oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0, oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0, oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0, 0.0, 0.0, 0.0, 1.0); } float length2( vec2 p ) { return sqrt( p.x*p.x + p.y*p.y ); } float length6( vec2 p ) { p = p*p*p; p = p*p; return pow( p.x + p.y, 1.0/6.0 ); } float length8( vec2 p ) { p = p*p; p = p*p; p = p*p; return pow( p.x + p.y, 1.0/8.0 ); } // Distance function primitives // Reference: http://iquilezles.org/www/articles/distfunctions/distfunctions.htm float sdBox( vec3 p, vec3 b ) { vec3 d = abs(p) - b; return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0)); } float udBox( vec3 p, vec3 b ) { return length(max(abs(p)-b,0.0)); } float udRoundBox( vec3 p, vec3 b, float r ) { return length(max(abs(p)-b,0.0))-r; } float sdSphere( vec3 p, float s ) { return length(p)-s; } float sdCylinder( vec3 p, vec3 c ) { return length(p.xz-c.xy)-c.z; } float sdCappedCylinder( vec3 p, vec2 h ) { vec2 d = abs(vec2(length(p.xz),p.y)) - h; return min(max(d.x,d.y),0.0) + length(max(d,0.0)); } float sdTorus82( vec3 p, vec2 t ) { vec2 q = vec2(length2(p.xz)-t.x,p.y); return length8(q)-t.y; } float sdPlane( vec3 p) { return p.y; } // smooth min // reference: http://iquilezles.org/www/articles/smin/smin.htm float smin(float a, float b, float k) { float res = exp(-k*a) + exp(-k*b); return -log(res)/k; } vec3 random3( vec3 p ) { return fract(sin(vec3(dot(p,vec3(127.1,311.7,319.8)),dot(p,vec3(269.5,183.3, 415.2)),dot(p,vec3(362.9,201.5,134.7))))*43758.5453); } vec2 random2( vec2 p ) { return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453); } // The world! float world_sdf(in vec3 p) { float world = 10.; vec3 grid = floor(p); vec2 rand = random2(grid.xy); // if(mod(grid.x + grid.y, 2.) == 0.) { // return 1.; // } p.z += u_time * rand.x; float time = u_time + 20.*random2(floor(p.xz)).x; p = mod(p, 1.0) - .5; p.y = p.y - abs(p.x) * (2. - abs(p.x)) / 3.; world = sdSphere(p, .3 + -abs(sin(time + cos(time))) * .1); // world = smin(world, world, 1.5); return world; } // Fuck yeah, normals! vec3 calculate_normal(in vec3 p) { const vec3 small_step = vec3(0.0001, 0.0, 0.0); float gradient_x = world_sdf(vec3(p.x + eps, p.y, p.z)) - world_sdf(vec3(p.x - eps, p.y, p.z)); float gradient_y = world_sdf(vec3(p.x, p.y + eps, p.z)) - world_sdf(vec3(p.x, p.y - eps, p.z)); float gradient_z = world_sdf(vec3(p.x, p.y, p.z + eps)) - world_sdf(vec3(p.x, p.y, p.z - eps)); vec3 normal = vec3(gradient_x, gradient_y, gradient_z); return normalize(normal); } // Raymarching. float rayMarching( vec3 origin, vec3 dir, float start, float end, inout float field ) { float sceneDist = 1e4; float rayDepth = start; for ( int i = 0; i < maxIterations; i++ ) { sceneDist = world_sdf( origin + dir * rayDepth ); // Distance from the point along the ray to the nearest surface point in the scene. if (( sceneDist < stopThreshold ) || (rayDepth >= end)) { break; } // We haven't hit anything, so increase the depth by a scaled factor of the minimum scene distance. rayDepth += sceneDist * stepScale; } if ( sceneDist >= stopThreshold ) rayDepth = end; else rayDepth += sceneDist; // We've used up our maximum iterations. Return the maximum distance. return rayDepth; } // Shadows // Reference at: http://www.iquilezles.org/www/articles/rmshadows/rmshadows.htm float softShadow(vec3 ro, vec3 lightPos, float start, float k){ vec3 rd = lightPos - ro; float end = length(rd); float shade = 1.0; float dist = start; float stepDist = start; for (int i=0; i<maxIterationsShad; i++){ float h = world_sdf(ro + rd*dist); shade = min(shade, k*h/dist); dist += min(h, stepDist*2.); // The best of both worlds... I think. if (h<0.001 || dist > end) break; } return min(max(shade, 0.) + 0.3, 1.0); } // Based on original by IQ - optimized to remove a divide float calculateAO(vec3 p, vec3 n) { const float AO_SAMPLES = 5.0; float r = 0.0; float w = 1.0; for (float i=1.0; i<=AO_SAMPLES; i++) { float d0 = i * 0.15; // 1.0/AO_SAMPLES r += w * (d0 - world_sdf(p + n * d0)); w *= 0.5; } return 1.0-clamp(r,0.0,1.0); } /** * Lighting * This stuff is way way better than the model I was using. * Courtesy Shane Warne * Reference: http://raymarching.com/ * ------------------------------------- * */ // Lighting. vec3 lighting( vec3 sp, vec3 camPos, int reflectionPass, float dist, float field, vec3 rd) { // .........完整代码请登录后点击上方下载按钮下载查看
网友评论0