Validate shader vertex attributes are available in vertex buffers (#7431)

* Validate shader vertex attributes are available in vertex buffers

* only in debug build

---------

Co-authored-by: Martin Valigursky <[email protected]>

Author: mvaligursky

src/platform/graphics/graphics-device.js

@@ -18,6 +18,7 @@ import { ScopeSpace } from './scope-space.js';
 import { VertexBuffer } from './vertex-buffer.js';
 import { VertexFormat } from './vertex-format.js';
 import { StencilParameters } from './stencil-parameters.js';
+import { DebugGraphics } from './debug-graphics.js';
 
 /**
  * @import { Compute } from './compute.js'
@@ -30,6 +31,8 @@ import { StencilParameters } from './stencil-parameters.js';
  * @import { Texture } from './texture.js'
  */
 
+const _tempSet = new Set();
+
 /**
  * The graphics device manages the underlying graphics context. It is responsible for submitting
  * render state changes and graphics primitives to the hardware. A graphics device is tied to a
@@ -1011,6 +1014,38 @@ class GraphicsDevice extends EventHandler {
         }
         return undefined;
     }
+
+    /**
+     * Validate that all attributes required by the shader are present in the currently assigned
+     * vertex buffers.
+     *
+     * @param {Shader} shader - The shader to validate.
+     * @param {VertexFormat} vb0Format - The format of the first vertex buffer.
+     * @param {VertexFormat} vb1Format - The format of the second vertex buffer.
+     * @protected
+     */
+    validateAttributes(shader, vb0Format, vb1Format) {
+
+        Debug.call(() => {
+            // add all attribute names from vertex formats to the set
+            _tempSet.clear();
+            vb0Format?.elements.forEach(element => _tempSet.add(element.name));
+            vb1Format?.elements.forEach(element => _tempSet.add(element.name));
+
+            // this is an object, we need to iterator over keys and make sure the value is in the temp set
+            const attributes = shader.definition.attributes;
+            for (const name in attributes) {
+                const value = attributes[name];
+                if (!_tempSet.has(value)) {
+                    Debug.errorOnce(`Attribute [${name}: ${value}] required by the shader is not present in the currently assigned vertex buffers, while rendering [${DebugGraphics.toString()}]`, {
+                        shader,
+                        vb0Format,
+                        vb1Format
+                    });
+                }
+            }
+        });
+    }
 }
 
 export { GraphicsDevice };

src/platform/graphics/webgl/webgl-graphics-device.js

@@ -1729,6 +1729,8 @@ class WebglGraphicsDevice extends GraphicsDevice {
         const samplers = shader.impl.samplers;
         const uniforms = shader.impl.uniforms;
 
+        Debug.call(() => this.validateAttributes(this.shader, this.vertexBuffers[0]?.format, this.vertexBuffers[1]?.format));
+
         // vertex buffers
         if (!keepBuffers) {
             this.setBuffers();

src/platform/graphics/webgpu/webgpu-graphics-device.js

@@ -564,6 +564,8 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
                 }
             }
 
+            Debug.call(() => this.validateAttributes(this.shader, vb0?.format, vb1?.format));
+
             // render pipeline
             const pipeline = this.renderPipeline.get(primitive, vb0?.format, vb1?.format, this.shader, this.renderTarget,
                 this.bindGroupFormats, this.blendState, this.depthState, this.cullMode,