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