Skip to content

Commit

Permalink
Add msaa transmission test, Add multi viewer test, Add LegacyPhongMat…
Browse files Browse the repository at this point in the history
…erial, Allow custom numeric samples in msaa, temporary fix for transmission not working with msaa, circular import fixes, stats.js position fix, disable debug by default in ThreeViewer.
  • Loading branch information
repalash committed Nov 28, 2023
1 parent 3a9c6f1 commit 0c4d6ea
Show file tree
Hide file tree
Showing 23 changed files with 520 additions and 33 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -675,7 +675,7 @@ when the extension is registered or when the material is added to the scene.
Threepipe includes several built-in materials like
[PhysicalMaterial](https://threepipe.org/docs/classes/PhysicalMaterial.html),
[UnlitMaterial](https://threepipe.org/docs/classes/UnlitMaterial.html),
[ExtendedShaderMaterial](https://threepipe.org/docs/classes/ExtendedShaderMaterial.html)
[ExtendedShaderMaterial](https://threepipe.org/docs/classes/ExtendedShaderMaterial.html), [LegacyPhongMaterial](https://threepipe.org/docs/classes/LegacyPhongMaterial.html),
that include support for extending the material.
Any three.js material can be made extendable,
check the `ShaderPass2` class for a simple example that adds support for material extension to three.js ShaderPass.
Expand Down Expand Up @@ -2244,7 +2244,7 @@ Note: The animation is started when the animate or animateAsync function is call

Example: https://threepipe.org/examples/#camera-view-plugin/

Source Code: [src/plugins/animation/CameraViewPlugin.ts](./src/plugins/ui/RenderTargetPreviewPlugin.ts)
Source Code: [src/plugins/animation/CameraViewPlugin.ts](./src/plugins/animation/CameraViewPlugin.ts)

API Reference: [CameraViewPlugin](https://threepipe.org/docs/classes/CameraViewPlugin.html)

Expand Down
36 changes: 36 additions & 0 deletions examples/gltf-transmission-test-msaa/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GLTF Transmission Test (MSAA)</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",
"@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 changes: 52 additions & 0 deletions examples/gltf-transmission-test-msaa/script.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import {_testFinish, IObject3D, RenderTargetPreviewPlugin, ThreeViewer} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
rgbm: true,
zPrepass: false,
})

async function init() {

const targetPreview = viewer.addPluginSync(RenderTargetPreviewPlugin)
targetPreview.addTarget(()=>viewer.renderManager.composerTarget, 'composer-1', false, false)
viewer.renderManager.renderPass.preserveTransparentTarget = true
targetPreview.addTarget(()=>viewer.renderManager.renderPass.transparentTarget, 'transparent', true, true)
targetPreview.addTarget(()=>viewer.renderManager.composerTarget2, 'composer-2', false, false)

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
const [model, model2] = await Promise.all([
viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/IridescenceLamp.glb', {
autoCenter: true,
autoScale: true,
}),
viewer.load<IObject3D>('https://threejs.org/examples/models/gltf/IridescentDishWithOlives.glb', {
autoCenter: true,
autoScale: true,
}),
])

if (!model || !model2) {
console.error('model not loaded')
return
}
model.position.x = -1
model2.position.x = 1
model2.position.y = -1.2

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

const m1 = model?.getObjectByName('lamp_transmission')
const m2 = model2?.getObjectByName('glassCover')
const materials = [...m1?.materials || [], ...m2?.materials || []]
for (const material of materials) {
const config = material.uiConfig
if (!config) continue
ui.appendChild(config)
}

}

init().then(_testFinish)
2 changes: 2 additions & 0 deletions examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,9 @@ <h2 class="category">Lights</h2>
</ul>
<h2 class="category">Tests</h2>
<ul>
<li><a href="./multi-viewer-test/">Multiple Viewers Test </a></li>
<li><a href="./gltf-transmission-test/">glTF Transmission Test </a></li>
<li><a href="./gltf-transmission-test-msaa/">glTF Transmission Test + MSAA </a></li>
<li><a href="./uint8-rgbm-hdr-test/">Uint8 RGBM HDR Test </a></li>
<li><a href="./half-float-hdr-test/">Half-float HDR Test </a></li>
<li><a href="./sphere-rgbm-test/">RGBM Test </a></li>
Expand Down
57 changes: 57 additions & 0 deletions examples/multi-viewer-test/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple Viewers Test</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, .mcanvas, .container {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.canvas-container{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
outline: 1px solid #464646;
}
</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 class="container">
<div class="canvas-container">
<canvas id="mcanvas1" class="mcanvas"></canvas>
</div>
<div class="canvas-container">
<canvas id="mcanvas2" class="mcanvas"></canvas>
</div>
<div class="canvas-container">
<canvas id="mcanvas3" class="mcanvas"></canvas>
</div>
<div class="canvas-container">
<canvas id="mcanvas4" class="mcanvas"></canvas>
</div>
</div>
</body>
37 changes: 37 additions & 0 deletions examples/multi-viewer-test/script.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import {_testFinish, ThreeViewer} from 'threepipe'

const models = [
'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
'https://threejs.org/examples/models/fbx/Samba Dancing.fbx',
'https://threejs.org/examples/models/draco/bunny.drc',
'https://threejs.org/examples/models/gltf/kira.glb',
]

async function init(i: number) {

const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas' + (i + 1)) as HTMLCanvasElement,
msaa: true,
debug: true,
dropzone: {
allowedExtensions: ['gltf', 'glb', 'hdr', 'bin', 'png', 'jpeg', 'webp', 'jpg', 'exr'],
addOptions: {
disposeSceneObjects: true,
autoSetEnvironment: true, // when hdr is dropped
autoSetBackground: true,
},
},
})

await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr', {
// setBackground: true,
})
const result = await viewer.load(models[i], {
autoCenter: true,
autoScale: true,
})
console.log(result)

}

