Use IViewerPlugin instead of AViewerPlugin in tweakpane editor plugins, add new plugins to the editor example.

examples/tweakpane-editor/script.ts

@@ -7,6 +7,7 @@ import {
     FullScreenPlugin,
     GLTFAnimationPlugin,
     HalfFloatType,
+    HDRiGroundPlugin,
     HemisphereLight,
     KTX2LoadPlugin,
     KTXLoadPlugin,
@@ -22,6 +23,7 @@ import {
     TonemapPlugin,
     USDZLoadPlugin,
     ViewerUiConfigPlugin,
+    VignettePlugin,
 } from 'threepipe'
 import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
 import {TweakpaneEditorPlugin} from '@threepipe/plugin-tweakpane-editor'
@@ -57,6 +59,8 @@ async function init() {
         new NormalBufferPlugin(HalfFloatType, false),
         new RenderTargetPreviewPlugin(false),
         new FrameFadePlugin(),
+        new VignettePlugin(),
+        new HDRiGroundPlugin(false, true),
         KTX2LoadPlugin,
         KTXLoadPlugin,
         PLYLoadPlugin,
@@ -75,8 +79,9 @@ async function init() {
         ['Viewer']: [ViewerUiConfigPlugin, SceneUiConfigPlugin, DropzonePlugin, FullScreenPlugin],
         ['Interaction']: [PickingPlugin],
         ['GBuffer']: [DepthBufferPlugin, NormalBufferPlugin],
-        ['Post-processing']: [TonemapPlugin, ProgressivePlugin, FrameFadePlugin],
+        ['Post-processing']: [TonemapPlugin, ProgressivePlugin, FrameFadePlugin, VignettePlugin],
         ['Animation']: [GLTFAnimationPlugin, CameraViewPlugin],
+        ['Extras']: [HDRiGroundPlugin, Rhino3dmLoadPlugin],
         ['Debug']: [RenderTargetPreviewPlugin],
     })
 

plugins/tweakpane-editor/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@threepipe/plugin-tweakpane-editor",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@threepipe/plugin-tweakpane-editor",
-            "version": "0.1.3",
+            "version": "0.1.4",
             "license": "Apache-2.0",
             "dependencies": {
                 "@threepipe/plugin-tweakpane": "file:./../tweakpane/src/",

plugins/tweakpane-editor/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@threepipe/plugin-tweakpane-editor",
     "description": "Tweakpane Editor Plugin for ThreePipe",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "devDependencies": {
         "tippy.js": "^6.3.7"
     },
@@ -19,7 +19,7 @@
         ],
         "replace": {
             "dependencies": {
-                "threepipe": "^0.0.8",
+                "threepipe": "^0.0.16",
                 "@threepipe/plugin-tweakpane": "^0.1.2"
             }
         }

plugins/tweakpane-editor/src/TweakpaneEditorPlugin.ts

@@ -1,10 +1,10 @@
 import {
-    AViewerPlugin,
     AViewerPluginSync,
     Class,
     createDiv,
     createStyles,
     FullScreenPlugin,
+    IViewerPlugin,
     safeSetProperty,
     ThreeViewer,
 } from 'threepipe'
@@ -42,12 +42,12 @@ export class TweakpaneEditorPlugin extends AViewerPluginSync<string> {
 
     private _selectedMode = 0
     modeKeys: string[] = []
-    modePlugins: Class<AViewerPlugin>[][] = []
+    modePlugins: Class<IViewerPlugin>[][] = []
     modeDivs: (HTMLDivElement | undefined)[] = []
     // picking?: PickingPlugin
     uiPlugin?: TweakpaneUiPlugin
 
-    loadPlugins(plugins: Record<string, Class<AViewerPlugin<any>>[]> = {}) {
+    loadPlugins(plugins: Record<string, Class<IViewerPlugin<any>>[]> = {}) {
         if (!this._viewer) throw new Error('Plugin not added to viewer.')
         setupUtilButtonsBar(this._viewer, Object.values(plugins).flat())
 

plugins/tweakpane-editor/src/util-buttons.ts

@@ -1,16 +1,16 @@
 import {
-    AViewerPlugin,
     Class,
     createDiv,
     downloadBlob,
     FullScreenPlugin,
     GLTFAnimationPlugin,
+    IViewerPlugin,
     ThreeViewer,
 } from 'threepipe'
 import {autoRotateCC, collapse, download, expand, playIcon, resetSettings, snapshot, trash} from './icons'
 import tippy, {createSingleton} from 'tippy.js'
 
-export function createUtilButtons(viewer: ThreeViewer, allPlugins: Class<AViewerPlugin>[]) {
+export function createUtilButtons(viewer: ThreeViewer, allPlugins: Class<IViewerPlugin>[]) {
     return [
         {
             id: 'reset-settings',
@@ -132,7 +132,7 @@ export function setupFullscreenButton(viewer: ThreeViewer) {
     })
 }
 
-export function setupUtilButtonsBar(viewer: ThreeViewer, allPlugins: Class<AViewerPlugin>[]) {
+export function setupUtilButtonsBar(viewer: ThreeViewer, allPlugins: Class<IViewerPlugin>[]) {
     const utilButtonsContainer = createDiv({
         classList: ['button-bar', 'util-buttons-container'],
         addToBody: false,