webgl实现三维立方体玻璃材质折射反射旋转动画效果代码-html代码-BFW代码库

webgl实现三维立方体玻璃材质折射反射旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：webgl实现三维立方体玻璃材质折射反射旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在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 id="rendered-js" >
/*********
 * made by Matthias Hurrle (@atzedent)
 */

/** @type {HTMLCanvasElement} */
const canvas = window.canvas;
const gl = canvas.getContext("webgl2");
const dpr = Math.max(1, 0.5 * 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

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

out vec4 fragColor;

#define T (2.*time)
#define S smoothstep
#define mouse (touch/resolution)
#define rot(a) mat2(cos(a),-sin(a),sin(a),cos(a))
#define ftick tick(sin(3.+1.0*T*.25), 2.)

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

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(p, .0)) +
        min(.0, max(max(p.x, p.y), p.z)) - r;
}

float mspo(vec3 p, vec3 s, float r, float l) {
    const float k = .25;

    float d = box(p, s, r), res = d, f = 1., i = .0;

    for(; i < l; i++) {
        vec3
        a = mod(p * f, 2.) - 1.,
        r = abs(1. - 3. * abs(a));

        f *= 3.;

        float
        da = max(r.x, r.y),
        db = max(r.y, r.z),
        dc = max(r.z, r.x),
        fk = k * .25,
        c = (smin(da, smin(db, dc, fk), fk) - 1.) / f;

        if(c > d) {
            d = c,
            res = c;
        }
    }

    return res;
}

float mat = .0;
float map(vec3 p) {
    float pat = .01 * sin(p.y * 10.);
    vec3 q = p;
    q.xy += pat;
    q.yz += pat;

    float d = 1e5,
    sp = mspo(p, vec3(1), .025, 3.),
    bx = box(q, vec3(1.2), .05);

    d = min(d, max(bx, -sp));

    if(d == bx) mat = 1.;
    else mat = .0;

    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.yz *= rot(ftick);
        p.xz *= rot(tick(T * .25, .25) * acos(.0));
    }
}

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

    float zoom = pointerCount > 0 ? .0 : -exp(ftick) * .4;

    vec3 col = vec3(0),
    ro = vec3(0, 0, zoom - 4.),
    rd = normalize(vec3(uv, 1));

    cam(ro);
    cam(rd);

    vec3 p = ro,
    lp = ro - vec3(0, -2, 0),
    l = normalize(lp);

    const float steps = 180., maxd = 20.;
    float dd = .0, at = .0,
    side = 1., e = 1.;

    for(float i = .0; i < steps; i++) {
        float d = map(p) * side;

        if(d < 1e-3) {
            vec3 n = norm(p) * side;
            float fog = 1. - clamp(dd / maxd, .0, 1.),
            diff = max(.0, dot(normalize(lp - p), n)),
 .........完整代码请登录后点击上方下载按钮下载查看