webgl+canvas实现穿越建筑物体内部动画效果代码-html代码-BFW代码库

webgl+canvas实现穿越建筑物体内部动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl+canvas实现穿越建筑物体内部动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
body,
html {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
	user-select: none;
}
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	user-select: none;
	touch-action: none;
	content-zooming: none;
	background: #000;
}
</style>


</head>

<body>

    <canvas></canvas>

    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec2 aPosition;
        uniform vec2 uResolution;
        void main() {
        gl_Position = vec4(((aPosition / uResolution * 2.0) - 1.0) * vec2(1, -1), 0, 1);
        }
    </script>



    <script id="fragmentShader" type="x-shader/x-fragment">
        precision highp float;
        uniform vec2 uResolution;
        uniform vec3 ue;
        uniform vec2 ucs;
        void main() {
        const float Z = 3.0;
        const float IZ = 1.0 / Z;
        vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / min(uResolution.y, uResolution.x);
        float cn = ucs.x;
        float sn = ucs.y;
        float rx = uv.x;
        float ry = uv.y;
        float rz = 0.4;
        float d = 1.0;
        float ex = ue.x;
        float ey = ue.y;
        float ez = ue.z;
        float tx = ex;
        float ty = ey;
        float tz = ez;
        float gx = cn * rx + sn * rz;
        float gy = ry;
        float gz = cn * rz - sn * rx;
        rx = gx;
        ry = gz;
        rz = gy;
        gx = cn * rx + sn * rz;
        gy = ry;
        gz = cn * rz - sn * rx;
        rx = gx;
        ry = gz;
        rz = gy;
        float irx = 1.0 / rx;
        float iry = 1.0 / ry;
        float irz = 1.0 / rz;
        for (int i = 0; i < 20; i++) {
        if (d < 0.0125) break;
        d *= IZ;
        tx = fract(tx) * Z;
        ty = fract(ty) * Z;
        tz = fract(tz) * Z;
        float ix = floor(tx);
        float iy = floor(ty);
        float iz = floor(tz);
        float j = mod(ix * ix + iy * iy + iz * iz, 4.0);
        if (j >= 2.0) {
        float fx = (rx > 0.0) ? 1.0 : 0.0;
        float fy = (ry > 0.0) ? 1.0 : 0.0;
        float fz = (rz > 0.0) ? 1.0 : 0.0;
        tx = (fx - fract(tx)) * irx;
        ty = (fy - fract(ty)) * iry;
        tz = (fz - fract(tz)) * irz;
        float n = tx;
        n = (ty < n) ? ty : n;
        n = (tz < n) ? tz : n;
        ex += rx * (n * d + 0.001);
   .........完整代码请登录后点击上方下载按钮下载查看