ricardocabellov5.5

Since I made three.js public I've been refactoring a bit some parts and experimenting a bit with potential performance improvement tricks. I won't go much into details, but maybe this snapshot will give you some idea of what I tried.



So that's nice and all that, but I was starting to get tired of flat colors so I decided it was time to try to implement textures and uv mapping. I took a look other engines to see how they were implementing these and the one that seemed the simplest and fastest was the one in pre3d which was done by Thatcher Ulrich. That also needed a bit of refactoring because I was storing the UV data on each triangle. Instead, it's better to store the UV on the geometry level so you can have different UV mappings (also called channels) for the same geometry.

Once I got that working it was time to do a bunch of demos and see how the browsers were able to handle it. Coincidently, Apple published their infamous HTML5 some days before.



From all the demos I got mostly interested on the VR one:



I know, I was also excited when I saw that message. Anyway, I managed to try the demos in Safari and this demo is pretty much a panorama. 6 planes textures and the camera inside. For that they used the CSS transforms which are only available in Safari at the moment. So I wondered if I could do that same effect using three.js and the new feature.

Turns out you don't need Safari to do a panorama. It's not as fast (not hardware accelerated), but hey, it works. I wasn't too happy about these textures and I looked for better ones for a proper demo. This is how it ended up:



That's better. Certainly slower as it's fullscreen but it has potential.

Next thing to try was using <video> as a texture for a plane. Adding a fake reflection on the floor for extra niceness.



Although it may seem much more advanced it's not. We just need to draw the <video> element to the texture applied in every frame.

Last, but not least interesting, was a Terrain Generator demo. The code to generate the height map and texture is not too different from the code I wrote some years ago while trying to do a raycaster. Only this time I needed to generate the texture instead and let the engine do the rendering part. After a couple of iterations [1, 2], this is the result:



I know, is so slow it's pointless, but I'm having fun doing all this anyway. I hope browsers will keep improving their implementation of <canvas> and maybe all this will have some potential. However, I have to say that I think a lot of things can be done with this. People have done amazing things with even more limitations.



Ah... so tempting... :P Anyway, I better start implementing a WebGL renderer to the engine.