javascript - 一个视频资源是否可以在多个 3D 平面上渲染，所有平面均以 webVR 中的不同 video.currentTime 值开始？

Question

我正在使用 AFRAME 来创建 VR 视频体验。我正在尝试优化视频请求的数量，因为我正在视口(viewport)周围渲染大量视频显示。我没有对 10 个 .webm 视频文件提出独特的请求，而是考虑做一些类似“视频 Sprite ”的事情，将所有 10 个剪辑编辑到一个 .webm 视频文件中。从这里，我将单个视频源加载到 webVR 场景中的 10 个原始平面上。如果我抓取视频元素，我可以将视频拖动更改为视频中的任何位置，但这会更新视频正在播放的每个位置。是否可以获取 WebGL 视频引用并更改每个单独视频显示器上的视频位置？

我想如果能够获取每个元素的 id、访问源并将 currentTime 值更新为每个元素的唯一值，那就太棒了...这在 WebGL 中可能吗？或者这是一个 Canvas 和视频资源的限制？

A 框架文档网址为 https://aframe.io/docs/0.7.0/components/material.html#video-textures我想要做的事情没有在文档中描述，但想看看社区内是否有人知道如何做到这一点。

下面列出了应用程序视频代码的片段以供引用。

谢谢!

<a-assets>       
    <video id="testvideo" src="./assets/video/_sm/video_sprite.webmvp8.webm" webkit-playsinline playsinline preload="true"  loop="true"></video>
</a-assets>

....
HTML Code
....
<a-entity layout="type: pyramid; margin: 2; radius: 10;">

<a-video cursor-listener mixin="video" id="video0" material="src: #testvideo" rotation="-1.662 14.897 2.588" position="0.054 1.470 5.472"
opacity="0.0" transparent="true"
animation__opacity="property: opacity; dir: normal; dur: 3000;
                          easing: easeInSine; loop: false; to: 1.0"
></a-video>

<a-video cursor-listener mixin="video" id="video1" material="src: #testvideo" rotation="0 50 0" position="-5 0 -2"
opacity="0.0" transparent="true"
animation__opacity="property: opacity; dir: normal; dur: 3000;
                          easing: easeInSine; loop: false; to: 1.0"
></a-video>

<a-video cursor-listener mixin="video" id="video2" material="src: #testvideo" rotation="0.630 101.643 0.115" position="5.743 0 -1.972"
opacity="0.0" transparent="true"
animation__opacity="property: opacity; dir: normal; dur: 3000;
                          easing: easeInSine; loop: false; to: 1.0"
></a-video>

<a-video cursor-listener mixin="video" id="video4" material="src: #testvideo" rotation="90 90 0" position="0.0 8.165 -1.44"
opacity="0.0" transparent="true" scale="1.2 1.2 1.0"
animation__opacity="property: opacity; dir: normal; dur: 3000;
                          easing: easeInSine; loop: false; to: 1.0"
></a-video>

<a-video cursor-listener mixin="video" id="video5" material="src: #testvideo" position="0 -4 0" rotation="-90 0 0"
opacity="0.0" transparent="true"
animation__opacity="property: opacity; dir: normal; dur: 3000;
                          easing: easeInSine; loop: false; to: 1.0"
></a-video>

<a-video cursor-listener mixin="video" id="video6" material="src: #testvideo" rotation="-27.960 -49.5 3.953" position="-5.186 4.297 2.595"
opacity="0.0" transparent="true"
animation__opacity="property: opacity; dir: normal; dur: 3000;
                          easing: easeInSine; loop: false; to: 1.0"
></a-video>
</a-entity>

Answer 1

我会跳过 Material 组件并在 Three.js 中手动创建纹理。这就是我要做的:

1. (在 HTML 或 JS 中)，创建十个指向相同 src 的视频。希望浏览器能够识别出它们都来自同一个 src并且不执行重复的请求。

2. 创建 10 个不同的 THREE.VideoTexture每个视频 s。 https://threejs.org/docs/#api/textures/VideoTexture

3. 现在，对于您的平面，您需要指定 UV 以指向视频片段。这是一个很好的教程:https://solutiondesign.com/blog/-/blogs/webgl-and-three-js-texture-mappi-1 ...我稍后将发布一个组件，以便轻松地为网格 map 集执行此操作。

4. 然后将每个飞机的视频的当前时间更改为其各自的视频部分。

我们需要构建几个组件(一个简化的 video-material，用于创建带有视频纹理的基本 Material )和一个用于指定 UV 的组件(除非您想手动执行此操作)，我可以稍后发布。

所以也许最终，您构建的实体可能看起来像 <a-plane geometry="buffer: false" video-material="src: myvideo.mp4; time: 150" uvs="totalColumns: 3; totalRows: 3; row: 2; column: 1"></a-plane>

video-material组件可能如下所示:

AFRAME.registerComponent('video-material', {
  dependencies: ['geometry'],

  schema: {
    src: {type: 'string'},
    time: {type: 'number'}
  },

  init: function () {
    var mesh = this.el.getObject3D('mesh');
    this.video = document.createElement('video');
    this.video.setAttribute('src', this.data.src);
    mesh.material = new THREE.MeshBasicMaterial({color: '#FFF', map: this.video});
    this.video.currentTime = this.data.time;
  }
});

这是我的 UV 组件:

var uvs = [new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2()];

/**
 * 1-indexed.
 */
AFRAME.registerComponent('plane-grid-uvs', {
  dependencies: ['geometry'],

  schema: {
    totalColumns: {type: 'int'},
    totalRows: {type: 'int'},
    column: {type: 'int'},
    row: {type: 'int'}
  },

  init: function () {
    var geometry;
    geometry = this.el.getObject3D('mesh').geometry;
    geometry.faceVertexUvs[0][0] = [new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2()];
    geometry.faceVertexUvs[0][1] = [new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2()];
  },

  update: function () {
    var column;
    var columnWidth;
    var data = this.data;
    var geometry;
    var row;
    var rowHeight;

    column = data.column - 1;
    row = data.row - 1;
    columnWidth = 1 / data.totalRows;
    rowHeight = 1 / data.totalColumns;

    uvs[0].set(columnWidth * column,
               rowHeight * row + rowHeight);
    uvs[1].set(columnWidth * column,
               rowHeight * row);
    uvs[2].set(columnWidth * column + columnWidth,
               rowHeight * row);
    uvs[3].set(columnWidth * column + columnWidth,
               rowHeight * row + rowHeight);

    geometry = this.el.getObject3D('mesh').geometry;
    geometry.faceVertexUvs[0][0][0].copy(uvs[0]);
    geometry.faceVertexUvs[0][0][1].copy(uvs[1]);
    geometry.faceVertexUvs[0][0][2].copy(uvs[3]);
    geometry.faceVertexUvs[0][1][0].copy(uvs[1]);
    geometry.faceVertexUvs[0][1][1].copy(uvs[2]);
    geometry.faceVertexUvs[0][1][2].copy(uvs[3]);
    geometry.uvsNeedUpdate = true;
  }
});