Giter VIP home page Giter VIP logo

potree-core's Introduction

Potree Core 2.0

npm version GitHub version

  • This project was originally based on Potree Viewer 1.6 and is now since version 2.0 based on the shiukaheng fork of the Potree-Loader.
  • Potree is a web based pouint cloud visualizer project created by Markus Schütz.
  • This project contains only the main parts of the potree project adapted to be more easily used as a independent library, the code was adapted from the original repositorys.
  • Support for pointclouds from LAS, LAZ, Binary files.
  • Some features require support for the following GL extensions
    • EXT_frag_depth, WEBGL_depth_texture, OES_vertex_array_object

Demo

Example

  • The project can be build running the commands npm install and npm run build.
  • Download the potree build from the build folder or add it to your project using NPM.
  • Include it alonside the worker folder in your project (can be found on the source folder).
  • The build is a ES module, that can be imported to other projects, threejs should be available as a peer dependency.
  • Bellow its a fully functional example of how to use this wrapper to load potree point clouds to a three.js project
const scene = new Scene();
const camera = new PerspectiveCamera(60, 1, 0.1, 10000);

const canvas = document.getElementById("canvas");

const renderer = new WebGLRenderer({canvas:canvas});

const geometry = new BoxGeometry(1, 1, 1);
const material = new MeshBasicMaterial({color: 0x00ff00});
const cube = new Mesh(geometry, material);
scene.add(cube);

const controls = new OrbitControls(camera, canvas);
camera.position.z = 10;

const pointClouds = [];

const baseUrl = "data/test/";
const potree = new Potree();
potree.loadPointCloud("cloud.js", url => `${baseUrl}${url}`,).then(function(pco) {
   scene.add(pco);
	pointClouds.push(pco);
});

function loop()
{
   potree.updatePointClouds(pointClouds, camera, renderer);

	controls.update();
	renderer.render(scene, camera);

	requestAnimationFrame(loop);
};
loop();

Notes

  • Since potree-core is meant to be used as library and not as a full software as potree some features are not available.
  • EDL shading is not supported by potree core.
  • Removed classification and clipping functionality.
  • Removed Arena 4D point cloud support.
  • Removed Entwine Point Tile file support.
  • GUI elements were removed from the library
    • PotreeViewer
    • Controls, Input, GUI, Tools
    • Anotations, Actions, ProfileRequest
    • Potree.startQuery, Potree.endQuery and Potree.resolveQueries
    • Potree.timerQueries
    • Potree.MOUSE, Potree.CameraMode
    • PotreeRenderer, RepRenderer, Potree.Renderer
      • JQuery, TWEEN and Proj4 dependencies

