| @@ -16,7 +16,7 @@ import FragmentClippingExtensionPluginPatch from './shaders/FragmentClippingExte | |||
| * Fragment clipping allows to clip fragments of the material in screen space or world space based on a circle, rectangle, plane, sphere, etc. | |||
| * It uses fixed SDFs with params defined by the user for clipping. | |||
| * It also adds a UI to the material to edit the settings. | |||
| * It uses WEBGI_materials_fragment_clipping_extension glTF extension to save the settings in glTF files. | |||
| * It uses `WEBGI_materials_fragment_clipping_extension` glTF extension to save the settings in glTF files. | |||
| * @category Plugins | |||
| */ | |||
| @uiFolderContainer('Fragment Clipping (MatExt)') | |||
| @@ -17,6 +17,12 @@ export interface RenderTargetBlock { | |||
| div: HTMLDivElement | |||
| material?: ShaderMaterial // see ExtendedCopyPass | |||
| } | |||
| /** | |||
| * RenderTargetPreviewPlugin is a useful development and debugging plugin that renders any registered render-target to the screen in small collapsable panels. | |||
| * | |||
| * @category Plugins | |||
| */ | |||
| @uiFolderContainer('Render Target Preview Plugin') | |||
| export class RenderTargetPreviewPlugin<TEvent extends string> extends AViewerPluginSync<TEvent> { | |||
| static readonly PluginType = 'RenderTargetPreviewPlugin' | |||
| @@ -1,6 +1,13 @@ | |||
| import {AViewerPluginSync, ThreeViewer} from '../../viewer' | |||
| import {serialize} from 'ts-browser-helpers' | |||
| /** | |||
| * Viewer UI Config Plugin | |||
| * | |||
| * Just a plugin wrapper over the `viewer.uiConfig | |||
| * | |||
| * @category Plugins | |||
| */ | |||
| export class ViewerUiConfigPlugin extends AViewerPluginSync<''> { | |||
| static readonly PluginType = 'ViewerUiConfigPlugin' | |||
| enabled = true | |||
| @@ -144,8 +144,8 @@ export default defineConfig({ | |||
| items: [ | |||
| {text: 'RenderTargetPreviewPlugin', link: 'plugin/RenderTargetPreviewPlugin'}, | |||
| {text: 'GeometryUVPreviewPlugin', link: 'plugin/GeometryUVPreviewPlugin'}, | |||
| {text: 'SceneUiConfigPlugin', link: 'plugin/SceneUiConfigPlugin'}, | |||
| {text: 'ViewerUiConfigPlugin', link: 'plugin/ViewerUiConfigPlugin'}, | |||
| // {text: 'SceneUiConfigPlugin', link: 'plugin/SceneUiConfigPlugin'}, | |||
| // {text: 'ViewerUiConfigPlugin', link: 'plugin/ViewerUiConfigPlugin'}, | |||
| ], | |||
| }, | |||
| { | |||
| @@ -16,7 +16,7 @@ Plugins can be added to the viewer at any time and can be removed using the `rem | |||
| There are built-in plugins provided in the core of threepipe, that can be directly added to the viewer to add new features. These plugins are designed to be modular and can be used independently or in combination with other plugins. They also serve as good examples and starting points for creating custom plugins. | |||
| All of the plugins are configurable, serializable and expose a UI to control their properties. | |||
| All the plugins are configurable, serializable and expose a UI to control their properties. | |||
| Checkout the [model-viewer](https://threepipe.org/examples/#model-viewer) or [tweakpane-editor](https://threepipe.org/examples/#tweakpane-editor) examples which use most of these plugins. | |||
| @@ -97,7 +97,7 @@ Plugins to configure export options and methods for different file formats. | |||
| - [CanvasSnapshotPlugin](../plugin/CanvasSnapshotPlugin) - Add support for taking snapshots of the canvas. | |||
| - [AssetExporterPlugin](../plugin/AssetExporterPlugin) - Provides helper options, methods and ui config to export the scene, object GLB or Viewer Configuration. | |||
| - [FileTransferPlugin](../plugin/FileTransferPlugin) - Provides a way to extend the viewer.export functionality with custom actions. | |||
| - [FileTransferPlugin](../plugin/FileTransferPlugin) - Provides a way to extend the `viewer.export` functionality with custom actions. | |||
| ## Extras | |||
| @@ -14,7 +14,7 @@ Threepipe provides a set of editors to create, edit and configure 3D scenes in t | |||
| The editors render `uiConfig` from the viewer, scene, and plugins along with several custom UI elements to provide a completely dynamic and extendable interface. | |||
| A common workflow is drop a 3d model into the editor, enable the required plugins, set proper lighting, background, environment maps, set plugin properties like post-processing settings, materials, animations, camera views etc, and export a compressed glb file with scene settings and plugin data. This glb file can then be loaded into the viewer(with all the plugins) to get the same scene and settings. | |||
| A common workflow is drop a 3d model into the editor, enable the required plugins, set proper lighting, background, environment maps, set plugin properties like post-processing settings, materials, animations, camera views etc., and export a compressed glb file with scene settings and plugin data. This glb file can then be loaded into the viewer(with all the plugins) to get the same scene and settings. | |||
| ## Tweakpane Editor | |||
| @@ -10,7 +10,7 @@ next: | |||
| # Exporting files | |||
| Threepipe has support for exporting various asset type with AssetManager, as well as support to export viewer and plugin configuration, arbitrary objects etc using the [serialization](#serialization) system. | |||
| Threepipe has support for exporting various asset type with AssetManager, as well as support to export viewer and plugin configuration, arbitrary objects etc. using the [serialization](./serialization) system. | |||
| [viewer.export()](https://threepipe.org/docs/classes/ThreeViewer.html#export) is a high-level wrapper for exporting scene objects, materials, textures, render targets, viewer/scene configuration and plugin configurations. | |||
| @@ -10,7 +10,7 @@ next: | |||
| # Features | |||
| Threepipe comes packed with a asset manager, render pipeline, serialization setup, material extensions, UI configurations and bundles many plugins, that can be added with a single line of code to provide a variety of features listed below. In a custom application it’s possible to tree-shake the bundle by picking the plugins that are required. | |||
| Threepipe comes packed with an asset manager, render pipeline, serialization setup, material extensions, UI configurations and bundles many plugins, that can be added with a single line of code to provide a variety of features listed below. In a custom application it’s possible to tree-shake the bundle by picking the plugins that are required. | |||
| ## File Formats | |||
| @@ -29,7 +29,7 @@ Plugins can add additional formats: | |||
| * ktx - Using [KTXLoadPlugin](../plugin/KTXLoadPlugin) | |||
| * ktx2 - Using [KTX2LoadPlugin](../plugin/KTX2LoadPlugin) | |||
| Plugins to support more model formats are available in the package [@threepipe/plugins-extra-importers](#threepipeplugins-extra-importers) including .3ds, | |||
| Plugins to support more model formats are available in the package [@threepipe/plugins-extra-importers](../package/plugins-extra-importers) including .3ds, | |||
| .3mf, .collada, .amf, .bvh, .vox, .gcode, .mdd, .pcd, .tilt, .wrl, .mpd, .vtk, .xyz | |||
| ### Loading files | |||
| @@ -59,7 +59,7 @@ Check the [Loading Files](./loading-files) guide for more details and how to loa | |||
| ### Exporting files | |||
| Threepipe has built-in support for exporting some file types like glb, exr, images(textures, render targets), , materials, json(viewer/scene configuration and plugin configurations). | |||
| Threepipe has built-in support for exporting some file types like glb, exr, images(textures, render targets), materials, json(viewer/scene configuration and plugin configurations). | |||
| To export files, several helpers are provided - [`viewer.export()`](https://threepipe.org/docs/classes/ThreeViewer.html#export) and [`viewer.exportScene()`](https://threepipe.org/docs/classes/ThreeViewer.html#exportScene). | |||
| @@ -86,17 +86,17 @@ Threepipe includes a plugin system for adding additional features to the viewer | |||
| All plugins follow the same basic structure, independent of the logic, with the API to add and remove plugins being always consistent (and one-liner). This makes it easy to debug, bundle, tree-shake, serialisation/deserialisation and extend functionality to the 3d viewer. It is also recommended to keep individual plugins small and handle one specific functionality. | |||
| Plugins can be dependant on other plugins. These dependencies are automatically resolved and added to the viewer at runtime. eg. `SSAOPlugin` depends on `GBufferPlugin` to get the depth and normal data. So, when `SSAOPlugin` is added to the viewer, it automatically adds `GBufferPlugin` before that (if not added already). | |||
| Plugins can be dependent on other plugins. These dependencies are automatically resolved and added to the viewer at runtime. e.g. `SSAOPlugin` depends on `GBufferPlugin` to get the depth and normal data. So, when `SSAOPlugin` is added to the viewer, it automatically adds `GBufferPlugin` before that (if not added already). | |||
| The plugins can be added synchronously or asynchronously using `viewer.addPluginSync` and `viewer.addPlugin` methods respectively. | |||
| It is recommended to create custom plugins for reusable features, as they provide built-in features for ui configuration, serialization, integration with editors etc and are easy to manage and tree-shake in the code. | |||
| It is recommended to create custom plugins for reusable features, as they provide built-in features for ui configuration, serialization, integration with editors etc. and are easy to manage and tree-shake in the code. | |||
| Check out the list of plugins in the [Core Plugin](./core-plugins) and [@threepipe Packages](./threepipe-packages) pages. | |||
| To create new plugins, simply implement the `IViewerPlugin` interface or extend the [AViewerPluginSync](https://threepipe.org/docs/classes/AViewerPluginSync.html) or [AViewerPluginAsync](https://threepipe.org/docs/classes/AViewerPluginAsync.html) classes. | |||
| Read more about the [Plugin System](./plugin-system) on it's page. | |||
| Read more about the [Plugin System](./plugin-system) on its page. | |||
| ## Render pipeline | |||
| @@ -108,7 +108,7 @@ The main render pipeline supports progressive rendering and is fully configurabl | |||
| By default, the render pipeline includes 2 passes - [RenderPass](https://threejs.org/docs/#api/en/postprocessing/RenderPass) for rendering the scene hierarchy and [ScreenPass](https://threejs.org/docs/#api/en/postprocessing/ShaderPass) for rendering the final output on the canvas. | |||
| Plugins like [GBufferPlugin](https://threepipe.org/docs/classes/GBufferPlugin.html), [SSAOPlugin](https://threepipe.org/docs/classes/SSAOPlugin.html), [TonemapPlugin](https://threepipe.org/docs/classes/TonemapPlugin.html), etc interact and extend the render pipeline by adding custom passes to the render pipeline and material extensions to the material manager. | |||
| Plugins like [GBufferPlugin](https://threepipe.org/docs/classes/GBufferPlugin.html), [SSAOPlugin](https://threepipe.org/docs/classes/SSAOPlugin.html), [TonemapPlugin](https://threepipe.org/docs/classes/TonemapPlugin.html), etc. interact and extend the render pipeline by adding custom passes to the render pipeline and material extensions to the material manager. | |||
| Check the [Render Pipeline](./render-pipeline) guide for more details about render targets and how to add custom passes. | |||
| @@ -120,7 +120,7 @@ The material manager is used to register materials and material extensions. | |||
| The material extensions can extend any material in the scene, or any plugin/pass with additional uniforms, defines, shader snippets and provides hooks. | |||
| The material extensions are automatically applied to all materials in the scene that are compatible, | |||
| when the extension is registered or when the material(the object its assigned to) is added to the scene. | |||
| when the extension is registered or when the material(the object it's assigned to) is added to the scene. | |||
| Threepipe includes several built-in materials like [PhysicalMaterial](https://threepipe.org/docs/classes/PhysicalMaterial.html), [UnlitMaterial](https://threepipe.org/docs/classes/UnlitMaterial.html), [ExtendedShaderMaterial](https://threepipe.org/docs/classes/ExtendedShaderMaterial.html), [LegacyPhongMaterial](https://threepipe.org/docs/classes/LegacyPhongMaterial.html), that include support for extending the material. Any existing three.js material can be made extendable, check the `ShaderPass2` class for a simple example that adds support for material extension to three.js ShaderPass. | |||
| @@ -132,13 +132,13 @@ Read more and check a sample plugin in the [Material Extension](./material-exten | |||
| ## UI Configuration | |||
| Almost all of the classes and plugins in Threepipe include [uiconfig.js](https://repalash.com/uiconfig.js/) support and can be used to create configuration UIs, 3d configurators and even full-editors. | |||
| Almost all the classes and plugins in Threepipe include [uiconfig.js](https://repalash.com/uiconfig.js/) support and can be used to create configuration UIs, 3d configurators and even full-editors. | |||
| The UIs are automatically generated based on the configuration object under `.uiConfig` property on all objects. These are of type [UiObjectConfig](https://repalash.com/uiconfig.js/interfaces/UiObjectConfig.html). | |||
| In some classes, the ui configs are also generated using typescript decorators. | |||
| The `uiConfig` is also added to all three.js objects and materials when they are added to the scene. | |||
| The UIs can be generated at runtime using any of the UI plugins like [TweakpaneUIPlugin](#threepipeplugin-tweakpane), [BlueprintJsUiPlugin](#threepipeplugin-blueprintjs) | |||
| The UIs can be generated at runtime using any of the UI plugins like [TweakpaneUIPlugin](../package/plugin-tweakpane), [BlueprintJsUiPlugin](../package/plugin-blueprintjs) | |||
| An example showing how to create a UI for a material | |||
| @@ -156,7 +156,7 @@ See it in action: https://threepipe.org/examples/#material-uiconfig/ | |||
| Check more examples showing [Viewer UI](https://threepipe.org/examples/#viewer-uiconfig/), [Scene UI](https://threepipe.org/examples/#scene-uiconfig/), [Object UI](https://threepipe.org/examples/#object-uiconfig/), [Camera UI](https://threepipe.org/examples/#camera-uiconfig/) | |||
| ::: info | |||
| [TweakpaneEditorPlugin](#threepipeplugin-tweakpane-editor) further uses the Tweakpane configuration panel along with various plugins to create an 3d editor. | |||
| [TweakpaneEditorPlugin](../package/plugin-tweakpane-editor) further uses the Tweakpane configuration panel along with various plugins to create a 3d editor. | |||
| ::: | |||
| Custom UI configuration can be created to generate custom UI for the editor or tweaking. | |||
| @@ -120,7 +120,7 @@ The viewer initializes with a Scene, Camera, Camera controls(Orbit Controls), se | |||
| Check out the GLTF Load example to see it in action or to check the JS equivalent code: [Example: gltf-load](https://threepipe.org/examples/#gltf-load/) | |||
| Check out the [Plugins](#plugin-system) section below to learn how to add additional functionality to the viewer. | |||
| Check out the [Plugins](https://threepipe.org/guide/features.html#plugin-system) section to learn how to add additional functionality to the viewer. | |||
| ### React | |||
| @@ -121,7 +121,7 @@ init(); | |||
| The `ThreeViewer` class is used to create a new 3D viewer instance. It includes several components including a `Scene`, `Camera`(with `OrbitControls`), `Renderer`, `RenderManager`, `AssetManager`, and some default plugins(like `TonemapPlugin`). It is set up to provide a quickstart to create a three.js app with all the required components. | |||
| Additionally plugins like `LoadingScreenPlugin`, `ProgressivePlugin`, `SSAAPlugin`, and `ContactShadowGroundPlugin` are added to extend the functionality of the viewer. | |||
| Additionally, plugins like `LoadingScreenPlugin`, `ProgressivePlugin`, `SSAAPlugin`, and `ContactShadowGroundPlugin` are added to extend the functionality of the viewer. | |||
| Check out this sample on CodePen: [threepipe-sample](https://codepen.io/repalash/pen/GRbEONZ?editors=0010) | |||
| @@ -73,12 +73,12 @@ Check the [model-viewer](https://threepipe.org/examples/#model-viewer/) example | |||
| ## Materials | |||
| The materials downloaded as PMAT/BMAT/JSON etc from threepipe, | |||
| The materials downloaded as `PMAT`/`BMAT`/`JSON` etc. from threepipe, | |||
| webgi or the editor can be loaded | |||
| and registered with the [MaterialManager](https://threepipe.org/docs/classes/MaterialManager) | |||
| using the `viewer.load` method. | |||
| Custom material types can also be registered by plugins(like dmat for diamonds), which can also be loaded automatically using the `viewer.load` method. | |||
| Custom material types can also be registered by plugins(like `DMAT` for diamonds), which can also be loaded automatically using the `viewer.load` method. | |||
| ```typescript | |||
| const pMaterial = await viewer.load<PhysicalMaterial>('https://example.com/file.pmat') | |||
| @@ -140,7 +140,7 @@ Any level of zip hierarchy is flattened. | |||
| Loading files like .gltf with references to assets inside the zip file, | |||
| any relative references are also automatically resolved. | |||
| This is supported for file types like gltf, glb, obj, | |||
| etc which support references to external files and has `root` set to `true in [IImporter](https://threepipe.org/docs/interfaces/IImporter.html). | |||
| etc. which support references to external files and has `root` set to `true in [IImporter](https://threepipe.org/docs/interfaces/IImporter.html). | |||
| ```typescript | |||
| const objectGltf = await viewer.load<IObject3D>('https://example.com/model.gltf.zip') | |||
| @@ -193,7 +193,7 @@ const text = await viewer.load<IObject>({ | |||
| ``` | |||
| The same can be done for any file type. | |||
| To load a `Map` of files(like when multiple files are dragged and dropped on the webpage) with internal references to other files, use `viewer.assetManager.importer.importFiles` method. Check the source for [DropzonePlugin](#dropzoneplugin) for an example. | |||
| To load a `Map` of files(like when multiple files are dragged and dropped on the webpage) with internal references to other files, use `viewer.assetManager.importer.importFiles` method. Check the source for [DropzonePlugin](../plugin/DropzonePlugin) for an example. | |||
| ## Background, Environment maps | |||
| @@ -16,7 +16,7 @@ The material manager is used to register materials and material extensions. | |||
| The material extensions can extend any material in the scene, or any plugin/pass with additional uniforms, defines, shader snippets and provides hooks. | |||
| The material extensions are automatically applied to all materials in the scene that are compatible, | |||
| when the extension is registered or when the material(the object its assigned to) is added to the scene. | |||
| when the extension is registered or when the material(the object it's assigned to) is added to the scene. | |||
| Threepipe includes several built-in materials like [PhysicalMaterial](https://threepipe.org/docs/classes/PhysicalMaterial.html), [UnlitMaterial](https://threepipe.org/docs/classes/UnlitMaterial.html), [ExtendedShaderMaterial](https://threepipe.org/docs/classes/ExtendedShaderMaterial.html), [LegacyPhongMaterial](https://threepipe.org/docs/classes/LegacyPhongMaterial.html), that include support for extending the material. Any existing three.js material can be made extendable, check the `ShaderPass2` class for a simple example that adds support for material extension to three.js ShaderPass. | |||
| @@ -10,7 +10,7 @@ prev: | |||
| # Plugin System | |||
| Plugins are the building blocks of features in a 3D Viewer. Each plugin handles its own individual feature along with serialisation and lifecycle management. Threepipe uses a plugin system to add new options, rendering styles, post processing passes, and more functionality. The plugin architecture is designed similar to other js frameworks like vue or webpack (but for 3d rendering). | |||
| Plugins are the building blocks of features in a 3D Viewer. Each plugin handles its own individual feature along with serialisation and lifecycle management. Threepipe uses a plugin system to add new options, rendering styles, post-processing passes, and more functionality. The plugin architecture is designed similar to other js frameworks like vue or webpack (but for 3d rendering). | |||
| ::: tip | |||
| Check the pages on [Core Plugins](./core-plugins) and [@threepipe Packages](./threepipe-packages) for a list of available plugins. | |||
| @@ -18,7 +18,7 @@ Check the pages on [Core Plugins](./core-plugins) and [@threepipe Packages](./th | |||
| All plugins follow the same basic structure, independent of the logic, with the API to add and remove plugins being always consistent (and one-liner). This makes it easy to debug, bundle, tree-shake, serialisation/deserialisation and extend functionality to the 3d viewer. It is also recommended to keep individual plugins small and handle one specific functionality. | |||
| Plugins can be dependant on other plugins. These dependencies are automatically resolved and added to the viewer at runtime. eg. `SSAOPlugin` depends on `GBufferPlugin` to get the depth and normal data. So, when `SSAOPlugin` is added to the viewer, it automatically adds `GBufferPlugin` before that (if not added already). | |||
| Plugins can be dependent on other plugins. These dependencies are automatically resolved and added to the viewer at runtime. e.g. `SSAOPlugin` depends on `GBufferPlugin` to get the depth and normal data. So, when `SSAOPlugin` is added to the viewer, it automatically adds `GBufferPlugin` before that (if not added already). | |||
| ::: note | |||
| Plugin dependencies are different from pass/filter dependencies, which specifies how passes should be arranged in the render pipeline (effect composer). | |||
| @@ -28,7 +28,7 @@ Threepipe ships with a library of internal and external plugins to achieve photo | |||
| The plugins can be added synchronously or asynchronously using `viewer.addPluginSync` and `viewer.addPlugin` methods respectively. | |||
| It is recommended to create custom plugins for reusable features, as they provide built-in features for ui configuration, serialization, integration with editors etc and are easy to manage and tree-shake in the code. | |||
| It is recommended to create custom plugins for reusable features, as they provide built-in features for ui configuration, serialization, integration with editors etc. and are easy to manage and tree-shake in the code. | |||
| Check out the list of plugins in the [Core Plugin](./core-plugins) and [@threepipe Packages](./threepipe-packages) pages. | |||
| @@ -120,7 +120,7 @@ Notes: | |||
| * All plugins that are present in the dependencies array when the plugin is added to the viewer, are created and attached to the viewer in `super.onAdded` | |||
| * Custom events can be dispatched with `this.dispatchEvent`, and subscribed to with `plugin.addEventListener`. The event type must be described in the class signature for typescript autocomplete to work. | |||
| * Event listeners and other hooks can be added and removed in `onAdded` and `onRemove` functions for the viewer and other plugins. | |||
| * To the viewer render the next frame, `viewer.setDirty()` can be called, or set `this.dirty = true` in preFrame and reset in postFrame to stop the rendering. (Note that rendering may continue if some other plugin sets the viewer dirty like `ProgressivePlugin` or any of the animation plugins). Check `isConverged` in `ProgressivePlugin` to check if its the final frame. | |||
| * To the viewer render the next frame, `viewer.setDirty()` can be called, or set `this.dirty = true` in preFrame and reset in postFrame to stop the rendering. (Note that rendering may continue if some other plugin sets the viewer dirty like `ProgressivePlugin` or any of the animation plugins). Check `isConverged` in `ProgressivePlugin` to check if it's the final frame. | |||
| * All Plugins which inherit from AViewerPlugin support serialisation. Create property `serializeWithViewer = false` to disable serialisation with the viewer in config and glb or `toJSON: any = undefined` to disable serialisation entirely | |||
| * `plugin.toJSON()` and `plugin.fromJSON()` or `ThreeSerialization` can be used to serialize and deserialize plugins. `viewer.exportPluginConfig` and `viewer.importPluginConfig` also exist for this. | |||
| * @serialize('label') decorator can be used to mark any public/private variable as serializable. label (optional) corresponds to the key in JSON. | |||
| @@ -19,7 +19,7 @@ which provides utilities for creating, tracking and destroying dedicated and tem | |||
| The main render pipeline supports progressive rendering and is fully configurable. Plugins and applications can add custom passes, effects, and shaders to the pipeline. | |||
| Plugins like [GBufferPlugin](https://threepipe.org/docs/classes/GBufferPlugin.html), [SSAOPlugin](https://threepipe.org/docs/classes/SSAOPlugin.html), [TonemapPlugin](https://threepipe.org/docs/classes/TonemapPlugin.html), etc interact and extend the render pipeline by adding custom passes to the render pipeline and material extensions to the material manager. | |||
| Plugins like [GBufferPlugin](https://threepipe.org/docs/classes/GBufferPlugin.html), [SSAOPlugin](https://threepipe.org/docs/classes/SSAOPlugin.html), [TonemapPlugin](https://threepipe.org/docs/classes/TonemapPlugin.html), etc. interact and extend the render pipeline by adding custom passes to the render pipeline and material extensions to the material manager. | |||
| ## Render Targets | |||
| @@ -51,7 +51,7 @@ When deserialized they need an object to deserialize into. | |||
| This ensures there is always just one instance. | |||
| With this, the serialization system works like `toJSON` and `fromJSON` methods in three.js. | |||
| Check the [plugin system](#plugin-system) below for more details on how to mark properties as serializable for plugins. | |||
| Check the [plugin system](https://threepipe.org/guide/features.html#plugin-system) page for more details on how to mark properties as serializable for plugins. | |||
| ```typescript | |||
| class CustomClass{ | |||
| @@ -10,13 +10,13 @@ next: | |||
| # UI Configuration | |||
| Almost all of the classes and plugins in Threepipe include [uiconfig.js](https://repalash.com/uiconfig.js/) support and can be used to create configuration UIs, 3d configurators and even full-editors. | |||
| Almost all the classes and plugins in Threepipe include [uiconfig.js](https://repalash.com/uiconfig.js/) support and can be used to create configuration UIs, 3d configurators and even full-editors. | |||
| The UIs are automatically generated based on the configuration object under `.uiConfig` property on all objects. These are of type [UiObjectConfig](https://repalash.com/uiconfig.js/interfaces/UiObjectConfig.html). | |||
| In some classes, the ui configs are also generated using typescript decorators. | |||
| The `uiConfig` is also added to all three.js objects and materials when they are added to the scene. | |||
| The UIs can be generated at runtime using any of the UI plugins like [TweakpaneUIPlugin](#threepipeplugin-tweakpane), [BlueprintJsUiPlugin](#threepipeplugin-blueprintjs) | |||
| The UIs can be generated at runtime using any of the UI plugins like [TweakpaneUIPlugin](../package/plugin-tweakpane), [BlueprintJsUiPlugin](../package/plugin-blueprintjs) | |||
| An example showing how to create a UI for a material | |||
| @@ -34,7 +34,7 @@ See it in action: https://threepipe.org/examples/#material-uiconfig/ | |||
| Check more examples showing [Viewer UI](https://threepipe.org/examples/#viewer-uiconfig/), [Scene UI](https://threepipe.org/examples/#scene-uiconfig/), [Object UI](https://threepipe.org/examples/#object-uiconfig/), [Camera UI](https://threepipe.org/examples/#camera-uiconfig/) | |||
| ::: info | |||
| [TweakpaneEditorPlugin](#threepipeplugin-tweakpane-editor) further uses the Tweakpane configuration panel along with various plugins to create an 3d editor. | |||
| [TweakpaneEditorPlugin](../package/plugin-tweakpane-editor) further uses the Tweakpane configuration panel along with various plugins to create a 3d editor. | |||
| ::: | |||
| Custom UI configuration can be created to generate custom UI for the editor or tweaking. | |||
| @@ -24,7 +24,7 @@ next: | |||
| - `.exporter`: [`AssetExporter`](https://threepipe.org/docs/classes/AssetExporter.html) - for exporting assets | |||
| - `.materialManager`: [`MaterialManager`](https://threepipe.org/docs/classes/MaterialManager.html) - for managing materials and material extensions | |||
| - `.plugins`: `Record<string,`[`IViewerPlugin`](https://threepipe.org/docs/interfaces/IViewerPlugin.html)`>` - Plugins added to the viewer | |||
| - `.uiConfig`: [`UiObjectConfig`](https://repalash.com/uiconfig.js/interfaces/UiObjectConfig.html) - UI confguration for the viewer. Used to automatically generate UIs for the viewer and plugins. | |||
| - `.uiConfig`: [`UiObjectConfig`](https://repalash.com/uiconfig.js/interfaces/UiObjectConfig.html) - UI configuration for the viewer. Used to automatically generate UIs for the viewer and plugins. | |||
| ## ThreeViewer | |||
| @@ -196,9 +196,9 @@ await viewer.setEnvironmentMap('https://example.com/file.hdr') | |||
| viewer.addSceneObject(imported) | |||
| ``` | |||
| [`viewer.load`](https://threepipe.org/docs/classes/ThreeViewer.html#load) - Loads a single asset by path or [IAsset](https://threepipe.org/docs/interfaces/IAsset.html) object, and adds to the scene if its 3d object or loads it if it's a configuration It is the same as [AssetManager.addAssetSingle](https://threepipe.org/docs/classes/AssetManager.html#addAssetSingle). Use [AssetManager.addAsset](https://threepipe.org/docs/classes/AssetManager.html#addAsset) to load multiple assets from the same path like in case of zip bundles. | |||
| [`viewer.load`](https://threepipe.org/docs/classes/ThreeViewer.html#load) - Loads a single asset by path or [IAsset](https://threepipe.org/docs/interfaces/IAsset.html) object, and adds to the scene if its 3d object or loads it if it's a configuration It is the same as [AssetManager.addAssetSingle](https://threepipe.org/docs/classes/AssetManager.html#addAssetSingle). Use [AssetManager.addAsset](https://threepipe.org/docs/classes/AssetManager.html#addAsset) to load multiple assets from the same path as in case of zip bundles. | |||
| [`viewer.import`](https://threepipe.org/docs/classes/ThreeViewer.html#import) - Load a single asset but does not add to the scene or load the configuration. It is the same as [AssetManager.importer.importSingle](https://threepipe.org/docs/classes/AssetImporter.html#importSingle). Use [AssetManager.importer.import](https://threepipe.org/docs/classes/AssetImporter.html#import) to import multiple assets from the same path like in case of zip bundles. | |||
| [`viewer.import`](https://threepipe.org/docs/classes/ThreeViewer.html#import) - Load a single asset but does not add to the scene or load the configuration. It is the same as [AssetManager.importer.importSingle](https://threepipe.org/docs/classes/AssetImporter.html#importSingle). Use [AssetManager.importer.import](https://threepipe.org/docs/classes/AssetImporter.html#import) to import multiple assets from the same path as in case of zip bundles. | |||
| [`viewer.export`](https://threepipe.org/docs/classes/ThreeViewer.html#export) - Exports an object, material, texture, render target or plugin configuration and returns a Blob. It is similar to [AssetManager.exporter.exportObject](https://threepipe.org/docs/classes/AssetExporter.html#exportObject) but adds support for exporting plugin and self(viewer) configs. | |||
| @@ -318,7 +318,7 @@ viewer.dispose() | |||
| ``` | |||
| [`viewer.setRenderSize`](https://threepipe.org/docs/classes/ThreeViewer.html#setRenderSize) - Sets the rendering resolution and fits the canvas in container based on the mode. The modes are `cover`, `contain`, `fill`, `scale-down` and `none`. The canvas size and render scale is calculated automatically to match the render render. | |||
| [`viewer.setRenderSize`](https://threepipe.org/docs/classes/ThreeViewer.html#setRenderSize) - Sets the rendering resolution and fits the canvas in container based on the mode. The modes are `cover`, `contain`, `fill`, `scale-down` and `none`. The canvas size and render scale is calculated automatically to match the render. | |||
| [`viewer.setSize`](https://threepipe.org/docs/classes/ThreeViewer.html#setSize) - Sets the size of the canvas and updates the renderer and the camera. If no width/height is passed, canvas is set to 100% of the container. | |||
| @@ -451,7 +451,7 @@ const buffer = renderManager.renderTargetToBuffer(renderTarget) | |||
| [`renderManager.context`](https://threepipe.org/docs/classes/ViewerRenderManager.html#context) - Access the WebGL rendering context for the canvas. | |||
| [`renderManager.renderPass`](https://threepipe.org/docs/classes/ViewerRenderManager.html#renderPass) - The main render pass used in the render pipeline. Instance of three.js [RenderPass](https://threejs.org/docs/#api/en/postprocessing/RenderPass) with extra features like z prepass, rgbm rendering, blurred transmission, msaa and other optimizations. | |||
| [`renderManager.renderPass`](https://threepipe.org/docs/classes/ViewerRenderManager.html#renderPass) - The main render pass used in the render pipeline. Instance of three.js [RenderPass](https://threejs.org/docs/#api/en/postprocessing/RenderPass) with extra features like z-prepass, RGBM rendering, blurred transmission, msaa and other optimizations. | |||
| [`renderManager.screenPass`](https://threepipe.org/docs/classes/ViewerRenderManager.html#screenPass) - The main screen pass used in the render pipeline. Instance of three.js [ShaderPass](https://threejs.org/docs/#api/en/postprocessing/ShaderPass) with extra features like material extension, custom fragment, overriding read buffer, re-render to screen on change, etc | |||
| @@ -471,7 +471,7 @@ const buffer = renderManager.renderTargetToBuffer(renderTarget) | |||
| [`renderManager.totalFrameCount`](https://threepipe.org/docs/classes/RenderManager.html#totalFrameCount) - The total frames rendered since the render manager was created. | |||
| [`renderManager.frameCount`](https://threepipe.org/docs/classes/RenderManager.html#frameCount) - The current frame count in progressive rendering. This is useful for progressive rendering effects like progressive shadows, gi, denoising, baking, anti-aliasing, and many other effects. | |||
| [`renderManager.frameCount`](https://threepipe.org/docs/classes/RenderManager.html#frameCount) - The current frame count in progressive rendering. This is useful for progressive rendering effects like progressive shadows, gi, denoising, baking, antialiasing, and many other effects. | |||
| ### Render Targets management | |||
| @@ -489,7 +489,7 @@ const buffer = renderManager.renderTargetToBuffer(renderTarget) | |||
| ### Helpers | |||
| [`renderManager.blit`](https://threepipe.org/docs/classes/RenderManager.html#blit) - Blits a texture to the canvas or another render target with standard or a custom material. See [RendererBlitOptions](https://threepipe.org/docs/interfaces/RendererBlitOptions.html) for options. | |||
| [`renderManager.blit`](https://threepipe.org/docs/classes/RenderManager.html#blit) - Copy a texture to the canvas or another render target with standard or a custom material. See [RendererBlitOptions](https://threepipe.org/docs/interfaces/RendererBlitOptions.html) for options. | |||
| [`renderManager.clearColor`](https://threepipe.org/docs/classes/RenderManager.html#clearColor) - Clears the color of the canvas or a render target. | |||
| @@ -634,7 +634,7 @@ scene.refreshActiveNearFar() | |||
| [`scene.setDirty`](https://threepipe.org/docs/classes/RootScene.html#setDirty) - Notifies that something has changed in the scene for re-render. | |||
| [`scene.refreshScene`](https://threepipe.org/docs/classes/RootScene.html#refreshScene) - Notifies that some object has changed in the scene for scene refresh(like shadow refresh, ground etc) and re-render. Slower than `setDirty`, as it refreshes shadows, updates bounds, etc. | |||
| [`scene.refreshScene`](https://threepipe.org/docs/classes/RootScene.html#refreshScene) - Notifies that some object has changed in the scene for scene refresh(like shadow refresh, ground etc.) and re-render. Slower than `setDirty`, as it refreshes shadows, updates bounds, etc. | |||
| [`scene.refreshActiveNearFar`](https://threepipe.org/docs/classes/RootScene.html#refreshActiveNearFar) - Refreshes active near far. (in most cases this is done automatically and need not be called) | |||
| @@ -658,7 +658,7 @@ RootScene dispatches many events that are useful when writing app logic or plugi | |||
| `'materialUpdate`' - When a material in the scene has updated. (setDirty called on the material) | |||
| `'objectUpdate`' - When a object in the scene has updated. (setDirty called on the object) | |||
| `'objectUpdate`' - When an object in the scene has updated. (setDirty called on the object) | |||
| `'textureUpdate`' - When a texture in the scene has updated. (setDirty called on the texture) | |||
| @@ -773,7 +773,7 @@ camera.deactivateMain() | |||
| [`camera.setControlsCtor`](https://threepipe.org/docs/classes/PerspectiveCamera2.html#setControlsCtor) - Register a custom camera controls constructor. The controls can be set by setting `controlsMode` to the key/name of the controls. | |||
| [`camera.setInteractions`](https://threepipe.org/docs/classes/PerspectiveCamera2.html#setInteractions) - If `true`, the camera can be interacted with. This is useful when animating the camera or using the window scroll or programmatically automating the viewer. Using this multiple plugins can disable interactions and it will be enabled again when all of them enable it back. | |||
| [`camera.setInteractions`](https://threepipe.org/docs/classes/PerspectiveCamera2.html#setInteractions) - If `true`, the camera can be interacted with. This is useful when animating the camera or using the window scroll or programmatically automating the viewer. Using this multiple plugins can disable interactions, and it will be enabled again when all of them enable it back. | |||
| [`camera.refreshAspect`](https://threepipe.org/docs/classes/PerspectiveCamera2.html#refreshAspect) - Force refresh aspect ratio (this is done automatically with a ResizeObserver on the canvas in the viewer or when `viewer.resize()` is called) | |||
| @@ -781,7 +781,7 @@ camera.deactivateMain() | |||
| [`camera.deactivateMain`](https://threepipe.org/docs/classes/PerspectiveCamera2.html#deactivateMain) - Deactivate the camera as the main camera. | |||
| See also [CameraViewPlugin](#cameraviewplugin) for camera focus animation. | |||
| See also [CameraViewPlugin](../plugin/CameraViewPlugin) for camera focus animation. | |||
| ::: info Note | |||
| The constructor signature of `PerspectiveCamera2` is different `PerspectiveCamera`(from three.js), since it requires the canvas and the controlsMode during creation. | |||
| @@ -916,7 +916,7 @@ materialManager.dispose() | |||
| [`assetManager.addAsset`](https://threepipe.org/docs/classes/AssetManager.html#addAsset) - Add an asset or an asset bundle. Returns a promise that resolves to an array of asset objects. An asset can contain multiple objects, hence an array is returned. Use shorthand `viewer.load(path)` to load a single asset from a single file. | |||
| [`assetManager.storage`](https://threepipe.org/docs/classes/AssetManager.html#storage) - Get the storage used in the asset manager for caching. This is the storage that can be passed in the `ThreeViewer` contructor options. | |||
| [`assetManager.storage`](https://threepipe.org/docs/classes/AssetManager.html#storage) - Get the storage used in the asset manager for caching. This is the storage that can be passed in the `ThreeViewer` constructor options. | |||
| [`assetManager.importer`](https://threepipe.org/docs/classes/AssetManager.html#importer) - Get the importer. Provides low-level functions to import assets. This is an instance of [AssetImporter](https://threepipe.org/docs/classes/AssetImporter.html). | |||
| @@ -964,13 +964,13 @@ materialManager.dispose() | |||
| [`materialManager.convertToIMaterial`](https://threepipe.org/docs/classes/MaterialManager.html#convertToIMaterial) - Convert/upgrade a standard three.js material to threepipe material, by making it conform to [IMaterial](https://threepipe.org/docs/interfaces/IMaterial.html). | |||
| [`materialManager.registerMaterialExtension`](https://threepipe.org/docs/classes/MaterialManager.html#registerMaterialExtension) - Register a custom material extension for all materials in the viewer. Requires an instance of [IMaterialExtension](https://threepipe.org/docs/interfaces/IMaterialExtension.html). Material extensions are used to add custom properties, methods, uniforms, defines, shader patches etc to predefined materials. The extensions are added to the material when the mateiral or extension is registered to the manager. | |||
| [`materialManager.registerMaterialExtension`](https://threepipe.org/docs/classes/MaterialManager.html#registerMaterialExtension) - Register a custom material extension for all materials in the viewer. Requires an instance of [IMaterialExtension](https://threepipe.org/docs/interfaces/IMaterialExtension.html). Material extensions are used to add custom properties, methods, uniforms, defines, shader patches etc. to predefined materials. The extensions are added to the material when the material or extension is registered to the manager. | |||
| [`materialManager.unregisterMaterialExtension`](https://threepipe.org/docs/classes/MaterialManager.html#unregisterMaterialExtension) - Unregister a material extension from the manager. | |||
| [`materialManager.clearExtensions`](https://threepipe.org/docs/classes/MaterialManager.html#clearExtensions) - Remove all material extensions from the manager. | |||
| [`materialManager.applyMaterial`](https://threepipe.org/docs/classes/MaterialManager.html#applyMaterial) - Apply a material properties to other material(s) in the scene by name or uuid. This is useful when you want to change the properties of all materials with a given name or uuid. This can also be a regex, in that case a regex.match will be performed on the material/object name. | |||
| [`materialManager.applyMaterial`](https://threepipe.org/docs/classes/MaterialManager.html#applyMaterial) - Apply a material properties to other material(s) in the scene by name or uuid. This is useful when you want to change the properties of all materials with a given name or uuid. This can also be a regex, in that case a regex. Match will be performed on the material/object name. | |||
| [`materialManager.exportMaterial`](https://threepipe.org/docs/classes/MaterialManager.html#exportMaterial) - Export a material as JSON. Note: use `viewer.export` or `AssetExporter` instead to export all the embedded assets properly. | |||
| @@ -978,9 +978,9 @@ materialManager.dispose() | |||
| ## Other classes and interfaces | |||
| Threepipe provides various interfaces and classes for for three.js objects with upgraded features like UI events, serialization, etc. | |||
| Threepipe provides various interfaces and classes for three.js objects with upgraded features like UI events, serialization, etc. | |||
| These can be used while developing new apps to get better developer experience and features. | |||
| When standard three.js instances are added to the scene, they are automatically upgraded automatically at runtime to make them work with the rest of the framework. | |||
| When standard three.js instances are added to the scene, they are automatically upgraded at runtime to make them work with the rest of the framework. | |||
| Some important interfaces: | |||
| @@ -1,586 +0,0 @@ | |||
| ## @threepipe/plugin-tweakpane | |||
| [Tweakpane](https://tweakpane.github.io/docs/) UI plugin for ThreePipe | |||
| [//]: # (todo: image) | |||
| [Example](https://threepipe.org/examples/#tweakpane-ui-plugin/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/tweakpane/src/TweakpaneUiPlugin.ts) — | |||
| [API Reference](https://threepipe.org/plugins/tweakpane/docs/classes/TweakpaneUiPlugin.html) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-tweakpane) | |||
| ```bash | |||
| npm install @threepipe/plugin-tweakpane | |||
| ``` | |||
| TweakpaneUiPlugin adds support for using [uiconfig-tweakpane](https://github.com/repalash/uiconfig-tweakpane) | |||
| to create a configuration UI in applications using the [Tweakpane](https://tweakpane.github.io/docs/) library. | |||
| The plugin takes the [uiconfig](https://github.com/repalash/uiconfig.js) | |||
| that's defined in the viewer and all the objects to automatically render a UI in the browser. | |||
| ```typescript | |||
| import {IObject3D, ThreeViewer, TonemapPlugin} from 'threepipe' | |||
| import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane' | |||
| const viewer = new ThreeViewer({...}) | |||
| // Add the plugin | |||
| const plugin = viewer.addPluginSync(new TweakpaneUiPlugin(true)) // true to show expanded the UI by default | |||
| // Add the UI for the viewer | |||
| plugin.appendChild(viewer.uiConfig) | |||
| // Add UI for some plugins | |||
| plugin.setupPlugins(TonemapPlugin, DropzonePlugin) | |||
| ``` | |||
| ## @threepipe/plugin-blueprintjs | |||
| [Blueprint.js](https://blueprintjs.com/) UI plugin for ThreePipe | |||
| [//]: # (todo: image) | |||
| [Example](https://threepipe.org/examples/#blueprintjs-ui-plugin/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/blueprintjs/src/BlueprintJsUiPlugin.ts) — | |||
| [API Reference](https://threepipe.org/plugins/blueprintjs/docs/classes/BlueprintJsUiPlugin.html) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-blueprintjs) | |||
| ```bash | |||
| npm install @threepipe/plugin-blueprintjs | |||
| ``` | |||
| BlueprintJsUiPlugin adds support for using [uiconfig-blueprint](https://github.com/repalash/uiconfig-blueprint) | |||
| to create a configuration UI in applications using the [BlueprintJs](https://blueprintjs.com/) library. | |||
| The plugin takes the [uiconfig](https://github.com/repalash/uiconfig.js) | |||
| that's defined in the viewer and all the objects to automatically render a UI in the browser. | |||
| ```typescript | |||
| import {IObject3D, ThreeViewer, TonemapPlugin} from 'threepipe' | |||
| import {BlueprintJsUiPlugin} from '@threepipe/plugin-blueprintjs' | |||
| const viewer = new ThreeViewer({...}) | |||
| // Add the plugin | |||
| const plugin = viewer.addPluginSync(new BlueprintJsUiPlugin(true)) // true to show expanded the UI by default | |||
| // Add the UI for the viewer | |||
| plugin.appendChild(viewer.uiConfig) | |||
| // Add UI for some plugins | |||
| plugin.setupPlugins(TonemapPlugin, DropzonePlugin) | |||
| ``` | |||
| ## @threepipe/plugin-tweakpane-editor | |||
| Tweakpane Editor Plugin for ThreePipe | |||
| [//]: # (todo: image) | |||
| [Example](https://threepipe.org/examples/#tweakpane-editor/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/tweakpane-editor/src/TweakpaneEditorPlugin.ts) — | |||
| [API Reference](https://threepipe.org/plugins/tweakpane-editor/docs/classes/TweakpaneEditorPlugin.html) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-tweakpane-editor) | |||
| ```bash | |||
| npm install @threepipe/plugin-tweakpane-editor | |||
| ``` | |||
| `TweakpaneEditorPlugin` uses `TweakpaneUiPlugin` and other custom ui to create an editor for editing viewer, plugins, model and material configurations in the browser. | |||
| ```typescript | |||
| import {IObject3D, ThreeViewer, TonemapPlugin} from 'threepipe' | |||
| import {TweakpaneEditorPlugin} from '@threepipe/plugin-tweakpane-editor' | |||
| const viewer = new ThreeViewer({...}) | |||
| viewer.addPluginSync(new TweakpaneUiPlugin(true)) | |||
| const editor = viewer.addPluginSync(new TweakpaneEditorPlugin()) | |||
| // Add some plugins to the viewer | |||
| await viewer.addPlugins([ | |||
| new ViewerUiConfigPlugin(), | |||
| // new SceneUiConfigPlugin(), // this is already in ViewerUiPlugin | |||
| new DepthBufferPlugin(HalfFloatType, true, true), | |||
| new NormalBufferPlugin(HalfFloatType, false), | |||
| new RenderTargetPreviewPlugin(false), | |||
| ]) | |||
| // Load the plugin UI in the editor and tweakpane ui with categories. | |||
| editor.loadPlugins({ | |||
| ['Viewer']: [ViewerUiConfigPlugin, SceneUiConfigPlugin, DropzonePlugin, FullScreenPlugin], | |||
| ['GBuffer']: [DepthBufferPlugin, NormalBufferPlugin], | |||
| ['Post-processing']: [TonemapPlugin], | |||
| ['Debug']: [RenderTargetPreviewPlugin], | |||
| }) | |||
| ``` | |||
| ## @threepipe/plugin-configurator | |||
| Configurator Plugin implementations with basic UI for Threepipe. | |||
| Includes Material Configurator and Switch Node Configurator Plugins. | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-configurator) | |||
| ```bash | |||
| npm install @threepipe/plugin-configurator | |||
| ``` | |||
| ### MaterialConfiguratorPlugin | |||
| [//]: # (todo: image) | |||
| [Example](https://threepipe.org/examples/#material-configurator-plugin/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/configurator/src/MaterialConfiguratorPlugin.ts) — | |||
| [API Reference](https://threepipe.org/plugins/configurator/docs/classes/MaterialConfiguratorPlugin.html) | |||
| MaterialConfiguratorPlugin adds a UI to configure and switch between different material variations. | |||
| The variations of materials are mapped to material names or uuids in the scene. | |||
| These variations can be applied to the materials in the scene. (This copies the properties to the same material instances instead of assigning new materials) | |||
| The plugin interfaces with the picking plugin and also provides uiConfig to show and edit the variations. | |||
| This functionality is inherited from [MaterialConfiguratorBasePlugin](https://threepipe.org/docs/classes/MaterialConfiguratorBasePlugin.html). | |||
| Additionally, this plugin adds a simple Grid UI in the DOM over the viewer canvas to show various material variations and allow the user to apply them. | |||
| The UI can also be used in the editor to edit the variations and apply them. | |||
| To use, simply add the plugin in the viewer and configure using the created UI and UI Config. Note that `PickingPlugin` is required to be added before this to allow configurator. | |||
| To create a custom configurator UI, use the `MaterialConfiguratorBasePlugin` directly and call the function `applyVariation`, `getPreview` and `addVariation` to apply and add variations respectively. | |||
| [//]: # (TODO Add Example for custom UI) | |||
| ### SwitchNodePlugin | |||
| [//]: # (todo: image) | |||
| [Example](https://threepipe.org/examples/#switch-node-plugin/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/configurator/src/SwitchNodePlugin.ts) — | |||
| [API Reference](https://threepipe.org/plugins/configurator/docs/classes/SwitchNodePlugin.html) | |||
| SwitchNodePlugin adds a UI to configure and switch between different different object variations within a switch node object. | |||
| This plugin allows you to configure object variations with object names in a file and apply them in the scene. | |||
| Each SwitchNode is a parent object with multiple direct children. Only one child is visible at a time. | |||
| This works by toggling the `visible` property of the children of a parent object. | |||
| The plugin interfaces with the picking plugin and also provides uiConfig to show and edit the variations. | |||
| It also provides a function to create snapshot previews of individual variations. This creates a limited render of the object with the selected child visible. | |||
| To get a proper render, its better to render it offline and set the image as a preview. | |||
| This functionality is inherited from [SwitchNodeBasePlugin](https://threepipe.org/docs/classes/SwitchNodeBasePlugin.html). | |||
| Additionally, this plugin adds a simple Grid UI in the DOM over the viewer canvas to show various material variations and allow the user to apply them. | |||
| The UI can also be used in the editor to edit the variations and apply them. | |||
| To use, simply add the plugin in the viewer and configure using the created UI and UI Config. Note that `PickingPlugin` is required to be added before this to allow configurator. | |||
| To create a custom configurator UI, use the `SwitchNodeBasePlugin` directly and call the function `selectNode`, `getPreview` and `addNode` to apply and add variations respectively. | |||
| [//]: # (TODO Add Example for custom UI) | |||
| ## @threepipe/plugin-geometry-generator | |||
| Exports [GeometryGeneratorPlugin](https://threepipe.org/plugins/geometry-generator/docs/classes/BlendLoadPlugin.html) with several Geometry generators to create parametric and updatable geometries like plane, circle, sphere, box, torus, cylinder, cone etc. | |||
| [Example](https://threepipe.org/examples/#geometry-generator-plugin/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/geometry-generator/src/index.ts) — | |||
| [API Reference](https://threepipe.org/plugins/geometry-generator/docs) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-geometry-generator) | |||
| ```bash | |||
| npm install @threepipe/plugin-geometry-generator | |||
| ``` | |||
| The generated geometries/meshes include the parameters in the userData and can be re-generated by changing the parameters from the UI or the plugin API. | |||
| Includes the following generator which inherit from [AGeometryGenerator](https://threepipe.org/plugins/geometry-generator/docs/classes/AGeometryGenerator.html): | |||
| - **plane**: [PlaneGeometryGenerator](https://threepipe.org/plugins/geometry-generator/docs/classes/PlaneGeometryGenerator), | |||
| - **sphere**: [SphereGeometryGenerator](https://threepipe.org/plugins/geometry-generator/docs/classes/SphereGeometryGenerator), | |||
| - **box**: [BoxGeometryGenerator](https://threepipe.org/plugins/geometry-generator/docs/classes/BoxGeometryGenerator), | |||
| - **circle**: [CircleGeometryGenerator](https://threepipe.org/plugins/geometry-generator/docs/classes/CircleGeometryGenerator), | |||
| - **torus**: [TorusGeometryGenerator](https://threepipe.org/plugins/geometry-generator/docs/classes/TorusGeometryGenerator), | |||
| - **cylinder**: [CylinderGeometryGenerator](https://threepipe.org/plugins/geometry-generator/docs/classes/CylinderGeometryGenerator), | |||
| Sample Usage: | |||
| ```typescript | |||
| import {ThreeViewer, UnlitMaterial} from 'threepipe' | |||
| import {GeometryGeneratorPlugin} from '@threepipe/plugin-geometry-generator' | |||
| const viewer = new ThreeViewer({...}) | |||
| const generator = viewer.addPluginSync(GeometryGeneratorPlugin) | |||
| const sphere = generator.generateObject('sphere', {radius: 3}) | |||
| viewer.scene.addObject(sphere) | |||
| // to update the geometry | |||
| generator.updateGeometry(sphere.geometry, {radius: 4, widthSegments: 100}) | |||
| // to add a custom generator | |||
| generator.generators.custom = new CustomGenerator('custom') // Extend from AGeometryGenerator or implement GeometryGenerator interface | |||
| // refresh the ui so the new generator is available to select. | |||
| generator.uiConfig.uiRefresh?.() | |||
| // change the material type for all objects | |||
| generator.defaultMaterialClass = UnlitMaterial // by default its PhysicalMaterial | |||
| viewer.scene.addObject(generator.generateObject('box', {width: 2, height: 2, depth: 2})) | |||
| ``` | |||
| ## @threepipe/plugin-gltf-transform | |||
| Exports [GLTFDracoExportPlugin](https://threepipe.org/plugins/gltf-transform/docs/classes/GLTFDracoExportPlugin.html) that extends the default gltf exporter to compress the file after export. | |||
| [Example](https://threepipe.org/examples/#glb-draco-export/) — | |||
| [Source Code](plugins/gltf-transform/src/index.ts) — | |||
| [API Reference](https://threepipe.org/plugins/gltf-transform/docs) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-gltf-transform) | |||
| ```bash | |||
| npm install @threepipe/plugin-gltf-transform | |||
| ``` | |||
| To use, simply add the plugin to the viewer and export using the `viewer.export` or `viewer.exportScene` functions. This also adds UI options to `AssetExporterPlugin` which are used when exporting using the plugin or using `viewer.exportScene` | |||
| The plugin overloads the default gltf exporter in the asset manager with `GLTFDracoExporter`. Using the [gltf-transform](https://gltf-transform.donmccurdy.com/) library, it compresses the exported gltf file using the [khr_draco_mesh_compression](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_draco_mesh_compression/README.md) extension. | |||
| Note - Only `glb` export supported right now. | |||
| Sample Usage: | |||
| ```typescript | |||
| import {ThreeViewer, downloadBlob} from 'threepipe' | |||
| import {GLTFDracoExportPlugin} from '@threepipe/plugin-gltf-transform' | |||
| const viewer = new ThreeViewer({...}) | |||
| viewer.addPluginSync(GLTFDracoExportPlugin) | |||
| await viewer.load('file.glb') | |||
| const blob = await viewer.exportScene({ | |||
| compress: true, // this must be specified, by default it's false. | |||
| viewerConfig: true, // to export with viewer, scene and plugin settings | |||
| }) | |||
| // download the file | |||
| downloadBlob(blob, 'scene.glb') | |||
| ``` | |||
| ## @threepipe/plugins-extra-importers | |||
| Exports several plugins to add support for various file types. | |||
| [Example](https://threepipe.org/examples/#extra-importer-plugins/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/extra-importers/src/index.ts) — | |||
| [API Reference](https://threepipe.org/plugins/extra-importers/docs) | |||
| [](https://www.npmjs.com/package/@threepipe/plugins-extra-importers) | |||
| ```bash | |||
| npm install @threepipe/plugins-extra-importers | |||
| ``` | |||
| This package exports several plugins to add support for several file types using the following plugins | |||
| - [TDSLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/TDSLoadPlugin.html) - Load 3DS Max (.3ds) files | |||
| - [ThreeMFLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/ThreeMFLoadPlugin.html) - Load 3MF (.3mf) files | |||
| - [ColladaLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/ColladaLoadPlugin.html) - Load Collada (.dae) files | |||
| - [AMFLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/AMFLoadPlugin.html) - Load AMF (.amf) files | |||
| - [BVHLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/BVHLoadPlugin.html) - Load BVH (.bvh) files | |||
| - [VOXLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/VOXLoadPlugin.html) - Load MagicaVoxel (.vox) files | |||
| - [GCodeLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/GCodeLoadPlugin.html) - Load GCode (.gcode) files | |||
| - [MDDLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/MDDLoadPlugin.html) - Load MDD (.mdd) files | |||
| - [PCDLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/PCDLoadPlugin.html) - Load Point cloud data (.pcd) files | |||
| - [TiltLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/TiltLoadPlugin.html) - Load Tilt Brush (.tilt) files | |||
| - [VRMLLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/VRMLLoadPlugin.html) - Load VRML (.wrl) files | |||
| - [MPDLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/MPDLoadPlugin.html) - Load LDraw (.mpd) files | |||
| - [VTKLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/VTKLoadPlugin.html) - Load VTK (.vtk) files | |||
| - [XYZLoadPlugin](https://threepipe.org/plugins/extra-importers/docs/classes/XYZLoadPlugin.html) - Load XYZ (.xyz) files | |||
| To add all the plugins at once use `extraImporters`. This adds support for loading all the above file types. | |||
| ```typescript | |||
| import {ThreeViewer} from 'threepipe' | |||
| import {extraImporters} from '@threepipe/plugins-extra-importers' | |||
| const viewer = new ThreeViewer({...}) | |||
| viewer.addPluginsSync(extraImporters) | |||
| // Now load any file as is. | |||
| const model = await viewer.load<IObject3D>('file.3mf') | |||
| // To load the file as a data url, use the correct mimetype | |||
| const model1 = await viewer.load<IObject3D>('data:model/3mf;base64,...') | |||
| ``` | |||
| Remove the `<IObject3D>` if using javascript and not typescript. | |||
| ## @threepipe/plugin-network | |||
| Network/Cloud related plugin implementations for Threepipe. | |||
| Includes `AWSClientPlugin` and `TransfrSharePlugin`. | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-network) | |||
| ```bash | |||
| npm install @threepipe/plugin-network | |||
| ``` | |||
| ### TransfrSharePlugin | |||
| [//]: # (todo: image) | |||
| [Example](https://threepipe.org/examples/#transfr-share-plugin/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/network/src/TransfrSharePlugin.ts) — | |||
| [API Reference](https://threepipe.org/plugins/network/docs/classes/TransfrSharePlugin.html) | |||
| TransfrSharePlugin provides functionality to export and upload the scene or an object as glb and provide link to share/preview/edit the files. | |||
| It uses the options from the `AssetExporterPlugin` to export the scene or object, and can be configured using it's ui. | |||
| Uses the free service [transfr.one](https://transfr.one/) by default which deletes the files after a certain time, but the url can be changed to a custom backend or a self-hosted version of transfr. | |||
| ::: tip Note | |||
| Since the uploaded files are publicly accessible by anyone by default, it is recommended to encrypt the file using the exporter options or use a secure backend. | |||
| ::: | |||
| ```typescript | |||
| import {ThreeViewer} from 'threepipe' | |||
| import {TransfrSharePlugin} from '@threepipe/plugin-network' | |||
| const viewer = new ThreeViewer({...}) | |||
| // Add the plugin | |||
| const sharePlugin = viewer.addPluginSync(new TransfrSharePlugin()) | |||
| // when sharing, this query param is set to the model link | |||
| sharePlugin.queryParam = 'm' // this is the default | |||
| // used when clicking/calling Share page link | |||
| sharePlugin.pageUrl = window.location.href // this is the default | |||
| // used when clicking/calling Share viewer link | |||
| sharePlugin.baseUrls.viewer = 'https://threepipe.org/examples/model-viewer/index.html' | |||
| // used when clicking/calling Share editor link | |||
| sharePlugin.baseUrls.editor = 'https://threepipe.org/examples/tweakpane-editor/index.html' | |||
| // set to a custom server | |||
| // sharePlugin.serverUrl = 'https://example.com/' | |||
| // upload and get the link of the 3d model | |||
| const link = await sharePlugin.getLink() | |||
| // or upload and get the share link with a base page. And also copy to clipboard and shows a alert prompt(using viewer.dialog) | |||
| const link2 = await sharePlugin.shareLink('https://example.com/custom_viewer') | |||
| // or get the editor link directly | |||
| const link3 = await sharePlugin.shareEditorLink() | |||
| // to encrypt | |||
| const assetExporterPlugin = viewer.getPlugin(AssetExporterPlugin) // this is a dependency, so automatically added | |||
| assetExporterPlugin.encrypt = true | |||
| // assetExporterPlugin.encryptKey = 'password' // user will be prompted for password when exporting if this is commented | |||
| await sharePlugin.shareViewerLink() | |||
| ``` | |||
| ### AWSClientPlugin | |||
| [//]: # (todo: image) | |||
| [Example](https://threepipe.org/examples/#aws-client-plugin/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/network/src/AWSClientPlugin.ts) — | |||
| [API Reference](https://threepipe.org/plugins/network/docs/classes/AWSClientPlugin.html) | |||
| Provides `fetch` function that performs a fetch request with AWS v4 signing. | |||
| This is useful for connecting to AWS services like S3 directly from the client. | |||
| It also interfaces with the `FileTransferPlugin` to directly upload file when exported with the viewer or the plugin. | |||
| ::: danger Note | |||
| Make sure to use keys with limited privileges and correct CORS settings. | |||
| All the keys will be stored in plain text if `serializeSettings` is set to true | |||
| ::: | |||
| ```typescript | |||
| import {ThreeViewer} from 'threepipe' | |||
| import {AWSClientPlugin} from '@threepipe/plugin-network' | |||
| const viewer = new ThreeViewer({...}) | |||
| const awsPlugin = viewer.addPluginSync(new AWSClientPlugin()) | |||
| // set parameters and export. This can all be done from the UI also. | |||
| awsPlugin.accessKeyId = '00000000000000000000' | |||
| awsPlugin.accessKeySecret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' | |||
| awsPlugin.endpointURL = 'https://s3.amazonaws.com/bucket/' | |||
| awsPlugin.pathPrefix = 'some/path/' | |||
| // or load a json file with the parameters | |||
| // the json file can be creating by entering the data in the UI and clicking the download preset json option. | |||
| await viewer.load('file.json') | |||
| // this will export the scene as glb | |||
| const blob = await viewer.exportScene() | |||
| // for a plugin config | |||
| // blob = await viewer.export(viewer.getPlugin(GroundPlugin)) | |||
| // for a material | |||
| // blob = await viewer.export(object.material) | |||
| // for an object/mesh | |||
| // blob = await viewer.export(object, {exportExt: 'glb'}) | |||
| // upload to s3. needs the parameters to be correct | |||
| await viewer.exportBlob(blob, 'filename.glb') | |||
| ``` | |||
| ::: tip Note | |||
| CORS should be enabled for the S3 bucket on the domain where the viewer is hosted. This requirement can be bypassed during development by setting `AWSClientPlugin.USE_PROXY = true`. A free proxy is already set by default and can be changed by setting `AWSClientPlugin.PROXY_URL`. | |||
| ::: | |||
| ## @threepipe/plugin-blend-importer | |||
| Exports [BlendImporterPlugin](https://threepipe.org/plugins/blend-importer/docs/classes/BlendLoadPlugin.html) which adds support for loading .blend files. | |||
| It uses [js.blend](https://github.com/acweathersby/js.blend) for parsing blend file structure. | |||
| ::: warning Note | |||
| This is still a WIP. | |||
| ::: | |||
| Currently working: `Mesh`, `BufferGeometry` and basic `PointLight`. | |||
| To be added: `PhysicalMaterial`, `UnlitMaterial` (similar to blender-gltf-io plugin) | |||
| [Example](https://threepipe.org/examples/#blend-load/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/blend-importer/src/index.ts) — | |||
| [API Reference](https://threepipe.org/plugins/blend-importer/docs) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-blend-importer) | |||
| ```bash | |||
| npm install @threepipe/plugin-blend-importer | |||
| ``` | |||
| ```typescript | |||
| import {ThreeViewer} from 'threepipe' | |||
| import {BlendLoadPlugin} from '@threepipe/plugin-blend-importer' | |||
| const viewer = new ThreeViewer({...}) | |||
| viewer.addPluginSync(BlendLoadPlugin) | |||
| // Now load any .blend file. | |||
| const model = await viewer.load<IObject3D>('path/to/file.blend') | |||
| // To load the file as a data url, use the correct mimetype | |||
| const model1 = await viewer.load<IObject3D>('data:application/x-blender;base64,...') | |||
| ``` | |||
| [//]: # ( TODO: The plugin should parse and references to other assets and find them relative to the .blend file or the current location.) | |||
| ## @threepipe/plugin-gaussian-splatting | |||
| Exports [GaussianSplattingPlugin](https://threepipe.org/plugins/gaussian-splatting/docs/classes/GaussianSplattingPlugin.html) which adds support for loading .blend files. | |||
| It uses [`three-gaussian-splat`](https://github.com/repalash/threepipe/blob/master/plugins/gaussian-splatting/src/three-gaussian-splat), a rewrite of [@zappar/three-guassian-splat](https://github.com/zappar-xr/three-gaussian-splat) (and [gsplat.js](https://github.com/huggingface/gsplat.js) and [antimatter15/splat](https://github.com/antimatter15/splat)) for loading splat files and rendering gaussian splats. | |||
| [Example](https://threepipe.org/examples/#splat-load/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/gaussian-splatting/src/index.ts) — | |||
| [API Reference](https://threepipe.org/plugins/gaussian-splatting/docs) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-gaussian-splatting) | |||
| ```bash | |||
| npm install @threepipe/plugin-gaussian-splatting | |||
| ``` | |||
| ::: warning Note | |||
| This is still a WIP. | |||
| ::: | |||
| Currently working: | |||
| * Importing .splat files (just array buffer of gaussian splat attributes) | |||
| * ThreeGaussianSplatPlugin (Same as GaussianSplattingPlugin), add importer and update events to the viewer | |||
| * GaussianSplatMaterialExtension for adding gaussian splat functionality to any material like Unlit, Physical | |||
| * GaussianSplatMesh a subclass of Mesh2 for holding the gaussian splat geometry and a material with gaussian splat extension. also handles basic raycast in the splat geometry. (assuming simple points) | |||
| * GaussianSplatGeometry holds the geometry data and and the sort worker. Computes correct bounding box and sphere. | |||
| * SplatLoader for loading splat files and creating the geometry and material. | |||
| * GaussianSplatMaterialUnlit, GaussianSplatMaterialRaw | |||
| * GaussianSplatMaterialPhysical, working but normals are hardcoded to 0,1,0 | |||
| TBD: | |||
| * Exporting/embedding splat files into glb | |||
| * Rendering to depth/gbuffer | |||
| * Estimate normals/read from file | |||
| * Lighting in GaussianSplatMaterialPhysical | |||
| ```typescript | |||
| import {ThreeViewer} from 'threepipe' | |||
| import {GaussianSplattingPlugin} from '@threepipe/plugin-gaussian-splatting' | |||
| const viewer = new ThreeViewer({...}) | |||
| viewer.addPluginSync(GaussianSplattingPlugin) | |||
| // Now load any .splat file. | |||
| const model = await viewer.load<GaussianSplatMesh>('path/to/file.splat') | |||
| ``` | |||
| ## @threepipe/plugin-svg-renderer | |||
| Exports [ThreeSVGRendererPlugin](https://threepipe.org/plugins/svg-renderer/docs/classes/ThreeSVGRendererPlugin.html) and [BasicSVGRendererPlugin](https://threepipe.org/plugins/svg-renderer/docs/classes/BasicSVGRendererPlugin.html) which provide support for rendering the 3d scene as [SVG(Scalable Vector Graphics)](https://developer.mozilla.org/en-US/docs/Web/SVG). The generated SVG is compatible with browser rendering and other software like figma, illustrator etc. | |||
| [Example](https://threepipe.org/examples/#three-svg-renderer/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/svg-renderer/src/index.ts) — | |||
| [API Reference](https://threepipe.org/plugins/svg-renderer/docs) — | |||
| [GPLV3 License](https://github.com/repalash/threepipe/blob/master/plugins/svg-renderer/LICENSE) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-svg-renderer) | |||
| ```bash | |||
| npm install @threepipe/plugin-svg-renderer | |||
| ``` | |||
| ::: warning Note | |||
| This is still a WIP. API might change a bit | |||
| ::: | |||
| `ThreeSVGRendererPlugin` uses [`three-svg-renderer`](https://github.com/repalash/threepipe/blob/master/plugins/svg-renderer/src/three-svg-renderer), which is a modified version of [three-svg-renderer](https://www.npmjs.com/package/three-svg-renderer) (GPLV3 Licenced). | |||
| The plugin renderers meshes in the viewer scene to svg objects by computing polygons and contours of the geometry in view space. Check [LokiResearch/three-svg-renderer](https://github.com/LokiResearch/three-svg-renderer?tab=readme-ov-file#references) for more details. | |||
| In the modified version that is used here, support for some types of geometries is added and a rendered image in screen-space is used to create raster fill images for paths along with some other small changes. Check out the [Example](https://threepipe.org/examples/#three-svg-renderer/) for demo. See also [svg-geometry-playground example](https://threepipe.org/examples/#svg-geometry-playground/) for usage with other plugins `PickingPlugin`, `TransformControlsPlugin` and `GeometryGeneratorPlugin`. | |||
| Note that this does not support all the features of three.js and may not work with all types of materials and geometries. Check the examples for a list of sample models that do and don't work. | |||
| `BasicSVGRendererPlugin` is a sample plugin using [SVGRenderer](https://threejs.org/docs/index.html?q=svg#examples/en/renderers/SVGRenderer) from three.js addons. This renders all triangles in the scene to separate svg paths. Check the three.js docs for more details. Check out the [Example](https://threepipe.org/examples/#basic-svg-renderer/) for demo. | |||
| ```typescript | |||
| import {ThreeViewer} from 'threepipe' | |||
| import {ThreeSVGRendererPlugin} from '@threepipe/plugin-svg-renderer' | |||
| const viewer = new ThreeViewer({ | |||
| ..., | |||
| rgbm: false, // this is required | |||
| }) | |||
| const svgRender = viewer.addPluginSync(ThreeSVGRendererPlugin) | |||
| svgRender.autoRender = true // automatically render when camera or any object changes. | |||
| svgRender.autoMakeSvgObjects = true // automatically create SVG objects for all meshes in the scene. | |||
| // svgRender.makeSVGObject(object) // manually create SVG object for an object. (if autoMakeSvgObjects is false) | |||
| // Now load or generate any 3d model. Make sure its not very big. And the meshes are optimized. | |||
| const model = await viewer.load<IOBject3D>('path/to/file.glb') | |||
| // clear the background of the viewer | |||
| viewer.scene.backgroundColor = null | |||
| viewer.scene.background = null | |||
| // disable damping to get better experience. | |||
| viewer.scene.mainCamera.controls!.enableDamping = false | |||
| // hide the canvas to see the underlying svg node. | |||
| // note: do not set the display to none or remove the canvas as OrbitControls and other plugins might still be tracking the canvas. | |||
| viewer.canvas.style.opacity = '0' | |||
| // 3d pipeline can also be disabled like this if `drawImageFills` is `false` to get better performance. Do this only after loading the model. | |||
| // await viewer.doOnce('postFrame') // wait for the first frame to be rendered (for autoScale etc) | |||
| // viewer.renderManager.autoBuildPipeline = false | |||
| // viewer.renderManager.pipeline = [] // this will disable main viewer rendering | |||
| ``` | |||
| @@ -13,7 +13,7 @@ next: | |||
| Exports [BlendImporterPlugin](https://threepipe.org/plugins/blend-importer/docs/classes/BlendLoadPlugin.html) which adds support for loading .blend files. | |||
| It uses [js.blend](https://github.com/acweathersby/js.blend) for parsing blend file structure. | |||
| It uses [`js.blend`](https://github.com/acweathersby/js.blend) for parsing blend file structure. | |||
| ::: warning Note | |||
| This is still a WIP. | |||
| @@ -53,14 +53,14 @@ To create a custom configurator UI, use the `MaterialConfiguratorBasePlugin` dir | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/configurator/src/SwitchNodePlugin.ts) — | |||
| [API Reference](https://threepipe.org/plugins/configurator/docs/classes/SwitchNodePlugin.html) | |||
| SwitchNodePlugin adds a UI to configure and switch between different different object variations within a switch node object. | |||
| SwitchNodePlugin adds a UI to configure and switch between different object variations within a switch node object. | |||
| This plugin allows you to configure object variations with object names in a file and apply them in the scene. | |||
| Each SwitchNode is a parent object with multiple direct children. Only one child is visible at a time. | |||
| This works by toggling the `visible` property of the children of a parent object. | |||
| The plugin interfaces with the picking plugin and also provides uiConfig to show and edit the variations. | |||
| It also provides a function to create snapshot previews of individual variations. This creates a limited render of the object with the selected child visible. | |||
| To get a proper render, its better to render it offline and set the image as a preview. | |||
| To get a proper render, it's better to render it offline and set the image as a preview. | |||
| This functionality is inherited from [SwitchNodeBasePlugin](https://threepipe.org/docs/classes/SwitchNodeBasePlugin.html). | |||
| Additionally, this plugin adds a simple Grid UI in the DOM over the viewer canvas to show various material variations and allow the user to apply them. | |||
| @@ -34,7 +34,7 @@ Currently working: | |||
| * ThreeGaussianSplatPlugin (Same as GaussianSplattingPlugin), add importer and update events to the viewer | |||
| * GaussianSplatMaterialExtension for adding gaussian splat functionality to any material like Unlit, Physical | |||
| * GaussianSplatMesh a subclass of Mesh2 for holding the gaussian splat geometry and a material with gaussian splat extension. also handles basic raycast in the splat geometry. (assuming simple points) | |||
| * GaussianSplatGeometry holds the geometry data and and the sort worker. Computes correct bounding box and sphere. | |||
| * GaussianSplatGeometry holds the geometry data and the sort worker. Computes correct bounding box and sphere. | |||
| * SplatLoader for loading splat files and creating the geometry and material. | |||
| * GaussianSplatMaterialUnlit, GaussianSplatMaterialRaw | |||
| * GaussianSplatMaterialPhysical, working but normals are hardcoded to 0,1,0 | |||
| @@ -14,7 +14,7 @@ next: | |||
| Exports [GLTFDracoExportPlugin](https://threepipe.org/plugins/gltf-transform/docs/classes/GLTFDracoExportPlugin.html) that extends the default gltf exporter to compress the file after export. | |||
| [Example](https://threepipe.org/examples/#glb-draco-export/) — | |||
| [Source Code](plugins/gltf-transform/src/index.ts) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/gltf-transform/src/index.ts) — | |||
| [API Reference](https://threepipe.org/plugins/gltf-transform/docs) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-gltf-transform) | |||
| @@ -31,7 +31,7 @@ npm install @threepipe/plugin-network | |||
| TransfrSharePlugin provides functionality to export and upload the scene or an object as glb and provide link to share/preview/edit the files. | |||
| It uses the options from the `AssetExporterPlugin` to export the scene or object, and can be configured using it's ui. | |||
| It uses the options from the `AssetExporterPlugin` to export the scene or object, and can be configured using its ui. | |||
| Uses the free service [transfr.one](https://transfr.one/) by default which deletes the files after a certain time, but the url can be changed to a custom backend or a self-hosted version of transfr. | |||
| @@ -13,7 +13,7 @@ Exports [ThreeSVGRendererPlugin](https://threepipe.org/plugins/svg-renderer/docs | |||
| [Example](https://threepipe.org/examples/#three-svg-renderer/) — | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/plugins/svg-renderer/src/index.ts) — | |||
| [API Reference](https://threepipe.org/plugins/svg-renderer/docs) — | |||
| [GPLV3 License](https://github.com/repalash/threepipe/blob/master/plugins/svg-renderer/LICENSE) | |||
| [GPLv3 License](https://github.com/repalash/threepipe/blob/master/plugins/svg-renderer/LICENSE) | |||
| [](https://www.npmjs.com/package/@threepipe/plugin-svg-renderer) | |||
| @@ -18,7 +18,7 @@ next: | |||
| [API Reference](https://threepipe.org/docs/classes/AssetExporterPlugin.html) | |||
| Asset Exporter Plugin provides options and methods to export the scene, object GLB or Viewer Config. | |||
| All the functionality is available in the viewer(and `AssetExporter`) directly, this plugin only provides a ui-config and maintains state of the options which is saved as plugin configuration along with glb/vjson file | |||
| All the functionality is available in the viewer(and `AssetExporter`) directly, this plugin only provides an ui-config and maintains state of the options which is saved as plugin configuration along with glb/vjson file | |||
| ```typescript | |||
| import {ThreeViewer, AssetExporterPlugin} from 'threepipe' | |||
| @@ -17,8 +17,8 @@ next: | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/animation/CameraViewPlugin.ts) — | |||
| [API Reference](https://threepipe.org/docs/classes/CameraViewPlugin.html) | |||
| CameraViewPlugin adds support to save and load camera views, which can then be animated to. | |||
| It uses PopmotionPlugin internally to animate any camera to a saved view or to loop through all the saved views. | |||
| `CameraViewPlugin` adds support to save and load camera views, which can then be animated to. | |||
| It uses `PopmotionPlugin` internally to animate any camera to a saved view or to loop through all the saved views. | |||
| It also provides a UI to manage the views. | |||
| @@ -19,7 +19,7 @@ next: | |||
| Contact Shadow Ground Plugin adds a ground plane with three.js contact shadows to the viewer scene. | |||
| The plane is added to the scene root at runtime and not saved with scene export. Instead the plugin settings are saved with the scene. | |||
| The plane is added to the scene root at runtime and not saved with scene export. Instead, the plugin settings are saved with the scene. | |||
| It inherits from the base class [BaseGroundPlugin](https://threepipe.org/docs/classes/BaseGroundPlugin.html) which provides generic ground plane functionality. Check the source code for more details. With the property `autoAdjustTransform`, the ground plane is automatically adjusted based on the bounding box of the scene. | |||
| @@ -20,7 +20,7 @@ next: | |||
| DeviceOrientationControlsPlugin enables controlling the main camera rotation in the scene with device orientation. This only works on devices which have a gyroscope(but can also be emulated in devtools in chrome). | |||
| After the plugin is added, it adds support for setting `deviceOrientation` as the key in `scene.mainCamera.controlMode`. | |||
| When the controls is started (for the first time), the current camera rotation is and the device orientation is saved and used as reference. To reset the saved device orientation, call `resetView` in the controls. | |||
| When the controls are started (for the first time), the current camera rotation is and the device orientation is saved and used as reference. To reset the saved device orientation, call `resetView` in the controls. | |||
| Sample Usage | |||
| ```typescript | |||
| @@ -16,8 +16,8 @@ next: | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/export/FileTransferPlugin.ts) — | |||
| [API Reference](https://threepipe.org/docs/classes/FileTransferPlugin.html) | |||
| Provides a way to extend the viewer.export functionality with custom actions. It also maintains a process state for plugins like `LoadingScreenPlugin`. | |||
| Provides a way to extend the `viewer.export` functionality with custom actions. It also maintains a process state for plugins like `LoadingScreenPlugin`. | |||
| This plugin is added automatically, there is no need to use it manually, unless writing a plugin to extend the export functionality. | |||
| Used in eg `AWSClientPlugin` to upload files directly to S3. | |||
| Used in e.g. `AWSClientPlugin` to upload files directly to S3. | |||
| @@ -17,7 +17,7 @@ next: | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/pipeline/FrameFadePlugin.ts) — | |||
| [API Reference](https://threepipe.org/docs/classes/FrameFadePlugin.html) | |||
| FrameFadePlugin adds a post-render pass to the render manager and blends the last frame with the current frame over time. This is useful for creating smooth transitions between frames for example when changing the camera position, material, object properties, etc to avoid a sudden jump. | |||
| FrameFadePlugin adds a post-render pass to the render manager and blends the last frame with the current frame over time. This is useful for creating smooth transitions between frames for example when changing the camera position, material, object properties, etc. to avoid a sudden jump. | |||
| ```typescript | |||
| import {ThreeViewer, FrameFadePlugin} from 'threepipe' | |||
| @@ -22,8 +22,8 @@ Manages playback of GLTF animations. | |||
| The GLTF animations can be created in any 3d software that supports GLTF export like Blender. | |||
| If animations from multiple files are loaded, they will be merged in a single root object and played together. | |||
| The time playback is managed automatically, but can be controlled manually by setting {@link autoIncrementTime} to false and using {@link setTime} to set the time. | |||
| The time playback is managed automatically, but can be controlled manually by setting [autoIncrementTime](https://threepipe.org/docs/classes/GLTFAnimationPlugin.html#autoincrementtime) to false and using [setTime](https://threepipe.org/docs/classes/GLTFAnimationPlugin.html#settime) to set the time. | |||
| This plugin is made for playing, pausing, stopping, all the animations at once, while it is possible to play individual animations, it is not recommended. | |||
| To play individual animations, with custom choreography, use the {@link GLTFAnimationPlugin.animations} property to get reference to the animation clips and actions. Create your own mixers and control the animation playback like in three.js | |||
| To play individual animations, with custom choreography, use the [`GLTFAnimationPlugin.animations`](https://threepipe.org/docs/classes/GLTFAnimationPlugin.html#animations) property to get reference to the animation clips and actions. Create your own mixers and control the animation playback like in three.js | |||
| @@ -17,7 +17,7 @@ next: | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/extras/HDRiGroundPlugin.ts) — | |||
| [API Reference](https://threepipe.org/docs/classes/HDRiGroundPlugin.html) | |||
| HDRiGroundPlugin patches the background shader in the renderer to add support for ground projected environment map/skybox. Works simply by setting the background same as the environemnt and enabling the plugin. | |||
| HDRiGroundPlugin patches the background shader in the renderer to add support for ground projected environment map/skybox. Works simply by setting the background same as the environment and enabling the plugin. | |||
| The world radius, tripod height, and origin position(center offset) can be set in the plugin. | |||
| @@ -21,7 +21,7 @@ Interaction Prompt Plugin adds a hand pointer icon over the canvas that moves to | |||
| The default pointer icon from [google/model-viewer](https://github.com/google/model-viewer) and can be configured with the `pointerIcon` property. | |||
| The pointer is automatically shown when some object is in the scene and the camera is not moving. | |||
| The pointer is automatically shown when some object is in the scene and the camera are not moving. | |||
| The animation starts after a delay and stops on user interaction. It then restarts after a delay after the user stops interacting | |||
| @@ -15,7 +15,7 @@ next: | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/import/KTX2LoadPlugin.ts) — | |||
| [API Reference](https://threepipe.org/docs/classes/KTX2LoadPlugin.html) | |||
| Adds support for loading .ktx2 ([Khronos Texture](https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/) files with asset manager and embedded in glTF files. | |||
| Adds support for loading `.ktx2` [Khronos Texture](https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/) files with asset manager and embedded in glTF files. | |||
| KTX2LoadPlugin also adds support for exporting loaded .ktx2 files in glTF files with the [KHR_texture_basisu](https://www.khronos.org/registry/KHR/textures/2.0-extensions/KHR_texture_basisu/) extension. | |||
| @@ -15,7 +15,7 @@ next: | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/import/KTXLoadPlugin.ts) — | |||
| [API Reference](https://threepipe.org/docs/classes/KTXLoadPlugin.html) | |||
| Adds support for loading .ktx ([Khronos Texture](https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/) files. | |||
| Adds support for loading `.ktx` [Khronos Texture](https://www.khronos.org/opengles/sdk/tools/KTX/file_format_spec/) files. | |||
| Note: This plugin only adds support for loading .ktx file, and not exporting them in the bundled .glb. Use .ktx2 files instead of .ktx files for better compression and performance. | |||
| @@ -20,7 +20,7 @@ next: | |||
| Normal Buffer Plugin adds a pre-render pass to the render manager and renders a normal buffer to a target. The render target can be accessed by other plugins throughout the rendering pipeline to create effects like SSAO, SSR, etc. | |||
| ::: info NOTE | |||
| Use [`GBufferPlugin`](#GBufferPlugin) if using both `DepthBufferPlugin` and `NormalBufferPlugin` to render both depth and normal buffers in a single pass. | |||
| Use [`GBufferPlugin`](./GBufferPlugin) if using both `DepthBufferPlugin` and `NormalBufferPlugin` to render both depth and normal buffers in a single pass. | |||
| ::: | |||
| ```typescript | |||
| @@ -18,7 +18,7 @@ next: | |||
| [API Reference](https://threepipe.org/docs/classes/Object3DGeneratorPlugin.html) | |||
| Object3DGeneratorPlugin adds support for creating different types of lights and camera objects in the viewer. | |||
| Call the `generate` method with any type to generate a type of object(like lights, cameras, mesh etc). | |||
| Call the `generate` method with any type to generate a type of object(like lights, cameras, mesh etc.). | |||
| Support for the following types of generators is included in the plugin: | |||
| * camera-perspective - Creates instance of `PerspectiveCamera2` | |||
| @@ -29,7 +29,7 @@ Support for the following types of generators is included in the plugin: | |||
| * light-hemisphere - Creates instance of `HemisphereLight2` | |||
| * light-rect-area - Creates instance of `RectAreaLight2` | |||
| Additional types of generators can be added dynamically or by other plugins by adding a custom generator function to the `Object3DGeneratorPlugin.generators` object. This is done by [GeometryGeneratorPlugin](#threepipeplugin-geometry-generator) to add various type of primitive objects like plane, sphere, etc | |||
| Additional types of generators can be added dynamically or by other plugins by adding a custom generator function to the `Object3DGeneratorPlugin.generators` object. This is done by [GeometryGeneratorPlugin](../package/plugin-geometry-generator) to add various type of primitive objects like plane, sphere, etc. | |||
| A custom generator can take in any kind object as parameters and should return an `IObject3D`. | |||
| Sample Usage | |||
| @@ -17,7 +17,7 @@ next: | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/material/ParallaxMappingPlugin.ts) — | |||
| [API Reference](https://threepipe.org/docs/classes/ParallaxMappingPlugin.html) | |||
| `ParallaxMappingPlugin` adds a material extension to PhysicalMaterial to add support for [parallax relief mapping](https://en.wikipedia.org/wiki/Relief_mapping_(computer_graphics)). The idea is to walk along a ray that has entered the bumpmap's volume, finding the intersection point of the ray with the bumpmap. [Steep parallax mapping](https://en.wikipedia.org/wiki/Parallax_mapping) and [parallax occlusion mapping](https://en.wikipedia.org/wiki/Parallax_occlusion_mapping) are other common names for these techniques. | |||
| `ParallaxMappingPlugin` adds a material extension to PhysicalMaterial to add support for [parallax relief mapping](https://en.wikipedia.org/wiki/Relief_mapping_(computer_graphics)). The idea is to walk along a ray that has entered the `bumpMap`'s volume, finding the intersection point of the ray with the `bumpMap`. [Steep parallax mapping](https://en.wikipedia.org/wiki/Parallax_mapping) and [parallax occlusion mapping](https://en.wikipedia.org/wiki/Parallax_occlusion_mapping) are other common names for these techniques. | |||
| To use the plugin, add the plugin to the viewer and use the `bumpMap` in `PhysicalMaterial` normally. The max height is determined by the `bumpScale` in the material. This is assumed to be in world scale. | |||
| @@ -40,6 +40,6 @@ object.material.setDirty() | |||
| ## References and related links: | |||
| - WebGL implementation by Rabbid76 - [github.com/Rabbid76/graphics-snippets](https://github.com/Rabbid76/graphics-snippets/blob/master/html/technique/parallax_005_parallax_relief_mapping_derivative_tbn.html) | |||
| - WebGL implementation by `Rabbid76` - [github.com/Rabbid76/graphics-snippets](https://github.com/Rabbid76/graphics-snippets/blob/master/html/technique/parallax_005_parallax_relief_mapping_derivative_tbn.html) | |||
| - Lesson on Parallax Occlusion Mapping in GLSL - [http://sunandblackcat.com/tipFullView.php?topicid=28](https://web.archive.org/web/20190128023901/http://sunandblackcat.com/tipFullView.php?topicid=28) | |||
| - Learn OpenGL - https://learnopengl.com/Advanced-Lighting/Parallax-Mapping | |||
| @@ -17,7 +17,7 @@ next: | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/interaction/PointerLockControlsPlugin.ts) — | |||
| [API Reference](https://threepipe.org/docs/classes/PointerLockControlsPlugin.html) | |||
| PointerLockControlsPlugin adds support for using PointerLockControls from three.js. It works similar to controls in first person shooter, captures the mouse pointer and uses it to look around with the camera. | |||
| PointerLockControlsPlugin adds support for using PointerLockControls from three.js. It works similar to controls in first-person shooter, captures the mouse pointer and uses it to look around with the camera. | |||
| After the plugin is added, it adds support for setting `pointerLock` as the key in `scene.mainCamera.controlMode`. | |||
| @@ -18,4 +18,4 @@ next: | |||
| Progressive Plugin adds a post-render pass to blend the last frame with the current frame. | |||
| This is used as a dependency in other plugins for progressive rendering effect which is useful for progressive shadows, gi, denoising, baking, anti-aliasing, and many other effects. The helper function `convergedPromise` returns a new promise that can be used to wait for the progressive rendering to converge. | |||
| This is used as a dependency in other plugins for progressive rendering effect which is useful for progressive shadows, gi, denoising, baking, antialiasing, and many other effects. The helper function `convergedPromise` returns a new promise that can be used to wait for the progressive rendering to converge. | |||
| @@ -19,9 +19,9 @@ next: | |||
| SSAA Plugin adds support for [Super Sampling Anti-Aliasing](https://en.wikipedia.org/wiki/Supersampling) to the viewer. Simply add the plugin to the viewer to use it. | |||
| It jitters the camera view offset over multiple frames, which are then blended by the [ProgressivePlugin](#progressiveplugin) to create a higher quality image. This is useful for reducing aliasing artifacts in the scene. | |||
| It jitters the camera view offset over multiple frames, which are then blended by the [ProgressivePlugin](./progressiveplugin) to create a higher quality image. This is useful for reducing aliasing artifacts in the scene. | |||
| By default, the pipeline only renders once per request animation frame. So we don't get any anti-aliasing while moving. For that, either use the TAA(Temporal Anti-aliasing) plugin or for the case of simple scenes - render multiple times per frame which can be done by setting `plugin.rendersPerFrame` or `viewer.rendersPerFrame`. Check out the [example](https://threepipe.org/examples/#ssaa-plugin/) to see the effect on frame rate. | |||
| By default, the pipeline only renders once per request animation frame. So we don't get any antialiasing while moving. For that, either use the TAA(Temporal Anti-aliasing) plugin or for the case of simple scenes - render multiple times per frame which can be done by setting `plugin.rendersPerFrame` or `viewer.rendersPerFrame`. Check out the [example](https://threepipe.org/examples/#ssaa-plugin/) to see the effect on frame rate. | |||
| ```typescript | |||
| @@ -19,11 +19,11 @@ next: | |||
| SSAO Plugin adds support for [Screen Space Ambient Occlusion](https://en.wikipedia.org/wiki/Screen_space_ambient_occlusion) to the viewer. Simply add the plugin to the viewer to use it. | |||
| This is done by adding a pre-render pass to the render manager which renders SSAO to a custom render target. SSAOPlugin depends on [GBufferPlugin](#gbufferplugin), and is automatically added if not already. | |||
| This is done by adding a pre-render pass to the render manager which renders SSAO to a custom render target. SSAOPlugin depends on [GBufferPlugin](./GBufferPlugin), and is automatically added if not already. | |||
| This render target is then used by all PhysicalMaterial(s) in the scene during the main RenderPass to get the AO data. SSAO can also be disabled from the UI of the material. | |||
| Note: Use with [ProgressivePlugin](#progressiveplugin) and `TemporalAAPlugin` for best results. | |||
| Note: Use with [ProgressivePlugin](./ProgressivePlugin) and `TemporalAAPlugin` for best results. | |||
| ```typescript | |||
| import {ThreeViewer, SSAOPlugin} from 'threepipe' | |||
| @@ -17,7 +17,7 @@ next: | |||
| [Source Code](https://github.com/repalash/threepipe/blob/master/src/plugins/interaction/ThreeFirstPersonControlsPlugin.ts) — | |||
| [API Reference](https://threepipe.org/docs/classes/ThreeFirstPersonControlsPlugin.html) | |||
| ThreeFirstPersonControlsPlugin adds support for using FirstPersonControls from three.js. It works similar to idle look around in first person games, it does not captures the mouse pointer. | |||
| ThreeFirstPersonControlsPlugin adds support for using FirstPersonControls from three.js. It works similar to idle look around in first person games, it does not capture the mouse pointer. | |||
| After the plugin is added, it adds support for setting `threeFirstPerson` as the key in `scene.mainCamera.controlMode`. | |||
| @@ -21,7 +21,7 @@ Transform Controls Plugin adds support for moving, rotating and scaling objects | |||
| Under the hood, TransformControlsPlugin uses [TransformControls2](https://threepipe.org/docs/classes/TransformControls2) to provide the interactive controls, it is a extended version of three.js [TransformControls](https://threejs.org/docs/#examples/en/controls/TransformControls). | |||
| When the plugin is added to the viewer, it interfaces with the [PickingPlugin](#pickingplugin) and shows the control gizmos when an object is selected and hides them when the object is unselected. | |||
| When the plugin is added to the viewer, it interfaces with the [PickingPlugin](./PickingPlugin) and shows the control gizmos when an object is selected and hides them when the object is unselected. | |||
| If the `PickingPlugin` is not added to the viewer before the `TransformControlsPlugin`, it is added automatically with the plugin. | |||
| @@ -1,25 +0,0 @@ | |||
| // nodejs script to parse ./readme.md and create a file for each section | |||
| import fs from 'node:fs'; | |||
| const contents = fs.readFileSync('./_plugins.md', 'utf8'); | |||
| const sections = contents.split('\n## '); | |||
| const fm = (p, n)=>`--- | |||
| prev: ${p ? ` | |||
| text: '${p}' | |||
| link: './${p}' | |||
| ` : 'false'} | |||
| next: ${n ? ` | |||
| text: '${n}' | |||
| link: './${n}' | |||
| ` : 'false'} | |||
| ---\n\n` | |||
| for (let i = 0; i < sections.length; i++) { | |||
| const section = sections[i]; | |||
| const title = section.split('\n')[0].trim(); | |||
| const content = section.replace('\n#', '\n'); | |||
| if(!title && !content) continue | |||
| const prev = sections[i - 1]?.split('\n')[0]?.trim(); | |||
| const next = sections[i + 1]?.split('\n')[0]?.trim(); | |||
| fs.writeFileSync(`./${title.replace(/\s/g, '_')}.md`, fm(prev, next) + '# ' + content); | |||
| } | |||