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.

Server side

I’ve been trying for a long time to make an app using websockets, but it turned out to be harder than it should be, mainly because the standard has been changing constantly for the last year so it was hard to find libraries to use on the server side to abstract me from the protocol, I even tryed to coded by myself but there was some binary info being exchanged that I couldnt handle.

I wanted to code a simple broadcast server. I’ve done it before in python but for this time I wanted to use node.js, I really think that nodejs is a great idea. I understand why some people hesitate, but the truth is that it allows to prototype apps really fast thanks to a good API and the benefits of using the same code on the server and the client.

I’ve tryed to code a broadcast server in nodejs before, but all the libraries I tryed were giving me problems during installation, even using the node package manager. Everybody recommends to use socket.IO but I find that library too big and complex to use (it forces you to serve files to fallback in case the browser doesnt support websockets, which wasnt my case).

Finally I found one called faye-websockets that worked perfectly, nice sintax and support most of the version of the standard. It even creates an http server so you can use the same server to handle static files.

The server is really simple, every message gets resend to all the clients connected, it even allows to buffer the latest 100 messages so you can replicate the last part of the session when someone gets connected.

I was surprised by the performance, it will be nice to make a benchmark with several users but right now it seems it can handle a lot of concurrent users without problems.

And the coolest thing is that the server is totally blind to the app, so I can reuse it for any app I want in the future. I’m improving it so it allows a tiny protocol to store and retrieve info from the server.

Client side

Here nothing new, the user actions are transformed in messages and then processed by the painting app and sent to the server, so I dont have to code the behaviour of the users actions separately.

I experimented with different types of brushes but the HTML5 Canvas is limited, I wanted to tint an image and use it as a brush but the Canvas doesnt allow to tint an image, so I discarded that option).

The cool thing is that now I can add new types of user actions and the platform doesnt change, so to prove that I did cursor rendering on the screen of the other online users.

Persistent data

There is only one problem about the app, new users cant see the previous image (besides the buffered strokes which are just a few), so I’ve been thinking of an option that let the users send to the server the canvas image so the new users can download it, I can do that easily using the http server included with the library.

The server sets a DB where it can store data (just a name=>value storage). Clients can send data with a given name or retrieve it. This info is not persistent once the server is restarted (it can be easily dumped to a text file but I dont need it by now).

The only problem was that due to cross-server policies I wasnt able to access the HTTP server through ajax calls if the server were I hosted the app was not the own websocket-http server (which wasnt).

Luckly thanks to this wonderful site I was able to set the CORS policy info on the HTTP response header very easily just adding this field:

response.writeHead(status_code, {'Content-Type': 'text/plain', "Access-Control-Allow-Origin":"*"});

Another nice feature is that I can access my server through the browser typing an special url to check how many clients are online, useful to debug purposes. I even could create a tiny admin protocol to handle stuff.

I was amazed not only by the ideas (which are great) but for the technological part of implementing those ideas, specially by the one where he keeps coding while the screen shows the output of the code without having to restart the app every time a line of code is changed, hard to do because while a coder is typing the code is invalid most of the time (could trigger parsing errors or execution errors). Parser errors are not dangeours because they can be detected easily and they dont mess anything, but execution errors are a big problem because once an error happens the data inside the vars could end up in an invalid state (because the code was partially executed).

So I started thinking about the problem and though that it shouldnt be so hard to code it in Javascript as a webapp using the HTML5 Canvas as the output. If you want to test it click on the image below.

Click to try the app

How does it works? I reevaluate the code after every keystroke (if the code is not too big the parsing is less that 100 ms), if there is a parsing error (the eval function throws an exception) I just keep executing the previous iteration (the last safe code), otherwise I try to execute the new one, if an error is triggered during the execution I fallback to the previous safe iteration.

It works pretty well, besides the problem with the persistent data between iterations, that could get “corrupted” very easily. For that I only could make a “reset state” button that clears all the state (I have to create a new Canvas to avoid problems with the save and restore functions).

There is only one unsolved issue, what about infinite loops?, well, I can’t control that, AFAIK Javascript doesnt has the tools to fix that, and it is easy to end up with an infinite loop when using whiles. I thought about injecting some code inside every loop before evaluating it, that code could act as a yield and throw an exception if the number of iterations is too big. But that would be hard to code so I will just leave it here.

Feel free to check the examples and play with the them, and dont forget to share your experiments with me

Btw, there are some candies in the app like the option of selecting and dragging a number while the Control key is pressed to modify a constant, it also works with variables.

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.

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

General Thoughts

