lzy
/
threepipe
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

Set rgbm true by default, set msaa true in tweakpane-editor, NaN fix in PhysicalMaterial, update status, add msaa sample example,

master
Palash Bansal 1 vuosi sitten
vanhempi
136f463d43
commit
addf4fe601
No account linked to committer's email address
15 muutettua tiedostoa jossa 132 lisäystä ja 19 poistoa
Jaettu näkymä Näytä diff tilastot
  1. 3
    4
      README.md
  2. 1
    1
      examples/anisotropy-plugin/index.html
  3. 1
    0
      examples/gltf-transmission-test-msaa-zprepass/script.ts
  4. 2
    1
      examples/index.html
  5. 36
    0
      examples/msaa-ssaa/index.html
  6. 68
    0
      examples/msaa-ssaa/script.ts
  7. 1
    1
      examples/outline-plugin/index.html
  8. 1
    1
      examples/ssgi-plugin/index.html
  9. 1
    1
      examples/ssgi-ssr-plugin/index.html
  10. 1
    0
      examples/ssreflection-plugin/script.ts
  11. 1
    1
      examples/tweakpane-editor/script.ts
  12. 1
    1
      package.json
  13. 1
    1
      src/core/material/IMaterialUi.ts
  14. 3
    0
      src/core/material/PhysicalMaterial.ts
  15. 11
    7
      src/viewer/ThreeViewer.ts

+ 3
- 4
README.md Näytä tiedosto

