-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add GBufferPlugin, update ts-browser-helpers and uiconfig.js, add sup…
…port to render and export MRT, add center all geometries in RootScene, other minor changes and refactor.
- Loading branch information
Showing
38 changed files
with
996 additions
and
156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>GBuffer 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": "./../../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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { | ||
| _testFinish, | ||
| downloadBlob, | ||
| GBufferPlugin, | ||
| HalfFloatType, | ||
| IObject3D, | ||
| RenderTargetPreviewPlugin, | ||
| 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() { | ||
|
|
||
| const gbufferPlugin = viewer.addPluginSync(new GBufferPlugin(HalfFloatType)) | ||
|
|
||
| await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr') | ||
| const model = await viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/kira.glb', { | ||
| autoCenter: true, | ||
| autoScale: true, | ||
| }) | ||
|
|
||
| let id = 1 | ||
| model?.traverse((o) => { | ||
| o.materials?.forEach(m=>{ | ||
| if (!m.userData.gBufferData) m.userData.gBufferData = {} | ||
| if (!m.userData.gBufferData.materialId) m.userData.gBufferData.materialId = id += 10 | ||
| }) | ||
| }) | ||
|
|
||
| // Disable automatic near/far plane calculation based on scene bounding box | ||
| viewer.scene.mainCamera.userData.autoNearFar = false | ||
| viewer.scene.mainCamera.userData.minNearPlane = 1 | ||
| viewer.scene.mainCamera.userData.maxFarPlane = 10 | ||
| viewer.scene.refreshScene() | ||
|
|
||
| const gbufferTarget = gbufferPlugin.target | ||
| if (!gbufferTarget) { | ||
| throw new Error('gbufferPlugin.target returned undefined') | ||
| } | ||
|
|
||
| // to render depth buffer to screen, uncomment this line: | ||
| // viewer.renderManager.screenPass.overrideReadBuffer = gbufferTarget | ||
|
|
||
| const getNormalDepth = ()=>({texture: gbufferPlugin.normalDepthTexture}) | ||
| const getFlags = ()=>({texture: gbufferPlugin.flagsTexture}) | ||
|
|
||
| const targetPreview = await viewer.addPlugin(RenderTargetPreviewPlugin) | ||
| targetPreview.addTarget(getNormalDepth, 'normalDepth') | ||
| targetPreview.addTarget(getFlags, 'gBufferFlags') | ||
|
|
||
| const screenPass = viewer.renderManager.screenPass | ||
|
|
||
| createSimpleButtons({ | ||
| ['Toggle Normal+Depth']: () => { | ||
| const rt = getNormalDepth() | ||
| screenPass.overrideReadBuffer = screenPass.overrideReadBuffer?.texture === rt.texture ? null : rt | ||
| viewer.setDirty() | ||
| }, | ||
| ['Toggle Gbuffer Flags']: () => { | ||
| const rt = getFlags() | ||
| screenPass.overrideReadBuffer = screenPass.overrideReadBuffer?.texture === rt.texture ? null : rt | ||
| viewer.setDirty() | ||
| }, | ||
| ['Download snapshot']: async(btn: HTMLButtonElement) => { | ||
| btn.disabled = true | ||
| const blob = await viewer.getScreenshotBlob({mimeType: 'image/png'}) | ||
| if (blob) downloadBlob(blob, 'file.png') | ||
| else console.error('Unable to get screenshot') | ||
| btn.disabled = false | ||
| }, | ||
| }) | ||
|
|
||
| } | ||
|
|
||
| init().then(_testFinish) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.