# Web-based Latent Space Visualization Tool for Measured BRDFs Using NPs

This is a web-based tool with functions as:

1. Visualize the latent space learned from measured BRDFs using NPs.

2. Recommend BRDFs for one BRDF selected by user.

3. Interpolate BRDFs from two BRDFs selected by user.

## Getting up and running
This tool is developed based on a TensorBoard plugin called Embedding Projector. For information of TensorBoard and Embedding Projector, see their repositories on Github: [TensorBoard] and [Embedding Projector]. To launch our projector in standalone mode, you need to [install Bazel](https://docs.bazel.build/versions/0.23.0/install.html) and then build it from source in the NP-BRDF-Projector folder:

Recommended bazel version: 0.23

```
NP-BRDF-Projector\> sh
bazel run ./tensorboard/plugins/projector/vz_projector:devserver
```

After it has been successfully built, please open <http://localhost:6006/index.html> in web browser.

[TensorBoard]: https://github.com/tensorflow/tensorboard
[Embedding Projector]: https://github.com/tensorflow/tensorboard/tree/master/tensorboard/plugins/projector

## Usage

### Panels
<p align="center">
<img src="./images/whole.png" width="800">
</p>

The whole web page can be divided into four parts.

The data panel in which you can load different dataset:
<p align="center">
<img src="./images/data_panel.png" width="200">
</p>

The main panel in which you can see the BRDFs projected into low dimensional space and select a projected point:
<p align="center">
<img src="./images/main_panel.png" width="400">
</p>

The inspector panel which shows the nearest neighbors of current selected point:
<p align="center">
<img src="./images/inspector_panel.png" width="200">
</p>

And the projection panel which contains tabs for projection settings and a special BRDF tab:
<p align="center">
<img src="./images/projection_panel.png" width="200">
</p>

### The BRDF Tab

In the BRDF tab, there is a toggle button to switch BRDF interpolation mode off and on, which corresponds to the BRDF recommendation feature and the BRDF interpolation feature.

#### BRDF Recommendation
<p align="center">
<img src="./images/brdf_tab_interpolation_off.png" width="200">
</p>

When BRDF interpolation mode is off, the BRDF tab shows an image of a sphere with the corresponding BRDF of currently selected point. This image is pre-rendered with global illumination. Whenever you click a point in the main panel, this image will be updated. At the same time, the inspector panel will give you a new recommendation list of similar BRDFs to the one you currently select. You can also update your current selection via clicking a neighbor listed in the inspector panel, the image in the BRDF tab will be updated accordingly. Thus, you can easily check if the recommendation list contains what you want and explore more similar BRDFs quickly.

#### BRDF Interpolation
<p align="center">
<img src="./images/brdf_tab_interpolation_on.png" width="200">
</p>

When the BRDF interpolation mode is on, the BRDF tab shows an image of a sphere with the interpolated BRDF. There are two buttons to update the endpoints of interpolation and a slider to control the parameter of interpolation. The image in the BRDF tab is updated interactively by a WebGL renderer. Thus, you can see the effect of interpolating BRDF in a convenient way.

