Easily add and combine post-processing effects with <model-viewer>!
npm install @google/model-viewer-effects !npm bundle size
!npm (scoped)
is a web component library addon for that makes adding post-processing
effects to your models easy to do, on as many browsers and devices as possible.
strives to give you great defaults for rendering quality and
performance.
inside your , and placing any effects inside the composer component.``html`
uses the postprocessing library under the hood, for its superior performance and support.In addition to the built-in effects wrapped by this library, you can add any custom effects/passes that follow the postprocessing spec.
$3
The effects are not supported in the XR modes, which will render as usual.Installing
$3
The
library can be installed from NPM:`sh
npm install three @google/model-viewer @google/model-viewer-effects
`$3
and share a Three.js dependency. In order to avoid version conflicts, you should bring Three through an import-map:`html
`You should then bring the
module version of , along with from your favourite CDN, such as jsDelivr:
`html
`Browser Support
is supported on the last 2 major versions of all evergreen
desktop and mobile browsers, and on all platforms (Android, IOS, MacOS, Windows, Linux).| |
Chrome |
Firefox |
Safari |
Edge |
| -------- | --- | --- | --- | --- |
| Desktop | ✅ | ✅ | ✅ | ✅ |
| Mobile | ✅ | ✅ | ✅ | ✅ |
builds upon standard web platform APIs so that the performance,
capabilities and compatibility of the library get better as the web evolves.Development
To get started, follow the instructions in the main README.md file.
The following commands are available when developing
:Command | Description
------------------------------- | -----------
npm run build | Builds all distributable files
npm run build:dev | Builds a subset of distributable files (faster than npm run build)
npm run test | Run unit tests
npm run clean | Deletes all build artifacts
npm run dev | Starts tsc and rollup` in "watch" mode, causing artifacts to automatically rebuild upon incremental changes
----
Rocket Ship by Daniel Melchior CC-BY via Poly Pizza