Archive for the 'General' Category

BWR2015: A sea in WebGL

Wednesday, October 7th, 2015

I’ve collaborated with the Barcelona World Race event several times in the past. Last year they approached me because they wanted to have a new 3D renderer for the web to enhance their online game (which I coded 5 years ago). I forgot to create a propper entry in my blog so here it is. You can play with the demo.


Click in the image to see it in action, and if you want to know more about the development, read the rest of the entry.

WebGLStudio is Out! first public release

Wednesday, August 19th, 2015

After three years of hard work I decided to release WebGLStudio last week, my 3D Online editor. There are still many things to improve and fix but I felt I would never reach a version that I feel is complete so instead of waiting I prefeer to publish it to get feedback and some help.


So far the reception has been awesome, lots of people have shown interest and right now the project in github has more than 1200 stars!
Now I have to do tutorial videos, feature videos, development documents describing the API and adding some features people has been asking me… lots of work to do!

Feel free to check the website and tryed for yourself.

Jordan Mechner talks about Prince of Persia

Monday, February 16th, 2015

One of those very inspiring talks from a person who created my youth favourite piece of art, where he recalls his life and make you think about your choices.

"From Bedroom to Attic: Making Prince of Persia" by Jordan Mechner from onGameStart on Vimeo.

Things I hate about WebGL

Tuesday, May 13th, 2014

Inspired by this post from Rich Geldreich, and after coding in WebGL for more than two years, I want to make a list of all the things I hate about WebGL graphics programming. Which doesnt mean I dont like WebGL, just that there are many fields to improve that should be addressed.


My Web Apps gallery

Wednesday, July 3rd, 2013

I finally created a web with a list of all my webapps created during the last three years.
Not all of them are finished, and there are some that I don’t think are interesting enough to put them there, but at least the cool ones are well listed.

Feel free to check them following this link.

Simplecanvas 2.0 for Livecoders

Friday, May 3rd, 2013

One month ago Graham offered me to collaborate with him in one of his live coding performances. He does amazing music by coding live in front of an audience (no samples, no synths) using Supercollider.
He thought I could do the visuals using one of my tools, he would send me OSC messages and I can try to visualize them. So I took my old Simplecanvas web-experiment and tune it a lot so it can work in a real environment.


I wanted to talk about it before but I was waiting to have a video to show (we recorded the session), sadly the videos will have to wait a little bit, meanwhile just a heads up about the new features in Simple Canvas 2.0.


Cubemap using HTML5 and CSS Transform

Tuesday, February 5th, 2013

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 🙂

Interesting links of June 2012

Thursday, July 12th, 2012

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


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.

#musichackday 2012: app for iPad

Saturday, June 16th, 2012

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…)

WebGL and Firefox/Chrome

Tuesday, April 17th, 2012

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.