fix(PLYReader): add support for duplicatePointsForFaceTexture

fixes #2877
fixes #3047

Author: daker

Sources/IO/Geometry/PLYReader/example/controller.html

@@ -0,0 +1,27 @@
+<table>
+  <tr>
+    <td colspan="2">
+      <h3 style="margin: 5px 0">Options</h3>
+    </td>
+  </tr>
+  <tr>
+    <td>PLY file or w/ its texture file.</td>
+  </tr>
+  <tr>
+    <td>
+      <input type="file" class="file" multiple />
+    </td>
+  </tr>
+  <tr>
+    <td>Duplicate points for face texture</td>
+    <td>
+      <input
+        type="checkbox"
+        id="duplicate_points_for_face_texture"
+        name="duplicate_points_for_face_texture"
+        value="true"
+        checked
+      />
+    </td>
+  </tr>
+</table>

Sources/IO/Geometry/PLYReader/example/index.js

@@ -8,14 +8,28 @@ import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreen
 import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
 import vtkPLYReader from '@kitware/vtk.js/IO/Geometry/PLYReader';
 import vtkTexture from '@kitware/vtk.js/Rendering/Core/Texture';
+import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
+
+import controlPanel from './controller.html';
 
 // ----------------------------------------------------------------------------
-// Example code
+// Standard rendering code setup
 // ----------------------------------------------------------------------------
+const userParams = vtkURLExtract.extractURLParameters();
+const url = userParams.fileURL;
+const duplicatePointsForFaceTexture =
+  userParams.duplicatePointsForFaceTexture || false;
+
+const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
+const renderer = fullScreenRenderer.getRenderer();
+const renderWindow = fullScreenRenderer.getRenderWindow();
 
-let renderer = null;
-let renderWindow = null;
-const reader = vtkPLYReader.newInstance();
+// ----------------------------------------------------------------------------
+// Example code
+// ----------------------------------------------------------------------------
+const reader = vtkPLYReader.newInstance({
+  duplicatePointsForFaceTexture,
+});
 const mapper = vtkMapper.newInstance({ scalarVisibility: false });
 const actor = vtkActor.newInstance();
 
@@ -25,19 +39,13 @@ mapper.setInputConnection(reader.getOutputPort());
 // ----------------------------------------------------------------------------
 
 function refresh() {
-  if (renderer && renderWindow) {
-    const resetCamera = renderer.resetCamera;
-    const render = renderWindow.render;
-    resetCamera();
-    render();
-  }
+  const resetCamera = renderer.resetCamera;
+  const render = renderWindow.render;
+  resetCamera();
+  render();
 }
 
 function update() {
-  const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
-  renderer = fullScreenRenderer.getRenderer();
-  renderWindow = fullScreenRenderer.getRenderWindow();
-
   renderer.addActor(actor);
 
   actor.getMapper().setScalarVisibility(true);
@@ -51,13 +59,11 @@ function update() {
 // Use a file reader to load a local file
 // ----------------------------------------------------------------------------
 
-const myContainer = document.querySelector('body');
-const fileContainer = document.createElement('div');
-fileContainer.innerHTML =
-  '<div>Select a ply file or a ply file with its texture file.<br/><input type="file" class="file" multiple/></div>';
-myContainer.appendChild(fileContainer);
+fullScreenRenderer.addController(controlPanel);
 
-const fileInput = fileContainer.querySelector('input');
+const fileInput = document.querySelector('input');
+const checkbox = document.querySelector('#duplicate_points_for_face_texture');
+checkbox.checked = duplicatePointsForFaceTexture;
 
 function handlePlyFile(file) {
   const fileReader = new FileReader();
@@ -88,10 +94,8 @@ function handleFile(event) {
   const dataTransfer = event.dataTransfer;
   const files = event.target.files || dataTransfer.files;
   if (files.length === 1) {
-    myContainer.removeChild(fileContainer);
     handlePlyFile(files[0]);
   } else if (files.length > 1) {
-    myContainer.removeChild(fileContainer);
     Array.from(files).forEach((file) => {
       const name = file.name.toLowerCase();
       if (name.endsWith('.ply')) {
@@ -110,8 +114,17 @@ function handleFile(event) {
 
 fileInput.addEventListener('change', handleFile);
 
+checkbox.addEventListener('change', (e) => {
+  const value = e.target.checked;
+  console.log('duplicate points for face texture', value);
+  window.location = `?duplicatePointsForFaceTexture=${value}`;
+  refresh();
+});
+
 // ----------------------------------------------------------------------------
 // Use the reader to download a file
 // ----------------------------------------------------------------------------
 
-// reader.setUrl(`${__BASE_PATH__}/data/ply/mesh.ply`, { binary: true }).then(update);
+if (url) {
+  reader.setUrl(url).then(update);
+}

Sources/IO/Geometry/PLYReader/index.d.ts

@@ -13,7 +13,17 @@ interface IPLYReaderOptions {
 /**
  *
  */
-export interface IPLYReaderInitialValues {}
+export interface IPLYReaderInitialValues {
+  /**
+   * Controls whether points are duplicated for face-texture mapping.
+   */
+  duplicatePointsForFaceTexture?: boolean;
+
+  /**
+   * The tolerance used to determine if two points are the same.
+   */
+  faceTextureTolerance?: number;
+}
 
 type vtkPLYReaderBase = vtkObject &
   Omit<
@@ -41,6 +51,16 @@ export interface vtkPLYReader extends vtkPLYReaderBase {
     | JSZipDataAccessHelper
     | LiteHttpDataAccessHelper;
 
+  /**
+   * Controls whether points are duplicated for face-texture mapping.
+   */
+  getDuplicatePointsForFaceTexture(): boolean;
+
+  /**
+   * Get the tolerance used to determine if two points are the same.
+   */
+  getFaceTextureTolerance(): number;
+
   /**
    * Get the url of the object to load.
    */