@neutrinoparticles/js-v1.0 1.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/CHANGELOG.md +5 -0
- package/LICENSE +21 -0
- package/README.md +275 -0
- package/bin/neutrinoparticles.noise.bin +0 -0
- package/dist/neutrinoparticles.js-v1.0.umd.js +1361 -0
- package/dist/neutrinoparticles.js-v1.0.umd.js.map +1 -0
- package/package.json +61 -0
package/CHANGELOG.md
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2016 ymiroshnyk
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
# neutrinoparticles.js
|
|
2
|
+
|
|
3
|
+
The library allows you to load and simulate particle effects exported from [NeutrinoParticles Editor](https://neutrinoparticles.com/).
|
|
4
|
+
|
|
5
|
+
This is basically a core library which can update particle effect and give you instructions on how to render this effect.
|
|
6
|
+
|
|
7
|
+
## Available integrations
|
|
8
|
+
|
|
9
|
+
Below is a list of addons for most popular engines/frameworks. These addons provide integrated renderers for `neutrinoparticles.js`.
|
|
10
|
+
|
|
11
|
+
|||
|
|
12
|
+
|-------------|-------------|
|
|
13
|
+
| [](https://gitlab.com/neutrinoparticles/neutrinoparticles.pixi.js) | Full integration. Supports PIXI.js v4 and v5. |
|
|
14
|
+
| [](https://gitlab.com/neutrinoparticles/neutrinoparticles.phaser) | Full integration. Supports Phaser3 only. |
|
|
15
|
+
|||
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
You can install the package with `npm`:
|
|
20
|
+
```
|
|
21
|
+
> npm install neutrinoparticles.js
|
|
22
|
+
```
|
|
23
|
+
Or download pre-built package at [Releases](https://gitlab.com/neutrinoparticles/neutrinoparticles.js/-/releases) page. There are [UMD](https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/) packages which you can use in any environment.
|
|
24
|
+
|
|
25
|
+
## Introduction
|
|
26
|
+
|
|
27
|
+
[NeutrinoParticles Editor](https://neutrinoparticles.com/) exports effect to `.js` file. This file contains a class of the effect with all algorithms and data necessary to simulate it. This class is a **model** of effect. The model is constant object, and you need only one model to have many instances of this effect in your application.
|
|
28
|
+
|
|
29
|
+
This library contains shared code which exported effects use. In particular, mathematics, turbulence computations etc.
|
|
30
|
+
|
|
31
|
+
To use the library in your application, first of all, you need to get access to it. Depending on your environment:
|
|
32
|
+
* HTML
|
|
33
|
+
```html
|
|
34
|
+
<script src="path/to/neutrinoparticles.js/dist/neutrinoparticles.umd.js"></script>
|
|
35
|
+
```
|
|
36
|
+
* node.js
|
|
37
|
+
```javascript
|
|
38
|
+
var Neutrino = require('neutrinoparticles.js')
|
|
39
|
+
```
|
|
40
|
+
* ES6
|
|
41
|
+
```javascript
|
|
42
|
+
import * as Neutrino from 'neutrinoparticles.js'
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Main Context
|
|
46
|
+
Main context is a main interface of the library and a shared object for all effects in the application.
|
|
47
|
+
|
|
48
|
+
To create it:
|
|
49
|
+
```javascript
|
|
50
|
+
let neutrino = new Neutrino.Context();
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Loading effect model
|
|
54
|
+
Files of effects exported by the Editor has to be evaluated to obtain JS objects that can be used in the application.
|
|
55
|
+
|
|
56
|
+
You can load effect model using main context. It will use HTTP request to load effect by path. And in this case it will make all evaluating by itself and return you ready to use object:
|
|
57
|
+
```javascript
|
|
58
|
+
neutrino.loadEffect('path/to/effect.js', function(effectModel) {
|
|
59
|
+
// on success
|
|
60
|
+
},
|
|
61
|
+
function() {
|
|
62
|
+
// on fail
|
|
63
|
+
});
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Or you can somehow load effect file by yourself (or unpack from zip, for example), and when you have a text of the file you can use this simple evaluating function:
|
|
67
|
+
```javascript
|
|
68
|
+
function evalEffectModel(effectSource) {
|
|
69
|
+
let wrappedScript =
|
|
70
|
+
"(function(context) {\n" +
|
|
71
|
+
effectSource +"\n" +
|
|
72
|
+
"return new NeutrinoEffect(ctx);\n" +
|
|
73
|
+
"})(neutrino);";
|
|
74
|
+
return eval(wrappedScript);
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Creating effect instances
|
|
79
|
+
When the effect model is loaded, you can create instances of this effect. Each instance is actual entity of effect. It is a state of effect. It has position, rotation and it can be updated (simulated) by time.
|
|
80
|
+
|
|
81
|
+
Depending on what kind of rendering you want to perform, you can create an instance for:
|
|
82
|
+
|
|
83
|
+
Canvas rendering:
|
|
84
|
+
```javascript
|
|
85
|
+
let effect = effectModel.createCanvas2DInstance(
|
|
86
|
+
position, // Array [x, y, z] for starting position of the effect
|
|
87
|
+
rotation, // Array [x, y, z, w] for quaternion representing starting rotation
|
|
88
|
+
{ // options
|
|
89
|
+
paused: false, // Effect paused on start?
|
|
90
|
+
generatorsPaused: false // Generators of the effect paused on start?
|
|
91
|
+
});
|
|
92
|
+
```
|
|
93
|
+
or WebGL rendering:
|
|
94
|
+
```javascript
|
|
95
|
+
let effect = effectModel.createWGLInstance(
|
|
96
|
+
position,
|
|
97
|
+
rotation,
|
|
98
|
+
renderBuffer, // Buffer to accept constructed geometry for particles
|
|
99
|
+
options
|
|
100
|
+
);
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Updating effect
|
|
104
|
+
You would probably want to update the effect on each frame of your application. And on each update you can set up new position and rotation of the effect:
|
|
105
|
+
```javascript
|
|
106
|
+
effect.update(
|
|
107
|
+
timeInSeconds, // time to simulate
|
|
108
|
+
position, // (optional) new position, if changed
|
|
109
|
+
rotation // (optional) new rotation, if changed
|
|
110
|
+
);
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Rendering effect
|
|
114
|
+
Rendering of effect is out of scope of this library. This is because any graphical framework or engine requires custom deep integration and there is no any unified solution.
|
|
115
|
+
|
|
116
|
+
However, you can find reference renderers in `/samples` folder of the repository. There are Canvas and WebGL renderers. They are designed for clean HTML5 environment and can be used as standalone renderers on a web site. Or you can refer to them for creating a custom renderer for your graphical framework.
|
|
117
|
+
|
|
118
|
+
> For PIXI.js you can use [neutrinoparticles.pixi.js](https://gitlab.com/neutrinoparticles/neutrinoparticles.pixi.js) renderer.
|
|
119
|
+
|
|
120
|
+
## Position and Rotation
|
|
121
|
+
|
|
122
|
+
Effects accept position and rotation on creating and update.
|
|
123
|
+
|
|
124
|
+
Position vector is represented by 3D array [x, y, z].
|
|
125
|
+
|
|
126
|
+
Rotation is a quaternion represented by 4D array [x, y, z, w].
|
|
127
|
+
|
|
128
|
+
You can make a rotation quaternion by function:
|
|
129
|
+
```javascript
|
|
130
|
+
neutrino.axisangle2quat_(
|
|
131
|
+
[x, y, z], // rotation axis
|
|
132
|
+
angle // rotation angle in degrees
|
|
133
|
+
);
|
|
134
|
+
```
|
|
135
|
+
it will make a quaternion by rotating arout an axis.
|
|
136
|
+
|
|
137
|
+
> To react on rotation, effect has to be correcly prepared in the Editor. See "Apply emitter's rotation" switch in Emitter Guide in the Editor.
|
|
138
|
+
|
|
139
|
+
## Using turbulence (or noise)
|
|
140
|
+
|
|
141
|
+
You need to initialize noise texture before simulating effects which use it. Otherwise, your effects will be without any noise (or turbulence).
|
|
142
|
+
|
|
143
|
+
You have two options to make that: to generate or to download it.
|
|
144
|
+
|
|
145
|
+
### Generating noise
|
|
146
|
+
|
|
147
|
+
Generating noise is iterative process and you can spread it for many application frames (to render some progress bar, for example).
|
|
148
|
+
|
|
149
|
+
Below is an example function that generates the noise in one loop:
|
|
150
|
+
```javascript
|
|
151
|
+
function generateNoise() {
|
|
152
|
+
let noiseGenerator = new neutrino.NoiseGenerator();
|
|
153
|
+
while (!noiseGenerator.step()) { // approx. 5,000 steps
|
|
154
|
+
// you can use 'noiseGenerator.progress' to get generating progress from 0.0 to 1.0
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
Of course, this function will block execution of the script until finished. So, it's up to you how to make it executed over many frames if necessary.
|
|
159
|
+
|
|
160
|
+
On modern devices (and mobile as well) above function will be finished in up to 2 seconds.
|
|
161
|
+
|
|
162
|
+
> Please, pay attention to `NoiseGenerator` object. It has to be out of scope after noise is generated to allow GC to free allocated memory.
|
|
163
|
+
|
|
164
|
+
### Download noise
|
|
165
|
+
|
|
166
|
+
In case you don't want to generate noise texture for a some reason, you can distribute it pre-computed in a binary file with your application. This file is `/bin/neutrinoparticles.noise.bin` in the repository.
|
|
167
|
+
|
|
168
|
+
Then download and initialize with:
|
|
169
|
+
```javascript
|
|
170
|
+
neutrino.initializeNoise(
|
|
171
|
+
"/path/to/noise/directory/", // path to a directory where "neutrinoparticles.noise.bin" is located
|
|
172
|
+
function() {}, // success callback
|
|
173
|
+
function() {}, // fail callback
|
|
174
|
+
);
|
|
175
|
+
```
|
|
176
|
+
HTTP request will be used to download the file. It's size is 768Kb.
|
|
177
|
+
|
|
178
|
+
## Restart effect
|
|
179
|
+
|
|
180
|
+
To completely restart the effect:
|
|
181
|
+
|
|
182
|
+
```javascript
|
|
183
|
+
effect.restart(
|
|
184
|
+
[x, y, z], // (optional) new position, if changed
|
|
185
|
+
[x, y, z, w] // (optional) new rotation, if changed
|
|
186
|
+
);
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Instant effect position change (teleporting)
|
|
190
|
+
|
|
191
|
+
When you move your effect by changing it's position or rotation on each update, the effect is moved linearly. And even if it tightly generates particles, there will be a trail of particles from previous frame position to the new one.
|
|
192
|
+
|
|
193
|
+
In case, you want to change position instantly (teleport it), you need to reset position:
|
|
194
|
+
```javascript
|
|
195
|
+
effect.resetPosition(
|
|
196
|
+
[x, y, z], // new effect's position (pass null if you don't want to reset position)
|
|
197
|
+
[x, y, z, w] // new effect's rotation quaternion (pass null if you don't want to reset rotation)
|
|
198
|
+
);
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Number of particles
|
|
202
|
+
|
|
203
|
+
You can request total number of alive particles in topmost emitters (not attached to other emitters):
|
|
204
|
+
|
|
205
|
+
```javascript
|
|
206
|
+
let numParticles = effect.getNumParticles();
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
Or request number of particles in a single emitter by name (note underscore before name):
|
|
210
|
+
|
|
211
|
+
```javascript
|
|
212
|
+
let numEmitterParticles = effect._YourEmitterName.getNumParticles();
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
## Using pause
|
|
216
|
+
There are two different kinds of pause for effect:
|
|
217
|
+
|
|
218
|
+
1. Pause for whole effect. When all particles freeze and nothing else is generated:
|
|
219
|
+
|
|
220
|
+
```javascript
|
|
221
|
+
effect.pauseAllEmitters();
|
|
222
|
+
...
|
|
223
|
+
let isPaused = effect.areAllEmittersPaused();
|
|
224
|
+
...
|
|
225
|
+
effect.unpauseAllEmitters();
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
2. Generators pause. When already generated particles continue to live but new particles are not generated:
|
|
229
|
+
|
|
230
|
+
```javascript
|
|
231
|
+
effect.pauseGeneratorsInAllEmitters();
|
|
232
|
+
...
|
|
233
|
+
let isGeneratorsPaused = effect.areGeneratorsInAllEmittersPaused();
|
|
234
|
+
...
|
|
235
|
+
effect.unpauseGeneratorsInAllEmitters();
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
## Changing emitter's properties
|
|
239
|
+
|
|
240
|
+
You can control exposed emitter properties from your application. Any emitter property added on Emitter Scheme or Emitter Guide in the Editor is exposed in exported effect.
|
|
241
|
+
|
|
242
|
+
To change properties in a single emitter, you can access them directly from effect instance (note underscores before names):
|
|
243
|
+
```javascript
|
|
244
|
+
effect._EmitterName._YourFloatPropertyName = 10;
|
|
245
|
+
effect._EmitterName._YourVector2PropertyName = [10, 20];
|
|
246
|
+
effect._EmitterName._YourVector3PropertyName = [10, 20, 30];
|
|
247
|
+
effect._EmitterName._YourRotationPropertyName = neutrino.axisangle2quat_([0, 1, 0], 45);
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
To change properties with a given names for all topmost emitters:
|
|
251
|
+
```javascript
|
|
252
|
+
effect.setPropertyInAllEmitters("YourFloatPropertyName", 10);
|
|
253
|
+
effect.setPropertyInAllEmitters("YourVector2PropertyName", [10, 20]);
|
|
254
|
+
effect.setPropertyInAllEmitters("YourVector3PropertyName", [10, 20, 30]);
|
|
255
|
+
effect.setPropertyInAllEmitters("YourRotationPropertyName", neutrino.axisangle2quat_([0, 1, 0], 45));
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
For example, to control particles generating rate from your application:
|
|
259
|
+
1. In the Editor, in `Emitter Guide` window, in `Generation` section change type of `Periodic rate` to `Emitter property`
|
|
260
|
+
|
|
261
|
+

|
|
262
|
+
|
|
263
|
+
2. Set up property name to `MyParticlesPerSecond`
|
|
264
|
+
|
|
265
|
+

|
|
266
|
+
|
|
267
|
+
3. From `Emitters` window remember emitter name to access your property
|
|
268
|
+
|
|
269
|
+

|
|
270
|
+
|
|
271
|
+
4. Export effect, and after loading in your application you can change the property:
|
|
272
|
+
|
|
273
|
+
```javascript
|
|
274
|
+
effect._DefaultEmitter._MyParticlesPerSecond = 100;
|
|
275
|
+
```
|
|
Binary file
|