Procházet zdrojové kódy
Add Examples for Canvas image snapshot export and render target image export.
master
Palash Bansal
před 2 roky
5 změnil soubory, kde provedl 191 přidání a 1 odebrání
+ 34
- 0
examples/image-snapshot-export/index.html
Zobrazit soubor
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="UTF-8"> | |||||
| <title>Image Snapshot Export</title> | |||||
| <!-- Import maps polyfill --> | |||||
| <!-- Remove this when import maps will be widely supported --> | |||||
| <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script> | |||||
| <script type="importmap"> | |||||
| { | |||||
| "imports": { | |||||
| "threepipe": "./../../dist/index.mjs" | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style id="example-style"> | |||||
| html, body, #canvas-container, #mcanvas { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| margin: 0; | |||||
| overflow: hidden; | |||||
| } | |||||
| </style> | |||||
| <script type="module" src="../examples-utils/simple-code-preview.mjs"></script> | |||||
| <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> | |||||
| </head> | |||||
| <body> | |||||
| <div id="canvas-container"> | |||||
| <canvas id="mcanvas"></canvas> | |||||
| </div> | |||||
| </body> |
+ 51
- 0
examples/image-snapshot-export/script.ts
Zobrazit soubor
| import {_testFinish, downloadBlob, isWebpExportSupported, ThreeViewer} from 'threepipe' | |||||
| import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js' | |||||
| const viewer = new ThreeViewer({ | |||||
| canvas: document.getElementById('mcanvas') as HTMLCanvasElement, | |||||
| msaa: true, | |||||
| }) | |||||
| async function init() { | |||||
| await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr') | |||||
| await viewer.load('https://threejs.org/examples/models/gltf/kira.glb', { | |||||
| autoCenter: true, | |||||
| autoScale: true, | |||||
| }) | |||||
| async function downloadSnapshot(type = 'png') { | |||||
| 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}) | |||||
| if (blob) downloadBlob(blob, 'snapshot.' + type) | |||||
| else alert('Unable to get screenshot') | |||||
| } | |||||
| createSimpleButtons({ | |||||
| ['Download snapshot (PNG)']: async(btn: HTMLButtonElement) => { | |||||
| btn.disabled = true | |||||
| await downloadSnapshot() | |||||
| btn.disabled = false | |||||
| }, | |||||
| ['Download snapshot (JPEG)']: async(btn: HTMLButtonElement) => { | |||||
| btn.disabled = true | |||||
| await downloadSnapshot('jpeg') | |||||
| btn.disabled = false | |||||
| }, | |||||
| ['Download snapshot (WEBP)']: async(btn: HTMLButtonElement) => { | |||||
| btn.disabled = true | |||||
| if (!isWebpExportSupported()) { | |||||
| alert('WebP export is not supported in this browser, try the latest version of chrome, firefox or edge.') | |||||
| btn.disabled = false | |||||
| return | |||||
| } | |||||
| await downloadSnapshot('webp') | |||||
| btn.disabled = false | |||||
| }, | |||||
| }) | |||||
| } | |||||
| init().then(_testFinish) |
+ 3
- 1
examples/index.html
Zobrazit soubor
| } | } | ||||
| .sidebar { | .sidebar { | ||||
| max-width: min(350px, 30%); | |||||
| max-width: min(320px, 30%); | |||||
| height: 100%; | height: 100%; | ||||
| background: #1a1a1c; | background: #1a1a1c; | ||||
| color: #bbb; | color: #bbb; | ||||
| <li><a href="./drc-load/">DRACO(DRC) Load </a></li> | <li><a href="./drc-load/">DRACO(DRC) Load </a></li> | ||||
| <li><a href="./hdr-load/">HDR Load </a></li> | <li><a href="./hdr-load/">HDR Load </a></li> | ||||
| <li><a href="./exr-load/">EXR Load </a></li> | <li><a href="./exr-load/">EXR Load </a></li> | ||||
| <li><a href="./image-snapshot-export/">PNG, JPEG, WEBP Export<br/>(Image Snapshot) </a></li> | |||||
| <li><a href="./render-target-export/">EXR, PNG, JPEG, WEBP Export<br/>(Render Target Export) </a></li> | |||||
| <li><a href="./glb-export/">GLB Export </a></li> | <li><a href="./glb-export/">GLB Export </a></li> | ||||
| <li><a href="./pmat-material-export/">PMAT Material export </a></li> | <li><a href="./pmat-material-export/">PMAT Material export </a></li> | ||||
| </ul> | </ul> |
+ 34
- 0
examples/render-target-export/index.html
Zobrazit soubor
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="UTF-8"> | |||||
| <title>Image Snapshot Export</title> | |||||
| <!-- Import maps polyfill --> | |||||
| <!-- Remove this when import maps will be widely supported --> | |||||
| <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script> | |||||
| <script type="importmap"> | |||||
| { | |||||
| "imports": { | |||||
| "threepipe": "./../../dist/index.mjs" | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style id="example-style"> | |||||
| html, body, #canvas-container, #mcanvas { | |||||
| width: 100%; | |||||
| height: 100%; | |||||
| margin: 0; | |||||
| overflow: hidden; | |||||
| } | |||||
| </style> | |||||
| <script type="module" src="../examples-utils/simple-code-preview.mjs"></script> | |||||
| <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> | |||||
| </head> | |||||
| <body> | |||||
| <div id="canvas-container"> | |||||
| <canvas id="mcanvas"></canvas> | |||||
| </div> | |||||
| </body> |
+ 69
- 0
examples/render-target-export/script.ts
Zobrazit soubor
| import { | |||||
| _testFinish, | |||||
| DepthBufferPlugin, | |||||
| downloadBlob, | |||||
| isWebpExportSupported, | |||||
| ThreeViewer, | |||||
| UnsignedByteType, | |||||
| WebGLRenderTarget, | |||||
| } from 'threepipe' | |||||
| import {createSimpleButtons} from '../examples-utils/simple-bottom-buttons.js' | |||||
| const viewer = new ThreeViewer({ | |||||
| canvas: document.getElementById('mcanvas') as HTMLCanvasElement, | |||||
| rgbm: false, // this will make the composer target not use RGBM encoding, and use HalfFloat. Otherwise, its UnsignedByteType | |||||
| }) | |||||
| async function init() { | |||||
| const depthPlugin = viewer.addPluginSync(DepthBufferPlugin, UnsignedByteType) | |||||
| await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr') | |||||
| await viewer.load('https://threejs.org/examples/models/gltf/kira.glb', { | |||||
| autoCenter: true, | |||||
| autoScale: true, | |||||
| }) | |||||
| const composerBuffer = viewer.renderManager.composerTarget as WebGLRenderTarget | |||||
| const depthBuffer = depthPlugin.target! | |||||
| async function downloadTarget(target: WebGLRenderTarget, type = '') { | |||||
| const blob = await viewer.export(target, {exportExt: type}) | |||||
| if (blob) downloadBlob(blob, target.texture.name + '.' + blob.ext) | |||||
| else alert('Unable to get screenshot') | |||||
| } | |||||
| createSimpleButtons({ | |||||
| ['Download composer (EXR)']: async(btn: HTMLButtonElement) => { | |||||
| btn.disabled = true | |||||
| await downloadTarget(composerBuffer) // default for Float and HalfFloat buffers is EXR. | |||||
| btn.disabled = false | |||||
| }, | |||||
| // UnsignedByte targets can only be exported in webp, png, jpeg format. | |||||
| ['Download depth (PNG)']: async(btn: HTMLButtonElement) => { | |||||
| btn.disabled = true | |||||
| await downloadTarget(depthBuffer) // default for UnsignedByte buffers is PNG. | |||||
| btn.disabled = false | |||||
| }, | |||||
| ['Download depth (JPEG)']: async(btn: HTMLButtonElement) => { | |||||
| btn.disabled = true | |||||
| await downloadTarget(depthBuffer, 'jpeg') | |||||
| btn.disabled = false | |||||
| }, | |||||
| // HalfFloat targets can also be exported in webp, png, jpeg format, but they will be clamped | |||||
| ['Download composer (WEBP)']: async(btn: HTMLButtonElement) => { | |||||
| btn.disabled = true | |||||
| if (!isWebpExportSupported()) { | |||||
| alert('WebP export is not supported in this browser, try the latest version of chrome, firefox or edge.') | |||||
| btn.disabled = false | |||||
| return | |||||
| } | |||||
| await downloadTarget(composerBuffer, 'webp') | |||||
| btn.disabled = false | |||||
| }, | |||||
| }) | |||||
| } | |||||
| init().then(_testFinish) |
Načítá se…