lythreeframe 1.2.21 → 1.2.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bundle.cjs.js +203 -304
- package/dist/bundle.esm.js +205 -306
- package/dist/index.d.ts +5 -3
- package/dist/lythreeframe/Frame/Viewport.d.ts +2 -22
- package/dist/lythreeframe/PostProcess/Param/AAParam.d.ts +4 -3
- package/dist/lythreeframe/PostProcess/Param/Bloom.d.ts +3 -2
- package/dist/lythreeframe/PostProcess/Param/DOF.d.ts +3 -2
- package/dist/lythreeframe/PostProcess/Param/GTAO.d.ts +10 -3
- package/dist/lythreeframe/PostProcess/Param/Outline.d.ts +3 -2
- package/dist/lythreeframe/PostProcess/Param/SSR.d.ts +3 -2
- package/dist/lythreeframe/PostProcess/PostProcessParam.d.ts +12 -12
- package/dist/lythreeframe/PostProcess/WebGPUPostProcessFactory.d.ts +9 -16
- package/package.json +3 -3
- package/dist/lythreeframe/PostProcess/Param/Denoise.d.ts +0 -7
package/dist/bundle.esm.js
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, PerspectiveCamera, OrthographicCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry } from 'three/webgpu';
|
|
2
2
|
import { GLTFLoader, DRACOLoader, CSS2DRenderer, OrbitControls } from 'three/examples/jsm/Addons.js';
|
|
3
|
-
import { pass, mrt, output, uniform,
|
|
3
|
+
import { pass, mrt, output, uniform, metalness, transformedNormalView, time, oscSine, blendColor } from 'three/tsl';
|
|
4
|
+
import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';
|
|
4
5
|
import { bloom } from 'three/examples/jsm/tsl/display/BloomNode.js';
|
|
5
6
|
import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js';
|
|
6
|
-
import {
|
|
7
|
+
import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js';
|
|
7
8
|
import { ao } from 'three/examples/jsm/tsl/display/GTAONode.js';
|
|
8
|
-
import { ssr } from 'three/examples/jsm/tsl/display/SSRNode.js';
|
|
9
|
-
import { lensflare } from 'three/examples/jsm/tsl/display/LensflareNode.js';
|
|
10
9
|
import { outline } from 'three/examples/jsm/tsl/display/OutlineNode.js';
|
|
11
|
-
import { motionBlur } from 'three/examples/jsm/tsl/display/MotionBlur.js';
|
|
12
|
-
import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js';
|
|
13
10
|
import { smaa } from 'three/examples/jsm/tsl/display/SMAANode.js';
|
|
11
|
+
import { ssr } from 'three/examples/jsm/tsl/display/SSRNode.js';
|
|
14
12
|
import { gsap } from 'gsap';
|
|
15
13
|
import { Scene } from 'three';
|
|
16
14
|
import { SkyMesh } from 'three/examples/jsm/objects/SkyMesh.js';
|
|
@@ -1261,68 +1259,18 @@ class Delegate {
|
|
|
1261
1259
|
}
|
|
1262
1260
|
}
|
|
1263
1261
|
|
|
1264
|
-
const DefaultSSRParam = {
|
|
1265
|
-
isEnabled: false,
|
|
1266
|
-
maxDistance: 0.5,
|
|
1267
|
-
opacity: 1,
|
|
1268
|
-
thickness: 0.015,
|
|
1269
|
-
};
|
|
1270
|
-
|
|
1271
|
-
const DefaultDenoiseParam = {
|
|
1272
|
-
denoiseRadius: 5,
|
|
1273
|
-
lumaPhi: 5,
|
|
1274
|
-
depthPhi: 5,
|
|
1275
|
-
normalPhi: 5
|
|
1276
|
-
};
|
|
1277
|
-
|
|
1278
|
-
const DefaultGTAOParam = {
|
|
1279
|
-
isEnabled: false,
|
|
1280
|
-
distanceExponent: 1,
|
|
1281
|
-
distanceFallOff: 1,
|
|
1282
|
-
radius: 0.25,
|
|
1283
|
-
scale: 1,
|
|
1284
|
-
thickness: 1,
|
|
1285
|
-
denoised: true,
|
|
1286
|
-
denoiseParam: DefaultDenoiseParam,
|
|
1287
|
-
};
|
|
1288
|
-
|
|
1289
|
-
const DefaultBloomParam = {
|
|
1290
|
-
isEnabled: false,
|
|
1291
|
-
threshold: 0,
|
|
1292
|
-
strength: 1,
|
|
1293
|
-
radius: 0,
|
|
1294
|
-
};
|
|
1295
|
-
|
|
1296
|
-
const DefaultDOFParam = {
|
|
1297
|
-
isEnabled: false,
|
|
1298
|
-
focus: 500.0,
|
|
1299
|
-
aperture: 5,
|
|
1300
|
-
maxblur: 0.01
|
|
1301
|
-
};
|
|
1302
|
-
|
|
1303
|
-
const DefaultOutlineParams = {
|
|
1304
|
-
isEnabled: false,
|
|
1305
|
-
edgeStrength: 3.0,
|
|
1306
|
-
edgeGlow: 1.0,
|
|
1307
|
-
edgeThickness: 1.0,
|
|
1308
|
-
pulsePeriod: 0.0,
|
|
1309
|
-
visibleEdgeColor: 0xffffff,
|
|
1310
|
-
hiddenEdgeColor: 0xffffff,
|
|
1311
|
-
};
|
|
1312
|
-
|
|
1313
|
-
const DefaultAAParams = {
|
|
1314
|
-
isEnabled: false,
|
|
1315
|
-
type: "fxaa",
|
|
1316
|
-
};
|
|
1317
|
-
|
|
1318
1262
|
const DefaultPostProcessParam = {
|
|
1319
|
-
|
|
1320
|
-
dof: Object.assign({}, DefaultDOFParam),
|
|
1321
|
-
ssr: Object.assign({}, DefaultSSRParam),
|
|
1322
|
-
gtao: Object.assign({}, DefaultGTAOParam),
|
|
1323
|
-
outline: Object.assign({}, DefaultOutlineParams),
|
|
1324
|
-
aa: Object.assign({}, DefaultAAParams)
|
|
1263
|
+
steps: []
|
|
1325
1264
|
};
|
|
1265
|
+
var PostProcessStepType;
|
|
1266
|
+
(function (PostProcessStepType) {
|
|
1267
|
+
PostProcessStepType[PostProcessStepType["Bloom"] = 0] = "Bloom";
|
|
1268
|
+
PostProcessStepType[PostProcessStepType["DepthOfField"] = 1] = "DepthOfField";
|
|
1269
|
+
PostProcessStepType[PostProcessStepType["ScreenSpaceReflection"] = 2] = "ScreenSpaceReflection";
|
|
1270
|
+
PostProcessStepType[PostProcessStepType["GroundTruthAmbientOcclusion"] = 3] = "GroundTruthAmbientOcclusion";
|
|
1271
|
+
PostProcessStepType[PostProcessStepType["Outline"] = 4] = "Outline";
|
|
1272
|
+
PostProcessStepType[PostProcessStepType["Antialiasing"] = 5] = "Antialiasing";
|
|
1273
|
+
})(PostProcessStepType || (PostProcessStepType = {}));
|
|
1326
1274
|
|
|
1327
1275
|
class World {
|
|
1328
1276
|
get scene() {
|
|
@@ -1407,7 +1355,6 @@ class WebGPUPostProcessFactory {
|
|
|
1407
1355
|
else {
|
|
1408
1356
|
scenePass.setMRT(newMRT);
|
|
1409
1357
|
}
|
|
1410
|
-
console.log(scenePass.getMRT(), "MRTTTTTTT");
|
|
1411
1358
|
}
|
|
1412
1359
|
// bloom pass
|
|
1413
1360
|
static constructBloomPass(scenePass, params) {
|
|
@@ -1425,21 +1372,22 @@ class WebGPUPostProcessFactory {
|
|
|
1425
1372
|
static constructDOFPass(scenePass, params) {
|
|
1426
1373
|
const scenePassColor = scenePass.getTextureNode('output');
|
|
1427
1374
|
const scenePassViewZ = scenePass.getViewZNode();
|
|
1428
|
-
return dof(scenePassColor, scenePassViewZ, uniform(params.focus), uniform(params.aperture)
|
|
1375
|
+
return dof(scenePassColor, scenePassViewZ, uniform(params.focus), uniform(params.aperture), uniform(params.maxblur));
|
|
1429
1376
|
}
|
|
1430
1377
|
static updateDOFPass(dofPass, params) {
|
|
1431
1378
|
dofPass.focus.value = params.focus;
|
|
1432
|
-
dofPass.aperture.value = params.aperture
|
|
1379
|
+
dofPass.aperture.value = params.aperture;
|
|
1433
1380
|
dofPass.maxblur.value = params.maxblur;
|
|
1434
1381
|
}
|
|
1435
1382
|
// motion blur
|
|
1436
|
-
static constructMotionBlurPass(lastNode, scenePass
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1383
|
+
// static constructMotionBlurPass(lastNode:NodeRepresentation, scenePass: ShaderNodeObject<PassNode>, param:MotionBlurParam): ShaderNodeObject<Node>
|
|
1384
|
+
// {
|
|
1385
|
+
// WebGPUPostProcessFactory.updateScenePass(scenePass, {velocity})
|
|
1386
|
+
// const scenePassVelocity = scenePass.getTextureNode( 'velocity' ).mul( param.blurAmount );
|
|
1387
|
+
// const scenePassColor = scenePass.getTextureNode('output');
|
|
1388
|
+
// const motionBlurPass = motionBlur( scenePassColor, scenePassVelocity );
|
|
1389
|
+
// return motionBlurPass
|
|
1390
|
+
// }
|
|
1443
1391
|
// ssr
|
|
1444
1392
|
static constructSSRPass(scenePass, param) {
|
|
1445
1393
|
WebGPUPostProcessFactory.updateScenePass(scenePass, {
|
|
@@ -1501,19 +1449,21 @@ class WebGPUPostProcessFactory {
|
|
|
1501
1449
|
static updateGTAODenoisePass(denoisePass, params) {
|
|
1502
1450
|
WebGPUPostProcessFactory.updateDenoisePass(denoisePass, params.denoiseParam);
|
|
1503
1451
|
}
|
|
1504
|
-
static constructLensFlarePass(inputNode, params)
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1452
|
+
// static constructLensFlarePass(inputNode: NodeRepresentation, params: LensFlareParam): ShaderNodeObject<LensflareNode>
|
|
1453
|
+
// {
|
|
1454
|
+
// const lensflarePass = lensflare(inputNode, {
|
|
1455
|
+
// threshold : uniform(params.threshold),
|
|
1456
|
+
// ghostAttenuationFactor: uniform(params.ghostAttenuationFactor),
|
|
1457
|
+
// ghostSpacing : uniform(params.ghostSpacing),
|
|
1458
|
+
// });
|
|
1459
|
+
// return lensflarePass;
|
|
1460
|
+
// }
|
|
1461
|
+
// static updateLensFlarPass(lensflarePass: ShaderNodeObject<LensflareNode>, params: LensFlareParam)
|
|
1462
|
+
// {
|
|
1463
|
+
// lensflarePass.thresholdNode.value = params.threshold
|
|
1464
|
+
// lensflarePass.ghostSpacingNode.value = params.ghostSpacing
|
|
1465
|
+
// lensflarePass.ghostAttenuationFactorNode.value = params.ghostAttenuationFactor
|
|
1466
|
+
// }
|
|
1517
1467
|
static constructOutlinePass(scene, camera, outlineObjects, param) {
|
|
1518
1468
|
const outlinePass = outline(scene, camera, {
|
|
1519
1469
|
selectedObjects: outlineObjects,
|
|
@@ -1561,17 +1511,6 @@ class Viewport {
|
|
|
1561
1511
|
this._canvas = null;
|
|
1562
1512
|
this.isRenderStateDirty = true;
|
|
1563
1513
|
this.postProcessing = null;
|
|
1564
|
-
this.scenePass = null;
|
|
1565
|
-
this.bloomPass = null;
|
|
1566
|
-
this.dofPass = null;
|
|
1567
|
-
this.GTAOPass = null;
|
|
1568
|
-
this.denoiseGTAOPass = null;
|
|
1569
|
-
this.ssrPass = null;
|
|
1570
|
-
this.outlinePass = null;
|
|
1571
|
-
this.fxaaPass = null;
|
|
1572
|
-
this.smaaPass = null;
|
|
1573
|
-
// private motionBlurPass: ShaderNodeObject<Node> | null = null;
|
|
1574
|
-
// private denoiseOutlinePass: ShaderNodeObject<DenoiseNode> | null = null;
|
|
1575
1514
|
this.outlineObjects = [];
|
|
1576
1515
|
this.postProcessParam = Object.assign({}, postProcessParam);
|
|
1577
1516
|
this._app = app;
|
|
@@ -1633,205 +1572,140 @@ class Viewport {
|
|
|
1633
1572
|
this.setupPostProcess();
|
|
1634
1573
|
}
|
|
1635
1574
|
setupPostProcess() {
|
|
1636
|
-
|
|
1637
|
-
const isBloomEnabled = this.postProcessParam.bloom.isEnabled;
|
|
1638
|
-
const isDOFEnabled = this.postProcessParam.dof.isEnabled;
|
|
1639
|
-
const isSSREnabled = this.postProcessParam.ssr.isEnabled;
|
|
1640
|
-
const isGTAOEnabled = this.postProcessParam.gtao.isEnabled;
|
|
1641
|
-
const isOutlineEnabled = this.postProcessParam.outline.isEnabled;
|
|
1642
|
-
const isAAEnabled = this.postProcessParam.aa.isEnabled;
|
|
1643
|
-
if (!(isBloomEnabled) && !(isDOFEnabled) && !(isSSREnabled) && !(isGTAOEnabled) && !(isOutlineEnabled) && !(isAAEnabled)) {
|
|
1575
|
+
if (this.postProcessParam.steps.length === 0) {
|
|
1644
1576
|
this.destroyPostProcess();
|
|
1577
|
+
this.markRenderStateDirty();
|
|
1645
1578
|
return;
|
|
1646
1579
|
}
|
|
1647
1580
|
if (!this.postProcessing) {
|
|
1648
1581
|
this.postProcessing = new PostProcessing(this.renderer);
|
|
1649
1582
|
}
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
this.GTAOPass.dispose();
|
|
1724
|
-
this.GTAOPass = null;
|
|
1725
|
-
}
|
|
1726
|
-
if (this.denoiseGTAOPass) {
|
|
1727
|
-
this.denoiseGTAOPass.dispose();
|
|
1728
|
-
this.denoiseGTAOPass = null;
|
|
1729
|
-
}
|
|
1730
|
-
}
|
|
1731
|
-
// outline
|
|
1732
|
-
if (isOutlineEnabled) {
|
|
1733
|
-
if (!this.outlinePass) {
|
|
1734
|
-
this.outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, this.scenePass.camera, this.outlineObjects, this.postProcessParam.outline);
|
|
1735
|
-
}
|
|
1736
|
-
else {
|
|
1737
|
-
WebGPUPostProcessFactory.updateOutlinePass(this.outlinePass, this.outlineObjects, this.postProcessParam.outline);
|
|
1738
|
-
}
|
|
1739
|
-
const { visibleEdge, hiddenEdge } = this.outlinePass;
|
|
1740
|
-
const pulsePeriod = uniform(this.postProcessParam.outline.pulsePeriod);
|
|
1741
|
-
const period = time.div(pulsePeriod).mul(2);
|
|
1742
|
-
const osc = oscSine(period).mul(.5).add(.5);
|
|
1743
|
-
const outlineColor = visibleEdge.mul(uniform(new Color(this.postProcessParam.outline.visibleEdgeColor))).add(hiddenEdge.mul(uniform(new Color(this.postProcessParam.outline.hiddenEdgeColor)))).mul(this.postProcessParam.outline.edgeStrength);
|
|
1744
|
-
const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
|
|
1745
|
-
// if(!this.denoiseOutlinePass)
|
|
1746
|
-
// {
|
|
1747
|
-
// this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
|
|
1748
|
-
// }
|
|
1749
|
-
// outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
|
|
1750
|
-
// finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
|
|
1751
|
-
finalNode = outlinePulse.add(finalNode);
|
|
1752
|
-
// finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
|
|
1753
|
-
}
|
|
1754
|
-
else {
|
|
1755
|
-
if (this.outlinePass) {
|
|
1756
|
-
this.outlinePass.dispose();
|
|
1757
|
-
this.outlinePass = null;
|
|
1758
|
-
}
|
|
1759
|
-
}
|
|
1760
|
-
if (isAAEnabled) {
|
|
1761
|
-
if (this.postProcessParam.aa.type === "fxaa") {
|
|
1762
|
-
this.fxaaPass = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
|
|
1763
|
-
finalNode = this.fxaaPass;
|
|
1764
|
-
}
|
|
1765
|
-
if (this.postProcessParam.aa.type === "smaa") {
|
|
1766
|
-
this.smaaPass = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
|
|
1767
|
-
finalNode = this.smaaPass;
|
|
1768
|
-
}
|
|
1769
|
-
}
|
|
1770
|
-
else {
|
|
1771
|
-
if (this.fxaaPass) {
|
|
1772
|
-
this.fxaaPass.dispose();
|
|
1773
|
-
this.fxaaPass = null;
|
|
1774
|
-
}
|
|
1775
|
-
if (this.smaaPass) {
|
|
1776
|
-
this.smaaPass.dispose();
|
|
1777
|
-
this.smaaPass = null;
|
|
1583
|
+
const scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
|
|
1584
|
+
let finalNode = scenePass.getTextureNode('output');
|
|
1585
|
+
this.postProcessParam.steps.forEach((step) => {
|
|
1586
|
+
switch (step.type) {
|
|
1587
|
+
case PostProcessStepType.Bloom:
|
|
1588
|
+
{
|
|
1589
|
+
const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
|
|
1590
|
+
console.log("[PostProcess] BloomPass 构建完成");
|
|
1591
|
+
finalNode = finalNode.add(bloomPass);
|
|
1592
|
+
break;
|
|
1593
|
+
}
|
|
1594
|
+
case PostProcessStepType.DepthOfField:
|
|
1595
|
+
{
|
|
1596
|
+
const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
|
|
1597
|
+
console.log("[PostProcess] DOFPass 构建完成");
|
|
1598
|
+
finalNode = finalNode.add(dofPass);
|
|
1599
|
+
break;
|
|
1600
|
+
}
|
|
1601
|
+
case PostProcessStepType.ScreenSpaceReflection:
|
|
1602
|
+
{
|
|
1603
|
+
const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, step);
|
|
1604
|
+
console.log("[PostProcess] SSRPass 构建完成");
|
|
1605
|
+
finalNode = blendColor(finalNode, ssrPass);
|
|
1606
|
+
break;
|
|
1607
|
+
}
|
|
1608
|
+
case PostProcessStepType.GroundTruthAmbientOcclusion:
|
|
1609
|
+
{
|
|
1610
|
+
const stepParam = step;
|
|
1611
|
+
const GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, stepParam);
|
|
1612
|
+
console.log("[PostProcess] GTAOPass 构建完成");
|
|
1613
|
+
if (stepParam.denoised) {
|
|
1614
|
+
const denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, GTAOPass, stepParam);
|
|
1615
|
+
console.log("[PostProcess] GTAODenoisePass 构建完成");
|
|
1616
|
+
finalNode = denoiseGTAOPass.mul(finalNode);
|
|
1617
|
+
}
|
|
1618
|
+
else {
|
|
1619
|
+
finalNode = GTAOPass.getTextureNode().mul(finalNode);
|
|
1620
|
+
}
|
|
1621
|
+
break;
|
|
1622
|
+
}
|
|
1623
|
+
case PostProcessStepType.Outline:
|
|
1624
|
+
{
|
|
1625
|
+
const outlineParam = step;
|
|
1626
|
+
const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, scenePass.camera, this.outlineObjects, outlineParam);
|
|
1627
|
+
const { visibleEdge, hiddenEdge } = outlinePass;
|
|
1628
|
+
const pulsePeriod = uniform(outlineParam.pulsePeriod);
|
|
1629
|
+
const period = time.div(pulsePeriod).mul(2);
|
|
1630
|
+
const osc = oscSine(period).mul(.5).add(.5);
|
|
1631
|
+
const outlineColor = visibleEdge.mul(uniform(new Color(outlineParam.visibleEdgeColor))).add(hiddenEdge.mul(uniform(new Color(outlineParam.hiddenEdgeColor)))).mul(outlineParam.edgeStrength);
|
|
1632
|
+
const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
|
|
1633
|
+
// if(!this.denoiseOutlinePass)
|
|
1634
|
+
// {
|
|
1635
|
+
// this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
|
|
1636
|
+
// }
|
|
1637
|
+
// outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
|
|
1638
|
+
// finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
|
|
1639
|
+
finalNode = outlinePulse.add(finalNode);
|
|
1640
|
+
console.log("[PostProcess] OutlinePass 构建完成");
|
|
1641
|
+
break;
|
|
1642
|
+
}
|
|
1643
|
+
case PostProcessStepType.Antialiasing:
|
|
1644
|
+
{
|
|
1645
|
+
const aaParam = step;
|
|
1646
|
+
if (aaParam.method === "fxaa") {
|
|
1647
|
+
finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
|
|
1648
|
+
console.log("[PostProcess] FXAAPass 构建完成");
|
|
1649
|
+
}
|
|
1650
|
+
if (aaParam.method === "smaa") {
|
|
1651
|
+
finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
|
|
1652
|
+
console.log("[PostProcess] SMAAPass 构建完成");
|
|
1653
|
+
}
|
|
1654
|
+
break;
|
|
1655
|
+
}
|
|
1778
1656
|
}
|
|
1779
|
-
}
|
|
1657
|
+
});
|
|
1780
1658
|
this.postProcessing.outputNode = finalNode;
|
|
1659
|
+
this.postProcessing.needsUpdate = true;
|
|
1660
|
+
console.log("[PostProcess] setup complete", this.postProcessParam.steps);
|
|
1781
1661
|
this.markRenderStateDirty();
|
|
1782
1662
|
}
|
|
1783
|
-
|
|
1784
|
-
this.postProcessParam.
|
|
1785
|
-
this.setupPostProcess();
|
|
1786
|
-
}
|
|
1787
|
-
updateGTAOParam(params) {
|
|
1788
|
-
this.postProcessParam.gtao = Object.assign({}, params);
|
|
1789
|
-
this.setupPostProcess();
|
|
1790
|
-
}
|
|
1791
|
-
updateDOFParam(params) {
|
|
1792
|
-
this.postProcessParam.dof = Object.assign({}, params);
|
|
1793
|
-
this.setupPostProcess();
|
|
1794
|
-
}
|
|
1795
|
-
updateSSRParam(params) {
|
|
1796
|
-
this.postProcessParam.ssr = Object.assign({}, params);
|
|
1797
|
-
this.setupPostProcess();
|
|
1798
|
-
}
|
|
1799
|
-
updateOutlineParam(params) {
|
|
1800
|
-
this.postProcessParam.outline = Object.assign({}, params);
|
|
1801
|
-
this.setupPostProcess();
|
|
1802
|
-
}
|
|
1803
|
-
updateAAParam(params) {
|
|
1804
|
-
this.postProcessParam.aa = Object.assign({}, params);
|
|
1663
|
+
updatePostProcess(steps) {
|
|
1664
|
+
this.postProcessParam.steps = steps;
|
|
1805
1665
|
this.setupPostProcess();
|
|
1806
1666
|
}
|
|
1667
|
+
// updateBloomPass(params: BloomParam)
|
|
1668
|
+
// {
|
|
1669
|
+
// this.postProcessParam.bloom = { ...params };
|
|
1670
|
+
// this.setupPostProcess();
|
|
1671
|
+
// }
|
|
1672
|
+
// updateGTAOParam(params: GTAOParam)
|
|
1673
|
+
// {
|
|
1674
|
+
// this.postProcessParam.gtao = { ...params };
|
|
1675
|
+
// this.setupPostProcess();
|
|
1676
|
+
// }
|
|
1677
|
+
// updateDOFParam(params: DOFParam)
|
|
1678
|
+
// {
|
|
1679
|
+
// this.postProcessParam.dof = { ...params };
|
|
1680
|
+
// this.setupPostProcess();
|
|
1681
|
+
// }
|
|
1682
|
+
// updateSSRParam(params: SSRParam)
|
|
1683
|
+
// {
|
|
1684
|
+
// this.postProcessParam.ssr = { ...params };
|
|
1685
|
+
// this.setupPostProcess();
|
|
1686
|
+
// }
|
|
1687
|
+
// updateOutlineParam(params: OutlineParams)
|
|
1688
|
+
// {
|
|
1689
|
+
// this.postProcessParam.outline = { ...params }
|
|
1690
|
+
// this.setupPostProcess();
|
|
1691
|
+
// }
|
|
1692
|
+
// updateAAParam(params: AAParams)
|
|
1693
|
+
// {
|
|
1694
|
+
// this.postProcessParam.aa = { ...params };
|
|
1695
|
+
// this.setupPostProcess();
|
|
1696
|
+
// }
|
|
1807
1697
|
addOutlineObject(obj) {
|
|
1808
1698
|
if (!this.outlineObjects.includes(obj)) {
|
|
1809
1699
|
this.outlineObjects.push(obj);
|
|
1810
1700
|
}
|
|
1811
|
-
|
|
1812
|
-
this.postProcessParam.outline = DefaultOutlineParams;
|
|
1813
|
-
this.setupPostProcess();
|
|
1814
|
-
}
|
|
1815
|
-
else {
|
|
1816
|
-
this.markRenderStateDirty();
|
|
1817
|
-
}
|
|
1701
|
+
this.markRenderStateDirty();
|
|
1818
1702
|
}
|
|
1819
1703
|
setOutlineObjects(objects) {
|
|
1820
1704
|
this.outlineObjects.length = 0;
|
|
1821
1705
|
this.outlineObjects.push(...objects);
|
|
1822
|
-
|
|
1823
|
-
this.postProcessParam.outline = DefaultOutlineParams;
|
|
1824
|
-
this.setupPostProcess();
|
|
1825
|
-
}
|
|
1826
|
-
else {
|
|
1827
|
-
this.markRenderStateDirty();
|
|
1828
|
-
}
|
|
1706
|
+
this.markRenderStateDirty();
|
|
1829
1707
|
}
|
|
1830
1708
|
removeOutlineObject(obj) {
|
|
1831
|
-
if (!this.postProcessParam.outline) {
|
|
1832
|
-
this.outlineObjects = [];
|
|
1833
|
-
return;
|
|
1834
|
-
}
|
|
1835
1709
|
const index = this.outlineObjects.indexOf(obj);
|
|
1836
1710
|
if (index > -1) {
|
|
1837
1711
|
this.outlineObjects.splice(index, 1);
|
|
@@ -1839,35 +1713,7 @@ class Viewport {
|
|
|
1839
1713
|
this.markRenderStateDirty();
|
|
1840
1714
|
}
|
|
1841
1715
|
destroyPostProcess() {
|
|
1842
|
-
if (this.bloomPass) {
|
|
1843
|
-
this.bloomPass.dispose();
|
|
1844
|
-
this.bloomPass = null;
|
|
1845
|
-
}
|
|
1846
|
-
if (this.dofPass) {
|
|
1847
|
-
this.dofPass.dispose();
|
|
1848
|
-
this.dofPass = null;
|
|
1849
|
-
}
|
|
1850
|
-
if (this.GTAOPass) {
|
|
1851
|
-
this.GTAOPass.dispose();
|
|
1852
|
-
this.GTAOPass = null;
|
|
1853
|
-
}
|
|
1854
|
-
if (this.denoiseGTAOPass) {
|
|
1855
|
-
this.denoiseGTAOPass.dispose();
|
|
1856
|
-
this.denoiseGTAOPass = null;
|
|
1857
|
-
}
|
|
1858
|
-
if (this.ssrPass) {
|
|
1859
|
-
this.ssrPass.dispose();
|
|
1860
|
-
this.ssrPass = null;
|
|
1861
|
-
}
|
|
1862
|
-
if (this.outlinePass) {
|
|
1863
|
-
this.outlinePass.dispose();
|
|
1864
|
-
this.outlinePass = null;
|
|
1865
|
-
}
|
|
1866
1716
|
this.outlineObjects = [];
|
|
1867
|
-
if (this.scenePass) {
|
|
1868
|
-
this.scenePass.dispose();
|
|
1869
|
-
this.scenePass = null;
|
|
1870
|
-
}
|
|
1871
1717
|
if (this.postProcessing) {
|
|
1872
1718
|
this.postProcessing.dispose();
|
|
1873
1719
|
this.postProcessing = null;
|
|
@@ -3208,6 +3054,59 @@ class LabelComponent extends SceneComponent {
|
|
|
3208
3054
|
// labelStyle.style.fontSize = "10px";
|
|
3209
3055
|
// labelStyle.style.pointerEvents = 'auto';
|
|
3210
3056
|
|
|
3057
|
+
const DefaultBloomParam = {
|
|
3058
|
+
type: PostProcessStepType.Bloom,
|
|
3059
|
+
threshold: 0,
|
|
3060
|
+
strength: 1,
|
|
3061
|
+
radius: 0,
|
|
3062
|
+
};
|
|
3063
|
+
|
|
3064
|
+
const DefaultDenoiseParam = {
|
|
3065
|
+
denoiseRadius: 5,
|
|
3066
|
+
lumaPhi: 5,
|
|
3067
|
+
depthPhi: 5,
|
|
3068
|
+
normalPhi: 5
|
|
3069
|
+
};
|
|
3070
|
+
const DefaultGTAOParam = {
|
|
3071
|
+
type: PostProcessStepType.GroundTruthAmbientOcclusion,
|
|
3072
|
+
distanceExponent: 1,
|
|
3073
|
+
distanceFallOff: 1,
|
|
3074
|
+
radius: 0.25,
|
|
3075
|
+
scale: 1,
|
|
3076
|
+
thickness: 1,
|
|
3077
|
+
denoised: true,
|
|
3078
|
+
denoiseParam: DefaultDenoiseParam,
|
|
3079
|
+
};
|
|
3080
|
+
|
|
3081
|
+
const DefaultDOFParam = {
|
|
3082
|
+
type: PostProcessStepType.DepthOfField,
|
|
3083
|
+
focus: 500.0,
|
|
3084
|
+
aperture: 5,
|
|
3085
|
+
maxblur: 0.01
|
|
3086
|
+
};
|
|
3087
|
+
|
|
3088
|
+
const DefaultOutlineParams = {
|
|
3089
|
+
type: PostProcessStepType.Outline,
|
|
3090
|
+
edgeStrength: 3.0,
|
|
3091
|
+
edgeGlow: 1.0,
|
|
3092
|
+
edgeThickness: 1.0,
|
|
3093
|
+
pulsePeriod: 0.0,
|
|
3094
|
+
visibleEdgeColor: 0xffffff,
|
|
3095
|
+
hiddenEdgeColor: 0xffffff,
|
|
3096
|
+
};
|
|
3097
|
+
|
|
3098
|
+
const DefaultSSRParam = {
|
|
3099
|
+
type: PostProcessStepType.ScreenSpaceReflection,
|
|
3100
|
+
maxDistance: 0.5,
|
|
3101
|
+
opacity: 1,
|
|
3102
|
+
thickness: 0.015,
|
|
3103
|
+
};
|
|
3104
|
+
|
|
3105
|
+
const DefaultAAParams = {
|
|
3106
|
+
type: PostProcessStepType.Antialiasing,
|
|
3107
|
+
method: "fxaa"
|
|
3108
|
+
};
|
|
3109
|
+
|
|
3211
3110
|
class FirstPerson extends Pawn {
|
|
3212
3111
|
constructor(controller) {
|
|
3213
3112
|
super(controller);
|
|
@@ -3413,4 +3312,4 @@ class TransformGizmo extends Pawn {
|
|
|
3413
3312
|
}
|
|
3414
3313
|
}
|
|
3415
3314
|
|
|
3416
|
-
export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
|
|
3315
|
+
export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, PostProcessStepType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
|
package/dist/index.d.ts
CHANGED
|
@@ -39,11 +39,13 @@ export type { SkyComponentParam } from "./lythreeframe/Object/Components/Sky/Sky
|
|
|
39
39
|
export { DefaultSkyParam } from "./lythreeframe/Object/Components/Sky/SkyComponent";
|
|
40
40
|
export { WebGPUPostProcessFactory } from "./lythreeframe/PostProcess/WebGPUPostProcessFactory";
|
|
41
41
|
export { DefaultPostProcessParam } from "./lythreeframe/PostProcess/PostProcessParam";
|
|
42
|
+
export { PostProcessStepType } from "./lythreeframe/PostProcess/PostProcessParam";
|
|
43
|
+
export type { PostProcessStepParam } from "./lythreeframe/PostProcess/PostProcessParam";
|
|
42
44
|
export type { PostProcessParam } from "./lythreeframe/PostProcess/PostProcessParam";
|
|
43
45
|
export { DefaultBloomParam } from "./lythreeframe/PostProcess/Param/Bloom";
|
|
44
46
|
export type { BloomParam } from "./lythreeframe/PostProcess/Param/Bloom";
|
|
45
|
-
export { DefaultDenoiseParam } from "./lythreeframe/PostProcess/Param/
|
|
46
|
-
export type { DenoiseParam } from "./lythreeframe/PostProcess/Param/
|
|
47
|
+
export { DefaultDenoiseParam } from "./lythreeframe/PostProcess/Param/GTAO";
|
|
48
|
+
export type { DenoiseParam } from "./lythreeframe/PostProcess/Param/GTAO";
|
|
47
49
|
export { DefaultDOFParam } from "./lythreeframe/PostProcess/Param/DOF";
|
|
48
50
|
export type { DOFParam } from "./lythreeframe/PostProcess/Param/DOF";
|
|
49
51
|
export { DefaultGTAOParam } from "./lythreeframe/PostProcess/Param/GTAO";
|
|
@@ -57,6 +59,6 @@ export type { AAParams } from "./lythreeframe/PostProcess/Param/AAParam";
|
|
|
57
59
|
export { Orbital } from "./lythreeframe/Object/PawnV2/Oribital";
|
|
58
60
|
export { FirstPerson } from "./lythreeframe/Object/PawnV2/FirstPerson";
|
|
59
61
|
export type { ITransforming } from "./lythreeframe/Object/PawnV2/TransformControl";
|
|
60
|
-
export { TransformType } from "./lythreeframe/Object/PawnV2/TransformControl";
|
|
62
|
+
export type { TransformType } from "./lythreeframe/Object/PawnV2/TransformControl";
|
|
61
63
|
export { TransformGizmo } from "./lythreeframe/Object/PawnV2/TransformControl";
|
|
62
64
|
export { ThreeObjectLibrary } from "./lythreeframe/Library/ResourceLibrary";
|