pxlParticles.ParticleBase

pxlParticles.ParticleBase

Default Particle System Class

Access at - pxlNav.pxlEffects.pxlParticles.ParticleBase

Outputs a basic system expecting uniforms, vertex shader, and fragment shader to be passed into build()

Method List

new ParticleBase | | | | | | | | | | |

Constructor

new pxlParticles/ParticleBase(room, systemNameopt)^Top

Description:

  • Create a ParticleBase instance.

Source:
Properties:
Name Type Description
name string

The name of the particle system.
room Object

The room object where the particles will be added.
geometry BufferGeometry

The geometry of the particle system.
material Material

The material of the particle system.
points Points

The points object of the particle system.
count number

The number of particles.
pscale Vector2

The scale of the particles.
position Vector3

The position of the particle system.
atlasPath string

The path to the atlas texture file.
atlasAlphaPath string

The path to the atlas alpha texture file.
hasAlphaMap boolean

Flag for whether the atlas texture has an alpha map.
shaderSettings Object

Shader settings for the particle system.
knownKeys Array.<string>

Known keys for shader settings.
Examples
this.shaderSettings = {
  "vertCount" : 1000,
  "pScale" : 7,
  "atlasRes" : 4,
  "atlasPicks" : [],
  "randomAtlas" : false,
  "additiveBlend" : false,
  "hasLights" : false,
}
// This is a default particle system
//   It expects uniforms, a vertex shader, and a fragment shader to be passed into the build() function
//
// Access this class from your pxlRoom javascript file
//   Create a new ParticleBase instance
build(){
 let dust = new pxlParticleBase( this, 'dust' );
 let uniforms = {};
 let vertShader = dustVert( dust.shaderSettings );
 let fragShader = dustFrag( hasAlphaMap );
 dust.build( uniforms, vertShader, fragShader );
}
Parameters:
Name Type Attributes Default Description
room Object null

The room object where the particle system will be added.
systemName string <optional>
 'particles'

The name of the particle system.

Methods

(static) addToScene(vertexCount, pScale, atlasRes, atlasPicks) → {Object}^Top

Description:

  • Add the particle system to the scene.

Source:
Parameters:
Name Type Description
vertexCount number

The number of vertices.
pScale number

The scale of the particles.
atlasRes number

The atlas resolution.
atlasPicks Array

The atlas picks.
Returns:

The particle system added to the scene.

Type
Object

(static) atlasArrayPicker(arr) → {Array}^Top

Description:

  • Pick a random atlas value from an array.

Source:
Example
// Pick a random atlas value from an array
import { pxlNav } from 'pxlNav.esm.js';
const pxlParticleBase = pxlNav.pxlEffects.pxlParticles.pxlParticle

build(){
  pxlParticleBase.atlasArrayPicker( [ [0.0,0.75], [0.0,0.5], [0.25,0.75], [0.25,0.5] ] );
  // Output 1: [0.0,0.75]
  // Output 2: [0.0,0.5]
  // Output 3: [0.25,0.75]
  // Output 4: [0.0,0.5]
}
Parameters:
Name Type Description
arr Array

The array of atlas values.
Returns:

A random atlas value from the array.

Type
Array

(static) atlasRandomGen(atlasResopt, dSizeopt) → {Array}^Top

Description:

  • Generate random atlas values.

Source:
Example
// Generate random atlas values
import { pxlNav } from 'pxlNav.esm.js';
const pxlParticleBase = pxlNav.pxlEffects.pxlParticles.pxlParticle

build(){
 pxlParticleBase.atlasRandomGen( 4, 2 );
// Output: [0.0,0.75]
}
Parameters:
Name Type Attributes Default Description
atlasRes number <optional>
 4

The atlas resolution.
dSize number <optional>
 2

The size of the atlas.
Returns:

Random atlas values.

Type
Array

(static) atlasRandomList(countopt, resopt, sizeopt) → {Array}^Top

Description:

  • Generate a list of random atlas values.