@@ -6,7 +6,7 @@ A new way to work with three.js, 3D models and rendering on the web.
[Github](https://github.com/repalash/threepipe) —
[Examples](https://threepipe.org/examples/) —
[API Reference](https://threepipe.org/docs/) —
[WebGi](https://webgi.xyz/docs/)
[WebGi](https://webgi.dev/)

[![NPM Package](https://img.shields.io/npm/v/threepipe.svg)](https://www.npmjs.com/package/threepipe)
[![Discord Server](https://img.shields.io/discord/956788102473584660?label=Discord&logo=discord)](https://discord.gg/apzU8rUWxY)
@@ -210,9 +210,8 @@ The core framework([src](https://github.com/repalash/threepipe/tree/master/src),
Some plugins(in the [plugins](https://github.com/repalash/threepipe/tree/master/plugins) folder) might have different licenses. Check the individual plugin documentation and the source folder/files for more details.

## Status
The project is in `alpha` stage and under active development. Many features will be added but the core API will not change significantly in future releases.

Check out [WebGi](https://webgi.xyz/docs) for an advanced tailor-made solution for e-commerce, jewelry, automobile, apparel, furniture etc.
The project is in `beta` stage and under active development.
Many features will be added but the core API will not change significantly in future releases.

## Table of Contents


+ 1
- 1
examples/anisotropy-plugin/index.html Näytä tiedosto

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bloom Plugin</title>
<title>Anisotropy Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->

+ 1
- 0
examples/gltf-transmission-test-msaa-zprepass/script.ts Näytä tiedosto

@@ -6,6 +6,7 @@ const viewer = new ThreeViewer({
msaa: true,
rgbm: true,
zPrepass: true, // This example shows a bug in zPrepass
// forceZPrepass: true,
plugins: [LoadingScreenPlugin],
})


+ 2
- 1
examples/index.html Näytä tiedosto

@@ -363,6 +363,7 @@
<li><a href="./progressive-plugin/">Progressive Plugin </a></li>
<li><a href="./custom-pipeline/">Custom Pipeline specification </a></li>
<li><a href="./ssaa-plugin/">SSAA Plugin </a></li>
<li><a href="./msaa-ssaa/">MSAA + SSAA </a></li>
<li><a href="./depth-buffer-plugin/">Depth Buffer Plugin </a></li>
<li><a href="./normal-buffer-plugin/">Normal Buffer Plugin </a></li>
<li><a href="./gbuffer-plugin/">GBuffer Plugin <br/>(NormalDepth+Flags) </a></li>
@@ -377,7 +378,7 @@
<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="./temporalaa-plugin/">Temporal Anti-aliasing(TAA) Plugin </a></li>
<li><a href="./outline-plugin/">Outline(Picking) Plugin </a></li>
<li><a href="./ssgi-plugin/">Screen Space Global Illumination(SSGI) Plugin </a></li>
<li><a href="./ssgi-ssr-plugin/">SSGI + SSR Plugins </a></li>

+ 36
- 0
examples/msaa-ssaa/index.html Näytä tiedosto

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MSAA + SSAA</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>

+ 68
- 0
examples/msaa-ssaa/script.ts Näytä tiedosto

@@ -0,0 +1,68 @@
import {
_testFinish,
IObject3D,
LoadingScreenPlugin,
PhysicalMaterial,
ProgressivePlugin,
SSAAPlugin,
ThreeViewer,
} from 'threepipe'
import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane'

async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
debug: true,
msaa: true,
rgbm: true,
renderScale: 1,
dropzone: {
addOptions: {
disposeSceneObjects: true,
importConfig: true,
},
},
plugins: [LoadingScreenPlugin],
})
viewer.addPluginSync(new SSAAPlugin())

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

viewer.renderManager.renderPass.overrideMaterial = new PhysicalMaterial({
color: 'white',
roughness: 1,
metalness: 0,
wireframe: true,
})

viewer.scene.mainCamera.position.set(0, 0, 3.5)


const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true))
ui.appendChild({
type: 'toggle',
label: 'Auto Rotate',
property: [viewer.scene.mainCamera.controls, 'autoRotate'],
})
ui.setupPluginUi(SSAAPlugin, {
expanded: true,
})
ui.setupPlugins(ProgressivePlugin)
ui.appendChild(viewer.renderManager.uiConfig)

await viewer.getPlugin(ProgressivePlugin)?.convergedPromise

console.log('converged')
}

init().finally(_testFinish)

+ 1
- 1
examples/outline-plugin/index.html Näytä tiedosto

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSReflection Plugin</title>
<title>Outline Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->

+ 1
- 1
examples/ssgi-plugin/index.html Näytä tiedosto

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSReflection Plugin</title>
<title>SSGI Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->

+ 1
- 1
examples/ssgi-ssr-plugin/index.html Näytä tiedosto

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SSReflection Plugin</title>
<title>SSGI + SSR Plugins</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->

+ 1
- 0
examples/ssreflection-plugin/script.ts Näytä tiedosto

@@ -18,6 +18,7 @@ async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
msaa: true,
rgbm: true,
dropzone: {
addOptions: {
disposeSceneObjects: true,

+ 1
- 1
examples/tweakpane-editor/script.ts Näytä tiedosto

@@ -77,7 +77,7 @@ async function init() {
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas') as HTMLCanvasElement,
renderScale: 'auto',
msaa: checkQuery('msaa', false),
msaa: checkQuery('msaa', true),
rgbm: checkQuery('rgbm', true),
debug: checkQuery('debug', false),
assetManager: {

+ 1
- 1
package.json Näytä tiedosto

@@ -1,6 +1,6 @@
{
"name": "threepipe",
"version": "0.0.37",
"version": "0.0.38-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",

+ 1
- 1
src/core/material/IMaterialUi.ts Näytä tiedosto

@@ -414,7 +414,7 @@ export const iMaterialUI = {
},
{
type: 'slider',
bounds: [0, 10],
bounds: [0, 100],
property: [material, 'emissiveIntensity'],
},
{

+ 3
- 0
src/core/material/PhysicalMaterial.ts Näytä tiedosto

@@ -93,6 +93,9 @@ export class PhysicalMaterial extends MeshPhysicalMaterial<IMaterialEvent, Physi
for (const vElement of v) shader.vertexShader = shaderReplaceString(shader.vertexShader, vElement[0], '#glMarker ' + vElement[1] + '\n' + vElement[0])
for (const fElement of f) shader.fragmentShader = shaderReplaceString(shader.fragmentShader, fElement[0], '#glMarker ' + fElement[1] + '\n' + fElement[0])

// for NaN. todo do the same in Unlit and line materials?
shader.fragmentShader = shaderReplaceString(shader.fragmentShader, '#include <output_fragment>', 'gl_FragColor = clamp(gl_FragColor, 0.0, 1000.0);\n', {append: true})

iMaterialCommons.onBeforeCompile.call(this, shader, renderer)

shader.defines && (shader.defines.INVERSE_ALPHAMAP = this.userData.inverseAlphaMap ? 1 : 0)

+ 11
- 7
src/viewer/ThreeViewer.ts Näytä tiedosto

@@ -116,25 +116,29 @@ export interface ThreeViewerOptions {
screenShader?: TViewerScreenShader,
/**
* Use MSAA.
* Renders objects in a multi-sampled buffer.
* @default false
*/
msaa?: boolean,
/**
* Use Uint8 RGBM HDR Render Pipeline.
* Provides better performance with post-processing.
* RenderManager Uses Half-float if set to false.
* @default true
*/
rgbm?: boolean
/**
* Use rendered gbuffer as depth-prepass / z-prepass. (Requires DepthBufferPlugin/GBufferPlugin).
* Set it to true if you only have opaque objects in the scene to get better performance.
*
* todo fix: It will be disabled when there are any transparent/transmissive objects with render to depth buffer enabled, see forceZPrepass
* todo fix: It should be disabled when there are any transparent/transmissive objects with render to depth buffer enabled, see forceZPrepass
*/
zPrepass?: boolean
/**
* Force z-prepass even if there are transparent/transmissive objects with render to depth buffer enabled.
*/
forceZPrepass?: boolean // todo
// /**
// * Force z-prepass even if there are transparent/transmissive objects with render to depth buffer enabled.
// * Not implemented
// */
// forceZPrepass?: boolean // todo

/**
* Render scale, 1 = full resolution, 0.5 = half resolution, 2 = double resolution.
@@ -430,7 +434,7 @@ export class ThreeViewer extends EventDispatcher<IViewerEvent, IViewerEventTypes
this.renderManager = new ViewerRenderManager({
canvas: this._canvas,
msaa: options.msaa ?? options.isAntialiased ?? false,
rgbm: options.rgbm ?? options.useRgbm ?? false,
rgbm: options.rgbm ?? options.useRgbm ?? true,
zPrepass: options.zPrepass ?? options.useGBufferDepth ?? false,
depthBuffer: !(options.zPrepass ?? options.useGBufferDepth ?? false),
screenShader: options.screenShader,
@@ -1103,7 +1107,7 @@ export class ThreeViewer extends EventDispatcher<IViewerEvent, IViewerEventTypes
* Deserialize and import all the viewer and plugin settings, exported with {@link exportConfig}.
*/
async importConfig(json: ISerializedConfig|ISerializedViewerConfig) {
if (json.type !== this.type && <string>json.type !== 'ViewerApp') {
if (json.type !== this.type && <string>json.type !== 'ViewerApp' && <string>json.type !== 'ThreeViewer') {
if (this.getPlugin(json.type)) {
return this.importPluginConfig(json)
} else {

Write Preview
Loading…
Peruuta
Tallenna