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.