[R68] Tiled backgrounds black in WebGL

Bugs will be moved here once resolved.

Post » Thu Nov 17, 2011 3:09 am

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!sqiddster2011-11-17 03:36:59
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,400

Post » Thu Nov 17, 2011 4:11 am

FF8.0 in XP
I had to switch webgl.verbose to true, to get the webgl warnings.

Firebug reports on start of the app:
[quote]WebGL: 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. [/quote]

TiledBackgrounds in my game were indeed rendered in black.
This with webgl on, point and linear sampling both, all options of FullScreen.
New to Construct ? Where to start

Image Image
Image Image

Please attach a capx to any help request or bug report !
Moderator
B
247
S
85
G
40
Posts: 7,000
Reputation: 57,795

Post » Thu Nov 17, 2011 7:06 am

Question is, was the texture power of 2?
Image Image
B
161
S
48
G
91
Posts: 7,358
Reputation: 67,271

Post » Thu Nov 17, 2011 9:26 am

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.
New to Construct ? Where to start

Image Image
Image Image

Please attach a capx to any help request or bug report !
Moderator
B
247
S
85
G
40
Posts: 7,000
Reputation: 57,795

Post » Thu Nov 17, 2011 2:12 pm

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.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600

Post » Thu Nov 17, 2011 8:38 pm

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?sqiddster2011-11-17 21:00:45
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,400

Post » Thu Nov 17, 2011 9:03 pm

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_DifferencesKiyoshi2011-11-17 21:05:54
B
58
S
13
G
10
Posts: 632
Reputation: 12,515

Post » Thu Nov 17, 2011 9:05 pm

Kiyoshi, I do not know exactly what you mean.
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,400

Post » Thu Nov 17, 2011 9:09 pm

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.Kiyoshi2011-11-17 21:15:51
B
58
S
13
G
10
Posts: 632
Reputation: 12,515

Post » Thu Nov 17, 2011 10:29 pm

I see - so an internal C2 fix for Scirra to implement. As long as it works! Would it work for rectangular sprites?
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,400

Next

Return to Closed bugs

Who is online

Users browsing this forum: No registered users and 3 guests