zoukankan      html  css  js  c++  java
  • 在视频对象间使用转场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);

  • 相关阅读:
    按钮组件如何处理点击事件(将原生事件绑定到自定义组件)
    一个简单的transition动画
    根据路由记录(利用matched)动态生成面包屑导航
    assets和static的异同
    Ceph集群概念以及部署
    腾讯质量效能提升最佳实践:智能自动化测试探索和建设
    腾讯WeTest压测大师通过中国计量科学研究院测试认证,获国家级权威认可
    新办公司每年费用
    2
    Leetcode刷题第三题 无重复字符的最长子串
  • 原文地址:https://www.cnblogs.com/sameen/p/13270163.html
Copyright © 2011-2022 走看看