feat: devtools renderer improvements (#614)

* feat: renderer programs when selecting scene on devtools * feat: renderer.info * chore: fix lint * docs: devtools update * chore: fix lint issues
Tresjs · Apr 18, 2024 · cdf6b6f · cdf6b6f
1 parent 1ad7b8b
commit cdf6b6f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 30 deletions.
diff --git a/docs/debug/devtools.md b/docs/debug/devtools.md
@@ -24,3 +24,9 @@ From <Badge text="^3.7.0" /> we are introducing the TresJS Devtools, a customize
 ![](/devtools-scene-inspector.png)
 
 Enjoy the new Devtools and let us know what you think! 🎉
+
+## Renderer info <Badge text="^4.0.0" />
+
+From `v4` it's possible to see the renderer information in the Devtools when inspecting the root object (Scene). This is useful to know what renderer is being used and its properties including the programs (shaders) and the capabilities of the renderer.
+
+![](/devtools-v4.png)
diff --git a/docs/public/devtools-v4.png b/docs/public/devtools-v4.png
diff --git a/src/devtools/plugin.ts b/src/devtools/plugin.ts
@@ -91,14 +91,14 @@ const createNode = (object: TresObject): SceneGraphObject => {
   return node
 }
 
-function buildGraph(object: TresObject, node: SceneGraphObject) {
+function buildGraph(object: TresObject, node: SceneGraphObject, filter: string = '') {
   object.children.forEach((child: TresObject) => {
-    if (child.type === 'HightlightMesh') {
-      return
-    }
+    if (child.type === 'HightlightMesh') { return }
+    if (filter && !child.type.includes(filter) && !child.name.includes(filter)) { return }
+
     const childNode = createNode(child)
     node.children.push(childNode)
-    buildGraph(child, childNode)
+    buildGraph(child, childNode, filter)
   })
 }
 
@@ -146,33 +146,9 @@ export function registerTresDevtools(app: DevtoolsApp, tres: TresContext) {
         if (payload.inspectorId === INSPECTOR_ID) {
           // Your logic here
           const root = createNode(tres.scene.value)
-          buildGraph(tres.scene.value, root)
+          buildGraph(tres.scene.value, root, payload.filter)
           state.sceneGraph = root
           payload.rootNodes = [root]
-          /*  payload.rootNodes = [
-            {
-              id: 'root',
-              label: 'Root ',
-              children: [
-                {
-                  id: 'child',
-                  label: `Child ${payload.filter}`,
-                  tags: [
-                    {
-                      label: 'active',
-                      textColor: 0x000000,
-                      backgroundColor: 0xFF984F,
-                    },
-                    {
-                      label: 'test',
-                      textColor: 0xffffff,
-                      backgroundColor: 0x000000,
-                    },
-                  ],
-                },
-              ],
-            },
-          ] */
         }
       })
       let highlightMesh: Mesh | null = null
@@ -282,6 +258,26 @@ export function registerTresDevtools(app: DevtoolsApp, tres: TresContext) {
               },
             ],
           }
+
+          if (instance.isScene) {
+            payload.state.info = {
+              memory: calculateMemoryUsage(instance),
+              objects: instance.children.length,
+              calls: tres.renderer.value.info.render.calls,
+              triangles: tres.renderer.value.info.render.triangles,
+              points: tres.renderer.value.info.render.points,
+              lines: tres.renderer.value.info.render.lines,
+            }
+            payload.state.programs = tres.renderer.value.info.programs?.map(program => ({
+              key: program.name || program.type,
+              value: {
+                ...program,
+                vertexShader: program.vertexShader,
+                attributes: program.getAttributes(),
+                uniforms: program.getUniforms(),
+              },
+            }))
+          }
         }
       })