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 float time;
uniform int pointerCount;
uniform vec2 touch;

#define T time
#define S smoothstep
#define mouse (touch/resolution)
#define rot(a) mat2(cos(a),-sin(a),sin(a),cos(a))

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

float rnd(vec2 p) {
	return fract(
		sin(
			dot(
				p,
        vec2(12.9898, 78.233)
      )
    )*43758.5453123
  );
}

float noise(vec2 p) {
	vec2 f=fract(p), i=floor(p);
	float
	a=rnd(i),
	b=rnd(i+vec2(1,0)),
	c=rnd(i+vec2(0,1)),
	d=rnd(i+vec2(1,1));

	vec2 u = f*f*(3.-2.*f);

	return mix(a,b,u.x)+
		(c-a)*u.y*(1.-u.x)+
		(d-b)*u.y*u.x;
}

vec3 pattern(vec2 uv) {
	float t = T*.1;
	vec3 col = vec3(0);
	vec2 p = vec2(0);
	p.x = noise(uv+vec2(0,1));
	p.y = noise(uv+vec2(1,0));

	p = 8.*(
		vec2(
			sin(t),
			-cos(t)
		)*.15-p
	);

	float s = .35;
	
	for(float i=.0;i<6.;i++) {
		p.x += s*sin(2.*t-i*1.5*p.y)+t;
		p.y += s*cos(2.*t+i*1.5*p.x)-t;
	}

	col+= sin(t+p.x+p.y);
	col = pow(S(vec3(0),vec3(1),col), vec3(.4));
	col = mix(vec3(.7,.6,.4)*col, col, col);
	
	return col;
}

float box(vec3 p, vec3 s, float r) {
	p = abs(p) -s;
	
	return length(max(p, .0))+
		min(.0, max(max(p.x, p.y), p.z))-r;
}

float map(vec3 p) {
	float d = 5e5,
	bx = box(p, vec3(9,1.5,.0625), .125);
	
	d = min(d, bx);
	
	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 cam(inout vec3 p) {
	if (pointerCount > 0) {
		p.yz*=rot(-mouse.y*acos(-1.)-acos(.0));
		p.xz*=rot(mouse.x*acos(-1.)*2.);
	} else {
		p.xz*=rot(.5*sin(T*.25));
	}
}

void main() {
	vec2 uv = (
		gl_FragCoord.xy-.5*resolution
	) / min(resolution.x, resolution.y);
    float zoom = pointerCount > 0 ? .0 : exp(-cos(T*.5))*.5;
	vec3 col = vec3(0),
	ro = vec3(0,0,zoom-4.),
	rd = normalize(vec3(uv, .7+zoom*.25));
	
	cam(ro);
	cam(rd);
	
	vec3 p = ro,
	lp = -vec3(1,2,3);
	
	const float steps = 200., maxd = 40.;
	float dd = .0, at = .0, e = 1., side = 1.;
	
	for (float i = .0; i<steps; i++) {
		float d = map(p)*side;
		
		if (d < 1e-3) {
			vec3 n = norm(p)*side,
			l = normalize(ab.........完整代码请登录后点击上方下载按钮下载查看