As always, I couldnt add enought gameplay, I’m a graphics programmer and I always end up expending too much adding support to features that only give eye candy. I wanted to have everything configurable from an XML file and that took me too much time. At least I hope I will reuse this in the future for other games.

First of all I have to say that my girlfriend Anna helped me to make this game, not only with his vital lovely support, also proposing ideas and creating most of the art you can see in the game. She is not “fluent” in pixel art but right now she is starting to get pretty good. I don’t how much this goes against the rules of the game, in any case, I didnt wanted to bother anyone, we were preparing for the event the whole month and discovered that it was a solo compo right when we started, so we just went on with it. In our defense I will say that we started the game on Saturday evening, and that most of the time we employed on arguing against each other.

The theme of the game was just a random exploration of ideas, she wanted to be more classical and I pushed her to do more crazy ideas instead of the classical games of jumping on top of the enemies. At the end we found this silly game concept of hoarding food from a pseudo-post-apocaliptic city (based on Barcelona).

About Coding

I reused the old framework I did for the Global Gamejam, it is based on Flixel which for this kind of projects is always my favourite choice.

I love how Adam Atomic decided to “rethink” the Flash API to keep it as simple and powerful as possible, sometimes too simple though. I encourage the people who wants to make online games to start with Flixel, you don’t need to know Flash, indeed most of the things you learn from Flixel are useless if you want to develop a common flash app because he just ignored the API and created his own. It helps to get you focused on the game.

I also put lot of effort on having a huge XML file with all the information of the game (map info, characters, vars, triggers, etc) so I can fine tune the game without recompiling it.

It feels great when you find a way to create a new game mechaning without changing a single line of code.

About the Art

I wanted to have lots of layers with parallax for the lanscape of the city, the problem is that you have to design the level from an XML file which is annoying and slow, so at the end Anna was just creating a single image for the whole map.

Example for the main street

The lighting was put on top as a Multiply layer, I like to do that so I can control the overall illumination parametrically, I love to over use the blending options. If an engine doesnt have blending modes then I wont use it.

+=

I also added some gaussian sprites to create the light halo around the lamps, but because the halos are on top of the light image, the effects is not perfect. The good solution would be to sum all the lights on a bitmap (ala RenderToTexture) and apply it on top, I will try to do that on the next compo (I hope flixel allows me to do that).

I wanted to play with different light images to switch between day and night, but there was no time. Indeed it wont be hard to have a night/day cycle using the assets the way they are now, but it was just eye candy so the idea was rejected.

But talking about the art of the game is talking about the amazing work of Anna and her skills placing one pixel at a time. Her main influences were the Super Bros S&S and some old school games I showed to her, and she was pleased to mimic those hard styles without hesitation.

She even made more animations and locations that didnt end up on the game.

Gameplay

We wanted to have a map to explore where you can stumble upon threats, but I didnt know how to code them in a clean way so at the end I implemented some basic behaviours.

I had three types of character behaviour for the NPCs, the follower (follows you around), the wanderer (walks randomly around the map) and the stalker (tries to get close to you and avoids eye-contact).

I like how some lines of code could add so much personality to a character. Sadly I didnt went too deep in this part.

Anna wanted to put effort on a clear interface, so the game mechanics would be clear from the beginning, but I like to leave those aspect to the imagination or the trial-error approach, I find it more thrilling to play without knowing.

Conclusions

I can’t say I have learn a lot from this compo, because I have made the same mistakes, but I like to use this compos to explore ideas rather than create a generic game. I think that Im getting closer to finish a game in a compo…

Anyway, I plant to keep developing this game for a while with the help of Anna, I think that if we explore a little bit more the narrative in the game we can find something interesting.

Cheers!

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.

The Event

The GGJ is an international competition where people from different countries gather in their cities (like small LAN parties) to code a game in 48 hours, but all using the the same topic, and simultaneously.

The organizers of this event have an amazing website to check all the games from previous editions, to know more about the teams, and they use it to coordinate all the jams so the groups spread around the globe can experience the same feeling.

On the local part, the guys from the VGAUPC (a gamedev students association from the Universitat Politecnica de Catalunya) organized the Barcelona event. They promote the jam, they found the place and they ensure everything was perfect for the compo. Amazing work.

The Why

Why would we want to be closed in a room for 48 hours coding something that probably will end up in a folder where nobody can see it? Well, there are lots or reasons:

