Converting a 2d rendering JS application to use WebGL rendering via Pixi

[OSRS]

Hello,

 

I recently converted a legacy Java game that renders a 2d pixel array on the CPU to run in the browser (using TeaVM transpiler) and am now looking into options for improving performance. Converting the actual game rendering to use WebGL would be a massive undertaking, so I wanted to see if there was a quick and easy way to get a slight improvement by taking the 2d pixel array and having it rendered with Pixi using WebGL, rather than having the 2d canvas draw it.

 

At the moment, my code looks like so:

	for (int i = 0; i < width * height * 4; i += 4) {
		int pixel = this.pixels[i / 4];
		this.rgbPixels.set(i, (pixel >> 16) & 255);
		this.rgbPixels.set(i + 1, (pixel >> 8) & 255);
		this.rgbPixels.set(i + 2, pixel & 255);
		this.rgbPixels.set(i + 3, 255);
	}

	graphics.putImageData(imageData, x, y); //Where graphics = CanvasRenderingContext2D

 

Would appreciate any insight as I am a novice to JS!

 

Thank you!

[ivan.popelyshev]

2d canvas will be better for the task.

[ivan.popelyshev]

That's according to what i know about browser internals. Another thing is - you have to find out which context creation parameters to use. 

https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext