Tamapolis: Javi Agenjo's personal blog

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.

VRorschach is a silly HTML5 Canvas experiment I did a year ago. You can try it clicking the image.
It generates procedural symmetrical shapes and allow you to name them and share them.

The algorithm to create the shapes is very random, it creates closed splines with random x,y values around an area, and keeps shrinking the area with every polygon. I use a seeded random function so people can see the same results using the same seed.

It was fun to see what people saw.

I should try to find a better algorithm, I’m pretty sure I can make better looking shapes using something less random.

Me and my girlfriend participated on the Ludum Dare 22 competition about making a game in 48hours. After the total failure of the GGJ11 we wanted to make something more simple. The theme was simple: ALONE

I wrote a post-mortem about the game on the official blog, you can read it here.

Continue reading »

I decided to participate on the Global Gamejam 2011 at Barcelona with three of my best friends.

We make “something” that barely can be called game, but it was fun. You can try it here:

The game has no gameplay at all but the atmosphere is cute. You just walk around a city and if there is more people logged to the game you will see them. Thats all. We wanted to force the people to interact between them somehow, but we never made it.

You can read a small post-mortem about it following this post.

Continue reading »

I loose count on how many times I’ve trying to resurrect my blog.
I wanted to do a propper devlog like all those amazing blogs I’m suscribed (I should make a post about them), but when I’m very active at coding I do not feel very communicative to write about it, so here we go again.

I plan to write at least once a week to explain how some of my projects are going and to share all those annoying bugs or problems I had discovered and which solutions did I use.

And as I always do, I cleaned my wordpress theme so at least it will help me find the strength to write.

I did a small WebGL widget to make it more interesting, I plan to do more silly 3d widgets over the time.
This one is tiny in code, and it shouldnt take too much resources (it only gets executed when the tab is visible).
I used the library lightgl to simplify the code.
Lightgl is a tiny javascript library to wrap some of the WebGL funcionalities in a more friendly code. It helps to upload textures and meshes, compile shaders and it comes with the mathematical operations common to 3D.

Check the code to make the example above

Continue reading »

I have developed a small script in python to convert OBJs to JSON, well suited for WebGL rendering.
It is not very optimized, and it only support OBJs with one mesh with UVs and Normals.
It computes the bounding box and clamp to 3 decimals all the values to avoid some ugly values.
It support indexed meshes and coordinates swap for 3ds MAX exported meshes.

The code after the jump.
Continue reading »

I spend half an hour trying to find the solution to a problem related to WordPress, and nobody on the Internet seems to have it, so now I had figured it out I have the duty of post it so others can take advantage.

After installing WordPress on my server I wasn’t able to upload images using the admin page, it said something like “The uploaded file could not be moved to …” (“El archivo subido no se ha podido mover a …” in spanish).

It looked like a privileges problem, so I gave to all the folders the rights to read and write (you can do this from your FTP Client, right click on the root folder and search for Atributes or Permissions and set it to read and write to all users), not the safest solution but it should work.

But it didnt. I realized that the uploads folder of WordPress “wp-content/uploads” was created by Apache, not by my user, so that was the problem.

I deleted the folder /wp-content/uploads which was empty, and create it again using my ftp client, problem solved.

I like to code in OpenGL, andI like to code javascript, and now WebGL allows me to do both things at the same time!.

WebGL is a Javascript binding to access all the OpenGL ES features right from the browser. The idea is not bad, it allows to create true hardware accelerated 3D apps embeded on the sites, and it blends perfectly with the rest of web technologies (like HTML+CSS, Ajax, etc).

Unfortunately WebGL is not mature enough and It is kind of hard to start even for a experienced programmer.

The first big problem I found is that Javascript was never meant to be used with binary data, and 3D graphics needs binary data to save all the information (textures, meshes). WebGL can do the ugly work to convert from regular non-typed arrays to low-level streams, but sometimes it is confusing, or just it looks slow, and hard to optimize, but if we agree that a 3d app in a browser is not meant to have Crysis quality we can keep going.

Usually working with OpenGL from scratch tends to be annoying, because there are lots of actions you have to do to create and transform simple things like meshes or textures, things that usually are wrapped in classes to speed up the developing process, and here we have the non-binary data issue that can make the wrapping harder.

For starters all the geometry calculations (projections, transformations, vector operations, etc) should be coded from scratch because JS libraries tend to be focus on HTML and web interaction, no in 3D. Now with WebGL some libraries are emerging for 3D calculations but they do the calculations in JS, which is slow for intensive computation.

Also JS doesnt support operands so you can do V1 + V2, you end up with sum(V1,V2) which is annoying for long formulas.

