Add error handling for PixiJS renderer resize with shared WebGL context#8378
Open
Add error handling for PixiJS renderer resize with shared WebGL context#8378
Conversation
When PixiJS and Three.js share the same WebGL context (for 3D scene editing), resizing the renderer can fail with "Cannot read properties of undefined (reading 'location')" because Three.js may have modified WebGL state, leaving PixiJS's cached shader uniform locations stale. This was an unhandled exception in UNSAFE_componentWillReceiveProps that crashed the entire React component tree. Fix by: - Wrapping pixiRenderer.resize() in try-catch to gracefully handle the stale uniform error (recoverable on next render cycle) - Guarding against 0 width/height which is invalid for PixiJS/WebGL - Adding the same protection to LayerRenderer.renderOnPixiRenderTexture() https://claude.ai/code/session_01Gfj81jEnv9KPzC8oXUd1xt
The render loop already resets Three.js/PixiJS state before each frame (threeRenderer.resetState() + pixiRenderer.reset()), but UNSAFE_componentWillReceiveProps was resizing without resetting state first. Three.js could have left its shader programs bound, causing PixiJS's internal uniform sync to crash during resize. The fix mirrors the render loop pattern: reset both renderers' state before calling pixiRenderer.resize(). This prevents the stale uniform location error instead of just catching it. Also reverts the defensive try-catch in LayerRenderer since renderOnPixiRenderTexture is only called from the render loop where state is already properly reset. https://claude.ai/code/session_01Gfj81jEnv9KPzC8oXUd1xt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds robust error handling for PixiJS renderer resize operations when PixiJS and Three.js share the same WebGL context. It also prevents invalid zero-dimension resizes which are not supported by PixiJS/WebGL.
Key Changes
InstancesEditor/index.js:
pixiRenderer.resize()in try-catch to gracefully handle resize failuresLayerRenderer.js:
_renderTexture.resize()in try-catch to handle resize failuresImplementation Details
When PixiJS and Three.js share the same WebGL context, Three.js may modify WebGL state in ways that leave PixiJS's cached shader uniform locations stale. This can cause resize operations to fail. Rather than crashing, these changes allow the application to gracefully recover by:
This approach maintains stability while the renderers continue to operate normally.
https://claude.ai/code/session_01Gfj81jEnv9KPzC8oXUd1xt