瀏覽代碼

Fix render target preview and download in tweakpane image ui.

master
Palash Bansal 2 年之前
父節點
當前提交
3cf9fdaccb
沒有連結到貢獻者的電子郵件帳戶。
共有 2 個檔案被更改,包括 12 行新增8 行删除
  1. 1
    1
      plugins/tweakpane/package.json
  2. 11
    7
      plugins/tweakpane/src/tpImageInputGenerator.ts

+ 1
- 1
plugins/tweakpane/package.json 查看文件

{ {
"name": "@threepipe/plugin-tweakpane", "name": "@threepipe/plugin-tweakpane",
"description": "Tweakpane UI Plugin for ThreePipe", "description": "Tweakpane UI Plugin for ThreePipe",
"version": "0.1.0",
"version": "0.1.1",
"devDependencies": { "devDependencies": {
"tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz", "tweakpane-image-plugin": "https://github.com/repalash/tweakpane-image-plugin/releases/download/v1.1.404/package.tgz",
"uiconfig-tweakpane": "^0.0.4" "uiconfig-tweakpane": "^0.0.4"

+ 11
- 7
plugins/tweakpane/src/tpImageInputGenerator.ts 查看文件

getOrCall, getOrCall,
HalfFloatType, HalfFloatType,
imageBitmapToBase64, imageBitmapToBase64,
IRenderTarget,
ImportResultExtras,
ITexture, ITexture,
LinearSRGBColorSpace, LinearSRGBColorSpace,
makeTextSvg, makeTextSvg,
} from 'threepipe' } from 'threepipe'
import type {UiObjectConfig} from 'uiconfig.js' import type {UiObjectConfig} from 'uiconfig.js'
import {TweakpaneUiPlugin} from './TweakpaneUiPlugin' import {TweakpaneUiPlugin} from './TweakpaneUiPlugin'
import {DataTexture} from 'three'


const staticData = { const staticData = {
placeholderVal: 'placeholder', placeholderVal: 'placeholder',
if (cc.isTexture) { if (cc.isTexture) {
// console.warn('here') // console.warn('here')
if (cc.image && !cc.image.tp_src) { if (cc.image && !cc.image.tp_src) {
if (cc.image instanceof ImageBitmap || cc.image instanceof HTMLImageElement || cc.image instanceof HTMLVideoElement) {
if (cc.image instanceof ImageBitmap || cc.image instanceof HTMLImageElement || cc.image instanceof HTMLVideoElement) { // todo: support playback in video
cc.image.tp_src = imageBitmapToBase64(cc.image, 160) cc.image.tp_src = imageBitmapToBase64(cc.image, 160)
} else if (cc.isRenderTargetTexture) { } else if (cc.isRenderTargetTexture) {
if (cc.__target) cc.image.tp_src = viewer.renderManager.renderTargetToDataUrl(cc.__target) // todo; update preview when renderTarget updates?
if (cc._target) {
cc.image.tp_src = viewer.renderManager.renderTargetToDataUrl(cc._target)
setTimeout(()=>cc.image.tp_src && delete cc.image.tp_src, 1000) // clear after 1 second so it refreshes on next render
}
} else { } else {
cc.image.tp_src = textureToDataUrl(cc, 160, false, 'image/png', 90) // this supports DataTexture also cc.image.tp_src = textureToDataUrl(cc, 160, false, 'image/png', 90) // this supports DataTexture also
} }


function downloadImage(config: UiObjectConfig, _: TweakpaneUiPlugin, viewer: ThreeViewer) { function downloadImage(config: UiObjectConfig, _: TweakpaneUiPlugin, viewer: ThreeViewer) {
CustomContextMenu.Remove() CustomContextMenu.Remove()
const tex = config.__proxy.value_
const tex: ITexture&Partial<ImportResultExtras> = config.__proxy.value_
if (!tex) return if (!tex) return
let vcv = tex.image ?? config.uiRef.controller_.valueController.value.rawValue let vcv = tex.image ?? config.uiRef.controller_.valueController.value.rawValue
if (tex.__rootBlob && !tex.__rootBlob.objectUrl) tex.__rootBlob.objectUrl = URL.createObjectURL(tex.__rootBlob) if (tex.__rootBlob && !tex.__rootBlob.objectUrl) tex.__rootBlob.objectUrl = URL.createObjectURL(tex.__rootBlob)


// Render target texture // Render target texture
if (!src && tex.isRenderTargetTexture) { if (!src && tex.isRenderTargetTexture) {
const target1 = tex.__target as IRenderTarget
if (target1.isWebGLRenderTarget) {
const target1 = tex._target
if (target1?.isWebGLRenderTarget) {
const val = viewer.renderManager.exportRenderTarget(target1 as WebGLRenderTarget) const val = viewer.renderManager.exportRenderTarget(target1 as WebGLRenderTarget)
if (!val) { if (!val) {
console.error('cannot export render target', vcv, tex, target1, config) console.error('cannot export render target', vcv, tex, target1, config)
console.error('Only Float and HalfFloat Data texture export is supported', vcv, tex, config) console.error('Only Float and HalfFloat Data texture export is supported', vcv, tex, config)
return return
} }
const buffer = new EXRExporter2().parse(undefined as any, tex)
const buffer = new EXRExporter2().parse(undefined as any, tex as DataTexture&ITexture)
const val: Blob|undefined = new Blob([buffer], {type: 'image/x-exr'}) const val: Blob|undefined = new Blob([buffer], {type: 'image/x-exr'})
if (!val) { if (!val) {
console.error('cannot export data texture', vcv, tex, config) console.error('cannot export data texture', vcv, tex, config)

Loading…
取消
儲存