ImageLayer and WEBGL problem

[knightburton]

Hello there!

I have created a game with this amazing engine and Tiled app. I've added a scrolling background image layer to the map in Tiled, but when i modify the renderer to

me.video.WEBGL

or

me.video.AUTO

in the me.video.init function in the js file, the background imagelayer doesn't show up to me. If I use the canvas renderer than it's working fine. I've tested this three different application with the latest melonjs and boilerplate. Is it a known issue? It would be great if someone could give answer for me.

Thanks!

 

[Parasyte]

Nope, no known issue that I'm aware of.

Do you have other object in the scene? Or just the ImageLayer? The platformer example uses ImageLayer for its parallax backgrounds, and you can run it with WebGL: http://melonjs.github.io/melonJS/examples/platformer/#webgl This shows that it does work as expected, but it might actually rely on something obscure, like having moving entities in the scene ...

[knightburton]

Yes, i have three objects on the scene: the Player, the collosion and a parallax image. I've tried that platformer example, and I've made a new project based on the platformer example, i've got the same wrong result. After that I've created a new map only with an image layer, the webgl didn't render that.

[Parasyte]

Maybe you could share an example that demonstrates the issue? A zip file with the complete code is probably good enough. But if you can put it all on github (gh-pages), that's even better!

With a demo like that, I can investigate and find a solution for you.

[knightburton]

After a few more try and image investigation, I've found that the webgl only render out images with specific dimension, with the power of two. I mean I've created an image with 1024x512 or 128x256 or 1024x128, that it does work as expected, but when I've created an image with 1024x520 or something like that, the webgl doesn't render that. I hope you got it  (sorry about that if my english isn't perfect, I'm still learning it).

So, my problem is half-solved... but i do not find anything about this behavior.

[Parasyte]

We don't support NPOT textures with the WebGL renderer. WebGL is picky about texture size (just like OpenGL ES) It is technically possible to support NPOT textures just by adjusting some of the texture flags, but it comes at a performance cost. We wanted melonJS to run as fast as possible (or just not run at all, as you saw) so we decided to force users to use correctly sized textures.

MDN also makes a good argument against NPOT textures: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Non_power-of-two_textures For example, it is not possible to create repeating backgrounds with NPOT textures. See: http://melonjs.github.io/melonJS/docs/me.WebGLRenderer.html#createPattern And the Platformer example linked above makes use of texture repeat for the parallax scrolling backgrounds.

I agree, the limitation needs to be documented better. I suppose we kind of expect users to be somewhat familiar with WebGL internals if they intent to use the WebGL renderer ... In any case, you should have seen error messages in your developer console when loading NPOT textures. Hopefully that was enough to point you in the right direction.

[obiot]

that definitely needs to be documented better, and I would even throw an exception instead of just a warning in the console, if anyway at the end that prevents it from working properly