lzy
/
threepipe
Слідкувати 1
В обрані 0
Форк 0
Код Проблеми 0 Запити на злиття 0 Релізи 0 Вікі Активність
Переглянути джерело

Add webgi example, unreal bloom pass example, change background colors on website.

master
Palash Bansal 1 рік тому
джерело
7fc4fde5c2
коміт
d15d55c445
Аккаунт користувача з таким Email не знайдено
21 змінених файлів з 840 додано та 22 видалено
Об'єднаний перегляд Показати статистику Diff
  1. 37
    0
      examples/bloom-plugin/index.html
  2. 50
    0
      examples/bloom-plugin/script.ts
  3. 37
    0
      examples/depthoffield-plugin/index.html
  4. 52
    0
      examples/depthoffield-plugin/script.ts
  5. 20
    10
      examples/index.html
  6. 38
    0
      examples/sscontactshadows-plugin/index.html
  7. 81
    0
      examples/sscontactshadows-plugin/script.ts
  8. 38
    0
      examples/ssreflection-plugin/index.html
  9. 71
    0
      examples/ssreflection-plugin/script.ts
  10. 38
    0
      examples/temporalaa-plugin/index.html
  11. 57
    0
      examples/temporalaa-plugin/script.ts
  12. 2
    1
      examples/tweakpane-editor/index.html
  13. 33
    6
      examples/tweakpane-editor/script.ts
  14. 39
    0
      examples/unreal-bloom-pass/index.html
  15. 79
    0
      examples/unreal-bloom-pass/script.ts
  16. 38
    0
      examples/velocity-buffer-plugin/index.html
  17. 79
    0
      examples/velocity-buffer-plugin/script.ts
  18. 14
    2
      package.json
  19. 1
    0
      src/plugins/ui/ViewerUiConfigPlugin.ts
  20. 33
    0
      website/.vitepress/theme/custom.css
  21. 3
    3
      website/index.md

+ 37
- 0
examples/bloom-plugin/index.html Переглянути файл

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bloom Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.0/dist/index.mjs",
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/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>

+ 50
- 0
examples/bloom-plugin/script.ts Переглянути файл

import {_testFinish, IObject3D, LoadingScreenPlugin, PhysicalMaterial, SSAAPlugin, ThreeViewer} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix
import {BloomPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins'

async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: false,
rgbm: false,
zPrepass: false,
renderScale: 1,
// rgbm: false,
maxHDRIntensity: 8,
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
plugins: [LoadingScreenPlugin, SSAAPlugin, TemporalAAPlugin],
})

const bloom = viewer.addPluginSync(BloomPlugin)
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
})
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
})
const model = result?.getObjectByName('node_damagedHelmet_-6514')
const materials = (model?.materials || []) as PhysicalMaterial[]

ui.setupPluginUi(bloom)

for (const material of materials) {
ui.appendChild(material.uiConfig)
}

bloom.pass!.intensity = 3
bloom.pass!.threshold = 1

// viewer.scene.background = null
// bloom.pass!.bloomDebug = true

}

init().then(_testFinish)

+ 37
- 0
examples/depthoffield-plugin/index.html Переглянути файл

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DepthOfField Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.0/dist/index.mjs",
"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/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>

+ 52
- 0
examples/depthoffield-plugin/script.ts Переглянути файл

import {
_testFinish,
IObject3D,
LoadingScreenPlugin,
PhysicalMaterial,
PickingPlugin,
SSAAPlugin,
ThreeViewer,
Vector3,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix
import {BloomPlugin, DepthOfFieldPlugin} from '@threepipe/webgi-plugins'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
// rgbm: false,
plugins: [LoadingScreenPlugin, SSAAPlugin, BloomPlugin, PickingPlugin],
})

const dofPlugin = viewer.addPluginSync(DepthOfFieldPlugin)
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
})
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/kira.glb', {
autoCenter: true,
autoScale: true,
autoScaleRadius: 15,
})
const model = result?.getObjectByName('node_damagedHelmet_-6514')
const materials = (model?.materials || []) as PhysicalMaterial[]

