<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>超炫WebGL背景滚动效果 - 厚朴网络</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script>document.documentElement.className = 'js';</script>
</head>
<body class="demo-8 loading">
<canvas id="webgl"></canvas>
<svg class="hidden">
<symbol id="icon-arrow" viewBox="0 0 24 24">
<title>arrow</title>
<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " />
</symbol>
<symbol id="icon-drop" viewBox="0 0 24 24">
<title>drop</title>
<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z" />
<path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z" />
</symbol>
</svg>
<main>
<header class="content content--header">
<div class="content__top">
<h1 class="main-title">Scroll Spirals</h1>
<p class="main-tagline">Decorative Background Effects with WebGL</p>
<nav class="demos">
<a class="demo" href="index.html">Demo 1</a>
<a class="demo" href="index2.html">Demo 2</a>
<a class="demo" href="index3.html">Demo 3</a>
<a class="demo" href="index4.html">Demo 4</a>
<a class="demo" href="index5.html">Demo 5</a>
<a class="demo" href="index6.html">Demo 6</a>
<a class="demo" href="index7.html">Demo 7</a>
<a class="demo demo--current" href="index8.html">Demo 8</a>
<a class="demo" href="index9.html">Demo 9</a>
</nav>
</div>
</header>
<section class="content"></section>
<section class="content"></section>
<section class="content"></section>
<section class="content"></section>
</main>
<script src="js/regl.min.js"></script>
<script type="x-shader/x-fragment" id="fragmentShader">
#define TWO_PI 6.2831853072
#define PI 3.14159265359
precision highp float;
uniform float globaltime;
uniform vec2 resolution;
uniform float aspect;
uniform float scroll;
uniform float velocity;
uniform sampler2D gradient;
const float timescale = 0.05;
float nsin(float value) {
return sin(value * TWO_PI) * 0.5 + 0.5;
}
vec2 rotate(vec2 v, float angle) {
float c = cos(angle);
float s = sin(angle);
return v * mat2(c, -s, s, c);
}
vec3 coordToHex(vec2 coord, float scale, float angle) {
vec2 c = rotate(coord, angle);
float q = (1.0 / 3.0 * sqrt(3.0) * c.x - 1.0 / 3.0 * c.y) * scale;
float r = 2.0 / 3.0 * c.y * scale;
return vec3(q, r, -q - r);
}
vec3 hexToCell(vec3 hex, float m) {
return fract(hex / m) * 2.0 - 1.0;
}
float absMax(vec3 v) {
return max(max(abs(v.x), abs(v.y)), abs(v.z));
}
float hexToFloat(vec3 hex, float amt) {
return mix(absMax(hex), 1.0 - length(hex) / sqrt(3.0), amt);
}
int getHexDir(vec3 hex) {
if (mod(floor(hex.x) - floor(hex.y) - floor(hex.z), 2.0) == 0.0) {
return 0;
} else {
return 1;
}
}
int getHexType(vec3 hex) {
if (mod(floor(hex.x) - floor(hex.y) - floor(hex.z), 3.0) == 0.0) {
return 0;
} else if (mod(floor(hex.x) - floor(hex.y) - floor(hex.z) - 1.0, 3.0) == 0.0) {
return 1;
} else {
return 2;
}
}
vec3 divideHex(vec3 hex, inout int age, float time) {
vec3 cell;
int dir = 0, type = 0;
float scale = 0.0;
for (int i = 0; i < 4; i++) {
scale = 1.0 + float(type) * nsin(time);
cell = hexToCell(hex * scale, 1.0);
dir = getHexDir(hex);
type = getHexType(hex);
hex = cell;
if (dir == 1 && type == 1) {
age = i;
break;
}
}
return cell;
}
void main(void) {
float time = globaltime * timescale;
vec2 center = vec2(sin(TWO_PI * time * 0.5), cos(TWO_PI * time * 0.5)) * nsin(time * 0.3) * 0.3;
vec2 tx = (gl_FragCoord.xy / resolution.xy - 0.5 + center) * vec2(aspect, 1.0) * 2.0;
float len = 1.0 - length(tx - center * 2.0) * 0.3;
float zoom = 15.0 + scroll * 20.0;
float angle = PI * scroll * len;
float value = 0.0;
int age = 0;
vec3 hex = coordToHex(tx, zoom, angle);
vec3 cell = divideHex(hex, age, time * 0.1);
float shift = float(age) / 3.0;
value = nsin(
hexToFloat(cell, nsin(time + shift)) * 0.1 * nsin(time * 0.5 + shift)
+ shift
+ time
) * len;
gl_FragColor = texture2D(gradient, vec2(0.0, value));
}
</script>
<script src="js/demo8.js"></script>
</body>
</html>
超炫WebGL背景滚动效果.zip
版权申诉
163 浏览量
2022-11-25
10:22:12
上传
评论
收藏 520KB ZIP 举报
超炫WebGL背景滚动效果.zip （33个子文件） 
超炫WebGL背景滚动效果 jiaoben5066 css 
demo.css 6KB normalize.css 2KB
index5.html 3KB index4.html 3KB img related 
AnimatedHeaderBackgrounds.png 11KB
PrismEffectSlider.jpg 16KB img1.jpg 77KB
mouse.svg 447B img2.jpg 54KB gradient_map3.png 2KB img4.jpg 136KB gradient_map1.png 1KB gradient_map2.png 475B img3.jpg 86KB index9.html 4KB index.html 4KB js demo9.js 2KB demo4.js 2KB demo2.js 2KB demo6.js 2KB demo1.js 2KB demo7.js 2KB demo3.js 2KB demo8.js 2KB regl.min.js 73KB demo5.js 2KB index2.html 3KB index6.html 5KB index7.html 5KB index8.html 5KB index3.html 3KB psd gradient_map.psd 52KB 超炫WebGL背景滚动效果.jpg 88KB资源评论
