Draft
Conversation
Replace Three.js WebGLRenderer with WebGPURenderer across the frontend. WebGPURenderer automatically falls back to WebGL2 when WebGPU is not available, ensuring compatibility with Chrome and Firefox. Key changes: - Import WebGPURenderer and PMREMGenerator from 'three/webgpu' - Make renderer init async (await renderer.init() required before render) - Propagate async init through event-display and main-display - Migrate clipping: remove renderer.localClippingEnabled and renderer.clippingPlanes (WebGL-specific), apply Z clipping via material clipping planes alongside angular clipping - Update perf service, animation, gizmo, and prettifier types
- Replace LineMaterial with Line2NodeMaterial (from three/webgpu) in trajectory.painter, step-track.painter, and three-event.processor. LineMaterial is WebGL-specific and incompatible with the node material system used by WebGPURenderer. - Fix race condition: move initThree() from ngOnInit to ngAfterViewInit in main-display component. Since init() is now async, ngAfterViewInit was running before the renderer was ready, causing 'addEventListener' errors in CubeViewportControl. - Add type casts for Line2 constructor (expects LineMaterial type but Line2NodeMaterial is API-compatible at runtime).
- Guard updateMaterialClipping() against calls before init completes.
Angular effects in geometry-clipping component fire before async
ThreeService.init() finishes, causing 'traverse' on undefined.
- Replace geometry.instanceCount = Infinity with actual segment count.
WebGPU's drawIndexed rejects Infinity as instanceCount (WebGL
silently clamped it). Use points.length - 1 for trajectories and
getAttribute('instanceStart').count for event-display tracks.
- Update trajectory painter tests to match new instanceCount values.
Replace material-level clipping planes with ClippingGroup on sceneGeometry. Only geometry is clipped — sceneEvent remains a regular Group and is never subject to clipping.
Effects in geometry-clipping.component fire before init() finishes (async). The clipping state was stored but updateClippingGroups() bailed out due to the initialized guard. Now updateClippingGroups() is called right after initialized = true so the stored state is applied.
ClippingGroup applies clipIntersection to ALL its planes. When angular
clipping used intersection mode, Z clipping was incorrectly affected,
causing the Z clip position to appear camera-dependent.
Now uses two nested ClippingGroups:
zClippingGroup (union mode, Z plane)
└── sceneGeometry (intersection/union, angular wedge planes)
Each group has its own independent clipIntersection flag.
The gizmo overlay was appended to an empty .three-container div with no dimensions or positioning context. Now uses the renderer's parent element (#eventDisplay) as the container, and adds position:relative to it so the absolute-positioned gizmo overlay aligns correctly.
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
| await this.eventDisplay.initThree('eventDisplay'); | ||
|
|
||
| // The facade will be initialized in three.service | ||
| this.facade.initializeScene() |
three-viewport-gizmo computes viewport Y using WebGL's bottom-left origin. WebGPU uses top-left origin, causing the gizmo to render at bottom-right while hit-testing stays at top-right. Monkey-patch domUpdate() to use top-left Y when WebGPURenderer is detected. Ref: https://github.com/nicivore/three-viewport-gizmo/issues/13
Patch _setOrientation to use Z-axis as up vector when viewing along Y (Top/Bottom faces). The default library uses Y-up for all lookAt calls, which is degenerate when the camera position is along Y. With this fix, clicking "Top" looks down Y with Z (beam axis) horizontal.
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
1 participant
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.
Closes Switch to WebGPU #108