So thats when you realize you are touching the limits of the technology, JS was never meant for this and WebGL wont solve this issues, it is just a wrapper of a library.

Anyway, I decided to switch to a framework build uppon WebGL, because working straight to WebGL is slow and tedious.

So I chose SpiderGL as that middle-ware, and it looks nice but it is not documented at all!!, gaaagh. I have to read the source code to discover most of its usefull features, and found some bugs too…

But after sorting all the problems, it works, I have coded several shaders, do PostFX in scenes and some intensive mathmatics and it looks nice in a browser.

Sadly I havent figured out how to export meshes in a binary format…

Anyway, If I have time I will upload some of the examples I coded, but remember that you need a WebGL capable browser.

This is a small python code I wrote to create easily apps that connect using a socket.

The interface is really fast:

from easyserver import *

def on_client(info):
print “Alguien viene… ”
print info.details

def on_message(info, msg):
print “Dice: ” + msg

def on_close(info):
print “Se fue…”
print info.details

EasyServer(20000,on_client, on_message, on_close)

This will call any of those callbacks anytime somebody connects to the server listening in port 20000. More simple is impossible.

Here is the code: easyserver.zip

Brief list of good things and bad things that happened to me this last year:

• Gla finally decided to visit me, and I had the chance to show her all the things I’ve been talking about during all these years. I was glad to see her here, to have the oportunity to spend time with her and create good moments to remember, sitting next to each other, showing our own little worlds.
• Encouraged by my friends and co-workers I started playing in a heavy metal band. They needed a bass guitar player and I had too much spare time and some guitar skills, so I went every friday to play with them in a rented-by-hours local, and a couple of months later my skills as a bass player were surprisingly enhaced. Now even my good friend Pau come with us as the lead singer, and the “metal friday evenings” had become one of the best moments of the week, surrounded by great people, playing cool songs and having fun all together. Funny taking into account that I wasn’t a big fan of metal music till now. And If you want to know which songs we play they are mostly Iron Maiden, Judas Priest and Guns’n Roses, but we also play songs from Wolfmother, Jet, Kiss, or some oldies like The Shadows.
• Anton pushed me to go with him to learn french on a one-month course, where I remembered what was to study, and where I learnt a new language from scratch. One year later I’m studying french again two times per week and I can’t say I’m not enjoying it. And it helped me to make new good friends, like Marta
• Encouraged by Ceci I took a one week course of 3D Computer Animation, my long time dream job. During the last years I learnt all the technical aspect about 3D Animation from the programming side but I never spend time animating a character, moving every bone along the timeline. After the course I realized that that wasn’t meant to be my future career. To animate doesnt have anything technical, it is only art, far away from anything I ever done, so I better stick to the technical parts of 3D Animation, like materials, lights, and so.
• Ceci suggested me to travel with her to visit Santiago de Compostela, I don’t really like touristic trips, but this was the better I can remember. We spend a couple of days discovering the city and a couple more enjoying it. We met great people, we relax in nice parks, even the weather was perfect and the city wasn’t crowded at all being a touristic spot as it is. It couldn’t be better. Ceci was a great traveling partner, besides her obsession for taking macro pictures of every flower on the streets and parks.

There were bad things too:

• That I am almost 30 and I still need the people to push me to do things (as you can deduce from the previous points), I never find reasons or strength to do them by myself. And the worse part is that when eventually I do something I’m usually pretty good, but anyway, I’m still a mixture of lazy and coward.
• I stopped falling in love, after too many heart-broken moments, I realized that I stopped loving the people, and worse than that, I stopped caring about finding the true love, which for me was the main source of energy to wake me up everyday. Now I don’t know if I will ever find somebody to spend the rest of my life, but somehow it doesnt matter. I thought I was a romantic, but I guess that couldnt last forever.
• Somehow I ruined my relationship with one of my best friends, the person that know me better and now I miss her every single day.
• To run in a hurry to the hospital after a call telling me Elena had have a crash with her scooter, and to see her so scared, worried and ashamed. But after one year we can remember that and make fun of it, I even feel that after all she become a stronger person.

From 2009 I will carry with me the great days I had with Gla, all the rollerblading sundays with Ceci, the daily lunch with Miguel Angel and our geek conversations, the monday’s dinners with Pau and our nerdy moments, the metal evenings with the twins, my everyday chats about life and love with Julian, the working silly hours with Alun and Marco, the funny classes with Anton and Mikel, the yoga classes with Miriam, the drawing sessions with Ana, watching TV with Marta, hanging out with Graham, the unpredicted calls from Marcos to go eat somewhere, and all the supporting conversations with Magda and Elena. All of them helped me to bare this 2009. After all, it wasnt so bad.