Drawing 2d Uint8ClampedArray RGBA - data with WebGL

0
votes

I'm trying to change my HTML5 2d platformer game to use WebGL rendering.

Link to my game: http://yle.fi/galaxi/mazq/2014/katko_dev/ (no WebGL implementation yet)

It currently renders to a canvas element with single "context.putImageData(imgData, 0, 0)" call, but it is slow with firefox and becomes a bottleneck with large resolutions on other browsers too.

I have successfully used my Uint8ClampedArray RGBA as a texture for a "fullscreen" plane, but updating this texture data by calling...

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, texture_data);

...at 50fps seems too slow at least for firefox.

-Is there some better way to update the texture?

-Is there some other way to display 2d Uint8ClampedArray RGBA - data with WebGL?

-Is it possible to somehow directly overwrite the color buffer?

1
javascriptwebgl
Your game looks really nice, but it runs at 10 fps for me. From a quick cpu profile, without going through your code, I assume your bottleneck isn't the gpu, but mostly the cpu, as you have almost 100% cpu usage, mostly in the raytracing (~30%) and "program" ( native code ) (~50%) – Winchestro
Thanks. It does run poorly on mobile, older desktops and IE. I have lost a lot performance on firefox lately. I hadn't noticed that, since I've used only Chrome lately. I'm trying to switch to WebGL to be able to use GPU for the ray-tracing. – Vasenju

1 Answers

1
votes

-Is there some better way to update the texture?

No that I know of, except re-writing your engine to use real WebGL calls to draw instead of manipulating bytes directly. Sorry, I know that's not what you wanted to hear.

-Is there some other way to display 2d Uint8ClampedArray RGBA - data with WebGL?

Do you need it to be RGBA? For example what if it was 8 bit index palette based? Then you'd be uploading only 1/4th as much data. See this answer for how to do indexed paletteed graphics in WebGL. Note: There's no guarantee this will be faster. Although you'll be uploading less data the driver might expand that data to RGBA depending on the GPU.

-Is it possible to somehow directly overwrite the color buffer?

No