在視頻對象間使用轉場gl-transition之regl-transition 使用

regl-transition

視頻：

需要安裝：gl-transitions、regl-transitio、regl、gl-shader

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)

 

 

 

圖片的栗子：

https://github.com/gre/gl-transition-libs/blob/master/packages/regl-transition-example/index.js

 

 

 

 

文檔：

https://github.com/regl-project/regl/blob/gh-pages/API.md#texture-subimage

 

Reuse resources (buffers, elements, textures, etc.)

Similarly, you should reuse buffers and textures wherever possible. If you are continually uploading data to the GPU you should reuse whatever buffers or textures you can. For example, suppose you want to play a video. Then it is better to reuse the buffer as follows:

// 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)
})

 

 

gl-transition

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);