Customization
Panopti exposes several customizable settings through a TOML configuration file, which allows you to change default behavior and appearance of the viewer. When starting your server, simply specify the optional flag --config /path/to/config.toml like so:
Below we provide a full default configuration file with annotated entries. Note that you may specify a subset of these properties, the rest will be automatically filled by defaults. If a config file is not provided, these values will be used.
To see updates, restart your Panopti server and refresh the browser tab.
# Panopti configuration file: .pantop.toml
title = "Panopti" # Title displayed in ui panel
[viewer.tools]
grid.enabled = true # Enable grid helper
axes.enabled = true # Enable axes helper
[viewer.renderer]
max-fps = 60 # Renderer max fps (see below)
power-preference = "default" # ThreeJS.WebGLRenderer opt: [default, low-power, high-performance]
# Custom lights (see note below)
light-key = { type = "directional", position = [10, 15, 10], target = [0, 0, 0], color = "#ffffff", intensity = 2.3, castShadow = false }
light-fill = { type = "directional", position = [-20, 5, -10], target = [0, 0, 0], color = "#ffffff", intensity = 2.0, castShadow = false }
light-ambient = { type = "ambient", color = "#ffffff", intensity = 1.0 }
[viewer.theme]
primary-color = "#4361ee" # Color for general ui elements
primary-hover = "#3a56d4" # Color on element hover
background-color = "#f0f0f0" # Bg color of renderer
background-color-dark = "#2d3142" # Dark mode bg color ^^^
panel-bg = "#ffffff" # UI panel bg color
text-color = "#333333"
button-active: "#38b000" # Toggled button color
dark-mode = false # Toggle dark mode
[viewer.camera] # Camera settings, see docs page
position = [5, 5, 5]
target = [0, 0, 0]
fov = 50
near = 0.1
far = 1000
projection = "perspective"
[viewer.ui]
panel.controls.collapsed = false # Collapse UI panel
panel.layers.collapsed = false # Collapse layers panel
console.enabled = false # Opens the console widget
infobar.enabled = true # Hides information bar
# Low-level viewer settings
[viewer.debounce] # Debounce timers (in ms)
slider = 25 # Slider elements
transform = 25 # Object transformation event
camera = 25 # Camera change event
Tips
Max FPS & Power Mode
max-fps & power-preference
Panopti's renderer defaults to 60 fps and can be changed through the max-fps field above. If developing on a laptop (where battery life is a concern), consider lowering this value. Additionally, some monitors support higher refresh rates, e.g. 144 fps.
We also expose the WebGL power preference attribute through power-preference = "default" above. See: https://registry.khronos.org/webgl/specs/latest/1.0/#5.2. Other options include "low-power" and "high-performance".
Note that Panopti has largely been tested on the default power setting, your mileage may vary.
Debounce
debounce
For scenes that include heavy callbacks on "continuous" control elements (e.g. sliders), you may consider increasing the relevant debounce timers under the viewer.debounce group. This will prevent your script from being spammed by such elements.
Lighting Setup
light
Panopti's viewport lighting can be customized through special light-<...> keys under [viewer.renderer]. Please see the above config example for supported light parameters. Supported light types are: [directional, ambient, point]