Easily view 1 or compare 2 GLB models interactively.
This utility was derived from @shopify/screenshot-glb
Use npm to install this tool:
Download a built node package
npm install [release_package.tgz]
% viewer-glb --help
viewer-glb <input0> [input1]
view one or compare two glb models.
Positionals:
input0 model to view [string]
input1 optional model to compare against. [string]
Options:
--help Show help [boolean]
--version Show version number [boolean]
-c, --color background color (defaults to transparent, accepts HEX
or RGB) [string]
--environment_map HDR environment map image, neutral, or legacy [string]
--exposure exposure in stops [number] [default: 0]
-w, --width viewer width [number] [default: 512]
-h, --height viewer height [number] [default: 512]
- Standard model-viewer orbit controls are used.
- When doing side by side comparison
- The right model can be moved freely
- The left model forces the right to an identical camera view
- A 'Toggle Diff' button below the views toggles a middle view showing the rendered view diff
- Useful for comparing two versions of the same model
The module relies on using puppeteer to spawn an instance of Chrome to use Google's web component with the GLB model loaded.
yarn installyarn linkviewer-glb test/fixtures/<MODEL>
// view 1 model
% viewer-glb <PATH_TO_MODEL>
// compare 2 models side by side
% viewer-glb <PATH_TO_MODEL0> <PATH_TO_MODEL1>
// Specify view width and height
$ viewer-glb <PATH_TO_MODEL> --width 600 --height 1200
// NOTE: width and height are for 1 viewer. When doing side by side comparison the total window is twice as wide
$ viewer-glb <PATH_TO_MODEL0> <PATH_TO_MODEL1> --width 600 --height 1200
// Change the environment image and exposure in photographic stops (powers of 2)
$ viewer-glb <PATH_TO_MODEL> --exposure -1.0 --environment_map <PATH_TO_EQUIRECT_HDR>