WebGL Particle Animation for Videos

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

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