lzy
/
threepipe
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Add Examples for Canvas image snapshot export and render target image export.

master
Palash Bansal 2 年前
父节点
09a80866da
当前提交
e23e0370ac
没有帐户链接到提交者的电子邮件
共有 5 个文件被更改，包括 191 次插入 和 1 次删除
分列视图 显示文件统计
  1. 34
    0
      examples/image-snapshot-export/index.html
  2. 51
    0
      examples/image-snapshot-export/script.ts
  3. 3
    1
      examples/index.html
  4. 34
    0
      examples/render-target-export/index.html
  5. 69
    0
      examples/render-target-export/script.ts

+ 34
- 0
examples/image-snapshot-export/index.html 查看文件

@@ -0,0 +1,34 @@
<!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 查看文件

@@ -0,0 +1,51 @@
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 查看文件

@@ -37,7 +37,7 @@
}

.sidebar {
max-width: min(350px, 30%);
max-width: min(320px, 30%);
height: 100%;
background: #1a1a1c;
color: #bbb;
@@ -222,6 +222,8 @@
<li><a href="./drc-load/">DRACO(DRC) Load </a></li>
<li><a href="./hdr-load/">HDR 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="./pmat-material-export/">PMAT Material export </a></li>
</ul>

+ 34
- 0
examples/render-target-export/index.html 查看文件

@@ -0,0 +1,34 @@
<!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 查看文件

@@ -0,0 +1,69 @@
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)

撰写 预览
正在加载...
取消
保存