WebGL Particle Animation for Videos ( 79 )



At least for half a year I wanted to create this animation with WebGL, but had no time. Finally, last weekend got time to put some particles on motion. Inspiration? Armada Music TV Videos presenting 3D objects in motion. When I saw all these 3D Videos, instantly my mind flown to Three.Js. Then I forgot about this idea for a while.
Second time I saw Universeries v.2 project from http://hellohikimori.com/ and then I discovered that this Spheres from Armada TV are using THREE.IcosahedronGeometry, which looks pretty nice. Searching on http://threejs.org/ I found few examples where THREE.IcosahedronGeometry and that was the start for this 3D Demo.
Is not perfect, is not very complex but is it a good start. What is still missing is Postprocessing, Blur Effect and other Shiny Materials for 3D Objects.

AVI Video resulted from WebGL Export: http://www.youtube.com/watch?v=cip4WU-QaJ8
HTML5 Demo WebGL ( rin it in Chrome ): http://maran-emil.de/experiments/demo16/ http://maran-emil.de/experiments/demo16/index2.htm
Here is the code that saves WebGL into PNG file, later imported in VirtualDub at 12fps as Sequential Files:

//////////////////////////////////////////////////////////////////////////// // // Record // ////////////////////////////////////////////////////////////////////////////
//var windowHalfX = 510; // //var windowHalfY = 288; //
//var windowHalfX = 1280; // //var windowHalfY = 720; //
//var windowHalfX = 720; // //var windowHalfY = 480; //
var canvas_draw = $('#canvas-draw-fancy'); canvas_draw.width = windowHalfX; canvas_draw.height = windowHalfY; var canvas_draw = $('canvas')[1].getContext('2d');
draw_interval = setInterval(function() { // setInterval setTimeout
//////////////////////////////////////////////////////////////// // // Export Image From WebGL // http://jsfiddle.net/TxcTr/3/ // ////////////////////////////////////////////////////////////////
var imgData, img; //Listen to 'P' key //if(e.which !== 80) return; try { imgData = renderer.domElement.toDataURL(); //console.log(imgData); } catch(e) { //console.log("Browser does not support taking screenshot of 3d context"); return; } img = document.createElement("img"); img.src = imgData; //document.body.appendChild(imgNode);
} else{
//////////////////////////////////////////////////////////////// // // Export Image From Canvas // ////////////////////////////////////////////////////////////////
// import the image from the video canvas_draw.drawImage(renderer.domElement, 0, 0, 320, 240);
// export the image from the canvas var img = new Image(); img.src = $("canvas")[0].toDataURL('image/png'); img.width = 320; }
// set image data to php var ajax = new XMLHttpRequest(); ajax.open("POST",'makefile.php',false); ajax.setRequestHeader('Content-Type', 'application/upload'); ajax.send(img.src); // print screens on same page if necesary //document.body.appendChild(img);

}, 30)

WebGL Project References:
Universeries v.2 using THREE.IcosahedronGeometry http://hellohikimori.com/#!/work/ocs-universeries-2012
Armada Music TV Inspirational Videos using THREE.IcosahedronGeometry http://www.youtube.com/watch?v=mRH0RnkrAyQ http://www.youtube.com/watch?v=yjyHbKM64pY http://www.youtube.com/watch?v=19RnkADIkBc http://www.youtube.com/watch?v=6ijby3TdkE4 http://www.youtube.com/watch?v=J-rtM5o_JpY http://www.youtube.com/watch?v=b_iL8NmLVo0
Other Armada Music TV Inspirational Videos using other THREE.Geometry http://www.youtube.com/watch?v=4cdP651og8o http://www.youtube.com/watch?v=VVoiG8LEQ8c http://www.youtube.com/watch?v=cm8p13_J5kg
Other Armada Music TV Inspirational Videos using THREE.SphereGeometry or THREE.CylinderGeometry http://www.youtube.com/watch?v=rB9SaTnh41M http://www.youtube.com/watch?v=doedi2MI-iM http://www.youtube.com/watch?v=_-eKFDmiy74
Other Armada Music TV Inspirational Videos using THREE.CubeGeometry http://www.youtube.com/watch?v=5dlrO8L8R3c http://www.youtube.com/watch?v=44NdBiH8JHQ