一些背景:这里的图形新手，刚刚使用 mrdoob 出色的 three.js 将我的脚趾浸入浏览器中的 3D 世界。我打算在 http://learningwebgl.com/ 浏览所有的 tuts。很快 :)
我想知道如何粗略地重新创建类似于以下内容的内容: http://yooouuutuuube.com/v/?width=192&height=120&vm=29755443&flux=0&direction=rand
我对 yooouuutuuube 工作原理的天真理解如下:
- 创建一个巨大的 BitmapData(大于任何合理的浏览器窗口大小)。
- 根据目标视频帧的宽度/高度确定所需的行数/列数(跨越整个 BitmapData 平面，而不仅仅是可见区域)
- 将最近视频帧中的像素复制到 BitmapData 上的某个位置(基于移动方向)
- 遍历 BitmapData 中的每个单元格，从它前面的单元格复制像素
- 以相反的方向滚动整个 BitmapData 以创建运动的错觉，具有 Zoetrope 类型的效果
我想在 WebGL 中执行此操作而不是使用 Canvas，因此我可以利用使用着色器的后处理(噪声和颜色 channel 分离来模拟色差)。
这是我到目前为止的截图:
- 三个视频(相同的视频，但分为 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/