@gnsx/three 0.186.4 → 0.186.5

package/src/nodes/display/ComplexityDebug.js

@@ -4,7 +4,7 @@
 
 import Node from '../core/Node.js';
 import { float, vec3, vec4, If, Fn } from '../tsl/TSLCore.js';
-import { fract, min, mix } from '../math/MathNode.js';
+import { fract, min, mix, round } from '../math/MathNode.js';
 
 /**
  * Shaded output. No complexity debug view.
@@ -27,30 +27,57 @@ export const DEBUG_VIEW_SHADER_COMPLEXITY = 'shaderComplexity';
  */
 export const DEBUG_VIEW_LIGHTING_COMPLEXITY = 'lightingComplexity';
 
+/**
+ * Per-pixel overdraw heatmap. Each fragment that passes the depth test adds one.
+ * This is the portable stand-in for Unreal's 2×2 quad-coverage count.
+ *
+ * @type {string}
+ */
+export const DEBUG_VIEW_QUAD_OVERDRAW = 'quadOverdraw';
+
+/**
+ * Shader cost multiplied by the number of fragments that shaded the pixel, then the shader-complexity ramp.
+ * One opaque surface matches {@link DEBUG_VIEW_SHADER_COMPLEXITY}. Each extra overlapping fragment scales the summed cost.
+ * WebGPU cannot count wasted lanes in a 2×2 quad, so the count is fragments that pass the depth test.
+ *
+ * @type {string}
+ */
+export const DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS = 'shaderComplexityAndQuads';
+
 /**
  * Proxy budget that fills the shader-complexity ramp.
- * A plain lit material stays in the green stops. Transmission plus several
- * texture samples climbs toward red.
+ * Unlit and basic stay green. Phong and standard move through yellow into red.
+ * Transmission plus several texture samples climbs toward white.
  *
  * @type {number}
  */
 export const DEFAULT_SHADER_COMPLEXITY_BUDGET = 800;
 
-/** @type {number} */
-export const SHADER_COMPLEXITY_BASE_UNLIT = 20;
+/**
+ * Overlapping fragments that fill the quad-overdraw ramp.
+ * Unreal's stair reaches white at ten layers (`1 / 16` stored, then scaled by 1.6).
+ *
+ * @type {number}
+ */
+export const DEFAULT_QUAD_OVERDRAW_BUDGET = 10;
 
-/** @type {number} */
-export const SHADER_COMPLEXITY_BASE_LIT = 40;
+/**
+ * Storage scale for the overdraw count in {@link DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS}.
+ * Each fragment adds `1 / scale`, so an 8-bit target can hold this many layers.
+ * The output pass multiplies that channel back to a count. Half-float targets hold the same count exactly.
+ *
+ * @type {number}
+ */
+export const SHADER_COMPLEXITY_QUAD_COUNT_SCALE = 16;
 
-/** @type {number} */
+/**
+ * Added for each fragment texture sample. Lighting-model costs are returned
+ * directly by {@link NodeMaterial#getShaderComplexity}.
+ *
+ * @type {number}
+ */
 export const SHADER_COMPLEXITY_TEXTURE_COST = 16;
 
-/** @type {number} */
-export const SHADER_COMPLEXITY_FEATURE_COST = 30;
-
-/** @type {number} */
-export const SHADER_COMPLEXITY_TRANSMISSION_COST = 60;
-
 /**
  * Attenuation above this counts as a light that shades the pixel.
  *
@@ -83,6 +110,26 @@ const SHADER_COMPLEXITY_COLORS = [
 	[ 1.0, 0.9, 0.9 ]
 ];
 
+/**
+ * Unreal `QuadComplexityColors` from `BaseEngine.ini`.
+ * Sampled as a stair: one overlapping fragment is one stop.
+ *
+ * @type {Array<Array<number>>}
+ */
+const QUAD_COMPLEXITY_COLORS = [
+	[ 0.0, 0.0, 0.0 ],
+	[ 0.0, 0.0, 0.4 ],
+	[ 0.0, 0.3, 1.0 ],
+	[ 0.0, 0.7, 0.4 ],
+	[ 0.0, 1.0, 0.0 ],
+	[ 0.8, 0.8, 0.0 ],
+	[ 1.0, 0.3, 0.0 ],
+	[ 0.7, 0.0, 0.0 ],
+	[ 0.5, 0.0, 0.5 ],
+	[ 0.7, 0.3, 0.7 ],
+	[ 1.0, 0.9, 0.9 ]
+];
+
 /**
  * Unreal `LightComplexityColors` from `BaseEngine.ini`.
  *
@@ -141,6 +188,42 @@ const colorizeLinear = ( cost, colors ) => {
  */
 export const colorizeLightComplexity = ( cost ) => colorizeLinear( cost, LIGHT_COMPLEXITY_COLORS );
 
