From 936db7ee0f663bee847d785f3a6d67ab1847002d Mon Sep 17 00:00:00 2001 From: "azykov@mail.ru" Date: Sat, 13 Jun 2026 17:25:13 +0300 Subject: [PATCH] new performance overlay --- pnpm-lock.yaml | 238 +++++++++++++++++++ webclient/package.json | 1 + webclient/src/components/GameView.tsx | 5 +- webclient/src/components/LeftPanel.tsx | 2 - webclient/src/components/RenderInfoView.tsx | 30 --- webclient/src/components/SceneEditorView.tsx | 2 +- webclient/src/components/SceneView.tsx | 3 +- webclient/src/components/ThreeView.tsx | 21 +- webclient/src/components/chartRef.ts | 1 - webclient/src/components/renderInfo.tsx | 20 -- webclient/src/state/gameState.ts | 1 + 11 files changed, 260 insertions(+), 64 deletions(-) delete mode 100644 webclient/src/components/RenderInfoView.tsx delete mode 100644 webclient/src/components/chartRef.ts delete mode 100644 webclient/src/components/renderInfo.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f50da95..c5c4df4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -75,6 +75,9 @@ importers: nipplejs: specifier: ^1.0.4 version: 1.0.4 + r3f-perf: + specifier: ^7.2.3 + version: 7.2.3(@react-three/fiber@9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0))(@types/react@19.2.15)(@types/three@0.184.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0)(use-sync-external-store@1.6.0(react@19.2.6)) react: specifier: ^19.2.6 version: 19.2.6 @@ -583,6 +586,39 @@ packages: '@pinojs/redact@0.4.0': resolution: {integrity: sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==} + '@radix-ui/react-icons@1.3.2': + resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==} + peerDependencies: + react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc + + '@react-spring/animated@9.7.5': + resolution: {integrity: sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + + '@react-spring/core@9.7.5': + resolution: {integrity: sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + + '@react-spring/rafz@9.7.5': + resolution: {integrity: sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==} + + '@react-spring/shared@9.7.5': + resolution: {integrity: sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + + '@react-spring/three@9.7.5': + resolution: {integrity: sha512-RxIsCoQfUqOS3POmhVHa1wdWS0wyHAUway73uRLp3GAL5U2iYVNdnzQsep6M2NZ994BlW8TcKuMtQHUqOsy6WA==} + peerDependencies: + '@react-three/fiber': '>=6.0' + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + three: '>=0.126' + + '@react-spring/types@9.7.5': + resolution: {integrity: sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==} + '@react-three/drei@10.7.7': resolution: {integrity: sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==} peerDependencies: @@ -594,6 +630,17 @@ packages: react-dom: optional: true + '@react-three/drei@9.122.0': + resolution: {integrity: sha512-SEO/F/rBCTjlLez7WAlpys+iGe9hty4rNgjZvgkQeXFSiwqD4Hbk/wNHMAbdd8vprO2Aj81mihv4dF5bC7D0CA==} + peerDependencies: + '@react-three/fiber': ^8 + react: ^18 + react-dom: ^18 + three: '>=0.137' + peerDependenciesMeta: + react-dom: + optional: true + '@react-three/fiber@9.6.1': resolution: {integrity: sha512-zF0rsKcVYpcJwbFEnv2HkHX9cvOEgsfQo/X8lwmR2dn13S4qEQJXir9fxf5js2LQFoXqxOY7MDkOkYx2uZ4gSg==} peerDependencies: @@ -724,6 +771,11 @@ packages: '@rolldown/pluginutils@1.0.1': resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==} + '@stitches/react@1.2.8': + resolution: {integrity: sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==} + peerDependencies: + react: '>= 16.3.0' + '@tabler/icons-react@3.44.0': resolution: {integrity: sha512-8+rvzBbVm/1Z3sG3x7GUNAaxIKxwgz8xaMhRs23nrCnMTKRFAhEC+82zAIFeAA0seXdrAGX5HFCkaLpGK2rVHg==} peerDependencies: @@ -845,6 +897,14 @@ packages: peerDependencies: react: '>= 16.8.0' + '@utsubo/events@0.1.7': + resolution: {integrity: sha512-WB/GEj/0h27Bz8rJ0+CBtNz5mLT79ne1OjB7PUM4n0qLBqEDwm6yBzZC3j6tasHjlBPJDYZiBVIA1glaMlgZ5g==} + peerDependencies: + react: '>=16.8.0' + peerDependenciesMeta: + react: + optional: true + '@vitejs/plugin-react@6.0.2': resolution: {integrity: sha512-DlSMqo4WhThw4vB8Mpn0Woe9J+Jfq1geJ61AKW0QEgLzGMNwtIMdxbDUzLxcun8W7NbJO0e2Jg/Nxm3cCSVzzg==} engines: {node: ^20.19.0 || >=22.12.0} @@ -927,6 +987,11 @@ packages: buffer@6.0.3: resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==} + camera-controls@2.10.1: + resolution: {integrity: sha512-KnaKdcvkBJ1Irbrzl8XD6WtZltkRjp869Jx8c0ujs9K+9WD+1D7ryBsCiVqJYUqt6i/HR5FxT7RLASieUD+Q5w==} + peerDependencies: + three: '>=0.126.1' + camera-controls@3.1.2: resolution: {integrity: sha512-xkxfpG2ECZ6Ww5/9+kf4mfg1VEYAoe9aDSY+IwF0UEs7qEzwy0aVRfs2grImIECs/PoBtWFrh7RXsQkwG922JA==} engines: {node: '>=22.0.0', npm: '>=10.5.1'} @@ -1069,6 +1134,9 @@ packages: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} + eventemitter3@4.0.7: + resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==} + fast-decode-uri-component@1.0.1: resolution: {integrity: sha512-WKgKWg5eUxvRZGwW8FvfbaH7AXSh2cL+3j5fMGzUMCxWBJ3dV3a7Wz8y2f/uQ0e3B6WmodD3oS54jTQ9HVTIIg==} @@ -1350,6 +1418,10 @@ packages: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} + loose-envify@1.4.0: + resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} + hasBin: true + lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} @@ -1419,6 +1491,10 @@ packages: nwsapi@2.2.23: resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==} + object-assign@4.1.1: + resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} + engines: {node: '>=0.10.0'} + on-exit-leak-free@2.1.2: resolution: {integrity: sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==} engines: {node: '>=14.0.0'} @@ -1483,6 +1559,9 @@ packages: promise-worker-transferable@1.0.4: resolution: {integrity: sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==} + prop-types@15.8.1: + resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} + punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} @@ -1490,11 +1569,35 @@ packages: quick-format-unescaped@4.0.4: resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==} + r3f-perf@7.2.3: + resolution: {integrity: sha512-4+P/N/bnO9D8nzdm3suL/NjPZK/HHdjwpvajhi8j7eB41i2ECN6lX9RXiKSpHzpsDi2ui1tBj6q7/sz5opoqXw==} + peerDependencies: + '@react-three/fiber': '>=8.0' + dom: '*' + react: '>=18.0' + react-dom: '>=18.0' + three: '>=0.133' + peerDependenciesMeta: + '@react-three/fiber': + optional: true + dom: + optional: true + react-dom: + optional: true + + react-composer@5.0.3: + resolution: {integrity: sha512-1uWd07EME6XZvMfapwZmc7NgCZqDemcvicRi3wMJzXsQLvZ3L7fTHVyPy1bZdnWXM4iPjYuNE+uJ41MLKeTtnA==} + peerDependencies: + react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom@19.2.6: resolution: {integrity: sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==} peerDependencies: react: ^19.2.6 + react-is@16.13.1: + resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + react-router-dom@7.16.0: resolution: {integrity: sha512-kMUAbimWB5FVbF4Bce4bJsiKJWLIUHq/mEG8+CFDnCSgltptBiG5nguducmsJeGKytlCvQud9Qhzpn49iduTlA==} engines: {node: '>=20.0.0'} @@ -1637,6 +1740,12 @@ packages: resolution: {integrity: sha512-e2zZ96wSChazBsbENf/Pcm/4swHt2cEKQ92rhUjkL9GCKiTDJIaTBenjE/m9DXi0QBmTMDkFDdOomUy20A1tDQ==} engines: {node: '>=20'} + three-mesh-bvh@0.7.8: + resolution: {integrity: sha512-BGEZTOIC14U0XIRw3tO4jY7IjP7n7v24nv9JXS1CyeVRWOCkcOMhRnmENUjuV39gktAw4Ofhr0OvIAiTspQrrw==} + deprecated: Deprecated due to three.js version incompatibility. Please use v0.8.0, instead. + peerDependencies: + three: '>= 0.151.0' + three-mesh-bvh@0.8.3: resolution: {integrity: sha512-4G5lBaF+g2auKX3P0yqx+MJC6oVt6sB5k+CchS6Ob0qvH0YIhuUk1eYr7ktsIpY+albCqE80/FVQGV190PmiAg==} peerDependencies: @@ -2292,6 +2401,43 @@ snapshots: '@pinojs/redact@0.4.0': {} + '@radix-ui/react-icons@1.3.2(react@19.2.6)': + dependencies: + react: 19.2.6 + + '@react-spring/animated@9.7.5(react@19.2.6)': + dependencies: + '@react-spring/shared': 9.7.5(react@19.2.6) + '@react-spring/types': 9.7.5 + react: 19.2.6 + + '@react-spring/core@9.7.5(react@19.2.6)': + dependencies: + '@react-spring/animated': 9.7.5(react@19.2.6) + '@react-spring/shared': 9.7.5(react@19.2.6) + '@react-spring/types': 9.7.5 + react: 19.2.6 + + '@react-spring/rafz@9.7.5': {} + + '@react-spring/shared@9.7.5(react@19.2.6)': + dependencies: + '@react-spring/rafz': 9.7.5 + '@react-spring/types': 9.7.5 + react: 19.2.6 + + '@react-spring/three@9.7.5(@react-three/fiber@9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0))(react@19.2.6)(three@0.184.0)': + dependencies: + '@react-spring/animated': 9.7.5(react@19.2.6) + '@react-spring/core': 9.7.5(react@19.2.6) + '@react-spring/shared': 9.7.5(react@19.2.6) + '@react-spring/types': 9.7.5 + '@react-three/fiber': 9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0) + react: 19.2.6 + three: 0.184.0 + + '@react-spring/types@9.7.5': {} + '@react-three/drei@10.7.7(@react-three/fiber@9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0))(@types/react@19.2.15)(@types/three@0.184.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0)': dependencies: '@babel/runtime': 7.29.7 @@ -2325,6 +2471,41 @@ snapshots: - '@types/three' - immer + '@react-three/drei@9.122.0(@react-three/fiber@9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0))(@types/react@19.2.15)(@types/three@0.184.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0)(use-sync-external-store@1.6.0(react@19.2.6))': + dependencies: + '@babel/runtime': 7.29.7 + '@mediapipe/tasks-vision': 0.10.17 + '@monogrid/gainmap-js': 3.4.0(three@0.184.0) + '@react-spring/three': 9.7.5(@react-three/fiber@9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0))(react@19.2.6)(three@0.184.0) + '@react-three/fiber': 9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0) + '@use-gesture/react': 10.3.1(react@19.2.6) + camera-controls: 2.10.1(three@0.184.0) + cross-env: 7.0.3 + detect-gpu: 5.0.70 + glsl-noise: 0.0.0 + hls.js: 1.6.16 + maath: 0.10.8(@types/three@0.184.1)(three@0.184.0) + meshline: 3.3.1(three@0.184.0) + react: 19.2.6 + react-composer: 5.0.3(react@19.2.6) + stats-gl: 2.4.2(@types/three@0.184.1)(three@0.184.0) + stats.js: 0.17.0 + suspend-react: 0.1.3(react@19.2.6) + three: 0.184.0 + three-mesh-bvh: 0.7.8(three@0.184.0) + three-stdlib: 2.36.1(three@0.184.0) + troika-three-text: 0.52.4(three@0.184.0) + tunnel-rat: 0.1.2(@types/react@19.2.15)(react@19.2.6) + utility-types: 3.11.0 + zustand: 5.0.14(@types/react@19.2.15)(react@19.2.6)(use-sync-external-store@1.6.0(react@19.2.6)) + optionalDependencies: + react-dom: 19.2.6(react@19.2.6) + transitivePeerDependencies: + - '@types/react' + - '@types/three' + - immer + - use-sync-external-store + '@react-three/fiber@9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0)': dependencies: '@babel/runtime': 7.29.7 @@ -2405,6 +2586,10 @@ snapshots: '@rolldown/pluginutils@1.0.1': {} + '@stitches/react@1.2.8(react@19.2.6)': + dependencies: + react: 19.2.6 + '@tabler/icons-react@3.44.0(react@19.2.6)': dependencies: '@tabler/icons': 3.44.0 @@ -2556,6 +2741,12 @@ snapshots: '@use-gesture/core': 10.3.1 react: 19.2.6 + '@utsubo/events@0.1.7(react@19.2.6)': + dependencies: + eventemitter3: 4.0.7 + optionalDependencies: + react: 19.2.6 + '@vitejs/plugin-react@6.0.2(vite@8.0.14(@types/node@24.12.4)(esbuild@0.28.0)(sass@1.100.0)(tsx@4.22.4))': dependencies: '@rolldown/pluginutils': 1.0.1 @@ -2632,6 +2823,10 @@ snapshots: base64-js: 1.5.1 ieee754: 1.2.1 + camera-controls@2.10.1(three@0.184.0): + dependencies: + three: 0.184.0 + camera-controls@3.1.2(three@0.184.0): dependencies: three: 0.184.0 @@ -2802,6 +2997,8 @@ snapshots: esutils@2.0.3: {} + eventemitter3@4.0.7: {} + fast-decode-uri-component@1.0.1: {} fast-deep-equal@3.1.3: {} @@ -3070,6 +3267,10 @@ snapshots: dependencies: p-locate: 5.0.0 + loose-envify@1.4.0: + dependencies: + js-tokens: 4.0.0 + lru-cache@10.4.3: {} lru-cache@5.1.1: @@ -3120,6 +3321,8 @@ snapshots: nwsapi@2.2.23: {} + object-assign@4.1.1: {} + on-exit-leak-free@2.1.2: {} optionator@0.9.4: @@ -3190,15 +3393,46 @@ snapshots: is-promise: 2.2.2 lie: 3.3.0 + prop-types@15.8.1: + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + react-is: 16.13.1 + punycode@2.3.1: {} quick-format-unescaped@4.0.4: {} + r3f-perf@7.2.3(@react-three/fiber@9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0))(@types/react@19.2.15)(@types/three@0.184.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0)(use-sync-external-store@1.6.0(react@19.2.6)): + dependencies: + '@radix-ui/react-icons': 1.3.2(react@19.2.6) + '@react-three/drei': 9.122.0(@react-three/fiber@9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0))(@types/react@19.2.15)(@types/three@0.184.1)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0)(use-sync-external-store@1.6.0(react@19.2.6)) + '@stitches/react': 1.2.8(react@19.2.6) + '@utsubo/events': 0.1.7(react@19.2.6) + react: 19.2.6 + three: 0.184.0 + zustand: 4.5.7(@types/react@19.2.15)(react@19.2.6) + optionalDependencies: + '@react-three/fiber': 9.6.1(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(three@0.184.0) + react-dom: 19.2.6(react@19.2.6) + transitivePeerDependencies: + - '@types/react' + - '@types/three' + - immer + - use-sync-external-store + + react-composer@5.0.3(react@19.2.6): + dependencies: + prop-types: 15.8.1 + react: 19.2.6 + react-dom@19.2.6(react@19.2.6): dependencies: react: 19.2.6 scheduler: 0.27.0 + react-is@16.13.1: {} + react-router-dom@7.16.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6): dependencies: react: 19.2.6 @@ -3319,6 +3553,10 @@ snapshots: dependencies: real-require: 1.0.0 + three-mesh-bvh@0.7.8(three@0.184.0): + dependencies: + three: 0.184.0 + three-mesh-bvh@0.8.3(three@0.184.0): dependencies: three: 0.184.0 diff --git a/webclient/package.json b/webclient/package.json index d33a2ad..d2b0c86 100644 --- a/webclient/package.json +++ b/webclient/package.json @@ -19,6 +19,7 @@ "mobx-react-lite": "^4.1.1", "mobx-utils": "^6.1.1", "nipplejs": "^1.0.4", + "r3f-perf": "^7.2.3", "react": "^19.2.6", "react-dom": "^19.2.6", "react-router-dom": "^7.16.0", diff --git a/webclient/src/components/GameView.tsx b/webclient/src/components/GameView.tsx index e6c0e32..0434063 100644 --- a/webclient/src/components/GameView.tsx +++ b/webclient/src/components/GameView.tsx @@ -1,6 +1,5 @@ import { observer } from "mobx-react-lite"; import { SceneView } from "./SceneView"; -import { DebugLabelsView } from "./DebugLabelsView"; import { state } from "../state"; import { useFrame } from "@react-three/fiber"; import { Suspense } from "react"; @@ -18,8 +17,8 @@ export const GameView = observer(function () { return (<> - - + + ); diff --git a/webclient/src/components/LeftPanel.tsx b/webclient/src/components/LeftPanel.tsx index 22a38c3..e442b6b 100644 --- a/webclient/src/components/LeftPanel.tsx +++ b/webclient/src/components/LeftPanel.tsx @@ -1,5 +1,4 @@ import { observer } from "mobx-react-lite"; -import { RenderInfoView } from "./RenderInfoView"; import { MenuView } from "./MenuView"; import { state } from "../state"; import { Panel } from "./Panel"; @@ -23,6 +22,5 @@ export const LeftPanel = observer(function () {
{/* */} -
; }); diff --git a/webclient/src/components/RenderInfoView.tsx b/webclient/src/components/RenderInfoView.tsx deleted file mode 100644 index 89c45c3..0000000 --- a/webclient/src/components/RenderInfoView.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { useEffect, useRef } from "react"; -import { observer } from "mobx-react-lite"; -import { state } from "../state"; -import { chartRef } from "./chartRef"; - -export const RenderInfoView = observer(function () { - const info = state.renderInfo; - const containerRef = useRef(null); - - useEffect(() => { - const el = containerRef.current; - if (!el) -return; - el.appendChild(chartRef.current); - return () => { el.removeChild(chartRef.current); }; - }, []); - - return <> -
- {info != null && ( -
- draw: {info.calls} - tri: {info.triangles} - shaders: {info.shaders} - geometries: {info.geometries} - textures: {info.textures} -
- )} - ; -}); diff --git a/webclient/src/components/SceneEditorView.tsx b/webclient/src/components/SceneEditorView.tsx index d887425..0b3546c 100644 --- a/webclient/src/components/SceneEditorView.tsx +++ b/webclient/src/components/SceneEditorView.tsx @@ -59,7 +59,7 @@ export const SceneEditorView = observer(function () { infiniteGrid /> - + ); diff --git a/webclient/src/components/SceneView.tsx b/webclient/src/components/SceneView.tsx index 4db751e..bd15947 100644 --- a/webclient/src/components/SceneView.tsx +++ b/webclient/src/components/SceneView.tsx @@ -7,6 +7,7 @@ import { DebugLabelsView } from "./DebugLabelsView"; type SceneViewProps = { scene: RuntimeScene, editMode?: boolean; + debugOverlay?: boolean; } export const SceneView = observer(function (props: SceneViewProps) { @@ -20,6 +21,6 @@ export const SceneView = observer(function (props: SceneViewProps) { : )) } - + {props.debugOverlay && } ); }); diff --git a/webclient/src/components/ThreeView.tsx b/webclient/src/components/ThreeView.tsx index 4002645..919d3d6 100644 --- a/webclient/src/components/ThreeView.tsx +++ b/webclient/src/components/ThreeView.tsx @@ -1,17 +1,27 @@ +import { Perf } from 'r3f-perf' import { Canvas } from '@react-three/fiber'; -import { KeyboardControls, Stats } from '@react-three/drei'; -import { chartRef } from './chartRef'; +import { KeyboardControls } from '@react-three/drei'; import { observer } from 'mobx-react-lite'; import { state } from '../state'; import { GameView } from './GameView'; import { SceneEditorView } from './SceneEditorView'; import { JoystickView } from './JoystickView'; -import type { RefObject } from 'react'; +import { useEffect } from 'react'; +import { runInAction } from 'mobx'; import { IconPlayerPlayFilled, IconPlayerPauseFilled, IconPlayerStopFilled, IconPlayerSkipForwardFilled } from '@tabler/icons-react'; -import { RenderInfoUpdater } from './renderInfo'; export const ThreeView = observer(function () { const isGame = !!state.game; + + useEffect(() => { + const onKeyDown = (e: KeyboardEvent) => { + if (e.code === 'Backquote' && state.game) { + runInAction(() => { state.game!.debugOverlay = !state.game!.debugOverlay; }); + } + }; + window.addEventListener('keydown', onKeyDown); + return () => window.removeEventListener('keydown', onKeyDown); + }, []); return ( state.worldEditor.resetSelection()} > - } /> - + {isGame ? : } {isGame && } diff --git a/webclient/src/components/chartRef.ts b/webclient/src/components/chartRef.ts deleted file mode 100644 index 48919aa..0000000 --- a/webclient/src/components/chartRef.ts +++ /dev/null @@ -1 +0,0 @@ -export const chartRef = { current: document.createElement('span') }; diff --git a/webclient/src/components/renderInfo.tsx b/webclient/src/components/renderInfo.tsx deleted file mode 100644 index d9ff861..0000000 --- a/webclient/src/components/renderInfo.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { useFrame, useThree } from "@react-three/fiber"; -import { state } from "../state"; -import { action } from "mobx"; - -export function RenderInfoUpdater() { - const { gl } = useThree(); - useFrame(action(() => { - const { calls, triangles } = gl.info.render; - const shaders = gl.info.programs?.length ?? 0; - const { geometries, textures } = gl.info.memory; - state.setRenderInfo({ - calls, - triangles, - shaders, - geometries, - textures, - }); - })); - return null; -} diff --git a/webclient/src/state/gameState.ts b/webclient/src/state/gameState.ts index 62040aa..9faada7 100644 --- a/webclient/src/state/gameState.ts +++ b/webclient/src/state/gameState.ts @@ -10,6 +10,7 @@ export class GameState { private readonly world: WorldState; public isPaused: boolean = false; + public debugOverlay: boolean = false; public time: number = 0; public isFirstTick: boolean; public scene: RuntimeGameScene;