ui.setupPluginUi(dofPlugin)

for (const material of materials) {
ui.appendChild(material.uiConfig)
}

const target = new Vector3(3.8885332252383376, -1.7116614197503317, 5.3296364320040475)
dofPlugin.setFocalPoint(target, false, true)
dofPlugin.enableEdit = true
viewer.scene.mainCamera.target.copy(target)
viewer.scene.mainCamera.position.set(0, 0, -5)
viewer.scene.mainCamera.setDirty()
}

init().then(_testFinish)

+ 20
- 10
examples/index.html Переглянути файл

--text-color-hover: #2b313a; --text-color-hover: #2b313a;
} }


@media (prefers-color-scheme: light) {
@media (prefers-color-scheme: dark) {
:root { :root {
--primary-color: #b6bfcb; --primary-color: #b6bfcb;
--secondary-color: #ec630a; --secondary-color: #ec630a;
<li><a class="selected" href="./tweakpane-editor/">Tweakpane Editor </a></li> <li><a class="selected" href="./tweakpane-editor/">Tweakpane Editor </a></li>
<li><a href="./model-viewer/">Model Viewer </a></li> <li><a href="./model-viewer/">Model Viewer </a></li>
</ul> </ul>
<h2 class="category">Post-Processing</h2>
<ul>
<li><a href="./tonemap-plugin/">Tonemap Plugin </a></li>
<li><a href="./vignette-plugin/">Vignette Plugin </a></li>
<li><a href="./chromatic-aberration-plugin/">Chromatic Aberration Plugin </a></li>
<li><a href="./filmic-grain-plugin/">Filmic Grain Plugin </a></li>
<li><a href="./frame-fade-plugin/">Frame Fade Plugin </a></li>
</ul>
<h2 class="category">Rendering</h2> <h2 class="category">Rendering</h2>
<ul> <ul>
<li><a href="./progressive-plugin/">Progressive Plugin </a></li> <li><a href="./progressive-plugin/">Progressive Plugin </a></li>
<li><a href="./basic-svg-renderer-plugin/">Basic SVG Renderer Plugin </a></li> <li><a href="./basic-svg-renderer-plugin/">Basic SVG Renderer Plugin </a></li>
<li><a href="./three-svg-renderer-plugin/">Three SVG Renderer Plugin </a></li> <li><a href="./three-svg-renderer-plugin/">Three SVG Renderer Plugin </a></li>
</ul> </ul>
<h2 class="category">Realistic Rendering (webgi)</h2>
<ul>
<li><a href="./bloom-plugin/">HDR Bloom Plugin </a></li>
<li><a href="./depthoffield-plugin/">DepthOfField Plugin </a></li>
<li><a href="./ssreflection-plugin/">Screen Space Reflection(SSR) Plugin </a></li>
<li><a href="./temporalaa-plugin/">Temporal Anti-aliasing Plugin </a></li>
<li><a href="./velocity-buffer-plugin/">Velocity Buffer Plugin (TAA) </a></li>
<li><a href="./sscontactshadows-plugin/">Contact Shadows(SSCS) Plugin </a></li>
</ul>
<h2 class="category">Post-Processing</h2>
<ul>
<li><a href="./tonemap-plugin/">Tonemap Plugin </a></li>
<li><a href="./vignette-plugin/">Vignette Plugin </a></li>
<li><a href="./chromatic-aberration-plugin/">Chromatic Aberration Plugin </a></li>
<li><a href="./filmic-grain-plugin/">Filmic Grain Plugin </a></li>
<li><a href="./frame-fade-plugin/">Frame Fade Plugin </a></li>
<li><a href="./unreal-bloom-pass/">Unreal Bloom Pass </a></li>
</ul>
<h2 class="category">Interaction</h2> <h2 class="category">Interaction</h2>
<ul> <ul>
<li><a href="./picking-plugin/">Picking (Selection) Plugin </a></li> <li><a href="./picking-plugin/">Picking (Selection) Plugin </a></li>
<li><a href="./glb-draco-export/">GLB (+DRACO) Export </a></li> <li><a href="./glb-draco-export/">GLB (+DRACO) 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>
<li><a href="./transfr-share-plugin/">Transfr.one Share Plugin<br/>(Upload, share link) </a></li> <li><a href="./transfr-share-plugin/">Transfr.one Share Plugin<br/>(Upload, share link) </a></li>
<li><a href="./svg-geometry-playground/">SVG Geometry Playground </a></li>
</ul> </ul>
<h2 class="category">UI Plugins</h2> <h2 class="category">UI Plugins</h2>
<ul> <ul>
<h2 class="category">Experiments</h2> <h2 class="category">Experiments</h2>
<ul> <ul>
<li><a href="./progressive-hdr-shadows-exp/">Progressive HDR Environment Shadows</a></li> <li><a href="./progressive-hdr-shadows-exp/">Progressive HDR Environment Shadows</a></li>
<li><a href="./svg-geometry-playground/">SVG Geometry Playground </a></li>
</ul> </ul>
<h2 class="category">UI Config</h2> <h2 class="category">UI Config</h2>
<ul> <ul>

+ 38
- 0
examples/sscontactshadows-plugin/index.html Переглянути файл

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSReflection Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.0/dist/index.mjs",

"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/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>

+ 81
- 0
examples/sscontactshadows-plugin/script.ts Переглянути файл

import {
_testFinish,
BaseGroundPlugin,
DirectionalLight2,
GBufferPlugin,
IObject3D, LoadingScreenPlugin,
PCFSoftShadowMap,
PickingPlugin,
RenderTargetPreviewPlugin,
SSAAPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix
import {SSContactShadowsPlugin} from '@threepipe/webgi-plugins'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
rgbm: false,
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
plugins: [LoadingScreenPlugin, GBufferPlugin, BaseGroundPlugin, SSAAPlugin],
// rgbm: false,
})
viewer.renderManager.stableNoise = true

const sscs = viewer.addPluginSync(SSContactShadowsPlugin)
viewer.addPluginSync(PickingPlugin)
console.log(sscs)
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

// await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
// setBackground: true,
// })
await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
})
// const model = result?.getObjectByName('node_damagedHelmet_-6514')
// const materials = (model?.materials || []) as PhysicalMaterial[]

ui.setupPluginUi(sscs)
ui.setupPluginUi(BaseGroundPlugin)
ui.setupPluginUi(PickingPlugin)


const light = viewer.scene.addObject(new DirectionalLight2(0xffffff, 4))
light.position.set(2, 2, 2)
light.lookAt(0, 0, 0)
light.castShadow = true
light.shadow.mapSize.setScalar(1024)
light.shadow.camera.near = 0.1
light.shadow.camera.far = 10
light.shadow.camera.top = 2
light.shadow.camera.bottom = -2
light.shadow.camera.left = -2
light.shadow.camera.right = 2

viewer.renderManager.renderer.shadowMap.type = PCFSoftShadowMap

const rt = viewer.addPluginSync(RenderTargetPreviewPlugin)
rt.addTarget(()=>light.shadow.map || undefined, 'shadow', true, true, true)

// const gb = viewer.getPlugin(GBufferPlugin)
// rt.addTarget(()=>({texture: gb!.normalDepthTexture}), 'shadow2')

ui.appendChild(light.uiConfig, {expanded: true})

// for (const material of materials) {
// ui.appendChild(material.uiConfig)
// }

}

