canvas+webgl实现可修改参数涡旋虫洞穿越动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas+webgl实现可修改参数涡旋虫洞穿越动画效果代码
代码标签: canvas webgl 修改 参数 涡旋 虫洞 穿越 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
height: 100vh;
margin: 0;
}
body, html, #glcanvas {
overflow: hidden
}
canvas {
display: block;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body translate="no">
<canvas id="glcanvas"></canvas>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform bool u_pattern;
uniform float u_swirl;
uniform float u_detail;
uniform float u_rotationSpeed;
uniform bool u_warp;
uniform float u_warpIntensity;
uniform float u_reflection;
uniform float u_movementSpeed;
uniform float u_color;
uniform bool u_highContrast;
uniform float u_discard;
vec3 palette(float t, float factor) {
vec3 a = vec3(0.5) + 0.3 * sin(vec3(0.1, 0.3, 0.5) * factor);
vec3 b = vec3(0.5) + 0.3 * cos(vec3(0.2, 0.4, 0.6) * factor);
vec3 c = vec3(1.0) + 0.5 * sin(vec3(0.3, 0.7, 0.9) * factor);
vec3 d = vec3(0.25, 0.4, 0.55) + 0.2 * cos(vec3(0.5, 0.6, 0.7) * factor);
return a + b * cos(6.28318 * (c * t + d));
}
vec3 paletteContrasted(float t, float factor) {
vec3 a = vec3(0.5) + 0.3 * sin(vec3(0.1, 0.3, 0.5) * factor);
vec3 b = vec3(0.5) + 0.3 * cos(vec3(0.2, 0.4, 0.6) * factor);
vec3 c = vec3(1.0) + 0.5 * sin(vec3(0.3, 0.7, 0.9) * factor);
vec3 d = vec3(0.25, 0.4, 0.55) + 0.2 * cos(vec3(0.5, 0.6, 0.7) * factor);
return a + b * tan(6.28318 * (c * t + d));
}
float hash(vec3 p) {
p = 50.0 * fract(p * 0.3183099 + vec3(0.71, 0.113, 0.5));
return -1.0 + 2.0 * fract(p.x * p.y * p.z * (p.x + p.y + p.z));
}
float noiseF(vec3 p) {
vec3 i = floor(p);
vec3 f = fract(p);
float a = hash(i);
float b = hash(i + vec3(1.0, 0.0, 0.0));
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0