Javascript 同时显示视频元素的多个帧
一些背景：这里的图形新手，刚刚用mrdoob的优秀three.js在浏览器中体验了3D世界。我打算尽快完成所有的测试：）Javascript 同时显示视频元素的多个帧,javascript,glsl,webgl,three.js,Javascript,Glsl,Webgl,Three.js,一些背景：这里的图形新手，刚刚用mrdoob的优秀three.js在浏览器中体验了3D世界。我打算尽快完成所有的测试：） 我想知道一个人将如何大致重新创建类似于： 我对Yooouube如何工作的天真理解如下： 创建大量位图数据（大于任何合理的浏览器窗口大小） 根据目标视频帧的宽度/高度确定所需的行/列数（跨整个BitmapData平面，而不仅仅是可见区域） 将像素从最近的视频帧复制到BitmapData上的某个位置（基于移动方向） 迭代BitmapData中的每个单元格，从其前面的单元格复制
我想知道一个人将如何大致重新创建类似于： 我对Yooouube如何工作的天真理解如下：
- 将三个视频（相同的视频，但分为R、G和B通道）绘制到画布2D上下文中。每个视频都会稍微偏移，以伪造色差外观
- 将在Three.JS中创建一个纹理，该纹理引用此画布。此纹理将在每个绘制周期更新
- 在Three.JS中创建着色器材质，该材质链接到片段着色器（创建噪波/扫描线）
- 然后将该材质应用于多个三维平面
<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>
var video=document.createElement（'video'）；
video.autoplay=true；
video.addEventListener（'loadedmetadata'，函数（事件）{
var标度=0.5；
变量宽度=video.videoWidth*比例；
var高度=video.videoHeight*刻度；
var items_total=（window.innerWidth*window.innerHeight）/（width*height）；
对于（变量i=0；i
var video=document.createElement（'video'）；
video.autoplay=true；
video.addEventListener（'loadedmetadata'，函数（事件）{
var标度=0.5；
变量宽度=video.videoWidth*比例；
var高度=video.videoHeight*刻度；
var items_total=（window.innerWidth*window.innerHeight）/（width*height）；
对于（变量i=0；i