canvas实现图片粒子化风化鼠标跟随互动动画代码-html代码-BFW代码库

canvas实现图片粒子化风化鼠标跟随互动动画代码

代码语言：html

所属分类：粒子

代码描述：canvas实现图片粒子化风化鼠标跟随互动动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #000;
  touch-action: none;
}
</style>


  
</head>

<body translate="no">
  
  
    <script type="module">
import {
  Renderer,
  Program,
  Mesh,
  Uniform,
  PointCloud,
  GeometryAttribute,
  TransformFeedback,
  Texture,
  Vec2,
  Plane,
} from "https://cdn.skypack.dev/wtc-gl";

const PARTICLE_VERT = /* glsl */ `#version 300 es

in vec2 position;
layout(location=0) in vec4 a_posvel;    
layout(location=1) in vec4 a_lifeseed;  
layout(location=2) in vec3 a_color;     

out vec4 v_posvel;
out vec4 v_lifeseed;
out vec3 v_color;
out float v_alpha;

uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform vec2 u_mouse_velocity; // NEW: Receives the momentum of the mouse
uniform sampler2D u_image;
uniform float u_image_aspect;

vec2 coverUv(vec2 uv) {
  float canvasAspect = u_resolution.x / u_resolution.y;
  float scale = (u_image_aspect > canvasAspect)
    ? canvasAspect / u_image_aspect
    : u_image_aspect / canvasAspect;
  vec2 axis = (u_image_aspect > canvasAspect) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
  return (uv - 0.5) * (axis * scale + (1.0 - axis)) + 0.5;
}

#define MOD3 vec3(.1031,.11369,.13787)
vec3 hash33(vec3 p3) {
  p3 = fract(p3 * MOD3);
  .........完整代码请登录后点击上方下载按钮下载查看