• We are talented people and we love videogames, why not to try to make one?
• Despite some stressful moments, it is fun!
• When coding something from scratch the first steps are the harder ones, so if you have some people backing you up and a close deadline, those steps can be exceeded with ease. The rest will come without much effort.
• As Miguel Angel said, most of the problems related to big projects are also present in small projects when the time is limited. So you can learn lots of lessons in just 48 hours.
• It is a nice excuse to do something you have been delaying for a long time (try that language, library, sdk, etc).
• And the most important, because to create something with a group of friends is always amazing, and we dont have the chance to do that very offten.

The Team
So I went with three of my best friends, Miguel Angel (codename debiatan), Graham (codename ravelite) and Anna (codename sugarmuffin), and me Javi (codename tamat).
The idea was to split the work in four different fields so we could create faster without having to wait till someone finishes his part. We arranged the work this way:

• Anna would make all the art, she is a good designer, with no experience in game design but a good profesional that doesnt get scared when she has to explore new fields.
• Miguel Angel would make the server side, he is a great programmer and when it comes to control a server he is the best. He can also create scripts to resolve easily annoying tasks so he could create also some of the data for the game like procedural generated maps, so I can focus on the client side.
• Graham would be in charge of the audio and music. He knows a lot about music and procedural music so he is the best candidate. The challenge for him was to create the score for the game but adding some procedural ideas.
• Javi (me), I have plenty experience coding games so I would code the game using the graphics from Anna, interacting with the audio code from graham and connected to the server of miguel angel.

As you can see everybody had its field and during the first 24 hours we barely interact with each other, only to talk about game mechanics, gameplay and so.

The Idea

The topic gave by the organizers of the Global Gamejam was E X T I N T I O N

As soon as we could we started brainstoorming, proposing crazy ideas, some using non-obvious meanings of the word, others too close to what we thought everybody would make. There were ideas about language extintion, about a metal band killing people with its music, about matting animals, about taking care of your plants, about zombie apocalipse, tribes, city painting, etc.

My idea was to create a city where nobody lives (so humanity is extinct) and you have to walk around trying to find other people alive. But the city has to be so big that you need to put marks on the walls to coordinate with the people. When you find people you get points by standing together, or you stop loosing “loneliness points”. The more people together the better.

I pushed my idea further because it was the idea I knew I could code, I was afraid that picking up other idea would make the game too hard to code for me.

Miguel Angel put all the ideas together and create a nice game mechanic:

You will be in an empty city and you will have to find other players (other online gamers), to find them you can shout, and other players could see indications on the map telling them that somebody shouted. When you find them you will have to go together to a point on the map where interacting all together will make one of them reach the exit of the map, he then will see the game ending and if he wants he can come back to help the other people to see the ending (the funny thing is that everyplayer gets a different ending).

It sounded great, so we all started to work.

The Technology

Before the event I made took some decissions about which technology, framework and visual style we will follow according to the context of the compo.

First, we need to decide if the game will be 3D or 2D. But for a 48 hours compo 3D will be too hard, and the designer in our team didnt have any experience with 3D modelling so 2D would be the best option.

From the point of view of the code, I decided before hand that the game would be coded in flash. I like actionscript, its a nice language with great API and a good IDE, and I feel really confortable coding in flash. On the other hand, we wanted the game to have as much visibility as possible, and the best way to achieve that is to use flash, people can play it without downloading anything and it is powerful enough to make any kind of 2D game.

The server could be make in any language but I knew that Miguel Angel will go with python which was perfect for me.

From the artistic point of view, I thought that pixel art was the best choice, because less pixels means less work, and because pixelart animations are a lot easier, people dont care too much of how many frames the animation has.

The first steps

So this is how we started working:

• Anna creating a character and making some animations for him (walking, talking) and also creating a couple of buildings for our city.
• Graham coding a sound engine in flash (he never coded in flash before!) so the game score could fade to another song in a seamless way.
• Miguel Angel coding a python app that could hold a representation of whats going on in the world, like streets, crossings, people and important information. So when I have my game working I could read information from his side instead of creating it.
• Me creating a small app in flash where a character can move around the map.

I wanted to use flixel because is a nice library to create simple games, I have had some experience before and it goes straight to the point for a 2d game.

And here comes my first big mistake, to go there without having the main tools not even installed nor tested, it wouldnt have been a problem if I had used them before but I haven’t. So I wasted two hours trying to compile the demo application of Flixel under Flex Builder due to some problems with the configuration of the compiler, two precious hours that would have make a huge difference at the end.

The Development

Do not sleep, do not sleep, code code code, do not sleep… woah, its been 24 hours coding without stop…

The Last Minute Call

They said you dont need to polish the game if it is a 48 hours compo, but I didnt wanted ‘to ship’ the game without an intro, so I asked Anna to create a nice image, we will scroll it to create a small narration with the name of the game at the end.

