Forums » Code » WebGL scaling experiment

I had a mad idea this evening: what if we used WebGL to scale images?

So I started messing with the webgl-2d plugin and got it so that WebGL does all the scaling of animations, fonts, and images. The results look better to my eye than the nearest neighbor scaling and even the hqx scaling. As far as performance goes, it's on a par, if not a bit more efficient than the software scaling, but I'm guessing this depends on your hardware.

It has an advantage that you aren't limited to scaling by whole numbers, so a scale factor of 1.5 works and looks good, whereas before, font were messed up and animations with an alpha channel looked poor.

Code is here : http://facebook.cocolocogame.com/webgl-2d.js

It's just an experiment though, so don't be harsh ;)

I did try to use the same method the ig.Image used for scaling (keeping a canvas with the scaled image) which worked but lost any transparency information. Not sure how to solve that, perhaps someone with opengl knowledge might know? It might significantly boost performance?

argh, my head's exploding due to fatigue.

Any way you can explain how to implement this? (eg where to get plugins.webgl-2d, and where to call it from main.js )

Heh, my head was the same when posting that :)

Get web2d-gl.js from https://github.com/corbanbrook/webgl-2d
Put it in your lib/ directory

In your index.html file, put
<script type="text/javascript" src="lib/webgl-2d.js"></script>
before the script tag that loads impact

Then put http://facebook.cocolocogame.com/webgl-2d.js in lib/plugins/

Finally, in your main.js, inside the .requires part, put 'plugins.web2d-gl'

You should now be running through the dynamically scaled webgl!

With this code, if you're prepared to turn off background pre-rendering, you can set ig.system.scale while the game is running to zoom in and out. I'm working on code that will let you do that with pre-rendered backgrounds too.

@MikeH cool! let us know how it turns out. zooming would be the bomb!

Yikes, I tried this plugin with my testgame and everything became crazy looking, haha. Nice start though! I would love to be able to use zooming in certain parts of my game.

There's a couple of bugs to do with alpha and flipping, I'm working on it :)

Im getting an error code "Uncaught TypeError: Cannot read property 'FRAGMENT_SHADER' of null" on line 425.. Thanks for your great work though!!!

Any change of hosting that plugin somewhere?

The original link is broken.