init().then(_testFinish)

+ 38
- 0
examples/ssreflection-plugin/index.html Переглянути файл

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSReflection Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.0/dist/index.mjs",

"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/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>

+ 71
- 0
examples/ssreflection-plugin/script.ts Переглянути файл

import {
_testFinish,
BaseGroundPlugin,
GBufferPlugin,
IObject3D, LoadingScreenPlugin,
PickingPlugin,
RenderTargetPreviewPlugin, SSAAPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix
import {BloomPlugin, SSReflectionPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
plugins: [LoadingScreenPlugin, GBufferPlugin, BloomPlugin, SSAAPlugin, TemporalAAPlugin],
// rgbm: false,
})
viewer.renderManager.stableNoise = true

const inline = true
const ssrefl = viewer.addPluginSync(new SSReflectionPlugin(inline))
const ground = viewer.addPluginSync(BaseGroundPlugin)
viewer.addPluginSync(PickingPlugin)
console.log(ssrefl)
const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
})
await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
})
// const model = result?.getObjectByName('node_damagedHelmet_-6514')
// const materials = (model?.materials || []) as PhysicalMaterial[]

ui.setupPluginUi(ssrefl)
ui.setupPluginUi(BaseGroundPlugin)
ui.setupPluginUi(PickingPlugin)
ui.setupPluginUi(BloomPlugin)

