PLYreader on web but not showing data

Support
1

Hey everyone,right now I’m working on a project that can show ply file on web pages.
I discovered that some file can be shown but somehow the file I downsampled cannot be shown.
Here is the code below:

const container = document.querySelector('#container');


let renderer = null;
let renderWindow = null;
const cone = vtk.Filters.Sources.vtkConeSource.newInstance();
const actor = vtk.Rendering.Core.vtkActor.newInstance();
const mapper = vtk.Rendering.Core.vtkMapper.newInstance();
const reader = vtk.IO.Geometry.vtkPLYReader.newInstance();
const openGLRenderWindow = vtk.Rendering.OpenGL.vtkRenderWindow.newInstance();


actor.setMapper(mapper);
mapper.setInputConnection(reader.getOutputPort());


// Render
function refresh() {
	if (renderer && renderWindow) {
		const resetCamera = renderer.resetCamera;
		const render = renderWindow.render;
		resetCamera();
		render();
	}
}
function update() {

	renderWindow = vtk.Rendering.Core.vtkRenderWindow.newInstance();
	renderer = vtk.Rendering.Core.vtkRenderer.newInstance();
	renderWindow.addRenderer(renderer);
	// Create the full screen render window inside the container

	openGLRenderWindow.setContainer(container);
	openGLRenderWindow.setSize(1000, 1000);
	renderWindow.addView(openGLRenderWindow);
	// Interactor
	const interactor = vtk.Rendering.Core.vtkRenderWindowInteractor.newInstance();
	interactor.setView(openGLRenderWindow);
	interactor.initialize();
	interactor.bindEvents(container);
	// Interactor style
	const trackball = vtk.Interaction.Style.vtkInteractorStyleTrackballCamera.newInstance();
	interactor.setInteractorStyle(trackball);

	renderer.addActor(actor);

	actor.getMapper().setScalarVisibility(true);
	const clr = { r: 250 / 255.0, g: 250 / 255.0, b: 250 / 255.0 };
	actor.getProperty().setColor(clr.r, clr.g, clr.b);

	refresh();
}
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);

const fileInput = fileContainer.querySelector('input');



function handlePlyFile(file) {
	const fileReader = new FileReader();
	fileReader.onload = function onLoad(e) {
		reader.parseAsArrayBuffer(fileReader.result);
		update();
	};
	fileReader.readAsArrayBuffer(file);
}



function handleImgFile(file) {
	const fileReader = new FileReader();

	fileReader.onload = () => {
		const image = new Image();
		image.src = fileReader.result;
		const texture = vtkTexture.newInstance();
		texture.setInterpolate(true);
		texture.setImage(image);
		actor.addTexture(texture);
		refresh();
	};
	fileReader.readAsDataURL(file);
}

function handleFile(event) {
	event.preventDefault();
	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')) {
				handlePlyFile(file);
			}
			if (
				name.endsWith('.png') ||
				name.endsWith('.jpg') ||
				name.endsWith('.jpeg')
			) {
				handleImgFile(file);
			}
		});
	}
}

fileInput.addEventListener('change', handleFile);

Also,I woould really like to know if there is any way I can show my ply file as points instead of polydata in Web interface.
Thank you!

2

The parseAsArrayBuffer is meant for binary PLY file while the parseAsText is meant for text PLY file. We don’t have any automatic detection built-in.

Can you explain what you mean by “points instead of polydata”… Your data is a polydata, but you can render that polydata as just points. You can look at this example for toggling the actor representation.

3

Thank you for replying.
What I meant is that when I upload the ply file and visualize it, it looks like it is composed by many planes, but not displayed as point cloud.

4

Can you share your file?

5

Sure! Here are my files:
[cube_model.ply - Google Drive]
and the downsampled one:
(Model_downsampled.ply - Google Drive)

6

So the first box load and render fine.
The second one is missing any cell definition so it won’t render anything unless you reference the points as vertex.