Skip to main content
Version: 0.2.0

Developer Tools

The developer tools provide useful utilities during the development process to dial in parameters in real-time using a graphical user-interface, and visualize currently connected sources relative to the user.

The developer tools don't come as a part of the main package, but must be installed separately:

npm install @atmokyaudio/websdk-dev-tools

See Installation for more details.

Each tool requires only a single function call to open a popup window with the tool's graphical user interface. The window will be connected to the provided Renderer instance and can both retrieve and update the current state of the scene.

tip

The open<Tool> function can be called programatically, or with a button onclick event:

let button = document.getElementById("devToolButton") as HTMLButtonElement;
button.onclick = () => {
openAttenuationCurveDesigner(renderer);
};

Attenuation Curve Designer

Attenuation Curve Designer

Dialing in the right attenuation curve purely in code can be quite exhausting. The Attenuation Curve Designer comes to the rescue. Its graphical user interface not only displays you the current curve, but also the live distances of the active sources. By dragging the points you can adjust the curve in real-time.

import { openAttenuationCurveDesigner } from "@atmokyaudio/websdk-dev-tools";
openAttenuationCurveDesigner(renderer);

Once satisfied, simply copy the displayed command and use it in your application code.

Source Viewer

Source Viewer

The Source Viewer displays how the sources of a scene are positioned relative to the listener. This helps with checking if sources are correctly placed. The user-interface is freely rotatable and zoomable, so that no source goes unnoticed.

import { openSourceViewer } from "@atmokyaudio/websdk-dev-tools";
openSourceViewer(renderer);

Known Issues

  • head model in Source Viewer is currently not affected by the listener's orientation