Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I've found WebGL (based on OpenGL) to be a fiendish and unforgiving framework for those learning to write HTML5-based games. Despite the presence of many examples on how to get started, I'm really struggling to understand how I could simply load a bunch of images and render them to a canvas quickly using WebGL.

My specific scenario involves trying to render a map using a bespoke but simple multi-layered tile engine, where each value in a three dimensional array points to the image to use for that location in the rendered image. Think "Sonic the Hedgehog" via tilesets, tiles, maps, layers, sprites etc.

Can anyone enlighten me:

1) How can I load an image that I can use as a texture in WebGL?

2) How can I dynamically select an image at run time and draw it at any co-ordinate, that I also select at run time?


Edit: Thanks for the responses so far. I'd like to clarify that my original title may not have been the best.

So, rephrasing my original post, here's another stab at the question I really want to ask:

Using WebGL, What is the best way to dynamically load an image at run time and "blit" it to a specific area on a canvas (also at run time)?

share|improve this question
These are three separate questions, and both are basic things you could easily Google for. The answer to your title question is yes, the answer to your second question is to just use standard WebGL texturing, and the answer to your third is to draw textured quads. That said, unless you are planning to require crazy shader effects, avoid WebGL, as it is still unsupported on many users' desktop browsers and almost all mobile browsers, while the 2D canvas is supported almost everywhere and is a better fit for your needs. – Sean Middleditch Sep 4 '12 at 21:57
Hey Sean, I must respectfully disagree that 2D canvas is a better fit for my needs. The performance of the 2D canvas is rather abysmal compared to what WebGL can offer. WebGL is an emerging technology and seems to have been well adopted by most web browsers (although notably not IE as far as I am aware). – Nicholas Hill Sep 4 '12 at 22:00
I'm not sure why this is being down voted so much. Because it's a simple question? Those are allowed. When people Google these questions, why not have them end up here? – Byte56 Sep 4 '12 at 22:49
@Byte56 I voted it down because the answer to the main question is "yes", and the rest are tack-on questions. I wouldn't downvote it if it was asking about how to create one in WebGL - at least that answers all three at once and isn't simply a yes/no question. – doppelgreener Sep 4 '12 at 22:54

I think you should use a graphical framework instead of plain WebGL, except if you really need a control on every part of your game engine.

For example, with Three.js your questions could be easily answered :

  • You load an image using Three.ImageUtils.loadTexture (asynchroneous)
  • You display it by creating a mesh based on a Three.PlaneGeometry and a Three.MeshBasicMaterial, passing your image as the map option.
  • You now have to set the myMesh.position variable to the proper coordinates, and you're done.

If you do this, don't forget to use a Three.OrthographicCamera (because you probably don't want any perspective effect).

share|improve this answer

I wrote a very simple framework for the last Ludum Dare competition: barebones.js

It can create a GL context and you can take apart how it draws the splash to draw any 2D tiles anywhere you want.

Oh, and it has a font drawer too. That's super-useful.

(There's also an animated mesh loader and various 3D camera utils in there too. I have a much extended version of it and would be happy to move new features back into barebones.js if there were actually interested users. Long live hobby coding!)

share|improve this answer

Check this:

Long story short (copy-pasted from link, commented by me :P):

var neheTexture;
function initTexture() {
    // "gl" refers to the result of canvas.getContext("experimental-webgl");
    neheTexture = gl.createTexture();

    // I believe this is a html5 img element :P
    neheTexture.image = new Image();

    // good practice to set load-callback *before* set image source
    neheTexture.image.onload = function() {

    // set src, this will load the image asynchronously
    neheTexture.image.src = "nehe.gif";

But I still agree with the previous answers, you should go for a framework ...

share|improve this answer

I think you should check this out:

It's a multiplatform framwork, that wraps all the GL stuff. Also includes classes for tiled maps and izometrics. If you just need to load images and draw them at coordinates, you should have it setup in less than 5 minutes.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.