[SOLVED] Get Pixel color

[arbrakan]

Hello,

There is a way to get the pixel color from the position of the mouse over the canvas ?

Thanks

Sorry for my poor english

[Wingnut]

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. 

[arbrakan]

Thanks for the answear Wingnut, gona check this.

[Wingnut]

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

[Gijs]

Hi @arbrakan,

@Wingnut's code just needs an inverted pointerY, and then it works great:

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

We talked about it in this thread, which is also about color picking:

 

 

[Pryme8]

why cant you use this method?
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

[Wingnut]

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

[arbrakan]

*him

 

Thanks for all the reply, and your brain time on this ! You are a awesome community !!

There is a way to set color data from gl.readPixels to the color picker ?

Thanks for your time all,

Cheers

(Sorry for my poor english)