Cloth Physics in Three.js

December 1st, 2011

Here is a short example of Cloth Physics, I ported from the OpenFrameworks example at:
https://sites.google.com/site/ofauckland/examples/17-cloth-physics

Demo: here
Source: here

The Beauty of Particles in WebGL

November 23rd, 2011

Here is what I came up after playing around with the very good tutorial on particles in WebGL by Paul Lewis.

The difference is that I end up adding my own Particle and ParticlesSystem objects, so I could have some more fun with repulsion, cohesion, which, even with around 500 particles, really killed my browser, so I guess I will have to find some other way to compare particles with each other.

The DEMO is here: http://www.kamend.com/demos/webgl/flocking1/flocking.html

The JS source is here: http://www.kamend.com/demos/webgl/flocking1/flocking.js

Little fun with Three.js

November 16th, 2011

Here is a small demo of Three.js in action, combined with jQuery mouse events.

http://www.kamend.com/demos/threejs_1/

$(document).ready(function() {


if ( !window.requestAnimationFrame ) {

	window.requestAnimationFrame = ( function() {

		return window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

			window.setTimeout( callback, 1000 / 60 );

		};

	} )();

}

var camera, scene, renderer,
    geometry,material,mesh;

var meshes;

    var numCubes = 1000;
    var cubeSize = 100;

init();
animate();

function init() {

    meshes = new Array();

    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2( 0xFFFFFF, 0.001 );

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    scene.add(camera);

    geometry = new THREE.CubeGeometry( cubeSize,cubeSize,cubeSize);
    material = new THREE.MeshPhongMaterial( {color: 0x666666, wireframe: false,blending: true});


				// lights

				light = new THREE.DirectionalLight( 0xffffff );
				light.position.set( 1, 1, 1 );
				scene.add( light );

				light = new THREE.DirectionalLight( 0x002288 );
				light.position.set( -1, -1, -1 );
				scene.add( light );

				light = new THREE.AmbientLight( 0x222222 );
				scene.add( light );

    var x,y;

    x = -window.innerWidth / 2 ;
    y = -window.innerWidth / 2;

    for( i=0;i window.innerWidth/2) {
            y+= 150;
            x = -window.innerWidth / 2 ;
        }


        meshes[i].position.z = 500 * Math.cos(((x+y)*Math.PI)/180);
    }

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);

    var container = document.getElementById('container');

    container.appendChild(renderer.domElement);

}

function animate() {
   requestAnimationFrame(animate);

    render();
}

function render() {

    
   renderer.render(scene, camera);

}

var oldX=-9999,oldY=-9999;

$(renderer.domElement).mousemove(function(event){
    if(oldX > 0) {
    for(i=0;i
	 
	

A 50-line Useful WebGL App

November 16th, 2011

Speaking of WebGL, here is a very good presentation on Three.js from London Web Standarts.

A 50-line useful WebGL app from London Web Standards on Vimeo.

GLSL in WebGL

November 15th, 2011

After Adobe heading the HTML5 direction, I think a nice follow up is this GLSL gallery, all build in JavaScript & WebGL.