WebGL Performance

I'm working on a multi-platform C and OpenGL based UI renderer and displaying things in 60 fps is essential.

It works well on desktop and mobile OS's and it looks good in WebGL on my non-retina Macbook Air but sadly on retina Macbook Pro's the framerate is dying in case of big browser windows ( ~more than 50% of the screen ).

After a few days of trial and research I figured out the following :

  • Google Chrome's webGL implementation on OS X is much faster than Safari's
  • enabling/disabling preserved drawing buffer makes no difference
  • using scissor test to draw only a fragment of the screen makes no difference
  • switching off antialiasing and the context's alpha channel makes difference
  • disabling alpha blending speeds up frame rendering big time
  • if frame rate is dying then every single javascript call inbetween makes everything slower ( thanks to single-threadedness )
  • in os x's high and maximum display scaling mode the maximum framerate you can achieve with a full-size browser window with a full size canvas is 35-40 fps. In lower modes 60 fps is reachable.
  • full texture upload at any time kills performance

So what did I learn?

  • webGL will never be as fast as standard (windowed) openGL because the browser has to blend the webGL canvas into the web page with every frame and this slows down rendering big time
  • webGL is smart enough not to swap frame buffers if gl context is not changed
  • for a full-scale retina os x webGL UI renderer experience I have to wait for the next generations of MacBooks

Anyway I rewrote my UI renderer to use as few function calls as possible, use as much glTexSubImage2D and glBufferSubData calls as possible instead of full uploads and now it uses bitmaps for text fields instead of individual textured quads for letters and I'm almost satisfied.

Comment on WebGL Performance


Emscripten compiles C code to javascript. Not any kind of C code, just carefully, platform-independently written C code. Not to plain javascript, but to superfast asm.js javascript. It converts OpenGL3/ES2 calls to WebGL calls, it converts BSD sockets to Websockets, it puts MEMFS/IDBFS file systems under your file I/O and you don't have to deal with anything! ( Okay, you can't use POSIX threads but if you really need them you can work it around with webworkers ).


So you just take previously written C/OPENGL games/prototypes and you compile them for the BROWSER!!! It's madness!

I don't have the nerve for web programming, for tons of DOM elements and css, for different js vm implementations, for debugging hell and everything else modern web "gave" me as a developer. And now I don't have to deal with all these things, and still I can deploy for the browser!!! ( okay, I have to deal with them a little because it still is web development, but hey, I only need hours now to fix something strange, not days!!! )

I already compiled a lot of my stuff to javascript with this fantastic technology :

The ultimate fighting experience, Mass Brawl
The ambient-reflex game, FLOW
The conference prototype, Control Room
Laser trinagulation prototype, Laserscan

IMHO Emscripten is the best technology of the 2010's so far.

Comment on Emscripten

Laser Scanning

Last week I badly wanted to see my face as a voxel cloud on the screen so I entered the 3D scanning territory. There are two ways for a mid-class person to do it in an affordable way : reconstruction from photo series or triangulation based on a laser line. The first method is quite inaccurate and needs complex algorithms ( Autodesk123D is the biggest free solution, ), the seconds one is dead simple, accurate but it is very hard to add texture data. So I chose the latter. It needs only two things : a line laser and my mobile's camera.

So I went to the local home improvement store and bought a Bosch Quigo laser level, set up a simple scene and started coding.

The theory : you know the distance between the laser emitter and the camera lens focus point, you know the angle between the laser and the camera axis and you also know the field of view of the camera. From these data you can link an angle to every pixel of an image created by the camera, and from that angle you can tell the distance from the camera.

The red line is the laser, the blue line is the camera axis. d1 is the distance between them, it is set by you. a1 is the angle of the camera axis, it is also set by you. The black line is the line between the camera and the touch point of the laser on an object. The yellow line is the projection plane of the camera, the green lines are the field of view of the camera. The field of view is also known, you can check it up at your phones vendor or calculate it based on the focus length and sensor size ( in case of my iPhone 6s they are 4.15mm and 4.5mm so the focal angle is atan( ( 4.5/2.0 ) / 4.15 ) * 2 so roughly 56 degrees when you hold it horizontally ) or put down a one meter width something on the ground and take a picture of it from 2 meters away and do the math based on the image.

