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