Archive for the 'webgl' Category

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 LD27 entry won the second position in Graphics!

Saturday, September 21st, 2013

I was surprised but my A DEUS minigame made in 48 hours won the second position (from 1400 entries) in the graphics category thanks to the public votations.

Obviously I didnt ranked so well in the rest of the categories but that encouraged me to work harder next time and achieve a better position in other categories as well.

A DEUS: Postmortem of my LudumDare entry

Monday, August 26th, 2013

This weekend (my last holidays weekend) was the Ludumdare 27, the compo where you have to make a game based on a given theme, alone, in 48 hours, without reusing existing code or assets.

I made “A DEUS”, an asynchronous multiplayer web game in Javascript/WebGL. You can try it clicking on the image.


Click in the image to play the game

I wanted to write a post-mortem with some of my thoughts about the game and the development process.


Updating Simplecanvas

Tuesday, July 9th, 2013

I have improved Simplecanvas so now it has some basic 3D rendering functions, check the latest entries in the gallery to see the syntax.

It is a pity that I can’t use WebGL (I want to keep it as compatible as possible, specially for iOS), otherwise I could make something more like processing.




Thursday, June 20th, 2013

Today I have presented in front of an audience for the very fist time the work I’ve been doing for that last year and a half. It is a 3D editor entirely made for the web, using my own 3D rendering engine. It is called WebGLStudio.


Because it is still a prototype full of bugs I didnt want to promote it but now I feel more confortable sharing it. You can try it by clicking the screenshot.

I will make a better post about it with a tutorial video in the next weeks.

Planet Renderer and HTML5 frustration

Monday, May 6th, 2013

I hate when coding a neat web application I stumble uppon a problem where due to a poor standard there is no clean solution.

This weekend I was coding a planet shader for an idea I’ve been having lately, the problem when dealing with planet rendering is that you need very high resolution textures if you want to let the user get a close view.  So I searched and found some 4K textures perfect for my scene.


Click to see the WebGL Earth Demo


Conway Game of Life in WebGL

Wednesday, February 20th, 2013

Its been a while since I coded one of those two hours web-experiment.
For today, I decided to code the most famous cellular automaton in a web, but using the GPU to compute every step, so I could reach high speed with big worlds.


Click to try the Conway Game of Life


Testing the GI in realtime using lightmaps

Sunday, June 17th, 2012

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.


Web Experiment: Rendering 3D without WebGL

Friday, May 25th, 2012

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.


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.