The Conclusion
After handling the game we all were dead, we barely slept during the last 30 hours and we all need a shower and some rest. So the team was dismantled.

Now looking back I can say that I had a wonderful team, all of them did their job in a complete professional way, and somehow I feel I wasnt at the same level as them, because I wasted lots of time in stuff that could had been done much faster/better.

Anna was incredible, it was the first time she worked on a game and I couldnt notice it. She understood the constraits of the project all the time, always using the limitations I gave her, handling the assets faster than I could integrate them on the game, and expending the rest of the time polishing every one of them or creating new ones ‘just in case’.

I love to work with Miguel Angel, we understand each other

The Tips

When planning, think in the simplest possible version of your game, the one that achieves the gameplay without anything else, but when coding leave the option to improve it once you have time. For instance, we created a procedural generated map with lots of info about the map, but at the end we could have work with something like a char string where every character is the type of building and nothing else.

Bring all the tools installed in your laptop, with all the libraries that you could need, no matter the kind of game you are going to do. Tools like Photoshop, nice text editors, Dropbox, svn clients, python compiler, whatever you could need.

Gather your team before the compo to create something really simple in a couple of hours, like a ball bouncing on the screen. At least you will know that you are ready to do something bigger.

Give your artist a way to test the assets without having to interact with the coders, or even a config text file so he can change a little bit the behaviour of the game. Something simple, it is not necessary to use XML. That would save some time.

Do not waste time in things that do not add gameplay, those things can come at the end. First try to achieve the gameplay (we totally failed in this point).

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

function launch3D()
{
	var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
 
	var angle = 0;
	var is_mouse_over = false;
	var scale = 1.0;
	var gl = GL.create();
	gl.clearColor(0.9,0.9,0.9,1.0);
 
	var mesh = GL.Mesh.cube();
	var shader = new GL.Shader('\
	  varying vec2 coord;\
	  void main() {\
		coord = gl_TexCoord.xy;\
		gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
	  }\
	', '\
	uniform sampler2D texture;\
    varying vec2 coord;\
	uniform vec3 u_color;\
	uniform float u_usetex;\
	void main() {\
		gl_FragColor = vec4(0.7, 0.7, 0.7, 1.0);\
		vec3 color = u_color + vec3(1.0 - gl_FragCoord.x/256.0,1.0 - gl_FragCoord.y/256.0,1.0);\
		if(u_usetex == 1.0)\
			color *= texture2D(texture,  gl_FragCoord.xy / 4.0 ).xyz;\
		gl_FragColor = vec4( color,1.0);\
	}\
	');
	var texture = GL.Texture.fromURL('data/pattern4.png', {wrap: gl.REPEAT, filter: gl.NEAREST });
 
	gl.onupdate = function(seconds) {
	  angle += 20 * seconds;
	  scale = scale * 0.9 + 0.1;
	};
 
	gl.ondraw = function() {
	  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
	  gl.loadIdentity();
	  gl.translate(0, 0, -5);
 
	  texture.bind(0);
	  gl.scale(scale,scale,scale);
 
	  //bg
	  gl.pushMatrix();
	  gl.rotate(45, 1, 0, 0);
	  gl.rotate(angle, 0, 1, 0);
	  shader.uniforms({ texture: 0, u_color: [2.0,2.0,2.0], u_usetex: is_chrome ? 0 : 1});
	  shader.draw(mesh);
 
	  gl.scale(0.9,0.9,0.9);
	  shader.uniforms({ texture: 0, u_color: [0.0,0.0,0.0], u_usetex: is_chrome ? 0 : 1});
	  shader.draw(mesh);
	  gl.popMatrix();
 
	};
 
	//set size
	$("#bgwidget").append( gl.canvas );
	  gl.canvas.width = 256;
	  gl.canvas.height = 256;
	  var options = {};
	  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
	gl.matrixMode(gl.PROJECTION);
	gl.loadIdentity();
	gl.perspective(options.fov || 45, gl.canvas.width / gl.canvas.height,
	  options.near || 0.1, options.far || 1000);
 
	setInterval(function() {
		scale += 0.05;
	},1000);
 
	//gl.loadIdentity();
	//gl.ortho(-2,2,-2,2,-10,10);
 
	gl.matrixMode(gl.MODELVIEW);
	//gl.fullscreen();
	gl.animate();
 
}

The code after the jump.

Usage: call the script passing the obj filename as a parameter
You can add a second parameter specifying a name for the object, this is useful when using the output file as a script include in your code instead of a AJAX call. Then the output will be: myname = {…}

Enjoy it!

