webgl+canvas实现鼠标交互光晕动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl+canvas实现鼠标交互光晕动画效果代码
代码标签: webgl canvas 鼠标 交互 光晕 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neural Noise</title>
<style>
body, html {
margin: 0;
padding: 0;
background-color: #151912;
overflow-x: hidden;
}
canvas#neuro {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: .95;
}
</style>
</head>
<body>
<canvas id="neuro"></canvas>
<script type="x-shader/x-fragment" id="vertShader">
precision mediump float;
varying vec2 vUv;
attribute vec2 a_position;
void main() {
vUv = .5 * (a_position + 1.);
gl_Position = vec4(a_position, 0.0, 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragShader">
precision mediump float;
varying vec2 vUv;
uniform float u_time;
uniform float u_ratio;
uniform vec2 u_pointer_position;
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0