twgl+webgl实现无底洞隧道穿越动画效果代码

代码语言:html

所属分类:动画

代码描述:twgl+webgl实现无底洞隧道穿越动画效果代码

代码标签: twgl webgl 无底洞 隧道 穿越 动画

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

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

<head>
 
<meta charset="UTF-8">
 
 
 
 
 
<style>
html
{
 
height: 100%;
}
body
{
 
background: #333;
 
overflow: hidden;
 
padding: 0;
 
margin: 0;
 
width: 100%;
 
height: 100%;
 
display: flex;
 
align-items: center;
}
canvas
{
 
height: 100%;
 
width: 100%;
}
</style>

</head>

<body translate="no">
 
<canvas id="canvas"></canvas>
<!-- VertexShader code here -->
<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
precision highp
float;
  in vec4 position
;

 
void main() {
    gl_Position
= vec4( position );
 
}
</script>

<!-- FragmentShader code here -->
<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
#if __VERSION__ < 130
#define TEXTURE2D texture2D
#else
#define TEXTURE2D texture
#endif
precision highp float;
out vec4 fragColor;
uniform vec2 u_resolution;
uniform vec4 u_mouse;
uniform float u_time;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;
 
#define R           u_resolution
#define T           u_time
#define M           u_mouse

#define PI         3.14159265359
#define PI2        6.28318530718

mat2 rot(float a) {return mat2(cos(a),sin(a),-sin(a),cos(a));}
vec3 h.........完整代码请登录后点击上方下载按钮下载查看

网友评论0