Return to Instructions

Potree Instructions

Starting Point

The starting point for these instructions is to have point cloud model open in Cyclone REGISTER 360 that you have decided is ready to be converted to the Potree format.

Contents

Cyclone REGISTER 360
Cloud Compare
Potree
Photogrammetry
Bounding Box

Cyclone REGISTER 360

  1. If you don't know how to clear points, you can find tutorial on Youtube, or ask Dave. Usually we use polygon to select the points you do not want and click delete inside. Keyboard shortcut is F for selecting points. And then Shift+I to delete the points. If you accidently delete the points you want to keep, don't freak out. Select the area with the points you want using F, and click restore inside in the bottom of the screen.
  2. After finishing editing the scans, click optimize bundle. It is an optional step. But make sure you wait the whole model to show up and check it three times before you want to export. (Believe me you want to check it three times and make sure everything is okay before you export)
  3. Click FINALIZE on the top. Click the small ACCEPT on the bottom. Wait for a while and click and big red ACCEPT. And then it should direct you to the final step REPORT.
  4. Under Properties, click Publish Option.
    • Select e57(as one file).
    • Click Export Options and select Single point cloud(unstructured).
    • Click Decimate Setups/Point Cloud* and select Reduce cloud (single point cloud) . Usually 5 millimeter is okay. But if you think the model is too big, you can put 6 mm to be safe.
  5. Final step in this section! Click big red Publish in the bottom right. And click a few OK. And you wait. It might take a long time(up to few hours) to export depends on how big the model is. So I suggest you to do this process the night before and come back the next day to check the model.

Cloud Compare

  1. Hopefully your model is exported correctly and we can proceed to the next step.
  2. Open CloudCompare, and drag your e57 file to the middle of the screen to open.
  3. Ensure you file is fully loaded.
  4. Select each of the files in the file structure, and click the button on the taskbar on the middle of the upper left side that, when hovered over, says merge. At the prompt select no to generating a scalar index.
  5. The files will disappear on the naviator to the left and a single file will take its place. Select it and on the left bottom window of attribute change color from scalar field to RGB this may take several moments to take effect, but the model should change from a dark hue to a more normal looking color scheme.
  6. Normally we want to clear all the points we do not want in Cyclone Register 360 before we export anything as e57, but just in case there are points you want to clear before we export to Potree, you can use the segmentation tool.
    • On the tool bar at the top, there is a icon looks like scissor, click on that. Then a sub tool bar should show up.
    • In the top middle, you will see Segmentation. If it says ON, it means you use select the points. If it doesn't say ON, click on the left icon of the small tool bar to turn it on.
    • On the 3rd icon, you can select of the shape, it is usually easier to use polygon instead of the rectangle.
    • Then you can left click and drag to create a polygon of area of points you want to delete, and right click when you are finished.
    • Click either the "segment in" or "segment on" icon on the segmentation toolbar. It doesn't matter which ones you select, just make sure you are sticking the one you start with.
    • Click the green check icon, it might take couple seconds for CloudCompare to segment the points out.
    • On the left, there should be two files showing up, click on the file and see which one contains the points you want or you do not want. Delete the file with the points you do not want.
  7. Find the subsample button in the middle of the taskbar on the top of the window. Ensure you have your model selected in the navigator and select this button. Select random subsample from the options. We can keep the maximum points. 300M - 400M is usually good for us to export. It if fine if there are more points, but you might want to double check if there is enough space in the drive. This operation will take some time as it subsamples the cloud.
  8. The model is ready to be exported to las format which is a compatible type with Potree. Select 'Save As' with the subsample selected as you would with any other program and choose filename, destination, and be certain to select las and not las 1.3 or las 1.4. This save operation will take several minutes.