Source:
Example
// Generate a list of random atlas values
import { pxlNav } from 'pxlNav.esm.js';
const pxlParticleBase = pxlNav.pxlEffects.pxlParticles.pxlParticle

build(){
  pxlParticleBase.atlasRandomList( 4, 4, 2 );
  // Output: [ [0.0,0.75], [0.0,0.5], [0.25,0.75], [0.25,0.5] ]
}
Parameters:
Name Type Attributes Default Description
count number <optional>
 4

The number of random atlas values to generate.
res number <optional>
 4

The atlas resolution.
size number <optional>
 2

The size of the atlas.
Returns:

A list of random atlas values.

Type
Array

(static) dupeArray(val, count) → {Array}^Top

Description:

  • Duplicate an array.

Source:
Example
// Duplicate an array
import { pxlNav } from 'pxlNav.esm.js';
const pxlParticleBase = pxlNav.pxlEffects.pxlParticles.pxlParticle

build(){
 pxlParticleBase.dupeArray( [0.0,0.75], 4 );
 // Output: [0.0,0.75], [0.0,0.75], [0.0,0.75], [0.0,0.75]
}
Parameters:
Name Type Description
val Array

The array to duplicate.
count number

The number of times to duplicate the array.
Returns:

The duplicated array.

Type
Array

(static) elementDuplicator(arr, countopt) → {Array}^Top

Description:

  • Duplicate an element in an array.

Source:
Example
// Duplicate an element in an array
import { pxlNav } from 'pxlNav.esm.js';
const pxlParticleBase = pxlNav.pxlEffects.pxlParticles.pxlParticle

build(){
  pxlParticleBase.elementDuplicator([ [0.0,0.75], [0.0,0.5], [0.25,0.75], [0.25,0.5] ],4);
  // Output: [
  //    [0.0,0.75], [0.0,0.75], [0.0,0.75], [0.0,0.75],
  //    [0.0,0.5], [0.0,0.5], [0.0,0.5], [0.0,0.5],   
  //    [0.25,0.75], [0.25,0.75], [0.25,0.75], [0.25,0.75], 
  //    [0.25,0.5], [0.25,0.5], [0.25,0.5], [0.25,0.5]
  // ]
}
Parameters:
Name Type Attributes Default Description
arr Array

The array to duplicate.
count number <optional>
 4

The number of times to duplicate the array.
Returns:

The duplicated array.

Type
Array

(static) getSettings() → {Object}^Top

Description:

  • Set the shader settings for the particle system.

Source:
Returns:

The shader settings for the particle system.

Type
Object

(static) hasPointLights() → {boolean}^Top

Description:

  • Check if the room has point lights.

Source:
Returns:

Flag for whether the room has point lights.

Type
boolean

(static) newMaterial(mtl) → {void}^Top

Description:

  • Set the material for the particle system.

Source:
Example
// Run from your pxlRoom javascript file
// Create an Atlas Material
import { SphereGeometry, Mesh } from 'three';

build(){
 let sphere = new SphereGeometry( 1, 32, 32 );
 let mtl = pxlNav.pxlEffects.pxlParticles.pxlParticleBase.newMaterial();
 let mesh = new Mesh( sphere, mtl );
 this.scene.add( mesh );
}
Parameters:
Name Type Description
mtl Material

The material for the particle system.
Returns:
Type
void

(static) setAtlasPath(path, alphaPathopt) → {void}^Top

Description:

  • Set the path for the atlas texture file.

Source:
Example
// Run from your pxlRoom javascript file
// Set the path for the atlas texture file
build(){
let dust = new pxlParticleBase();
dust.setAtlasPath( "sprite_dustAtlas_rgb.jpg", "sprite_dustAtlas_alpha.jpg" );
}
Parameters:
Name Type Attributes Default Description
path string

The path to the atlas texture file.
alphaPath string <optional>
 null

The path to the atlas alpha texture
Returns:
Type
void

(static) setPosition(position)^Top

Description:

  • Set the position of the particle system.

Source:
Parameters:
Name Type Description
position Vector3

The position of the particle system.