lzy
/
threepipe
İzle 1
Yıldızla 0
Çatalla 0
Kod Sorunlar 0 Değişiklik İstekleri 0 Sürümler 0 Wiki Aktivite
Kaynağa Gözat

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

master
Palash Bansal 1 yıl önce
ebeveyn
7fc4fde5c2
işleme
d15d55c445
No account linked to committer's email address
21 değiştirilmiş dosya ile 840 ekleme ve 22 silme
Görünümü Böl Farklılık Durumunu Göster
  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 Dosyayı Görüntüle

@@ -0,0 +1,37 @@
<!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 Dosyayı Görüntüle

@@ -0,0 +1,50 @@
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 Dosyayı Görüntüle

@@ -0,0 +1,37 @@
<!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 Dosyayı Görüntüle

@@ -0,0 +1,52 @@
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 Dosyayı Görüntüle

@@ -30,7 +30,7 @@
--text-color-hover: #2b313a;
}

@media (prefers-color-scheme: light) {
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #b6bfcb;
--secondary-color: #ec630a;
@@ -362,14 +362,6 @@
<li><a class="selected" href="./tweakpane-editor/">Tweakpane Editor </a></li>
<li><a href="./model-viewer/">Model Viewer </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>
</ul>
<h2 class="category">Rendering</h2>
<ul>
<li><a href="./progressive-plugin/">Progressive Plugin </a></li>
@@ -384,6 +376,24 @@
<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>
</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>
<ul>
<li><a href="./picking-plugin/">Picking (Selection) Plugin </a></li>
@@ -437,7 +447,6 @@
<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="./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>
<h2 class="category">UI Plugins</h2>
<ul>
@@ -487,6 +496,7 @@
<h2 class="category">Experiments</h2>
<ul>
<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>
<h2 class="category">UI Config</h2>
<ul>

+ 38
- 0
examples/sscontactshadows-plugin/index.html Dosyayı Görüntüle

@@ -0,0 +1,38 @@
<!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 Dosyayı Görüntüle

@@ -0,0 +1,81 @@
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 Dosyayı Görüntüle

@@ -0,0 +1,38 @@
<!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 Dosyayı Görüntüle

@@ -0,0 +1,71 @@
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 Dosyayı Görüntüle

@@ -0,0 +1,38 @@
<!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 Dosyayı Görüntüle

@@ -0,0 +1,57 @@
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 Dosyayı Görüntüle

@@ -25,7 +25,8 @@
"@threepipe/plugin-configurator": "./../../plugins/configurator/dist/index.mjs",
"@threepipe/plugin-network": "./../../plugins/network/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 Dosyayı Görüntüle

@@ -64,15 +64,33 @@ import {GaussianSplattingPlugin} from '@threepipe/plugin-gaussian-splatting'
import {MaterialConfiguratorPlugin, SwitchNodePlugin} from '@threepipe/plugin-configurator'
import {AWSClientPlugin, TransfrSharePlugin} from '@threepipe/plugin-network'
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() {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
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: {
addOptions: {
clearSceneObjects: false, // clear the scene before adding new objects on drop.
@@ -116,6 +134,12 @@ async function init() {
new ChromaticAberrationPlugin(false),
new FilmicGrainPlugin(false),
new SSAOPlugin(UnsignedByteType, 1),
SSReflectionPlugin,
new SSContactShadowsPlugin(false),
new DepthOfFieldPlugin(false),
BloomPlugin,
TemporalAAPlugin,
new VelocityBufferPlugin(UnsignedByteType, false),
KTX2LoadPlugin,
KTXLoadPlugin,
PLYLoadPlugin,
@@ -154,6 +178,9 @@ async function init() {
// disable fading on update
viewer.getPlugin(FrameFadePlugin)!.isEditor = true


viewer.getPlugin(TemporalAAPlugin)!.stableNoise = true

const rt = viewer.getOrAddPluginSync(RenderTargetPreviewPlugin)
rt.addTarget({texture: viewer.getPlugin(GBufferPlugin)?.normalDepthTexture}, 'normalDepth')
rt.addTarget({texture: viewer.getPlugin(GBufferPlugin)?.flagsTexture}, 'gBufferFlags')
@@ -161,11 +188,11 @@ async function init() {
rt.addTarget(viewer.getPlugin(NormalBufferPlugin)?.target, 'normal', false, true, false)

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],
['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],
['Configurator']: [MaterialConfiguratorPlugin, SwitchNodePlugin, GLTFKHRMaterialVariantsPlugin],
['Animation']: [GLTFAnimationPlugin, CameraViewPlugin],

+ 39
- 0
examples/unreal-bloom-pass/index.html Dosyayı Görüntüle

@@ -0,0 +1,39 @@
<!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 Dosyayı Görüntüle

@@ -0,0 +1,79 @@
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 Dosyayı Görüntüle

@@ -0,0 +1,38 @@
<!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 Dosyayı Görüntüle

@@ -0,0 +1,79 @@
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 Dosyayı Görüntüle

@@ -1,6 +1,6 @@
{
"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.",
"main": "dist/index.js",
"module": "dist/index.mjs",
@@ -44,7 +44,6 @@
"remove": [
"clean-package",
"scripts",
"devDependencies",
"optionalDependencies",
"//"
]
@@ -119,6 +118,14 @@
"uiconfig.js": "^0.1.2",
"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": {
"uiconfig.js": "^0.1.2",
@@ -136,6 +143,11 @@
"@types/three": "file:./../three-ts-types/types/three"
}
},
"overrides": {
"ts-browser-helpers": "$ts-browser-helpers",
"three": "$three",
"@types/three": "$@types/three"
},
"optionalDependencies": {
"win-node-env": "^0.6.1"
},

+ 1
- 0
src/plugins/ui/ViewerUiConfigPlugin.ts Dosyayı Görüntüle

@@ -12,6 +12,7 @@ export class ViewerUiConfigPlugin extends AViewerPluginSync<''> {
onAdded(viewer: ThreeViewer) {
super.onAdded(viewer)
this.uiConfig = viewer.uiConfig
this.uiConfig.expanded = true
}

@serialize('viewer')

+ 33
- 0
website/.vitepress/theme/custom.css Dosyayı Görüntüle

@@ -18,4 +18,37 @@

--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));

}

/*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 Dosyayı Görüntüle

@@ -11,9 +11,6 @@ hero:
alt: Threepipe
actions:
- theme: brand
text: About Threepipe
link: ./guide/introduction
- theme: alt
text: Examples
link: https://threepipe.org/examples
target: _blank
@@ -23,6 +20,9 @@ hero:
- theme: brand
text: 3D glTF Editor
link: https://editor.threepipe.org
- theme: alt
text: About Threepipe
link: ./guide/introduction

features:
- title: Start quickly

Write Preview
Loading…
İptal
Kaydet