Localize SuperSplat to Chinese, Japanese and Korean

package.json

@@ -68,6 +68,8 @@
         "cors": "^2.8.5",
         "cross-env": "^7.0.3",
         "eslint": "^8.56.0",
+        "i18next": "^23.15.1",
+        "i18next-browser-languagedetector": "^8.0.0",
         "jest": "^29.7.0",
         "playcanvas": "^1.74.0",
         "postcss": "^8.4.41",

src/scene.ts

@@ -19,6 +19,7 @@ import { Camera } from './camera';
 import { CustomShadow as Shadow } from './custom-shadow';
 // import { Grid } from './grid';
 import { InfiniteGrid as Grid } from './infinite-grid';
+import { localize } from './ui/localization';
 
 class Scene {
     events: Events;
@@ -217,7 +218,7 @@ class Scene {
         } catch (err) {
             this.events.invoke('showPopup', {
                 type: 'error',
-                header: 'ERROR LOADING FILE',
+                header: localize('popup.error-loading'),
                 message: `${err.message ?? err} while loading '${filename}'`
             });
         }

src/ui/bottom-toolbar.ts

@@ -1,6 +1,7 @@
 import { Button, Element, Container } from 'pcui';
 import { Events } from '../events';
 import { Tooltips } from './tooltips';
+import { localize } from './localization';
 
 import undoSvg from '../svg/undo.svg';
 import redoSvg from '../svg/redo.svg';
@@ -139,17 +140,17 @@ class BottomToolbar extends Container {
         });
 
         // register tooltips
-        tooltips.register(undo, 'Undo ( Ctrl + Z )');
-        tooltips.register(redo, 'Redo ( Ctrl + Shift + Z )');
-        tooltips.register(picker, 'Picker Select ( P )');
-        tooltips.register(brush, 'Brush Select ( B )');
+        tooltips.register(undo, localize('tooltip.undo'));
+        tooltips.register(redo, localize('tooltip.redo'));
+        tooltips.register(picker, localize('tooltip.picker'));
+        tooltips.register(brush, localize('tooltip.brush'));
         // tooltips.register(lasso, 'Lasso Select');
-        tooltips.register(sphere, 'Sphere Select');
+        tooltips.register(sphere, localize('tooltip.sphere'));
         // tooltips.register(crop, 'Crop');
-        tooltips.register(translate, 'Translate ( 1 )');
-        tooltips.register(rotate, 'Rotate ( 2 )');
-        tooltips.register(scale, 'Scale ( 3 )');
-        tooltips.register(coordSpace, 'Local Space Gizmo');
+        tooltips.register(translate, localize('tooltip.translate'));
+        tooltips.register(rotate, localize('tooltip.rotate'));
+        tooltips.register(scale, localize('tooltip.scale'));
+        tooltips.register(coordSpace, localize('tooltip.local-space'));
 
     }
 }

src/ui/data-panel.ts

@@ -3,6 +3,7 @@ import { Events } from '../events';
 import { Splat } from '../splat';
 import { Histogram } from './histogram';
 import { State } from '../edit-ops';
+import { localize } from './localization';
 import { rgb2hsv } from './color';
 
 const SH_C0 = 0.28209479177387814;
@@ -78,7 +79,7 @@ class DataPanel extends Panel {
     constructor(events: Events, args = { }) {
         args = {
             ...args,
-            headerText: 'SPLAT DATA',
+            headerText: localize('data'),
             id: 'data-panel',
             resizable: 'top',
             resizeMax: 1000,
@@ -107,19 +108,19 @@ class DataPanel extends Panel {
                 { v: 'x', t: 'X' },
                 { v: 'y', t: 'Y' },
                 { v: 'z', t: 'Z' },
-                { v: 'distance', t: 'Distance' },
-                { v: 'volume', t: 'Volume' },
-                { v: 'surface-area', t: 'Surface Area' },
-                { v: 'scale_0', t: 'Scale X' },
-                { v: 'scale_1', t: 'Scale Y' },
-                { v: 'scale_2', t: 'Scale Z' },
-                { v: 'f_dc_0', t: 'Red' },
-                { v: 'f_dc_1', t: 'Green' },
-                { v: 'f_dc_2', t: 'Blue' },
-                { v: 'opacity', t: 'Opacity' },
-                { v: 'hue', t: 'Hue' },
-                { v: 'saturation', t: 'Saturation' },
-                { v: 'value', t: 'Value' }
+                { v: 'distance', t: localize('data.distance') },
+                { v: 'volume', t: localize('data.volume') },
+                { v: 'surface-area', t: localize('data.surface-area') },
+                { v: 'scale_0', t: localize('data.scale-x') },
+                { v: 'scale_1', t: localize('data.scale-y') },
+                { v: 'scale_2', t: localize('data.scale-z') },
+                { v: 'f_dc_0', t: localize('data.red') },
+                { v: 'f_dc_1', t: localize('data.green') },
+                { v: 'f_dc_2', t: localize('data.blue') },
+                { v: 'opacity', t: localize('data.opacity') },
+                { v: 'hue', t: localize('data.hue') },
+                { v: 'saturation', t: localize('data.saturation') },
+                { v: 'value', t: localize('data.value') }
             ]
         });
 
@@ -129,7 +130,7 @@ class DataPanel extends Panel {
 
         const logScaleLabel = new Label({
             class: 'control-label',
-            text: 'Log Scale'
+            text: localize('data.log-scale')
         });
 
         const logScaleValue = new BooleanInput({
@@ -143,12 +144,12 @@ class DataPanel extends Panel {
         controls.append(dataSelector);
         controls.append(logScale);
 
-        controls.append(sepLabel('Totals'));
+        controls.append(sepLabel(localize('data.totals')));
 
-        const splatsValue = dataLabel(controls, 'Splats');
-        const selectedValue = dataLabel(controls, 'Selected');
-        const hiddenValue = dataLabel(controls, 'Hidden');
-        const deletedValue = dataLabel(controls, 'Deleted');
+        const splatsValue = dataLabel(controls, localize('data.totals.splats'));
+        const selectedValue = dataLabel(controls, localize('data.totals.selected'));
+        const hiddenValue = dataLabel(controls, localize('data.totals.hidden'));
+        const deletedValue = dataLabel(controls, localize('data.totals.deleted'));
 
         controlsContainer.append(controls);
 

src/ui/editor.ts

@@ -12,6 +12,7 @@ import { RightToolbar } from './right-toolbar';
 import { ModeToggle } from './mode-toggle';
 import { Tooltips } from './tooltips';
 import { ShortcutsPopup } from './shortcuts-popup';
+import { localizeInit } from './localization';
 
 import { version } from '../../package.json';
 import logo from './playcanvas-logo.png';
@@ -25,6 +26,8 @@ class EditorUI {
     popup: Popup;
 
     constructor(events: Events, remoteStorageMode: boolean) {
+        localizeInit();
+
         // favicon
         const link = document.createElement('link');
         link.rel = 'icon';