TransformControls in scene causes crash when SSR is enabled

[optimus007]

Continuing from here https://github.com/0beqz/screen-space-reflections/issues/4#issuecomment-1179826952 I've been having these error which could not track down

So i've tried running from the examples folder of this lib, and these is no crash but the behavior seems a stuttery and there's extra reflection from the control plane ?

https://user-images.githubusercontent.com/6885294/180776487-d48a81df-797d-4dc2-92e3-a497340ed26d.mp4

code i added in main.js

tCon = new TransformControls(camera, document.querySelector("#orbitControlsDomElem"))

tCon.addEventListener('dragging-changed', function (event) {

    controls.enabled = !event.value;

});
console.log(tCon)
window.tCon = tCon
scene.add(tCon)
const box = new THREE.Mesh(
    new THREE.BoxBufferGeometry(1, 1, 1),
    new THREE.MeshStandardMaterial({
        color: 0xff0000,
        metalness: 1,
        roughness: 0
    })

)
box.position.set(1, 1, 1)
box.updateMatrixWorld()
scene.add(box)

tCon.attach(box)

and then i tried with a basic cube and a plane

https://user-images.githubusercontent.com/6885294/180777772-77f74f31-7dc4-4802-9fa4-35030d4e80d4.mp4

the code i used https://gist.github.com/optimus007/56b49fc4a61a0f31dfcda36dc6a9deea

one big difference is i'm switching between renderer.render and composer.render in this example to toggle the postprocessing

[0beqz]

Ah okay I see. Well it looks like the control plane's transparency is causing issues which makes it reflect as well. So if you don't want to have reflections for the control plane at all, use the SSREffect's selection set to add only the meshes which should reflect.

I'll try to look into what's causing your crash. Could you maybe create a demo repo please so that I can replicate the crash quickly?

[optimus007]

here's the demo page https://optimus007.github.io/SSRTest/ (using '/docs' folder to build and host) repo https://github.com/optimus007/SSRTest

added "selection" but still crashes and adding hdri seems to printing warning messages

in firefox the error message is different

[0beqz]

Thanks, I'll try to look into that in the next few days to see what's causing the issue.

[optimus007]

updated to latest , looks great , fewer reflection glitches

transform controls issue still persists

page https://optimus007.github.io/SSRTest/ repo https://github.com/optimus007/SSRTest

[schlaflied1314]

Same issue in orbitControls！ If i span or rotate whole scene，the crash will exitst and persist until reload the page。 If you can give me some feedback, i will so appreciate it. Thanks!

[optimus007]

Same issue in orbitControls！ If i span or rotate whole scene，the crash will exitst and persist until reload the page。 If you can give me some feedback, i will so appreciate it. Thanks!

can you post a video ? This error is about the existence of transform controls in the scene causing a crash Your error might be different , orbitcontrols never caused an issue in my case

[skrichten]

I'm also trying to use TransformControls. Instead of a crash, I get this error...

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'clone')

Call Stack TransformControlsGizmo.eval [as updateMatrixWorld] node_modules\three-stdlib\controls\TransformControls.js (909:0) TransformControls.updateMatrixWorld node_modules\three\build\three.module.js (7998:0) TransformControls.eval [as updateMatrixWorld] node_modules\three-stdlib\controls\TransformControls.js (189:0) Scene.updateMatrixWorld node_modules\three\build\three.module.js (7998:0) WebGLRenderer.render node_modules\three\build\three.module.js (27439:0) RenderPass.render node_modules\postprocessing\build\postprocessing.esm.js (3092:0) EffectComposer.render node_modules\postprocessing\build\postprocessing.esm.js (4377:0) Object.eval [as current] node_modules\@react-three\postprocessing\dist\index.js (143:0) render$1 node_modules\@react-three\fiber\dist\index-80784ca9.esm.js (1516:0) eval node_modules\@react-three\fiber\dist\index-80784ca9.esm.js (1545:0) Map.forEach

loop node_modules\@react-three\fiber\dist\index-80784ca9.esm.js (1539:0)

[optimus007]

@skrichten that's same as the original error

[vis-prime]

While testing vanilla js version of Accumulative shadows from R3F Drei I encountered this same error

basically transformControl's updateMatrixWorld function updates it's own materials and it's mesh.visible and its running on every frame rendered

If any other code replaces this material with a temporary shader material or hides any transform control mesh ,it's updateMatrixWorld will try to do some clone operation and stuff & will make the mesh visible again. and when it happens on a shader material it leads to crash + artifacts

Easy way to skip it was to find any "isTransformControls" objects and hide them before rendering and prevent material edits from happening on it (works in my case since i traverse the scene to find all the shadow casting meshes anyway)