oxygen-core

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/components/PostprocessRack.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/PostprocessRack.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import System from '../systems/System'; import Component from '../systems/EntitySystem/Component'; import Camera, { PostprocessPass } from './Camera'; export class PostprocessRackPass extends PostprocessPass { get connections() { return this._connections; } set connections(value) { this._connections = value; } constructor() { super(); this._connections = null; this._passes = new Map(); } dispose() { this.unregisterAllPasses(); super.dispose(); this._connections = null; this._passes = null; } getTargetId(id) { if (typeof id !== 'string') { throw new Error('`id` is not type of String!'); } const found = id.indexOf(':'); if (found < 0) { return super.getTargetId(id); } else { const pid = id.substr(0, found); const tid = id.substr(found + 1); const pass = this._passes.get(pid); if (!pass) { throw new Error(`Unknown postprocess rack pass: ${pid}`); } return pass.getTargetId(tid); } } registerPass(id, pass) { if (typeof id !== 'string') { throw new Error('`id` is not type of String!'); } if (!(pass instanceof PostprocessPass)) { throw new Error('`pass` is not type of PostprocessPass!'); } this._passes.set(id, pass); } unregisterPass(id) { if (typeof id !== 'string') { throw new Error('`id` is not type of String!'); } this._passes.delete(id); } unregisterAllPasses() { this._passes.clear(); } getPass(id) { if (typeof id !== 'string') { throw new Error('`id` is not type of String!'); } return this._passes.get(id) || null; } onApply(gl, renderer, textureSource, renderTarget) { super.onApply(gl, renderer, textureSource, renderTarget); const { _connections, _passes } = this; if (!_connections || _connections.length <= 0) { console.warn('Cannot postprocess empty list of connections!'); return; } for (const c of _connections) { const [ source, effect, target ] = c; let ts = textureSource; let rt = renderTarget; if (source === target && !!source) { console.warn( `Cannot postprocess image when source and target are the same: ${source}` ); } if (!!source) { ts = this.getTargetId(source); if (!ts) { console.warn(`Trying to get unknown postprocess rack source: ${source}`); continue; } } if (!!target) { rt = this.getTargetId(target); if (!rt) { console.warn(`Trying to get unknown postprocess rack target: ${target}`); continue; } } const pass = _passes.get(effect); if (!pass) { console.warn( `Trying to apply unknown postprocess rack effect: ${effect}` ); continue; } pass.onApply(gl, renderer, ts, rt); } } } export class PostprocessRackRawEffectPass extends PostprocessPass { get shader() { return this._shader; } set shader(value) { this._shader = value; } get overrideUniforms() { return this._overrideUniforms; } set overrideUniforms(value) { this._overrideUniforms = value; } get overrideSamplers() { return this._overrideSamplers; } set overrideSamplers(value) { this._overrideSamplers = value; } constructor() { super(); this._shader = null; this._overrideUniforms = null; this._overrideSamplers = null; } dispose() { super.dipose(); this._shader = null; this._overrideUniforms = null; this._overrideSamplers = null; } onApply(gl, renderer, textureSource, renderTarget) { super.onApply(gl, renderer, textureSource, renderTarget); this.apply( gl, renderer, textureSource, renderTarget, this._shader, this._overrideUniforms, this._overrideSamplers ); } } /** * Camera postprocess rack. */ export default class PostprocessRack extends Component { static get propsTypes() { return { connections: 'array(array(any))', targets: 'array(any)', sourceFloatPointData: 'boolean', effects: 'map(any)', composites: 'map(any)' }; } /** * Component factory. * * @return {PostprocessRack} Component instance. */ static factory() { return new PostprocessRack(); } get connections() { return this._mainPass.connections; } set connections(value) { if (!value) { this._mainPass.connections = null; return; } if (!Array.isArray(value)) { throw new Error('`value` is not type of Array!'); } for (const item of value) { if (!Array.isArray(item)) { throw new Error('One of `value` items is not type of Array!'); } } this._mainPass.connections = value; } get targets() { return this._targets; } set targets(value) { if (!value) { this._targets = null; return; } const { _targets, _mainPass } = this; if (!!_targets) { for (const id in _targets) { _mainPass.destroyTarget(id); } } this._targets = value; if (!!value) { for (const id in value) { const { level, floatPointData, potMode } = value[id]; _mainPass.createTarget(id, level, floatPointData, potMode); } } } get sourceFloatPointData() { return this._sourceFloatPointData; } set sourceFloatPointData(value) { if (typeof value !== 'boolean') { throw new Error('`value` is not type of Boolean!'); } this._sourceFloatPointData = value; } get effects() { return this._effects; } set effects(value) { this._unregisterEffects(); this._effects = value; this._registerEffects(); } get composites() { return this._composites; } set composites(value) { this._unregisterComposites(); this._composites = value; this._registerComposites(); } /** * Constructor. */ constructor() { super(); this._sourceFloatPointData = false; this._mainPass = new PostprocessRackPass(); this._targets = null; this._effects = null; this._effectsPasses = null; this._composites = null; this._compositesPasses = null; this._compositesEffectsPasses = null; } /** * Destructor (disposes internal resources). * * @example * rack.dispose(); * rack = null; */ dispose() { super.dispose(); this._mainPass.dispose(); this._mainPass = null; this._targets = null; this._effects = null; this._effectsPasses = null; this._composites = null; this._compositesPasses = null; this._compositesEffectsPasses = null; } getTargetId(id) { if (typeof id !== 'string') { throw new Error('`id` is not type of String!'); } const found = id.indexOf(':'); if (found < 0) { return super.getTargetId(id); } else { const pid = id.substr(0, found); const tid = id.substr(found + 1); const pass = this._passes.get(pid); if (!pass) { throw new Error(`Unknown postprocess rack pass: ${pid}`); } return pass.getTargetId(tid); } } registerPass(id, pass) { this._mainPass.registerPass(id, pass); } unregisterPass(id) { this._mainPass.unregisterPass(id); } unregisterAllPasses() { this._mainPass.unregisterAllPasses(); } getPass(id) { return this._mainPass.getPass(id); } onAttach() { this._register(); } onDetach() { this._unregister(); } _register() { const { entity } = this; if (!entity) { return; } const camera = entity.getComponent(Camera); if (!camera) { throw new Error('There is no Camera component in entity!'); } camera.registerPostprocess(this._mainPass, this._sourceFloatPointData); } _unregister() { const { entity } = this; if (!entity) { return; } const camera = entity.getComponent(Camera); if (!camera) { throw new Error('There is no Camera component in entity!'); } camera.unregisterPostprocess(); } _registerEffects() { const { _effects } = this; if (!_effects) { return; } this._effectsPasses = new Map(); for (const id in _effects) { const { shader, overrideUniforms, overrideSamplers } = _effects[id]; const pass = new PostprocessRackRawEffectPass(); pass.shader = shader; pass.overrideUniforms = overrideUniforms; pass.overrideSamplers = overrideSamplers; this._effectsPasses.set(id, pass); this.registerPass(id, pass); } } _unregisterEffects() { const { _effectsPasses } = this; if (!_effectsPasses) { return; } for (const [id, pass] of _effectsPasses.entries()) { pass.dispose(); this.unregisterPass(id); } this._effectsPasses = null; } _registerComposites() { const { _composites } = this; if (!_composites) { return; } const { AssetSystem } = System.systems; if (!AssetSystem) { throw new Error('There is no registered AssetSystem!'); } this._compositesPasses = new Map(); this._compositesEffectsPasses = new Map(); for (const id in _composites) { const assetPath = _composites[id]; if (!assetPath) { throw new Error('There is no postprocess rack effect asset provided!'); } const asset = AssetSystem.get(`postprocess://${assetPath}`); if (!asset) { throw new Error(`There is no loaded postprocess rack effect asset: ${assetPath}`); } this._compositesEffectsPasses[id] = new Map(); const { targets, connections, effects } = asset; const mainPass = new PostprocessRackPass(); for (const effect in effects) { const { shader, overrideUniforms, overrideSamplers } = effects[effect]; const pass = new PostprocessRackRawEffectPass(); pass.shader = shader; pass.overrideUniforms = overrideUniforms; pass.overrideSamplers = overrideSamplers; this._compositesEffectsPasses[id][effect] = pass; mainPass.registerPass(effect, pass); } for (const target in targets) { const { level, floatPointData, potMode } = targets[target]; mainPass.createTarget(target, level, floatPointData, potMode); } mainPass.connections = connections; this.registerPass(id, mainPass); } } _unregisterComposites() { const { _compositesPasses, _compositesEffectsPasses } = this; if (!_compositesPasses) { return; } for (const [id, pass] of _compositesPasses.entries()) { pass.dispose(); this.unregisterPass(id); } for (const [, pass] of _compositesEffectsPasses.entries()) { pass.dispose(); } this._compositesPasses = null; this._compositesEffectsPasses = null; } } </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>