[v7] Error occurs when the scene contains troika-three-text

[Kethatril]

Description of the bug

When an instance of troika-three-text is visible in the scene the Geometry pass fails with Uncaught TypeError: this.customProgramCacheKey is not a function
It occurs because at this line

postprocessing/src/passes/GeometryPass.ts

Line 382 in 54a2662

const onBeforeCompile = material.onBeforeCompile.bind(this);

the previous onBeforeCompile function is bound to the Geometry pass so this is incorrect.

However if you bind it to the original material instead you get a stack overflow. Troika-three-text has a system in place that grabs any new onBeforeCompile function that gets applied and then runs it after it runs it's own onBeforeCompile. So if you then run the stored onBeforeCompile on the postprocessing side you get into a loop.

Not binding to this and then only running onBeforeCompile (possibly binding it back to the original material or this if there is a reason for doing so) if it doesn't equal material.onBeforeCompile seems to avoid the issue and still works for other non troika-three-text materials.

To reproduce

Add an instance of troika-three-text to the scene

Expected behavior

For render not to fail when there is an instance of troika-three-text in the scene

Library versions used

• Three: [0.168.0]
• Post Processing: [7.0.0-beta.4]
• troika-three-text: [0.49.1]

[vanruesc]

Thanks for the report!

There's no specific reason for the bind(this) part, so changing it would be no problem. Would you like to create a PR? Otherwise, I'll take care of it when I find the time.

[vanruesc]

Troika-three-text has a system in place that grabs any new onBeforeCompile function that gets applied and then runs it after it runs it's own onBeforeCompile.

That's actually quite intrusive. Looks like adding a workaround really is the only option. Thankfully, the onBeforeCompile solution in GeometryPass is only temporary.