wtc-gl+webgl+wtc-math实现彩色柔性绵柔云朵动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：wtc-gl+webgl+wtc-math实现彩色柔性绵柔云朵动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: #333;
  color: #fff;
  font-family: sans-serif;
}
body,
html {
  margin: 0;
  overflow: hidden;
  padding: 0;
}
canvas { width:100%; height: 100%; }
</style>



</head>

<body >
  <script type="text/fragment" id="fragShader">#version 300 es
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform sampler2D s_noise;

uniform sampler2D b_noise;

in vec2 v_uv;
in vec3 c;

out vec4 colour;

vec2 getScreenSpace() {
  vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);

  return uv;
}
void main() {
  vec2 uv = getScreenSpace();
  
  uv *= 1.;

  colour = vec4(c,1);
}
</script>
<script type="text/vertex" id="vertShader">#version 300 es
in vec3 position;
in vec2 uv;
out vec2 v_uv;
  
out vec3 c;
  
uniform float u_time;
uniform vec2 u_resolution;
uniform vec2 u_position;
uniform float u_zoom;
  
  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) );
}

  
  /* discontinuous pseudorandom uniformly distributed in [-0.5, +0.5]^3 */
vec3 random3(vec3 c) {
	float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
	vec3 r;
	r.z = fract(512.0*j);
	j *= .125;
	r.x = fract(512.0*j);
	j *= .125;
	r.y = fract(512.0*j);
	return r-0.5;
}

/* skew constants for 3d simplex functions */
const float F3 =  0.3333333;
const float G3 =  0.1666667;

/* 3d simplex noise */
float simplex3d(vec3 p) {
	 /* 1. find current tetrahedron T and it's four vertices */
	 /* s, s+i1, s+i2, s+1.0 - absolute skewed (integer) coordinates of T vertices */
	 /* x, x1, x2, x3 - unskewed coordinates of p relative to each of T vertices*/
	 
	 /* calculate s and x */
	 vec3 s = floor(p + dot(p, vec3(F3)));
	 vec3 x = p - s + dot(s, vec3(G3));
	 
	 /* calculate i1 and i2 */
	 vec3 e = step(vec3(0.0), x - x.yzx);
	 vec3 i1 = e*(1.0 - e.zxy);
	 vec3 i2 = 1.0 - e.zxy*(1.0 - e);
	 	
	 /* x1, x2, x3 */
	 vec3 x1 = x - i1 + G3;
	 vec3 x2 = x - i2 + 2.0*G3;
	 vec3 x3 = x - 1.0 + 3.0*G3;
	 
	 /* 2. find four surflets and store them in d */
	 vec4 w, d;
	 
	 /* calculate surflet weights */
	 w.x = dot(x, x);
	 w.y = dot(x1, x1);
	 w.z = dot(x2, x2);
	 w.w = dot(x3, x3);
	 
	 /* w fades from 0.6 at the center of the surflet to 0.0 at the margin */
	 w = max(0.6 - w, 0.0);
	 
	 /* calculate surflet components */
	 d.x = dot(random3(s), x);
	 d.y = dot(random3(s + i1), x1);
	 d.z = dot(random3(s + i2), x2);
	 d.w = dot(random3(s + 1.0), x3);
	 
	 /* multiply d by w^4 */
	 w *= w;
	 w *= w;
	 d *= w;
	 
	 /* 3. return the sum of the four surflets */
	 return dot(d, vec4(52.0));
}
  
  
vec2 getScreenSpace() {
  vec2 uv = (position.xy * u_resolution.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);

  return uv;
}
  
void main() {
  
  
vec2 tuv = getScreenSpace()*.8*u_zoom+u_position*2.;
  
// tuv = floor(tuv*5.)/5.;
  
float n = simplex3d(vec3(tuv, u_time*2.));
float nc = n;
n += simplex3d(vec3(tuv+4.7, u_time)*2.)*.5;
n *= .9;
// float n1 = simplex3d(vec3(tuv+10., u_time*2.));
  
vec3 pos = position * vec3(u_resolution.xy, 1.);
pos.z -= n*.5+.5;
  // pos /= vec3(u_resolution.xy, 1.);
pos.y += n/u_zoom*.5*min(u_resolution.y, u_resolution.x);
// pos.x += nc/u_zoom*.5*min(u_resolution.y, u_resolution.x);
  pos /= vec3(u_resolution.xy, 1.);
  
c = pal( nc*%%rn%%+(pos.y+u_position.y/u_zoom)*.15+u_time, vec3(.7),vec3(.3),vec3(1.0,.95,.9),vec3(0.0,0.33,0.67) );
  
  gl_Position = vec4(pos, 1.0);
v_uv = uv;
}
</script>
 
      <script type="module">
import { 
  Renderer,
  Program,
  Mesh,
  Triangle,
  Plane,
  Uniform,
} from '//repo.bfw.wiki/bfwrepo/js/module/wtc-gl.js';
import { Vec2, Vec3, Vec4, Mat2, Mat3, Mat4, Quat } from '//repo.bfw.wiki/bfwrepo/js/module/wtc-math.js';

const vertex = document.getElementById('vertShader').innerText.replace('%%rn%%', `${.1+Math.random()*.3}+${Math.random()*Math.PI}`);
const fragment = document.getElementById('fragShader').innerText;

console.clear()

class StripeHeader {
  uniforms
  dimensions
  autoResize = true
  onBeforeRender
  onAfterRender

  u_time
  u_resolution

  gl
  renderer
  program
  mesh

  lastTime = 0

  constructor({
    vertex,
    fragment,
    dimensions = new Vec2(window.innerWidth, window.innerHeight),
    container = document.body,
    autoResize = true,
    uniforms = {},
    onInit = (renderer) => {},
    onBeforeRender = (t) => {},
    onAfterRender = (t) => {},
    rendererProps = {}
  } = {}) {
    this.onBeforeRender = onBeforeRender.bind(this)
    this.onAfterRender = onAfterRender.bind(this)
    this.render = this.render.bind(this)
    this.resize = this.resize.bind(this)
    this.autoResize = autoResize

    this.dimensions = dimensions

    this.u_time = new Uniform({ name: 'time', value: 0, kind: 'float' })
    this.u_resolution = new Uniform({
      name: 'resolution',
      value: this.dimensions.array,
      kind: 'float_vec2'
    })

    this.uniforms = Object.assign({}, uniforms, {
      u_time: this.u_time,
      u_resolution: this.u_resolution
    })

    this.renderer = new Renderer(rendererProps)
    onInit(this.renderer)
    this.gl = this.renderer.gl
    container.appendChild(this.gl.canvas)
    this.gl.clearColor(1, 1, 1, 1)

    if (this.autoResize) {
      window.addEventListener('resize', this.resi.........完整代码请登录后点击上方下载按钮下载查看