// for (const material of materials) {
// ui.appendChild(material.uiConfig)
// }

// bloom.pass!.intensity = 3
// bloom.pass!.threshold = 1

// viewer.scene.background = null
// bloom.pass!.bloomDebug = true

ground.material!.roughness = 0.2
const targetPreview = await viewer.addPlugin(RenderTargetPreviewPlugin)
if (!ssrefl.inlineShaderRayTrace) {
targetPreview.addTarget(() => ssrefl.target, 'ssrefl')
}
// const gb = viewer.getPlugin(GBufferPlugin)
// targetPreview.addTarget(() => gb?.target, 'depth')

}

init().then(_testFinish)

+ 38
- 0
examples/temporalaa-plugin/index.html Переглянути файл

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TemporalAA Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.0/dist/index.mjs",

"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/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>

+ 57
- 0
examples/temporalaa-plugin/script.ts Переглянути файл

import {
_testFinish,
BaseGroundPlugin,
GBufferPlugin,
IObject3D,
LoadingScreenPlugin,
PickingPlugin,
SSAAPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix
import {BloomPlugin, SSReflectionPlugin, TemporalAAPlugin} from '@threepipe/webgi-plugins'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: false,
renderScale: 1,
rgbm: true,
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
plugins: [LoadingScreenPlugin, GBufferPlugin, BloomPlugin, SSAAPlugin, SSReflectionPlugin],
})

const ground = viewer.addPluginSync(BaseGroundPlugin)
const taa = viewer.addPluginSync(new TemporalAAPlugin())
taa.stableNoise = true
console.log(taa)

const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
})
await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
})
// const model = result?.getObjectByName('node_damagedHelmet_-6514')
// const materials = (model?.materials || []) as PhysicalMaterial[]

ui.setupPluginUi(taa)
ui.setupPluginUi(BaseGroundPlugin)
ui.setupPluginUi(PickingPlugin)
ui.setupPluginUi(BloomPlugin)
ui.setupPluginUi(SSReflectionPlugin)

ground.material!.roughness = 0.2

}

init().then(_testFinish)

+ 2
- 1
examples/tweakpane-editor/index.html Переглянути файл

"@threepipe/plugin-configurator": "./../../plugins/configurator/dist/index.mjs", "@threepipe/plugin-configurator": "./../../plugins/configurator/dist/index.mjs",
"@threepipe/plugin-network": "./../../plugins/network/dist/index.mjs", "@threepipe/plugin-network": "./../../plugins/network/dist/index.mjs",
"@threepipe/plugin-gltf-transform": "./../../plugins/gltf-transform/dist/index.mjs", "@threepipe/plugin-gltf-transform": "./../../plugins/gltf-transform/dist/index.mjs",
"@threepipe/plugin-gaussian-splatting": "./../../plugins/gaussian-splatting/dist/index.mjs"
"@threepipe/plugin-gaussian-splatting": "./../../plugins/gaussian-splatting/dist/index.mjs",
"@threepipe/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.1/dist/index.mjs"
} }
} }



