Home / 2013 / March

Blossom

http://www.bongiovi.tw/experiments/webgl/blossom/

I was trying to create my obj loader and came out with this idea, the tree is loaded from obj, it’s not complicate to create this obj loader, but it takes me a while to figure it out how it works. One small thing about the obj file structure is that the vertex start from 1 instead of 0, I took a while to get this, and after this it’s pretty easy. However i don’t recommend to write the obj loader yourself, because there’s already one in three.js :
http://mrdoob.github.com/three.js/examples/webgl_loader_obj.html

http://mrdoob.github.com/three.js/examples/js/loaders/OBJLoader.js

The other thing i tried to do in this experience is to put the rotation of the particle in the shader. I haven’t done any performance test yet so i don’t know if it’s better to do it in javascript side or in the shader side, i just discover this approach the other day and i want to try it. so in the shader the code looks like this :

vec3 rotateX(vec3 pos, float alpha) {
    mat4 trans= mat4(   1.0, 0.0, 0.0, 0.0, 
                        0.0, cos(alpha), -sin(alpha), 0.0, 
                        0.0, sin(alpha), cos(alpha), 0.0, 
                        0.0, 0.0, 0.0, 1.0);
    return vec3(trans * vec4(pos, 1.0));
}

vec3 rotateY(vec3 pos, float alpha) {
    mat4 trans= mat4(   cos(alpha), 0.0, sin(alpha), 0.0, 
                        0.0, 1.0, 0.0, 0.0, 
                        -sin(alpha), 0.0, cos(alpha), 0.0, 
                        0.0, 0.0, 0.0, 1.0);
    return vec3(trans * vec4(pos, 1.0));
}

vec3 rotateZ(vec3 pos, float alpha) {
    mat4 trans= mat4(   cos(alpha), -sin(alpha), 0.0, 0.0, 
                        sin(alpha), cos(alpha), 0.0, 0.0, 
                        0.0, 0.0, 1.0, 0.0, 
                        0.0, 0.0, 0.0, 1.0);
    return vec3(trans * vec4(pos, 1.0));
}

This is really useful when you want to rotate a vector in shader, probably better to have a function that you can rotate the vector with any axis instead of just x, y and z axis, but for me these 3 are enough for my experience.

I am too tired to write detail on how i implement this, drop me a mail if you want to understand how it works. In fact all these are preparation for a personal project, once i finished it there will be a formal making-of and all the details.

Bubble Man

Just a little toy, i capture the motion using kinect and export them to javascript. Then recreate the motion using particles based on the data obtained from kinect. Rotate it to hear different musics.

Another thing I tried to do is the sound, i want the sound to change when user view it from different angles and transition must be smooth. To be honest it’s just to change the volume of each sound ( in this case i put 3 sounds ) with the position of the camera, the code look like this :

if(angle > (210 - range) && angle < 210 ) { 	 	
theta = (angle - ( 210 - range)) / range * PI2; 	 	this.gains[0].gain.value = Math.cos(theta); 	 	this.gains[1].gain.value = Math.cos(PI2 - theta); 	 	this.gains[2].gain.value = 0;  } else if(angle > (330 - range) && angle < 330 ) { 	 	theta = (angle - ( 330 - range)) / range * PI2; 	 	this.gains[0].gain.value = 0; 	 	this.gains[1].gain.value = Math.cos(theta); 	 	this.gains[2].gain.value = Math.cos(PI2 - theta);  } else if(angle > (90 - range) && angle < 90 ) {
	theta = (angle - ( 90 - range)) / range * PI2;
	this.gains[0].gain.value = Math.cos(PI2 - theta);
	this.gains[1].gain.value = 0;
	this.gains[2].gain.value = Math.cos(theta);
}

Really no big deal but it’s fun to play.

For the using of web audio, here is a very good article :
http://www.html5rocks.com/en/tutorials/webaudio/games/