Promise.all(new Array(4).fill(0).map(async(_, i) => init(i))).then(_testFinish)
12 changes: 6 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "threepipe",
"version": "0.0.14",
"version": "0.0.15",
"description": "A 3D viewer framework built on top of three.js in TypeScript with a focus on quality rendering, modularity and extensibility.",
"main": "src/index.ts",
"module": "dist/index.mjs",
Expand Down Expand Up @@ -102,7 +102,7 @@
"popmotion": "^11.0.5"
},
"dependencies": {
"@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1016/package.tgz",
"@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1017/package.tgz",
"@types/webxr": "^0.5.1",
"@types/wicg-file-system-access": "^2020.9.5",
"ts-browser-helpers": "^0.8.0"
Expand All @@ -113,8 +113,8 @@
"ts-browser-helpers": "^0.8.0",
"three": "https://github.com/repalash/three.js-modded/releases/download/v0.152.2015/package.tgz",
"three-f": "https://github.com/repalash/three.js-modded/archive/refs/tags/v0.152.2015.tar.gz",
"@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1016/package.tgz",
"@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1016.tar.gz",
"@types/three": "https://github.com/repalash/three-ts-types/releases/download/v0.152.1017/package.tgz",
"@types/three-f": "https://github.com/repalash/three-ts-types/archive/refs/tags/v0.152.1017.tar.gz",
"@types/three-pkg": "https://gitpkg.now.sh/repalash/three-ts-types/types/three?modded_three"
},
"local_dependencies": {
Expand Down
4 changes: 3 additions & 1 deletion src/assetmanager/MaterialManager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
import {downloadFile} from 'ts-browser-helpers'
import {MaterialExtension} from '../materials'
import {generateUUID, isInScene} from '../three'
import {LegacyPhongMaterial} from '../core/material/LegacyPhongMaterial'

/**
* Material Manager
Expand All @@ -25,6 +26,7 @@ export class MaterialManager<T = ''> extends EventDispatcher<BaseEvent, T> {
readonly templates: IMaterialTemplate[] = [
PhysicalMaterial.MaterialTemplate,
UnlitMaterial.MaterialTemplate,
LegacyPhongMaterial.MaterialTemplate,
]

private _materials: IMaterial[] = []
Expand Down Expand Up @@ -54,7 +56,7 @@ export class MaterialManager<T = ''> extends EventDispatcher<BaseEvent, T> {
while (!template.generator) { // looping so that we can inherit templates, not fully implemented yet
const t2 = this.findTemplate(template.materialType) // todo add a baseTemplate property to the template?
if (!t2) {
console.error('Template has no generator or materialType', template, nameOrType)
console.warn('Template has no generator or materialType', template, nameOrType)
return undefined
}
template = {...template, ...t2}
Expand Down
2 changes: 1 addition & 1 deletion src/core/IRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export interface IRenderManagerOptions {
alpha?: boolean, // default = true
targetOptions?: CreateRenderTargetOptions
rgbm?: boolean,
msaa?: boolean,
msaa?: boolean | number,
depthBuffer?: boolean,
renderScale?: number,
}
Expand Down
1 change: 1 addition & 0 deletions src/core/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export {ExtendedShaderMaterial} from './material/ExtendedShaderMaterial'
export {PhysicalMaterial, type PhysicalMaterialEventTypes, MeshStandardMaterial2} from './material/PhysicalMaterial'
export {ShaderMaterial2} from './material/ShaderMaterial2'
export {UnlitMaterial, type UnlitMaterialEventTypes, MeshBasicMaterial2} from './material/UnlitMaterial'
export {LegacyPhongMaterial, type PhongMaterialEventTypes} from './material/LegacyPhongMaterial'
export {iObjectCommons} from './object/iObjectCommons'
export {iCameraCommons} from './object/iCameraCommons'
export {iGeometryCommons} from './geometry/iGeometryCommons'
Expand Down
5 changes: 3 additions & 2 deletions src/core/material/IMaterialUi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
import {downloadBlob, uploadFile} from 'ts-browser-helpers'
import {PhysicalMaterial} from './PhysicalMaterial'
import {getEmptyMeta} from '../../utils/serialization'
import {LegacyPhongMaterial} from './LegacyPhongMaterial'

export const iMaterialUI = {
base: (material: IMaterial): UiObjectConfig[] => [
Expand Down Expand Up @@ -279,7 +280,7 @@ export const iMaterialUI = {
],
}
),
bumpNormal: (material: PhysicalMaterial): UiObjectConfig => (
bumpNormal: (material: PhysicalMaterial|LegacyPhongMaterial): UiObjectConfig => (
{
type: 'folder',
label: 'Bump/Normal',
Expand Down Expand Up @@ -331,7 +332,7 @@ export const iMaterialUI = {
],
}
),
emission: (material: PhysicalMaterial): UiObjectConfig => (
emission: (material: PhysicalMaterial|LegacyPhongMaterial): UiObjectConfig => (
{
type: 'folder',
label: 'Emission',
Expand Down

0 comments on commit 0c4d6ea

Please sign in to comment.