Jump to content

get pixeldata in a webgl canvas


Recommended Posts

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?










Link to comment
Share on other sites

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}
Link to comment
Share on other sites

> 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 by whizzkid
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 years later...
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 ?



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);


/* 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();

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

/* [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.


Beni Yager

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...