Some background: graphics newbie here, have just dipped my toes into the world of 3D in the browser with mrdoob's excellent three.js. I intend to go through all the tuts at http://learningwebgl.com/ soon :)
I'd like to know how one would roughly go about re-creating something similar to: http://yooouuutuuube.com/v/?width=192&height=120&vm=29755443&flux=0&direction=rand
My naive understanding of how yooouuutuuube works is as follows:
I'd like to do this in WebGL as opposed to using Canvas so I can take advantage of post-processing using shaders (noise and color channel separation to mimic chromatic aberration).
Here's a screenshot what I have so far:
This works just fine for showing single frames of video, but I'd like to see if I could show multiple frames at once without needing to add additional geometry.
What would be the optimal way of going about such a task? Are there any concepts that I should be studying/investigating in further detail?
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.