So the point is that the black line will have a corresponding pixel on the image, you know angle a2 ( which is the field of view divided by two ) so you can calculate angle a3 since they have a linear correlation to the pixel count. So ( image width / 2 ) / ( FOV / 2 ) = ( black dot pixel distance from center / wanted angle ). And after you have angle a3 you know the angle between the red line and the black line and a cosine function will give you the length of the black line : cos(angle) = d1/ wanted length.

This is my actual state, check it out here.

The next steps will be to make it freely movable, and possibly transforming the actual scan based on the motion sensor data to get a full scan of anything. Yaaay.

Comment on Laser Scanning

Full throttle

I've been learning to wheelie for 6 months now. I always wanted to do it but never took it too seriously before.

I started with my bicycle. It's a nice trek 7.3 with a massive frame, very easy to pull up the front in the first gear. After a few weeks I could do 4-5 meters so it felt the right time to switch to the motorbike.

I have a quite used KTM 640 LC4 used by an experienced supermoto biker before.


I bought it in this state on purpose because I didn't have the heart to hurt my previous shiny DRZ 400. Having it for two years now I have to say it is far superior to the DRZ in every aspect IMHO.

I watched a few videos on youtube about wheelieing and decided to start practicing on an uphill.

The best uphill around Szeged with a decent surface is in the Oil Fields of Algyő, Hungary's biggest and only oil field with a lot of service roads, it's a paradise for cyclist and bikers in the summer. There are a few overpasses over the M40 highway, the one with the less traffic is the closest one to the Tisza Bridge.

So I started there in May. It is super frightening. Your body is prepared to fall back and jump off and it's pretty hard at the beginning to force your hands to throw the clutch out. ( after a few near-fallback experiences ).

I pulled too small throttle at the beginning and the engine always stopped. Then I pulled too much and had to jump off the bike. Surprisingly the motorbike never fell over, I could always keep it standing ( I have quite long hands ) but it stayed standing on it's tail a lot of times ( thanks to the genius of the KTM frame engineers, they prepared the bike for clowns like me :) ). The rear lamp immediately broke off and also the frame for the license plate.

After a month and hitting the first wheel a lot of times to the road ( which kills the wheel and the steering bearing quite quickly ) I realized that I have to use much more throttle and I have to fine tune the whole process with the clutch so I can control the wheel height much easier.

So from month to month pulling up the first wheel became more and more controlled. The first milestone came after three months. I was still in the same fear every time I started to practice and I got fed up with it, I decided to force calmness to myself, don't think about anything and to stay in the moment. And it worked. I could do 4-5 meters in balance position and I realized what did I do wrong before : my head was moving together with the bike, I was staring at the handlebars and didn't have a fix balancing point. The solution is to watch the horizon all the time so the head stays in a fix horizontal position and your balancing improves big time.

After I carved the horizon staring in my brain things went much-much smoother, after a month I mastered the clutch and gas handling, I could pull up the wheel in any height I wanted. But I couldn't go more than 4-5 meters, so the balancing/balance position is the next step.

The next milestone came last weekend when I felt that I can finally put my legs up on the footpegs and keep the right on the brakes for safety, because in the previous five months I did it with the legs down on the road and helping balancing by pushing up myself and the bike with me. It went quite easy, it wasn't frightening any more, from the previous experiences I could handle the balance point quite well and emergency braking with the right leg works quite well. But the wheeling distance was the same, I couldn't keep the balance point. And then I calmed myself again, stayed in the moment and realized that while I'm looking at the horizon I can improve balancing by pushing my upper body closer to and farther from the steering bars so I can keep the bike vertical much longer. Sometimes I do 8-10 meters with this technique, it's very exciting.

So that's where I am now and I won't leave the path to a succesful infinite wheelie! :)

Comment on Full throttle