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="50" value="25" step="0.1">
  <label for="intensity">Intensity</label>
  <input type="range" id="intensity" name="intensity" min="0" max="10" value="5" step="0.1">
  <label for="noise">Noise</label>
  <input type="range" id="noise" name="noise" min="0" max="50" value="20" step="0.1">
</div>

<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 position;

  void main() {
    gl_Position = vec4( position );
  }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  #ifdef GL_FRAGMENT_PRECISION_HIGH
  precision highp float;
  #else
  precision mediump float;
  #endif

  uniform vec2 u_resolution;
  uniform float u_time;
  uniform vec2 u_mouse;
  uniform float u_thickness;
  uniform float u_intensity;
  uniform float u_noise;
    //3D Gradient Noise by Inigo Quilez - iq/2013
  //https://www.shadertoy.com/view/Xsl3Dl
  vec3 hash( vec3 p ) // replace this by something better
  {
    p = vec3( dot(p,vec3(127.1,311.7, 74.7)),
          dot(p,vec3(269.5,183.3,246.1)),
          dot(p,vec3(113.5,271.9,124.6)));

    return -1.0 + 2.0*fract(sin(p)*43758.5453123);
  }

  float noise( in vec3 p )
  {
    vec3 i = floor( p );
    vec3 f = fract( p );
	
	  vec3 u = f*f*(3.0-2.0*f);

    return mix( mix( mix( dot( hash( i + vec3(0.0,0.0,0.0) ), f - vec3(0.0,0.0,0.0) ), 
                          dot( hash( i + vec3(1.0,0.0,0.0) ), f - vec3(1.0,0.0,0.0) ), u.x),
                     mix( dot( hash( i + vec3(0.0,1.0,0.0) ), f - vec3(0.0,1.0,0.0) ), 
                          dot( hash( i + vec3(1.0,1.0,0.0) ), f - vec3(1.0,1.0,0.0) ), u.x), u.y),
                mix( mix( dot( hash( i + vec3(0.0,0.0,1.0) ), f - vec3(0.0,0.0,1.0) ), 
                          dot( hash( i + vec3(1..........完整代码请登录后点击上方下载按钮下载查看