get pixeldata in a webgl canvas

[whizzkid]

Hi people,

 

I'm porting something from flash where I have a drawn map with roads, and I want to be able to select each road individually with the mouse. now in Flash I could simply use the hittest on the shapes of the roads, but in PIXI I can't.

 

My solution was to draw all the roads, each with an unique RGB color, and do a get pixel on your mousecoords to see which road you've selected.

 

Now my problem is, how do i get pixeldata from my sprite when I'm using a webgl renderer ?

 

What I've come up with so far is creating a separate canvasrenderer and a separate stage to render my map to, and from that canvas (renderer.view) get the 2d context and get pixeldata..

// create separate canvas and canvasRenderer for this pixel mapvar canvasStage = new PIXI.Stage(0x000000);var canvasRenderer = new PIXI.CanvasRenderer(1024, 598, null, true);// create a texture that holds the mapvar texture = new PIXI.RenderTexture(1024, 598, this.canvasRenderer);texture.render(map);// create a sprite on our separate stage, otherwise the texture won't be renderedvar textureSprite = new PIXI.Sprite(texture);canvasStage.addChild(textureSprite);// render the stagecanvasRenderer.render(canvasStage);

after that is done, I can use this to get my pixels

var pixelData = canvasRenderer.view.getContext(("2d")).getImageData(posX, posY, 1, 1).data;

Is this the correct way to do it? or is there a better way?

 

 

regards,

Martijn

 

 

 

 

 

[hashi]

Try checking color of pixel on canvas:

 

image.onload = function() {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;var context = canvas.getContext("2d");context.drawImage(image, 0, 0);imageData = context.getImageData(mouse_x, mouse_y, 1, 1).data;//do something with imageData}

[xerver]

> now in Flash I could simply use the hittest on the shapes of the roads, but in PIXI I can't.

 

Why not? You can easily define a hit shape for the roads and use pixi's built in interaction system to detect hits for you. You could also do it yourself.

[whizzkid]

 

Try checking color of pixel on canvas:

 

That works if you have a prerendered image, which I don't

 

my question was about how to get pixels for something I rendered in pixi in webGL  (or rather, if the method I used is the way to go for this, or if there's a better way)

[whizzkid]

> now in Flash I could simply use the hittest on the shapes of the roads, but in PIXI I can't.

 

Why not? You can easily define a hit shape for the roads and use pixi's built in interaction system to detect hits for you. You could also do it yourself.

 

Ah, I thought you could only use a Rectangle there.. That's good to know.

 

unfortunately the roads (about 45 of em in total) are detailed enough to be a pain to convert to polygons by hand.. I'll try to see if I can get the html-output of flash (xml or easelJS) converted to pixi polygons..

Edited June 11, 2014 by whizzkid

[whizzkid]

I'd still like to know if the method I'm using of getting pixels from a webgl-rendered sprite is correct, or if there's a better way ?

 

thanks!

[xerver]

You are doing the correct thing to get the color of the pixel, but that isn't the best way. The best way is to define polygons for it. PhysicsEditor (https://www.codeandweb.com/physicseditor) is a neat tool for generating the polygons for you.

[whizzkid]

I created hitareas in another way (draw poly's using exported data from flash), but it turns out that its a lot slower than checking pixels. I've got 45 hitArea polygons on screen, which highlight the roads on mouseover's,  but its responding slower than doing the pixel check.

[ben0bi]

On 11.6.2014 at 10:08 AM, whizzkid said:

I'd still like to know if the method I'm using of getting pixels from a webgl-rendered sprite is correct, or if there's a better way ?

 

thanks!

In other posts, it says that (HTML) getImageData is really slow. Also, if using the fast webGL, why use the lame DOM (canvas) stuff?

I created a RenderTexture and rendered the screen on it. I can put that texture in a DOM element with $('#mydiv').html(tex.getImage()) and it is fast enough. Now I need to find out, how to get the pixel data from that texture, but first step is made. Here's some code:

        // render the screen to a texture. You need your pixi renderer and your root stage/container.
        var origTex = new PIXI.RenderTexture(renderer, renderer.width, renderer.height);
        origTex.render(_PIXIRootStage);

[edit]

/* to render a sprite to a RenderTexture 
(including rotation, scaling and all the stuff), just add it to an empty container 
and render the container to the RenderTexture (do not add it to the root stage.) 
You need to find out width and height of your rotated and scaled sprite, though.
*/

var container = new PIXI.Container();
container.addChild(mySprite);

var renderTex = new PIXI.RenderTexture(renderer, myWidth, myHeight);
renderTex.render(container);

/* [edit2] ...and now we can extract the pixel data like that: */

var pixels = PIXI.extract.webGL.pixels(renderTex);

// the pixels are stored in a 1dimensional array of size 4*width*height.

 

I hope that helps.

Regards,

Beni Yager