+/**
+ * Unreal's stair sample for quad overdraw (`CS_STAIR`).
+ * `cost` is the accumulated fragment count divided by the budget.
+ *
+ * @param {Node<float>} cost - Overdraw count divided by the budget.
+ * @return {Node<vec3>} The ramp color.
+ */
+export const colorizeQuadOverdraw = ( cost ) => {
+
+	const steps = QUAD_COMPLEXITY_COLORS.length - 1;
+	const index = round( cost.clamp( 0, 1 ).mul( steps ) );
+
+	let color = rgb( QUAD_COMPLEXITY_COLORS, 0 );
+
+	for ( let i = 0; i <= steps; i ++ ) {
+
+		color = index.equal( float( i ) ).select( rgb( QUAD_COMPLEXITY_COLORS, i ), color );
+
+	}
+
+	return color;
+
+};
+
+/**
+ * Views that add a scalar per fragment, then colorize that sum in the output pass.
+ *
+ * @param {string} view - `renderer.debug.view`.
+ * @return {boolean} `true` when the view accumulates.
+ */
+export function debugViewAccumulates( view ) {
+
+	return view === DEBUG_VIEW_SHADER_COMPLEXITY || view === DEBUG_VIEW_QUAD_OVERDRAW || view === DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS;
+
+}
+
 /**
  * Unreal's nonlinear shader-complexity ramp (`ColorizeComplexity`).
  * The first third of the normalized cost spreads across the first seven stops.
@@ -234,44 +317,83 @@ class ShaderComplexityRatioNode extends Node {
 }
 
 /**
- * Static fragment proxy for a material. Texture samples are counted later, during generation.
+ * Replaces the shaded color with `vec4(cost / budget, 0, 0, 1)`.
+ * The real graph is still generated so texture samples are counted first.
  *
- * @param {NodeMaterial} material - The material being built.
- * @return {number} The base cost, excluding texture samples.
+ * @param {Node} resultNode - The material's shaded output.
+ * @return {Node<vec4>} The complexity ratio in the red channel.
  */
