Add Function Paramater names

documentation/changeLogs.md

@@ -5,6 +5,7 @@
 Please, find below the per release summary of the contribution added to the project per version. Each of the listed versions is having its corresponding tag in the repo.
 
 ## v0.9.33
+* Add [GL Function Param Names](https://github.com/BabylonJS/Spector.js/issues/56)
 * Add Parallel Shader Compilation Throttling
 * Add [Texture Storei Information](https://github.com/BabylonJS/Spector.js/issues/80)
 * Add [MCP Support](https://github.com/BabylonJS/Spector.js/pull/345)

src/embeddedFrontend/react/ResultView/ReactResultView.ts

@@ -17,6 +17,7 @@ import {
 import { ResultViewRoot } from "./ResultViewRoot";
 import { ResultViewContext } from "./ResultViewContext";
 import { MDNCommandLinkHelper } from "../shared/mdnCommandLinkHelper";
+import { WebGLParameterNameHelper } from "../shared/webglParameterNameHelper";
 
 // ─── Default (empty) state ───────────────────────────────────────────────────
 
@@ -197,6 +198,11 @@ function buildCommandDetail(
         if (key === "VisualState" || key === "result") {
             continue;
         }
+        // Relabel raw argument indices with their WebGL parameter names (#56).
+        if (key === "commandArguments" && Array.isArray(command.commandArguments)) {
+            buildCommandArgumentsGroup(items, command.name, command.commandArguments as any[]);
+            continue;
+        }
         if (typeof command[key] === "object") {
             buildJSONGroup(items, key, command[key], "");
         }
@@ -205,6 +211,31 @@ function buildCommandDetail(
     return items;
 }
 
+/**
+ * Build the "commandArguments" group, labelling each argument with its WebGL
+ * parameter name (e.g. `index`, `size`, `type`) when known, falling back to the
+ * numeric index for unknown functions or extra arguments.
+ *
+ * Fallback labels for unknown functions stay purely numeric so iteration order
+ * is preserved; when names are present, unnamed trailing arguments use an
+ * `argN` label (non-numeric) so the named keys keep their signature order.
+ */
+function buildCommandArgumentsGroup(
+    parentChildren: JSONRenderItem[],
+    functionName: string,
+    args: any[],
+): void {
+    const names = WebGLParameterNameHelper.getNames(functionName, args.length);
+    const labelled: { [key: string]: any } = {};
+    for (let i = 0; i < args.length; i++) {
+        const label = names
+            ? (i < names.length ? names[i] : "arg" + i)
+            : String(i);
+        labelled[label] = args[i];
+    }
+    buildJSONGroup(parentChildren, "commandArguments", labelled, "");
+}
+
 // ─── Adapter class ──────────────────────────────────────────────────────────
 
 /**

src/embeddedFrontend/react/shared/webglParameterNameHelper.ts

@@ -0,0 +1,71 @@
+import { webglParameterNames } from "./webglParameterNames";
+
+/**
+ * Resolves human-readable parameter names for WebGL / WebGL2 command arguments.
+ *
+ * The underlying data ({@link webglParameterNames}) is generated from
+ * TypeScript's `lib.dom.d.ts` and maps each function to one or more overload
+ * signatures (parameter-name lists). This helper picks the signature that best
+ * matches the number of arguments actually captured.
+ */
+export class WebGLParameterNameHelper {
+    /**
+     * Return the parameter-name list that best matches a call with `argCount`
+     * arguments, or `null` when the function is unknown (e.g. an extension
+     * method not present in the DOM typings).
+     *
+     * Resolution order:
+     *  1. An overload whose arity exactly matches `argCount`.
+     *  2. Otherwise the shortest overload that still covers every argument.
+     *  3. Otherwise the longest known overload.
+     */
+    public static getNames(functionName: string, argCount: number): string[] | null {
+        const overloads = webglParameterNames[functionName];
+        if (!overloads || overloads.length === 0) {
+            return null;
+        }
+
+        // 1. Exact arity match.
+        for (const overload of overloads) {
+            if (overload.length === argCount) {
+                return overload;
+            }
+        }
+
+        // 2. Shortest overload that covers all provided arguments.
+        let cover: string[] | null = null;
+        for (const overload of overloads) {
+            if (overload.length >= argCount && (cover === null || overload.length < cover.length)) {
+                cover = overload;
+            }
+        }
+        if (cover) {
+            return cover;
+        }
+
+        // 3. Longest known overload.
+        let longest = overloads[0];
+        for (const overload of overloads) {
+            if (overload.length > longest.length) {
+                longest = overload;
+            }
+        }
+        return longest;
+    }
+
+    /**
+     * Return the parameter name for a single argument, or `null` when unknown.
+     *
+     * @param functionName - The WebGL command name (e.g. `"vertexAttribPointer"`).
+     * @param index        - Zero-based argument index.
+     * @param argCount     - Total number of arguments in the captured call,
+     *                       used to disambiguate overloads.
+     */
+    public static getName(functionName: string, index: number, argCount: number): string | null {
+        const names = WebGLParameterNameHelper.getNames(functionName, argCount);
+        if (names && index >= 0 && index < names.length) {
+            return names[index];
+        }
+        return null;
+    }
+}