@newkrok/three-particles 1.0.2 → 2.0.0
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/README.md +28 -12
- package/dist/bundle-report.json +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +6 -0
- package/dist/js/effects/three-particles/index.d.ts +7 -0
- package/dist/js/effects/three-particles/index.d.ts.map +1 -0
- package/dist/js/effects/three-particles/index.js +6 -0
- package/dist/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.d.ts +3 -0
- package/dist/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.d.ts.map +1 -0
- package/{src → dist}/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.js +66 -67
- package/dist/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.d.ts +3 -0
- package/dist/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.d.ts.map +1 -0
- package/{src → dist}/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.js +32 -33
- package/dist/js/effects/three-particles/three-particles-bezier.d.ts +5 -0
- package/dist/js/effects/three-particles/three-particles-bezier.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-bezier.js +62 -0
- package/dist/js/effects/three-particles/three-particles-curves.d.ts +37 -0
- package/dist/js/effects/three-particles/three-particles-curves.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-curves.js +37 -0
- package/dist/js/effects/three-particles/three-particles-enums.d.ts +25 -0
- package/dist/js/effects/three-particles/three-particles-enums.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-enums.js +1 -0
- package/dist/js/effects/three-particles/three-particles-modifiers.d.ts +11 -0
- package/dist/js/effects/three-particles/three-particles-modifiers.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-modifiers.js +93 -0
- package/dist/js/effects/three-particles/three-particles-utils.d.ts +31 -0
- package/dist/js/effects/three-particles/three-particles-utils.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles-utils.js +145 -0
- package/dist/js/effects/three-particles/three-particles.d.ts +13 -0
- package/dist/js/effects/three-particles/three-particles.d.ts.map +1 -0
- package/dist/js/effects/three-particles/three-particles.js +642 -0
- package/dist/js/effects/three-particles/types.d.ts +1037 -0
- package/dist/js/effects/three-particles/types.d.ts.map +1 -0
- package/dist/js/effects/three-particles/types.js +1 -0
- package/dist/three-particles.min.js +1 -0
- package/package.json +87 -37
- package/src/js/effects/three-particles/three-particles-bezier.js +0 -36
- package/src/js/effects/three-particles/three-particles-curves.js +0 -75
- package/src/js/effects/three-particles/three-particles-enums.js +0 -23
- package/src/js/effects/three-particles/three-particles-modifiers.js +0 -133
- package/src/js/effects/three-particles/three-particles-utils.js +0 -212
- package/src/js/effects/three-particles.d.ts +0 -79
- package/src/js/effects/three-particles.js +0 -931
package/README.md
CHANGED
|
@@ -1,26 +1,42 @@
|
|
|
1
1
|
# THREE Particles
|
|
2
|
+
[](https://github.com/NewKrok/three-particles/actions/workflows/test.yml)
|
|
3
|
+
[](https://www.npmjs.com/package/@newkrok/three-particles)
|
|
4
|
+
[](https://www.npmjs.com/package/@newkrok/three-particles)
|
|
5
|
+
[](https://bundlephobia.com/package/@newkrok/three-particles)
|
|
2
6
|
|
|
3
|
-
Particle system for ThreeJS
|
|
7
|
+
Particle system for ThreeJS.
|
|
4
8
|
|
|
5
9
|
# THREE Particles Editor
|
|
6
10
|
|
|
7
|
-
You can create your own particle effects with
|
|
11
|
+
You can create your own particle effects with its editor: [https://github.com/NewKrok/three-particles-editor](https://github.com/NewKrok/three-particles-editor)
|
|
8
12
|
|
|
9
13
|
# Video
|
|
10
14
|
|
|
11
|
-
- Projectiles: https://youtu.be/Q352JuxON04
|
|
12
|
-
- First preview: https://youtu.be/dtN_bndvoGU
|
|
15
|
+
- Projectiles: [https://youtu.be/Q352JuxON04](https://youtu.be/Q352JuxON04)
|
|
16
|
+
- First preview: [https://youtu.be/dtN_bndvoGU](https://youtu.be/dtN_bndvoGU)
|
|
13
17
|
|
|
14
|
-
# Live
|
|
18
|
+
# Live Demo
|
|
15
19
|
|
|
16
|
-
https://newkrok.com/three-particles-editor/index.html
|
|
20
|
+
[https://newkrok.com/three-particles-editor/index.html](https://newkrok.com/three-particles-editor/index.html)
|
|
17
21
|
|
|
18
|
-
#
|
|
22
|
+
# Documentation
|
|
19
23
|
|
|
20
|
-
|
|
24
|
+
Automatically generated TypeDoc: [https://newkrok.github.io/three-particles/](https://newkrok.github.io/three-particles/)
|
|
21
25
|
|
|
22
|
-
Install
|
|
23
|
-
`npm i @newkrok/three-particles`
|
|
26
|
+
# Install
|
|
24
27
|
|
|
25
|
-
|
|
26
|
-
|
|
28
|
+
NPM package: [https://www.npmjs.com/package/@newkrok/three-particles](https://www.npmjs.com/package/@newkrok/three-particles)
|
|
29
|
+
|
|
30
|
+
Install with npm:
|
|
31
|
+
```bash
|
|
32
|
+
npm i @newkrok/three-particles
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Add as a `package.json` dependency:
|
|
36
|
+
```json
|
|
37
|
+
"dependencies": {
|
|
38
|
+
...
|
|
39
|
+
"@newkrok/three-particles": "2.0.0"
|
|
40
|
+
...
|
|
41
|
+
}
|
|
42
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[{"label":"three-particles.min.js","isAsset":true,"statSize":83241,"groups":[{"label":"dist/js/effects/three-particles","path":"./dist/js/effects/three-particles","statSize":70922,"groups":[{"id":684,"label":"index.js + 14 modules (concatenated)","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)","statSize":70922,"parsedSize":0,"gzipSize":0,"concatenated":true,"groups":[{"label":"dist/js/effects/three-particles","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles","statSize":51216,"groups":[{"id":null,"label":"index.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles/index.js","statSize":264,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"id":null,"label":"three-particles-bezier.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles/three-particles-bezier.js","statSize":2350,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"id":null,"label":"three-particles-curves.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles/three-particles-curves.js","statSize":2628,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"id":null,"label":"three-particles-modifiers.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles/three-particles-modifiers.js","statSize":4748,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"id":null,"label":"three-particles-utils.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles/three-particles-utils.js","statSize":7394,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"id":null,"label":"three-particles.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles/three-particles.js","statSize":31035,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"label":"shaders","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles/shaders","statSize":2797,"groups":[{"id":null,"label":"particle-system-fragment-shader.glsl.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.js","statSize":1939,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"id":null,"label":"particle-system-vertex-shader.glsl.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/dist/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.js","statSize":858,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true}],"parsedSize":0,"gzipSize":0,"inaccurateSizes":true}],"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"label":"node_modules","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules","statSize":19664,"groups":[{"label":"@newkrok/three-utils/src/js/newkrok/three-utils","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules/@newkrok/three-utils/src/js/newkrok/three-utils","statSize":5203,"groups":[{"id":null,"label":"index.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules/@newkrok/three-utils/src/js/newkrok/three-utils/index.js","statSize":349,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"id":null,"label":"callback-utils.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules/@newkrok/three-utils/src/js/newkrok/three-utils/callback-utils.js","statSize":1350,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"id":null,"label":"object-utils.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules/@newkrok/three-utils/src/js/newkrok/three-utils/object-utils.js","statSize":2458,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"id":null,"label":"time-utils.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules/@newkrok/three-utils/src/js/newkrok/three-utils/time-utils.js","statSize":1046,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true}],"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"label":"three/examples/jsm/misc","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules/three/examples/jsm/misc","statSize":1540,"groups":[{"id":null,"label":"Gyroscope.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules/three/examples/jsm/misc/Gyroscope.js","statSize":1540,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true}],"parsedSize":0,"gzipSize":0,"inaccurateSizes":true},{"label":"three-noise/build","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules/three-noise/build","statSize":12921,"groups":[{"id":null,"label":"three-noise.module.js","path":"./dist/js/effects/three-particles/index.js + 14 modules (concatenated)/node_modules/three-noise/build/three-noise.module.js","statSize":12921,"parsedSize":0,"gzipSize":0,"inaccurateSizes":true}],"parsedSize":0,"gzipSize":0,"inaccurateSizes":true}],"parsedSize":0,"gzipSize":0,"inaccurateSizes":true}]}],"parsedSize":0,"gzipSize":0},{"label":"node_modules/easing-functions","path":"./node_modules/easing-functions","statSize":12319,"groups":[{"id":300,"label":"index.js","path":"./node_modules/easing-functions/index.js","statSize":12319}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"main":true}}]
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export * from './js/effects/three-particles/three-particles-bezier.js';
|
|
2
|
+
export * from './js/effects/three-particles/three-particles-curves.js';
|
|
3
|
+
export * from './js/effects/three-particles/three-particles-enums.js';
|
|
4
|
+
export * from './js/effects/three-particles/three-particles-modifiers.js';
|
|
5
|
+
export * from './js/effects/three-particles/three-particles-utils.js';
|
|
6
|
+
export * from './js/effects/three-particles/three-particles.js';
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wDAAwD,CAAC;AACvE,cAAc,wDAAwD,CAAC;AACvE,cAAc,uDAAuD,CAAC;AACtE,cAAc,2DAA2D,CAAC;AAC1E,cAAc,uDAAuD,CAAC;AACtE,cAAc,iDAAiD,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export * from './js/effects/three-particles/three-particles-bezier.js';
|
|
2
|
+
export * from './js/effects/three-particles/three-particles-curves.js';
|
|
3
|
+
export * from './js/effects/three-particles/three-particles-enums.js';
|
|
4
|
+
export * from './js/effects/three-particles/three-particles-modifiers.js';
|
|
5
|
+
export * from './js/effects/three-particles/three-particles-utils.js';
|
|
6
|
+
export * from './js/effects/three-particles/three-particles.js';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export * from './three-particles-bezier.js';
|
|
2
|
+
export * from './three-particles-curves.js';
|
|
3
|
+
export * from './three-particles-enums.js';
|
|
4
|
+
export * from './three-particles-modifiers.js';
|
|
5
|
+
export * from './three-particles-utils.js';
|
|
6
|
+
export * from './three-particles.js';
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export * from './three-particles-bezier.js';
|
|
2
|
+
export * from './three-particles-curves.js';
|
|
3
|
+
export * from './three-particles-enums.js';
|
|
4
|
+
export * from './three-particles-modifiers.js';
|
|
5
|
+
export * from './three-particles-utils.js';
|
|
6
|
+
export * from './three-particles.js';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
declare const ParticleSystemFragmentShader = "\n uniform sampler2D map;\n uniform float elapsed;\n uniform float fps;\n uniform bool useFPSForFrameIndex;\n uniform vec2 tiles;\n uniform bool discardBackgroundColor;\n uniform vec3 backgroundColor;\n uniform float backgroundColorTolerance;\n\n varying vec4 vColor;\n varying float vLifetime;\n varying float vStartLifetime;\n varying float vRotation;\n varying float vStartFrame;\n\n void main()\n {\n gl_FragColor = vColor;\n float mid = 0.5;\n\n float frameIndex = round(vStartFrame) + (\n useFPSForFrameIndex == true\n ? fps == 0.0\n ? 0.0\n : max((vLifetime / 1000.0) * fps, 0.0)\n : max(min(floor(min(vLifetime / vStartLifetime, 1.0) * (tiles.x * tiles.y)), tiles.x * tiles.y - 1.0), 0.0)\n );\n \n float spriteXIndex = floor(mod(frameIndex, tiles.x));\n float spriteYIndex = floor(mod(frameIndex / tiles.x, tiles.y));\n\n vec2 frameUV = vec2(\n gl_PointCoord.x / tiles.x + spriteXIndex / tiles.x,\n gl_PointCoord.y / tiles.y + spriteYIndex / tiles.y);\n\n vec2 center = vec2(0.5, 0.5);\n vec2 centeredPoint = gl_PointCoord - center;\n\n mat2 rotation = mat2(\n cos(vRotation), sin(vRotation),\n -sin(vRotation), cos(vRotation)\n );\n\n centeredPoint = rotation * centeredPoint;\n vec2 centeredMiddlePoint = vec2(\n centeredPoint.x + center.x,\n centeredPoint.y + center.y\n );\n\n float dist = distance(centeredMiddlePoint, center);\n if (dist > 0.5) discard;\n\n vec2 uvPoint = vec2(\n centeredMiddlePoint.x / tiles.x + spriteXIndex / tiles.x,\n centeredMiddlePoint.y / tiles.y + spriteYIndex / tiles.y\n );\n\n vec4 rotatedTexture = texture2D(map, uvPoint);\n\n gl_FragColor = gl_FragColor * rotatedTexture;\n\n if (discardBackgroundColor && abs(length(rotatedTexture.rgb - backgroundColor.rgb)) < backgroundColorTolerance ) discard;\n }\n";
|
|
2
|
+
export default ParticleSystemFragmentShader;
|
|
3
|
+
//# sourceMappingURL=particle-system-fragment-shader.glsl.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"particle-system-fragment-shader.glsl.d.ts","sourceRoot":"","sources":["../../../../../src/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,4BAA4B,k4DAgEjC,CAAC;AAEF,eAAe,4BAA4B,CAAC"}
|
package/{src → dist}/js/effects/three-particles/shaders/particle-system-fragment-shader.glsl.js
RENAMED
|
@@ -1,67 +1,66 @@
|
|
|
1
|
-
const ParticleSystemFragmentShader = `
|
|
2
|
-
uniform sampler2D map;
|
|
3
|
-
uniform float elapsed;
|
|
4
|
-
uniform float fps;
|
|
5
|
-
uniform bool useFPSForFrameIndex;
|
|
6
|
-
uniform vec2 tiles;
|
|
7
|
-
uniform bool discardBackgroundColor;
|
|
8
|
-
uniform vec3 backgroundColor;
|
|
9
|
-
uniform float backgroundColorTolerance;
|
|
10
|
-
|
|
11
|
-
varying vec4 vColor;
|
|
12
|
-
varying float vLifetime;
|
|
13
|
-
varying float vStartLifetime;
|
|
14
|
-
varying float vRotation;
|
|
15
|
-
varying float vStartFrame;
|
|
16
|
-
|
|
17
|
-
void main()
|
|
18
|
-
{
|
|
19
|
-
gl_FragColor = vColor;
|
|
20
|
-
float mid = 0.5;
|
|
21
|
-
|
|
22
|
-
float frameIndex = round(vStartFrame) + (
|
|
23
|
-
useFPSForFrameIndex == true
|
|
24
|
-
? fps == 0.0
|
|
25
|
-
? 0.0
|
|
26
|
-
: max((vLifetime / 1000.0) * fps, 0.0)
|
|
27
|
-
: max(min(floor(min(vLifetime / vStartLifetime, 1.0) * (tiles.x * tiles.y)), tiles.x * tiles.y - 1.0), 0.0)
|
|
28
|
-
);
|
|
29
|
-
|
|
30
|
-
float spriteXIndex = floor(mod(frameIndex, tiles.x));
|
|
31
|
-
float spriteYIndex = floor(mod(frameIndex / tiles.x, tiles.y));
|
|
32
|
-
|
|
33
|
-
vec2 frameUV = vec2(
|
|
34
|
-
gl_PointCoord.x / tiles.x + spriteXIndex / tiles.x,
|
|
35
|
-
gl_PointCoord.y / tiles.y + spriteYIndex / tiles.y);
|
|
36
|
-
|
|
37
|
-
vec2 center = vec2(0.5, 0.5);
|
|
38
|
-
vec2 centeredPoint = gl_PointCoord - center;
|
|
39
|
-
|
|
40
|
-
mat2 rotation = mat2(
|
|
41
|
-
cos(vRotation), sin(vRotation),
|
|
42
|
-
-sin(vRotation), cos(vRotation)
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
centeredPoint = rotation * centeredPoint;
|
|
46
|
-
vec2 centeredMiddlePoint = vec2(
|
|
47
|
-
centeredPoint.x + center.x,
|
|
48
|
-
centeredPoint.y + center.y
|
|
49
|
-
);
|
|
50
|
-
|
|
51
|
-
float dist = distance(centeredMiddlePoint, center);
|
|
52
|
-
if (dist > 0.5) discard;
|
|
53
|
-
|
|
54
|
-
vec2 uvPoint = vec2(
|
|
55
|
-
centeredMiddlePoint.x / tiles.x + spriteXIndex / tiles.x,
|
|
56
|
-
centeredMiddlePoint.y / tiles.y + spriteYIndex / tiles.y
|
|
57
|
-
);
|
|
58
|
-
|
|
59
|
-
vec4 rotatedTexture = texture2D(map, uvPoint);
|
|
60
|
-
|
|
61
|
-
gl_FragColor = gl_FragColor * rotatedTexture;
|
|
62
|
-
|
|
63
|
-
if (discardBackgroundColor && abs(length(rotatedTexture.rgb - backgroundColor.rgb)) < backgroundColorTolerance ) discard;
|
|
64
|
-
}
|
|
65
|
-
`;
|
|
66
|
-
|
|
67
|
-
export default ParticleSystemFragmentShader;
|
|
1
|
+
const ParticleSystemFragmentShader = `
|
|
2
|
+
uniform sampler2D map;
|
|
3
|
+
uniform float elapsed;
|
|
4
|
+
uniform float fps;
|
|
5
|
+
uniform bool useFPSForFrameIndex;
|
|
6
|
+
uniform vec2 tiles;
|
|
7
|
+
uniform bool discardBackgroundColor;
|
|
8
|
+
uniform vec3 backgroundColor;
|
|
9
|
+
uniform float backgroundColorTolerance;
|
|
10
|
+
|
|
11
|
+
varying vec4 vColor;
|
|
12
|
+
varying float vLifetime;
|
|
13
|
+
varying float vStartLifetime;
|
|
14
|
+
varying float vRotation;
|
|
15
|
+
varying float vStartFrame;
|
|
16
|
+
|
|
17
|
+
void main()
|
|
18
|
+
{
|
|
19
|
+
gl_FragColor = vColor;
|
|
20
|
+
float mid = 0.5;
|
|
21
|
+
|
|
22
|
+
float frameIndex = round(vStartFrame) + (
|
|
23
|
+
useFPSForFrameIndex == true
|
|
24
|
+
? fps == 0.0
|
|
25
|
+
? 0.0
|
|
26
|
+
: max((vLifetime / 1000.0) * fps, 0.0)
|
|
27
|
+
: max(min(floor(min(vLifetime / vStartLifetime, 1.0) * (tiles.x * tiles.y)), tiles.x * tiles.y - 1.0), 0.0)
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
float spriteXIndex = floor(mod(frameIndex, tiles.x));
|
|
31
|
+
float spriteYIndex = floor(mod(frameIndex / tiles.x, tiles.y));
|
|
32
|
+
|
|
33
|
+
vec2 frameUV = vec2(
|
|
34
|
+
gl_PointCoord.x / tiles.x + spriteXIndex / tiles.x,
|
|
35
|
+
gl_PointCoord.y / tiles.y + spriteYIndex / tiles.y);
|
|
36
|
+
|
|
37
|
+
vec2 center = vec2(0.5, 0.5);
|
|
38
|
+
vec2 centeredPoint = gl_PointCoord - center;
|
|
39
|
+
|
|
40
|
+
mat2 rotation = mat2(
|
|
41
|
+
cos(vRotation), sin(vRotation),
|
|
42
|
+
-sin(vRotation), cos(vRotation)
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
centeredPoint = rotation * centeredPoint;
|
|
46
|
+
vec2 centeredMiddlePoint = vec2(
|
|
47
|
+
centeredPoint.x + center.x,
|
|
48
|
+
centeredPoint.y + center.y
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
float dist = distance(centeredMiddlePoint, center);
|
|
52
|
+
if (dist > 0.5) discard;
|
|
53
|
+
|
|
54
|
+
vec2 uvPoint = vec2(
|
|
55
|
+
centeredMiddlePoint.x / tiles.x + spriteXIndex / tiles.x,
|
|
56
|
+
centeredMiddlePoint.y / tiles.y + spriteYIndex / tiles.y
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
vec4 rotatedTexture = texture2D(map, uvPoint);
|
|
60
|
+
|
|
61
|
+
gl_FragColor = gl_FragColor * rotatedTexture;
|
|
62
|
+
|
|
63
|
+
if (discardBackgroundColor && abs(length(rotatedTexture.rgb - backgroundColor.rgb)) < backgroundColorTolerance ) discard;
|
|
64
|
+
}
|
|
65
|
+
`;
|
|
66
|
+
export default ParticleSystemFragmentShader;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
declare const ParticleSystemVertexShader = "\n attribute float size;\n attribute float colorR;\n attribute float colorG;\n attribute float colorB;\n attribute float colorA;\n attribute float lifetime;\n attribute float startLifetime;\n attribute float rotation;\n attribute float startFrame;\n\n varying mat4 vPosition;\n varying vec4 vColor;\n varying float vLifetime;\n varying float vStartLifetime;\n varying float vRotation;\n varying float vStartFrame;\n\n void main()\n {\n vColor = vec4(colorR, colorG, colorB, colorA);\n vLifetime = lifetime;\n vStartLifetime = startLifetime;\n vRotation = rotation;\n vStartFrame = startFrame;\n\n vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\n gl_PointSize = size * (100.0 / length(mvPosition.xyz));\n gl_Position = projectionMatrix * mvPosition;\n }\n";
|
|
2
|
+
export default ParticleSystemVertexShader;
|
|
3
|
+
//# sourceMappingURL=particle-system-vertex-shader.glsl.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"particle-system-vertex-shader.glsl.d.ts","sourceRoot":"","sources":["../../../../../src/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,0BAA0B,2yBA8B/B,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
|
package/{src → dist}/js/effects/three-particles/shaders/particle-system-vertex-shader.glsl.js
RENAMED
|
@@ -1,33 +1,32 @@
|
|
|
1
|
-
const ParticleSystemVertexShader = `
|
|
2
|
-
attribute float size;
|
|
3
|
-
attribute float colorR;
|
|
4
|
-
attribute float colorG;
|
|
5
|
-
attribute float colorB;
|
|
6
|
-
attribute float colorA;
|
|
7
|
-
attribute float lifetime;
|
|
8
|
-
attribute float startLifetime;
|
|
9
|
-
attribute float rotation;
|
|
10
|
-
attribute float startFrame;
|
|
11
|
-
|
|
12
|
-
varying mat4 vPosition;
|
|
13
|
-
varying vec4 vColor;
|
|
14
|
-
varying float vLifetime;
|
|
15
|
-
varying float vStartLifetime;
|
|
16
|
-
varying float vRotation;
|
|
17
|
-
varying float vStartFrame;
|
|
18
|
-
|
|
19
|
-
void main()
|
|
20
|
-
{
|
|
21
|
-
vColor = vec4(colorR, colorG, colorB, colorA);
|
|
22
|
-
vLifetime = lifetime;
|
|
23
|
-
vStartLifetime = startLifetime;
|
|
24
|
-
vRotation = rotation;
|
|
25
|
-
vStartFrame = startFrame;
|
|
26
|
-
|
|
27
|
-
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
|
|
28
|
-
gl_PointSize = size * (100.0 / length(mvPosition.xyz));
|
|
29
|
-
gl_Position = projectionMatrix * mvPosition;
|
|
30
|
-
}
|
|
31
|
-
`;
|
|
32
|
-
|
|
33
|
-
export default ParticleSystemVertexShader;
|
|
1
|
+
const ParticleSystemVertexShader = `
|
|
2
|
+
attribute float size;
|
|
3
|
+
attribute float colorR;
|
|
4
|
+
attribute float colorG;
|
|
5
|
+
attribute float colorB;
|
|
6
|
+
attribute float colorA;
|
|
7
|
+
attribute float lifetime;
|
|
8
|
+
attribute float startLifetime;
|
|
9
|
+
attribute float rotation;
|
|
10
|
+
attribute float startFrame;
|
|
11
|
+
|
|
12
|
+
varying mat4 vPosition;
|
|
13
|
+
varying vec4 vColor;
|
|
14
|
+
varying float vLifetime;
|
|
15
|
+
varying float vStartLifetime;
|
|
16
|
+
varying float vRotation;
|
|
17
|
+
varying float vStartFrame;
|
|
18
|
+
|
|
19
|
+
void main()
|
|
20
|
+
{
|
|
21
|
+
vColor = vec4(colorR, colorG, colorB, colorA);
|
|
22
|
+
vLifetime = lifetime;
|
|
23
|
+
vStartLifetime = startLifetime;
|
|
24
|
+
vRotation = rotation;
|
|
25
|
+
vStartFrame = startFrame;
|
|
26
|
+
|
|
27
|
+
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
|
|
28
|
+
gl_PointSize = size * (100.0 / length(mvPosition.xyz));
|
|
29
|
+
gl_Position = projectionMatrix * mvPosition;
|
|
30
|
+
}
|
|
31
|
+
`;
|
|
32
|
+
export default ParticleSystemVertexShader;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { BezierPoint, CurveFunction } from './types.js';
|
|
2
|
+
export declare const createBezierCurveFunction: (particleSystemId: number, bezierPoints: Array<BezierPoint>) => CurveFunction;
|
|
3
|
+
export declare const removeBezierCurveFunction: (particleSystemId: number) => void;
|
|
4
|
+
export declare const getBezierCacheSize: () => number;
|
|
5
|
+
//# sourceMappingURL=three-particles-bezier.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"three-particles-bezier.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/three-particles-bezier.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAcxD,eAAO,MAAM,yBAAyB,qBAClB,MAAM,gBACV,KAAK,CAAC,WAAW,CAAC,kBAgDjC,CAAC;AAEF,eAAO,MAAM,yBAAyB,qBAAsB,MAAM,SAYjE,CAAC;AAEF,eAAO,MAAM,kBAAkB,cAAqB,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
const cache = [];
|
|
2
|
+
const nCr = (n, k) => {
|
|
3
|
+
let z = 1;
|
|
4
|
+
for (let i = 1; i <= k; i++)
|
|
5
|
+
z *= (n + 1 - i) / i;
|
|
6
|
+
return z;
|
|
7
|
+
};
|
|
8
|
+
export const createBezierCurveFunction = (particleSystemId, bezierPoints) => {
|
|
9
|
+
const cacheEntry = cache.find((item) => item.bezierPoints === bezierPoints);
|
|
10
|
+
if (cacheEntry) {
|
|
11
|
+
if (!cacheEntry.referencedBy.includes(particleSystemId))
|
|
12
|
+
cacheEntry.referencedBy.push(particleSystemId);
|
|
13
|
+
return cacheEntry.curveFunction;
|
|
14
|
+
}
|
|
15
|
+
const entry = {
|
|
16
|
+
referencedBy: [particleSystemId],
|
|
17
|
+
bezierPoints,
|
|
18
|
+
curveFunction: (percentage) => {
|
|
19
|
+
if (percentage < 0)
|
|
20
|
+
return bezierPoints[0].y;
|
|
21
|
+
if (percentage > 1)
|
|
22
|
+
return bezierPoints[bezierPoints.length - 1].y;
|
|
23
|
+
let start = 0;
|
|
24
|
+
let stop = bezierPoints.length - 1;
|
|
25
|
+
bezierPoints.find((point, index) => {
|
|
26
|
+
const result = percentage < (point.percentage ?? 0);
|
|
27
|
+
if (result)
|
|
28
|
+
stop = index;
|
|
29
|
+
else if (point.percentage !== undefined)
|
|
30
|
+
start = index;
|
|
31
|
+
return result;
|
|
32
|
+
});
|
|
33
|
+
const n = stop - start;
|
|
34
|
+
const calculatedPercentage = (percentage - (bezierPoints[start].percentage ?? 0)) /
|
|
35
|
+
((bezierPoints[stop].percentage ?? 1) -
|
|
36
|
+
(bezierPoints[start].percentage ?? 0));
|
|
37
|
+
let value = 0;
|
|
38
|
+
for (let i = 0; i <= n; i++) {
|
|
39
|
+
const p = bezierPoints[start + i];
|
|
40
|
+
const c = nCr(n, i) *
|
|
41
|
+
Math.pow(1 - calculatedPercentage, n - i) *
|
|
42
|
+
Math.pow(calculatedPercentage, i);
|
|
43
|
+
value += c * p.y;
|
|
44
|
+
}
|
|
45
|
+
return value;
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
cache.push(entry);
|
|
49
|
+
return entry.curveFunction;
|
|
50
|
+
};
|
|
51
|
+
export const removeBezierCurveFunction = (particleSystemId) => {
|
|
52
|
+
while (true) {
|
|
53
|
+
const index = cache.findIndex((item) => item.referencedBy.includes(particleSystemId));
|
|
54
|
+
if (index === -1)
|
|
55
|
+
break;
|
|
56
|
+
const entry = cache[index];
|
|
57
|
+
entry.referencedBy = entry.referencedBy.filter((id) => id !== particleSystemId);
|
|
58
|
+
if (entry.referencedBy.length === 0)
|
|
59
|
+
cache.splice(index, 1);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
export const getBezierCacheSize = () => cache.length;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { CurveFunction } from './types.js';
|
|
2
|
+
export declare const enum CurveFunctionId {
|
|
3
|
+
BEZIER = "BEZIER",
|
|
4
|
+
LINEAR = "LINEAR",
|
|
5
|
+
QUADRATIC_IN = "QUADRATIC_IN",
|
|
6
|
+
QUADRATIC_OUT = "QUADRATIC_OUT",
|
|
7
|
+
QUADRATIC_IN_OUT = "QUADRATIC_IN_OUT",
|
|
8
|
+
CUBIC_IN = "CUBIC_IN",
|
|
9
|
+
CUBIC_OUT = "CUBIC_OUT",
|
|
10
|
+
CUBIC_IN_OUT = "CUBIC_IN_OUT",
|
|
11
|
+
QUARTIC_IN = "QUARTIC_IN",
|
|
12
|
+
QUARTIC_OUT = "QUARTIC_OUT",
|
|
13
|
+
QUARTIC_IN_OUT = "QUARTIC_IN_OUT",
|
|
14
|
+
QUINTIC_IN = "QUINTIC_IN",
|
|
15
|
+
QUINTIC_OUT = "QUINTIC_OUT",
|
|
16
|
+
QUINTIC_IN_OUT = "QUINTIC_IN_OUT",
|
|
17
|
+
SINUSOIDAL_IN = "SINUSOIDAL_IN",
|
|
18
|
+
SINUSOIDAL_OUT = "SINUSOIDAL_OUT",
|
|
19
|
+
SINUSOIDAL_IN_OUT = "SINUSOIDAL_IN_OUT",
|
|
20
|
+
EXPONENTIAL_IN = "EXPONENTIAL_IN",
|
|
21
|
+
EXPONENTIAL_OUT = "EXPONENTIAL_OUT",
|
|
22
|
+
EXPONENTIAL_IN_OUT = "EXPONENTIAL_IN_OUT",
|
|
23
|
+
CIRCULAR_IN = "CIRCULAR_IN",
|
|
24
|
+
CIRCULAR_OUT = "CIRCULAR_OUT",
|
|
25
|
+
CIRCULAR_IN_OUT = "CIRCULAR_IN_OUT",
|
|
26
|
+
ELASTIC_IN = "ELASTIC_IN",
|
|
27
|
+
ELASTIC_OUT = "ELASTIC_OUT",
|
|
28
|
+
ELASTIC_IN_OUT = "ELASTIC_IN_OUT",
|
|
29
|
+
BACK_IN = "BACK_IN",
|
|
30
|
+
BACK_OUT = "BACK_OUT",
|
|
31
|
+
BACK_IN_OUT = "BACK_IN_OUT",
|
|
32
|
+
BOUNCE_IN = "BOUNCE_IN",
|
|
33
|
+
BOUNCE_OUT = "BOUNCE_OUT",
|
|
34
|
+
BOUNCE_IN_OUT = "BOUNCE_IN_OUT"
|
|
35
|
+
}
|
|
36
|
+
export declare const getCurveFunction: (curveFunctionId: CurveFunctionId | CurveFunction) => CurveFunction;
|
|
37
|
+
//# sourceMappingURL=three-particles-curves.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"three-particles-curves.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/three-particles-curves.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,0BAAkB,eAAe;IAC/B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,YAAY,iBAAiB;IAC7B,aAAa,kBAAkB;IAC/B,gBAAgB,qBAAqB;IACrC,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,cAAc,mBAAmB;IACjC,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,cAAc,mBAAmB;IACjC,aAAa,kBAAkB;IAC/B,cAAc,mBAAmB;IACjC,iBAAiB,sBAAsB;IACvC,cAAc,mBAAmB;IACjC,eAAe,oBAAoB;IACnC,kBAAkB,uBAAuB;IACzC,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;IACnC,UAAU,eAAe;IACzB,WAAW,gBAAgB;IAC3B,cAAc,mBAAmB;IACjC,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,SAAS,cAAc;IACvB,UAAU,eAAe;IACzB,aAAa,kBAAkB;CAChC;AAoCD,eAAO,MAAM,gBAAgB,oBACV,eAAe,GAAG,aAAa,KAC/C,aAGuC,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import Easing from 'easing-functions';
|
|
2
|
+
const CurveFunctionIdMap = {
|
|
3
|
+
["LINEAR" /* CurveFunctionId.LINEAR */]: Easing.Linear.None,
|
|
4
|
+
["QUADRATIC_IN" /* CurveFunctionId.QUADRATIC_IN */]: Easing.Quadratic.In,
|
|
5
|
+
["QUADRATIC_OUT" /* CurveFunctionId.QUADRATIC_OUT */]: Easing.Quadratic.Out,
|
|
6
|
+
["QUADRATIC_IN_OUT" /* CurveFunctionId.QUADRATIC_IN_OUT */]: Easing.Quadratic.InOut,
|
|
7
|
+
["CUBIC_IN" /* CurveFunctionId.CUBIC_IN */]: Easing.Cubic.In,
|
|
8
|
+
["CUBIC_OUT" /* CurveFunctionId.CUBIC_OUT */]: Easing.Cubic.Out,
|
|
9
|
+
["CUBIC_IN_OUT" /* CurveFunctionId.CUBIC_IN_OUT */]: Easing.Cubic.InOut,
|
|
10
|
+
["QUARTIC_IN" /* CurveFunctionId.QUARTIC_IN */]: Easing.Quartic.In,
|
|
11
|
+
["QUARTIC_OUT" /* CurveFunctionId.QUARTIC_OUT */]: Easing.Quartic.Out,
|
|
12
|
+
["QUARTIC_IN_OUT" /* CurveFunctionId.QUARTIC_IN_OUT */]: Easing.Quartic.InOut,
|
|
13
|
+
["QUINTIC_IN" /* CurveFunctionId.QUINTIC_IN */]: Easing.Quintic.In,
|
|
14
|
+
["QUINTIC_OUT" /* CurveFunctionId.QUINTIC_OUT */]: Easing.Quintic.Out,
|
|
15
|
+
["QUINTIC_IN_OUT" /* CurveFunctionId.QUINTIC_IN_OUT */]: Easing.Quintic.InOut,
|
|
16
|
+
["SINUSOIDAL_IN" /* CurveFunctionId.SINUSOIDAL_IN */]: Easing.Sinusoidal.In,
|
|
17
|
+
["SINUSOIDAL_OUT" /* CurveFunctionId.SINUSOIDAL_OUT */]: Easing.Sinusoidal.Out,
|
|
18
|
+
["SINUSOIDAL_IN_OUT" /* CurveFunctionId.SINUSOIDAL_IN_OUT */]: Easing.Sinusoidal.InOut,
|
|
19
|
+
["EXPONENTIAL_IN" /* CurveFunctionId.EXPONENTIAL_IN */]: Easing.Exponential.In,
|
|
20
|
+
["EXPONENTIAL_OUT" /* CurveFunctionId.EXPONENTIAL_OUT */]: Easing.Exponential.Out,
|
|
21
|
+
["EXPONENTIAL_IN_OUT" /* CurveFunctionId.EXPONENTIAL_IN_OUT */]: Easing.Exponential.InOut,
|
|
22
|
+
["CIRCULAR_IN" /* CurveFunctionId.CIRCULAR_IN */]: Easing.Circular.In,
|
|
23
|
+
["CIRCULAR_OUT" /* CurveFunctionId.CIRCULAR_OUT */]: Easing.Circular.Out,
|
|
24
|
+
["CIRCULAR_IN_OUT" /* CurveFunctionId.CIRCULAR_IN_OUT */]: Easing.Circular.InOut,
|
|
25
|
+
["ELASTIC_IN" /* CurveFunctionId.ELASTIC_IN */]: Easing.Elastic.In,
|
|
26
|
+
["ELASTIC_OUT" /* CurveFunctionId.ELASTIC_OUT */]: Easing.Elastic.Out,
|
|
27
|
+
["ELASTIC_IN_OUT" /* CurveFunctionId.ELASTIC_IN_OUT */]: Easing.Elastic.InOut,
|
|
28
|
+
["BACK_IN" /* CurveFunctionId.BACK_IN */]: Easing.Back.In,
|
|
29
|
+
["BACK_OUT" /* CurveFunctionId.BACK_OUT */]: Easing.Back.Out,
|
|
30
|
+
["BACK_IN_OUT" /* CurveFunctionId.BACK_IN_OUT */]: Easing.Back.InOut,
|
|
31
|
+
["BOUNCE_IN" /* CurveFunctionId.BOUNCE_IN */]: Easing.Bounce.In,
|
|
32
|
+
["BOUNCE_OUT" /* CurveFunctionId.BOUNCE_OUT */]: Easing.Bounce.Out,
|
|
33
|
+
["BOUNCE_IN_OUT" /* CurveFunctionId.BOUNCE_IN_OUT */]: Easing.Bounce.InOut,
|
|
34
|
+
};
|
|
35
|
+
export const getCurveFunction = (curveFunctionId) => typeof curveFunctionId === 'function'
|
|
36
|
+
? curveFunctionId
|
|
37
|
+
: CurveFunctionIdMap[curveFunctionId];
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export declare const enum SimulationSpace {
|
|
2
|
+
LOCAL = "LOCAL",
|
|
3
|
+
WORLD = "WORLD"
|
|
4
|
+
}
|
|
5
|
+
export declare const enum Shape {
|
|
6
|
+
SPHERE = "SPHERE",
|
|
7
|
+
CONE = "CONE",
|
|
8
|
+
BOX = "BOX",
|
|
9
|
+
CIRCLE = "CIRCLE",
|
|
10
|
+
RECTANGLE = "RECTANGLE"
|
|
11
|
+
}
|
|
12
|
+
export declare const enum EmitFrom {
|
|
13
|
+
VOLUME = "VOLUME",
|
|
14
|
+
SHELL = "SHELL",
|
|
15
|
+
EDGE = "EDGE"
|
|
16
|
+
}
|
|
17
|
+
export declare const enum TimeMode {
|
|
18
|
+
LIFETIME = "LIFETIME",
|
|
19
|
+
FPS = "FPS"
|
|
20
|
+
}
|
|
21
|
+
export declare const enum LifeTimeCurve {
|
|
22
|
+
BEZIER = "BEZIER",
|
|
23
|
+
EASING = "EASING"
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=three-particles-enums.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"three-particles-enums.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/three-particles-enums.ts"],"names":[],"mappings":"AAAA,0BAAkB,eAAe;IAC/B,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,0BAAkB,KAAK;IACrB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,SAAS,cAAc;CACxB;AAED,0BAAkB,QAAQ;IACxB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,0BAAkB,QAAQ;IACxB,QAAQ,aAAa;IACrB,GAAG,QAAQ;CACZ;AAED,0BAAkB,aAAa;IAC7B,MAAM,WAAW;IACjB,MAAM,WAAW;CAClB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { GeneralData, NormalizedParticleSystemConfig } from './types.js';
|
|
3
|
+
export declare const applyModifiers: ({ delta, generalData, normalizedConfig, attributes, particleLifetimePercentage, particleIndex, }: {
|
|
4
|
+
delta: number;
|
|
5
|
+
generalData: GeneralData;
|
|
6
|
+
normalizedConfig: NormalizedParticleSystemConfig;
|
|
7
|
+
attributes: THREE.NormalBufferAttributes;
|
|
8
|
+
particleLifetimePercentage: number;
|
|
9
|
+
particleIndex: number;
|
|
10
|
+
}) => void;
|
|
11
|
+
//# sourceMappingURL=three-particles-modifiers.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"three-particles-modifiers.d.ts","sourceRoot":"","sources":["../../../../src/js/effects/three-particles/three-particles-modifiers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,WAAW,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAKzE,eAAO,MAAM,cAAc,qGAOxB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,WAAW,CAAC;IACzB,gBAAgB,EAAE,8BAA8B,CAAC;IACjD,UAAU,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACzC,0BAA0B,EAAE,MAAM,CAAC;IACnC,aAAa,EAAE,MAAM,CAAC;CACvB,SA8IA,CAAC"}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { calculateValue } from './three-particles-utils.js';
|
|
3
|
+
const noiseInput = new THREE.Vector3(0, 0, 0);
|
|
4
|
+
const orbitalEuler = new THREE.Euler();
|
|
5
|
+
export const applyModifiers = ({ delta, generalData, normalizedConfig, attributes, particleLifetimePercentage, particleIndex, }) => {
|
|
6
|
+
const { particleSystemId, startValues, lifetimeValues, linearVelocityData, orbitalVelocityData, noise, } = generalData;
|
|
7
|
+
const positionIndex = particleIndex * 3;
|
|
8
|
+
const positionArr = attributes.position.array;
|
|
9
|
+
if (linearVelocityData) {
|
|
10
|
+
const { speed, valueModifiers } = linearVelocityData[particleIndex];
|
|
11
|
+
const normalizedXSpeed = valueModifiers.x
|
|
12
|
+
? valueModifiers.x(particleLifetimePercentage)
|
|
13
|
+
: speed.x;
|
|
14
|
+
const normalizedYSpeed = valueModifiers.y
|
|
15
|
+
? valueModifiers.y(particleLifetimePercentage)
|
|
16
|
+
: speed.y;
|
|
17
|
+
const normalizedZSpeed = valueModifiers.z
|
|
18
|
+
? valueModifiers.z(particleLifetimePercentage)
|
|
19
|
+
: speed.z;
|
|
20
|
+
positionArr[positionIndex] += normalizedXSpeed * delta;
|
|
21
|
+
positionArr[positionIndex + 1] += normalizedYSpeed * delta;
|
|
22
|
+
positionArr[positionIndex + 2] += normalizedZSpeed * delta;
|
|
23
|
+
attributes.position.needsUpdate = true;
|
|
24
|
+
}
|
|
25
|
+
if (orbitalVelocityData) {
|
|
26
|
+
const { speed, positionOffset, valueModifiers } = orbitalVelocityData[particleIndex];
|
|
27
|
+
positionArr[positionIndex] -= positionOffset.x;
|
|
28
|
+
positionArr[positionIndex + 1] -= positionOffset.y;
|
|
29
|
+
positionArr[positionIndex + 2] -= positionOffset.z;
|
|
30
|
+
const normalizedXSpeed = valueModifiers.x
|
|
31
|
+
? valueModifiers.x(particleLifetimePercentage)
|
|
32
|
+
: speed.x;
|
|
33
|
+
const normalizedYSpeed = valueModifiers.y
|
|
34
|
+
? valueModifiers.y(particleLifetimePercentage)
|
|
35
|
+
: speed.y;
|
|
36
|
+
const normalizedZSpeed = valueModifiers.z
|
|
37
|
+
? valueModifiers.z(particleLifetimePercentage)
|
|
38
|
+
: speed.z;
|
|
39
|
+
orbitalEuler.set(normalizedXSpeed * delta, normalizedZSpeed * delta, normalizedYSpeed * delta);
|
|
40
|
+
positionOffset.applyEuler(orbitalEuler);
|
|
41
|
+
positionArr[positionIndex] += positionOffset.x;
|
|
42
|
+
positionArr[positionIndex + 1] += positionOffset.y;
|
|
43
|
+
positionArr[positionIndex + 2] += positionOffset.z;
|
|
44
|
+
attributes.position.needsUpdate = true;
|
|
45
|
+
}
|
|
46
|
+
if (normalizedConfig.sizeOverLifetime.isActive) {
|
|
47
|
+
const multiplier = calculateValue(particleSystemId, normalizedConfig.sizeOverLifetime.lifetimeCurve, particleLifetimePercentage);
|
|
48
|
+
attributes.size.array[particleIndex] =
|
|
49
|
+
startValues.startSize[particleIndex] * multiplier;
|
|
50
|
+
attributes.size.needsUpdate = true;
|
|
51
|
+
}
|
|
52
|
+
if (normalizedConfig.opacityOverLifetime.isActive) {
|
|
53
|
+
const multiplier = calculateValue(particleSystemId, normalizedConfig.opacityOverLifetime.lifetimeCurve, particleLifetimePercentage);
|
|
54
|
+
attributes.colorA.array[particleIndex] =
|
|
55
|
+
startValues.startOpacity[particleIndex] * multiplier;
|
|
56
|
+
attributes.colorA.needsUpdate = true;
|
|
57
|
+
}
|
|
58
|
+
if (lifetimeValues.rotationOverLifetime) {
|
|
59
|
+
attributes.rotation.array[particleIndex] +=
|
|
60
|
+
lifetimeValues.rotationOverLifetime[particleIndex] * delta * 0.02;
|
|
61
|
+
attributes.rotation.needsUpdate = true;
|
|
62
|
+
}
|
|
63
|
+
if (noise.isActive) {
|
|
64
|
+
const { sampler, strength, offsets, positionAmount, rotationAmount, sizeAmount, } = noise;
|
|
65
|
+
let noiseOnPosition;
|
|
66
|
+
const noisePosition = (particleLifetimePercentage + (offsets ? offsets[particleIndex] : 0)) *
|
|
67
|
+
10 *
|
|
68
|
+
strength;
|
|
69
|
+
const noisePower = 0.15 * strength;
|
|
70
|
+
noiseInput.set(noisePosition, 0, 0);
|
|
71
|
+
noiseOnPosition = sampler.get3(noiseInput);
|
|
72
|
+
positionArr[positionIndex] += noiseOnPosition * noisePower * positionAmount;
|
|
73
|
+
if (rotationAmount !== 0) {
|
|
74
|
+
attributes.rotation.array[particleIndex] +=
|
|
75
|
+
noiseOnPosition * noisePower * rotationAmount;
|
|
76
|
+
attributes.rotation.needsUpdate = true;
|
|
77
|
+
}
|
|
78
|
+
if (sizeAmount !== 0) {
|
|
79
|
+
attributes.size.array[particleIndex] +=
|
|
80
|
+
noiseOnPosition * noisePower * sizeAmount;
|
|
81
|
+
attributes.size.needsUpdate = true;
|
|
82
|
+
}
|
|
83
|
+
noiseInput.set(noisePosition, noisePosition, 0);
|
|
84
|
+
noiseOnPosition = sampler.get3(noiseInput);
|
|
85
|
+
positionArr[positionIndex + 1] +=
|
|
86
|
+
noiseOnPosition * noisePower * positionAmount;
|
|
87
|
+
noiseInput.set(noisePosition, noisePosition, noisePosition);
|
|
88
|
+
noiseOnPosition = sampler.get3(noiseInput);
|
|
89
|
+
positionArr[positionIndex + 2] +=
|
|
90
|
+
noiseOnPosition * noisePower * positionAmount;
|
|
91
|
+
attributes.position.needsUpdate = true;
|
|
92
|
+
}
|
|
93
|
+
};
|