webgl实现逼真液态玻璃鼠标指针及视频播放器代码-html代码-BFW代码库

webgl实现逼真液态玻璃鼠标指针及视频播放器代码

代码语言：html

所属分类：多媒体

代码描述：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 vec2 uv;

#define TAU 6.28318530718
#define VIDEO_GLOW_AMOUNT 1.5
#define VIDEO_GLOW_DIM 0.8

#define MOUSE_SIZE 0.042
#define MOUSE_WIDTH 0.8
#define MOUSE_EDGE 0.02
#define MOUSE_DISPLACEMENT_DIST 0.03
#define MOUSE_BASE_ALBEDO vec3(.4)
#define MOUSE_BASE_ALPHA 0.15
#define MOUSE_SPECULAR_INTENSITY 5.0

#define PROGRESS_BAR_L 0.1
#define PROGRESS_BAR_R 0.9
#define PROGRESS_BAR_Y 0.85
#define PROGRESS_BAR_THICKNESS 0.004

#define DEBUG 0 // change to 1 to see debug visuals for "glass" displacement

// color blend functions from https://github.com/jamieowen/glsl-blend
float blendOverlay(float base, float blend) {
	return base<0.5?(2.0*base*blend):(1.0-2.0*(1.0-base)*(1.0-blend));
}
vec3 blendOverlay(vec3 base, vec3 blend) {
	return vec3(blendOverlay(base.r,blend.r),blendOverlay(base.g,blend.g),blendOverlay(base..........完整代码请登录后点击上方下载按钮下载查看