Nme debug 5 (#16136)

* . * Fix #14496 --------- Co-authored-by: David Catuhe <[email protected]>
BabylonJS · Feb 1, 2025 · 93f2cfc · 93f2cfc
1 parent 713cbd6
commit 93f2cfc
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 9 deletions.
diff --git a/packages/tools/nodeEditor/src/components/preview/previewAreaComponent.tsx b/packages/tools/nodeEditor/src/components/preview/previewAreaComponent.tsx
@@ -21,10 +21,12 @@ interface IPreviewAreaComponentProps {
 export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentProps, { isLoading: boolean }> {
     private _onIsLoadingChangedObserver: Nullable<Observer<boolean>>;
     private _onResetRequiredObserver: Nullable<Observer<boolean>>;
+    private _consoleRef: React.RefObject<HTMLDivElement>;
 
     constructor(props: IPreviewAreaComponentProps) {
         super(props);
         this.state = { isLoading: true };
+        this._consoleRef = React.createRef();
 
         this._onIsLoadingChangedObserver = this.props.globalState.onIsLoadingChanged.add((state) => this.setState({ isLoading: state }));
 
@@ -73,6 +75,34 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
         this.forceUpdate();
     }
 
+    async processPointerMove(e: React.PointerEvent<HTMLCanvasElement>) {
+        if (!e.ctrlKey || !this.props.globalState.pickingTexture) {
+            this._consoleRef.current?.classList.add("hidden");
+            return;
+        }
+
+        const data = (await this.props.globalState.pickingTexture.readPixels()!) as Float32Array;
+        const size = this.props.globalState.pickingTexture.getSize();
+        const rect = (e.target as HTMLCanvasElement).getBoundingClientRect();
+
+        const x = (((e.clientX - rect.left) / rect.width) * size.width) | 0;
+        const y = (size.height - 1 - ((e.clientY - rect.top) / rect.height) * size.height) | 0;
+
+        if ((x > 0 && y > 0 && x < size.width && y < size.height, rect.top)) {
+            const pixelLocation = (y * size.width + x) * 4;
+
+            this._consoleRef.current!.innerText = `R:${data[pixelLocation].toFixed(2)}, G:${data[pixelLocation + 1].toFixed(2)}, B:${data[pixelLocation + 2].toFixed(2)}, A:${data[pixelLocation + 3].toFixed(2)}`;
+            this._consoleRef.current!.classList.remove("hidden");
+        }
+
+        e.preventDefault();
+    }
+
+    onKeyUp(e: React.KeyboardEvent<HTMLCanvasElement>) {
+        this._consoleRef.current?.classList.add("hidden");
+        e.preventDefault();
+    }
+
     override render() {
         const blendModeOptions = [
             { label: "Add", value: ParticleSystem.BLENDMODE_ADD },
@@ -85,8 +115,15 @@ export class PreviewAreaComponent extends React.Component<IPreviewAreaComponentP
         return (
             <>
                 <div id="preview">
-                    <canvas onPointerOver={this._onPointerOverCanvas} onPointerOut={this._onPointerOutCanvas} id="preview-canvas" />
+                    <canvas
+                        onPointerOver={this._onPointerOverCanvas}
+                        onPointerOut={this._onPointerOutCanvas}
+                        id="preview-canvas"
+                        onKeyUp={(evt) => this.onKeyUp(evt)}
+                        onPointerMove={(evt) => this.processPointerMove(evt)}
+                    />
                     {<div className={"waitPanel" + (this.state.isLoading ? "" : " hidden")}>Please wait, loading...</div>}
+                    <div id="preview-color-picker" className="hidden" ref={this._consoleRef} />
                 </div>
                 {this.props.globalState.mode === NodeMaterialModes.Particle && (
                     <div id="preview-config-bar" className="extended">

diff --git a/packages/tools/nodeEditor/src/components/preview/previewManager.ts b/packages/tools/nodeEditor/src/components/preview/previewManager.ts
@@ -220,9 +220,13 @@ export class PreviewManager {
         }
         this._refreshPreviewMesh();
 
-        this._globalState.previewTexture = new RenderTargetTexture("rtt", 256, this._scene, false, false);
+        // Adding a rtt to read from
+        this._globalState.previewTexture = new RenderTargetTexture("rtt", 256, this._scene, false);
+        this._globalState.pickingTexture = new RenderTargetTexture("rtt2", 256, this._scene, false, true, Constants.TEXTURETYPE_FLOAT);
         this._globalState.previewTexture.renderList = null;
+        this._globalState.pickingTexture.renderList = null;
         this._scene.customRenderTargets.push(this._globalState.previewTexture);
+        this._scene.customRenderTargets.push(this._globalState.pickingTexture);
 
         this._scene.onAfterRenderObservable.add(() => {
             this._globalState.onPreviewSceneAfterRenderObservable.notifyObservers();
@@ -764,6 +768,11 @@ export class PreviewManager {
             this._globalState.previewTexture = null;
         }
 
+        if (this._globalState.pickingTexture) {
+            this._globalState.pickingTexture.dispose();
+            this._globalState.pickingTexture = null;
+        }
+
         if (this._material) {
             this._material.dispose(false, true);
         }

diff --git a/packages/tools/nodeEditor/src/globalState.ts b/packages/tools/nodeEditor/src/globalState.ts
@@ -66,6 +66,7 @@ export class GlobalState {
     filesInput: FilesInput;
     onRefreshPreviewMeshControlComponentRequiredObservable = new Observable<void>();
     previewTexture: Nullable<RenderTargetTexture> = null;
+    pickingTexture: Nullable<RenderTargetTexture> = null;
     onPreviewSceneAfterRenderObservable = new Observable<void>();
     onPreviewUpdatedObservable = new Observable<NodeMaterial>();
     debugBlocksToRefresh: NodeMaterialDebugBlock[] = [];

diff --git a/packages/tools/nodeEditor/src/graphSystem/display/debugDisplayManager.ts b/packages/tools/nodeEditor/src/graphSystem/display/debugDisplayManager.ts
@@ -33,23 +33,19 @@ export class DebugDisplayManager implements IDisplayManager {
     public onSelectionChanged?(data: INodeData, selectedData: Nullable<INodeData>, manager: StateManager) {
         const block = data.data as NodeMaterialDebugBlock;
 
-        if (!block.debug.isConnected) {
-            return;
-        }
-
         const globalState = manager.data as GlobalState;
         if (selectedData === data && !this._onPreviewSceneAfterRenderObserver) {
             globalState.onPreviewUpdatedObservable.addOnce(() => {
                 this._onPreviewSceneAfterRenderObserver = globalState.onPreviewSceneAfterRenderObservable.add(async () => {
-                    if (globalState.previewTexture) {
+                    if (globalState.previewTexture && block.debug.isConnected) {
                         const size = globalState.previewTexture.getSize();
-                        const data = await globalState.previewTexture.readPixels()!;
+                        const data = (await globalState.previewTexture.readPixels()!) as Uint8Array;
                         this._previewCanvas.width = size.width;
                         this._previewCanvas.height = size.height;
                         const ctx = this._previewCanvas.getContext("2d");
                         const imgData = ctx!.getImageData(0, 0, size.width, size.height);
 
-                        imgData.data.set(new Uint8ClampedArray(data.buffer));
+                        imgData.data.set(data);
 
                         // Draw the image data on the canvas
                         ctx!.putImageData(imgData, 0, 0);

diff --git a/packages/tools/nodeEditor/src/main.scss b/packages/tools/nodeEditor/src/main.scss
@@ -284,6 +284,26 @@
         overflow: hidden;
         height: 100%;
 
+        #preview-color-picker {
+            width: 100%;
+            height: 100%;
+            grid-row: 1;
+            grid-column: 1;
+            color: white;
+            font-size: 12px;
+            align-content: end;
+            justify-content: center;
+            z-index: 10;
+            display: grid;
+            transition: opacity 250ms;
+            pointer-events: none;
+
+            &.hidden {
+                opacity: 0;
+                pointer-events: none;
+            }
+        }
+
         #preview-canvas {
             width: 100%;
             height: 100%;