-export function getShaderComplexityBase( material ) {
+export function shaderComplexityOutput( resultNode ) {
 
-	let cost = material.lights === true ? SHADER_COMPLEXITY_BASE_LIT : SHADER_COMPLEXITY_BASE_UNLIT;
+	// Generate the shaded graph first so texture samples are counted, then
+	// replace the color. A bypass of a value node emits a bare expression
+	// statement, which WGSL rejects.
+	const shaded = vec4( resultNode ).toVar();
 
-	if ( material.useClearcoat === true ) cost += SHADER_COMPLEXITY_FEATURE_COST;
+	const ratio = new ShaderComplexityRatioNode();
 
-	if ( material.useSheen === true ) cost += SHADER_COMPLEXITY_FEATURE_COST;
+	return vec4( ratio, 0, 0, 1 ).add( shaded.mul( 0 ) );
 
-	if ( material.useIridescence === true ) cost += SHADER_COMPLEXITY_FEATURE_COST;
+}
 
-	if ( material.useAnisotropy === true ) cost += SHADER_COMPLEXITY_FEATURE_COST;
+/**
+ * Same cost as {@link shaderComplexityOutput}, plus one overdraw step in green.
+ * The output pass multiplies red by the accumulated green count.
+ *
+ * @param {Node} resultNode - The material's shaded output.
+ * @return {Node<vec4>} Cost ratio in red, one scaled fragment in green.
+ */
+export function shaderComplexityAndQuadsOutput( resultNode ) {
 
-	if ( material.useTransmission === true ) cost += SHADER_COMPLEXITY_TRANSMISSION_COST;
+	const shaded = vec4( resultNode ).toVar();
+	const ratio = new ShaderComplexityRatioNode();
+	const step = float( 1 / SHADER_COMPLEXITY_QUAD_COUNT_SCALE );
 
-	return cost;
+	return vec4( ratio, step, 0, 1 ).add( shaded.mul( 0 ) );
 
 }
 
 /**
- * Replaces the shaded color with `vec4(cost / budget, 0, 0, 1)`.
- * The real graph is still generated so texture samples are counted first.
+ * Reads `1 / quadOverdrawBudget` at code-generation time.
+ *
+ * @augments Node
+ */
+class QuadOverdrawRatioNode extends Node {
+
+	static get type() {
+
+		return 'QuadOverdrawRatioNode';
+
+	}
+
+	constructor() {
+
+		super( 'float' );
+
+	}
+
+	generate( builder ) {
+
+		const budget = builder.renderer.debug.quadOverdrawBudget;
+		const safeBudget = ( typeof budget === 'number' && budget > 0 ) ? budget : 1;
+
+		return ( 1 / safeBudget ).toFixed( 6 );
+
+	}
+
+}
+
+/**
+ * Replaces the shaded color with `vec4(1 / budget, 0, 0, 1)`.
+ * The real graph is still generated so clipped fragments are not counted.
  *
  * @param {Node} resultNode - The material's shaded output.
- * @return {Node<vec4>} The complexity ratio in the red channel.
+ * @return {Node<vec4>} One overdraw step in the red channel.
  */
-export function shaderComplexityOutput( resultNode ) {
+export function quadOverdrawOutput( resultNode ) {
 
-	// Generate the shaded graph first so texture samples are counted, then
-	// replace the color. A bypass of a value node emits a bare expression
-	// statement, which WGSL rejects.
 	const shaded = vec4( resultNode ).toVar();
-
-	const ratio = new ShaderComplexityRatioNode();
+	const ratio = new QuadOverdrawRatioNode();
 
 	return vec4( ratio, 0, 0, 1 ).add( shaded.mul( 0 ) );
 

package/src/nodes/display/DrawCallDebug.js

@@ -0,0 +1,118 @@
+// WITH_GENESYS
+// Draw call coloration. One stable diffuse color per submitted draw, then lit.
+// !WITH_GENESYS
+
+import { Color } from '../../math/Color.js';
+import { diffuseColor, diffuseContribution, metalness, roughness, specularColor, specularColorBlended, specularF90, clearcoat, sheen, iridescence, anisotropy, transmission, retroreflectivity } from '../core/PropertyNode.js';
+import { uniform } from '../core/UniformNode.js';
+import { float, vec3 } from '../tsl/TSLCore.js';
+
+/**
+ * Draw call coloration. Each submitted draw gets one diffuse color. An instanced mesh is one draw.
+ * The color is lit, so lights and shadows still show. Unlit materials stay flat.
+ *
+ * @type {string}
+ */
+export const DEBUG_VIEW_DRAW_CALL = 'drawCall';
+
+/**
+ * Golden-ratio step. Sequential object ids land on opposite sides of the hue wheel.
+ *
+ * @type {number}
+ */
+const DRAW_CALL_HUE_STEP = 0.618033988749895;
+
+/**
+ * Saturation of a draw color. High enough that neighboring hues stay apart after lighting.
+ *
+ * @type {number}
+ */
+const DRAW_CALL_SATURATION = 0.85;
+
+/**
+ * Value of a draw color. Lighting and shadows darken it from here.
+ *
+ * @type {number}
+ */
+const DRAW_CALL_VALUE = 0.92;
+
+/**
+ * Writes a saturated color for this draw into `color`.
+ * Hue walks the wheel by the golden ratio, so consecutive objects do not share a tint.
+ * Instances of one mesh share the object id, so they share the color.
+ *
+ * @param {Color} color - The uniform color, updated in place.
+ * @param {Object3D} object - The drawn object.
+ * @param {Material} material - The drawn material. A multi-material group is its own draw.
+ * @return {Color} `color`.
+ */
+function writeDrawCallColor( color, object, material ) {
+
+	const hue = ( ( object.id + material.id * 64 ) * DRAW_CALL_HUE_STEP ) % 1;
+	const s = DRAW_CALL_SATURATION;
+	const v = DRAW_CALL_VALUE;
+	const sector = hue * 6;
+	const i = Math.floor( sector );
+	const f = sector - i;
+	const p = v * ( 1 - s );
+	const q = v * ( 1 - f * s );
+	const t = v * ( 1 - ( 1 - f ) * s );
+
+	switch ( i % 6 ) {
+
+		case 0: return color.setRGB( v, t, p );
+		case 1: return color.setRGB( q, v, p );
+		case 2: return color.setRGB( p, v, t );
+		case 3: return color.setRGB( p, q, v );
+		case 4: return color.setRGB( t, p, v );
+		default: return color.setRGB( v, p, q );
+
+	}
+
+}
+
+/**
+ * Replaces albedo with the draw color after the material has written its channels.
+ * Lit materials become a matte dielectric in that color. Unlit materials become flat.
+ * The color is an object uniform, so meshes that share a material still differ.
+ *
+ * @param {NodeBuilder} builder - The current node builder.
+ */
+export function applyDrawCallDebug( builder ) {
+
+	const material = builder.material;
+	const colorNode = uniform( new Color() ).onObjectUpdate( ( { object, material: drawnMaterial }, self ) => {
+
+		if ( object === null || drawnMaterial === null ) return;
+
+		return writeDrawCallColor( self.value, object, drawnMaterial );
+
+	} );
+
+	diffuseColor.rgb.assign( colorNode );
+
+	if ( material.lights !== true ) return;
+
+	metalness.assign( float( 0 ) );
+	diffuseContribution.assign( colorNode );
+	roughness.assign( float( 1 ) );
+	specularColor.assign( vec3( 0 ) );
+	specularColorBlended.assign( vec3( 0 ) );
+	specularF90.assign( float( 0 ) );
+
+	// Ambient occlusion belonged to the original material.
+	builder.context.ambientOcclusion = null;
+
+	if ( material.useClearcoat === true ) clearcoat.assign( float( 0 ) );
+
+	if ( material.useSheen === true ) sheen.assign( vec3( 0 ) );
+
+	if ( material.useIridescence === true ) iridescence.assign( float( 0 ) );
+
+	if ( material.useAnisotropy === true ) anisotropy.assign( float( 0 ) );
+
+	if ( material.useTransmission === true ) transmission.assign( float( 0 ) );
+
+	if ( material.useRetroreflection === true ) retroreflectivity.assign( float( 0 ) );
+
+}

package/src/nodes/display/LightingDebug.js

@@ -0,0 +1,108 @@
+// WITH_GENESYS
+// Lighting only and detail lighting. Both replace the shaded albedo with a flat gray.
+// !WITH_GENESYS
+
+import { diffuseColor, diffuseContribution, metalness, roughness, specularColor, specularColorBlended, specularF90, clearcoat, sheen, iridescence, anisotropy, transmission, retroreflectivity } from '../core/PropertyNode.js';
+import { normalViewGeometry } from '../accessors/Normal.js';
+import { negateOnBackSide } from './FrontFacingNode.js';
+import { float, vec3, Fn } from '../tsl/TSLCore.js';
+
+/**
+ * Lighting only. Flat gray, no specular, geometry normals. Material detail is dropped.
+ *
+ * @type {string}
+ */
+export const DEBUG_VIEW_LIGHTING_ONLY = 'lightingOnly';
+
+/**
+ * Detail lighting. Flat gray and a constant specular, with normal maps and roughness kept.
+ *
+ * @type {string}
+ */
+export const DEBUG_VIEW_DETAIL_LIGHTING = 'detailLighting';
+
+/**
+ * Neutral albedo shared by both views. Matches Unreal's `LightingOnlyBrightness`.
+ *
+ * @type {number}
+ */
+const LIGHTING_ONLY_BRIGHTNESS = 0.3;
+
+/**
+ * Specular color used by detail lighting. Unreal writes `0.1` into the specular override.
+ *
+ * @type {number}
+ */
+const DETAIL_LIGHTING_SPECULAR = 0.1;
+
+/**
+ * Geometry normal for lighting only, so normal maps and `normalNode` do not shade the surface.
+ *
+ * @type {Node<vec3>}
+ */
+export const lightingOnlyNormal = /*@__PURE__*/ Fn( ( builder ) => {
+
+	let node = normalViewGeometry;
+
+	if ( builder.isFlatShading() !== true ) {
+
+		node = negateOnBackSide( node );
+
+	}
+
+	return node;
+
+}, 'vec3' );
+
+/**
+ * Replaces albedo and specular after the material has written its channels.
+ * Lit materials become a dielectric gray. Unlit materials become flat gray.
+ *
+ * @param {NodeBuilder} builder - The current node builder.
+ * @param {string} view - `renderer.debug.view`.
+ */
+export function applyLightingDebug( builder, view ) {
+
+	const material = builder.material;
+	const gray = vec3( LIGHTING_ONLY_BRIGHTNESS );
+
+	diffuseColor.rgb.assign( gray );
+
+	if ( material.lights !== true ) return;
+
+	metalness.assign( float( 0 ) );
+	diffuseContribution.assign( gray );
+
+	if ( view === DEBUG_VIEW_LIGHTING_ONLY ) {
+
+		roughness.assign( float( 1 ) );
+		specularColor.assign( vec3( 0 ) );
+		specularColorBlended.assign( vec3( 0 ) );
+		specularF90.assign( float( 0 ) );
+
+		// Ambient occlusion was stored for the lighting model. Lighting only has no material.
+		builder.context.ambientOcclusion = null;
+
+		if ( material.useClearcoat === true ) clearcoat.assign( float( 0 ) );
+
+		if ( material.useSheen === true ) sheen.assign( vec3( 0 ) );
+
+		if ( material.useIridescence === true ) iridescence.assign( float( 0 ) );
+
+		if ( material.useAnisotropy === true ) anisotropy.assign( float( 0 ) );
+
+		if ( material.useTransmission === true ) transmission.assign( float( 0 ) );
+
+		if ( material.useRetroreflection === true ) retroreflectivity.assign( float( 0 ) );
+
+	} else {
+
+		const specular = vec3( DETAIL_LIGHTING_SPECULAR );
+
+		specularColor.assign( specular );
+		specularColorBlended.assign( specular );
+		specularF90.assign( float( 1 ) );
+
+	}
+
+}

package/src/renderers/common/Background.js

@@ -7,6 +7,9 @@ import { Mesh } from '../../objects/Mesh.js';
 import { SphereGeometry } from '../../geometries/SphereGeometry.js';
 import { BackSide } from '../../constants.js';
 import { error } from '../../utils.js';
+// WITH_GENESYS
+import { debugViewAccumulates } from '../../nodes/display/ComplexityDebug.js';
+// !WITH_GENESYS
 
 const _clearColor = /*@__PURE__*/ new Color4();
 
@@ -193,7 +196,7 @@ class Background extends DataMap {
 
 			// WITH_GENESYS
 			// The background is depth-tested off, so additive shader complexity would add it to every pixel.
-			if ( renderer.debug.view !== 'shaderComplexity' ) {
+			if ( debugViewAccumulates( renderer.debug.view ) !== true ) {
 
 				renderList.unshift( backgroundMesh, backgroundMesh.geometry, backgroundMesh.material, 0, 0, null, null );
 
@@ -224,7 +227,7 @@ class Background extends DataMap {
 		//
 
 		// WITH_GENESYS
-		if ( renderer.debug.view === 'shaderComplexity' ) {
+		if ( debugViewAccumulates( renderer.debug.view ) ) {
 
 			_clearColor.set( 0, 0, 0, 1 );
 

package/src/renderers/common/RenderObject.js

@@ -952,7 +952,7 @@ class RenderObject {
 
 		// WITH_GENESYS
 		// hash() xors each argument as a number, so a view name has to be hashed first.
-		cacheKey = hash( cacheKey, hashString( this.renderer.debug.view ), this.renderer.debug.shaderComplexityBudget );
+		cacheKey = hash( cacheKey, hashString( this.renderer.debug.view ), hashString( this.renderer.debug.buffer ), this.renderer.debug.shaderComplexityBudget, this.renderer.debug.quadOverdrawBudget );
 		// !WITH_GENESYS
 
 		return cacheKey;

package/src/renderers/common/Renderer.js

@@ -37,7 +37,8 @@ import { float, vec3, vec4, Fn } from '../../nodes/tsl/TSLCore.js';
 import { detachRendererReference } from '../../nodes/accessors/RendererReferenceNode.js';
 import { toneMappingExposure } from '../../nodes/display/ToneMappingNode.js';
 import { ProfilerService } from '../../profiler/ProfilerService.js';
-import { DEBUG_VIEW_LIGHTING_COMPLEXITY, DEBUG_VIEW_NONE, DEBUG_VIEW_SHADER_COMPLEXITY, DEFAULT_SHADER_COMPLEXITY_BUDGET } from '../../nodes/display/ComplexityDebug.js';
+import { DEBUG_VIEW_LIGHTING_COMPLEXITY, DEBUG_VIEW_NONE, DEBUG_VIEW_QUAD_OVERDRAW, DEBUG_VIEW_SHADER_COMPLEXITY, DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS, DEFAULT_QUAD_OVERDRAW_BUDGET, DEFAULT_SHADER_COMPLEXITY_BUDGET, debugViewAccumulates } from '../../nodes/display/ComplexityDebug.js';
+import { DEBUG_VIEW_BUFFER, DEFAULT_BUFFER } from '../../nodes/display/BufferDebug.js';
 // !WITH_GENESYS
 import { reference } from '../../nodes/accessors/ReferenceNode.js';
 import { highpModelNormalViewMatrix, highpModelViewMatrix } from '../../nodes/accessors/ModelNode.js';
@@ -744,8 +745,10 @@ class Renderer {
 		 * @property {?Function} onNodeBuilderCreated - A callback function that is executed after a node builder has been created and before it is built.
 		 * @property {?Function} onShaderError - A callback function that is executed when a shader error happens. Only supported with WebGL 2 right now.
 		 * @property {Function} getShaderAsync - Allows the get the raw shader code for the given scene, camera and 3D object.
-		 * @property {string} view - Debug view. `shaderComplexity` and `lightingComplexity` replace the shaded color with a heatmap.
+		 * @property {string} view - Debug view. `shaderComplexity`, `lightingComplexity`, `quadOverdraw`, and `shaderComplexityAndQuads` replace the shaded color with a heatmap. `shaderComplexityAndQuads` multiplies the shader cost by the overdraw count. `bufferVisualization` shows one material channel. `lightingOnly` and `detailLighting` light a flat gray surface. `drawCall` lights each submitted draw with its own diffuse color.
+		 * @property {string} buffer - Channel drawn by `bufferVisualization`: `baseColor`, `worldNormal`, `roughness`, `metallic`, `ambientOcclusion`, or `emissive`.
 		 * @property {number} shaderComplexityBudget - Proxy budget that fills the shader-complexity ramp.
+		 * @property {number} quadOverdrawBudget - Overlapping fragments that fill the quad-overdraw ramp.
 		 */
 
 		/**
@@ -762,7 +765,9 @@ class Renderer {
 			onShaderError: null,
 			// WITH_GENESYS
 			view: DEBUG_VIEW_NONE,
+			buffer: DEFAULT_BUFFER,
 			shaderComplexityBudget: DEFAULT_SHADER_COMPLEXITY_BUDGET,
+			quadOverdrawBudget: DEFAULT_QUAD_OVERDRAW_BUDGET,
 			// !WITH_GENESYS
 			getShaderAsync: async ( scene, camera, object ) => {
 
@@ -2699,10 +2704,8 @@ class Renderer {
 		const useColorSpace = this.currentColorSpace !== ColorManagement.workingColorSpace;
 
 		// WITH_GENESYS
-		// Shader complexity writes a scalar into an intermediate target, then the output pass colorizes it.
-		const shaderComplexity = this.debug.view === DEBUG_VIEW_SHADER_COMPLEXITY;
-
-		return useToneMapping || useColorSpace || shaderComplexity;
+		// Accumulating views write a scalar into an intermediate target, then the output pass colorizes it.
+		return useToneMapping || useColorSpace || debugViewAccumulates( this.debug.view );
 		// !WITH_GENESYS
 		// return useToneMapping || useColorSpace;
 
@@ -2758,7 +2761,7 @@ class Renderer {
 		// WITH_GENESYS
 		const view = this.debug.view;
 
-		if ( view === DEBUG_VIEW_SHADER_COMPLEXITY || view === DEBUG_VIEW_LIGHTING_COMPLEXITY ) {
+		if ( view === DEBUG_VIEW_SHADER_COMPLEXITY || view === DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS || view === DEBUG_VIEW_LIGHTING_COMPLEXITY || view === DEBUG_VIEW_QUAD_OVERDRAW || view === DEBUG_VIEW_BUFFER ) {
 
 			return NoToneMapping;
 

package/src/renderers/common/nodes/NodeManager.js

@@ -10,7 +10,7 @@ import { builtin } from '../../../nodes/accessors/BuiltinNode.js';
 import { CubeUVReflectionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping, NoToneMapping } from '../../../constants.js';
 // WITH_GENESYS
 import { vec4 } from '../../../nodes/tsl/TSLCore.js';
-import { colorizeShaderComplexity, DEBUG_VIEW_SHADER_COMPLEXITY } from '../../../nodes/display/ComplexityDebug.js';
+import { colorizeQuadOverdraw, colorizeShaderComplexity, DEBUG_VIEW_QUAD_OVERDRAW, DEBUG_VIEW_SHADER_COMPLEXITY, DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS, SHADER_COMPLEXITY_QUAD_COUNT_SCALE } from '../../../nodes/display/ComplexityDebug.js';
 // !WITH_GENESYS
 import { hashArray } from '../../../nodes/core/NodeUtils.js';
 import { error } from '../../../utils.js';
@@ -1035,9 +1035,19 @@ class NodeManager extends DataMap {
 		}
 
 		// WITH_GENESYS
-		if ( renderer.debug.view === DEBUG_VIEW_SHADER_COMPLEXITY ) {
+		if ( renderer.debug.view === DEBUG_VIEW_SHADER_COMPLEXITY || renderer.debug.view === DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS ) {
 
-			return vec4( colorizeShaderComplexity( sampled.r ), 1 ).renderOutput( NoToneMapping, renderer.currentColorSpace );
+			const complexity = renderer.debug.view === DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS
+				? sampled.r.mul( sampled.g ).mul( SHADER_COMPLEXITY_QUAD_COUNT_SCALE )
+				: sampled.r;
+
+			return vec4( colorizeShaderComplexity( complexity ), 1 ).renderOutput( NoToneMapping, renderer.currentColorSpace );
+
+		}
+
+		if ( renderer.debug.view === DEBUG_VIEW_QUAD_OVERDRAW ) {
+
+			return vec4( colorizeQuadOverdraw( sampled.r ), 1 ).renderOutput( NoToneMapping, renderer.currentColorSpace );
 
 		}
 		// !WITH_GENESYS

package/src/renderers/webgl-fallback/utils/WebGLState.js

@@ -11,6 +11,9 @@ import {
 import { Color } from '../../../math/Color.js';
 import { Vector4 } from '../../../math/Vector4.js';
 import { error, ReversedDepthFuncs, warnOnce } from '../../../utils.js';
+// WITH_GENESYS
+import { debugViewAccumulates } from '../../../nodes/display/ComplexityDebug.js';
+// !WITH_GENESYS
 
 let equationToGL, factorToGL;
 
@@ -936,7 +939,7 @@ class WebGLState {
 
 		// WITH_GENESYS
 		// WebGL has no cached render pipeline. One+One is applied on each draw instead.
-		if ( this.backend.renderer.debug.view === 'shaderComplexity' && material.isShadowPassMaterial !== true && this.backend.renderer.isOutputTarget !== true ) {
+		if ( debugViewAccumulates( this.backend.renderer.debug.view ) && material.isShadowPassMaterial !== true && this.backend.renderer.isOutputTarget !== true ) {
 
 			this.setBlending( AdditiveBlending, AddEquation, OneFactor, OneFactor, AddEquation, OneFactor, OneFactor, material.blendColor, material.blendAlpha, true );
 

package/src/renderers/webgpu/utils/WebGPUPipelineUtils.js

@@ -15,6 +15,9 @@ import {
 } from '../../../constants.js';
 
 import { error, ReversedDepthFuncs, warn, warnOnce } from '../../../utils.js';
+// WITH_GENESYS
+import { debugViewAccumulates } from '../../../nodes/display/ComplexityDebug.js';
+// !WITH_GENESYS
 
 import GPUComputePipelineDescriptor from '../descriptors/GPUComputePipelineDescriptor.js';
 import GPUPipelineLayoutDescriptor from '../descriptors/GPUPipelineLayoutDescriptor.js';
@@ -108,7 +111,7 @@ class WebGPUPipelineUtils {
 
 		// WITH_GENESYS
 		// Accumulate shader cost with One+One. Opaque materials normally disable blending.
-		if ( backend.renderer.debug.view === 'shaderComplexity' && material.isShadowPassMaterial !== true && backend.renderer.isOutputTarget !== true ) {
+		if ( debugViewAccumulates( backend.renderer.debug.view ) && material.isShadowPassMaterial !== true && backend.renderer.isOutputTarget !== true ) {
 
 			materialBlending = {
 				color: {