shader-doodle实现冲击波动画效果-html代码-BFW代码库

shader-doodle实现冲击波动画效果

代码语言：html

所属分类：粒子

代码描述：shader-doodle实现冲击波动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #6f707c;
}
shader-doodle {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.text {
  position: absolute;
  font-family: "Bowlby One", cursive;
  top: 50%;
  left: 50%;
  color: #ffffba;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  white-space: nowrap;
}
</style>

</head>
<body translate="no">


<shader-doodle>
<sd-node name="iChannel0" prevbuffer>
<script type="x-shader/x-fragment">
      uniform sampler2D u_prevbuffer;
      
      #define PI 3.141592
      #define LOOKUP(COORD) texture2D(u_prevbuffer,(COORD)/u_resolution.xy)
      
      vec4 Field (vec2 position) {
          // Rule 1 : All My Energy transates with my ordered Energy
          vec2 velocityGuess = LOOKUP (position).xy;
          vec2 positionGuess = position - velocityGuess;
          return LOOKUP (positionGuess);
      }

      void mainImage( out vec4 Energy, in vec2 Me )
      {
          Energy  =  Field(Me);
          // Neighborhood :
          float scale = 1.5;
          vec4 pX  =  Field(Me + vec2(scale,0));
          vec4 pY  =  Field(Me + vec2(0,scale));
          vec4 nX  =  Field(Me - vec2(scale,0));
          vec4 nY  =  Field(Me - vec2(0,scale));

          // Rule 2 : Disordered Energy diffuses completely :
          Energy.b = (pX.b + pY.b + nX.b + nY.b)/4.;

          // Rule 3 : Order in the disordered Energy creates Order :
          vec2 Force;
          Force.x = nX.b - pX.b;
          Force.y = nY.b - pY.b;
          Energy.xy += (Force/8.);

          // Rule 4 : Disorder in the ordered En.........完整代码请登录后点击上方下载按钮下载查看