[R68] Tiled backgrounds black in WebGL

I have a game which was working fine, however when I enable WebGL, the tiled background turns completely black.

This is both in firefox and chrome.

Edit: I played with it for a little while and it seems to be something to do with the layer it is on. Curious. I cannot post a capx at the moment because I do not want to share the source with the public.

Other than this, excellent update, guys!

FF8.0 in XP

I had to switch webgl.verbose to true, to get the webgl warnings.

Firebug reports on start of the app:

ebGL: A texture is going to be rendered as if it were black, as per the OpenGL ES 2.0.24 spec section 3.8.2, because it is a 2D texture, with a minification filter not requiring a mipmap, with its width or height not a power of two, and with a wrap mode different from CLAMP_TO_EDGE.

TiledBackgrounds in my game were indeed rendered in black.

This with webgl on, point and linear sampling both, all options of FullScreen.

Question is, was the texture power of 2?

Investigating, I created this capx that seem to spot the problem.

TiledBackground (TB) textures are not power of 2.

Launch the preview it works. (even in webgl)

Put an instance of text object in the layout, preview.

Firebug raises the same error as I reported earlier.

Put an instance of button object instead, preview.

Firebug raises an error      inst.drawGL is not a function (l.1619 in preview.js).

The screen is all black with the button clearly visible. Tilebackgrounds and sprite are not displayed.

It seems it has more to see with the upper 2Dcanvas Ash uses for text rendering than with the tiled background.

Anyway, reported.

Ah, I thought we were done with the whole power of two restriction years ago, but it turns out WebGL has some unusual limitations with tiled non-power-of-two textures. I guess it's because it has to work on mobiles which don't have graphics cards with the same features as desktops.

There is a workaround, which is to stretch the texture to a power-of-two size, but it can make it look a little blurry. It's all that I can do I think though.

OK, so I will have to resize it to a power of two...

hmm. I think it will end up meaning that I have to remake my background, and some other objects in my game as I am using a tiled perfect hexagon texture which happens to be impossible to do in a square form.

So will there ever be a solution or is this just a limitation of WebGL?

EDIT: I managed to get it in a square, 512 by 512 pixels. it worked, but my game is lagging a bit now, could it be thanks to the large tiled background?

Another solution other than stretching the texture is creating a new texture with the next pow2 size and plotting the old texture bitmap into it. Then reuploading to video memory. Technically it doesn't works exactly like this but you get my meaning. Any way video memory usage will increase.

Info : http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences

Kiyoshi, I do not know exactly what you mean.

It's basically a texture enlarge instead of rescale. It would be done internally in the engine. If you have a npot texture with size 37x37 next pot size would be 64x64 . So in enlarge this difference of 37 to 64 would be transparent. So the original texture is made pot but maintaining its aspect. I've implemented it once in OpenGL . Don't know how it would work in WebGL.

I see - so an internal C2 fix for Scirra to implement. As long as it works! Would it work for rectangular sprites?

Yeah i think so. The problem would be to adapt Tiled BG to work with it. Depending on how Ash implemented it it would be more or less difficult. If one day WebGL renderer were to be default, since WebGL doesn't like npot textures the best option would be to pack all game images into pot textures. Infact i've seen an engine that uses WebGL that packs every image you import into a single big pot texture. Of course there should be a limit to this.

kiyoshi, that's what I meant in my post :) The engine will scale it up to the next power of two size for you. It's already done for the next build, it's a simple few lines of code, but it does have the side effect that it looks a bit blurry compared to if it didn't have to scale it up. It's a limitation in WebGL itself - they want to make sure it works identically even on old mobile phones with low-tech graphics cards.

Great! But do you mean scale it or resize it ? Because resizing it it shouldn't get blurry at all. It may seem confusing since saying it like this one could confound one with the other :) Thinking about it now scaling it wouldn't make any sense since it would make sprites very blurry

Scaling and resizing mean the same thing... if you mean using a point filter, that might work, but only if the game itself is also set to use point filtering - if linear filtering is used anywhere it will still look blurry.

Well i may be misunderstanding it but i mean it like this :

Original size is 96x96

http://dl.dropbox.com/u/2472278/Images/rescale.png

http://dl.dropbox.com/u/2472278/Images/enlarge.png