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 system.

viewer.export() is a high-level wrapper for exporting scene objects, materials, textures, render targets, viewer/scene configuration and plugin configurations.

AssetManager internally uses AssetExporter to export files. AssetExporter includes some basic exporters for glb, exr, textures, and materials and a system to register exporters for different file types with plugins or custom exporters.

Exporting 3D models

Export the root scene as glb

const blob = await viewer.exportScene({
  viewerConfig: true, // default = true. export all viewer and plugin configuration. if false only the model root object is exported.
})
// download the file
downloadBlob(blob, 'scene.glb')

Export a single object from the scene as glb

const object = viewer.scene.getObjectByName('objectName');
const glb: Blob = await viewer.export(object, {
  exportExt: 'glb', // default = glb for models
  embedUrlImages: true, // default = false. embed images in glb even when url is available.
})
// download the file
downloadBlob(glb, 'object.glb')

Check the example glb-export to see a demo.

Exporting Materials

Export a material

const material = viewer.assetManager.materialManager.findMaterialsByName('materialName')[0];
// or 
// const material = viewer.scene.getObjectByName('objectName').material;
const blob = await viewer.export(material)
// download the file
downloadBlob(blob, 'material.' + blob.ext)

Check the example pmat-material-export to see a demo.

Exporting Canvas Images

Canvas Screenshot/snapshot can be exported as png, jpeg or webp(if supported by the browser)

const blob = await viewer.getScreenshotBlob({mimeType: 'image/' + type, quality: 0.85})
// or to get data url:
// const dataUrl = await viewer.getScreenshotDataUrl({mimeType: 'image/' + type, quality: 0.85})
// download the file
downloadBlob(blob, 'screenshot.' + blob.ext)

Check the example image-snapshot-export to see a demo.

See also: CanvasSnapshotPlugin.

Exporting Viewer Config (vjson)

The viewer configuration can be exported to JSON using viewer.exportConfig or viewer.export(viewer). This would export a JSON object with all the viewer, scene and all plugin configuration but no 3D data.

TIP

Plugins can exclude themselves from being included in vjson by setting property serializeWithViewer to false

We use the extension .vjson to easily identify viewer configuration files and use them as presets/starter scenes.

// get a blob directly
const blob = viewer.export(viewer);

// get a json object
const json = viewer.exportConfig();

// get a json object that will later be embedded in a binary file (like glb)
const json2 = viewer.exportConfig(true);

Exporting Plugin

Any plugin that supports serialization(most of them), can be exported independently to JSON using viewer.export or viewer.exportPluginConfig.

::: note Don't use plugin.toJSON directly, use viewer.export instead as that will make sure the resources(like textures) are embedded with proper context. :::

const plugin = viewer.addPluginSync(SSAOPlugin)

const blob = viewer.export(plugin);
downloadBlob(blob, plugin.name + '.' + blob.ext); // json

The exported JSON config can then be imported by viewer.load or viewer.importPluginConfig.

Exporting Textures

Textures can be exported to JSON using viewer.export or AssetExporter

const texture = await viewer.load('https://example.com/file.jpeg')
const blob = await viewer.export(texture)
downloadBlob(blob, texture.name + '.' + blob.ext)

Render target textures can be exported with viewer.renderManager.exportRenderTarget or viewer.export, read about Exporting Render Targets below.

TODO: add examples for texture export

Textures and Uint8 Data Textures can be exported as a data url or copied to a new canvas

// get a base64 data url
const dataUrl = textureToDataUrl(texture, 4096, false, 'image/png') // texture or data texture, max-size, flipY, mimeType
// or copy to a new canvas
const canvas = textureToCanvas(texture, 4096) // texture or data texture, max-size

Data Textures of type Half float and Float can be exported with viewer.export

const dataTex = await viewer.load('https://example.com/file.hdr')
const blob = await viewer.export(dataTexture, {exportExt: 'exr'})

Check the example hdr-to-exr to see a demo of HDR to EXR conversion.

TODO: add support to export unsigned byte textures as png, jpeg, webp

Exporting Images/Textures

Exporting Textures as Images with image of types ImageBitmap, HTMLImageElement, HTMLOrSVGImageElement, CanvasImageSource, HTMLCanvasElement, OffscreenCanvas can be exported to png data urls with imageBitmapToBase64 function.

const texture = await viewer.load('https://example.com/file.jpeg')

const dataUrl = await imageBitmapToBase64(texture.image, 'image/png', 0.85);

TODO: add support for texture export as images in AssetExporter

Exporting Render Targets

Unsigned byte render targets can be exported as png, jpeg or webp(if supported by the browser)

const depthPlugin = viewer.addPluginSync(DepthBufferPlugin, UnsignedByteType)
// wait for the first render
const blob = await viewer.export(depthPlugin.target!, {exportExt: 'png'})
if (blob) downloadBlob(blob, target.texture.name + '.' + blob.ext)

Half float and float render targets can be exported as exr

const depthPlugin = viewer.addPluginSync(DepthBufferPlugin, HalfFloatType)
// wait for the first render
const blob = await viewer.export(depthPlugin.target!, {exportExt: 'exr'})
if (blob) downloadBlob(blob, target.texture.name + '.' + blob.ext)

TIP

exportExt is determined automatically if not specified.