WebGL Particle Animation for Videos
2013-12-02 / ( 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:
if(SaveAsVideo){
////////////////////////////////////////////////////////////////////////////
//
// 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
if(SaveAsWEbGL){
////////////////////////////////////////////////////////////////
//
// 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