oxygen-core

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/components/DeferredRenderer.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/DeferredRenderer.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import Component from '../systems/EntitySystem/Component'; import { Command, Pipeline, RenderFullscreenCommand } from '../systems/RenderSystem'; import Camera from './Camera'; export class DeferredPipeline extends Command { get gBufferId() { return this._gBufferId; } set gBufferId(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._gBufferId = value; this._dirty = true; } get lBufferId() { return this._lBufferId; } set lBufferId(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._lBufferId = value; this._dirty = true; } get gBufferTargets() { return this._gBufferTargets; } set gBufferTargets(value) { if (typeof value === 'number') { this._gBufferTargets = value | 0; } else if (Array.isArray(value)) { this._gBufferTargets = value; } else { throw new Error('`value` is not type of either Number or Array!'); } this._dirty = true; } get lBufferTargets() { return this._lBufferTargets; } set lBufferTargets(value) { if (typeof value === 'number') { this._lBufferTargets = value | 0; } else if (Array.isArray(value)) { this._lBufferTargets = value; } else { throw new Error('`value` is not type of either Number or Array!'); } this._dirty = true; } get gBufferLayer() { return this._gBufferLayer; } set gBufferLayer(value) { if (!value) { this._gBufferLayer = null; return; } if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._gBufferLayer = value; } get lBufferLayer() { return this._lBufferLayer; } set lBufferLayer(value) { if (!value) { this._lBufferLayer = null; return; } if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._lBufferLayer = value; } get fullscreen() { return this._fullscreen; } constructor(owner) { super(); this._owner = owner; this._renderer = null; this._gBuffer = null; this._lBuffer = null; this._gBufferId = '#deferred-g-buffer'; this._lBufferId = '#deferred-l-buffer'; this._gBufferIdUsed = null; this._lBufferIdUsed = null; this._gBufferTargets = 2; this._lBufferTargets = 2; this._gBufferLayer = 'g-buffer'; this._lBufferLayer = 'l-buffer'; this._fullscreen = new RenderFullscreenCommand(); this._dirty = true; } dispose() { super.dispose(); const { _renderer, _gBufferIdUsed, _lBufferIdUsed, _fullscreen } = this; if (!!_renderer) { if (!!_gBufferIdUsed) { _renderer.unregisterRenderTarget(_gBufferIdUsed); } if (!!_lBufferIdUsed) { _renderer.unregisterRenderTarget(_lBufferIdUsed); } } if (!!_fullscreen) { _fullscreen.dispose(); } this._owner = null; this._renderer = null; this._gBufferId = null; this._lBufferId = null; this._gBufferIdUsed = null; this._lBufferIdUsed = null; this._gBufferLayer = null; this._lBufferLayer = null; this._fullscreen = null; } onRender(gl, renderer, deltaTime, layer) { this._ensureState(renderer); const { _owner, _gBufferLayer, _lBufferLayer } = this; const { captureEntity, entity } = _owner; const target = !!captureEntity ? entity.findEntity(captureEntity) : entity; const rtt = renderer.activeRenderTarget; if (!!_gBufferLayer) { renderer.enableRenderTarget(this._gBufferIdUsed); target.performAction('render-layer', gl, renderer, deltaTime, _gBufferLayer); renderer.disableRenderTarget(); } if (!!_lBufferLayer) { renderer.enableRenderTarget(this._lBufferIdUsed); target.performAction('render-layer', gl, renderer, deltaTime, _lBufferLayer); renderer.disableRenderTarget(); } if (!!rtt) { renderer.enableRenderTarget(rtt, false); } this._fullscreen.onRender(gl, renderer, deltaTime, layer); } onResize(width, height) { this._dirty = true; } _ensureState(renderer) { if (!this._dirty) { return; } const { _gBufferId, _lBufferId } = this; if (!_gBufferId) { throw new Error('`gBufferId` cannot be null!'); } if (!_lBufferId) { throw new Error('`lBufferId` cannot be null!'); } if (!!this._gBufferIdUsed) { renderer.unregisterRenderTarget(this._gBufferIdUsed); } this._gBufferIdUsed = this._gBufferId; renderer.registerRenderTargetMulti( this._gBufferIdUsed, renderer.canvas.width, renderer.canvas.height, this._gBufferTargets ); if (!!this._lBufferIdUsed) { renderer.unregisterRenderTarget(this._lBufferIdUsed); } this._lBufferIdUsed = this._lBufferId; renderer.registerRenderTarget( this._lBufferIdUsed, renderer.canvas.width, renderer.canvas.height, this._lBufferTargets ); this._renderer = renderer; this._dirty = false; } } /** * Deferred pipeline renderer. */ export default class DeferredRenderer extends Component { static get propsTypes() { return { shader: 'string_null', overrideUniforms: 'map(any)', overrideSamplers: 'map(any)', gBufferId: 'string', lBufferid: 'string', gBufferTargets: 'number|array(any)', lBufferTargets: 'number|array(any)', gBufferLayer: 'string_null', lBufferLayer: 'string_null' }; } static factory() { return new DeferredRenderer(); } /** @type {String|null} */ get shader() { return this._pipeline.fullscreen.shader; } /** @type {String|null} */ set shader(value) { this._pipeline.fullscreen.shader = value; } /** @type {*} */ get overrideUniforms() { const { fullscreen } = this._pipeline; const result = {}; for (const [key, value] of fullscreen.overrideUniforms) { result[key] = value; } return result; } /** @type {*} */ set overrideUniforms(value) { const { overrideUniforms } = this._pipeline.fullscreen; overrideUniforms.clear(); if (!value) { return; } for (const name in value) { overrideUniforms.set(name, value[name]); } } /** @type {*} */ get overrideSamplers() { const { fullscreen } = this._pipeline; const result = {}; for (const [key, value] of fullscreen.overrideSamplers) { result[key] = value; } return result; } /** @type {*} */ set overrideSamplers(value) { const { overrideSamplers } = this._pipeline.fullscreen; overrideSamplers.clear(); if (!value) { return; } for (const name in value) { overrideSamplers.set(name, value[name]); } } /** @type {String} */ get gBufferId() { return this._pipeline.gBufferId; } /** @type {String} */ set gBufferId(value) { this._pipeline.gBufferId = value; } /** @type {String} */ get lBufferId() { return this._pipeline.lBufferId; } /** @type {String} */ set lBufferId(value) { this._pipeline.lBufferId = value; } /** @type {Number} */ get gBufferTargets() { return this._pipeline.gBufferTargets; } /** @type {Number} */ set gBufferTargets(value) { this._pipeline.gBufferTargets = value; } /** @type {Number} */ get lBufferTargets() { return this._pipeline.lBufferTargets; } /** @type {Number} */ set lBufferTargets(value) { this._pipeline.lBufferTargets = value; } /** @type {String|null} */ get gBufferLayer() { return this._pipeline.gBufferLayer; } /** @type {String|null} */ set gBufferLayer(value) { this._pipeline.gBufferLayer = value; } /** @type {String|null} */ get lBufferLayer() { return this._pipeline.lBufferLayer; } /** @type {String|null} */ set lBufferLayer(value) { this._pipeline.lBufferLayer = value; } get gBuffer() { return this._pipeline.gBuffer; } get lBuffer() { return this._pipeline.lBuffer; } /** * Constructor. */ constructor() { super(); this._camera = null; this._pipeline = new DeferredPipeline(this); } /** * @override */ dispose() { if (!!this._pipeline) { this._pipeline.dispose(); this._pipeline = null; } this._camera = null; super.dispose(); } /** * @override */ onAttach() { const camera = this._camera = this.entity.getComponent(Camera); if (!camera) { throw new Error('There is no component of Camera type!'); } camera.command = this._pipeline; } /** * @override */ onDetach() { if (!!this._camera) { this._camera.command = null; this._camera = 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>