Optionally load and save sh coefficients (#22)

* optionally load and save sh coefficients

* v0.10.1

package.json

@@ -1,6 +1,6 @@
 {
  "name": "super-splat",
- "version": "0.10.0",
+ "version": "0.10.1",
  "author": "PlayCanvas<support@playcanvas.com>",
  "homepage": "https://playcanvas.com",
  "description": "All the splat things",

src/asset-loader.ts

@@ -1,4 +1,5 @@
 import { Asset, AssetRegistry, StandardMaterial, TEXTURETYPE_RGBP } from 'playcanvas';
+import { getDefaultPlyElements } from 'playcanvas-extras';
 import { Model } from './model';
 import { Splat } from './splat';
 import { Env } from './env';
@@ -17,10 +18,18 @@ interface EnvLoadRequest {
  filename?: string;
 }
 
+function* shDataElementsGen(max: number) {
+ let val = 0;
+ while (val < max) {
+ yield `f_rest_${val++}`;
+ }
+};
+
 // handles loading gltf container assets
 class AssetLoader {
  registry: AssetRegistry;
  defaultAnisotropy: number;
+ loadSHData = false;
 
  constructor(registry: AssetRegistry, defaultAnisotropy?: number) {
  this.registry = registry;
@@ -35,6 +44,8 @@ class AssetLoader {
  return new Promise<Model|Splat>((resolve, reject) => {
  const gemMaterials = new Set<StandardMaterial>();
 
+ const isPly = loadRequest.filename?.endsWith('.ply');
+
  const containerAsset = new Asset(
  loadRequest.filename || loadRequest.url,
  'container',
@@ -43,7 +54,9 @@ class AssetLoader {
  filename: loadRequest.filename,
  contents: loadRequest.contents
  },
- null,
+ isPly ? { 
+ elements: this.loadSHData ? getDefaultPlyElements().concat([...shDataElementsGen(45)]) : null
+ } : null,
  {
  image: {
  postprocess: (gltfImage: any, textureAsset: Asset) => {
@@ -61,7 +74,7 @@ class AssetLoader {
  } as any
  );
  containerAsset.on('load', () => {
- if (loadRequest.filename.endsWith('.ply')) {
+ if (isPly) {
  resolve(new Splat(containerAsset));
  } else {
  resolve(new Model(containerAsset, gemMaterials));

src/editor-ops.ts

@@ -156,7 +156,7 @@ const convertPly = (splatData: SplatData, modelMat: Mat4) => {
  numSplats += opacity[i] !== deletedOpacity ? 1 : 0;
  }
 
- const props = ['x', 'y', 'z', 'f_dc_0', 'f_dc_1', 'f_dc_2', 'opacity', 'scale_0', 'scale_1', 'scale_2', 'rot_0', 'rot_1', 'rot_2', 'rot_3'];
+ const props = splatData.vertexElement.properties.filter(p => p.storage).map(p => p.name);
  const header = (new TextEncoder()).encode(`ply\nformat binary_little_endian 1.0\nelement vertex ${numSplats}\n` + props.map(p => `property float ${p}`).join('\n') + `\nend_header\n`);
  const result = new Uint8Array(header.byteLength + numSplats * props.length * 4);
 
@@ -719,6 +719,10 @@ const registerEvents = (scene: Scene, editorUI: EditorUI) => {
  updateColorData();
  });
 
+ events.on('shData', (value: boolean) => {
+ scene.assetLoader.loadSHData = value;
+ });
+
  const removeExtension = (filename: string) => {
  return filename.substring(0, filename.length - path.getExtension(filename).length);
  };

src/style.scss

@@ -85,6 +85,10 @@ body {
  flex-grow: 1;
 }
 
+.control-element.pcui-boolean-input {
+ margin-top: 10px;
+}
+
 .active {
  color: white;
  background-color: #f60 !important;

src/ui/control-panel.ts

@@ -621,6 +621,31 @@ class ControlPanel extends Container {
  scenePanel.append(position);
  scenePanel.append(rotation);
 
+ // import
+ const importPanel = new Panel({
+ class: 'control-panel',
+ headerText: 'Import'
+ });
+
+ const shData = new Container({
+ class: 'control-parent'
+ });
+
+ const shDataLabel = new Label({
+ class: 'control-label',
+ text: 'SH data'
+ });
+
+ const shDataToggle = new BooleanInput({
+ class: 'control-element',
+ value: false
+ });
+
+ shData.append(shDataLabel);
+ shData.append(shDataToggle);
+
+ importPanel.append(shData);
+
  // export
  const exportPanel = new Panel({
  class: 'control-panel',
@@ -674,6 +699,7 @@ class ControlPanel extends Container {
  this.append(selectionPanel);
  this.append(modifyPanel);
  this.append(scenePanel);
+ this.append(importPanel);
  this.append(exportPanel);
  this.append(keyboardPanel);
 
@@ -828,6 +854,10 @@ class ControlPanel extends Container {
  this.events.fire('reset');
  });
 
+ shDataToggle.on('change', (enabled: boolean) => {
+ this.events.fire('shData', enabled);
+ });
+
  exportPlyButton.on('click', () => {
  this.events.fire('export', 'ply');
  });