Expose debug render mode in standard renderer

[vorg]

My current idea is

const standardRenderer = systems.renderer.standard()
//or
const standardRenderer = renderEngine.renderers.find(
   (renderer) => renderer.type == "standard-renderer"
);

standardRenderer.debugRender = "data.normalView"
standardRenderer.debugRender = "data.indirectSpecular"
standardRenderer.debugRender = "data.vNormalView"
...

//reset to normal rendering
standardRenderer.debugRender = ""

This would inject code to overwrite output color with specified data for both opaque and transparent entities.

Q: debugRender, debugMode, renderMode?

[vorg]

Alternative approach with the downside of needing to do that per entity would be

const entity = createEntity({
   id: "cube1",
   transform: components.transform(),
   geometry: components.geometry(cube()),
   material: components.material({
      inject: {
          AFTER_FILNAL_COLOR: /*glsl*/`gl_FragData[0] = vec4(data.normalView, 1.0);`
      }
   })
})
``

[dmnsgn]

Somewhat related issue #249

Q: debugRender, debugMode, renderMode?

Some remarks:
They sound more like boolean properties than string to be injected in shader for program.
Does "mode" suffix has potential to be slightly confusing with standard/line/unlit rendering mode?
"debug" prefix is also a bit restrictive as the property could be used to tweak the output, no necessarily only for debug purpose.

Alternative approach with the downside of needing to do that per entity would be

Sounds a bit more flexible than on the render system (although I understand probably more implementation work) and could be added in a loop if you have many entities :

world.entities.forEach(({ material }) => material?....);

[dmnsgn]

Current solution, string replace:

pex-renderer/systems/renderer/standard.js

Lines 251 to 274 in 90a39cb

	let debugRender = options.debugRender;
	if (debugRender) {
	let scale = "";
	let pow = 1;
	let mode = debugRender.toLowerCase();
	if (mode.includes("normal")) {
	scale = "*0.5 + 0.5";
	}
	if (mode.includes("texcoord")) {
	debugRender = `vec3(${debugRender}, 0.0)`;
	}
	if (
	mode.includes("ao") ||
	mode.includes("normal") ||
	mode.includes("metallic") ||
	mode.includes("roughness")
	) {
	pow = "2.2";
	}
	frag = frag.replace(
	"gl_FragData[0] = encode(vec4(color, 1.0), uOutputEncoding);",
	`gl_FragData[0] = vec4(pow(vec3(${debugRender}${scale}), vec3(${pow})), 1.0);`
	);
	}

[vorg]

We can clean it up a bit but appending debugRender code to FRAG_END hook saving us from one extra string replace.