Getting Model onto Potree

  1. Getting the las file to potree can be tricky. Make sure each part of the following command is correct of the model will not be processed correctly.

    You will need the following information

    • The path of the PotreeConverter.exe, which at the time of documentation was D:\potree21\PotreeConverter.exe
    • The path of the las file. This is typically of the form E:\potree\folder\file.las
    • The desired output location. Generally, use X:\v21\pointclouds\folder, folder is the name of the model in general

    Note: you might need to map the drive to X and Z folder first. If you need to map them first, go open File Explorer, click This PC, click Computer at the top of the bar, click Map Network Drive, and select the drive you need.

  2. The command for starting the Potree process will take the following form:
    ...\PotreeConverter path\to\file.las -o \output\directory --generate-page NameOfPage[1 word]
    Therefore the command, assuming the above paths are correct and I want to export Orsanmichele, will be:
    D:\potree21\PotreeConverter.exe E:\potree\Orsanmichele\Orsanmichele.las -o X:\v21\pointclouds\Orsanmichele --generate-page orsanmichele
    If you did not start with D drive in command prompt, type in D:
  3. Go to X drive, v21, pointclouds, and click the folder you just upload the files to. You should see a html page and a folder.
    • Click into the folder and you should see three things which are hierachy.bin, metadata.json, and octree.bin.
    • If you did not see these three files with the exact names, you have to expore the las file using Command Prompt again. It might take couple tries to get the right file to export to the v21 folder.If it still doesn't work, you might need to export the whole las file from CloudCompare again.
    • Assume you have those three correct files, cut them and move them directly to the folder under v21/pointclouds. Using Orsanmichele as our example again, it means those three files should be move to X:\v21\pointclouds\Orsanmichele, instead of any subfolder.
    • Then move the html page to X:\v21\pages.
  4. Go to 3d.wlu.edu/v21, click pages, and select the model you just made and check if it works. If it shows up properly, you can proceed to the next step of adding annotations and Photogrammetry. If not, below are some tips on fixing the problem.
    • Click on the three dots on the top right bar, it says "Customize and control Google Chrome." Move the mouse to More Tools and than click on Developer Tools. Click Console on the top bar and it will show you some red lines where contain bugs. Try to fix those errors and the model might show up.
    • Open the html page in Visual Studios, and open another html page that contains a good model on Visual Studios as well. Compare the codes between two and try to adjust accordingly
    • There is one line of code you might need to delete to make the model more clear. The code is viewer.scene.addPointCloud(pointcloud)
    • Add a line if it was not there: viewer.useHQ = true
    • Change viewer.setEDLEnabled to true
  5. Changing the scene of the point cloud
    • On the far left of the web page under the folder titled, “other” is the camera option. Clicking on that will show the coordinates of the camera position and target as you move around the point cloud. You can change the default camera by adding these two lines of code under the group of code that loads in the point cloud.
      • Viewer.scene.view.position.set(x,y,z) This is the camera position
      • Viewer.scene.view.lookAt(x,y,z) This is the camera target
    • To add an annotation to the point cloud, copy the following code, paste it below the camera position, and target code lines.
      • Viewer.scene.addAnnotation([x,y,z], {"cameraPosition":[x,y,z],"cameraTarget":[x,y,z],"title": "insert name here", "description": "insert description here"})

Adding a Photogrammetry Model

Required: a .obj file, a .mtl file, & a .jpg texture file. All named similarly, Ex. mouse.obj, mouse.mtl, mouse.jpg

  1. Locate the directory where the Potree html file you would like to modify is. In that directory, there will be a folder called 'libs', in the following directory put BOTH the .obj file and .mtl file libs/potree/resources/models. Then put the texture .jpg file in the following directory libs/potree/resources/models.
  2. The following code will be a framework for inserting the model into the Potree html file.
    The first highlighted .jpg file is where you will put the name of the texture for the object. The second highlighted .obj file is where you will put the name of the object file for your model.
    The orange text represents the three characteristics that determine how the model appears in the webpage. The first is a positional location set somewhere inside Potree's coordinate system, the second is the scalar value for the size of the model and the third is the rotational value. This will require some tuning to get the model in place. 
    3. {
    let manager = new THREE.LoadingManager();
    manager.onProgress = function ( item, loaded, total ) {
        console.log( item, loaded, total );
    };
    let textureLoader = new THREE.TextureLoader( manager );
    let texture = textureLoader.load(`${Potree.resourcePath}/textures/mouse.jpg`);
    let onProgress = function ( xhr ) {
        if ( xhr.lengthComputable ) {
            let percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round(percentComplete, 2) + '% downloaded' );
        }
    };
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;

    let onError = function ( xhr ) {};
    let loader = new THREE.OBJLoader( manager );
    loader.load(`${Potree.resourcePath}/models/mouse.obj`, function ( object ) {
        object.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
                child.material.map = texture;
            }
        } );

        object.position.set(-10, -8.578, -1);
        object.scale.multiplyScalar(1.075);
        object.rotation.set(Math.PI / 2, Math.PI/32+1*Math.PI/150,0);

        viewer.scene.scene.add( object );

        viewer.onGUILoaded(() => {
            // Add entries to object list in sidebar
            let tree = $(`#jstree_scene`);
            let parentNode = "other";

            let artID = tree.jstree('create_node', parentNode, {
                    text: "Bigallo",
                        icon: `${Potree.resourcePath}/icons/triangle.svg`,
                    data: object
                },
                "last", false, false);
            tree.jstree(object.visible ? "check_node" : "uncheck_node", artID);

            //tree.jstree("open_node", parentNode);
        });
            
    }, onProgress, onError );
}
  3. This code should be placed within the <script> </script> tags and after the Potree.loadPointCloud(); function.