Potree Converter

  • Use the (Potree Converter)[https://github.com/potree/PotreeConverter/releases] tool to create point cloud data from LAS, ZLAS or BIN point cloud files
  • Potree Converter 1.8 creates a multi file structure with each node as an individual file.
  • Potree Converter 2.1 creates a single file for all points and separates files for hierarchy index, its faster to create files. Requires a HTTP server configured for file streaming.
  • Tool to create hierarquical structure used for point-cloud rendering using potree-core.
  • There are two main versions 2.1 witch generates 4 contained files with point data, hierarchy,
  • To generate a folder output from a input file run the command .\PotreeConverter '..\input.laz' -o ../output

TXT2LAS

  • The potree converter tool only supports las and laz files, so textural file formats such as .pts, .xyz, have to be first converted into a supported format.
  • The TXT2LAS tool from the (LASTools)[https://github.com/LAStools/LAStools] repository can be used for this effect.
  • To run the tool use the command .\txt2las64 -i input.pts -ipts -parse xyziRGB -set_scale 0.001 0.001 0.001 -set_version 1.4 -o output.laz

To Do

  • Supports logarithmic depth buffer (just by enabling it on the threejs renderer), useful for large scale visualization.
  • Point clouds are automatically updated, frustum culling is used to avoid unnecessary updates (better update performance for multiple point clouds).

potree-core's People

Contributors

archimagus avatar christjt avatar dependabot[bot] avatar dj-caddev avatar dragly avatar haakonflatval-cognite avatar haxersociety avatar larsmoa avatar maksnester avatar mihilranathunga avatar pmi-gbs avatar pramodcog avatar rokez98 avatar tentone avatar vadzim-rakevich-softensity avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

potree-core's Issues

Point cloud coordinates

Hey thanks for your great work with this!
I am having a problem loading a pointcloud within a threeJS scene.
I am using threeJS with potree-core to create a Mapbox Custom Layer that I am applying to a map rendered by react-map-gl
I am able to load pointclouds that in generic XYZ identity coordinates and show them on my map, but when I try to load pointclouds that contain geographic data (both in UTM projection and in WGS84 lat / lon) the cloud does not render correctly.
Any idea of what I am doing wrong?

Point don't appear in React

I have a pointcloud data created with PotreeConverter that i want to load with potree-core in a THREEjs scene.

when I run the scene as is, from a flask backend everything works, I have a point cloud and a bbox around it.
but when the scene is wrapped around a React component, the bbox is rendered but not the points

any reason it should act like this? from what I understand react is rendered on a shadowDOM which is separates from the original DOM, maybe it has something to do with it?

greyhound

Hi, i was wondering if the greyhound protocol is supposed to work with potree-core. i cant seem to get it working.

blue outline on adaptive sized points

I have been digging in on why this blue outline appears on the points.

I would be happy to work on maintaining the project if you can point me in the right direction.

image

Including Potree-Core breaks SSR

When including Potree Core in an application that uses Server Side Rendering a ReferenceError: document is not defined is generated.

This is caused by features.ts using the document in the root of the file so there is no way to prevent it from being called on the server side.

A proposed fix is PR #41

Alternatively, Features seems like it could be removed as it doesn't seem to be used in the code anywhere?

PoTree-Core Can't Load my Custom Point Cloud

I took a Binary PLY file of a tree stump and converted into a Potree formatted folder (using Potree-Converter v1.7). When I load into the original PoTree Project Directory, it renders just fine:
Screenshot 2021-02-24 171301

But when I try to render that same exact point cloud folder using Potree-Core, I get this error:
image

Any ideas why Potree-Core is not able to properly render this pointcloud architecture when the original Potree is?

Not the case with Potree

Thank you for making this project available,

In fact I have a remark on the fact that the nodes are loading continuously and remain in the scene even if the camera does not point towards them, which causes an overload of the memory by points will not be visible to the user ... which is not the case with Potree

thank you in advance
@tentone

Getting list of unclipped points

I have been digging through the code, and I can see how you would get the points that get mapped to pixels by webgl.

Is there any way to get a list of thepcIndex and pIndex of points that survive clipping?

Thank you,
Julian

z-axis up version

Is it the only one that wants the z-axis upwards? Is it just applymatrix to pointcloud?

WebXR multi-camera in VR mode !!!

Hi, thank you again,

I test the project with WebXR for a VR application, but once I apply the VR mode, I find myself with two cameras at the same time; that of the headset and that of the scene ... I do not understand is what it is a conflict between the camera of Potree and ThreeJS !

Thank you so much for the quick responses.
@tentone
in normal mode:
Capture d’écran (149)
in VR mode activated
Capture d’écran (150)

Pointcloud doesn't play nice with transparent meshes

Hi, not sure if this is an issue with potree-core, a side effect, or something to handle differently with my code:
We are mixing a large pointcloud with some meshes in the same scene, when selecting a mesh we want to affect it a semi-transparent material.

Here is the selected material, which works fine in a scene with only meshes:

 this.selectedMaterial = 
    new THREE.MeshStandardMaterial({
      transparent: true,
      color: "#2194ce",
      opacity: 0.8
    })

But when loading also a pointcloud, I have to set selectedMaterial.depthTest = false otherwise the selected mesh will mostly be invisible. Looks like there is an object in front which occlude it.

No selection:

Screen Shot 2019-11-05 at 15 14 02

Selection with depthTest = false:

Screen Shot 2019-11-05 at 15 13 29

Selection with depthTest = true:

Screen Shot 2019-11-05 at 15 14 23

Can't load octree from protected storage

Cannot add sas token when trying to download hierarchy.bin and octree.bin files.

I guess passing 'xhrRequest' param here and replacing 'fetch' with 'xhrRequest' when loading octree and hierarchy would fix the problem.

Another possible solution is to check how the path to octree.bin and hierarchy.bin is formed . Replacing ${this.url}/../octree.bin with ${this.url}.replace('/metadata.json' ,'/octree.bin') would solve the problem in my case.

Thanks.

`pcoGeometry` is undefined during clone, causes an error

Sorry for the obfuscated error, but I'm getting an uncaught error when I attempt to clone a scene with point clouds in it. It looks like this constructor is getting called without the pcoGeometry when the scene is cloned:

this.root = pcoGeometry.root;

Not sure if this is a three problem with calling constructors improperly, or a potree problem where it needs to be more defensively coded.

points clouds bounding box

First of all happy holidays, I was wondering about the reasoning behind having the pointcloud.boundingBox report the largest cube dimension while the actual bounding box is at pointcloud.pcoGeomtry.tightBoundingBox.

Shader version error with three >0.152

I have to set "three": "0.152.0" in order to get it to load, when I do anything higher I get:


Program Info Log: Vertex shader is not compiled.
�
VERTEX

ERROR: 0:3: 'version' : #version directive must occur before anything else, except for comments and white space
ERROR: 0:21: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:22: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:23: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:24: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:25: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:26: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:27: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:28: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:93: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:94: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:98: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:200: 'round' : no matching overloaded function found
ERROR: 0:202: 'texture' : no matching overloaded function found
ERROR: 0:202: '=' : dimension mismatch
ERROR: 0:202: '=' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'
ERROR: 0:203: 'round' : no matching overloaded function found
ERROR: 0:207: 'round' : no matching overloaded function found
ERROR: 0:208: 'round' : no matching overloaded function found
ERROR: 0:334: 'texture' : no matching overloaded function found
ERROR: 0:334: 'rgb' :  field selection requires structure or vector on left hand side
ERROR: 0:334: '=' : dimension mismatch
ERROR: 0:334: '=' : cannot convert from 'const mediump float' to 'highp 3-component vector of float'
ERROR: 0:341: 'texture' : no matching overloaded function found
ERROR: 0:341: '=' : dimension mismatch
ERROR: 0:341: '=' : cannot convert from 'const mediump float' to 'highp 4-component vector of float'
ERROR: 0:362: 'texture' : no matching overloaded function found
ERROR: 0:362: 'rgb' :  field selection requires structure or vector on left hand side
ERROR: 0:362: 'return' : function return is not matching type:
ERROR: 0:419: 'mix' : no matching overloaded function found
ERROR: 0:419: 'return' : function return is not matching type:
ERROR: 0:425: 'mix' : no matching overloaded function found
ERROR: 0:425: 'return' : function return is not matching type:
�

  1: #define SHADER_TYPE RawShaderMaterial
  2: #define SHADER_NAME 
> 3: #version 300 es
  4: 
  5: 
  6: #define tree_type_octree
  7: #define adaptive_point_size
  8: #define square_point_shape
  9: #define color_type_rgb
FRAGMENT

ERROR: 0:3: 'version' : #version directive must occur before anything else, except for comments and white space
ERROR: 0:35: 'out' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:44: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
ERROR: 0:48: 'in' : storage qualifier supported in GLSL ES 3.00 and above only
�

  1: #define SHADER_TYPE RawShaderMaterial
  2: #define SHADER_NAME 
> 3: #version 300 es
  4: 
  5: 
  6: #define tree_type_octree
  7: #define adaptive_point_size
  8: #define square_point_shape
  9: #define color_type_rgb

Shader error with THREE v154

I'm running into a shader error with latest potree-core (2.07), THREE v154, Windows 11, latest Chrome 122.

The problem appears to be the #version 300 es directive in the first line. attribute and varying are deprecated in OpenGL ES 3, in favor of in and out.

Error in vertex shader :

ERROR: 0:21: 'attribute' : Illegal use of reserved word

 1:		#version 300 es
 2:		#define SHADER_TYPE RawShaderMaterial
 3:		#define SHADER_NAME 
 4:		#define tree_type_octree
 5:		#define attenuated_point_size
 6:		#define circle_point_shape
 7:		#define color_type_rgb
 8:		#define clip_outside
 9:		#define fixed_opacity
10:		#define output_color_encoding_linear
11:		#define input_color_encoding_sRGB
12:		#define use_clip_box
13:		#define MAX_POINT_LIGHTS 0
14:		#define MAX_DIR_LIGHTS 0
15:		precision highp float;
16:		precision highp int;
17:		
18:		#define max_clip_boxes 30
19:		#define max_clip_planes 30
20:		
21:		attribute vec3 position;
22:		attribute vec3 color;

And similar error in the fragment shader :

ERROR: 0:42: 'varying' : Illegal use of reserved word

 1:		#version 300 es
 2:		#define SHADER_TYPE RawShaderMaterial
 3:		#define SHADER_NAME 
 4:		#define tree_type_octree
 5:		#define attenuated_point_size
 6:		#define circle_point_shape
 7:		#define color_type_rgb
 8:		#define clip_outside
 9:		#define fixed_opacity
10:		#define output_color_encoding_linear
11:		#define input_color_encoding_sRGB
12:		#define use_clip_box
13:		#define MAX_POINT_LIGHTS 0
14:		#define MAX_DIR_LIGHTS 0
15:		precision highp float;
16:		precision highp int;
17:		
18:		#if defined paraboloid_point_shape
19:		#extension GL_EXT_frag_depth : enable
20:		#endif
21:		
22:		uniform mat4 viewMatrix;
23:		uniform vec3 cameraPosition;
24:		
25:		uniform mat4 projectionMatrix;
26:		uniform float opacity;
27:		
28:		uniform float blendHardness;
29:		uniform float blendDepthSupplement;
30:		uniform float fov;
31:		uniform float spacing;
32:		uniform float pcIndex;
33:		uniform float screenWidth;
34:		uniform float screenHeight;
35:		
36:		uniform sampler2D depthMap;
37:		
38:		#ifdef highlight_point
39:		uniform vec4 highlightedPointColor;
40:		#endif
41:		
42:		varying vec3 vColor;
43:		
44:		#if !defined(color_type_point_index)

Thanks
Iven

Wrong picking index - Any clue ?

Hello,
I have issues with picking (works well in Potree), been trying to fix it by going deep into potree's code and this typescript project.

    private static addPositionToPickPoint(
        point: PickPoint,
        hit: PointCloudHit,
        values: BufferAttribute,
        points: Points
    ): void {
        console.log(`values length ${ values.array.length } / index ${ hit.pIndex }`);
        point.position = new Vector3()
            .fromBufferAttribute(values, hit.pIndex)
            .applyMatrix4(points.matrixWorld);
    }

At the end we're getting a pIndex which corresponds to the bufferGeometry position index of the pcIndex's Node.
To find the final position, getting a vector3 from the bufferGeometry is indeed simple.

While logging the bufferGeometry values lenght and the pIndex; I have found that most of the time the pIndex is too high for the lenght of the bufferGeometry (.fromBufferAttribute will take in this code the 3*pIndex because of size of Vector3).

I tried concerning this issue :

  • Debugging buffer's iBuffer and render target using Texture helper - they seems to match Potree's.
  • See if we were missing nodes on the ray but that does not seems to be the case.

My current hypothesis is that the pick parameters of the pick material are wrong, and the pIndex value we're getting in the iBuffer is wrong aswell.

Wonder if someone had this issue or someone fixed it elsewhere ?

original position lost?

Hi

I am using CloudCompare and Potree.exe in order to load multiple ply files into one LAS file and then convert it to potree format.

I have made a small modification on the fragment shader in order to be able to gpu pick the positions using vPosition that in the github files is only on the fragment shader and not in the vertex

basicallyI set in the vertexShader vPosition = position and gl_FragColor = vPosition on the fragmentShader.

I get the coordinates but they are displaced. I guess it is related to point organization?

The script I am using to convert files is this:

rem set OPENSSL_CONF=
set PATH=E:\AIRMOV3D\Sotfware\devel\CloudCompare_v2.12.alpha_bin_x64;E:\AIRMOV3D\Sotfware\Devel\PotreeConverter_2.0_windows_x64;%PATH%
rem echo *********************************************************************************
rem echo * start of ply2nxz.bat
rem echo * start of %0 %1 %2 %3 %4
rem echo *********************************************************************************
set cmdFolder=E:\AIRMOV3D\Code\Devel\cmd\
set inFolder=%1
set outFolder=%2
set format=%3
set format2=LAS
set base=%~n2
echo infile: %inFile%
echo outFolder: %outFolder%
echo base: %base%
echo format: %format%

echo "Step 1 --> convert to LAS"
rem call CloudCompare.exe -SILENT -O %inFolder%\%inFile% -AUTO_SAVE OFF -C_EXPORT_FMT %format2% -SAVE_CLOUDS FILE %outFolder%\%base%.%format%

rem SETLOCAL EnableDelayedExpansion
cd /D %inFolder%
set _filelist=
for /f "delims=|" %%f in ('dir /b "*.ply"') do (
	set "_filelist=!_filelist! -O %%f"
)
set _filelist=%_filelist:,,=%
echo %_filelist% > filelist.txt
call CloudCompare.exe -silent %_filelist% -LOG_FILE .\log.txt -AUTO_SAVE off -MERGE_CLOUDS -C_EXPORT_FMT %format2% -SAVE_CLOUDS FILE %outFolder%\A400M.%format%

cd /D %cmdFolder%


rem PotreeConverter.exe %outFolder%\%base%.%format% -o %outFolder% --overwrite --output-format %format%

echo "Step 2 --> convert to POTREE"
:wait
if not exist "%outFolder%\A400M.%format%" (
	echo "waiting..."
	timeout /t 1 /nobreak > nul
	goto wait
)

rem DIR "%outFolder%\%base%.%format%"
echo PotreeConverter.exe %outFolder%\A400M.%format% -o %outFolder% --overwrite -p myHomePage
call E:\AIRMOV3D\Sotfware\Devel\PotreeConverter_2.0_windows_x64\PotreeConverter.exe %outFolder%\A400M.%format% -o %outFolder% 

echo "End"

Is there any way to get the original coordinates when gpu picking?

Here the function I use to gpupick

function readMousePixels() {
					renderer.render( scene, camera)
					var fb = gl.createFramebuffer();
					renderer.setRenderTarget(null);
					if (mouseRenderTarget === undefined) {
						mouseRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { autoClear: true, minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type: THREE.FloatType } );
					}
					if (read === undefined) {
						read = new Float32Array(4);
					}
					
					renderer.setRenderTarget(mouseRenderTarget);
					renderer.render( scene, camera);
					renderer.setRenderTarget(null);
					renderer.readRenderTargetPixels( mouseRenderTarget, mouse.x, mouseRenderTarget.height - mouse.y, 1, 1, read );
					console.log("pick: ", read);
					renderer.setRenderTarget(null);
					
					
					if (read[0] + read[1] + read[2] + read[3] !== 0 && read[0] * read[1] * read[2] * read[3] !== 0) {
						console.log(read);
						controls.target.set(read[0]  , read[1], read[2] )
						controls.update();
					}
					
					renderer.render( scene, camera)
					return read;
				}

Best regards

Material pointColorType and gradient does nothing

I want to change how my pointcloud is colored by changing the pointColorType. I've tried all possible types, but the pointcloud doesn't change in color. It just stays in RGB. Elevation. intensity, etc. are not doing anything. I've also tried multiple gradients, but none of them change anything.

Am I missing something or is it broken?

Possible to use interpolated shader / paraboloid point shape?

Hi, and thanks for the hard work! I tried switching to Potree.PointShape.PARABOLOID for material.shape, but ended up with WebGL throwing errors on undefined terms. After some digging in Potree I found that I needed to get extensions from WebGL by the getExtension method as follows:
let gl = renderer.getContext(); gl.getExtension('EXT_frag_depth'); gl.getExtension('WEBGL_depth_texture'); let extVAO = gl.getExtension('OES_vertex_array_object'); if(!extVAO){ throw new Error("OES_vertex_array_object extension not supported"); }
However, it still calculates scene depth incorrectly. I'm not familiar with WebGL at all, but removing the line pos.z += wi * vRadius; in the fragment shader makes it render correctly again, albiet without the paraboloid depth applied to the square shapes. Perhaps vRadius is somehow passed down incorrectly?

Thanks,
Heng.

Point Picking returning NaN

Hi! I'm trying to use the point-cloud-octree-picker, but I am having several problems in doing it. With the latest commit, when i hit the point cloud it returns a NaN. I checked the code and it seems that the hit.pIndex does not find the respective position attribute index in the PointCloudOctree.

I already tried switching back to this method of acessing
const x = values.array[3 * hit.pIndex];
const y = values.array[3 * hit.pIndex + 1];
const z = values.array[3 * hit.pIndex + 2];

    point.position = new Vector3(x, y, z).applyMatrix4(points.matrixWorld);

I have tried to reverse the code, however the pickpoint does not work properly. Any idea how I can use this feature?

useEDL not works , exception : Fragment shader is not compiled.

Set material.useEDL = true will throw excetpion :

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.

FRAGMENT

ERROR: 0:275: 'gl_FragColor' : undeclared identifier
ERROR: 0:275: 'a' :  field selection requires structure, vector, or interface block on left hand side
ERROR: 0:275: 'assign' : l-value required (can't modify a const)

  270: 			gl_FragColor.a = log2(linearDepth);
  271: 		#endif
  272: 		
  273: 	#else
  274: 		#if defined(use_edl)
> 275: 			gl_FragColor.a = vLogDepth;
  276: 		#endif
  277: 	#endif
  278: 
  279: 	#ifdef highlight_point
  280: 		if (vHighlight > 0.0) {
  281: 			gl_FragColor = highlightedPointColor;

attributes.position.array is missing

I am trying to find the attributes.position.array of my pointcloud, present in pointclouds when rendered after using PotreeConverter. My final goal is to get its center in order to move it around. To be more specific, centering with position.set(0,0,0) is not enough for every model so I figured out how to move it using each point's position so I need that array.
Instead, a ranged structure is being returned but I am not sure if I can still use it for my purpose.

pco.pcoGeometry.pointAttributes.attributes:

Screenshot 2024-04-19 at 15 25 08

This code is based on the example that we have in the README file:

  const loadPointCloud = async (url, position = null, rotation = null, scale = null) => {
    const pco = await potree.loadPointCloud(url, (url) => `${url}.laz`);

    // TODO check these
    pco.material.size = 1.0;
    pco.material.shape = 2;
    pco.material.inputColorEncoding = 1;
    pco.material.outputColorEncoding = 1;

    if (position) {
      pco.position.copy(position);
    }
    if (rotation) {
      pco.rotation.copy(rotation);
    }
    if (scale) {
      pco.scale.copy(scale);
    }

    console.log("Pointcloud file loaded", pco);
    pco.showBoundingBox = false;

    addPointCloud(pco);

    console.log(pco.geometry) // undefined
    console.log(pco.attributes) // undefined
    console.log(pco.pcoGeometry.attributes) // undefined
    console.log(pco.root.geometry) // null
    console.log(pco.root.attributes) // undefined

    const center = getCenter(pco.children[0].geometry.attributes.position.array);
  
    pco.position.sub(new Vector3(center.x, center.y, center.z));
  };

The following code is mine and is used to generate a model true center that truly reflects an average of every point's position.

const getCenter = (posArray) => {
  const posChunks = getPosChunks(posArray);
  let acumX = 0;
  let acumY = 0;
  let acumZ = 0;

  posChunks.forEach((ch) => {
    acumX += ch[0];
    acumY += ch[1];
    acumZ += ch[2];
  });

  const center = {
    x: acumX / posChunks.length,
    y: acumY / posChunks.length,
    z: acumZ / posChunks.length
  };

  console.log("center", center);
  return center;
};

const getPosChunks = (positions) => {
  const chunkSize = 3;
  const positionChunks = [];
  for (let i = 0; i < positions.length; i += chunkSize) {
    const chunk = positions.slice(i, i + chunkSize);
    positionChunks.push(chunk);
  }

  return positionChunks;
};

export { getCenter, getPosChunks };

Finally, I am able to move it to origin with this line:

pco.position.set(-center.x, -center.y, -center.z);

or even create another pointcloud from a centered set of points:

    const center = getCenter(points.geometry.attributes.position.array);

    // model is being transported to Origin since it gets difficult
    // to manipulate when too far from it
    centeredPoints = points.map(({ x, y, z }) =>
            new THREE.Vector3(x, y, z).sub(center)
    );

Any ideas of where can I find this positions array?
If not possible, does someone know how to properly get a pointcloud center's position without accessing every point coordinates as I am trying to do?

Question: clipping boxes and clipping planes

Hello!

I saw in the README that you removed code related to clipping. Is it related to clipping boxes provided by Potree? Or is it related to Threejs clipping planes? Or both maybe?
In your opinion, how hard would it be to restore whether Potree boxes or Three clipping planes?

Thank you :)

Washed out colors when compared to similar `potree` scene

I’m experiencing an issue where the colors are washed out compared to the standard potree viewer.

potree-core implementation
potree-core

V.S.

potree implementation
potree

Here is my React code to reproduce:

import { FlyControls, PointerLockControls } from '@react-three/drei';
import { Canvas, useFrame, useThree } from '@react-three/fiber';
import { PointSizeType, Potree, type PointCloudOctree } from 'potree-core';
import { useEffect, useState } from 'react';
import { cn } from '~/lib/utils';
import { useStore } from './store';

const potree = new Potree();

function Renderer() {
	const { size, shape, budget, setCameraPosition, setCameraRotation } = useStore();
	const scene = useThree((state) => state.scene);
	const [pointClouds, setPointClouds] = useState<PointCloudOctree[]>([]);

	useEffect(() => {
		potree.pointBudget = budget;

		(async () => {
			const result = await potree.loadPointCloud(
				'metadata.json',
				(url) => `/scans/testing_scan/output/${url}`
			);
			
			result.position.set(0, 0, 0);

                        // Ensure the axes are aligned with the world axes
			result.rotation.x = -Math.PI / 2;

			result.material.shape = shape;
			result.material.size = size;

			// Set the point size type to adaptive
			result.material.pointSizeType = PointSizeType.ADAPTIVE;

			// Set to proper shader
			result.material.updateShaderSource();

			console.log(result.material);

			scene.clear();
			scene.add(result);
			setPointClouds([result]);
		})();
	}, []);

	useEffect(() => {
		potree.pointBudget = budget;
	}, [budget]);

	useEffect(() => {
		if (!pointClouds.length) return;

		// Only ever one point cloud
		const pointCloud = pointClouds[0];

		pointCloud.material.shape = shape;
		pointCloud.material.size = size;
	}, [size, shape]);

	useFrame(({ gl, camera }) => {
		potree.updatePointClouds(pointClouds, camera, gl);
		gl.clear();
		gl.render(scene, camera);
		setCameraPosition([camera.position.x, camera.position.y, camera.position.z]);
		setCameraRotation([camera.rotation.x, camera.rotation.y, camera.rotation.z]);
	});

	return (
		<>
			<PointerLockControls selector="#potree-canvas">
				<FlyControls makeDefault movementSpeed={5} rollSpeed={0} />
			</PointerLockControls>
		</>
	);
}

export default function ({ className }: { className?: string }) {
	return (
		<div className={cn('relative h-full w-full rounded-lg border bg-card shadow-sm', className)}>
			<Canvas id="potree-canvas">
				<Renderer />
			</Canvas>
		</div>
	);
}

logarithmicDepthBuffer: true throws error

I've tested the issue using the given example, but it throws an error. Using Google Chrome | 77.0.3865.120 (Official Build) (64-bit) (cohort: Stable)
Capture
Capture2
Thanks,
Heng

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.