webgl实现三维玻璃材质立方体透视反射水火烟雾动画效果代码
代码语言:html
所属分类:三维
代码描述:webgl实现三维玻璃材质立方体透视反射水火烟雾动画效果代码
代码标签: 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 >
/*********
* made by Matthias Hurrle (@atzedent)
*/
/** @type {HTMLCanvasElement} */
const canvas = window.canvas;
const gl = canvas.getContext("webgl2");
const dpr = Math.max(1, .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
out vec4 fragColor;
uniform vec2 resolution;
uniform float time;
uniform int pointerCount;
uniform vec2 touch;
const vec3 roomsize=vec3(6,4,6)*1.25;
const vec3 boxsize=vec3(1,1.25,1);
const float walleps=1e-3;
#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.,S(.0,1.,fract(t))),e);
}
float box(vec3 p,vec3 s,float r) {
p=abs(p)-s;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0