doxel / doxel-viewer

doxel-viewer

Pointcloud viewer for https://github.com/doxel/doxel-angular

Actually a wrapper for Potree to display openMVG pointclouds featuring:

• thumbnails bar with original images
• smooth camera transitions between estimated camera locations (while scrolling the thumbs bar or in play mode)
• relative camera positioning (click on the current thumbnail to switch between relative and original camera position)
• play mode, to move the camera along all the estimated camera locations (or relatively: you can move the camera during or before the animation)
• camera frustum display
• undistorted image overlay
• show location on map from exif GPS info

Standalone installation (for testing and demonstration purposes)

git clone --recursive https://github.com/doxel/doxel-viewer.git
cd doxel-viewer
npm install
bower install
gulp

doxel-viewer's Issues

Potree controls cannot be used

potree/potree#300 (comment)

potree buttons

potree buttons for measuring are not selectable.

switch camera pose on scroll

Twitter authentication gives Internal server error

Trying to log in with twitter auth gives Internal Server Error

Continuous camera travelling and rotations

optionally using timestamps for setting speed

rotation center should stay at original camera position

If you select a pose and use the mousewheel to go backward then rotate, the rotation center is still the original camera position. However if you switch to the next pose and rotate, the rotation center is now the webgl camera position.

document usage

Document usage with overlays, not only in README.md

project poses on points and bounding sphere

build panoramas

Define new camera paths

It would be nice to have to allow the user to define camera paths or to define automatically camera paths.

For example between the nearest poses instead of sequential poses, or rotating around the "center"(s) of the cloud (where the density is higher)

The potree viewer we use is using three.js and three.js controls, and if we where moving the scene camera, it would jump back where it was set by the three.js controls when using the associated input device.

Thats why new camera position/rotation must be reflected in three.js controls internal variables (we had to study the three.js controls code for this - we do not support every three.js controls yet)

You can look at how it's done today for doxel-viewer, where we interpolate the camera position/rotation between poses while scrolling the images list or when selecting a given thumbnail, or when using the play button.

From here and below

doxel-viewer/js/doxel-viewer.js

Line 656 in 96c91c0

* @method viewer.showPose

In the viewer there is always a pose selected (thumbnail). It is the current integer pose. We interpolate the camera pose between the integer poses, call it the interpolated pose.

The user is always able to move or rotate the camera using the three.js controls while we move the camera.

To allow this we compute the relative translation/rotation between the current pose position/rotation and the current camera position/rotation, then we apply this relative translation/rotation when moving the camera on the path (which in our case is the path between poses - for the play and scroll modes)

However it would also be possible (but less nice) to simply disable the three.js controls while moving the camera

Fixed pose-relative camera position / rotation while scrolling or clicking thumbnails

Ideally the rotation/translation relative to the currently selected pose/thumbnail should be conserved while moving the camera using the scrollbar or clicking on another thumbnail

Clicking a second time on the thumbnail could cancel the relative rotation/translation

Actually, using the scrollbar after moving away from the camera pose associated to the selected thumbnail, make the camera jump to that position.

replace demo data by user's own data

Hi, first of all, thank you for this great tool! I successfully got the demo running. I wonder if you have any document showing how to make it run with user's own data. I have the point cloud and the camera pos in .nvm file generated by VisualSFM. Then I have used Potree Converter and Potree to display the point cloud from web browser. How did you convert those data to display in doxel viewer?

Here are the data I have:

1. .ply file for the point cloud (generated by Potree Converter)
2. all image sequences
3. camera pos ( [x y z] for position and [w q p r] for Quaternion) for each image

I suppose you use example/viewer/frustums.ply for recording all camera pos. Did you use any tool to generate this file?

Really appreciate for any help!

add player controls

play, stop, etc

Mouseup in iframe while scrolling should propagate to scrollbar

else the scrollbar is still active when the cursor come back

Uncaught ReferenceError: RecordRTC is not defined

When testing the record button on the master branch with "gulp" (and connect) pressing on the rec button I have:

Uncaught ReferenceError: RecordRTC is not defined
at Potree.Viewer.viewer.rec (potree.html:135)
at HTMLAnchorElement. (viewer.html?src=example:74)

But it works on the doxel branch through https://doxel.org/doxel/viewer (the button is hidden, reload the page with localStorage.rec=1)

metadata_size in viewer.json

Along with the jpeg name. Actually default 50k value is used

Loging in with facebook doesn't work

Tryin to log in with Facebook auth gives the following error message:

App Not Setup: This app is still in development mode, and you don't have access to it. Switch to a registered test user or ask an app admin for permissions.

As seen in the attached image:

Compute relative camera position in the camera coordinates system

Compute and apply relative camera position in the camera coordinates system, so that if you go backwards and the camera circles around something you stay behind the camera

fix camera position/rotation on pose change when using other controls

or disable pose change when using earth controls and flight mode as workaround

Disable interface before iframe onload

Better record mode

Recording the WebGL canvas using RecordRTC and compressing to webm on the fly leads to skipped frames and jerky videos.

A smoother approach is to save the canvas.toDataUrl() blobs at three.js rendering time (for later compression) before requesting the next frame.

It could be done server side using electron, to generate preview video or pictures to be displayed on social medias when posting the cloud's url

Camera frustum and image ontop of the pointcloud.

We need:

• one button to show the camera frustum/s (the button have 3 positions: no frustrums, one camera frustrum, all visible cameras frustums. )
• and one button to show the image on top of the pointcloud

Depth of field effect

it would be nice to have some GLSL shader implementing a "depth of field" effect, to blur or hide or color the points that are closer or farther than a plane or volume perpendicular to the camera axis (or a spheric wall around the camera position)

Last thumbnail not displayed

Need to comment the "break" in load-image-meta.js after 'Invalid meta data: Invalid segment size" here https://github.com/blueimp/JavaScript-Load-Image/blob/0da08e062d47ba61f68e3971980e9fd8c05218aa/js/load-image-meta.js#L112

For some reason (maybe a jpeg_metadata_size issue ?) offset+markerLength == dataView.byteLength+1 when processing the last thumb

No option to reset password

In the login prompt, there is no apparent way to reset a lost password.

Override potree viewer 'reset view' button

Wait for potree viewer initialization before initializing frustums

iframe onload event is misleading, and as long the debugger window is open the bug is hidden

Do not show the map if no GPS in EXIF data

Do not show the map if the image contain no GPS in EXIF data.

Maybe in this case it make sense to indicate that the 3D scene is not geo-located.

loadImage is not defined in doxel-viewer.js

I followed the installation instruction. But the the viewer page (http://localhost/doxel-viewer/viewer.html) only shows the camera and the play button. Images and point clouds are all missing. Here is the error message from the console:

Uncaught ReferenceError: loadImage is not defined at doxel-viewer.js:40
Uncaught TypeError: Cannot set property 'segmentURL' of undefined at config.js:1
GET http://localhost/images/ajax-loader.gif net::ERR_CONNECTION_REFUSED