webgl实现三维立方体镜面反射折射动画效果代码
代码语言:html
所属分类:三维
代码描述:webgl实现三维立方体镜面反射折射动画效果代码
代码标签: webgl 三维 立方体 镜面 反射 折射 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
touch-action: none;
overflow: hidden;
}
canvas {
width: 100%;
height: auto;
object-fit: contain;
user-select: none;
}
</style>
</head>
<body translate="no">
<canvas id="canvas"></canvas>
<script type="x-shader/x-fragment" id="rusty">#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
out vec4 O;
uniform vec2 resolution;
uniform float time;
#define FC gl_FragCoord.xy
#define R resolution
#define T mod(time*.25,60.)
#define S smoothstep
vec3 palette(float t) {
vec3
a=vec3(.5),
b=vec3(.5),
c=vec3(1),
d=vec3(.2,.3,.4);
return a+b*cos(6.3*(c*d+t));
}
float rnd(vec2 p) {
return fract(sin(dot(p,vec2(12.9898,78.233))+floor(T))*345678.);
}
float noise(vec2 p) {
vec2 i=floor(p), f=fract(p), u=S(.0,1.,f);
float
a=rnd(i),
b=rnd(i+vec2(1,0)),
c=rnd(i+vec2(0,1)),
d=rnd(i+1.);
return mix(mix(a,b,u.x),mix(c,d,u.x),u.y);
}
float fbm(vec2 p) {
float t=.0, a=1.;
for (int i=0; i<5; i++) {
t += a*noise(p);
p *= 2.;
a *= .5;
}
return t;
}
vec3 pattern1(vec2 uv) {
vec3 col = vec3(0);.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0