+ 33
- 6
examples/tweakpane-editor/script.ts Переглянути файл

import {MaterialConfiguratorPlugin, SwitchNodePlugin} from '@threepipe/plugin-configurator' import {MaterialConfiguratorPlugin, SwitchNodePlugin} from '@threepipe/plugin-configurator'
import {AWSClientPlugin, TransfrSharePlugin} from '@threepipe/plugin-network' import {AWSClientPlugin, TransfrSharePlugin} from '@threepipe/plugin-network'
import {GLTFDracoExportPlugin} from '@threepipe/plugin-gltf-transform' import {GLTFDracoExportPlugin} from '@threepipe/plugin-gltf-transform'
// @ts-expect-error todo fix
import {BloomPlugin, TemporalAAPlugin, VelocityBufferPlugin, DepthOfFieldPlugin, SSContactShadowsPlugin, SSReflectionPlugin} from '@threepipe/webgi-plugins'

function checkQuery(key: string, def = true) {
return !['false', 'no', 'f'].includes(getUrlQueryParam(key, def ? 'yes' : 'no').toLowerCase())
}

// const rgbm = !['false', 'no', 'f'].includes(getUrlQueryParam('rgbm', 'yes').toLowerCase())
// const msaa = !['false', 'no', 'f'].includes(getUrlQueryParam('msaa', 'no').toLowerCase())
// const debug = !['false', 'no', 'f'].includes(getUrlQueryParam('debug', 'no').toLowerCase())
// const caching = !['false', 'no', 'f'].includes(getUrlQueryParam('cache', 'yes').toLowerCase())
// const depthTonemap = !['no', 'false', 'f'].includes(getUrlQueryParam('depthTonemap', 'yes').toLowerCase() as any) // default is true
// const depthPrepass = !['no', 'false', 'f'].includes(getUrlQueryParam('depthPrepass', 'yes').toLowerCase() as any) // default is true


