twgl实现webgl液态可调整边框动画效果代码-html代码-BFW代码库

twgl实现webgl液态可调整边框动画效果代码

代码语言：html

所属分类：背景

代码描述：利用twgl实现webgl下液态波动的可调整边框动画效果代码，可调节粘稠度、噪点、宽度。

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
 margin: 0;
}

div {
  margin: 80px;
}

p {
  font-size: 22px;
}

label {
  font-size: 22px;
  font-weight: bold;
  display: block;
}

input {
  display: block;
  margin-bottom: 10px;
  width: 100%;
  max-width: 300px;
}

canvas {
 position: fixed;
 pointer-events: none;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
}
</style>



</head>

<body>
  <!-- Quick start template: https://codepen.io/pen/?template=ZEyrWNe -->

<canvas id="canvas"></canvas>
<div>
  <h1>Gloopy Border</h1>
  <p>A GLSL shader made with Inigo Quilez's 3D Perlin noise function.</p>
  <label for="thickness">Thickness</label>
  <input type="range" id="thickness" name="thickness" min="0" max=&quo.........完整代码请登录后点击上方下载按钮下载查看