UNPKG

oxygen-core

Version:

Oxygen game engine (Xenon Core for browsers)

894 lines (787 loc) 38.7 kB
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/components/Camera.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"> <span> <img src="./image/search.png"> <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span> </span> <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"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/index.js~EventsController.html">EventsController</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-lazyInitialization">lazyInitialization</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#asset-loaders">asset-loaders</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/AssemblyAsset.js~AssemblyAsset.html">AssemblyAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/AtlasAsset.js~AtlasAsset.html">AtlasAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/BinaryAsset.js~BinaryAsset.html">BinaryAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/FontAsset.js~FontAsset.html">FontAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/ImageAsset.js~ImageAsset.html">ImageAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/JSONAsset.js~JSONAsset.html">JSONAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/MusicAsset.js~MusicAsset.html">MusicAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/PackAsset.js~PackAsset.html">PackAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/ParticleSystemAsset.js~ParticleSystemAsset.html">ParticleSystemAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/PostprocessRackEffectAsset.js~PostprocessRackEffectAsset.html">PostprocessRackEffectAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SVGAsset.js~SVGAsset.html">SVGAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SceneAsset.js~SceneAsset.html">SceneAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SetAsset.js~SetAsset.html">SetAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/ShaderAsset.js~ShaderAsset.html">ShaderAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SkeletonAsset.js~SkeletonAsset.html">SkeletonAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/SoundAsset.js~SoundAsset.html">SoundAsset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/asset-loaders/TextAsset.js~TextAsset.html">TextAsset</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#components">components</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/AtlasSprite.js~AtlasSprite.html">AtlasSprite</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Camera.js~Camera.html">Camera</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Camera.js~PostprocessPass.html">PostprocessPass</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Camera2D.js~Camera2D.html">Camera2D</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/CameraDirector2D.js~CameraDirector2D.html">CameraDirector2D</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/CircleShape.js~CircleShape.html">CircleShape</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Container.js~Container.html">Container</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/DeferredRenderer.js~DeferredPipeline.html">DeferredPipeline</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/DeferredRenderer.js~DeferredRenderer.html">DeferredRenderer</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/GestureListener.js~GestureListener.html">GestureListener</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/InputHandler.js~InputHandler.html">InputHandler</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/MultipassRenderer.js~MultipassPipeline.html">MultipassPipeline</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/MultipassRenderer.js~MultipassRenderer.html">MultipassRenderer</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Particles.js~Particles.html">Particles</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PhysicsBody.js~PhysicsBody.html">PhysicsBody</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PhysicsWorld.js~PhysicsWorld.html">PhysicsWorld</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PolygonShape.js~PolygonShape.html">PolygonShape</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PostprocessRack.js~PostprocessRack.html">PostprocessRack</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PostprocessRack.js~PostprocessRackPass.html">PostprocessRackPass</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PostprocessRack.js~PostprocessRackRawEffectPass.html">PostprocessRackRawEffectPass</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/PrefabInstance.js~PrefabInstance.html">PrefabInstance</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/RectangleRenderer.js~RectangleRenderer.html">RectangleRenderer</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/RectangleShape.js~RectangleShape.html">RectangleShape</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Script.js~Script.html">Script</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Shape.js~Shape.html">Shape</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Skeleton.js~Skeleton.html">Skeleton</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/SortedActions.js~SortedActions.html">SortedActions</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/Sprite.js~Sprite.html">Sprite</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/TextRenderer.js~TextRenderer.html">TextRenderer</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/UiLayout.js~UiLayout.html">UiLayout</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/UiSprite.js~UiSprite.html">UiSprite</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/components/VerticesRenderer.js~VerticesRenderer.html">VerticesRenderer</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems">systems</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/AssemblySystem.js~AssemblySystem.html">AssemblySystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/AudioSystem.js~AudioSystem.html">AudioSystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/InputSystem.js~InputSystem.html">InputSystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~Command.html">Command</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~Pipeline.html">Pipeline</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~RenderFullscreenCommand.html">RenderFullscreenCommand</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~RenderSystem.html">RenderSystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/RenderSystem.js~RenderTargetWrapper.html">RenderTargetWrapper</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/StorageSystem.js~StorageSystem.html">StorageSystem</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/System.js~System.html">System</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-assetsystem">systems/AssetSystem</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/AssetSystem/Asset.js~Asset.html">Asset</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/AssetSystem/index.js~AssetSystem.html">AssetSystem</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#systems-entitysystem">systems/EntitySystem</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/EntitySystem/Component.js~Component.html">Component</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/EntitySystem/Entity.js~Entity.html">Entity</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/systems/EntitySystem/index.js~EntitySystem.html">EntitySystem</a></span></span></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#utils">utils</a><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/utils/Events.js~Events.html">Events</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-angleDifference">angleDifference</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-bezierCubic">bezierCubic</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-convertGlobalPointToLocalPoint">convertGlobalPointToLocalPoint</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-convertLocalPointToGlobalPoint">convertLocalPointToGlobalPoint</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-findMapKeyOfValue">findMapKeyOfValue</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getMipmapScale">getMipmapScale</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getPOT">getPOT</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isGlobalPointInGlobalBoundingBox">isGlobalPointInGlobalBoundingBox</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isLocalPointInLocalBoundingBox">isLocalPointInLocalBoundingBox</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-isPOT">isPOT</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-propsEnumStringify">propsEnumStringify</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-stringToRGBA">stringToRGBA</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-waitForSeconds">waitForSeconds</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-Box2D">Box2D</a></span></span></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">src/components/Camera.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import Component from &apos;../systems/EntitySystem/Component&apos;; import RenderSystem, { Command, RenderFullscreenCommand } from &apos;../systems/RenderSystem&apos;; import System from &apos;../systems/System&apos;; import { mat4, vec2 } from &apos;../utils/gl-matrix&apos;; import { getPOT, getMipmapScale } from &apos;../utils&apos;; const cachedTempMat4 = mat4.create(); const cachedZeroMat4 = mat4.fromValues( 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ); let rttUidGenerator = 0; export class PostprocessPass { constructor() { this._command = new RenderFullscreenCommand(); this._targets = new Map(); this._renderer = null; } dispose() { this._command.dispose(); this.destroyAllTargets(); this._command = null; this._targets = null; this._renderer = null; } apply( gl, renderer, textureSource, renderTarget, shader, overrideUniforms = null, overrideSamplers = null ) { const { _command } = this; _command.shader = shader; _command.overrideUniforms.clear(); _command.overrideSamplers.clear(); _command.overrideSamplers.set(&apos;sBackBuffer&apos;, { texture: textureSource }); if (!!overrideUniforms) { for (const key in overrideUniforms) { _command.overrideUniforms.set(key, overrideUniforms[key]); } } if (!!overrideSamplers) { for (const key in overrideSamplers) { _command.overrideSamplers.set(key, overrideSamplers[key]); } } if (!renderTarget) { renderer.disableRenderTarget(); } else { renderer.enableRenderTarget(renderTarget); } _command.onRender(gl, renderer, 0, null); } createTarget(id, level = 0, floatPointData = false, potMode = null) { if (typeof id !== &apos;string&apos;) { throw new Error(&apos;`id` is not type of String!&apos;); } if (typeof level !== &apos;number&apos;) { throw new Error(&apos;`level` is not type of Number!&apos;); } if (typeof floatPointData !== &apos;boolean&apos;) { throw new Error(&apos;`floatPointData` is not type of Boolean!&apos;); } if (!!potMode &amp;&amp; typeof potMode !== &apos;string&apos;) { throw new Error(&apos;`potMode` is not type of String!&apos;); } level = level | 0; const { _targets } = this; if (_targets.has(id)) { const target = _targets.get(id); target.level = level; target.floatPointData = floatPointData; target.potMode = potMode; target.dirty = true; return target.target; } else { const target = `#Camera-PostprocessPass-${++rttUidGenerator}`; _targets.set(id, { target, level, floatPointData, potMode, dirty: true }); return target; } } destroyTarget(id) { if (typeof id !== &apos;string&apos;) { throw new Error(&apos;`id` is not type of String!&apos;); } const { _targets, _renderer } = this; if (_targets.has(id)) { const target = _targets.get(id); if (!!_renderer) { _renderer.unregisterRenderTarget(target.target); } _targets.delete(id); } } destroyAllTargets() { const { _targets, _renderer } = this; if (!!_renderer) { for (const target of _targets.values()) { _renderer.unregisterRenderTarget(target.target); } } _targets.clear(); } getTargetId(id) { if (typeof id !== &apos;string&apos;) { throw new Error(&apos;`id` is not type of String!&apos;); } return this._targets.get(id).target || null; } onApply(gl, renderer, textureSource, renderTarget) { this._renderer = renderer; const { _targets } = this; for (const target of _targets.values()) { if (!!target.dirty) { target.dirty = false; const { width, height } = renderer.canvas; const w = !target.potMode ? width : getPOT(width, target.potMode === &apos;upper&apos;); const h = !target.potMode ? height : getPOT(height, target.potMode === &apos;upper&apos;); const s = getMipmapScale(target.level); renderer.registerRenderTarget( target.target, w * s, h * s, target.floatPointData ); } } } onResize(width, height) { const { _targets } = this; for (const target of _targets.values()) { target.dirty = true; } } } /** * Camera base class component. */ export default class Camera extends Component { /** @type {*} */ static get propsTypes() { return { ignoreChildrenViews: &apos;boolean&apos;, captureEntity: &apos;string_null&apos;, renderTargetId: &apos;string_null&apos;, renderTargetWidth: &apos;integer&apos;, renderTargetHeight: &apos;integer&apos;, renderTargetScale: &apos;number&apos;, renderTargetFloat: &apos;boolean&apos;, renderTargetMulti: &apos;array(any)&apos;, layer: &apos;string_null&apos; }; } /** * Component factory. * * @return {Camera} Component instance. */ static factory() { return new Camera(); } /** @type {boolean} */ get ignoreChildrenViews() { return this._ignoreChildrenViews; } /** @type {boolean} */ set ignoreChildrenViews(value) { if (typeof value !== &apos;boolean&apos;) { throw new Error(&apos;`value` is not type of Boolean!&apos;); } this._ignoreChildrenViews = value; } /** @type {string|null} */ get captureEntity() { return this._captureEntity; } /** @type {string|null} */ set captureEntity(value) { if (typeof value !== &apos;string&apos;) { throw new Error(&apos;`value` is not type of String&apos;); } this._captureEntity = value; } /** @type {string|null} */ get renderTargetId() { return this._renderTargetId; } /** @type {string|null} */ set renderTargetId(value) { if (!!value &amp;&amp; typeof value !== &apos;string&apos;) { throw new Error(&apos;`value` is not type of String&apos;); } this._renderTargetId = value; this._renderTargetDirty = true; this._dirty = true; } /** @type {number} */ get renderTargetWidth() { return this._renderTargetWidth; } /** @type {number} */ set renderTargetWidth(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number&apos;); } this._renderTargetWidth = value | 0; this._renderTargetDirty = true; this._dirty = true; } /** @type {number} */ get renderTargetHeight() { return this._renderTargetHeight; } /** @type {number} */ set renderTargetHeight(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number&apos;); } this._renderTargetHeight = value | 0; this._renderTargetDirty = true; this._dirty = true; } /** @type {number} */ get renderTargetScale() { return this._renderTargetScale; } /** @type {number} */ set renderTargetScale(value) { if (typeof value !== &apos;number&apos;) { throw new Error(&apos;`value` is not type of Number&apos;); } this._renderTargetScale = value; this._renderTargetDirty = true; this._dirty = true; } /** @type {boolean} */ get renderTargetFloat() { return this._renderTargetFloat; } /** @type {boolean} */ set renderTargetFloat(value) { if (typeof value !== &apos;boolean&apos;) { throw new Error(&apos;`value` is not type of Boolean&apos;); } this._renderTargetFloat = value; this._renderTargetDirty = true; this._dirty = true; } /** @type {*[]} */ get renderTargetMulti() { return this._renderTargetMulti; } /** @type {*[]} */ set renderTargetMulti(value) { this._renderTargetMulti = value; this._renderTargetDirty = true; this._dirty = true; } /** @type {string|null} */ get layer() { return this._layer; } /** @type {string|null} */ set layer(value) { if (!!value &amp;&amp; typeof value !== &apos;string&apos;) { throw new Error(&apos;`value` is not type of String!&apos;); } this._layer = value; } /** @type {mat4} */ get projectionMatrix() { return this._projectionMatrix; } /** @type {mat4} */ get inverseProjectionMatrix() { return this._inverseProjectionMatrix; } /** @type {mat4} */ get viewMatrix() { return this.entity.transform; } /** @type {mat4} */ get inverseViewMatrix() { return this.entity.inverseTransform; } /** @type {mat4} */ get viewProjectionMatrix() { return this.entity.transform; } /** @type {mat4} */ get inverseViewProjectionMatrix() { return this.entity.inverseTransform; } /** @type {Command|null} */ get command() { return this._command; } /** @type {Command|null} */ set command(value) { if (!value) { this._command = null; return; } if (!(value instanceof Command)) { throw new Error(&apos;`value` is not type of Command!&apos;); } this._command = value; } /** * Constructor. */ constructor() { super(); this._ignoreChildrenViews = false; this._captureEntity = null; this._projectionMatrix = mat4.create(); this._inverseProjectionMatrix = mat4.create(); this._viewProjectionMatrix = mat4.create(); this._inverseViewProjectionMatrix = mat4.create(); mat4.copy(this._projectionMatrix, cachedZeroMat4); mat4.copy(this._inverseProjectionMatrix, cachedZeroMat4); mat4.copy(this._viewProjectionMatrix, cachedZeroMat4); mat4.copy(this._inverseViewProjectionMatrix, cachedZeroMat4); this._context = null; this._renderTargetId = null; this._renderTargetIdUsed = null; this._renderTargetWidth = 0; this._renderTargetHeight = 0; this._renderTargetScale = 1; this._renderTargetFloat = false; this._renderTargetMulti = null; this._renderTargetDirty = false; this._layer = null; this._postprocess = null; this._postprocessRtt = null; this._postprocessCachedWidth = 0; this._postprocessCachedHeight = 0; this._command = null; this._dirty = true; this._onResize = this.onResize.bind(this); } /** * @override */ dispose() { super.dispose(); const { _context, _renderTargetIdUsed, _postprocessRtt, _command } = this; if (!!_context) { if (!!_renderTargetIdUsed) { _context.unregisterRenderTarget(_renderTargetIdUsed); } if (!!_postprocessRtt) { _context.unregisterRenderTarget(_postprocessRtt); } this._context = null; } if (!!_command) { _command.dispose(); } this._captureEntity = null; this._projectionMatrix = null; this._inverseProjectionMatrix = null; this._viewProjectionMatrix = null; this._inverseViewProjectionMatrix = null; this._postprocess = null; this._renderTargetId = null; this._renderTargetIdUsed = null; this._renderTargetMulti = null; this._postprocessRtt = null; this._layer = null; this._postprocess = null; this._postprocessRtt = null; this._command = null; this._onResize = null; } /** * Building camera matrix. * * @abstract * @param {mat4} target - Result mat4 object. * @param {number} width - Width. * @param {number} height - Height. */ buildCameraMatrix(target, width, height) { throw new Error(&apos;Not implemented!&apos;); } /** * Register postprocess. * * @param {PostprocessPass} postprocess - Postprocess pass. * @param {boolean} floatPointData - Tells if stores floating point texture data. */ registerPostprocess(postprocess, floatPointData = false) { if (!(postprocess instanceof PostprocessPass)) { throw new Error(&apos;`postprocess` is not type of PostprocessPass!&apos;); } const { _postprocess } = this; if (!_postprocess) { this._postprocessCachedWidth = 0; this._postprocessCachedHeight = 0; } this._postprocess = { postprocess, floatPointData }; } /** * Unregister postprocess. */ unregisterPostprocess() { const { _postprocess } = this; if (!_postprocess) { return; } this._postprocess = null; this._postprocessCachedWidth = 0; this._postprocessCachedHeight = 0; } /** * Convert screen space unit ([-1; 1]) vec2 point to global vec2 point. * * @param {vec2} target - Result vec2 point. * @param {vec2} unitVec - Input screen space unit vec2 point. */ convertUnitPointToGlobalPoint(target, unitVec) { vec2.transformMat4( target, unitVec, this._inverseViewProjectionMatrix ); } /** * @override */ onAttach() { const { RenderSystem } = System.systems; if (!RenderSystem) { throw new Error(&apos;There is no registered RenderSystem!&apos;); } RenderSystem.events.on(&apos;resize&apos;, this._onResize); } /** * @override */ onDetach() { const { RenderSystem } = System.systems; if (!RenderSystem) { throw new Error(&apos;There is no registered RenderSystem!&apos;); } RenderSystem.events.off(&apos;resize&apos;, this._onResize); } /** * @override */ onAction(name, ...args) { if (name === &apos;view&apos;) { return this.onView(...args); } } /** * Called when camera need to view rendered scene. * * @param {WebGLRenderingContext} gl - WebGL context. * @param {RenderSystem} renderer - Calling renderer instance. * @param {number} deltaTime - Delta time. * * @return {boolean} True if ignore viewing entity children, false otherwise. */ onView(gl, renderer, deltaTime) { const { entity, _ignoreChildrenViews } = this; if (!entity) { return _ignoreChildrenViews; } let { width, height } = renderer.canvas; const { _captureEntity, _projectionMatrix, _inverseProjectionMatrix, _viewProjectionMatrix, _inverseViewProjectionMatrix, _renderTargetWidth, _renderTargetHeight, _renderTargetScale, _postprocess } = this; if (_renderTargetWidth &gt; 0) { width = _renderTargetWidth; } if (_renderTargetHeight &gt; 0) { height = _renderTargetHeight; } const target = !!_captureEntity ? entity.findEntity(_captureEntity) : entity; if ((width | 0) === 0 || (height | 0) === 0) { mat4.copy(_projectionMatrix, cachedZeroMat4); mat4.copy(_inverseProjectionMatrix, cachedZeroMat4); mat4.copy(renderer.projectionMatrix, cachedZeroMat4); mat4.copy(renderer.viewMatrix, cachedZeroMat4); mat4.copy(_viewProjectionMatrix, cachedZeroMat4); mat4.copy(_inverseViewProjectionMatrix, cachedZeroMat4); if (this._dirty) { this._dirty = false; target.performAction(&apos;camera-changed&apos;, this); } return _ignoreChildrenViews; } this._context = renderer; if (this._renderTargetDirty) { if (!!this._renderTargetId) { if (!!this._renderTargetIdUsed) { renderer.unregisterRenderTarget(this._renderTargetIdUsed); } this._renderTargetIdUsed = this._renderTargetId; if (!!this._renderTargetMulti) { renderer.registerRenderTargetMulti( this._renderTargetIdUsed, width * _renderTargetScale, height * _renderTargetScale, this._renderTargetMulti ); } else { renderer.registerRenderTarget( this._renderTargetIdUsed, width * _renderTargetScale, height * _renderTargetScale, this._renderTargetFloat ); } } else { renderer.unregisterRenderTarget(this._renderTargetIdUsed); this._renderTargetIdUsed = null; } this._renderTargetDirty = false; } this.buildCameraMatrix(_projectionMatrix, width, height); mat4.invert(_inverseProjectionMatrix, _projectionMatrix); mat4.copy(renderer.projectionMatrix, _projectionMatrix); mat4.copy(renderer.viewMatrix, entity.inverseTransform); mat4.multiply( _viewProjectionMatrix, _projectionMatrix, entity.inverseTransform ); mat4.invert(_inverseViewProjectionMatrix, _viewProjectionMatrix); if (this._postprocessCachedWidth !== width || this._postprocessCachedHeight !== height ) { this._postprocessCachedWidth = width; this._postprocessCachedHeight = height; if (!!this._postprocessRtt) { renderer.unregisterRenderTarget(this._postprocessRtt); this._postprocessRtt = null; } if (!!_postprocess) { const rtt = `#Camera-PostprocessPass-${++rttUidGenerator}`; renderer.registerRenderTarget( rtt, width, height, _postprocess.floatPointData ); this._postprocessRtt = rtt; } } if (!_postprocess) { if (!!this._renderTargetIdUsed) { renderer.enableRenderTarget(this._renderTargetIdUsed); } if (!!this._command) { renderer.executeCommand(this._command, deltaTime, this._layer); } else { if (!!this._layer) { target.performAction( &apos;render-layer&apos;, gl, renderer, deltaTime, this._layer ); } else { target.performAction(&apos;render&apos;, gl, renderer, deltaTime, null); } } if (!!this._renderTargetIdUsed) { renderer.disableRenderTarget(); } } else { const { _postprocessRtt } = this; renderer.enableRenderTarget(_postprocessRtt); if (!!this._command) { renderer.executeCommand(this._command, deltaTime, this._layer); } else { if (!!this._layer) { target.performAction( &apos;render-layer&apos;, gl, renderer, deltaTime, this._layer ); } else { target.performAction(&apos;render&apos;, gl, renderer, deltaTime, null); } } _postprocess.postprocess.onApply( gl, renderer, _postprocessRtt, this._renderTargetIdUsed || null ); renderer.disableRenderTarget(); } if (this._dirty) { this._dirty = false; target.performAction(&apos;camera-changed&apos;, this); } return _ignoreChildrenViews; } /** * Called on view resize. * * @param {number} width - Width. * @param {number} height - Height. */ onResize(width, height) { const { _renderTargetWidth, _renderTargetHeight, _command, _postprocess } = this; if (_renderTargetWidth &lt;= 0 || _renderTargetHeight &lt;= 0) { this._renderTargetDirty = true; this._postprocessCachedWidth = 0; this._postprocessCachedHeight = 0; this._dirty = true; } if (!!_command) { _command.onResize(width, height); } if (!!_postprocess) { _postprocess.postprocess.onResize(width, height); } } } </code></pre> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.1.0)</span><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>