glea实现canvas凹凸不平的粘液动画效果代码-html代码-BFW代码库

glea实现canvas凹凸不平的粘液动画效果代码

代码语言：html

所属分类：动画

代码描述：glea实现canvas凹凸不平的粘液动画效果代码

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

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

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


  
  
  
  
<style>
body {
  margin: 0;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/glea.js"></script>
  
  
</head>

<body translate="no">
  <canvas></canvas>
  
      <script type="module">


const glsl = x => x;

const frag = glsl`
precision highp float;
#define ITERS 64
#define PI 3.141592654
uniform float width;
uniform float height;
uniform float time;

// normalize coords and correct for aspect ratio
vec2 normalizeScreenCoords()
{
  float aspectRatio = width / height;
  vec2 result = 2.0 * (gl_FragCoord.xy / vec2(width, height) - 0.5);
  result.x *= aspectRatio; 
  return result;
}

// by IQ
// cosine based palette, 4 vec3 params
vec3 pal( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d )
{
  return a + b*cos( 6.28318*(c*t+d) );
}

// by IQ
// 0.5, 0.5, 0.5		0.5, 0.5, 0.5	1.0, 1.0, 1.0	0.30, 0.20, 0.20
vec3 palette(float t) {
  float i1 = sin(t * .5);
  float i2 = sin(t * .3);
  vec3 a = vec3(0.5, 0.5, .5);
  vec3 b = vec3(0.5, .5, .5);
  vec3 c = vec3(1., 1.0, 1.0);
  vec3 d = vec3(0.30, 0.20, 0.20);
  return pal(t, a, b, c, d);
}


float rand(vec2 c){
	return fract(sin(dot(c.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

float noise(vec2 p, float freq ){
	float unit = width/freq;
	vec2 ij = floor(p/unit);
	vec2 xy = mod(p,unit)/unit;
	//xy = 3.*xy*xy-2.*xy*xy*xy;
	xy = .5*(1.-cos(PI*xy));
	float a = rand((ij+vec2(0.,0.)));
	float b = rand((ij+vec2(1.,0.)));
	float c = rand((ij+vec2(0.,1.)));
	float d = rand((ij+vec2(1.,1.)));
	float x1 = mix(a, b, xy.x);
	float x2 = mix(c, d, xy.x);
	return mix(x1, x2, xy.y);
}

float pNoise(vec2 p, int res){
	float persistance = .5;
	float n = 0.;
	float normK = 0.;
	float f = 4.;
	float amp = 1.;
	int iCount = 0;
	for (int i = 0; i<50; i++){
		n+=amp*noise(p, f);
		f*=2.;
		normK+=amp;
		amp*=persistance;
		if (iCount == res) break;
		iCount++;
	}
	float nf = n/normK;
	return nf*nf*nf*nf;
}

// Calculate cameras "orthonormal basis", i.e. its transform matrix components
vec3 getCameraRayDir(vec2 uv, vec3 camPos, vec3 camTarget) {
  vec3 camForward = normalize(camTarget - camPos);
  vec3 camRight = normalize(cross(vec3(0.0, 1.0, 0.0), camForward));
  vec3 camUp = normalize(cross(camForward, camRight));
     
  float fPersp = 2.0;
  vec3 vDir = normalize(uv.x * camRight + uv.y * camUp + camForward * fPersp);
 
  return vDir;
}

// distance function for a sphere
float sphere(vec3 p, float r)
{
    return length(p) - r;
}

float deformation(vec3 pos) {
  return sin(time * .1) * .........完整代码请登录后点击上方下载按钮下载查看