HTMLMesh: Add some more input types and support rounded rectangles. #24030
Conversation
Mugen87
changed the title
|
Here is a screenshot confirming the correct border behaviour The bottom one has all the same borders so supports it.
|
|
I just tested these in VR, unfortunately clicking on the range slider does nothing, I don't think it can respond to synthetic events. I could add code to handle range sliders in the event handler or I could remove support for rendering the range slider and say it is unsupported. Do you have a preference? |
|
I just added the code for supporting the interactivity with range, it updates the value then fires the input event. |
|
Thanks! |
…rdoob#24030) * Add some more input types and support rounded rectangles * actually perform border check * remove unneeded code * s/roundRectPath/buildRectPath/ * range input handler * Clean up. * More clean up. Co-authored-by: mrdoob <[email protected]>
| const luminance = Math.sqrt( 0.299 * ( color.r ** 2 ) + 0.587 * ( color.g ** 2 ) + 0.114 * ( color.b ** 2 ) ); | ||
| const accentTextColor = luminance < 0.5 ? 'white' : '#111111'; |
There was a problem hiding this comment.
@AdaRoseCannon are these luminance coefficients chosen to match a particular (web?) specification, or are they more subjective and OK to change?
Sorry for bumping an old PR! I am considering how/if to update this in #28880, for consistency in color management across the library. These seem to be luminance coefficients for Rec. 601, rather than Rec. 709 / sRGB, but I just want to check if there's some additional reason here. Thanks!
There was a problem hiding this comment.
This was just for toggling the text color light/dark mode. It feels like a lifetime ago now but iirc I picked it because it closely matched Chrome's behaviour at the time so that what you see on the desktop closely matches the WebXR experience. Because it is just a binary toggle it's probably fine to change it however you need and it will probably work okay.
There was a problem hiding this comment.
Ok, that makes sense to me — thank you!
Description
Using common input types with this before was doable but very hacky, this renders them similar to how the browser does.
A light accent color (hotpink)
A dark accent color (teal)
Live demo
This contribution is funded by Samsung Internet