@poggi/three-effects 0.0.1-alpha.0 → 0.0.1-alpha.1
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/index.js +158 -5
- package/package.json +2 -2
- package/BasePass.js +0 -54
- package/BloomPass.js +0 -69
- package/OutlinePass.js +0 -48
package/index.js
CHANGED
|
@@ -1,15 +1,168 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
+
var __publicField = (obj, key, value) => {
|
|
4
|
+
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
+
return value;
|
|
6
|
+
};
|
|
7
|
+
import { Vector2, WebGLRenderTarget, SRGBColorSpace, UnsignedByteType, RGBAFormat } from "three";
|
|
8
|
+
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
|
|
9
|
+
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
|
|
10
|
+
import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
|
|
11
|
+
import { Vector2 as Vector2$1, MeshBasicMaterial, Layers, ShaderMaterial, Mesh } from "@poggi/three-core";
|
|
12
|
+
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
|
|
13
|
+
import { OutlinePass as OutlinePass2 } from "three/examples/jsm/postprocessing/OutlinePass.js";
|
|
14
|
+
import { Console } from "@poggi/utils";
|
|
15
|
+
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
|
|
16
|
+
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
|
|
4
17
|
import { SMAAPass } from "three/examples/jsm/postprocessing/SMAAPass.js";
|
|
5
18
|
import { FXAAPass } from "three/examples/jsm/postprocessing/FXAAPass.js";
|
|
6
19
|
import { SSAARenderPass } from "three/examples/jsm/postprocessing/SSAARenderPass.js";
|
|
7
20
|
export * from "three/examples/jsm/postprocessing/SSRPass.js";
|
|
8
|
-
|
|
21
|
+
class BasePass {
|
|
22
|
+
//渲染后逻辑
|
|
23
|
+
constructor(container, garden, msaa) {
|
|
24
|
+
__publicField(this, "container");
|
|
25
|
+
__publicField(this, "composer");
|
|
26
|
+
__publicField(this, "renderPass");
|
|
27
|
+
__publicField(this, "renderBeforeFunc");
|
|
28
|
+
//渲染前逻辑
|
|
29
|
+
__publicField(this, "renderAfterFunc");
|
|
30
|
+
this.container = container;
|
|
31
|
+
const size = container.renderer.getDrawingBufferSize(new Vector2());
|
|
32
|
+
if (msaa) {
|
|
33
|
+
const renderTarget = new WebGLRenderTarget(size.width, size.height, {
|
|
34
|
+
samples: 4,
|
|
35
|
+
format: RGBAFormat,
|
|
36
|
+
type: UnsignedByteType,
|
|
37
|
+
colorSpace: SRGBColorSpace
|
|
38
|
+
});
|
|
39
|
+
this.composer = new EffectComposer(container.renderer, renderTarget);
|
|
40
|
+
this.composer.setSize(this.container.sizes.width, this.container.sizes.height);
|
|
41
|
+
} else {
|
|
42
|
+
this.composer = new EffectComposer(this.container.renderer);
|
|
43
|
+
this.composer.setSize(this.container.sizes.width, this.container.sizes.height);
|
|
44
|
+
}
|
|
45
|
+
const renderPass = new RenderPass(garden, this.container.camera);
|
|
46
|
+
this.composer.addPass(renderPass);
|
|
47
|
+
this.renderPass = renderPass;
|
|
48
|
+
}
|
|
49
|
+
// 色彩修正
|
|
50
|
+
colorCorrection() {
|
|
51
|
+
const outputpass = new OutputPass();
|
|
52
|
+
this.composer.addPass(outputpass);
|
|
53
|
+
}
|
|
54
|
+
render(delta) {
|
|
55
|
+
if (this.renderBeforeFunc)
|
|
56
|
+
this.renderBeforeFunc();
|
|
57
|
+
this.composer.render(delta);
|
|
58
|
+
if (this.renderAfterFunc)
|
|
59
|
+
this.renderAfterFunc();
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
const createOutlinePass = function(container, garden, parameter = {}) {
|
|
63
|
+
if (!container.camera) {
|
|
64
|
+
Console.error("[@poggi/three-effects]: OutlinePass: 还未挂载摄像机");
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
let resolution, outlinePass;
|
|
68
|
+
resolution = new Vector2$1(container.sizes.width, container.sizes.height);
|
|
69
|
+
outlinePass = new OutlinePass(resolution, garden, container.camera);
|
|
70
|
+
outlinePass.edgeStrength = parameter.edgeStrength || 10;
|
|
71
|
+
if (parameter.edgeGlow)
|
|
72
|
+
outlinePass.edgeGlow = parameter.edgeGlow;
|
|
73
|
+
outlinePass.edgeThickness = parameter.edgeThickness || 4;
|
|
74
|
+
if (parameter.pulsePeriod)
|
|
75
|
+
outlinePass.pulsePeriod = parameter.pulsePeriod;
|
|
76
|
+
outlinePass.visibleEdgeColor.setHex(parameter.visibleEdgeColor || 65280);
|
|
77
|
+
outlinePass.hiddenEdgeColor.setHex(parameter.hiddenEdgeColor || 16701184);
|
|
78
|
+
return outlinePass;
|
|
79
|
+
};
|
|
80
|
+
const addObjectsToOutlineSingle = function(outlinePass, obj) {
|
|
81
|
+
const idx = outlinePass.selectedObjects.findIndex((item) => item.uuid === obj.uuid);
|
|
82
|
+
if (idx !== -1) {
|
|
83
|
+
outlinePass.selectedObjects.splice(idx);
|
|
84
|
+
}
|
|
85
|
+
outlinePass.selectedObjects.push(obj);
|
|
86
|
+
};
|
|
87
|
+
const addObjectsToOutline = function(outlinePass, objs) {
|
|
88
|
+
if (Array.isArray(objs)) {
|
|
89
|
+
objs.forEach((item) => {
|
|
90
|
+
addObjectsToOutlineSingle(outlinePass, item);
|
|
91
|
+
});
|
|
92
|
+
} else {
|
|
93
|
+
addObjectsToOutlineSingle(outlinePass, objs);
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
const removeFromOutline = function(outlinePass, obj) {
|
|
97
|
+
const idx = outlinePass.selectedObjects.findIndex((item) => item.uuid === obj.uuid);
|
|
98
|
+
idx !== -1 && outlinePass.selectedObjects.splice(idx, 1);
|
|
99
|
+
};
|
|
100
|
+
const darkMaterial = new MeshBasicMaterial({ color: "black" });
|
|
101
|
+
const createBloomPass = function(container, garden, basePass, parameter) {
|
|
102
|
+
const bloomLayer = new Layers();
|
|
103
|
+
bloomLayer.set((parameter == null ? void 0 : parameter.layer) || 1);
|
|
104
|
+
const bloomPass = new UnrealBloomPass(
|
|
105
|
+
new Vector2$1(container.sizes.width, container.sizes.height),
|
|
106
|
+
(parameter == null ? void 0 : parameter.strength) || 1,
|
|
107
|
+
(parameter == null ? void 0 : parameter.radius) || 0.4,
|
|
108
|
+
(parameter == null ? void 0 : parameter.threshold) || 0
|
|
109
|
+
);
|
|
110
|
+
const bloomComposer = new EffectComposer(container.renderer);
|
|
111
|
+
bloomComposer.renderToScreen = false;
|
|
112
|
+
bloomComposer.addPass(basePass.renderPass);
|
|
113
|
+
bloomComposer.addPass(bloomPass);
|
|
114
|
+
const mixPass = new ShaderPass(
|
|
115
|
+
new ShaderMaterial({
|
|
116
|
+
uniforms: {
|
|
117
|
+
baseTexture: { value: null },
|
|
118
|
+
bloomTexture: { value: bloomComposer.renderTarget2.texture }
|
|
119
|
+
},
|
|
120
|
+
vertexShader: `
|
|
121
|
+
varying vec2 vUv;
|
|
122
|
+
void main() {
|
|
123
|
+
vUv = uv;
|
|
124
|
+
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
125
|
+
}
|
|
126
|
+
`,
|
|
127
|
+
fragmentShader: `
|
|
128
|
+
uniform sampler2D baseTexture;
|
|
129
|
+
uniform sampler2D bloomTexture;
|
|
130
|
+
varying vec2 vUv;
|
|
131
|
+
void main() {
|
|
132
|
+
gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
|
|
133
|
+
}
|
|
134
|
+
`,
|
|
135
|
+
defines: {}
|
|
136
|
+
}),
|
|
137
|
+
"baseTexture"
|
|
138
|
+
);
|
|
139
|
+
mixPass.needsSwap = true;
|
|
140
|
+
basePass.composer.addPass(mixPass);
|
|
141
|
+
const materials = {};
|
|
142
|
+
const bloomRender = function() {
|
|
143
|
+
garden.traverse((child) => {
|
|
144
|
+
if (child instanceof Mesh && bloomLayer.test(child.layers) === false) {
|
|
145
|
+
materials[child.uuid] = child.material;
|
|
146
|
+
child.material = darkMaterial;
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
bloomComposer.render();
|
|
150
|
+
garden.traverse((child) => {
|
|
151
|
+
if (child instanceof Mesh && materials[child.uuid]) {
|
|
152
|
+
child.material = materials[child.uuid];
|
|
153
|
+
delete materials[child.uuid];
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
};
|
|
157
|
+
return {
|
|
158
|
+
bloomRender,
|
|
159
|
+
mixPass
|
|
160
|
+
};
|
|
161
|
+
};
|
|
9
162
|
export {
|
|
10
163
|
BasePass,
|
|
11
164
|
FXAAPass,
|
|
12
|
-
OutlinePass,
|
|
165
|
+
OutlinePass2 as OutlinePass,
|
|
13
166
|
SMAAPass,
|
|
14
167
|
SSAARenderPass,
|
|
15
168
|
addObjectsToOutline,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@poggi/three-effects",
|
|
3
|
-
"version": "0.0.1-alpha.
|
|
3
|
+
"version": "0.0.1-alpha.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"description": "三维后期特效",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"three": "^0.185.1"
|
|
13
13
|
},
|
|
14
14
|
"peerDependencies": {
|
|
15
|
-
"@poggi/three-core": "0.0.1-alpha.
|
|
15
|
+
"@poggi/three-core": "0.0.1-alpha.2"
|
|
16
16
|
},
|
|
17
17
|
"publishConfig": {
|
|
18
18
|
"registry": "https://registry.npmjs.org/"
|
package/BasePass.js
DELETED
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
3
|
-
var __publicField = (obj, key, value) => {
|
|
4
|
-
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
5
|
-
return value;
|
|
6
|
-
};
|
|
7
|
-
import { Vector2, WebGLRenderTarget, SRGBColorSpace, UnsignedByteType, RGBAFormat } from "three";
|
|
8
|
-
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
|
|
9
|
-
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
|
|
10
|
-
import { OutputPass } from "three/examples/jsm/postprocessing/OutputPass.js";
|
|
11
|
-
class BasePass {
|
|
12
|
-
//渲染后逻辑
|
|
13
|
-
constructor(container, garden, msaa) {
|
|
14
|
-
__publicField(this, "container");
|
|
15
|
-
__publicField(this, "composer");
|
|
16
|
-
__publicField(this, "renderPass");
|
|
17
|
-
__publicField(this, "renderBeforeFunc");
|
|
18
|
-
//渲染前逻辑
|
|
19
|
-
__publicField(this, "renderAfterFunc");
|
|
20
|
-
this.container = container;
|
|
21
|
-
const size = container.renderer.getDrawingBufferSize(new Vector2());
|
|
22
|
-
if (msaa) {
|
|
23
|
-
const renderTarget = new WebGLRenderTarget(size.width, size.height, {
|
|
24
|
-
samples: 4,
|
|
25
|
-
format: RGBAFormat,
|
|
26
|
-
type: UnsignedByteType,
|
|
27
|
-
colorSpace: SRGBColorSpace
|
|
28
|
-
});
|
|
29
|
-
this.composer = new EffectComposer(container.renderer, renderTarget);
|
|
30
|
-
this.composer.setSize(this.container.sizes.width, this.container.sizes.height);
|
|
31
|
-
} else {
|
|
32
|
-
this.composer = new EffectComposer(this.container.renderer);
|
|
33
|
-
this.composer.setSize(this.container.sizes.width, this.container.sizes.height);
|
|
34
|
-
}
|
|
35
|
-
const renderPass = new RenderPass(garden, this.container.camera);
|
|
36
|
-
this.composer.addPass(renderPass);
|
|
37
|
-
this.renderPass = renderPass;
|
|
38
|
-
}
|
|
39
|
-
// 色彩修正
|
|
40
|
-
colorCorrection() {
|
|
41
|
-
const outputpass = new OutputPass();
|
|
42
|
-
this.composer.addPass(outputpass);
|
|
43
|
-
}
|
|
44
|
-
render(delta) {
|
|
45
|
-
if (this.renderBeforeFunc)
|
|
46
|
-
this.renderBeforeFunc();
|
|
47
|
-
this.composer.render(delta);
|
|
48
|
-
if (this.renderAfterFunc)
|
|
49
|
-
this.renderAfterFunc();
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
export {
|
|
53
|
-
BasePass
|
|
54
|
-
};
|
package/BloomPass.js
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { MeshBasicMaterial, Layers, Vector2, ShaderMaterial, Mesh } from "@poggi/three-core";
|
|
2
|
-
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
|
|
3
|
-
import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass.js";
|
|
4
|
-
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
|
|
5
|
-
const darkMaterial = new MeshBasicMaterial({ color: "black" });
|
|
6
|
-
const createBloomPass = function(container, garden, basePass, parameter) {
|
|
7
|
-
const bloomLayer = new Layers();
|
|
8
|
-
bloomLayer.set((parameter == null ? void 0 : parameter.layer) || 1);
|
|
9
|
-
const bloomPass = new UnrealBloomPass(
|
|
10
|
-
new Vector2(container.sizes.width, container.sizes.height),
|
|
11
|
-
(parameter == null ? void 0 : parameter.strength) || 1,
|
|
12
|
-
(parameter == null ? void 0 : parameter.radius) || 0.4,
|
|
13
|
-
(parameter == null ? void 0 : parameter.threshold) || 0
|
|
14
|
-
);
|
|
15
|
-
const bloomComposer = new EffectComposer(container.renderer);
|
|
16
|
-
bloomComposer.renderToScreen = false;
|
|
17
|
-
bloomComposer.addPass(basePass.renderPass);
|
|
18
|
-
bloomComposer.addPass(bloomPass);
|
|
19
|
-
const mixPass = new ShaderPass(
|
|
20
|
-
new ShaderMaterial({
|
|
21
|
-
uniforms: {
|
|
22
|
-
baseTexture: { value: null },
|
|
23
|
-
bloomTexture: { value: bloomComposer.renderTarget2.texture }
|
|
24
|
-
},
|
|
25
|
-
vertexShader: `
|
|
26
|
-
varying vec2 vUv;
|
|
27
|
-
void main() {
|
|
28
|
-
vUv = uv;
|
|
29
|
-
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
30
|
-
}
|
|
31
|
-
`,
|
|
32
|
-
fragmentShader: `
|
|
33
|
-
uniform sampler2D baseTexture;
|
|
34
|
-
uniform sampler2D bloomTexture;
|
|
35
|
-
varying vec2 vUv;
|
|
36
|
-
void main() {
|
|
37
|
-
gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
|
|
38
|
-
}
|
|
39
|
-
`,
|
|
40
|
-
defines: {}
|
|
41
|
-
}),
|
|
42
|
-
"baseTexture"
|
|
43
|
-
);
|
|
44
|
-
mixPass.needsSwap = true;
|
|
45
|
-
basePass.composer.addPass(mixPass);
|
|
46
|
-
const materials = {};
|
|
47
|
-
const bloomRender = function() {
|
|
48
|
-
garden.traverse((child) => {
|
|
49
|
-
if (child instanceof Mesh && bloomLayer.test(child.layers) === false) {
|
|
50
|
-
materials[child.uuid] = child.material;
|
|
51
|
-
child.material = darkMaterial;
|
|
52
|
-
}
|
|
53
|
-
});
|
|
54
|
-
bloomComposer.render();
|
|
55
|
-
garden.traverse((child) => {
|
|
56
|
-
if (child instanceof Mesh && materials[child.uuid]) {
|
|
57
|
-
child.material = materials[child.uuid];
|
|
58
|
-
delete materials[child.uuid];
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
};
|
|
62
|
-
return {
|
|
63
|
-
bloomRender,
|
|
64
|
-
mixPass
|
|
65
|
-
};
|
|
66
|
-
};
|
|
67
|
-
export {
|
|
68
|
-
createBloomPass
|
|
69
|
-
};
|
package/OutlinePass.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { Vector2 } from "@poggi/three-core";
|
|
2
|
-
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
|
|
3
|
-
import { OutlinePass as OutlinePass2 } from "three/examples/jsm/postprocessing/OutlinePass.js";
|
|
4
|
-
import { Console } from "@poggi/utils";
|
|
5
|
-
const createOutlinePass = function(container, garden, parameter = {}) {
|
|
6
|
-
if (!container.camera) {
|
|
7
|
-
Console.error("[@poggi/three-effects]: OutlinePass: 还未挂载摄像机");
|
|
8
|
-
return;
|
|
9
|
-
}
|
|
10
|
-
let resolution, outlinePass;
|
|
11
|
-
resolution = new Vector2(container.sizes.width, container.sizes.height);
|
|
12
|
-
outlinePass = new OutlinePass(resolution, garden, container.camera);
|
|
13
|
-
outlinePass.edgeStrength = parameter.edgeStrength || 10;
|
|
14
|
-
if (parameter.edgeGlow)
|
|
15
|
-
outlinePass.edgeGlow = parameter.edgeGlow;
|
|
16
|
-
outlinePass.edgeThickness = parameter.edgeThickness || 4;
|
|
17
|
-
if (parameter.pulsePeriod)
|
|
18
|
-
outlinePass.pulsePeriod = parameter.pulsePeriod;
|
|
19
|
-
outlinePass.visibleEdgeColor.setHex(parameter.visibleEdgeColor || 65280);
|
|
20
|
-
outlinePass.hiddenEdgeColor.setHex(parameter.hiddenEdgeColor || 16701184);
|
|
21
|
-
return outlinePass;
|
|
22
|
-
};
|
|
23
|
-
const addObjectsToOutlineSingle = function(outlinePass, obj) {
|
|
24
|
-
const idx = outlinePass.selectedObjects.findIndex((item) => item.uuid === obj.uuid);
|
|
25
|
-
if (idx !== -1) {
|
|
26
|
-
outlinePass.selectedObjects.splice(idx);
|
|
27
|
-
}
|
|
28
|
-
outlinePass.selectedObjects.push(obj);
|
|
29
|
-
};
|
|
30
|
-
const addObjectsToOutline = function(outlinePass, objs) {
|
|
31
|
-
if (Array.isArray(objs)) {
|
|
32
|
-
objs.forEach((item) => {
|
|
33
|
-
addObjectsToOutlineSingle(outlinePass, item);
|
|
34
|
-
});
|
|
35
|
-
} else {
|
|
36
|
-
addObjectsToOutlineSingle(outlinePass, objs);
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
const removeFromOutline = function(outlinePass, obj) {
|
|
40
|
-
const idx = outlinePass.selectedObjects.findIndex((item) => item.uuid === obj.uuid);
|
|
41
|
-
idx !== -1 && outlinePass.selectedObjects.splice(idx, 1);
|
|
42
|
-
};
|
|
43
|
-
export {
|
|
44
|
-
OutlinePass2 as OutlinePass,
|
|
45
|
-
addObjectsToOutline,
|
|
46
|
-
createOutlinePass,
|
|
47
|
-
removeFromOutline
|
|
48
|
-
};
|