顶点着色器从视频中进行纹理查找

一款顶点着色器从视频中进行纹理查找的特效，可以看到本示例中通过对视频的纹理查找，将查找到的纹理显示在下面的区域内，属于比较有趣又特别的效果（本效果需在服务器中预览）。

分类：其它特效 > 动画效果难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，简单设置页面元素的样式即可，代码如下：

body { margin: 0; padding: 0; }
#loading {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  text-transform: uppercase;
}

页面的body部分，需引入两个必要的JS文件，代码如下：

<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/orbitcontrols.js"></script>
<div id="loading">视频加载中...</div>

页面的底部，设置好纹理查找的相关参数，部分代码如下：

console.clear()
class VideoTexture {
  constructor (width = 256, height = 128) {
    this.video = document.createElement('video')
    this.videoLoaded = false

    this.canvas = document.createElement('canvas')
    this.ctx = this.canvas.getContext('2d')

    this.width = this.canvas.width = width
    this.height = this.canvas.height = height

    this.canvas.style.transform = 'scale(0.85, 0.85)'
    this.canvas.style.transformOrigin = '0 0 0'
    this.canvas.style.position = 'fixed'
    this.canvas.style.top = this.canvas.style.left = '1rem'
    document.body.appendChild(this.canvas)
    
    this.ctx.fillStyle = '#111'
    this.ctx.textAlign = 'center'
    this.ctx.font = '30px Helvetica'
    this.ctx.fillText('视频加载中...', this.canvas.width / 2, this.canvas.height / 2 + 10)
    
    this.video.src = './video/ninja.3gp'
    this.video.onloadedmetadata = e => {
      this.video.play()
      this.video.loop = true
      this.videoLoaded = true
    
      let loadText = document.querySelector('#loading')
      loadText.parentNode.removeChild(loadText)

    }
    this.video.width = this.width
    this.video.height = this.height
    this.video.crossOrigin = "Anonymous"
  }

  updateFrame () {
    if (this.videoLoaded === true) {
      this.ctx.drawImage(this.video, 0, 0, this.width, this.height)
    }
  }
}