lythreeframe 1.2.22 → 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 -320
- package/dist/bundle.esm.js +206 -323
- 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.cjs.js
CHANGED
|
@@ -3,16 +3,14 @@
|
|
|
3
3
|
var webgpu = require('three/webgpu');
|
|
4
4
|
var Addons_js = require('three/examples/jsm/Addons.js');
|
|
5
5
|
var tsl = require('three/tsl');
|
|
6
|
+
var DepthOfFieldNode_js = require('three/addons/tsl/display/DepthOfFieldNode.js');
|
|
6
7
|
var BloomNode_js = require('three/examples/jsm/tsl/display/BloomNode.js');
|
|
7
8
|
var DenoiseNode_js = require('three/examples/jsm/tsl/display/DenoiseNode.js');
|
|
8
|
-
var
|
|
9
|
+
var FXAANode_js = require('three/examples/jsm/tsl/display/FXAANode.js');
|
|
9
10
|
var GTAONode_js = require('three/examples/jsm/tsl/display/GTAONode.js');
|
|
10
|
-
var SSRNode_js = require('three/examples/jsm/tsl/display/SSRNode.js');
|
|
11
|
-
var LensflareNode_js = require('three/examples/jsm/tsl/display/LensflareNode.js');
|
|
12
11
|
var OutlineNode_js = require('three/examples/jsm/tsl/display/OutlineNode.js');
|
|
13
|
-
var MotionBlur_js = require('three/examples/jsm/tsl/display/MotionBlur.js');
|
|
14
|
-
var FXAANode_js = require('three/examples/jsm/tsl/display/FXAANode.js');
|
|
15
12
|
var SMAANode_js = require('three/examples/jsm/tsl/display/SMAANode.js');
|
|
13
|
+
var SSRNode_js = require('three/examples/jsm/tsl/display/SSRNode.js');
|
|
16
14
|
var gsap = require('gsap');
|
|
17
15
|
var three = require('three');
|
|
18
16
|
var SkyMesh_js = require('three/examples/jsm/objects/SkyMesh.js');
|
|
@@ -1263,68 +1261,18 @@ class Delegate {
|
|
|
1263
1261
|
}
|
|
1264
1262
|
}
|
|
1265
1263
|
|
|
1266
|
-
const DefaultSSRParam = {
|
|
1267
|
-
isEnabled: false,
|
|
1268
|
-
maxDistance: 0.5,
|
|
1269
|
-
opacity: 1,
|
|
1270
|
-
thickness: 0.015,
|
|
1271
|
-
};
|
|
1272
|
-
|
|
1273
|
-
const DefaultDenoiseParam = {
|
|
1274
|
-
denoiseRadius: 5,
|
|
1275
|
-
lumaPhi: 5,
|
|
1276
|
-
depthPhi: 5,
|
|
1277
|
-
normalPhi: 5
|
|
1278
|
-
};
|
|
1279
|
-
|
|
1280
|
-
const DefaultGTAOParam = {
|
|
1281
|
-
isEnabled: false,
|
|
1282
|
-
distanceExponent: 1,
|
|
1283
|
-
distanceFallOff: 1,
|
|
1284
|
-
radius: 0.25,
|
|
1285
|
-
scale: 1,
|
|
1286
|
-
thickness: 1,
|
|
1287
|
-
denoised: true,
|
|
1288
|
-
denoiseParam: DefaultDenoiseParam,
|
|
1289
|
-
};
|
|
1290
|
-
|
|
1291
|
-
const DefaultBloomParam = {
|
|
1292
|
-
isEnabled: false,
|
|
1293
|
-
threshold: 0,
|
|
1294
|
-
strength: 1,
|
|
1295
|
-
radius: 0,
|
|
1296
|
-
};
|
|
1297
|
-
|
|
1298
|
-
const DefaultDOFParam = {
|
|
1299
|
-
isEnabled: false,
|
|
1300
|
-
focus: 500.0,
|
|
1301
|
-
aperture: 5,
|
|
1302
|
-
maxblur: 0.01
|
|
1303
|
-
};
|
|
1304
|
-
|
|
1305
|
-
const DefaultOutlineParams = {
|
|
1306
|
-
isEnabled: false,
|
|
1307
|
-
edgeStrength: 3.0,
|
|
1308
|
-
edgeGlow: 1.0,
|
|
1309
|
-
edgeThickness: 1.0,
|
|
1310
|
-
pulsePeriod: 0.0,
|
|
1311
|
-
visibleEdgeColor: 0xffffff,
|
|
1312
|
-
hiddenEdgeColor: 0xffffff,
|
|
1313
|
-
};
|
|
1314
|
-
|
|
1315
|
-
const DefaultAAParams = {
|
|
1316
|
-
isEnabled: false,
|
|
1317
|
-
type: "fxaa",
|
|
1318
|
-
};
|
|
1319
|
-
|
|
1320
1264
|
const DefaultPostProcessParam = {
|
|
1321
|
-
|
|
1322
|
-
dof: Object.assign({}, DefaultDOFParam),
|
|
1323
|
-
ssr: Object.assign({}, DefaultSSRParam),
|
|
1324
|
-
gtao: Object.assign({}, DefaultGTAOParam),
|
|
1325
|
-
outline: Object.assign({}, DefaultOutlineParams),
|
|
1326
|
-
aa: Object.assign({}, DefaultAAParams)
|
|
1265
|
+
steps: []
|
|
1327
1266
|
};
|
|
1267
|
+
exports.PostProcessStepType = void 0;
|
|
1268
|
+
(function (PostProcessStepType) {
|
|
1269
|
+
PostProcessStepType[PostProcessStepType["Bloom"] = 0] = "Bloom";
|
|
1270
|
+
PostProcessStepType[PostProcessStepType["DepthOfField"] = 1] = "DepthOfField";
|
|
1271
|
+
PostProcessStepType[PostProcessStepType["ScreenSpaceReflection"] = 2] = "ScreenSpaceReflection";
|
|
1272
|
+
PostProcessStepType[PostProcessStepType["GroundTruthAmbientOcclusion"] = 3] = "GroundTruthAmbientOcclusion";
|
|
1273
|
+
PostProcessStepType[PostProcessStepType["Outline"] = 4] = "Outline";
|
|
1274
|
+
PostProcessStepType[PostProcessStepType["Antialiasing"] = 5] = "Antialiasing";
|
|
1275
|
+
})(exports.PostProcessStepType || (exports.PostProcessStepType = {}));
|
|
1328
1276
|
|
|
1329
1277
|
class World {
|
|
1330
1278
|
get scene() {
|
|
@@ -1409,7 +1357,6 @@ class WebGPUPostProcessFactory {
|
|
|
1409
1357
|
else {
|
|
1410
1358
|
scenePass.setMRT(newMRT);
|
|
1411
1359
|
}
|
|
1412
|
-
console.log(scenePass.getMRT(), "MRTTTTTTT");
|
|
1413
1360
|
}
|
|
1414
1361
|
// bloom pass
|
|
1415
1362
|
static constructBloomPass(scenePass, params) {
|
|
@@ -1427,21 +1374,22 @@ class WebGPUPostProcessFactory {
|
|
|
1427
1374
|
static constructDOFPass(scenePass, params) {
|
|
1428
1375
|
const scenePassColor = scenePass.getTextureNode('output');
|
|
1429
1376
|
const scenePassViewZ = scenePass.getViewZNode();
|
|
1430
|
-
return DepthOfFieldNode_js.dof(scenePassColor, scenePassViewZ, tsl.uniform(params.focus), tsl.uniform(params.aperture)
|
|
1377
|
+
return DepthOfFieldNode_js.dof(scenePassColor, scenePassViewZ, tsl.uniform(params.focus), tsl.uniform(params.aperture), tsl.uniform(params.maxblur));
|
|
1431
1378
|
}
|
|
1432
1379
|
static updateDOFPass(dofPass, params) {
|
|
1433
1380
|
dofPass.focus.value = params.focus;
|
|
1434
|
-
dofPass.aperture.value = params.aperture
|
|
1381
|
+
dofPass.aperture.value = params.aperture;
|
|
1435
1382
|
dofPass.maxblur.value = params.maxblur;
|
|
1436
1383
|
}
|
|
1437
1384
|
// motion blur
|
|
1438
|
-
static constructMotionBlurPass(lastNode, scenePass
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1385
|
+
// static constructMotionBlurPass(lastNode:NodeRepresentation, scenePass: ShaderNodeObject<PassNode>, param:MotionBlurParam): ShaderNodeObject<Node>
|
|
1386
|
+
// {
|
|
1387
|
+
// WebGPUPostProcessFactory.updateScenePass(scenePass, {velocity})
|
|
1388
|
+
// const scenePassVelocity = scenePass.getTextureNode( 'velocity' ).mul( param.blurAmount );
|
|
1389
|
+
// const scenePassColor = scenePass.getTextureNode('output');
|
|
1390
|
+
// const motionBlurPass = motionBlur( scenePassColor, scenePassVelocity );
|
|
1391
|
+
// return motionBlurPass
|
|
1392
|
+
// }
|
|
1445
1393
|
// ssr
|
|
1446
1394
|
static constructSSRPass(scenePass, param) {
|
|
1447
1395
|
WebGPUPostProcessFactory.updateScenePass(scenePass, {
|
|
@@ -1503,19 +1451,21 @@ class WebGPUPostProcessFactory {
|
|
|
1503
1451
|
static updateGTAODenoisePass(denoisePass, params) {
|
|
1504
1452
|
WebGPUPostProcessFactory.updateDenoisePass(denoisePass, params.denoiseParam);
|
|
1505
1453
|
}
|
|
1506
|
-
static constructLensFlarePass(inputNode, params)
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1454
|
+
// static constructLensFlarePass(inputNode: NodeRepresentation, params: LensFlareParam): ShaderNodeObject<LensflareNode>
|
|
1455
|
+
// {
|
|
1456
|
+
// const lensflarePass = lensflare(inputNode, {
|
|
1457
|
+
// threshold : uniform(params.threshold),
|
|
1458
|
+
// ghostAttenuationFactor: uniform(params.ghostAttenuationFactor),
|
|
1459
|
+
// ghostSpacing : uniform(params.ghostSpacing),
|
|
1460
|
+
// });
|
|
1461
|
+
// return lensflarePass;
|
|
1462
|
+
// }
|
|
1463
|
+
// static updateLensFlarPass(lensflarePass: ShaderNodeObject<LensflareNode>, params: LensFlareParam)
|
|
1464
|
+
// {
|
|
1465
|
+
// lensflarePass.thresholdNode.value = params.threshold
|
|
1466
|
+
// lensflarePass.ghostSpacingNode.value = params.ghostSpacing
|
|
1467
|
+
// lensflarePass.ghostAttenuationFactorNode.value = params.ghostAttenuationFactor
|
|
1468
|
+
// }
|
|
1519
1469
|
static constructOutlinePass(scene, camera, outlineObjects, param) {
|
|
1520
1470
|
const outlinePass = OutlineNode_js.outline(scene, camera, {
|
|
1521
1471
|
selectedObjects: outlineObjects,
|
|
@@ -1563,17 +1513,6 @@ class Viewport {
|
|
|
1563
1513
|
this._canvas = null;
|
|
1564
1514
|
this.isRenderStateDirty = true;
|
|
1565
1515
|
this.postProcessing = null;
|
|
1566
|
-
this.scenePass = null;
|
|
1567
|
-
this.bloomPass = null;
|
|
1568
|
-
this.dofPass = null;
|
|
1569
|
-
this.GTAOPass = null;
|
|
1570
|
-
this.denoiseGTAOPass = null;
|
|
1571
|
-
this.ssrPass = null;
|
|
1572
|
-
this.outlinePass = null;
|
|
1573
|
-
this.fxaaPass = null;
|
|
1574
|
-
this.smaaPass = null;
|
|
1575
|
-
// private motionBlurPass: ShaderNodeObject<Node> | null = null;
|
|
1576
|
-
// private denoiseOutlinePass: ShaderNodeObject<DenoiseNode> | null = null;
|
|
1577
1516
|
this.outlineObjects = [];
|
|
1578
1517
|
this.postProcessParam = Object.assign({}, postProcessParam);
|
|
1579
1518
|
this._app = app;
|
|
@@ -1635,221 +1574,140 @@ class Viewport {
|
|
|
1635
1574
|
this.setupPostProcess();
|
|
1636
1575
|
}
|
|
1637
1576
|
setupPostProcess() {
|
|
1638
|
-
|
|
1639
|
-
const isBloomEnabled = this.postProcessParam.bloom.isEnabled;
|
|
1640
|
-
const isDOFEnabled = this.postProcessParam.dof.isEnabled;
|
|
1641
|
-
const isSSREnabled = this.postProcessParam.ssr.isEnabled;
|
|
1642
|
-
const isGTAOEnabled = this.postProcessParam.gtao.isEnabled;
|
|
1643
|
-
const isOutlineEnabled = this.postProcessParam.outline.isEnabled;
|
|
1644
|
-
const isAAEnabled = this.postProcessParam.aa.isEnabled;
|
|
1645
|
-
if (!(isBloomEnabled) && !(isDOFEnabled) && !(isSSREnabled) && !(isGTAOEnabled) && !(isOutlineEnabled) && !(isAAEnabled)) {
|
|
1577
|
+
if (this.postProcessParam.steps.length === 0) {
|
|
1646
1578
|
this.destroyPostProcess();
|
|
1647
|
-
|
|
1579
|
+
this.markRenderStateDirty();
|
|
1648
1580
|
return;
|
|
1649
1581
|
}
|
|
1650
1582
|
if (!this.postProcessing) {
|
|
1651
1583
|
this.postProcessing = new webgpu.PostProcessing(this.renderer);
|
|
1652
1584
|
}
|
|
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
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
else {
|
|
1727
|
-
WebGPUPostProcessFactory.updateGTAOPass(this.GTAOPass, this.postProcessParam.gtao);
|
|
1728
|
-
console.log("[PostProcess] GTAODenoisePass 更新完成");
|
|
1729
|
-
}
|
|
1730
|
-
finalNode = this.denoiseGTAOPass.mul(finalNode);
|
|
1731
|
-
}
|
|
1732
|
-
else {
|
|
1733
|
-
finalNode = this.GTAOPass.getTextureNode().mul(finalNode);
|
|
1734
|
-
if (this.denoiseGTAOPass) {
|
|
1735
|
-
this.denoiseGTAOPass.dispose();
|
|
1736
|
-
this.denoiseGTAOPass = null;
|
|
1737
|
-
console.log("[PostProcess] GTAODenoisePass 已销毁");
|
|
1738
|
-
}
|
|
1739
|
-
}
|
|
1740
|
-
}
|
|
1741
|
-
else {
|
|
1742
|
-
if (this.GTAOPass) {
|
|
1743
|
-
this.GTAOPass.dispose();
|
|
1744
|
-
this.GTAOPass = null;
|
|
1745
|
-
console.log("[PostProcess] GTAOPass 已销毁");
|
|
1746
|
-
}
|
|
1747
|
-
if (this.denoiseGTAOPass) {
|
|
1748
|
-
this.denoiseGTAOPass.dispose();
|
|
1749
|
-
this.denoiseGTAOPass = null;
|
|
1750
|
-
console.log("[PostProcess] GTAODenoisePass 已销毁");
|
|
1751
|
-
}
|
|
1752
|
-
}
|
|
1753
|
-
// outline
|
|
1754
|
-
if (isOutlineEnabled) {
|
|
1755
|
-
console.log("[PostProcess] Outline 启用,参数:", this.postProcessParam.outline);
|
|
1756
|
-
if (!this.outlinePass) {
|
|
1757
|
-
this.outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, this.scenePass.camera, this.outlineObjects, this.postProcessParam.outline);
|
|
1758
|
-
console.log("[PostProcess] OutlinePass 构建完成");
|
|
1759
|
-
}
|
|
1760
|
-
else {
|
|
1761
|
-
WebGPUPostProcessFactory.updateOutlinePass(this.outlinePass, this.outlineObjects, this.postProcessParam.outline);
|
|
1762
|
-
console.log("[PostProcess] OutlinePass 更新完成");
|
|
1763
|
-
}
|
|
1764
|
-
// ... existing code ...
|
|
1765
|
-
}
|
|
1766
|
-
else {
|
|
1767
|
-
if (this.outlinePass) {
|
|
1768
|
-
this.outlinePass.dispose();
|
|
1769
|
-
this.outlinePass = null;
|
|
1770
|
-
console.log("[PostProcess] OutlinePass 已销毁");
|
|
1771
|
-
}
|
|
1772
|
-
}
|
|
1773
|
-
if (isAAEnabled) {
|
|
1774
|
-
console.log("[PostProcess] AA 启用,类型:", this.postProcessParam.aa.type);
|
|
1775
|
-
if (this.postProcessParam.aa.type === "fxaa") {
|
|
1776
|
-
this.fxaaPass = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
|
|
1777
|
-
finalNode = this.fxaaPass;
|
|
1778
|
-
console.log("[PostProcess] FXAAPass 构建完成");
|
|
1779
|
-
}
|
|
1780
|
-
if (this.postProcessParam.aa.type === "smaa") {
|
|
1781
|
-
this.smaaPass = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
|
|
1782
|
-
finalNode = this.smaaPass;
|
|
1783
|
-
console.log("[PostProcess] SMAAPass 构建完成");
|
|
1784
|
-
}
|
|
1785
|
-
}
|
|
1786
|
-
else {
|
|
1787
|
-
if (this.fxaaPass) {
|
|
1788
|
-
this.fxaaPass.dispose();
|
|
1789
|
-
this.fxaaPass = null;
|
|
1790
|
-
console.log("[PostProcess] FXAAPass 已销毁");
|
|
1791
|
-
}
|
|
1792
|
-
if (this.smaaPass) {
|
|
1793
|
-
this.smaaPass.dispose();
|
|
1794
|
-
this.smaaPass = null;
|
|
1795
|
-
console.log("[PostProcess] SMAAPass 已销毁");
|
|
1585
|
+
const scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
|
|
1586
|
+
let finalNode = scenePass.getTextureNode('output');
|
|
1587
|
+
this.postProcessParam.steps.forEach((step) => {
|
|
1588
|
+
switch (step.type) {
|
|
1589
|
+
case exports.PostProcessStepType.Bloom:
|
|
1590
|
+
{
|
|
1591
|
+
const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
|
|
1592
|
+
console.log("[PostProcess] BloomPass 构建完成");
|
|
1593
|
+
finalNode = finalNode.add(bloomPass);
|
|
1594
|
+
break;
|
|
1595
|
+
}
|
|
1596
|
+
case exports.PostProcessStepType.DepthOfField:
|
|
1597
|
+
{
|
|
1598
|
+
const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
|
|
1599
|
+
console.log("[PostProcess] DOFPass 构建完成");
|
|
1600
|
+
finalNode = finalNode.add(dofPass);
|
|
1601
|
+
break;
|
|
1602
|
+
}
|
|
1603
|
+
case exports.PostProcessStepType.ScreenSpaceReflection:
|
|
1604
|
+
{
|
|
1605
|
+
const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, step);
|
|
1606
|
+
console.log("[PostProcess] SSRPass 构建完成");
|
|
1607
|
+
finalNode = tsl.blendColor(finalNode, ssrPass);
|
|
1608
|
+
break;
|
|
1609
|
+
}
|
|
1610
|
+
case exports.PostProcessStepType.GroundTruthAmbientOcclusion:
|
|
1611
|
+
{
|
|
1612
|
+
const stepParam = step;
|
|
1613
|
+
const GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, stepParam);
|
|
1614
|
+
console.log("[PostProcess] GTAOPass 构建完成");
|
|
1615
|
+
if (stepParam.denoised) {
|
|
1616
|
+
const denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, GTAOPass, stepParam);
|
|
1617
|
+
console.log("[PostProcess] GTAODenoisePass 构建完成");
|
|
1618
|
+
finalNode = denoiseGTAOPass.mul(finalNode);
|
|
1619
|
+
}
|
|
1620
|
+
else {
|
|
1621
|
+
finalNode = GTAOPass.getTextureNode().mul(finalNode);
|
|
1622
|
+
}
|
|
1623
|
+
break;
|
|
1624
|
+
}
|
|
1625
|
+
case exports.PostProcessStepType.Outline:
|
|
1626
|
+
{
|
|
1627
|
+
const outlineParam = step;
|
|
1628
|
+
const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, scenePass.camera, this.outlineObjects, outlineParam);
|
|
1629
|
+
const { visibleEdge, hiddenEdge } = outlinePass;
|
|
1630
|
+
const pulsePeriod = tsl.uniform(outlineParam.pulsePeriod);
|
|
1631
|
+
const period = tsl.time.div(pulsePeriod).mul(2);
|
|
1632
|
+
const osc = tsl.oscSine(period).mul(.5).add(.5);
|
|
1633
|
+
const outlineColor = visibleEdge.mul(tsl.uniform(new webgpu.Color(outlineParam.visibleEdgeColor))).add(hiddenEdge.mul(tsl.uniform(new webgpu.Color(outlineParam.hiddenEdgeColor)))).mul(outlineParam.edgeStrength);
|
|
1634
|
+
const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
|
|
1635
|
+
// if(!this.denoiseOutlinePass)
|
|
1636
|
+
// {
|
|
1637
|
+
// this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
|
|
1638
|
+
// }
|
|
1639
|
+
// outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
|
|
1640
|
+
// finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
|
|
1641
|
+
finalNode = outlinePulse.add(finalNode);
|
|
1642
|
+
console.log("[PostProcess] OutlinePass 构建完成");
|
|
1643
|
+
break;
|
|
1644
|
+
}
|
|
1645
|
+
case exports.PostProcessStepType.Antialiasing:
|
|
1646
|
+
{
|
|
1647
|
+
const aaParam = step;
|
|
1648
|
+
if (aaParam.method === "fxaa") {
|
|
1649
|
+
finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
|
|
1650
|
+
console.log("[PostProcess] FXAAPass 构建完成");
|
|
1651
|
+
}
|
|
1652
|
+
if (aaParam.method === "smaa") {
|
|
1653
|
+
finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
|
|
1654
|
+
console.log("[PostProcess] SMAAPass 构建完成");
|
|
1655
|
+
}
|
|
1656
|
+
break;
|
|
1657
|
+
}
|
|
1796
1658
|
}
|
|
1797
|
-
}
|
|
1659
|
+
});
|
|
1798
1660
|
this.postProcessing.outputNode = finalNode;
|
|
1661
|
+
this.postProcessing.needsUpdate = true;
|
|
1662
|
+
console.log("[PostProcess] setup complete", this.postProcessParam.steps);
|
|
1799
1663
|
this.markRenderStateDirty();
|
|
1800
1664
|
}
|
|
1801
|
-
|
|
1802
|
-
this.postProcessParam.
|
|
1803
|
-
this.setupPostProcess();
|
|
1804
|
-
}
|
|
1805
|
-
updateGTAOParam(params) {
|
|
1806
|
-
this.postProcessParam.gtao = Object.assign({}, params);
|
|
1807
|
-
this.setupPostProcess();
|
|
1808
|
-
}
|
|
1809
|
-
updateDOFParam(params) {
|
|
1810
|
-
this.postProcessParam.dof = Object.assign({}, params);
|
|
1811
|
-
this.setupPostProcess();
|
|
1812
|
-
}
|
|
1813
|
-
updateSSRParam(params) {
|
|
1814
|
-
this.postProcessParam.ssr = Object.assign({}, params);
|
|
1815
|
-
this.setupPostProcess();
|
|
1816
|
-
}
|
|
1817
|
-
updateOutlineParam(params) {
|
|
1818
|
-
this.postProcessParam.outline = Object.assign({}, params);
|
|
1819
|
-
this.setupPostProcess();
|
|
1820
|
-
}
|
|
1821
|
-
updateAAParam(params) {
|
|
1822
|
-
this.postProcessParam.aa = Object.assign({}, params);
|
|
1665
|
+
updatePostProcess(steps) {
|
|
1666
|
+
this.postProcessParam.steps = steps;
|
|
1823
1667
|
this.setupPostProcess();
|
|
1824
1668
|
}
|
|
1669
|
+
// updateBloomPass(params: BloomParam)
|
|
1670
|
+
// {
|
|
1671
|
+
// this.postProcessParam.bloom = { ...params };
|
|
1672
|
+
// this.setupPostProcess();
|
|
1673
|
+
// }
|
|
1674
|
+
// updateGTAOParam(params: GTAOParam)
|
|
1675
|
+
// {
|
|
1676
|
+
// this.postProcessParam.gtao = { ...params };
|
|
1677
|
+
// this.setupPostProcess();
|
|
1678
|
+
// }
|
|
1679
|
+
// updateDOFParam(params: DOFParam)
|
|
1680
|
+
// {
|
|
1681
|
+
// this.postProcessParam.dof = { ...params };
|
|
1682
|
+
// this.setupPostProcess();
|
|
1683
|
+
// }
|
|
1684
|
+
// updateSSRParam(params: SSRParam)
|
|
1685
|
+
// {
|
|
1686
|
+
// this.postProcessParam.ssr = { ...params };
|
|
1687
|
+
// this.setupPostProcess();
|
|
1688
|
+
// }
|
|
1689
|
+
// updateOutlineParam(params: OutlineParams)
|
|
1690
|
+
// {
|
|
1691
|
+
// this.postProcessParam.outline = { ...params }
|
|
1692
|
+
// this.setupPostProcess();
|
|
1693
|
+
// }
|
|
1694
|
+
// updateAAParam(params: AAParams)
|
|
1695
|
+
// {
|
|
1696
|
+
// this.postProcessParam.aa = { ...params };
|
|
1697
|
+
// this.setupPostProcess();
|
|
1698
|
+
// }
|
|
1825
1699
|
addOutlineObject(obj) {
|
|
1826
1700
|
if (!this.outlineObjects.includes(obj)) {
|
|
1827
1701
|
this.outlineObjects.push(obj);
|
|
1828
1702
|
}
|
|
1829
|
-
|
|
1830
|
-
this.postProcessParam.outline = DefaultOutlineParams;
|
|
1831
|
-
this.setupPostProcess();
|
|
1832
|
-
}
|
|
1833
|
-
else {
|
|
1834
|
-
this.markRenderStateDirty();
|
|
1835
|
-
}
|
|
1703
|
+
this.markRenderStateDirty();
|
|
1836
1704
|
}
|
|
1837
1705
|
setOutlineObjects(objects) {
|
|
1838
1706
|
this.outlineObjects.length = 0;
|
|
1839
1707
|
this.outlineObjects.push(...objects);
|
|
1840
|
-
|
|
1841
|
-
this.postProcessParam.outline = DefaultOutlineParams;
|
|
1842
|
-
this.setupPostProcess();
|
|
1843
|
-
}
|
|
1844
|
-
else {
|
|
1845
|
-
this.markRenderStateDirty();
|
|
1846
|
-
}
|
|
1708
|
+
this.markRenderStateDirty();
|
|
1847
1709
|
}
|
|
1848
1710
|
removeOutlineObject(obj) {
|
|
1849
|
-
if (!this.postProcessParam.outline) {
|
|
1850
|
-
this.outlineObjects = [];
|
|
1851
|
-
return;
|
|
1852
|
-
}
|
|
1853
1711
|
const index = this.outlineObjects.indexOf(obj);
|
|
1854
1712
|
if (index > -1) {
|
|
1855
1713
|
this.outlineObjects.splice(index, 1);
|
|
@@ -1857,35 +1715,7 @@ class Viewport {
|
|
|
1857
1715
|
this.markRenderStateDirty();
|
|
1858
1716
|
}
|
|
1859
1717
|
destroyPostProcess() {
|
|
1860
|
-
if (this.bloomPass) {
|
|
1861
|
-
this.bloomPass.dispose();
|
|
1862
|
-
this.bloomPass = null;
|
|
1863
|
-
}
|
|
1864
|
-
if (this.dofPass) {
|
|
1865
|
-
this.dofPass.dispose();
|
|
1866
|
-
this.dofPass = null;
|
|
1867
|
-
}
|
|
1868
|
-
if (this.GTAOPass) {
|
|
1869
|
-
this.GTAOPass.dispose();
|
|
1870
|
-
this.GTAOPass = null;
|
|
1871
|
-
}
|
|
1872
|
-
if (this.denoiseGTAOPass) {
|
|
1873
|
-
this.denoiseGTAOPass.dispose();
|
|
1874
|
-
this.denoiseGTAOPass = null;
|
|
1875
|
-
}
|
|
1876
|
-
if (this.ssrPass) {
|
|
1877
|
-
this.ssrPass.dispose();
|
|
1878
|
-
this.ssrPass = null;
|
|
1879
|
-
}
|
|
1880
|
-
if (this.outlinePass) {
|
|
1881
|
-
this.outlinePass.dispose();
|
|
1882
|
-
this.outlinePass = null;
|
|
1883
|
-
}
|
|
1884
1718
|
this.outlineObjects = [];
|
|
1885
|
-
if (this.scenePass) {
|
|
1886
|
-
this.scenePass.dispose();
|
|
1887
|
-
this.scenePass = null;
|
|
1888
|
-
}
|
|
1889
1719
|
if (this.postProcessing) {
|
|
1890
1720
|
this.postProcessing.dispose();
|
|
1891
1721
|
this.postProcessing = null;
|
|
@@ -3226,6 +3056,59 @@ class LabelComponent extends SceneComponent {
|
|
|
3226
3056
|
// labelStyle.style.fontSize = "10px";
|
|
3227
3057
|
// labelStyle.style.pointerEvents = 'auto';
|
|
3228
3058
|
|
|
3059
|
+
const DefaultBloomParam = {
|
|
3060
|
+
type: exports.PostProcessStepType.Bloom,
|
|
3061
|
+
threshold: 0,
|
|
3062
|
+
strength: 1,
|
|
3063
|
+
radius: 0,
|
|
3064
|
+
};
|
|
3065
|
+
|
|
3066
|
+
const DefaultDenoiseParam = {
|
|
3067
|
+
denoiseRadius: 5,
|
|
3068
|
+
lumaPhi: 5,
|
|
3069
|
+
depthPhi: 5,
|
|
3070
|
+
normalPhi: 5
|
|
3071
|
+
};
|
|
3072
|
+
const DefaultGTAOParam = {
|
|
3073
|
+
type: exports.PostProcessStepType.GroundTruthAmbientOcclusion,
|
|
3074
|
+
distanceExponent: 1,
|
|
3075
|
+
distanceFallOff: 1,
|
|
3076
|
+
radius: 0.25,
|
|
3077
|
+
scale: 1,
|
|
3078
|
+
thickness: 1,
|
|
3079
|
+
denoised: true,
|
|
3080
|
+
denoiseParam: DefaultDenoiseParam,
|
|
3081
|
+
};
|
|
3082
|
+
|
|
3083
|
+
const DefaultDOFParam = {
|
|
3084
|
+
type: exports.PostProcessStepType.DepthOfField,
|
|
3085
|
+
focus: 500.0,
|
|
3086
|
+
aperture: 5,
|
|
3087
|
+
maxblur: 0.01
|
|
3088
|
+
};
|
|
3089
|
+
|
|
3090
|
+
const DefaultOutlineParams = {
|
|
3091
|
+
type: exports.PostProcessStepType.Outline,
|
|
3092
|
+
edgeStrength: 3.0,
|
|
3093
|
+
edgeGlow: 1.0,
|
|
3094
|
+
edgeThickness: 1.0,
|
|
3095
|
+
pulsePeriod: 0.0,
|
|
3096
|
+
visibleEdgeColor: 0xffffff,
|
|
3097
|
+
hiddenEdgeColor: 0xffffff,
|
|
3098
|
+
};
|
|
3099
|
+
|
|
3100
|
+
const DefaultSSRParam = {
|
|
3101
|
+
type: exports.PostProcessStepType.ScreenSpaceReflection,
|
|
3102
|
+
maxDistance: 0.5,
|
|
3103
|
+
opacity: 1,
|
|
3104
|
+
thickness: 0.015,
|
|
3105
|
+
};
|
|
3106
|
+
|
|
3107
|
+
const DefaultAAParams = {
|
|
3108
|
+
type: exports.PostProcessStepType.Antialiasing,
|
|
3109
|
+
method: "fxaa"
|
|
3110
|
+
};
|
|
3111
|
+
|
|
3229
3112
|
class FirstPerson extends Pawn {
|
|
3230
3113
|
constructor(controller) {
|
|
3231
3114
|
super(controller);
|