canvas实现webgl跟随鼠标可调节参数的小鬼交互效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现webgl跟随鼠标可调节参数的小鬼交互效果代码
代码标签: canvas webgl 跟随 鼠标 调节 参数 小鬼 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { margin: 0; padding: 0; overflow: hidden; background-color: #2C3E50; } canvas#ghost { position: fixed; top: 0; left: 0; display: block; width: 100%; z-index: 10000; pointer-events: none; } .page { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: white; text-align: center; font-size: 4vw; text-shadow: 0 0 5px #000000; } .lil-gui { --width: 300px; max-width: 90%; --widget-height: 20px; font-size: 15px; --input-font-size: 15px; --padding: 10px; --spacing: 10px; --slider-knob-width: 5px; --background-color: rgba(5, 0, 15, .8); --widget-color: rgba(255, 255, 255, .3); --focus-color: rgba(255, 255, 255, .4); --hover-color: rgba(255, 255, 255, .5); --font-family: monospace; z-index: 1; } </style> </head> <body > <div class="page"> WebGL Ghost Cursor </div> <canvas id="ghost"></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 float u_size; uniform vec2 u_pointer; uniform float u_smile; uniform vec2 u_target_pointer; uniform vec3 u_main_color; uniform vec3 u_border_color; uniform float u_flat_color; uniform sampler2D u_texture; #define TWO_PI 6.28318530718 #define PI 3.14159265358979323846 vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = flo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0