Webgl Particle Animation For Videos

Published by: Emil // Date 2.12.2013 // Views: 4165 // Add to Twitter :: Facebook

Image

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