lythreeframe 1.2.48 → 1.2.49
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 +51 -105
- package/dist/bundle.esm.js +52 -107
- package/dist/index.d.ts +1 -0
- package/dist/lythreeframe/Frame/Controller.d.ts +1 -0
- package/dist/lythreeframe/Frame/Parameters/AppParameter.d.ts +2 -0
- package/dist/lythreeframe/Frame/Parameters/ControllerParameters.d.ts +2 -0
- package/dist/lythreeframe/Frame/Parameters/ViewportParameters.d.ts +1 -0
- package/dist/lythreeframe/Frame/Viewport.d.ts +6 -2
- package/dist/lythreeframe/Object/Components/Light/AmbientLight/AmbientLightComponent.d.ts +1 -1
- package/package.json +1 -1
package/dist/bundle.cjs.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
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 three = require('three');
|
|
6
7
|
var DepthOfFieldNode_js = require('three/addons/tsl/display/DepthOfFieldNode.js');
|
|
7
8
|
var BloomNode_js = require('three/examples/jsm/tsl/display/BloomNode.js');
|
|
8
9
|
var DenoiseNode_js = require('three/examples/jsm/tsl/display/DenoiseNode.js');
|
|
@@ -11,7 +12,6 @@ var GTAONode_js = require('three/examples/jsm/tsl/display/GTAONode.js');
|
|
|
11
12
|
var OutlineNode_js = require('three/examples/jsm/tsl/display/OutlineNode.js');
|
|
12
13
|
var SMAANode_js = require('three/examples/jsm/tsl/display/SMAANode.js');
|
|
13
14
|
var gsap = require('gsap');
|
|
14
|
-
var three = require('three');
|
|
15
15
|
var SkyMesh_js = require('three/examples/jsm/objects/SkyMesh.js');
|
|
16
16
|
var CSS2DRenderer_js = require('three/examples/jsm/renderers/CSS2DRenderer.js');
|
|
17
17
|
var PointerLockControls_js = require('three/examples/jsm/controls/PointerLockControls.js');
|
|
@@ -1521,7 +1521,12 @@ class Viewport {
|
|
|
1521
1521
|
}
|
|
1522
1522
|
get renderer() {
|
|
1523
1523
|
if (!this._renderer) {
|
|
1524
|
-
|
|
1524
|
+
if (this._webGLRenderer) {
|
|
1525
|
+
return this._webGLRenderer;
|
|
1526
|
+
}
|
|
1527
|
+
else {
|
|
1528
|
+
throw Error("Renderer is not initialized");
|
|
1529
|
+
}
|
|
1525
1530
|
}
|
|
1526
1531
|
return this._renderer;
|
|
1527
1532
|
}
|
|
@@ -1534,6 +1539,7 @@ class Viewport {
|
|
|
1534
1539
|
constructor(app, viewportParam, rendererParam, postProcessParam) {
|
|
1535
1540
|
this._uiDom = null;
|
|
1536
1541
|
this._renderer = null;
|
|
1542
|
+
this._webGLRenderer = null;
|
|
1537
1543
|
this.labelRenderer = null;
|
|
1538
1544
|
this._app = null;
|
|
1539
1545
|
this.resizeObserver = null;
|
|
@@ -1547,6 +1553,7 @@ class Viewport {
|
|
|
1547
1553
|
if (viewportParam.elementId) {
|
|
1548
1554
|
this._outerContainer = document.getElementById(viewportParam.elementId);
|
|
1549
1555
|
}
|
|
1556
|
+
this.viewportParam = Object.assign({}, viewportParam);
|
|
1550
1557
|
this.createRenderer(rendererParam);
|
|
1551
1558
|
if (viewportParam.isLabelRendererNeeded) {
|
|
1552
1559
|
this.createLabelRenderer();
|
|
@@ -1595,15 +1602,29 @@ class Viewport {
|
|
|
1595
1602
|
renderP.logarithmicDepthBuffer = rendererParam.logarithmicDepthBuffer;
|
|
1596
1603
|
renderP.samples = rendererParam.samples;
|
|
1597
1604
|
renderP.colorBufferType = rendererParam.colorBufferType;
|
|
1598
|
-
this.
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
element
|
|
1605
|
+
if (this.viewportParam.usingWebGLRenderer) {
|
|
1606
|
+
this._webGLRenderer = new three.WebGLRenderer();
|
|
1607
|
+
this._webGLRenderer.setPixelRatio(window.devicePixelRatio);
|
|
1608
|
+
this._webGLRenderer.setSize(width, height);
|
|
1609
|
+
this._webGLRenderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
|
|
1610
|
+
this._webGLRenderer.shadowMap.type = rendererParam.shadowMapType ? rendererParam.shadowMapType : three.PCFSoftShadowMap;
|
|
1611
|
+
this._webGLRenderer.toneMapping = rendererParam.toneMapping;
|
|
1612
|
+
this._webGLRenderer.toneMappingExposure = rendererParam.toneMappingExposure;
|
|
1613
|
+
if (element) {
|
|
1614
|
+
element.appendChild(this._webGLRenderer.domElement);
|
|
1615
|
+
}
|
|
1616
|
+
}
|
|
1617
|
+
else {
|
|
1618
|
+
this._renderer = new webgpu.WebGPURenderer(renderP);
|
|
1619
|
+
this._renderer.setPixelRatio(window.devicePixelRatio);
|
|
1620
|
+
this._renderer.setSize(width, height);
|
|
1621
|
+
this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
|
|
1622
|
+
this._renderer.shadowMap.type = rendererParam.shadowMapType;
|
|
1623
|
+
this._renderer.toneMapping = rendererParam.toneMapping;
|
|
1624
|
+
this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
|
|
1625
|
+
if (element) {
|
|
1626
|
+
element.appendChild(this._renderer.domElement);
|
|
1627
|
+
}
|
|
1607
1628
|
}
|
|
1608
1629
|
}
|
|
1609
1630
|
createLabelRenderer() {
|
|
@@ -1650,97 +1671,7 @@ class Viewport {
|
|
|
1650
1671
|
this.setupPostProcess();
|
|
1651
1672
|
}
|
|
1652
1673
|
setupPostProcess() {
|
|
1653
|
-
|
|
1654
|
-
this.destroyPostProcess();
|
|
1655
|
-
this.markRenderStateDirty();
|
|
1656
|
-
return;
|
|
1657
|
-
}
|
|
1658
|
-
if (!this.postProcessing) {
|
|
1659
|
-
this.postProcessing = new webgpu.PostProcessing(this.renderer);
|
|
1660
|
-
}
|
|
1661
|
-
const scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
|
|
1662
|
-
let finalNode = scenePass.getTextureNode('output');
|
|
1663
|
-
this.postProcessParam.steps.forEach((step) => {
|
|
1664
|
-
switch (step.type) {
|
|
1665
|
-
case exports.PostProcessStepType.Bloom:
|
|
1666
|
-
{
|
|
1667
|
-
const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
|
|
1668
|
-
//console.log("[PostProcess] BloomPass 构建完成");
|
|
1669
|
-
finalNode = finalNode.add(bloomPass);
|
|
1670
|
-
break;
|
|
1671
|
-
}
|
|
1672
|
-
case exports.PostProcessStepType.DepthOfField:
|
|
1673
|
-
{
|
|
1674
|
-
const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
|
|
1675
|
-
//console.log("[PostProcess] DOFPass 构建完成");
|
|
1676
|
-
finalNode = finalNode.add(dofPass);
|
|
1677
|
-
break;
|
|
1678
|
-
}
|
|
1679
|
-
case exports.PostProcessStepType.ScreenSpaceReflection:
|
|
1680
|
-
{
|
|
1681
|
-
console.warn("[PostProcess] SSR 目前存在技术问题,暂不支持。");
|
|
1682
|
-
// const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, step as SSRParam);
|
|
1683
|
-
// console.log("[PostProcess] SSRPass 构建完成");
|
|
1684
|
-
//finalNode = blendColor(finalNode, ssrPass);
|
|
1685
|
-
break;
|
|
1686
|
-
}
|
|
1687
|
-
case exports.PostProcessStepType.GroundTruthAmbientOcclusion:
|
|
1688
|
-
{
|
|
1689
|
-
console.warn("[PostProcess] AO 目前存在技术问题,暂不支持。");
|
|
1690
|
-
// const stepParam = step as GTAOParam
|
|
1691
|
-
// const GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, stepParam);
|
|
1692
|
-
// console.log("[PostProcess] GTAOPass 构建完成");
|
|
1693
|
-
// if (stepParam.denoised)
|
|
1694
|
-
// {
|
|
1695
|
-
// const denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, GTAOPass, stepParam);
|
|
1696
|
-
// console.log("[PostProcess] GTAODenoisePass 构建完成");
|
|
1697
|
-
// finalNode = denoiseGTAOPass.mul(finalNode);
|
|
1698
|
-
// }
|
|
1699
|
-
// else
|
|
1700
|
-
// {
|
|
1701
|
-
// finalNode = GTAOPass.getTextureNode().mul(finalNode);
|
|
1702
|
-
// }
|
|
1703
|
-
break;
|
|
1704
|
-
}
|
|
1705
|
-
case exports.PostProcessStepType.Outline:
|
|
1706
|
-
{
|
|
1707
|
-
const outlineParam = step;
|
|
1708
|
-
const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, scenePass.camera, this.outlineObjects, outlineParam);
|
|
1709
|
-
const { visibleEdge, hiddenEdge } = outlinePass;
|
|
1710
|
-
const pulsePeriod = tsl.uniform(outlineParam.pulsePeriod);
|
|
1711
|
-
const period = tsl.time.div(pulsePeriod).mul(2);
|
|
1712
|
-
const osc = tsl.oscSine(period).mul(.5).add(.5);
|
|
1713
|
-
const outlineColor = visibleEdge.mul(tsl.uniform(new webgpu.Color(outlineParam.visibleEdgeColor))).add(hiddenEdge.mul(tsl.uniform(new webgpu.Color(outlineParam.hiddenEdgeColor)))).mul(outlineParam.edgeStrength);
|
|
1714
|
-
const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
|
|
1715
|
-
// if(!this.denoiseOutlinePass)
|
|
1716
|
-
// {
|
|
1717
|
-
// this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
|
|
1718
|
-
// }
|
|
1719
|
-
// outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
|
|
1720
|
-
// finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
|
|
1721
|
-
finalNode = outlinePulse.add(finalNode);
|
|
1722
|
-
//console.log("[PostProcess] OutlinePass 构建完成");
|
|
1723
|
-
break;
|
|
1724
|
-
}
|
|
1725
|
-
case exports.PostProcessStepType.Antialiasing:
|
|
1726
|
-
{
|
|
1727
|
-
const aaParam = step;
|
|
1728
|
-
if (aaParam.method === "fxaa") {
|
|
1729
|
-
finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
|
|
1730
|
-
//console.log("[PostProcess] FXAAPass 构建完成");
|
|
1731
|
-
}
|
|
1732
|
-
if (aaParam.method === "smaa") {
|
|
1733
|
-
finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
|
|
1734
|
-
//console.log("[PostProcess] SMAAPass 构建完成");
|
|
1735
|
-
}
|
|
1736
|
-
break;
|
|
1737
|
-
}
|
|
1738
|
-
}
|
|
1739
|
-
});
|
|
1740
|
-
this.postProcessing.outputNode = finalNode;
|
|
1741
|
-
this.postProcessing.needsUpdate = true;
|
|
1742
|
-
//console.log("[PostProcess] setup complete", this.postProcessParam.steps);
|
|
1743
|
-
this.markRenderStateDirty();
|
|
1674
|
+
return;
|
|
1744
1675
|
}
|
|
1745
1676
|
updatePostProcess(steps) {
|
|
1746
1677
|
this.postProcessParam.steps = steps;
|
|
@@ -1842,7 +1773,13 @@ class Viewport {
|
|
|
1842
1773
|
await this.postProcessing.renderAsync();
|
|
1843
1774
|
}
|
|
1844
1775
|
else {
|
|
1845
|
-
|
|
1776
|
+
if (this._renderer) {
|
|
1777
|
+
await this._renderer.renderAsync(this.app.world.scene, this.app.camera);
|
|
1778
|
+
}
|
|
1779
|
+
else if (this._webGLRenderer) {
|
|
1780
|
+
console.log("render with gl");
|
|
1781
|
+
this._webGLRenderer.render(this.app.world.scene, this.app.camera);
|
|
1782
|
+
}
|
|
1846
1783
|
}
|
|
1847
1784
|
// 检查 renderer.domElement 的尺寸
|
|
1848
1785
|
const sourceWidth = this.renderer.domElement.width;
|
|
@@ -2295,6 +2232,14 @@ class Controller {
|
|
|
2295
2232
|
focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
|
|
2296
2233
|
this.pawn.focusTo(targetPos, targetQuat, distance, time, onGoing, onFinished);
|
|
2297
2234
|
}
|
|
2235
|
+
setPawn(pawn) {
|
|
2236
|
+
if (this._pawn) {
|
|
2237
|
+
this._pawn.unpossess();
|
|
2238
|
+
this._pawn.destroy();
|
|
2239
|
+
}
|
|
2240
|
+
this._pawn = pawn;
|
|
2241
|
+
this._pawn.possess();
|
|
2242
|
+
}
|
|
2298
2243
|
}
|
|
2299
2244
|
|
|
2300
2245
|
class CameraFactory {
|
|
@@ -3137,7 +3082,7 @@ class AmbientLightComponent extends LightComponent {
|
|
|
3137
3082
|
this.threeObject.intensity = intensity;
|
|
3138
3083
|
}
|
|
3139
3084
|
createDefaultObject() {
|
|
3140
|
-
return new
|
|
3085
|
+
return new three.AmbientLight(0xffffff, 10);
|
|
3141
3086
|
}
|
|
3142
3087
|
setPosition(...args) {
|
|
3143
3088
|
if (args.length === 1) {
|
|
@@ -3181,7 +3126,7 @@ class AmbientLightActor extends Actor {
|
|
|
3181
3126
|
}
|
|
3182
3127
|
|
|
3183
3128
|
class BoxComponent extends MeshComponent {
|
|
3184
|
-
constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new webgpu.MeshStandardMaterial(), uuid) {
|
|
3129
|
+
constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new webgpu.MeshStandardMaterial({ color: 0x00ff00 }), uuid) {
|
|
3185
3130
|
super(app, new webgpu.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material, uuid);
|
|
3186
3131
|
}
|
|
3187
3132
|
}
|
|
@@ -3636,6 +3581,7 @@ exports.LevelComponent = LevelComponent;
|
|
|
3636
3581
|
exports.MaterialAssetPointer = MaterialAssetPointer;
|
|
3637
3582
|
exports.MeshComponent = MeshComponent;
|
|
3638
3583
|
exports.Orbital = Orbital;
|
|
3584
|
+
exports.Pawn = Pawn;
|
|
3639
3585
|
exports.PlaneActor = PlaneActor;
|
|
3640
3586
|
exports.PlaneComponent = PlaneComponent;
|
|
3641
3587
|
exports.SceneComponent = SceneComponent;
|
package/dist/bundle.esm.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer,
|
|
1
|
+
import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer, Vector2, Raycaster, OrthographicCamera, PerspectiveCamera, 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, metalness, transformedNormalView
|
|
3
|
+
import { pass, mrt, output, uniform, metalness, transformedNormalView } from 'three/tsl';
|
|
4
|
+
import { WebGLRenderer, PCFSoftShadowMap, Scene, AmbientLight } from 'three';
|
|
4
5
|
import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';
|
|
5
6
|
import { bloom } from 'three/examples/jsm/tsl/display/BloomNode.js';
|
|
6
7
|
import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js';
|
|
@@ -9,7 +10,6 @@ import { ao } from 'three/examples/jsm/tsl/display/GTAONode.js';
|
|
|
9
10
|
import { outline } from 'three/examples/jsm/tsl/display/OutlineNode.js';
|
|
10
11
|
import { smaa } from 'three/examples/jsm/tsl/display/SMAANode.js';
|
|
11
12
|
import { gsap } from 'gsap';
|
|
12
|
-
import { Scene } from 'three';
|
|
13
13
|
import { SkyMesh } from 'three/examples/jsm/objects/SkyMesh.js';
|
|
14
14
|
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
|
|
15
15
|
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
|
|
@@ -1519,7 +1519,12 @@ class Viewport {
|
|
|
1519
1519
|
}
|
|
1520
1520
|
get renderer() {
|
|
1521
1521
|
if (!this._renderer) {
|
|
1522
|
-
|
|
1522
|
+
if (this._webGLRenderer) {
|
|
1523
|
+
return this._webGLRenderer;
|
|
1524
|
+
}
|
|
1525
|
+
else {
|
|
1526
|
+
throw Error("Renderer is not initialized");
|
|
1527
|
+
}
|
|
1523
1528
|
}
|
|
1524
1529
|
return this._renderer;
|
|
1525
1530
|
}
|
|
@@ -1532,6 +1537,7 @@ class Viewport {
|
|
|
1532
1537
|
constructor(app, viewportParam, rendererParam, postProcessParam) {
|
|
1533
1538
|
this._uiDom = null;
|
|
1534
1539
|
this._renderer = null;
|
|
1540
|
+
this._webGLRenderer = null;
|
|
1535
1541
|
this.labelRenderer = null;
|
|
1536
1542
|
this._app = null;
|
|
1537
1543
|
this.resizeObserver = null;
|
|
@@ -1545,6 +1551,7 @@ class Viewport {
|
|
|
1545
1551
|
if (viewportParam.elementId) {
|
|
1546
1552
|
this._outerContainer = document.getElementById(viewportParam.elementId);
|
|
1547
1553
|
}
|
|
1554
|
+
this.viewportParam = Object.assign({}, viewportParam);
|
|
1548
1555
|
this.createRenderer(rendererParam);
|
|
1549
1556
|
if (viewportParam.isLabelRendererNeeded) {
|
|
1550
1557
|
this.createLabelRenderer();
|
|
@@ -1593,15 +1600,29 @@ class Viewport {
|
|
|
1593
1600
|
renderP.logarithmicDepthBuffer = rendererParam.logarithmicDepthBuffer;
|
|
1594
1601
|
renderP.samples = rendererParam.samples;
|
|
1595
1602
|
renderP.colorBufferType = rendererParam.colorBufferType;
|
|
1596
|
-
this.
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
element
|
|
1603
|
+
if (this.viewportParam.usingWebGLRenderer) {
|
|
1604
|
+
this._webGLRenderer = new WebGLRenderer();
|
|
1605
|
+
this._webGLRenderer.setPixelRatio(window.devicePixelRatio);
|
|
1606
|
+
this._webGLRenderer.setSize(width, height);
|
|
1607
|
+
this._webGLRenderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
|
|
1608
|
+
this._webGLRenderer.shadowMap.type = rendererParam.shadowMapType ? rendererParam.shadowMapType : PCFSoftShadowMap;
|
|
1609
|
+
this._webGLRenderer.toneMapping = rendererParam.toneMapping;
|
|
1610
|
+
this._webGLRenderer.toneMappingExposure = rendererParam.toneMappingExposure;
|
|
1611
|
+
if (element) {
|
|
1612
|
+
element.appendChild(this._webGLRenderer.domElement);
|
|
1613
|
+
}
|
|
1614
|
+
}
|
|
1615
|
+
else {
|
|
1616
|
+
this._renderer = new WebGPURenderer(renderP);
|
|
1617
|
+
this._renderer.setPixelRatio(window.devicePixelRatio);
|
|
1618
|
+
this._renderer.setSize(width, height);
|
|
1619
|
+
this._renderer.shadowMap.enabled = rendererParam.shadowMapEnabled;
|
|
1620
|
+
this._renderer.shadowMap.type = rendererParam.shadowMapType;
|
|
1621
|
+
this._renderer.toneMapping = rendererParam.toneMapping;
|
|
1622
|
+
this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
|
|
1623
|
+
if (element) {
|
|
1624
|
+
element.appendChild(this._renderer.domElement);
|
|
1625
|
+
}
|
|
1605
1626
|
}
|
|
1606
1627
|
}
|
|
1607
1628
|
createLabelRenderer() {
|
|
@@ -1648,97 +1669,7 @@ class Viewport {
|
|
|
1648
1669
|
this.setupPostProcess();
|
|
1649
1670
|
}
|
|
1650
1671
|
setupPostProcess() {
|
|
1651
|
-
|
|
1652
|
-
this.destroyPostProcess();
|
|
1653
|
-
this.markRenderStateDirty();
|
|
1654
|
-
return;
|
|
1655
|
-
}
|
|
1656
|
-
if (!this.postProcessing) {
|
|
1657
|
-
this.postProcessing = new PostProcessing(this.renderer);
|
|
1658
|
-
}
|
|
1659
|
-
const scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
|
|
1660
|
-
let finalNode = scenePass.getTextureNode('output');
|
|
1661
|
-
this.postProcessParam.steps.forEach((step) => {
|
|
1662
|
-
switch (step.type) {
|
|
1663
|
-
case PostProcessStepType.Bloom:
|
|
1664
|
-
{
|
|
1665
|
-
const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
|
|
1666
|
-
//console.log("[PostProcess] BloomPass 构建完成");
|
|
1667
|
-
finalNode = finalNode.add(bloomPass);
|
|
1668
|
-
break;
|
|
1669
|
-
}
|
|
1670
|
-
case PostProcessStepType.DepthOfField:
|
|
1671
|
-
{
|
|
1672
|
-
const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
|
|
1673
|
-
//console.log("[PostProcess] DOFPass 构建完成");
|
|
1674
|
-
finalNode = finalNode.add(dofPass);
|
|
1675
|
-
break;
|
|
1676
|
-
}
|
|
1677
|
-
case PostProcessStepType.ScreenSpaceReflection:
|
|
1678
|
-
{
|
|
1679
|
-
console.warn("[PostProcess] SSR 目前存在技术问题,暂不支持。");
|
|
1680
|
-
// const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, step as SSRParam);
|
|
1681
|
-
// console.log("[PostProcess] SSRPass 构建完成");
|
|
1682
|
-
//finalNode = blendColor(finalNode, ssrPass);
|
|
1683
|
-
break;
|
|
1684
|
-
}
|
|
1685
|
-
case PostProcessStepType.GroundTruthAmbientOcclusion:
|
|
1686
|
-
{
|
|
1687
|
-
console.warn("[PostProcess] AO 目前存在技术问题,暂不支持。");
|
|
1688
|
-
// const stepParam = step as GTAOParam
|
|
1689
|
-
// const GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, stepParam);
|
|
1690
|
-
// console.log("[PostProcess] GTAOPass 构建完成");
|
|
1691
|
-
// if (stepParam.denoised)
|
|
1692
|
-
// {
|
|
1693
|
-
// const denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, GTAOPass, stepParam);
|
|
1694
|
-
// console.log("[PostProcess] GTAODenoisePass 构建完成");
|
|
1695
|
-
// finalNode = denoiseGTAOPass.mul(finalNode);
|
|
1696
|
-
// }
|
|
1697
|
-
// else
|
|
1698
|
-
// {
|
|
1699
|
-
// finalNode = GTAOPass.getTextureNode().mul(finalNode);
|
|
1700
|
-
// }
|
|
1701
|
-
break;
|
|
1702
|
-
}
|
|
1703
|
-
case PostProcessStepType.Outline:
|
|
1704
|
-
{
|
|
1705
|
-
const outlineParam = step;
|
|
1706
|
-
const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, scenePass.camera, this.outlineObjects, outlineParam);
|
|
1707
|
-
const { visibleEdge, hiddenEdge } = outlinePass;
|
|
1708
|
-
const pulsePeriod = uniform(outlineParam.pulsePeriod);
|
|
1709
|
-
const period = time.div(pulsePeriod).mul(2);
|
|
1710
|
-
const osc = oscSine(period).mul(.5).add(.5);
|
|
1711
|
-
const outlineColor = visibleEdge.mul(uniform(new Color(outlineParam.visibleEdgeColor))).add(hiddenEdge.mul(uniform(new Color(outlineParam.hiddenEdgeColor)))).mul(outlineParam.edgeStrength);
|
|
1712
|
-
const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
|
|
1713
|
-
// if(!this.denoiseOutlinePass)
|
|
1714
|
-
// {
|
|
1715
|
-
// this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
|
|
1716
|
-
// }
|
|
1717
|
-
// outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
|
|
1718
|
-
// finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
|
|
1719
|
-
finalNode = outlinePulse.add(finalNode);
|
|
1720
|
-
//console.log("[PostProcess] OutlinePass 构建完成");
|
|
1721
|
-
break;
|
|
1722
|
-
}
|
|
1723
|
-
case PostProcessStepType.Antialiasing:
|
|
1724
|
-
{
|
|
1725
|
-
const aaParam = step;
|
|
1726
|
-
if (aaParam.method === "fxaa") {
|
|
1727
|
-
finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
|
|
1728
|
-
//console.log("[PostProcess] FXAAPass 构建完成");
|
|
1729
|
-
}
|
|
1730
|
-
if (aaParam.method === "smaa") {
|
|
1731
|
-
finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
|
|
1732
|
-
//console.log("[PostProcess] SMAAPass 构建完成");
|
|
1733
|
-
}
|
|
1734
|
-
break;
|
|
1735
|
-
}
|
|
1736
|
-
}
|
|
1737
|
-
});
|
|
1738
|
-
this.postProcessing.outputNode = finalNode;
|
|
1739
|
-
this.postProcessing.needsUpdate = true;
|
|
1740
|
-
//console.log("[PostProcess] setup complete", this.postProcessParam.steps);
|
|
1741
|
-
this.markRenderStateDirty();
|
|
1672
|
+
return;
|
|
1742
1673
|
}
|
|
1743
1674
|
updatePostProcess(steps) {
|
|
1744
1675
|
this.postProcessParam.steps = steps;
|
|
@@ -1840,7 +1771,13 @@ class Viewport {
|
|
|
1840
1771
|
await this.postProcessing.renderAsync();
|
|
1841
1772
|
}
|
|
1842
1773
|
else {
|
|
1843
|
-
|
|
1774
|
+
if (this._renderer) {
|
|
1775
|
+
await this._renderer.renderAsync(this.app.world.scene, this.app.camera);
|
|
1776
|
+
}
|
|
1777
|
+
else if (this._webGLRenderer) {
|
|
1778
|
+
console.log("render with gl");
|
|
1779
|
+
this._webGLRenderer.render(this.app.world.scene, this.app.camera);
|
|
1780
|
+
}
|
|
1844
1781
|
}
|
|
1845
1782
|
// 检查 renderer.domElement 的尺寸
|
|
1846
1783
|
const sourceWidth = this.renderer.domElement.width;
|
|
@@ -2293,6 +2230,14 @@ class Controller {
|
|
|
2293
2230
|
focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
|
|
2294
2231
|
this.pawn.focusTo(targetPos, targetQuat, distance, time, onGoing, onFinished);
|
|
2295
2232
|
}
|
|
2233
|
+
setPawn(pawn) {
|
|
2234
|
+
if (this._pawn) {
|
|
2235
|
+
this._pawn.unpossess();
|
|
2236
|
+
this._pawn.destroy();
|
|
2237
|
+
}
|
|
2238
|
+
this._pawn = pawn;
|
|
2239
|
+
this._pawn.possess();
|
|
2240
|
+
}
|
|
2296
2241
|
}
|
|
2297
2242
|
|
|
2298
2243
|
class CameraFactory {
|
|
@@ -3179,7 +3124,7 @@ class AmbientLightActor extends Actor {
|
|
|
3179
3124
|
}
|
|
3180
3125
|
|
|
3181
3126
|
class BoxComponent extends MeshComponent {
|
|
3182
|
-
constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshStandardMaterial(), uuid) {
|
|
3127
|
+
constructor(app, width = 1, height = 1, depth = 1, widthSegments = 1, heightSegments = 1, depthSegments = 1, material = new MeshStandardMaterial({ color: 0x00ff00 }), uuid) {
|
|
3183
3128
|
super(app, new BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments), material, uuid);
|
|
3184
3129
|
}
|
|
3185
3130
|
}
|
|
@@ -3600,4 +3545,4 @@ class TransformGizmo extends Pawn {
|
|
|
3600
3545
|
}
|
|
3601
3546
|
}
|
|
3602
3547
|
|
|
3603
|
-
export { Actor, AmbientLightActor, AmbientLightComponent, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOrthographicCameraParam, DefaultOutlineParams, DefaultPerspectiveCameraParam, 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 };
|
|
3548
|
+
export { Actor, AmbientLightActor, AmbientLightComponent, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOrthographicCameraParam, DefaultOutlineParams, DefaultPerspectiveCameraParam, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, Pawn, PlaneActor, PlaneComponent, PostProcessStepType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
|
package/dist/index.d.ts
CHANGED
|
@@ -58,6 +58,7 @@ export { DefaultSSRParam } from "./lythreeframe/PostProcess/Param/SSR";
|
|
|
58
58
|
export type { SSRParam } from "./lythreeframe/PostProcess/Param/SSR";
|
|
59
59
|
export { DefaultAAParams } from "./lythreeframe/PostProcess/Param/AAParam";
|
|
60
60
|
export type { AAParams } from "./lythreeframe/PostProcess/Param/AAParam";
|
|
61
|
+
export { Pawn } from "./lythreeframe/Object/PawnV2/Pawn";
|
|
61
62
|
export { Orbital } from "./lythreeframe/Object/PawnV2/Oribital";
|
|
62
63
|
export { FirstPerson } from "./lythreeframe/Object/PawnV2/FirstPerson";
|
|
63
64
|
export type { ITransforming } from "./lythreeframe/Object/PawnV2/TransformControl";
|
|
@@ -40,4 +40,5 @@ export declare class Controller {
|
|
|
40
40
|
getHitResultUnderCursor(): Intersection | null;
|
|
41
41
|
getHitResultFromScreenPoint(x: number, y: number): Intersection | null;
|
|
42
42
|
focusTo(targetPos: Vector3, targetQuat: Quaternion | Euler, distance: number, time: number, onGoing?: (() => void) | null, onFinished?: (() => void) | null): void;
|
|
43
|
+
setPawn(pawn: Pawn): void;
|
|
43
44
|
}
|
|
@@ -7,6 +7,7 @@ import { ViewportParam } from "./ViewportParameters";
|
|
|
7
7
|
import { AssetManager } from "../../AssetManagement/AssetManager";
|
|
8
8
|
import { PostProcessParam } from "../../PostProcess/PostProcessParam";
|
|
9
9
|
import { RendererParameters } from "./RendererParameters";
|
|
10
|
+
import { ControllerParameters } from "./ControllerParameters";
|
|
10
11
|
export interface AppClass {
|
|
11
12
|
assetManagerClass: typeof AssetManager;
|
|
12
13
|
controllerClass: typeof Controller;
|
|
@@ -19,6 +20,7 @@ export interface AppParam {
|
|
|
19
20
|
postProcessParam?: PostProcessParam;
|
|
20
21
|
worldParam?: WorldParam;
|
|
21
22
|
viewportParam: ViewportParam;
|
|
23
|
+
controllerParam?: ControllerParameters;
|
|
22
24
|
classes?: AppClass;
|
|
23
25
|
isRenderEveryFrame?: boolean;
|
|
24
26
|
}
|
|
@@ -1,16 +1,19 @@
|
|
|
1
|
-
import { ShadowMapType, ToneMapping
|
|
1
|
+
import { Object3D, ShadowMapType, ToneMapping } from "three";
|
|
2
|
+
import { WebGPURenderer } from "three/webgpu";
|
|
2
3
|
import { ThreeJsApp } from "../ThreeJsApp";
|
|
3
4
|
import { PostProcessParam, PostProcessStepParam } from './../PostProcess/PostProcessParam';
|
|
4
5
|
import { RendererParameters } from './Parameters/RendererParameters';
|
|
5
6
|
import { ViewportParam } from './Parameters/ViewportParameters';
|
|
7
|
+
import { WebGLRenderer } from "three";
|
|
6
8
|
export declare class Viewport {
|
|
7
9
|
get uiDom(): HTMLDivElement | null;
|
|
8
10
|
protected _uiDom: HTMLDivElement | null;
|
|
9
11
|
get canvas(): HTMLElement | null;
|
|
10
12
|
get outer(): HTMLElement | null;
|
|
11
|
-
get renderer(): WebGPURenderer;
|
|
13
|
+
get renderer(): WebGPURenderer | WebGLRenderer;
|
|
12
14
|
get app(): ThreeJsApp;
|
|
13
15
|
private _renderer;
|
|
16
|
+
private _webGLRenderer;
|
|
14
17
|
private labelRenderer;
|
|
15
18
|
protected _app: ThreeJsApp | null;
|
|
16
19
|
private resizeObserver;
|
|
@@ -19,6 +22,7 @@ export declare class Viewport {
|
|
|
19
22
|
private isRenderStateDirty;
|
|
20
23
|
private postProcessParam;
|
|
21
24
|
private postProcessing;
|
|
25
|
+
private viewportParam;
|
|
22
26
|
private outlineObjects;
|
|
23
27
|
constructor(app: ThreeJsApp, viewportParam: ViewportParam, rendererParam: RendererParameters, postProcessParam: PostProcessParam);
|
|
24
28
|
protected createRenderer(rendererParam: RendererParameters): void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LightComponent } from "../LightComponent";
|
|
2
|
-
import { ColorRepresentation, AmbientLight, Vector3 } from "three
|
|
2
|
+
import { ColorRepresentation, AmbientLight, Vector3 } from "three";
|
|
3
3
|
import { World } from "../../../../Frame/World";
|
|
4
4
|
import { ThreeJsApp } from "../../../../ThreeJsApp";
|
|
5
5
|
export declare class AmbientLightComponent extends LightComponent {
|