async function init() { async function init() {


const viewer = new ThreeViewer({ const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement, canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
renderScale: 'auto', renderScale: 'auto',
msaa: true,
rgbm: true,
zPrepass: false, // set it to true if you only have opaque objects in the scene to get better performance.
msaa: checkQuery('msaa', false),
rgbm: checkQuery('rgbm', true),
debug: checkQuery('debug', false),
assetManager: {
storage: checkQuery('cache', true),
},
// set it to true if you only have opaque objects in the scene to get better performance.
zPrepass: checkQuery('depthPrepass', checkQuery('zPrepass', false)),
dropzone: { dropzone: {
addOptions: { addOptions: {
clearSceneObjects: false, // clear the scene before adding new objects on drop. clearSceneObjects: false, // clear the scene before adding new objects on drop.
new ChromaticAberrationPlugin(false), new ChromaticAberrationPlugin(false),
new FilmicGrainPlugin(false), new FilmicGrainPlugin(false),
new SSAOPlugin(UnsignedByteType, 1), new SSAOPlugin(UnsignedByteType, 1),
SSReflectionPlugin,
new SSContactShadowsPlugin(false),
new DepthOfFieldPlugin(false),
BloomPlugin,
TemporalAAPlugin,
new VelocityBufferPlugin(UnsignedByteType, false),
KTX2LoadPlugin, KTX2LoadPlugin,
KTXLoadPlugin, KTXLoadPlugin,
PLYLoadPlugin, PLYLoadPlugin,
// disable fading on update // disable fading on update
viewer.getPlugin(FrameFadePlugin)!.isEditor = true viewer.getPlugin(FrameFadePlugin)!.isEditor = true



viewer.getPlugin(TemporalAAPlugin)!.stableNoise = true

const rt = viewer.getOrAddPluginSync(RenderTargetPreviewPlugin) const rt = viewer.getOrAddPluginSync(RenderTargetPreviewPlugin)
rt.addTarget({texture: viewer.getPlugin(GBufferPlugin)?.normalDepthTexture}, 'normalDepth') rt.addTarget({texture: viewer.getPlugin(GBufferPlugin)?.normalDepthTexture}, 'normalDepth')
rt.addTarget({texture: viewer.getPlugin(GBufferPlugin)?.flagsTexture}, 'gBufferFlags') rt.addTarget({texture: viewer.getPlugin(GBufferPlugin)?.flagsTexture}, 'gBufferFlags')
rt.addTarget(viewer.getPlugin(NormalBufferPlugin)?.target, 'normal', false, true, false) rt.addTarget(viewer.getPlugin(NormalBufferPlugin)?.target, 'normal', false, true, false)


editor.loadPlugins({ editor.loadPlugins({
['Viewer']: [ViewerUiConfigPlugin, SceneUiConfigPlugin, DropzonePlugin, FullScreenPlugin, TweakpaneUiPlugin, LoadingScreenPlugin, InteractionPromptPlugin],
['Scene']: [SSAAPlugin, ContactShadowGroundPlugin],
['Viewer']: [ViewerUiConfigPlugin, DropzonePlugin, FullScreenPlugin, TweakpaneUiPlugin, LoadingScreenPlugin, InteractionPromptPlugin],
['Scene']: [SSAAPlugin, SceneUiConfigPlugin, ContactShadowGroundPlugin],
['Interaction']: [HierarchyUiPlugin, TransformControlsPlugin, PickingPlugin, Object3DGeneratorPlugin, GeometryGeneratorPlugin, EditorViewWidgetPlugin, Object3DWidgetsPlugin, MeshOptSimplifyModifierPlugin], ['Interaction']: [HierarchyUiPlugin, TransformControlsPlugin, PickingPlugin, Object3DGeneratorPlugin, GeometryGeneratorPlugin, EditorViewWidgetPlugin, Object3DWidgetsPlugin, MeshOptSimplifyModifierPlugin],
['GBuffer']: [GBufferPlugin, DepthBufferPlugin, NormalBufferPlugin], ['GBuffer']: [GBufferPlugin, DepthBufferPlugin, NormalBufferPlugin],
['Post-processing']: [TonemapPlugin, ProgressivePlugin, SSAOPlugin, FrameFadePlugin, VignettePlugin, ChromaticAberrationPlugin, FilmicGrainPlugin],
['Post-processing']: [TonemapPlugin, ProgressivePlugin, SSAOPlugin, SSReflectionPlugin, BloomPlugin, DepthOfFieldPlugin, FrameFadePlugin, VignettePlugin, ChromaticAberrationPlugin, FilmicGrainPlugin, TemporalAAPlugin, VelocityBufferPlugin, SSContactShadowsPlugin],
['Export']: [AssetExporterPlugin, CanvasSnapshotPlugin, AWSClientPlugin, TransfrSharePlugin], ['Export']: [AssetExporterPlugin, CanvasSnapshotPlugin, AWSClientPlugin, TransfrSharePlugin],
['Configurator']: [MaterialConfiguratorPlugin, SwitchNodePlugin, GLTFKHRMaterialVariantsPlugin], ['Configurator']: [MaterialConfiguratorPlugin, SwitchNodePlugin, GLTFKHRMaterialVariantsPlugin],
['Animation']: [GLTFAnimationPlugin, CameraViewPlugin], ['Animation']: [GLTFAnimationPlugin, CameraViewPlugin],

+ 39
- 0
examples/unreal-bloom-pass/index.html Переглянути файл

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Unreal Bloom Pass</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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": {
"three": "./../../dist/index.mjs",
"three/examples/jsm/postprocessing/UnrealBloomPass.js": "https://cdn.jsdelivr.net/gh/repalash/three.js-modded/examples/jsm/postprocessing/UnrealBloomPass.js",
"threepipe": "./../../dist/index.mjs",
"@threepipe/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.0/dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/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>

+ 79
- 0
examples/unreal-bloom-pass/script.ts Переглянути файл

import {
_testFinish,
IObject3D,
IPipelinePass,
LoadingScreenPlugin, onChange,
PhysicalMaterial,
SSAAPlugin,
ThreeViewer, uiFolderContainer, uiSlider,
Vector2, UiObjectConfig,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
import {UnrealBloomPass} from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'
// @ts-expect-error todo fix ts import
import {TemporalAAPlugin} from '@threepipe/webgi-plugins'

async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
rgbm: false, // The pass from three.js doesn't support RGBM encoded render targets
zPrepass: false,
renderScale: 1,
maxHDRIntensity: 8,
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
plugins: [LoadingScreenPlugin, SSAAPlugin, TemporalAAPlugin],
})

// Extend the pass to add UI and pipeline pass options
@uiFolderContainer('Unreal Bloom')
class UnrealBloomPass2 extends UnrealBloomPass implements IPipelinePass {
declare uiConfig: UiObjectConfig
passId = 'unrealBloom'
after = ['render', 'progressive']
before = ['screen']
required = ['render']

@uiSlider('Strength', [0, 5], 0.01)
@onChange(UnrealBloomPass2.prototype.setDirty)
declare strength
@uiSlider('Radius', [0, 1], 0.01)
@onChange(UnrealBloomPass2.prototype.setDirty)
declare radius
@uiSlider('Threshold', [0, 8], 0.01)
@onChange(UnrealBloomPass2.prototype.setDirty)
declare threshold

setDirty() {
viewer.setDirty()
}
}

const bloomPass = new UnrealBloomPass2(new Vector2(window.innerWidth, window.innerHeight), 1., 0.5, 1.5)

viewer.renderManager.registerPass(bloomPass)

const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: true,
})
const result = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
})
const model = result?.getObjectByName('node_damagedHelmet_-6514')
const materials = (model?.materials || []) as PhysicalMaterial[]

ui.appendChild(bloomPass.uiConfig)
for (const material of materials) {
ui.appendChild(material.uiConfig)
}

}

init().then(_testFinish)

+ 38
- 0
examples/velocity-buffer-plugin/index.html Переглянути файл

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Velocity Buffer Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.0/dist/index.mjs",

"threepipe": "./../../dist/index.mjs",
"@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/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>

+ 79
- 0
examples/velocity-buffer-plugin/script.ts Переглянути файл

import {
_testFinish,
EasingFunctions,
GBufferPlugin,
IObject3D,
LoadingScreenPlugin,
PickingPlugin,
PopmotionPlugin,
RenderTargetPreviewPlugin,
SSAAPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'
// @ts-expect-error todo fix
import {BloomPlugin, SSReflectionPlugin, TemporalAAPlugin, VelocityBufferPlugin} from '@threepipe/webgi-plugins'

async function init() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: false,
renderScale: 1,
dropzone: {
addOptions: {
disposeSceneObjects: true,
},
},
plugins: [LoadingScreenPlugin, GBufferPlugin, BloomPlugin, SSAAPlugin, SSReflectionPlugin],
// rgbm: false,
})

const taa = viewer.addPluginSync(new TemporalAAPlugin())
const velocityBuffer = viewer.addPluginSync(new VelocityBufferPlugin())
console.log(taa)
console.log(velocityBuffer)

const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
setBackground: false,
})
const model = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', {
autoCenter: true,
autoScale: true,
})

if (model) {
const popmotion = viewer.getOrAddPluginSync(PopmotionPlugin)
popmotion.animate({
from: 0,
to: 1,
repeat: Infinity,
duration: 10000,
ease: EasingFunctions.linear,
onUpdate: (v) => {
// Set camera position xz in a circle around the target
const angle = v * Math.PI * 2 + Math.PI / 2
const radius = 1.5
model.position.set(Math.cos(angle) * radius, Math.sin(v * Math.PI * 4), Math.sin(angle) * radius)
model.setDirty()
viewer.setDirty() // since camera is not in the scene
},
})
} else {
alert('Unable to load 3d Model')
}

ui.setupPluginUi(taa)
ui.setupPluginUi(velocityBuffer)
ui.setupPluginUi(PickingPlugin)
ui.setupPluginUi(BloomPlugin)
ui.setupPluginUi(SSReflectionPlugin)

const rt = viewer.addPluginSync(RenderTargetPreviewPlugin)
rt.addTarget(()=>velocityBuffer.target, 'velocityBuffer', true, true, true)

}

