gpt4 book ai didi

javascript - 同时显示视频元素的多个帧

转载 作者:行者123 更新时间:2023-11-30 10:47:08 26 4
gpt4 key购买 nike

一些背景:这里的图形新手,刚刚使用 mrdoob 出色的 three.js 将我的脚趾浸入浏览器中的 3D 世界。我打算在 http://learningwebgl.com/ 浏览所有的 tuts。很快 :)


我想知道如何粗略地重新创建类似于以下内容的内容: http://yooouuutuuube.com/v/?width=192&height=120&vm=29755443&flux=0&direction=rand

我对 yooouuutuuube 工作原理的天真理解如下:

  1. 创建一个巨大的 BitmapData(大于任何合理的浏览器窗口大小)。
  2. 根据目标视频帧的宽度/高度确定所需的行数/列数(跨越整个 BitmapData 平面,而不仅仅是可见区域)
  3. 将最近视频帧中的像素复制到 BitmapData 上的某个位置(基于移动方向)
  4. 遍历 BitmapData 中的每个单元格,从它前面的单元格复制像素
  5. 以相反的方向滚动整个 BitmapData 以创建运动的错觉,具有 Zoetrope 类型的效果

我想在 WebGL 中执行此操作而不是使用 Canvas,因此我可以利用使用着色器的后处理(噪声和颜色 channel 分离来模拟色差)。

这是我到目前为止的截图:

enter image description here

  • 三个视频(相同的视频,但分为 R、G 和 B channel )被绘制到 Canvas 2D 上下文中。每个视频都略有偏移,以伪造色差外观。
  • 在引用此 Canvas 的 Three.JS 中创建纹理。此纹理在每个绘制周期更新。
  • 在 Three.JS 中创建着色器 Material ,它链接到片段着色器(创建噪声/扫描线)
  • 然后将此 Material 应用于多个 3D 平面。

这对于显示单帧视频效果很好,但我想看看我是否可以一次显示多个帧而无需添加额外的几何图形。

执行此类任务的最佳方式是什么?是否有任何我应该进一步详细研究/调查的概念?

最佳答案

<html>
<body>
<script>

var video = document.createElement( 'video' );
video.autoplay = true;
video.addEventListener( 'loadedmetadata', function ( event ) {

var scale = 0.5;
var width = video.videoWidth * scale;
var height = video.videoHeight * scale;
var items_total = ( window.innerWidth * window.innerHeight ) / ( width * height );

for ( var i = 0; i < items_total - 1; i ++ ) {

var canvas = document.createElement( 'canvas' );
canvas.width = width;
canvas.height = height;

canvas.context = canvas.getContext( '2d' );
canvas.context.scale( scale, scale );

document.body.appendChild( canvas );

}

setInterval( function () {

var child = document.body.insertBefore( document.body.lastChild, document.body.children[ 1 ] ); // children[ 0 ] == <script>
child.context.drawImage( video, 0, 0 );

}, 1000 / 30 );

}, false );
video.src = 'video.ogv';

</script>
</body>
</html>

关于javascript - 同时显示视频元素的多个帧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7655074/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com