Skip to content

Add renderer selection UI to all Gaussian splat examples #8585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mvaligursky merged 2 commits into from
Apr 9, 2026
Merged

Add renderer selection UI to all Gaussian splat examples #8585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
caf5cfa
Add renderer selection UI to all Gaussian splat examples
Apr 9, 2026
f6a8a8f
lint
Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion examples/src/examples/gaussian-splatting/crop.controls.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,25 @@
* @returns {JSX.Element} The returned JSX Element.
*/
export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
const { BindingTwoWay, LabelGroup, BooleanInput, Button, SliderInput } = ReactPCUI;
const { BindingTwoWay, LabelGroup, BooleanInput, Button, SelectInput, SliderInput } = ReactPCUI;

return fragment(
jsx(
LabelGroup,
{ text: 'Renderer' },
jsx(SelectInput, {
type: 'number',
binding: new BindingTwoWay(),
link: { observer, path: 'renderer' },
value: observer.get('renderer') ?? 0,
options: [
{ v: 0, t: 'Auto' },
{ v: 1, t: 'Raster (CPU Sort)' },
{ v: 2, t: 'Raster (GPU Sort)' },
{ v: 3, t: 'Compute' }
]
})
),
jsx(
LabelGroup,
{ text: 'Precise' },
Expand Down
9 changes: 9 additions & 0 deletions examples/src/examples/gaussian-splatting/crop.example.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,16 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
assetListLoader.load(() => {
app.start();

data.on('renderer:set', () => {
app.scene.gsplat.renderer = data.get('renderer');
const current = app.scene.gsplat.currentRenderer;
if (current !== data.get('renderer')) {
setTimeout(() => data.set('renderer', current), 0);
}
});

// Default precise mode to true, paused to false, edge scale to 0.5
data.set('renderer', pc.GSPLAT_RENDERER_AUTO);
data.set('precise', true);
data.set('edgeScale', 0.5);
let paused = false;
Expand Down
22 changes: 21 additions & 1 deletion examples/src/examples/gaussian-splatting/editor.controls.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,29 @@
* @returns {JSX.Element} The returned JSX Element.
*/
export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
const { BindingTwoWay, LabelGroup, SliderInput, Button, Panel } = ReactPCUI;
const { BindingTwoWay, LabelGroup, SelectInput, SliderInput, Button, Panel } = ReactPCUI;

return fragment(
jsx(
Panel,
{ headerText: 'Renderer' },
jsx(
LabelGroup,
{ text: 'Renderer' },
jsx(SelectInput, {
type: 'number',
binding: new BindingTwoWay(),
link: { observer, path: 'renderer' },
value: observer.get('renderer') ?? 0,
options: [
{ v: 0, t: 'Auto' },
{ v: 1, t: 'Raster (CPU Sort)' },
{ v: 2, t: 'Raster (GPU Sort)' },
{ v: 3, t: 'Compute' }
]
})
)
),
jsx(
Panel,
{ headerText: 'Editor Settings' },
Expand Down
9 changes: 9 additions & 0 deletions examples/src/examples/gaussian-splatting/editor.example.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,15 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
assetListLoader.load(() => {
app.start();

data.on('renderer:set', () => {
app.scene.gsplat.renderer = data.get('renderer');
const current = app.scene.gsplat.currentRenderer;
if (current !== data.get('renderer')) {
setTimeout(() => data.set('renderer', current), 0);
}
});
data.set('renderer', pc.GSPLAT_RENDERER_AUTO);

// Store all editable gsplat entities
const editables = [];
let cloneCounter = 0;
Expand Down
25 changes: 25 additions & 0 deletions examples/src/examples/gaussian-splatting/flipbook.controls.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/**
* @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
* @returns {JSX.Element} The returned JSX Element.
*/
export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
const { BindingTwoWay, LabelGroup, SelectInput } = ReactPCUI;
return fragment(
jsx(
LabelGroup,
{ text: 'Renderer' },
jsx(SelectInput, {
type: 'number',
binding: new BindingTwoWay(),
link: { observer, path: 'renderer' },
value: observer.get('renderer') ?? 0,
options: [
{ v: 0, t: 'Auto' },
{ v: 1, t: 'Raster (CPU Sort)' },
{ v: 2, t: 'Raster (GPU Sort)' },
{ v: 3, t: 'Compute' }
]
})
)
);
};
10 changes: 10 additions & 0 deletions examples/src/examples/gaussian-splatting/flipbook.example.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// @config DESCRIPTION This example demonstrates gsplat flipbook animation using dynamically loaded splat sequence of ply files.
// @config NO_MINISTATS
import { data } from 'examples/observer';
import { deviceType, rootPath, fileImport } from 'examples/utils';
import * as pc from 'playcanvas';

Expand Down Expand Up @@ -128,6 +129,15 @@ assetListLoader.load(() => {
player.setLocalScale(80, 80, 80);
app.root.addChild(player);

data.on('renderer:set', () => {
app.scene.gsplat.renderer = data.get('renderer');
const current = app.scene.gsplat.currentRenderer;
if (current !== data.get('renderer')) {
setTimeout(() => data.set('renderer', current), 0);
}
});
data.set('renderer', pc.GSPLAT_RENDERER_AUTO);

app.scene.gsplat.alphaClip = 0.1;

// Create shadow catcher
Expand Down
18 changes: 17 additions & 1 deletion examples/src/examples/gaussian-splatting/global-sorting.controls.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,24 @@
* @returns {JSX.Element} The returned JSX Element.
*/
export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
const { BindingTwoWay, LabelGroup, BooleanInput } = ReactPCUI;
const { BindingTwoWay, LabelGroup, BooleanInput, SelectInput } = ReactPCUI;
return fragment(
jsx(
LabelGroup,
{ text: 'Renderer' },
jsx(SelectInput, {
type: 'number',
binding: new BindingTwoWay(),
link: { observer, path: 'renderer' },
value: observer.get('renderer') ?? 0,
options: [
{ v: 0, t: 'Auto' },
{ v: 1, t: 'Raster (CPU Sort)' },
{ v: 2, t: 'Raster (GPU Sort)' },
{ v: 3, t: 'Compute' }
]
})
),
jsx(
LabelGroup,
{ text: 'Unified' },
Expand Down
9 changes: 9 additions & 0 deletions examples/src/examples/gaussian-splatting/global-sorting.example.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,16 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
assetListLoader.load(() => {
app.start();

data.on('renderer:set', () => {
app.scene.gsplat.renderer = data.get('renderer');
const current = app.scene.gsplat.currentRenderer;
if (current !== data.get('renderer')) {
setTimeout(() => data.set('renderer', current), 0);
}
});

// default unified mode
data.set('renderer', pc.GSPLAT_RENDERER_AUTO);
data.set('unified', true);

// instantiate garage gsplat
Expand Down
18 changes: 17 additions & 1 deletion examples/src/examples/gaussian-splatting/lod-instances.controls.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,27 @@
* @returns {JSX.Element} The returned JSX Element.
*/
export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
const { BindingTwoWay, LabelGroup, BooleanInput, Panel, SliderInput, Label } = ReactPCUI;
const { BindingTwoWay, LabelGroup, BooleanInput, Panel, SelectInput, SliderInput, Label } = ReactPCUI;
return fragment(
jsx(
Panel,
{ headerText: 'Settings' },
jsx(
LabelGroup,
{ text: 'Renderer' },
jsx(SelectInput, {
type: 'number',
binding: new BindingTwoWay(),
link: { observer, path: 'renderer' },
value: observer.get('renderer') ?? 0,
options: [
{ v: 0, t: 'Auto' },
{ v: 1, t: 'Raster (CPU Sort)' },
{ v: 2, t: 'Raster (GPU Sort)' },
{ v: 3, t: 'Compute' }
]
})
),
jsx(
LabelGroup,
{ text: 'Hue Animation' },
Expand Down
9 changes: 9 additions & 0 deletions examples/src/examples/gaussian-splatting/lod-instances.example.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,15 @@ assetListLoader.load(() => {
app.scene.gsplat.material.update();
};

data.on('renderer:set', () => {
app.scene.gsplat.renderer = data.get('renderer');
const current = app.scene.gsplat.currentRenderer;
if (current !== data.get('renderer')) {
setTimeout(() => data.set('renderer', current), 0);
}
});
data.set('renderer', pc.GSPLAT_RENDERER_AUTO);

// Initialize colorize setting (enabled by default)
data.set('colorize', data.get('colorize') !== false);
applyColorize(data.get('colorize'));
Expand Down
16 changes: 16 additions & 0 deletions examples/src/examples/gaussian-splatting/lod-streaming-sh.controls.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,22 @@ export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
jsx(
Panel,
{ headerText: 'Settings' },
jsx(
LabelGroup,
{ text: 'Renderer' },
jsx(SelectInput, {
type: 'number',
binding: new BindingTwoWay(),
link: { observer, path: 'renderer' },
value: observer.get('renderer') ?? 0,
options: [
{ v: 0, t: 'Auto' },
{ v: 1, t: 'Raster (CPU Sort)' },
{ v: 2, t: 'Raster (GPU Sort)' },
{ v: 3, t: 'Compute' }
]
})
),
jsx(
LabelGroup,
{ text: 'Colorize LOD' },
Expand Down
9 changes: 9 additions & 0 deletions examples/src/examples/gaussian-splatting/lod-streaming-sh.example.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,16 @@ assetListLoader.load(() => {
app.scene.gsplat.colorUpdateDistanceLodScale = 2;
app.scene.gsplat.colorUpdateAngleLodScale = 2;

data.on('renderer:set', () => {
app.scene.gsplat.renderer = data.get('renderer');
const current = app.scene.gsplat.currentRenderer;
if (current !== data.get('renderer')) {
setTimeout(() => data.set('renderer', current), 0);
}
});

// initialize UI settings
data.set('renderer', pc.GSPLAT_RENDERER_AUTO);
data.set('debugLod', false);
data.set('colorizeSH', false);
data.set('lodPreset', pc.platform.mobile ? 'mobile' : 'desktop');
Expand Down
2 changes: 1 addition & 1 deletion examples/src/examples/gaussian-splatting/lod-streaming.example.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ assetListLoader.load(async () => {
app.scene.gsplat.renderer = data.get('renderer');
const current = app.scene.gsplat.currentRenderer;
if (current !== data.get('renderer')) {
data.set('renderer', current);
setTimeout(() => data.set('renderer', current), 0);
}
});
data.on('minPixelSize:set', () => {
Expand Down
25 changes: 25 additions & 0 deletions examples/src/examples/gaussian-splatting/multi-view.controls.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
/**
* @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
* @returns {JSX.Element} The returned JSX Element.
*/
export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
const { BindingTwoWay, LabelGroup, SelectInput } = ReactPCUI;
return fragment(
jsx(
LabelGroup,
{ text: 'Renderer' },
jsx(SelectInput, {
type: 'number',
binding: new BindingTwoWay(),
link: { observer, path: 'renderer' },
value: observer.get('renderer') ?? 0,
options: [
{ v: 0, t: 'Auto' },
{ v: 1, t: 'Raster (CPU Sort)' },
{ v: 2, t: 'Raster (GPU Sort)' },
{ v: 3, t: 'Compute' }
]
})
)
);
};
10 changes: 10 additions & 0 deletions examples/src/examples/gaussian-splatting/multi-view.example.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// @config DESCRIPTION Renders Gaussian Splats from multiple camera viewports simultaneously with different projection types.
import { data } from 'examples/observer';
import { deviceType, rootPath } from 'examples/utils';
import * as pc from 'playcanvas';

Expand Down Expand Up @@ -58,6 +59,15 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
assetListLoader.load(() => {
app.start();

data.on('renderer:set', () => {
app.scene.gsplat.renderer = data.get('renderer');
const current = app.scene.gsplat.currentRenderer;
if (current !== data.get('renderer')) {
setTimeout(() => data.set('renderer', current), 0);
}
});
data.set('renderer', pc.GSPLAT_RENDERER_AUTO);

// setup skydome
app.scene.skyboxMip = 2;
app.scene.envAtlas = assets.helipad.resource;
Expand Down
22 changes: 21 additions & 1 deletion examples/src/examples/gaussian-splatting/paint.controls.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,29 @@
* @returns {JSX.Element} The returned JSX Element.
*/
export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
const { BindingTwoWay, LabelGroup, ColorPicker, SliderInput, Panel } = ReactPCUI;
const { BindingTwoWay, LabelGroup, ColorPicker, SelectInput, SliderInput, Panel } = ReactPCUI;

return fragment(
jsx(
Panel,
{ headerText: 'Renderer' },
jsx(
LabelGroup,
{ text: 'Renderer' },
jsx(SelectInput, {
type: 'number',
binding: new BindingTwoWay(),
link: { observer, path: 'renderer' },
value: observer.get('renderer') ?? 0,
options: [
{ v: 0, t: 'Auto' },
{ v: 1, t: 'Raster (CPU Sort)' },
{ v: 2, t: 'Raster (GPU Sort)' },
{ v: 3, t: 'Compute' }
]
})
)
),
jsx(
Panel,
{ headerText: 'Paint Settings' },
Expand Down
9 changes: 9 additions & 0 deletions examples/src/examples/gaussian-splatting/paint.example.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,15 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
assetListLoader.load(() => {
app.start();

data.on('renderer:set', () => {
app.scene.gsplat.renderer = data.get('renderer');
const current = app.scene.gsplat.currentRenderer;
if (current !== data.get('renderer')) {
setTimeout(() => data.set('renderer', current), 0);
}
});
data.set('renderer', pc.GSPLAT_RENDERER_AUTO);

// Store all paintable entities
const paintables = [];

Expand Down
18 changes: 17 additions & 1 deletion examples/src/examples/gaussian-splatting/picking.controls.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,24 @@
* @returns {JSX.Element} The returned JSX Element.
*/
export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
const { BindingTwoWay, LabelGroup, BooleanInput } = ReactPCUI;
const { BindingTwoWay, LabelGroup, BooleanInput, SelectInput } = ReactPCUI;
return fragment(
jsx(
LabelGroup,
{ text: 'Renderer' },
jsx(SelectInput, {
type: 'number',
binding: new BindingTwoWay(),
link: { observer, path: 'renderer' },
value: observer.get('renderer') ?? 0,
options: [
{ v: 0, t: 'Auto' },
{ v: 1, t: 'Raster (CPU Sort)' },
{ v: 2, t: 'Raster (GPU Sort)' },
{ v: 3, t: 'Compute' }
]
})
),
jsx(
LabelGroup,
{ text: 'Ortho Camera' },
Expand Down
Loading