LodStreaming example has Radial sorting toggle (#8515)

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

Author: mvaligursky

examples/src/examples/gaussian-splatting/lod-streaming.controls.mjs

@@ -34,6 +34,16 @@ export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
         jsx(
             Panel,
             { headerText: 'Settings' },
+            jsx(
+                LabelGroup,
+                { text: 'Radial' },
+                jsx(BooleanInput, {
+                    type: 'toggle',
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'radialSorting' },
+                    value: observer.get('radialSorting') ?? true
+                })
+            ),
             isWebGPU && jsx(
                 LabelGroup,
                 { text: 'GPU Sorting' },

examples/src/examples/gaussian-splatting/lod-streaming.example.mjs

@@ -129,6 +129,11 @@ assetListLoader.load(() => {
     app.scene.gsplat.lodUpdateAngle = 90;
     app.scene.gsplat.lodBehindPenalty = 3;
     app.scene.gsplat.radialSorting = true;
+
+    data.on('radialSorting:set', () => {
+        app.scene.gsplat.radialSorting = !!data.get('radialSorting');
+    });
+
     app.scene.gsplat.lodUpdateDistance = config.lodUpdateDistance;
     app.scene.gsplat.lodUnderfillLimit = config.lodUnderfillLimit;
 
@@ -150,6 +155,7 @@ assetListLoader.load(() => {
 
     // initialize UI settings (must be after observer registration)
     data.set('cameraFov', 75);
+    data.set('radialSorting', true);
     data.set('gpuSorting', false);
     data.set('culling', device.isWebGPU);
     data.set('compact', true);