#!/usr/bin/python
# .OBJ to JSON
# by Javi Agenjo (javi.agenjo@gmail.com) 26/6/11
# only works with OBJs with normals and uvs
import os,sys
import json,math
 
version = "0.4"
 
if len(sys.argv) < 2:
    print "Error: Filename parameter missing"
    exit(1)
 
filename = sys.argv[1]
meshname = ""
objectname = ''
 
if len(sys.argv) > 2:
    objectname = sys.argv[2]
 
use_3dsmax = False
if "-max" in sys.argv: use_3dsmax = True
 
use_indexed = True
if "-indexed" in sys.argv: use_indexed = True
 
indexed_vertices = []
indexed_normals = []
indexed_uvs = []
 
positions = []
normals = []
uvs = []
indices = []
 
unique_indexed = 0
indexed_triplets = {}
 
def add(v):
    global positions,normals,uvs,indexed_vertices,indexed_normals,indexed_uvs
    t = v.split("/")
    #print "*"+v+"*"
    positions.append( indexed_vertices[ int(t[0])-1 ] )    
    uvs.append( indexed_uvs[ int(t[1])-1 ] )
    normals.append( indexed_normals[ int(t[2])-1 ] )
    return len(positions) - 1
 
def addIndexed(v):
    global indexed_triplets, indices
    i = indexed_triplets.get(v)
    if i == None:
        i = add(v)
	indexed_triplets[v] = i
    indices.append(i)
 
def array2string(a):
    r = "["
    for v in a:
        for n in v:
            r += str(n) + ","
    return r[:-1] + "]"
 
def linealize(a):
    r = []
    for v in a:
        for n in v:
            r.append(n)
    return r
 
def computeMinMax(a):
    min_v = [1000000,1000000,1000000]
    max_v = [-1000000,-1000000,-1000000]
    for v in a:
        min_v[0] = min( min_v[0], v[0] )
        min_v[1] = min( min_v[1], v[1] )
        min_v[2] = min( min_v[2], v[2] )
        max_v[0] = max( max_v[0], v[0] )
        max_v[1] = max( max_v[1], v[1] )
        max_v[2] = max( max_v[2], v[2] )
    return (min_v,max_v)
 
try:
    fin = open(filename)
except IOError:
    print "Error: file cannot be opened"
    exit(1)
 
try:
    #if True:
    for line in fin.readlines():
	#print line
        line = line.replace("\r\n","")
        line = line.replace("  "," ")
	line = line.strip()
        words = line.split(' ')
        #print ":::" + words[0]
        if words[0] == '#':
            continue
 
        if words[0] == 'v':
            if use_3dsmax:
                indexed_vertices.append( [ -1 * float(words[1]), float(words[3]), float(words[2]) ])
            else:
                indexed_vertices.append( [ float(words[1]), float(words[2]) ,float(words[3]) ])    
        elif words[0] == 'vn':
            if use_3dsmax:
	        indexed_normals.append( [ -1 * float(words[1]), float(words[3]) , float(words[2]) ])
	    else:
	        indexed_normals.append( [ float(words[1]), float(words[2]) , float(words[3]) ])
        elif words[0] == 'vt':
            indexed_uvs.append( [ float(words[1]), float(words[2]) ])
        elif words[0] == 'f':
            size = len(words)
            #0 is f, #1 first vertex, start in 2, ends when there is one remaining
            for i in range(2,size-1):
                #print "T:"+line+"=>["+str(i)+"]"+words[i]+" len: "+str(len(words))
		if use_indexed:
                    addIndexed(words[1])
                    addIndexed(words[i])
                    addIndexed(words[i+1])
		else:
                    add(words[1])
                    add(words[i])
                    add(words[i+1])
        elif words[0] == 'g' and len(words) > 1:
	    #print words
            meshname = words[1]
except:
    print "Error, problem parsing OBJ"
    exit(1)
 
fin.close()
 
if len(positions) == 0:
    print "Error, no OBJ info found"
    exit(1)
 
minmax = computeMinMax(indexed_vertices)
 
obj = {}
obj["version"] = version
obj["filename"] = filename
obj["meshname"] = meshname
obj["positions"] = linealize(positions)
obj["normals"] = linealize(normals)
if len(indices):
    obj["indices"] = indices
obj["uvs"] = linealize(uvs)
obj["aabb_min"] = minmax[0]
obj["aabb_max"] = minmax[1]
obj["numvertices"] = len(positions)
 
from json import encoder
encoder.FLOAT_REPR = lambda o: format(o, '.3f')
 
if objectname != '':
    print objectname + " = ",
print json.dumps(obj)
exit(0)

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.

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.