Tamapolis: Javi Agenjo's personal blog

Today at work I had to do a cubemap visualizer that must work in iOS, so the only approach was to use HTML5 and the some of the new CSS 3D transformations.

I have done it already in flash using the 2.5 API so I thought it shouldn’t be so hard to rotate several layers 90 degrees and move them around. It turned out it was, because the origins are kind of messed up in the new CSS 3D API and I couldnt find a good documentation about it.

Drag the image around to see the panoramic image, although some old browsers probably wont show anything.

It works perfect in iOS and Chrome, not so well in Firefox.

If you want to use it, it is all wrapped in a simple Cubemap class in javascript, just include it and use it 🙂

Today I’m going to talk about a tiny web app I coded the last week to create images and animations programatically, it is called Simplecanvas.

Click the image to try it

The idea is to create images using simple functions like move or drawImage, and test the results instantly by pressing control+enter.

(more…)

Here is a bunch of interesting links I’ve found during the last month, that I thought were worthy to share and comment.

Visualization

I enjoyed reading this article (Lou’s Pseudo 3d Page v0.91) about how manage the old games to create a visualization of a road for racing games, using raster techniques and in some cases specific hardware for arcade machines. It is well documented and easy to understand.

Beyond Javascript

Javascript its reaching its limits, so here are some interesting projects related to the language itself.

• LLJS: Low level javascript, using the JSVM to execute other kinds of code.
• JSRepl: a webapp to code in different languages from the browser and see the results.
• Garbage Collector in JS: tips to avoid your js app to freeze everytime the GC do his thing.
• Optimizing JS, a good bunch of tips to optimize code in Chrome V8

There is even a LLVM to Javascript compiler called Emscripten, and because there are interpreters from almost any language to LLVM intermediate code, it is possible to take old games coded in C and convert them to be executed on the browser, like Open TTD (one of my favourite old games)!

And if you want to learn to code Javascript or just learn to code, this site is awesome:  Codeacademy

HTML5 upcoming standards

Google and Mozilla are pushing the HTML5 standard with new APIs to access hardware functionalities, but also to allow to create new webapps. Some are really interesting like P2p connections from the browser.

A list with the upcoming standards

Collaborative apps

I love collaborative apps, the results are always unpredictible, here are two nice examples.

• yourworldoftext: an infinite canvas made of text where people can write whatever they want.
• webcanvas: an infinite canvas where everybody can draw. Some time ago I used this to create the title of a community site I had, so people could change the title whenever they wanted. The results where really funny and monstruous.

Continuing my previous post, I wanted to show that it is easy to bake and export the GI to use in a realtime application like a game.

Click to see it in realtime

I baked all the lighting in a texture and exported the mesh and the texture to use in my own WebGL visor, check it out clicking on the image. Use the cursors to navigate through the scene.

(more…)

I love raytracers, I’ve been playing with them since I code my first one in college, and more specifically, I love Global Illumantion algorithms (radiosity, photon mapping, final gather, path tracing, etc). I think its amazing how a simple scene with a couple of cubes and a light could become almost real if you use a good GI algorithm (and a good amount of rendering time). Today people love to use Ambient Occlusion as a way to give depth to the scene, but I hate AO, its just not real at all, and it gives this dirty look and feel, however, a good GI solutions gives much more depth and visual quality.

When I coded my first raytracer I started playing with some illuminations techniques to improve the overall quality, I tryed photon mapping but the results were a little bit ugly due to my sampling function. Now I just enjoy playing with the raytracers included in some important 3d software packages, like Cinema 4D.

Render made with Cinema 4D

Click in read more to know how the image was done.

(more…)

This has been the thirth edition that I have participated in the MusicHackDay, a 24 hours coding competition, usually endorsed by famous musical technology companies (like Spotify, Soundcloud,…).

The MHD its a fantastic event, very well organized, where you can meet great people, code cool things, learn new technologies, and win some prizes during 24 hours, and all for free!

My good friend Marcos and I made this app for the iPad using the Freesound API that let you access to all the samples’ info stored in their database, even provides links to download those samples.

Click on the image to see more screenshots

Click read more if you want to know how it was done. (more…)

Some time ago I did one of my first web experiments in HTML5 using the Canvas element, it was a simple “solve this equation for every pixel of an image” to create mathematical images easily from an equation written by the user, I wasn’t sure how long it will take to evaluate the equation for every pixel (due to being executed in the Javascript VM) but it turned out to be so fast that I could execute it in realtime (using a low resolution canvas I could get 60 fps).

Today I recovered that code and made some optimizations on the way the render loop was handled, I think now it is between two and four times faster. It is a good time to talk about it in this blog.

Click on the image to try it

If you want to know how it is done read the rest of the post.

(more…)

After too many years developing 3D Apps using APIs like OpenGL I found myself wondering why I never did a rasterizer from scratch, creating the image pixel by pixel, using just the CPU.

It is a real useful exercise to consolidate the mental knowledge of a graphics pipeline. I even know people who use software rasterizers on their engines to solve visibility issues or as a fallback option for some extreme situations (for instance, 3D on the web on Internet Explorer! ha ha).

So today I started my own rasterizer, and I choose Javascript, which is not the best context when searching for performance., but I was surprised to see that three.js has its own build-in raster which amazing results, so, why not?

Click the image to see it in action

If you are curios about how it is done, continue reading the entry.

(more…)

For today experiment I tryed to recreate the cool sketchpad by mr doob using websockets and HTML5Canvas.

The idea is that while you paint on the canvas your strokes are send to the server and broadcast to all the users on the web in realtime using websockets, you also can see the cursor of the other people. Click on the image to test it but remember that if there are not other users online you will be just drawing alone.

Shared Canvas

If you want to know more about the coding read the full post.

(more…)

Developing web applications has been always annoying regarding the browsers difference interpretation of the what is standard and what not, thats the reason why I stopped developing for IE. At least Google and Mozilla are serious about the standards so 99% of the code I develop for Firefox (my default browser) works in Chrome as expected. Kudos for both of them.

They have their own extensions but they are for more experimental features. Regarding to what functionalities to support, they both follow the same standard and thats great.

But when it comes to WebGL, although they both follow the same standard, the implementation is a little bit different.

That means that the performance it is not the same between both browsers under the same circunstances, and that is a problem, because there is no way I can see what is the browser doing (besides downloading the fullcode…) so if the performance is unstable I feel I reached a dead-end.

I dont mean that one browser is more optimized than the other, my issues are more about how some actions cost more to one browser than the other.

My current application runs much more smoothly in Firefox than in Chrome, but Firefox loves to purge the Garbage Collector every 10 seconds freezing the application for several seconds, which makes it totally unfriendly. Chrome on the other hand is more stable but the frame-rate drops sometimes just by adding a tiny mesh to the rendering process.

Chrome also do not like negative values for the viewport (I can understand that) and show some weird results when stretching a texture too much (¿?), looks like an undocumented bug with the magnification filter.

It makes me reconsider if WebGL is the perfect platform for 3D applications and games.