Jump to content

[SOLVED] Get Pixel color


arbrakan
 Share

Recommended Posts

Hiya arbrakan, welcome to the forum.  Sorry for the slow replies.

https://www.babylonjs-playground.com/#742772#15

Watch console while mousing-over canvas colors.  Those are red, green, blue, and transparency numbers for pixel under pointer.

Still incorrect, somehow.  (I am using FF 52 which COULD be incompatible with WebGL version 2... canvas things.)

Move up/down over blue box.  In my browser, area near top of blue box... has NO blue value.  hmm.  Problem.

Perhaps we are close to success, though.  :)   (maybe)

I used example from https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels

I am no expert.  Perhaps others will help... soon.  Stay tuned. 

Link to comment
Share on other sites

Hi again, A.  Any luck?

I need to get this getPixelUnderPointer() working soon... for another issue... http://www.html5gamedevs.com/topic/36147-can-you-add-button-masks-for-non-rectangular-buttons/?tab=comments#comment-207121

I think I can use scene.get[Color/Pixel]UnderPointer() to reject clicks on the background area... for odd-shaped buttons.  (Vorion's issue)

I'm going to ping @Vorion to join us, if wanted.

Anyway, new PG for Vorion issue... minor changes.  https://www.babylonjs-playground.com/#WWBIKZ#1

In my first attempt at Arbrakan's scene.getColorUnderPointer()... https://www.babylonjs-playground.com/#742772#15  I had problems.  I'm getting incorrect color reports at-console, while mousing-over scene colors.  But they ARE almost working.  It is suppose to return a Color4-like value... red, green, blue, alpha.

Vorion... in the #1 playground, see that onPointerEnterObservable.add in line 33?  If the FIRST line was an alpha checker... you know... like...

if (scene.getColorUnderPointer().a === 0) return;   ...then the pointer would never change shape, nor would the background color change.  It is essentially a rejected onEnter. 

The same could be done for the first line of an onPointerDownObservable... so if there is no .alpha on the pixel under the pointer, reject the pointerDown observerHandling.

Would anyone like to help me and Arbrakan fix my #15 playground... so it reports good colors?  Currently, I see NO blue value at the console... when mousing-over sky or over top area of blue box.  Something is still broken.  Help from ANYONE on that... wholeheartedly welcome.  Maybe Arbrakan already has an improved version.

Vorion... would a "reject pointerDown if no alpha on pixel under pointer"... work for your masking needs?  *shrug*.  Might be the best way, but I'm surely no expert.  :)  All comments welcome.  This idea might not work AT ALL, because the background color of a BJS scene... has .alpha (which would be 'seen' thru the transparent areas of the button).  Skyboxes and backgroundLayers also have alpha.  SO.... checking the .alpha on the pixelUnderCursor... might be useless for masking the round button.

So, actually, we need... control.getColorUnderPointer(), not scene.getColorUnderPointer(), right?  hmm.  We need the color from the control's canvas.  *scratch scratch*

Anyway, I think this is called 'eyedropper'.  But perhaps 'pixelprobe' might be more apropos.  :)

Weird thing:  I'm modifying a "color picker" in another thread.  And, I'm working-on picking colors... here with Arbrakan.  And, Pryme8 has a current thread about getting the color of a point on a mesh-face!   It's as-if the Gods of Eyedropping... all attacked at the same time!  heh

Link to comment
Share on other sites

Yep, that's what we used.  :)  Well, sort-of.  For getting a colorUnderPointer for GUI image, Gijs used it (imageData).  https://www.babylonjs-playground.com/#WWBIKZ#4

For scene-level webGL2 canvas, we used .readPixels  -  https://www.babylonjs-playground.com/#742772#17

Two sides of the same coin, perhaps.

But now P8 has joined us... who ALSO had getColor issues recently, too.  (face color).

It's a getColor theme!  A getColor world. 

Tiz the season to get Colors... fah la la la la... (cough).  Thx for help, gijs.  P8, pay attention.  ;)

Later... smart pointers... which always know what color they are hovering. :o  Plug-in a little RGB LED to the pointer, and it will always light-up the same color as the pixel at the arrowhead tip.  :)  Coooool.

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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