From c697da45775e689d8c019c2cef1cc5befe171f1a Mon Sep 17 00:00:00 2001 From: Arjun Verma Date: Wed, 11 Sep 2024 17:26:47 +0530 Subject: [PATCH] Smart color handling for edges based upon mesh luminance (#412) * Handle edge color with luminance * Dynamic edge color based upon luminance * Special handling for very dark color * Give a static color to very very dark meshes * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> --- packages/base/src/3dview/mainview.tsx | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/base/src/3dview/mainview.tsx b/packages/base/src/3dview/mainview.tsx index aed67a00..f2bc10c7 100644 --- a/packages/base/src/3dview/mainview.tsx +++ b/packages/base/src/3dview/mainview.tsx @@ -629,9 +629,26 @@ export class MainView extends React.Component { } edgesMeshes.forEach(el => { this._edgeMaterials.push(el.material); - const originalEdgeColor = new THREE.Color(objColor).multiplyScalar( - 0.7 - ); + const meshColor = new THREE.Color(objColor); + const luminance = + 0.2126 * meshColor.r + 0.7152 * meshColor.g + 0.0722 * meshColor.b; + + let originalEdgeColor; + + // Handling edge color based upon mesh luminance + if (luminance >= 0 && luminance <= 0.05) { + originalEdgeColor = new THREE.Color(0.2, 0.2, 0.2); + } else if (luminance < 0.1) { + const scaleFactor = 3 + (0.1 - luminance) * 3; + originalEdgeColor = meshColor.clone().multiplyScalar(scaleFactor); + } else if (luminance < 0.5) { + const scaleFactor = 1.3 + (0.5 - luminance) * 1.3; + originalEdgeColor = meshColor.clone().multiplyScalar(scaleFactor); + } else { + const scaleFactor = 0.7 - (luminance - 0.5) * 0.3; + originalEdgeColor = meshColor.clone().multiplyScalar(scaleFactor); + } + if (selectedNames.includes(el.name)) { this._selectedMeshes.push(el as any as BasicMesh); el.material.color = SELECTED_MESH_COLOR;