@gnsx/three 0.186.5 → 0.186.7

package/examples/jsm/inspector/tabs/Settings.js

@@ -143,14 +143,17 @@ class Settings extends Parameters {
 		this._bufferState = bufferState;
 		this._debugViewControl = modesGroup.add( debugViewState, 'view', {
 			'Shaded': 'none',
+			'Draw Call': 'drawCall',
 			'Shader Complexity': 'shaderComplexity',
 			'Lighting Complexity': 'lightingComplexity',
-			'Quad Overdraw': 'quadOverdraw',
-			'Shader Complexity & Quads': 'shaderComplexityAndQuads',
-			'Buffer Visualization': 'bufferVisualization',
+			'Shadow Caster': 'shadowCaster',
+			'Double Side': 'doubleSide',
+			'Overdraw': 'overdraw',
+			'Shader Complexity & Overdraw': 'shaderComplexityAndOverdraw',
 			'Lighting Only': 'lightingOnly',
 			'Detail Lighting': 'detailLighting',
-			'Draw Call': 'drawCall'
+			'Front/Back Face': 'frontBackFace',
+			'Buffer Visualization': 'bufferVisualization',
 		} ).name( 'Debug View' ).onChange( ( view ) => {
 
 			const renderer = this.inspector.getRenderer();
@@ -161,7 +164,7 @@ class Settings extends Parameters {
 			this._syncBufferRow( view );
 			window.dispatchEvent( new Event( 'genesys-debug-view' ) );
 
-		} ).info( 'Shaded color, a cost heatmap, per-pixel overdraw, shader cost times overdraw, one material channel, lighting on a flat gray surface, or one lit color per draw. The Overdraw toggle above draws on top when both are enabled.' );
+		} ).info( 'Shaded color, a cost heatmap, per-pixel overdraw, shader cost times overdraw, one material channel, lighting on a flat gray surface, one lit color per draw, a tint for the front and back of each face, green and gray for objects that do and do not cast shadows, or red where a double-sided back face is hidden. The Overdraw toggle above draws on top when both are enabled.' );
 
 		this._bufferControl = modesGroup.add( bufferState, 'buffer', {
 			'Base Color': 'baseColor',
@@ -192,7 +195,7 @@ class Settings extends Parameters {
 		const renderer = this.inspector.getRenderer();
 		const view = renderer !== null && renderer.debug !== undefined ? renderer.debug.view : null;
 
-		if ( view === 'none' || view === 'shaderComplexity' || view === 'lightingComplexity' || view === 'quadOverdraw' || view === 'shaderComplexityAndQuads' || view === 'bufferVisualization' || view === 'lightingOnly' || view === 'detailLighting' || view === 'drawCall' ) {
+		if ( view === 'none' || view === 'shaderComplexity' || view === 'lightingComplexity' || view === 'overdraw' || view === 'shaderComplexityAndOverdraw' || view === 'bufferVisualization' || view === 'lightingOnly' || view === 'detailLighting' || view === 'drawCall' || view === 'frontBackFace' || view === 'shadowCaster' || view === 'doubleSide' ) {
 
 			if ( this._debugViewState.view !== view ) {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnsx/three",
-  "version": "0.186.5",
+  "version": "0.186.7",
   "description": "JavaScript 3D library",
   "type": "module",
   "main": "./build/three.cjs",

package/src/materials/nodes/NodeMaterial.js

@@ -26,10 +26,33 @@ import { vertexColor } from '../../nodes/accessors/VertexColorNode.js';
 import { premultiplyAlpha } from '../../nodes/display/PremultiplyAlphaFunctions.js';
 import { subBuild } from '../../nodes/core/SubBuildNode.js';
 // WITH_GENESYS
-import { DEBUG_VIEW_LIGHTING_COMPLEXITY, DEBUG_VIEW_QUAD_OVERDRAW, DEBUG_VIEW_SHADER_COMPLEXITY, DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS, quadOverdrawOutput, shaderComplexityAndQuadsOutput, shaderComplexityOutput } from '../../nodes/display/ComplexityDebug.js';
+import { DEBUG_VIEW_LIGHTING_COMPLEXITY, DEBUG_VIEW_SHADER_COMPLEXITY, DEBUG_VIEW_SHADER_COMPLEXITY_AND_OVERDRAW, debugDrawAccumulates, quadOverdrawOutput, shaderComplexityAndOverdrawOutput, shaderComplexityOutput } from '../../nodes/display/ComplexityDebug.js';
+import { mrt } from '../../nodes/core/MRTNode.js';
 import { DEBUG_VIEW_BUFFER, assignBufferDefaults, bufferVisualizationOutput } from '../../nodes/display/BufferDebug.js';
 import { DEBUG_VIEW_DETAIL_LIGHTING, DEBUG_VIEW_LIGHTING_ONLY, applyLightingDebug, lightingOnlyNormal } from '../../nodes/display/LightingDebug.js';
 import { DEBUG_VIEW_DRAW_CALL, applyDrawCallDebug } from '../../nodes/display/DrawCallDebug.js';
+import { DEBUG_VIEW_FRONT_BACK_FACE, applyFrontBackFaceDebug } from '../../nodes/display/FrontBackFaceDebug.js';
+import { DEBUG_VIEW_SHADOW_CASTER, applyShadowCasterDebug } from '../../nodes/display/ShadowCasterDebug.js';
+import { DEBUG_VIEW_DOUBLE_SIDE, applyDoubleSideDebug } from '../../nodes/display/DoubleSideDebug.js';
+
+/**
+ * Replaces the color a material writes with a debug output. With MRT, only the `output`
+ * attachment is replaced so the other attachments keep their members. Converting the
+ * whole MRT struct to a color leaves WGSL with an empty output struct.
+ *
+ * @param {Node} resultNode - The material's fragment result, possibly an MRT node.
+ * @param {function(Node): Node} createOutput - Builds the debug color from the shaded color.
+ * @return {Node} The fragment result with the debug color in place.
+ */
+function replaceColorOutput( resultNode, createOutput ) {
+
+	if ( resultNode.isMRTNode !== true ) return createOutput( resultNode );
+
+	if ( resultNode.has( 'output' ) !== true ) return resultNode;
+
+	return resultNode.merge( mrt( { output: createOutput( resultNode.get( 'output' ) ) } ) );
+
+}
 // !WITH_GENESYS
 
 /**
@@ -548,11 +571,23 @@ class NodeMaterial extends Material {
 			// for detail lighting and can be replaced for lighting only.
 			if ( ( renderer.debug.view === DEBUG_VIEW_LIGHTING_ONLY || renderer.debug.view === DEBUG_VIEW_DETAIL_LIGHTING ) && this.isShadowPassMaterial !== true ) {
 
-				applyLightingDebug( builder, renderer.debug.view );
+				applyLightingDebug( builder, this, renderer.debug.view );
 
 			} else if ( renderer.debug.view === DEBUG_VIEW_DRAW_CALL && this.isShadowPassMaterial !== true ) {
 
-				applyDrawCallDebug( builder );
+				applyDrawCallDebug( builder, this );
+
+			} else if ( renderer.debug.view === DEBUG_VIEW_FRONT_BACK_FACE && this.isShadowPassMaterial !== true ) {
+
+				applyFrontBackFaceDebug( builder, this );
+
+			} else if ( renderer.debug.view === DEBUG_VIEW_SHADOW_CASTER && this.isShadowPassMaterial !== true ) {
+
+				applyShadowCasterDebug( builder, this );
+
+			} else if ( renderer.debug.view === DEBUG_VIEW_DOUBLE_SIDE && this.isShadowPassMaterial !== true ) {
+
+				applyDoubleSideDebug( builder, this );
 
 			}
 			// !WITH_GENESYS
@@ -627,27 +662,32 @@ class NodeMaterial extends Material {
 		}
 
 		// WITH_GENESYS
-		// The screen output pass colorizes the accumulated ratio. Wrapping that pass
-		// would replace the heatmap with this material's own constant cost.
-		if ( renderer.debug.view === DEBUG_VIEW_SHADER_COMPLEXITY && this.isShadowPassMaterial !== true && renderer.isOutputTarget !== true ) {
+		// The screen output pass colorizes the accumulated ratio. Wrapping that pass, or a
+		// post-processing quad that copies the scene target, would replace the heatmap with
+		// that quad's own constant cost.
+		if ( debugDrawAccumulates( renderer, this, builder.object ) ) {
 
-			builder.shaderComplexityBase = this.getShaderComplexity();
-			resultNode = shaderComplexityOutput( resultNode );
+			if ( renderer.debug.view === DEBUG_VIEW_SHADER_COMPLEXITY ) {
 
-		} else if ( renderer.debug.view === DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS && this.isShadowPassMaterial !== true && renderer.isOutputTarget !== true ) {
+				builder.shaderComplexityBase = this.getShaderComplexity();
+				resultNode = replaceColorOutput( resultNode, shaderComplexityOutput );
 
-			builder.shaderComplexityBase = this.getShaderComplexity();
-			resultNode = shaderComplexityAndQuadsOutput( resultNode );
+			} else if ( renderer.debug.view === DEBUG_VIEW_SHADER_COMPLEXITY_AND_OVERDRAW ) {
 
-		} else if ( renderer.debug.view === DEBUG_VIEW_QUAD_OVERDRAW && this.isShadowPassMaterial !== true && renderer.isOutputTarget !== true ) {
+				builder.shaderComplexityBase = this.getShaderComplexity();
+				resultNode = replaceColorOutput( resultNode, shaderComplexityAndOverdrawOutput );
 
-			resultNode = quadOverdrawOutput( resultNode );
+			} else {
+
+				resultNode = replaceColorOutput( resultNode, quadOverdrawOutput );
+
+			}
 
 		} else if ( renderer.debug.view === DEBUG_VIEW_BUFFER && this.isShadowPassMaterial !== true && this.fragmentNode === null ) {
 
 			// The fullscreen output pass sets fragmentNode. Scene materials do not, including
 			// when the scene is drawn straight to the canvas.
-			resultNode = bufferVisualizationOutput( renderer.debug.buffer );
+			resultNode = replaceColorOutput( resultNode, () => bufferVisualizationOutput( renderer.debug.buffer ) );
 
 		}
 		// !WITH_GENESYS
@@ -1007,7 +1047,7 @@ class NodeMaterial extends Material {
 	setupNormal( builder ) {
 
 		// WITH_GENESYS
-		if ( ( builder.renderer.debug.view === DEBUG_VIEW_LIGHTING_ONLY || builder.renderer.debug.view === DEBUG_VIEW_DRAW_CALL ) && this.isShadowPassMaterial !== true && this.fragmentNode === null ) {
+		if ( ( builder.renderer.debug.view === DEBUG_VIEW_LIGHTING_ONLY || builder.renderer.debug.view === DEBUG_VIEW_DRAW_CALL || builder.renderer.debug.view === DEBUG_VIEW_FRONT_BACK_FACE || builder.renderer.debug.view === DEBUG_VIEW_SHADOW_CASTER || builder.renderer.debug.view === DEBUG_VIEW_DOUBLE_SIDE ) && this.isShadowPassMaterial !== true && this.fragmentNode === null ) {
 
 			return lightingOnlyNormal();
 
@@ -1212,7 +1252,7 @@ class NodeMaterial extends Material {
 			// WITH_GENESYS
 			// Lighting only and draw call substitute a plain lit material, so emissive is dropped.
 			// Detail lighting keeps it.
-			if ( ( builder.renderer.debug.view === DEBUG_VIEW_LIGHTING_ONLY || builder.renderer.debug.view === DEBUG_VIEW_DRAW_CALL ) && this.isShadowPassMaterial !== true ) {
+			if ( ( builder.renderer.debug.view === DEBUG_VIEW_LIGHTING_ONLY || builder.renderer.debug.view === DEBUG_VIEW_DRAW_CALL || builder.renderer.debug.view === DEBUG_VIEW_FRONT_BACK_FACE || builder.renderer.debug.view === DEBUG_VIEW_SHADOW_CASTER || builder.renderer.debug.view === DEBUG_VIEW_DOUBLE_SIDE ) && this.isShadowPassMaterial !== true ) {
 
 				return outgoingLightNode;
 

package/src/nodes/display/ComplexityDebug.js

@@ -5,6 +5,7 @@
 import Node from '../core/Node.js';
 import { float, vec3, vec4, If, Fn } from '../tsl/TSLCore.js';
 import { fract, min, mix, round } from '../math/MathNode.js';
+import { DEBUG_VIEW_BUFFER } from './BufferDebug.js';
 
 /**
  * Shaded output. No complexity debug view.
@@ -14,7 +15,8 @@ import { fract, min, mix, round } from '../math/MathNode.js';
 export const DEBUG_VIEW_NONE = 'none';
 
 /**
- * Material-cost heatmap. Overlapping draws accumulate, then a fullscreen pass applies the ramp.
+ * Material-cost heatmap. The nearest opaque surface wins, translucent draws add on top,
+ * then a fullscreen pass applies the ramp.
  *
  * @type {string}
  */
@@ -33,16 +35,16 @@ export const DEBUG_VIEW_LIGHTING_COMPLEXITY = 'lightingComplexity';
  *
  * @type {string}
  */
-export const DEBUG_VIEW_QUAD_OVERDRAW = 'quadOverdraw';
+export const DEBUG_VIEW_OVERDRAW = 'overdraw';
 
 /**
  * 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.
+ * One opaque surface matches {@link DEBUG_VIEW_SHADER_COMPLEXITY}. Each extra translucent 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';
+export const DEBUG_VIEW_SHADER_COMPLEXITY_AND_OVERDRAW = 'shaderComplexityAndOverdraw';
 
 /**
  * Proxy budget that fills the shader-complexity ramp.
@@ -62,7 +64,7 @@ export const DEFAULT_SHADER_COMPLEXITY_BUDGET = 800;
 export const DEFAULT_QUAD_OVERDRAW_BUDGET = 10;
 
 /**
- * Storage scale for the overdraw count in {@link DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS}.
+ * Storage scale for the overdraw count in {@link DEBUG_VIEW_SHADER_COMPLEXITY_AND_OVERDRAW}.
  * 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.
  *
@@ -220,7 +222,54 @@ export const colorizeQuadOverdraw = ( cost ) => {
  */
 export function debugViewAccumulates( view ) {
 
-	return view === DEBUG_VIEW_SHADER_COMPLEXITY || view === DEBUG_VIEW_QUAD_OVERDRAW || view === DEBUG_VIEW_SHADER_COMPLEXITY_AND_QUADS;
+	return view === DEBUG_VIEW_SHADER_COMPLEXITY || view === DEBUG_VIEW_OVERDRAW || view === DEBUG_VIEW_SHADER_COMPLEXITY_AND_OVERDRAW;
+
+}
+
+/**
+ * Whether a draw adds its scalar to the accumulating target instead of shading normally.
+ * Shadow passes, draws to the screen, and fullscreen quads draw normally. A post-processing
+ * quad copies the accumulated scene target, so its own cost must not replace it.
+ *
+ * @param {Renderer} renderer - The renderer.
+ * @param {Material} material - The material being drawn.
+ * @param {?Object3D} object - The object being drawn.
+ * @return {boolean} `true` when the draw accumulates.
+ */
+export function debugDrawAccumulates( renderer, material, object ) {
+
+	return debugViewAccumulates( renderer.debug.view ) &&
+		material.isShadowPassMaterial !== true &&
+		renderer.isOutputTarget !== true &&
+		( object === null || object === undefined || object.isQuadMesh !== true );
+
+}
+
+/**
+ * Whether an accumulating draw replaces the stored cost instead of adding to it.
+ * Three.js has no depth pre-pass, so adding every opaque fragment counts hidden surfaces
+ * and changes as the camera reorders draws. Replacing, with the material's own depth test
+ * and depth write, leaves the nearest opaque surface. Translucent draws and quad overdraw still add.
+ *
+ * @param {string} view - `renderer.debug.view`.
+ * @param {Material} material - The material being drawn.
+ * @return {boolean} `true` when the draw replaces the stored cost.
+ */
+export function debugDrawReplacesCost( view, material ) {
+
+	return ( view === DEBUG_VIEW_SHADER_COMPLEXITY || view === DEBUG_VIEW_SHADER_COMPLEXITY_AND_OVERDRAW ) && material.transparent !== true;
+
+}
+
+/**
+ * Views that output data or a heatmap, so tone mapping would distort them.
+ *
+ * @param {string} view - `renderer.debug.view`.
+ * @return {boolean} `true` when the view is drawn without tone mapping.
+ */
+export function debugViewSkipsToneMapping( view ) {
+
+	return debugViewAccumulates( view ) || view === DEBUG_VIEW_LIGHTING_COMPLEXITY || view === DEBUG_VIEW_BUFFER;
 
 }
 
@@ -343,7 +392,7 @@ export function shaderComplexityOutput( resultNode ) {
  * @param {Node} resultNode - The material's shaded output.
  * @return {Node<vec4>} Cost ratio in red, one scaled fragment in green.
  */
-export function shaderComplexityAndQuadsOutput( resultNode ) {
+export function shaderComplexityAndOverdrawOutput( resultNode ) {
 
 	const shaded = vec4( resultNode ).toVar();
 	const ratio = new ShaderComplexityRatioNode();

package/src/nodes/display/DoubleSideDebug.js

@@ -0,0 +1,152 @@
+// WITH_GENESYS
+// Double sided. Gray is a single-sided surface or the front of a double-sided one.
+// Blue is a double-sided back face you can see. Red is a double-sided back face hidden behind the front.
+// !WITH_GENESYS
+
+import Node from '../core/Node.js';
+import { nodeImmutable } from '../tsl/TSLBase.js';
+import { select } from '../math/ConditionalNode.js';
+import { diffuseColor, diffuseContribution, metalness, roughness, specularColor, specularColorBlended, specularF90, clearcoat, sheen, iridescence, anisotropy, transmission, retroreflectivity } from '../core/PropertyNode.js';
+import { float, vec3 } from '../tsl/TSLCore.js';
+import { DoubleSide } from '../../constants.js';
+
+/**
+ * Double sided. A single-sided material is gray. A double-sided front face is gray.
+ * A double-sided back face that is the nearest surface is blue. A later pass paints
+ * a hidden double-sided back face red over the front.
+ *
+ * @type {string}
+ */
+export const DEBUG_VIEW_DOUBLE_SIDE = 'doubleSide';
+
+/**
+ * Rasterizer front face, ignoring the material side shortcut in {@link frontFacing}.
+ */
+class GeometricFrontFacingNode extends Node {
+
+	static get type() {
+
+		return 'GeometricFrontFacingNode';
+
+	}
+
+	constructor() {
+
+		super( 'bool' );
+
+	}
+
+	generate( builder ) {
+
+		if ( builder.shaderStage !== 'fragment' ) return 'true';
+
+		return builder.getFrontFacing();
+
+	}
+
+}
+
+const geometricFrontFacing = /*@__PURE__*/ nodeImmutable( GeometricFrontFacingNode );
+
+const hideCache = new WeakMap();
+
+/**
+ * A flat card or wall has normals that all point the same way, so its back face is the same
+ * surface. A box or a closed shell has normals that face each other, so one side can hide the other.
+ *
+ * @param {BufferGeometry} geometry - The mesh geometry.
+ * @return {boolean} `true` when some normals oppose the first one.
+ */
+export function meshCanHideOwnBack( geometry ) {
+
+	const normal = geometry.getAttribute( 'normal' );
+	const cached = hideCache.get( geometry );
+
+	if ( cached !== undefined && cached.version === geometry.version ) return cached.hides;
+
+	let hides = false;
+
+	if ( normal !== undefined && normal.count > 1 ) {
+
+		const ax = normal.getX( 0 );
+		const ay = normal.getY( 0 );
+		const az = normal.getZ( 0 );
+		const step = Math.max( 1, Math.floor( normal.count / 64 ) );
+
+		for ( let i = step; i < normal.count; i += step ) {
+
+			if ( ax * normal.getX( i ) + ay * normal.getY( i ) + az * normal.getZ( i ) < 0.25 ) {
+
+				hides = true;
+				break;
+
+			}
+
+		}
+
+	}
+
+	hideCache.set( geometry, { version: geometry.version, hides } );
+
+	return hides;
+
+}
+
+const FRONT_COLOR = /*@__PURE__*/ vec3( 0.5, 0.5, 0.5 );
+const BACK_COLOR = /*@__PURE__*/ vec3( 0.25, 0.45, 0.85 );
+const HIDDEN_COLOR = /*@__PURE__*/ vec3( 0.85, 0.12, 0.1 );
+
+/**
+ * Makes a lit material a matte dielectric in the debug color. An unlit material stays flat.
+ *
+ * @param {NodeBuilder} builder - The current node builder.
+ * @param {NodeMaterial} material - The node material being set up.
+ * @param {Node} colorNode - The albedo written for this fragment.
+ */
+function assignLitColor( builder, material, colorNode ) {
+
+	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 ) );
+
+	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 ) );
+
+}
+
+/**
+ * Replaces albedo after the material has written its channels.
+ * The hidden pass forces red. The first pass uses gray, or blue on a visible double-sided back face.
+ *
+ * @param {NodeBuilder} builder - The current node builder.
+ * @param {NodeMaterial} material - The node material being set up. `builder.material` can be the
+ * source material of a converted one, such as a glTF `MeshStandardMaterial`.
+ */
+export function applyDoubleSideDebug( builder, material ) {
+
+	const hidden = builder.renderer.debug.doubleSideHidden === true;
+	const visibleBack = builder.renderer.debug.doubleSideBack === true;
+	const doubleSided = material.side === DoubleSide;
+	const colorNode = hidden ? HIDDEN_COLOR : ( visibleBack ? BACK_COLOR : ( doubleSided ? select( geometricFrontFacing, FRONT_COLOR, BACK_COLOR ) : FRONT_COLOR ) );
+
+	assignLitColor( builder, material, colorNode );
+
+}

package/src/nodes/display/DrawCallDebug.js

@@ -77,10 +77,11 @@ function writeDrawCallColor( color, object, material ) {
  * The color is an object uniform, so meshes that share a material still differ.
  *
  * @param {NodeBuilder} builder - The current node builder.
+ * @param {NodeMaterial} material - The node material being set up. `builder.material` can be the
+ * source material of a converted one, such as a glTF `MeshStandardMaterial`.
  */
-export function applyDrawCallDebug( builder ) {
+export function applyDrawCallDebug( builder, material ) {
 
-	const material = builder.material;
 	const colorNode = uniform( new Color() ).onObjectUpdate( ( { object, material: drawnMaterial }, self ) => {
 
 		if ( object === null || drawnMaterial === null ) return;

package/src/nodes/display/FrontBackFaceDebug.js

@@ -0,0 +1,88 @@
+// WITH_GENESYS
+// Front/back face. Both windings are drawn. The side facing the camera uses one color, the other side another.
+// !WITH_GENESYS
+
+import Node from '../core/Node.js';
+import { nodeImmutable } from '../tsl/TSLBase.js';
+import { select } from '../math/ConditionalNode.js';
+import { diffuseColor, diffuseContribution, metalness, roughness, specularColor, specularColorBlended, specularF90, clearcoat, sheen, iridescence, anisotropy, transmission, retroreflectivity } from '../core/PropertyNode.js';
+import { float, vec3 } from '../tsl/TSLCore.js';
+
+/**
+ * Front/back face. Culling is off. A fragment whose winding faces the camera is one color.
+ * The opposite winding is another. Depth still hides a face behind the shell.
+ *
+ * @type {string}
+ */
+export const DEBUG_VIEW_FRONT_BACK_FACE = 'frontBackFace';
+
+/**
+ * Rasterizer front face, ignoring the material side shortcut in {@link frontFacing}.
+ * `BackSide` materials otherwise report every fragment as back facing.
+ */
+class GeometricFrontFacingNode extends Node {
+
+	static get type() {
+
+		return 'GeometricFrontFacingNode';
+
+	}
+
+	constructor() {
+
+		super( 'bool' );
+
+	}
+
+	generate( builder ) {
+
+		if ( builder.shaderStage !== 'fragment' ) return 'true';
+
+		return builder.getFrontFacing();
+
+	}
+
+}
+
+const geometricFrontFacing = /*@__PURE__*/ nodeImmutable( GeometricFrontFacingNode );
+
+const FRONT_COLOR = /*@__PURE__*/ vec3( 0.72, 0.70, 0.66 );
+const BACK_COLOR = /*@__PURE__*/ vec3( 0.25, 0.45, 0.85 );
+
+/**
+ * Replaces albedo with the front or back color after the material has written its channels.
+ * Lit materials become a matte dielectric. Unlit materials become flat.
+ *
+ * @param {NodeBuilder} builder - The current node builder.
+ * @param {NodeMaterial} material - The node material being set up.
+ */
+export function applyFrontBackFaceDebug( builder, material ) {
+
+	const colorNode = select( geometricFrontFacing, FRONT_COLOR, BACK_COLOR );
+
+	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 ) );
+
+	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

@@ -59,11 +59,12 @@ export const lightingOnlyNormal = /*@__PURE__*/ Fn( ( builder ) => {
  * Lit materials become a dielectric gray. Unlit materials become flat gray.
  *
  * @param {NodeBuilder} builder - The current node builder.
+ * @param {NodeMaterial} material - The node material being set up. `builder.material` can be the
+ * source material of a converted one, such as a glTF `MeshStandardMaterial`.
  * @param {string} view - `renderer.debug.view`.
  */
-export function applyLightingDebug( builder, view ) {
+export function applyLightingDebug( builder, material, view ) {
 
-	const material = builder.material;
 	const gray = vec3( LIGHTING_ONLY_BRIGHTNESS );
 
 	diffuseColor.rgb.assign( gray );

package/src/nodes/display/ShadowCasterDebug.js

@@ -0,0 +1,69 @@
+// WITH_GENESYS
+// Shadow casters. Green when the object casts a shadow, gray when it does not.
+// !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';
+
+/**
+ * Shadow casters. A mesh that casts shadows is green. One that does not is gray.
+ * The color is lit, so form stays readable.
+ *
+ * Matches Unreal's simplified shadow-caster view (`GetCachedShadowCasterColorSimplified`):
+ * green `(0, 1, 0)` casts, gray `(0.5, 0.5, 0.5)` does not. Contact-shadow yellow is omitted;
+ * Three.js has no per-object contact-shadow flag.
+ *
+ * @type {string}
+ */
+export const DEBUG_VIEW_SHADOW_CASTER = 'shadowCaster';
+
+const CASTS_COLOR = new Color( 0, 1, 0 );
+const NONE_COLOR = new Color( 0.5, 0.5, 0.5 );
+
+/**
+ * Replaces albedo with the caster color after the material has written its channels.
+ * Lit materials become a matte dielectric. 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.
+ * @param {NodeMaterial} material - The node material being set up. `builder.material` can be the
+ * source material of a converted one, such as a glTF `MeshStandardMaterial`.
+ */
+export function applyShadowCasterDebug( builder, material ) {
+
+	const colorNode = uniform( new Color() ).onObjectUpdate( ( { object }, self ) => {
+
+		if ( object === null ) return;
+
+		return self.value.copy( object.castShadow === true ? CASTS_COLOR : NONE_COLOR );
+
+	} );
+
+	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 ) );
+
+	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/renderers/common/Background.js

@@ -227,9 +227,11 @@ class Background extends DataMap {
 		//
 
 		// WITH_GENESYS
+		// Accumulating views start from zero cost. Alpha keeps the shaded pass coverage, so an
+		// overlay pass such as a HUD stays transparent where it draws nothing when composited.
 		if ( debugViewAccumulates( renderer.debug.view ) ) {
 
-			_clearColor.set( 0, 0, 0, 1 );
+			_clearColor.set( 0, 0, 0, background !== null ? 1 : _clearColor.a );
 
 		}
 		// !WITH_GENESYS

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 ), hashString( this.renderer.debug.buffer ), this.renderer.debug.shaderComplexityBudget, this.renderer.debug.quadOverdrawBudget );
+		cacheKey = hash( cacheKey, hashString( this.renderer.debug.view ), hashString( this.renderer.debug.buffer ), this.renderer.debug.shaderComplexityBudget, this.renderer.debug.quadOverdrawBudget, this.renderer.debug.doubleSideHidden === true ? 1 : 0, this.renderer.debug.doubleSideBack === true ? 1 : 0 );
 		// !WITH_GENESYS
 
 		return cacheKey;