ogl实现一个webgl等高线动画效果代码
代码语言:html
所属分类:动画
代码描述:ogl实现一个webgl等高线动画效果代码
下面为部分代码预览,完整代码请点击下载或在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> <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 AA_SAMPLES = 4.0; const float AA_TOTAL_PASSES = AA_SAMPLES * AA_SAMPLES; uniform float time; uniform vec2 mouse_pos; uniform bool mouse_active; uniform vec2 resolution; vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } 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); } float sdf(in vec2 uv) { float a = 2.0 * sin(time); float b = -2.0; float c = 3.0 * cos(time); float d = 1.5; float e = 2.0 * sin(0.5 * time) - 2.0; float f = 2.0; return a * uv.x * uv.x * uv.x + b * uv.y * uv.y * uv.y + c * uv.x * uv.x + d * uv.y * uv.y + e * uv.x + f * uv.y; } vec3 pass(vec2 fragCoord) { vec2 uv = 2.0 * (fragCoord.xy / resolution.xy) - 1.0; uv.x *= resolution.x / resolution.y; uv *= 1.3; uv.y += 0.5; float d = sdf(uv); float dMod = mod(0.5 * d, 1.0); vec3 color; if (abs(d) < 12.0) { if (dMod < 0.05) { color = vec3(1.0, 1.0, 1.0); } else { vec3 hsv = vec3( 0.6, 0.7, dMod ); color = hsv2rgb(hsv); } } return color; } void main() { vec3 color = pass(gl_FragCoord.xy); for (float i = 0.0; i < AA_SAMPLES; i++) { for (float j =.........完整代码请登录后点击上方下载按钮下载查看
网友评论0