webgl实现canvas跟随鼠标移动烟雾流体动画效果代码-html代码-BFW代码库

webgl实现canvas跟随鼠标移动烟雾流体动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl实现canvas跟随鼠标移动烟雾流体动画效果代码，逼真的多彩烟雾流动交互效果。

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

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

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


  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
html,
body {
  overflow: hidden;
}

body {
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

#container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.a-title {
  position: absolute;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: conic-gradient(#ed0101, blue);
  pointer-events: none;
  mix-blend-mode: difference;
  filter: drop-shadow(2px 4px 6px black);
}
.a-second-title {
  position: absolute;
  margin-top: 25vh;
  pointer-events: none;
  -webkit-text-stroke: 1.3px white;
  letter-spacing: 1.125px;
  font-size: -webkit-xxx-large;
  font-weight: 900;
  mix-blend-mode: color-dodge;
}

canvas {
  width: 100%;
  height: 100%;
}
</style>


  
  
</head>

<body >
  <section id='container'>
  <h1 class='a-title'>Move the mouse</h1>
  <h2 class='a-second-title'>See the magic</h2>
  <canvas></canvas>
</section>

  
      <script>
'use strict';

const canvas = document.getElementsByTagName('canvas')[0];
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

let config = {
  TEXTURE_DOWNSAMPLE: 1,
  DENSITY_DISSIPATION: 0.98,
  VELOCITY_DISSIPATION: 0.99,
  PRESSURE_DISSIPATION: 0.8,
  PRESSURE_ITERATIONS: 25,
  CURL: 28,
  SPLAT_RADIUS: 0.004 };


let pointers = [];
let splatStack = [];

const { gl, ext } = getWebGLContext(canvas);

function getWebGLContext(canvas) {
  const params = { alpha: false, depth: false, stencil: false, antialias: false };

  let gl = canvas.getContext('webgl2', params);
  const isWebGL2 = !!gl;
  if (!isWebGL2)
  gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);

  let halfFloat;
  let supportLinearFiltering;
  if (isWebGL2) {
    gl.getExtension('EXT_color_buffer_float');
    supportLinearFiltering = gl.getExtension('OES_texture_float_linear');
  } else {
    halfFloat = gl.getExtension('OES_texture_half_float');
    supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear');
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
  let formatRGBA;
  let formatRG;
  let formatR;

  if (isWebGL2)
  {
    formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType);
    formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType);
    formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType);
  } else

  {
    formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
    formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
    formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
  }

  return {
    gl,
    ext: {
      formatRGBA,
      formatRG,
      formatR,
      halfFloatTexType,
      supportLinearFiltering } };


}

function getSupportedFormat(gl, internalFormat, format, type)
{
  if (!supportRenderTextureFormat(gl, internalFormat, format, type))
  {
    switch (internalFormat) {

      case gl.R16F:
        return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
      case gl.RG16F:
        return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
      default:
        return null;}

  }

  return {
    internalFormat,
    format };

}

function supportRenderTextureFo.........完整代码请登录后点击上方下载按钮下载查看