oxygen-core

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/components/Particles.js | oxygen-core</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> <meta name="description" content="Oxygen game engine (Xenon Core for browsers)"><meta property="twitter:card" content="summary"><meta property="twitter:title" content="oxygen-core"><meta property="twitter:description" content="Oxygen game engine (Xenon Core for browsers)"></head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <div class="search-box"> <img src="./image/search.png"> <input class="search-input"> <ul class="search-result"></ul> </div> <a style="position:relative; top:3px;" href="https://github.com/PsichiX/Oxygen"><img width="20px" src="./image/github.png"></a></header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc">C<a href="class/src/index.js~EventsController.html">EventsController</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-lazyInitialization">lazyInitialization</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#asset-loaders">asset-loaders</a>C<a href="class/src/asset-loaders/AssemblyAsset.js~AssemblyAsset.html">AssemblyAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/AtlasAsset.js~AtlasAsset.html">AtlasAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/BinaryAsset.js~BinaryAsset.html">BinaryAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/FontAsset.js~FontAsset.html">FontAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/ImageAsset.js~ImageAsset.html">ImageAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/JSONAsset.js~JSONAsset.html">JSONAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/MusicAsset.js~MusicAsset.html">MusicAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/PackAsset.js~PackAsset.html">PackAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/ParticleSystemAsset.js~ParticleSystemAsset.html">ParticleSystemAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/PostprocessRackEffectAsset.js~PostprocessRackEffectAsset.html">PostprocessRackEffectAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SVGAsset.js~SVGAsset.html">SVGAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SceneAsset.js~SceneAsset.html">SceneAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SetAsset.js~SetAsset.html">SetAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/ShaderAsset.js~ShaderAsset.html">ShaderAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SkeletonAsset.js~SkeletonAsset.html">SkeletonAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/SoundAsset.js~SoundAsset.html">SoundAsset</a></li> <li data-ice="doc">C<a href="class/src/asset-loaders/TextAsset.js~TextAsset.html">TextAsset</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components">components</a>C<a href="class/src/components/AtlasSprite.js~AtlasSprite.html">AtlasSprite</a></li> <li data-ice="doc">C<a href="class/src/components/Camera.js~Camera.html">Camera</a></li> <li data-ice="doc">C<a href="class/src/components/Camera.js~PostprocessPass.html">PostprocessPass</a></li> <li data-ice="doc">C<a href="class/src/components/Camera2D.js~Camera2D.html">Camera2D</a></li> <li data-ice="doc">C<a href="class/src/components/CameraDirector2D.js~CameraDirector2D.html">CameraDirector2D</a></li> <li data-ice="doc">C<a href="class/src/components/CircleShape.js~CircleShape.html">CircleShape</a></li> <li data-ice="doc">C<a href="class/src/components/Container.js~Container.html">Container</a></li> <li data-ice="doc">C<a href="class/src/components/DeferredRenderer.js~DeferredPipeline.html">DeferredPipeline</a></li> <li data-ice="doc">C<a href="class/src/components/DeferredRenderer.js~DeferredRenderer.html">DeferredRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/GestureListener.js~GestureListener.html">GestureListener</a></li> <li data-ice="doc">C<a href="class/src/components/InputHandler.js~InputHandler.html">InputHandler</a></li> <li data-ice="doc">C<a href="class/src/components/MultipassRenderer.js~MultipassPipeline.html">MultipassPipeline</a></li> <li data-ice="doc">C<a href="class/src/components/MultipassRenderer.js~MultipassRenderer.html">MultipassRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/Particles.js~Particles.html">Particles</a></li> <li data-ice="doc">C<a href="class/src/components/PhysicsBody.js~PhysicsBody.html">PhysicsBody</a></li> <li data-ice="doc">C<a href="class/src/components/PhysicsWorld.js~PhysicsWorld.html">PhysicsWorld</a></li> <li data-ice="doc">C<a href="class/src/components/PolygonShape.js~PolygonShape.html">PolygonShape</a></li> <li data-ice="doc">C<a href="class/src/components/PostprocessRack.js~PostprocessRack.html">PostprocessRack</a></li> <li data-ice="doc">C<a href="class/src/components/PostprocessRack.js~PostprocessRackPass.html">PostprocessRackPass</a></li> <li data-ice="doc">C<a href="class/src/components/PostprocessRack.js~PostprocessRackRawEffectPass.html">PostprocessRackRawEffectPass</a></li> <li data-ice="doc">C<a href="class/src/components/PrefabInstance.js~PrefabInstance.html">PrefabInstance</a></li> <li data-ice="doc">C<a href="class/src/components/RectangleRenderer.js~RectangleRenderer.html">RectangleRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/RectangleShape.js~RectangleShape.html">RectangleShape</a></li> <li data-ice="doc">C<a href="class/src/components/Script.js~Script.html">Script</a></li> <li data-ice="doc">C<a href="class/src/components/Shape.js~Shape.html">Shape</a></li> <li data-ice="doc">C<a href="class/src/components/Skeleton.js~Skeleton.html">Skeleton</a></li> <li data-ice="doc">C<a href="class/src/components/SortedActions.js~SortedActions.html">SortedActions</a></li> <li data-ice="doc">C<a href="class/src/components/Sprite.js~Sprite.html">Sprite</a></li> <li data-ice="doc">C<a href="class/src/components/TextRenderer.js~TextRenderer.html">TextRenderer</a></li> <li data-ice="doc">C<a href="class/src/components/UiLayout.js~UiLayout.html">UiLayout</a></li> <li data-ice="doc">C<a href="class/src/components/UiSprite.js~UiSprite.html">UiSprite</a></li> <li data-ice="doc">C<a href="class/src/components/VerticesRenderer.js~VerticesRenderer.html">VerticesRenderer</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems">systems</a>C<a href="class/src/systems/AssemblySystem.js~AssemblySystem.html">AssemblySystem</a></li> <li data-ice="doc">C<a href="class/src/systems/AudioSystem.js~AudioSystem.html">AudioSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/InputSystem.js~InputSystem.html">InputSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~Command.html">Command</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~Pipeline.html">Pipeline</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~RenderFullscreenCommand.html">RenderFullscreenCommand</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~RenderSystem.html">RenderSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/RenderSystem.js~RenderTargetWrapper.html">RenderTargetWrapper</a></li> <li data-ice="doc">C<a href="class/src/systems/StorageSystem.js~StorageSystem.html">StorageSystem</a></li> <li data-ice="doc">C<a href="class/src/systems/System.js~System.html">System</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-assetsystem">systems/AssetSystem</a>C<a href="class/src/systems/AssetSystem/Asset.js~Asset.html">Asset</a></li> <li data-ice="doc">C<a href="class/src/systems/AssetSystem/index.js~AssetSystem.html">AssetSystem</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-entitysystem">systems/EntitySystem</a>C<a href="class/src/systems/EntitySystem/Component.js~Component.html">Component</a></li> <li data-ice="doc">C<a href="class/src/systems/EntitySystem/Entity.js~Entity.html">Entity</a></li> <li data-ice="doc">C<a href="class/src/systems/EntitySystem/index.js~EntitySystem.html">EntitySystem</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils">utils</a>C<a href="class/src/utils/Events.js~Events.html">Events</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-angleDifference">angleDifference</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-bezierCubic">bezierCubic</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-convertGlobalPointToLocalPoint">convertGlobalPointToLocalPoint</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-convertLocalPointToGlobalPoint">convertLocalPointToGlobalPoint</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-findMapKeyOfValue">findMapKeyOfValue</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-getMipmapScale">getMipmapScale</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-getPOT">getPOT</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-isGlobalPointInGlobalBoundingBox">isGlobalPointInGlobalBoundingBox</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-isLocalPointInLocalBoundingBox">isLocalPointInLocalBoundingBox</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-isPOT">isPOT</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-propsEnumStringify">propsEnumStringify</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-stringToRGBA">stringToRGBA</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-waitForSeconds">waitForSeconds</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-Box2D">Box2D</a></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">src/components/Particles.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import VerticesRenderer from './VerticesRenderer'; import parser from '../utils/particleSystemParser'; // base vertex layout: // float: life; // float: timeScale; // vec2: vertex position; // vec2: tex coord; const processors = new Map(); /** * Particles renderer. * * @example * const component = new Particles(); * component.deserialize({ shader: 'shaders/particles.json', processor: 'particles/fire.ps' }); */ export default class Particles extends VerticesRenderer { /** * Component factory. * * @return {Particles} Component instance. */ static factory() { return new Particles(); } /** @type {*} */ static get propsTypes() { return { visible: VerticesRenderer.propsTypes.visible, shader: VerticesRenderer.propsTypes.shader, overrideUniforms: VerticesRenderer.propsTypes.overrideUniforms, overrideSamplers: VerticesRenderer.propsTypes.overrideSamplers, layers: VerticesRenderer.propsTypes.layers, capacity: 'integer', processor: 'string', overrideParams: 'map(number)', constantBurst: 'boolean', constantBurstDelay: 'number', constantBurstCount: 'integer' }; } /** * Register new particles processor. * * @param {string} id - Processor id. * @param {string} contents - Processor code. * * @example * const code = 'attribute x: 0;\nattribute y: 1;\nprogram:\ny -= deltaTime * life;'; * Particles.registerProcessor('fire', code); */ static registerProcessor(id, contents) { if (typeof id !== 'string') { throw new Error('`id` is not type of String!'); } if (typeof contents !== 'string') { throw new Error('`contents` is not type of String!'); } if (processors.has(id)) { throw new Error(`There is already registered processor: ${id}`); } const p = parser.parse(contents); const { attributes, params, code } = p; for (const key in attributes) { if (key === 'life' || key === 'timeScale' || key === 'deltaTime' || key === 'ps_View' || key === 'this' ) { throw new Error(`Cannot use attribute name: ${key}`); } } for (const key in params) { if (key === 'life' || key === 'timeScale' || key === 'deltaTime' || key === 'ps_View' || key === 'this' ) { throw new Error(`Cannot use param name: ${key}`); } } let size = 0; let processor = 'const life=ps_View[0];const timeScale=ps_View[1];if(life<=0)return false;'; for (const key in attributes) { const offset = attributes[key]; size = Math.max(size, offset + 1); processor += `let ${key}=ps_View[${offset + 6}];`; } const vsize = size + 6; processor += code + `;ps_View[0]=ps_View[${vsize}]=ps_View[${vsize * 2}]=ps_View[${vsize * 3}]=life-timeScale*deltaTime;`; for (const key in attributes) { const offset = attributes[key]; processor += `ps_View[${offset + 6}]=ps_View[${offset + 6 + vsize}]=ps_View[${offset + 6 + vsize * 2}]=ps_View[${offset + 6 + vsize * 3}]=${key};`; } processor += 'return true;'; processors.set(id, { size, params, processor: new Function('ps_View', 'deltaTime', processor) }); } /** * Unregister existing processor. * * @param {string} id - processor id * * @example * Particles.unregisterProcessor('fire'); */ static unregisterProcessor(id) { if (typeof id !== 'string') { throw new Error('`id` is not type of String!'); } if (!processors.has(id)) { throw new Error(`There is no registered processor: ${id}`); } processors.delete(id); } /** @type {number} */ get capacity() { return this._capacity; } /** @type {number} */ set capacity(value) { if (typeof value !== 'number') { throw new Error('`value` is not type of Number!'); } this._capacity = value | 0; this._rebuildParticlesData(); } /** @type {string|null} */ get processor() { return this._processor; } /** @type {string|null} */ set processor(value) { if (!value) { this._processor = null; this._processorAction = null; this._viewSize = 0; return; } if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } if (!processors.has(value)) { throw new Error(`There is no registered processor: ${value}`); } const { _overrideParams } = this; const p = processors.get(value); const { size, params, processor } = p; const pms = {}; for (const key in params) { pms[key] = params[key] || 0; } for (const key in _overrideParams) { pms[key] = _overrideParams[key] || 0; } this._processor = value; this._processorAction = processor; this._viewSize = size; this._params = pms; this._rebuildParticlesData(); } /** @type {*} */ get overrideParams() { return { ...this._overrideParams }; } /** @type {*} */ set overrideParams(value) { this._overrideParams = {}; for (const key in value) { const v = value[key]; if (typeof v !== 'number') { throw new Error(`\`value[${key}]\` is not type of Number!`); } this._overrideParams[key] = v; } this.processor = this.processor; } /** @type {Function|null} */ get burstGenerator() { return this._burstGenerator; } /** @type {Function|null} */ set burstGenerator(value) { if (!!value && !(value instanceof Function)) { throw new Error('`value` is not type of Function!'); } this._burstGenerator = value; } /** @type {boolean} */ get constantBurst() { return this._constantBurst; } /** @type {boolean} */ set constantBurst(value) { if (typeof value !== 'boolean') { throw new Error('`value` is not type of Boolean!'); } this._constantBurst = value; this._constantBurstTimeout = 0; } /** @type {number} */ get constantBurstDelay() { return this._constantBurstDelay; } /** @type {number} */ set constantBurstDelay(value) { if (typeof value !== 'number') { throw new Error('`value` is not type of Number!'); } this._constantBurstDelay = value; } /** @type {number} */ get constantBurstCount() { return this._constantBurstCount; } /** @type {number} */ set constantBurstCount(value) { if (typeof value !== 'number') { throw new Error('`value` is not type of Number!'); } this._constantBurstCount = value | 0; } /** @type {number} */ get activeCount() { return this._active; } /** * Constructor. */ constructor() { super(); this._capacity = 0; this._views = null; this._processor = null; this._processorAction = null; this._viewSize = 0; this._overrideParams = null; this._burstGenerator = null; this._constantBurst = false; this._constantBurstDelay = 1; this._constantBurstCount = -1; this._constantBurstTimeout = 0; this._params = null; this._cursor = 0; this._active = 0; this._emitParticle = this.emitParticle.bind(this); this._rebuildParticlesData(); } /** * @override */ dispose() { super.dispose(); this._views = null; this._processor = null; this._processorAction = null; this._overrideParams = null; this._params = null; } /** * Emit single particle. * * @param {number} life - Initial life value. * @param {number} timeScale - Particle life-cycle time scale. * @param {number} size - Particle size. * @param {*} args - Particle attributes. * * @return {boolean} True if emitted, false otherwise. * * @example * component.emitParticle(1, 0.5, 10); */ emitParticle(life, timeScale, size, ...args) { if (typeof life !== 'number') { throw new Error('`life` is not type of Number!'); } if (typeof timeScale !== 'number') { throw new Error('`timeScale` is not type of Number!'); } const index = this._findFreeIndex(); if (index < 0) { return false; } ++this._active; const { _viewSize } = this; const hs = size * 0.5; const vs = _viewSize + 6; const vs2 = vs + vs; const vs3 = vs2 + vs; const view = this._views[index]; view[0] = view[vs] = view[vs2] = view[vs3] = life; view[1] = view[vs + 1] = view[vs2 + 1] = view[vs3 + 1] = timeScale; view[2] = -hs; view[3] = -hs; view[4] = 0; view[5] = 0; view[vs + 2] = hs; view[vs + 3] = -hs; view[vs + 4] = 1; view[vs + 5] = 0; view[vs2 + 2] = hs; view[vs2 + 3] = hs; view[vs2 + 4] = 1; view[vs2 + 5] = 1; view[vs3 + 2] = -hs; view[vs3 + 3] = hs; view[vs3 + 4] = 0; view[vs3 + 5] = 1; let i = 6; for (const arg of args) { view[i] = view[vs + i] = view[vs2 + i] = view[vs3 + i] = arg; ++i; } return true; } /** * Emit burst of particles using burst generator function. * * @param {number} count - Number of particles to emit. * @param {*} args - Particles attributes. * * @example * component.emitBurst(100); */ emitBurst(count, ...args) { const { _burstGenerator } = this; if (!_burstGenerator) { throw new Error('Burst generator is not provided!'); } if (count < 0) { count = this._capacity; } while (count-- > 0) { _burstGenerator.call(this, this._emitParticle, ...args); } } /** * Set particles parameter. * * @param {string} id - Parameter id. * @param {number} value - Parameter value. * * @example * component.setParam('alpha', 0.5); */ setParam(id, value) { if (typeof id !== 'string') { throw new Error('`id` is not type of String!'); } if (typeof value !== 'number') { throw new Error('`value` is not type of Number!'); } const { _params } = this; if (!(id in _params)) { throw new Error(`Unknown param: ${id}`); } this._params[id] = value; } /** * @override */ onAction(name, ...args) { if (name === 'update') { return this.onUpdate(...args); } else { return super.onAction(name, ...args); } } /** * @override */ onUpdate(deltaTime) { deltaTime *= 0.001; if (this._constantBurst) { if (this._constantBurstTimeout <= 0) { this.emitBurst(this._constantBurstCount); this._constantBurstTimeout = this._constantBurstDelay; } this._constantBurstTimeout -= deltaTime; } const { _processorAction, _views } = this; if (!!_processorAction) { let active = 0; for (const view of _views) { if (this._processorAction.call(this._params, view, deltaTime)) { ++active; } } this._active = active; this.reuploadData(); } } _rebuildParticlesData() { const { _capacity, _viewSize } = this; const vsize = _viewSize + 6; const vertices = this.vertices = new Float32Array(vsize * 4 * _capacity); const views = this._views = []; let offset = 0; let index = 0; const indices = []; for (let i = 0; i < _capacity; ++i) { views.push(vertices.subarray(offset, offset + vsize * 4)); indices.push( index, index + 1, index + 2, index + 2, index + 3, index ); offset += vsize * 4; index += 4; } this.indices = indices; this.verticesUsage = VerticesRenderer.BufferUsage.DYNAMIC; this._cursor = 0; } _findFreeIndex() { const { _capacity, _active, _views } = this; if (_active >= _capacity) { return -1; } let view = null; for (let i = 0; i < _capacity; ++i) { view = _views[this._cursor]; if (view[0] <= 0) { return this._cursor; } ++this._cursor; if (this._cursor >= _capacity) { this._cursor = 0; } } return -1; } } </code></pre> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc(1.1.0)<img src="./image/esdoc-logo-mini-black.png"></a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>