webgl实现炫酷三维canvas反射玻璃体旋转动画效果代码-html代码-BFW代码库

webgl实现炫酷三维canvas反射玻璃体旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：webgl实现炫酷三维canvas反射玻璃体旋转动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* {
    box-sizing: border-box;
  }
  
  html, body {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    
    background:
    repeating-radial-gradient(
    circle at center,
      #444 0 10%,
      #111 10% 20%
    );
    
    touch-action: none;
  }
  
  canvas {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
</style>




</head>

<body >
  <canvas id="canvas"></canvas>


  
      <script >
/*********
 * made by Matthias Hurrle (@atzedent)
 */

/** @type {HTMLCanvasElement} */
const canvas = window.canvas;
const gl = canvas.getContext("webgl2");
const dpr = Math.max(1, window.devicePixelRatio);
/** @type {Map<string,PointerEvent>} */
const touches = new Map();

const vertexSource = `#version 300 es
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

in vec2 position;

void main(void) {
    gl_Position = vec4(position, 0., 1.);
}
`;
const fragmentSource = `#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif

out vec4 fragColor;

uniform vec2 resolution;
uniform vec2 touch;
uniform float time;
uniform int pointerCount;

#define mouse (touch/resolution)
#define T time
#define S smoothstep

mat3 rotX(float a) {
	float c = cos(a), s = sin(a);

	return mat3(
		vec3(1, 0, 0),
		vec3(0, c,-s),
		vec3(0, s, c)
	);
}

mat3 rotY(float a) {
	float c = cos(a), s = sin(a);

	return mat3(
		vec3(c, 0, s),
		vec3(0, 1, 0),
		vec3(-s,0, c)
	);
}

float smin(float a, float b, float k) {
	float h = clamp(
		.5+.5*(b-a)/k,
		.0,
		1.
	);

	return mix(b,a,h)-k*h*(1.-h);
}

float box(vec3 p, vec3 s, float r) {
	p = abs(p)-s;

	return length(max(vec3(0), p))+
		min(max(max(p.x, p.y),p.z),.0)-r;
}

float oct(vec3 p, float s) {
	p = abs(p);

	return (p.x+p.y+p.z-s)*(1./sqrt(3.));
}

float rnd(float a) {
	return fract(sin(a*711.599)*756.839);
}

float curve(float a, float b) {
	a /= b;

	return mix(
		rnd(floor(a)),
		rnd(floor(a)+1.),
		pow(S(.0,1.,fract(a)),10.)
	);
}

float tick(float t, float e) {
	return floor(t)+pow(S(.0,1.,fract(t)),e);
}

float map(vec3 p) {
	return smin(
		box(p, vec3(1), .125),
		oct(p, 1.8+.25*sin(curve(T, .5))),
		.125
	);
}

vec3 dir(vec2 uv, vec3 ro, vec3 target, float zoom) {
	vec3 up = vec3(0,1,0),
	f = normalize(target-ro),
	r = normalize(cross(up, f)),
	u = cross(f, r),
	c = f*zoom,
	i = c+uv.x*r+uv.y*u,
	d = normalize(i);

	return d;
}

vec3 norm(vec3 p) {
	vec2 e = vec2(1e-3, 0);
	float d = map(p);
	vec3 n = d - vec3(
		map(p-e.xyy),
		map(p-e.yxy),
		map(p-e.yyx)
	);

	return normalize(n);
}

void main(void) {
	vec2 uv = (
		gl_FragCoord.xy -.5 * resolution.xy
	) / min(resolution.x, resolution.y);

	vec3 col = vec3(0),
	ro = vec3(0,2.*sin(T*.5)*curve(T*.2, .2),-4);
	ro *= rotY(
		acos(0.)*sin(tick(T,4.))*
		(-1.+2.*curve(
			10.*sin(T)*curve(rnd(uv.y/uv.x)*5.*sin(T), 5.), 4.))
		);

	if(pointerCount > 0) {
		ro = vec3(0,0,-4);
		ro *= rotX(mouse.y*acos(-1.)+1.);
		ro *= rotY(mouse.x*acos(-1.)*2.);
	}

	vec3 rd = dir(uv, ro, vec3(0), 1.),
	p = ro;

	float i = .0, side = 1., at = .0;
	for(; i<50.;i++){
		float d = map(p)*side;

		if(d<1e-2) {
			vec3 n = norm(p)*side,
			l = normalize(ro-vec3(sin(T),cos(T),0)),
.........完整代码请登录后点击上方下载按钮下载查看