在视频对象间使用转场gl-transition之regl-transition 使用

import GLTransitions from ‘gl-transitions‘;
import createREGLTransition from ‘regl-transition‘;
import * as createREGL from ‘regl‘;
const videoSrc = [
  ‘https://media.w3.org/2010/05/sintel/trailer.mp4‘,
  ‘http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4‘,
];
const delay = 2;
const duration = 2;
const loadVideo = src =>
  new Promise((resolve, reject) => {
    const video = document.createElement(‘video‘);
    video.width = 500;
    video.height = 400;
    video.crossOrigin = ‘anonymous‘;
    video.preload = ‘auto‘;
    video.load();
    video.src = src;
    video.loop = true;
    video.controls = true;
    video.muted = true;
    // video.autoplay = true;
    video.play();
    resolve(video);
  });
const regl = createREGL({
      container: this.glDemo.nativeElement,
      gl: this.webgl,
    });
    const transitions = GLTransitions.map(t => createREGLTransition(regl, t));

    Promise.all(videoSrc.map(loadVideo)).then((videos: HTMLVideoElement[]) => {
      setTimeout(() => { // 这里用setTimeout是因为视频没这么快播放起来，延迟一下，不然报错 regl.js:48 Error: (regl) invalid texture shape
        regl.frame(({ time }) => {

          const slides = videos.map(video => regl.texture(video).subimage(video));
          const index = Math.floor(time / (delay + duration));
          const from = slides[index % slides.length];
          const to = slides[(index + 1) % slides.length];
          const transition = transitions[index % transitions.length];
          const total = delay + duration;
          const progress = Math.max(0, (time - index * total - delay) / duration);

          transition({ progress, from, to });
        });
      }, 1000)
    });

const createVedio = src => {
  const video = document.createElement(‘video‘);
  video.width = 500;
  video.height = 400;
  video.crossOrigin = ‘anonymous‘;
  video.preload = ‘auto‘;
  video.load();
  video.src = src;
  video.loop = true;
  video.controls = true;
  video.muted = true;
  // video.autoplay = true;
  video.play();
  return video;
};

const regl = createREGL({
      container: this.glDemo.nativeElement,
      gl: this.webgl,
    });
    const transitions = GLTransitions.map(t => createREGLTransition(regl, t));
    const videos = videoSrc.map(createVedio);
    setTimeout(() => { // 延迟一下，等video加载完
      regl.frame(({ time }) => {
        const slides = videos.map(video => regl.texture(video).subimage(video));
        const index = Math.floor(time / (delay + duration));
        const from = slides[index % slides.length];
        const to = slides[(index + 1) % slides.length];
        const transition = transitions[index % transitions.length];
        const total = delay + duration;
        const progress = Math.max(0, (time - index * total - delay) / duration);

        transition({ progress, from, to });
      });
    }, 1000)

// Get a reference to the video element
const myVideo = document.querySelector(‘video‘)

// Create a video texture
const videoTexture = regl.texture(myVideo)

regl.frame(() => {
  // Update the frames of the video
  videoTexture.subimage(myVideo)
})

import GLTransitions from ‘gl-transitions‘;

import createTransition from ‘gl-transition‘;
import createTexture from ‘gl-texture2d‘;

const imgSrc = [img1, img2, img3];

const loadImage = src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.onabort = reject;
    img.src = src;
  });

const imageFrom = await loadImage(img1);
    const imageTo = await loadImage(img2);
    const canvas = this.canvas.nativeElement;

    const gl = this.webgl;
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    const buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([-1, -1, -1, 4, 4, -1]), // see a-big-triangle
      gl.STATIC_DRAW
    );
    gl.viewport(0, 0, canvas.width, canvas.height);

    const from = createTexture(gl, imageFrom);
    from.minFilter = gl.LINEAR;
    from.magFilter = gl.LINEAR;

    const to = createTexture(gl, imageTo);
    to.minFilter = gl.LINEAR;
    to.magFilter = gl.LINEAR;

    const transition = createTransition(gl, GLTransitions.find(t => t.name === ‘Bounce‘));

    // animates forever!
    const loop = (t) => {
      // const transition = createTransition(gl, GLTransitions[Math.floor(Math.random() * GLTransitions.length) % GLTransitions.length]);
      requestAnimationFrame(loop);
      transition.draw((t / 1000) % 1, from, to, canvas.width, canvas.height, { persp: 1.5, unzoom: 0.6 });
    };
    requestAnimationFrame(loop);