ogl实现印字机晶体动画效果代码
代码语言:html
所属分类:动画
代码描述:ogl实现印字机晶体动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .gui { box-sizing: border-box; } .gui input, .gui textarea, .gui select, .gui button, .gui label { display: block; width: 100%; margin: 0px; border: none; border-radius: 0px; } .root.gui { position: absolute; display: flex; flex-direction: column; top: 0px; left: 0px; width: 250px; max-height: 100vh; padding: 0px; background: rgba(20, 20, 20, 0.5); transition: top 300ms ease-in-out; } .options-container.gui { flex: 1 1 auto; overflow: auto; padding: 15px; padding-bottom: 0px; } .expand-button.gui { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0px; height: 35px; margin-top: 10px; background: none !important; font-family: monospace; color: #fff; font-size: 15px; } .expand-button.gui:hover { text-decoration: underline; } .expand-button.gui::before { content: ""; display: block; position: absolute; bottom: 35px; left: 30px; right: 30px; height: 1px; background: #ddd; } .input-container.gui { margin-bottom: 15px; } input.gui { padding: 5px; font-family: monospace; } textarea.gui { resize: vertical; min-width: 100%; font-family: monospace; white-space: pre; } .checkbox-container.gui { display: flex; align-items: center; margin-bottom: 8px; } .checkbox-container.gui input[type=checkbox].gui { width: 16px; height: 16px; flex: 0 0 auto; } .checkbox-container.gui label.gui { flex: 1 1 auto; margin-bottom: 0px; margin-left: 7px; } .slider-value.gui { margin-left: 4px; font-size: 15px; } select.gui { padding: 5px; } button.gui { color: #000; background: #d4a20b; border-radius: 1px; padding: 8px; margin-bottom: 12px; cursor: pointer; } button.gui:hover { background: #b58902; } label.gui { margin-bottom: 5px; font-weight: bold; } .text.gui { font-family: monospace; color: #fff; font-size: 15px; line-height: 1.1; } .text-block.gui { margin-bottom: 5px; } hr.gui { color: #ddd; } .spacer.gui { width: 100%; background: none; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; background: #000; } #scene { width: 100%; height: 100%; overflow: hidden; } </style> </head> <body> <div id="scene"></div> <!------ Shaders ------> <script id="vertex-shader" type="x-shader/x-vertex"> precision highp float; attribute vec3 position; void main() { gl_Position = vec4(position, 1.0); } </script> <script id="fragment-shader" type="x-shader/x-fragment"> precision highp float; const float PI = 3.1415926535; const float AA_SAMPLES = 1.0; const float AA_TOTAL_PASSES = AA_SAMPLES * AA_SAMPLES; const int MAX_MARCH_STEPS = 100; const float MAX_RAY_DISTANCE = 100.0; const float INTERSECT_MIN_DIST = 0.01; uniform float time; uniform vec2 mouse_pos; uniform bool mouse_active; uniform vec2 resolution; struct Ray { vec3 origin; vec3 direction; vec3 position; vec3 normal; int materialIndex; float distance; float minDistance; int steps; bool escaped; }; Ray createRay(vec3 origin, vec3 direction) { Ray ray; ray.origin = origin; ray.direction = direction; ray.position = origin; ray.normal = vec3(0.0, 0.0, 0.0); ray.materialIndex = -1; ray.distance = 0.0; ray.minDistance = -1.0; ray.steps = 0; ray.escaped = false; return ray; } struct SDFResult { float d; int materialIndex; }; vec2 rand2(vec2 p) { vec2 a = vec2( dot(p, vec2(12.9898, 78.233)), dot(p, vec2(127.1, 311.7)) ); return fract(sin(mod(a, 3.1415926535)) * 43758.5453); } // https://github.com/HackerPoet/PySpace/blob/master/pyspace/frag.glsl void rotateX(inout vec3 p, float s, float c) { p.yz = vec2(c*p.y + s*p.z, c*p.z - s*p.y); } void rotateY(inout vec3 p, float s, float c) { p.xz = vec2(c*p.x - s*p.z, c*p.z + s*p.x); } void rotateZ(inout vec3 p, float s, float c) { p.xy = vec2(c*p.x + s*p.y, c*p.y - s*p.x); } void rotateX(inout vec3 p, float a) { rotateX(p, sin(-a), cos(-a)); } void rotateY(inout vec3 p, float a) { rotateY(p, sin(-a), cos(-a)); } void rotateZ(inout vec3 p, float a) { rotateZ(p, sin(-a), cos(-a)); } void translate(inout vec3 p, vec3 t) { p.xyz -= t; } float degToRad(float deg) { const float convFactor = PI / 180.0; return convFactor * deg; } // https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm float sdHexPrism(vec3 p, vec2 h) { const vec3 k = vec3(-0.8660254, 0.5, 0.57735); p = abs(p); p.xy -= 2.0*min(dot(k.xy, p.xy), 0.0)*k.xy; vec2 d = vec2( length(p.xy-vec2(clamp(p.x,-k.z*h.x,k.z*h.x), h.x))*sign(p.y-h.x), p.z-h.y ); return min(max(d.x,d.y),0.0) + length(max(d,0.0)); } float sdPlane(vec3 p, vec3 n, float h) { return dot(p,n) + h; } float sdBox(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); } // ====== SDF ====== // const float REPEAT_DIST = 8.0; float columns(in vec3 p) { p.x = abs(p.x); p.x = p.x + 0.5 * sin(p.y); translate(p, vec3(3.7, 0.0, -2.0)); rotateX(p, degToRad(90.0)); p.y = mod(p.y + 0.5 * REPEAT_DIST, REPEAT_DIST) - 0.5 * REPEAT_DIST; p.x = mod(p.x + 0.5 * REPEAT_DIST, REPEAT_DIST) - 0.5 * REPEAT_DIST; rotateY(p, degToRad(22.0)); rotateZ(p, time); return sdHexPrism(p, vec2(0.8, 12.0)); } float ground(in vec3 p) { p.z = mod(p.z + 0.5 * REPEAT_DIST, REPEAT_DIST) - 0.5 * REPEAT_DIST; translate(p, vec3(0.0, -6.0, 0.0)); return sdBox(p, vec3(99.0, 0.0, 5.0)); } const int GROUND = 1; const int COLUMN = 2; SDFResult sdf(vec3 p) { SDFResult result; float g = ground(p); float c = columns(p); result.d = min(g, c); if (result.d == g) { result.materialIndex = GROUND; } else if (result.d == c) { result.materialIndex = COLUMN; } return result; } // https://www.iquilezles.org/www/articles/normalsSDF/normalsSDF.htm vec3 sdfNormal(vec3 p) { const vec2 k = vec2(1.0, -1.0); const float EPSILON = 0.00001; return normalize( k.xyy * sdf(p + k.xyy * EPSILON).d + k.yyx * sdf(p + k.yyx * EPSILON).d + k.yxy * sdf(p + k.yxy * EPSILON).d + k.xxx * sdf(p + k.xxx * EPSILON).d ); } // ====== MARCH ====== // void march(inout Ray ray) { for (int i = 0; i < MAX_MARCH_STEPS; i++) { ray.steps = i; SDFResult result = sdf(ray.position); float d = result.d; ray.position = ray.position + d * ray.direction; ray.distance += d; if (d < ray.minDistance || ray.minDistance == -1.0) { ray.minDistance = d; } if (ray.distance > MAX_RAY_DISTANCE) { ray.escaped = true; return; } if (d < INTERSECT_MIN_DIST) { ray.normal = sdfNormal(ray.position); ray.materialIndex = result.materialIndex; return; } } ray.escaped = true; } // ====== SHADE ====== // vec3 shade(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0