init().then(_testFinish)

+ 14
- 2
package.json Переглянути файл

{ {
"name": "threepipe", "name": "threepipe",
"version": "0.0.34",
"version": "0.0.35-dev",
"description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.", "description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/index.mjs", "module": "dist/index.mjs",
"remove": [ "remove": [
"clean-package", "clean-package",
"scripts", "scripts",
"devDependencies",
"optionalDependencies", "optionalDependencies",
"//" "//"
] ]
"uiconfig.js": "^0.1.2", "uiconfig.js": "^0.1.2",
"popmotion": "^11.0.5" "popmotion": "^11.0.5"
}, },
"peerDependencies": {
"three": "https://github.com/repalash/three.js-modded/releases/download/v0.153.1006/package.tgz"
},
"peerDependenciesMeta": {
"three": {
"optional": true
}
},
"//": { "//": {
"dependencies": { "dependencies": {
"uiconfig.js": "^0.1.2", "uiconfig.js": "^0.1.2",
"@types/three": "file:./../three-ts-types/types/three" "@types/three": "file:./../three-ts-types/types/three"
} }
}, },
"overrides": {
"ts-browser-helpers": "$ts-browser-helpers",
"three": "$three",
"@types/three": "$@types/three"
},
"optionalDependencies": { "optionalDependencies": {
"win-node-env": "^0.6.1" "win-node-env": "^0.6.1"
}, },

