webgl实现逼真液态玻璃鼠标指针及视频播放器代码
代码语言:html
所属分类:多媒体
代码描述:webgl实现逼真液态玻璃鼠标指针及视频播放器代码
代码标签: webgl 逼真 液态 玻璃 鼠标 指针 视频 播放器 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background: #121318;
}
body.playing canvas {
cursor: none;
}
canvas {
width: 100%;
height: 100%;
}
video {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
button.start {
z-index: 999;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body translate="no">
<!-- adding video here for demo simplicity. hidden with CSS and passed to shader as a texture -->
<video id="video" src="//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4" controls crossOrigin="anonymous" muted playsinline loop preload="auto" />
<!-- the main frag shader where the magic happens -->
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;
uniform vec2 resolution;
uniform float time;
uniform float timeDelta;
uniform vec2 mouseLoc;
uniform sampler2D txVideo;
uniform vec2 videoResolution;
uniform float videoProgress;
varying v.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0