Jump to content

How to read the pixel at a specific coordinate from color buffer?


Recommended Posts


Currently I am working on a map application which can let the users to interactive with huge amount of entities including points and polygons. I use leaflet map framework and a library called PixiOverlay to achieve that. The data are stored in particleContainer and also indexed by kd-tree. Therefore, we can select entities on the map by searching the coordinates of a click event in the tree.

Now I want to implement an onHover function that changes the appearance of cursor when the mouse pointer hovers on the entities. Soon I noticed that continually search in the tree takes too much time when the amount of entities is huge.

Although I am new to WebGL, I still tried hard to google for potential solutions. I found there is a color picking algorithm which includes the step "Read the pixel at location (mouse_x,mouse_y) from the color buffer which identifies the object." Is it also possible to read the color of a pixel directly in pixi.js?



Edited by Leo5566
Link to comment
Share on other sites

Its good that you went to the source, you already know that all those things are done through readPixels. This operation is synchronous, it waits for data from GPU. Try not to call it more than once per frame.

webgl readPixels is wrapped by in WebGLExtract class, instance exists in "renderer.extract", find it in docs. I recommend to do "renderer.extract.pixels(x,y,1,1)" just after rendering is done in your gameloop. Gameloop explanation is here: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop Basically you need a handler with even lower priority than "render". If you call it in mouse event - there's no guarantee that you'll get that info.

Another approach is to render your scene in renderTexture, then you can call extract any time. However, dont just use "extract.pixels(myContainer)" because that will try to render whole container no matter how big its bounds are. You can look inside that code, its actually using "renderer.generateTexture()" - if you copy it you can supply your region in that method. Extract plugin has no magic, except flipY and post-divide, you can do all those things manually if it turns out pixi implementation is not good for your task.

If you want to make pixel-perfect interaction, it can be done without extract/readPixels, see https://github.com/pixijs/pixi.js/wiki/v5-Hacks#pixel-perfect-interaction , maybe parts of that code can help you too.

Welcome to the forums!

Edited by ivan.popelyshev
Link to comment
Share on other sites

  • 9 months later...

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...