+ 1
- 0
src/plugins/ui/ViewerUiConfigPlugin.ts Переглянути файл

onAdded(viewer: ThreeViewer) { onAdded(viewer: ThreeViewer) {
super.onAdded(viewer) super.onAdded(viewer)
this.uiConfig = viewer.uiConfig this.uiConfig = viewer.uiConfig
this.uiConfig.expanded = true
} }


@serialize('viewer') @serialize('viewer')

+ 33
- 0
website/.vitepress/theme/custom.css Переглянути файл



--vp-home-hero-name-color: transparent; --vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-orange-1), var(--vp-c-orange-0)); --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-orange-1), var(--vp-c-orange-0));

} }

/*https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css*/

/**
* Colors: Background
*
* - `bg`: The bg color used for main screen.
*
* - `bg-alt`: The alternative bg color used in places such as "sidebar",
* or "code block".
*
* - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
* such as "dialog".
*
* - `bg-soft`: The bg color to slightly distinguish some components from
* the page. Used for things like "carbon ads" or "table".
* -------------------------------------------------------------------------- */

:root {
--vp-c-bg: #E7EFF8;
--vp-c-bg-alt: #dae1ea;
--vp-c-bg-elv: #E7EFF8;
--vp-c-bg-soft: #d8e3ef;
}

.dark {
--vp-c-bg: #1C2026;
--vp-c-bg-alt: #22272f;
--vp-c-bg-elv: #1C2026;
--vp-c-bg-soft: #282a2f;
}


+ 3
- 3
website/index.md Переглянути файл

alt: Threepipe alt: Threepipe
actions: actions:
- theme: brand - theme: brand
text: About Threepipe
link: ./guide/introduction
- theme: alt
text: Examples text: Examples
link: https://threepipe.org/examples link: https://threepipe.org/examples
target: _blank target: _blank
- theme: brand - theme: brand
text: 3D glTF Editor text: 3D glTF Editor
link: https://editor.threepipe.org link: https://editor.threepipe.org
- theme: alt
text: About Threepipe
link: ./guide/introduction


features: features:
- title: Start quickly - title: Start quickly

Писати Попередній перегляд
Завантаження…
Відмінити
Зберегти