oxygen-core

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/components/VerticesRenderer.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/VerticesRenderer.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 { mat4 } from '../utils/gl-matrix'; const RenderMode = { TRIANGLES: 'triangles', LINES: 'lines', POINTS: 'points' }; const BufferUsage = { STATIC: 'static', DYNAMIC: 'dynamic', STREAM: 'stream' } const DirtyMode = { NONE: 0, SUB: 1, ALL: 2 }; export default class VerticesRenderer extends Component { static factory() { return new VerticesRenderer(); } static get propsTypes() { return { visible: 'boolean', shader: 'asset(shader)', vertices: 'array(number)', indices: 'array(integer)', verticesUsage: 'enum(static, dynamic, stream)', indicesUsage: 'enum(static, dynamic, stream)', overrideUniforms: 'uniforms', overrideSamplers: 'samplers', renderMode: 'enum(triangles, lines, points)', layers: 'array(string)' }; } static get RenderMode() { return RenderMode; } static get BufferUsage() { return BufferUsage; } get visible() { return this._visible; } set visible(value) { if (typeof value !== 'boolean') { throw new Error('`value` is not type of Boolean!'); } this._visible = value; } get shader() { return this._shader; } set shader(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._shader = value; } get vertices() { return this._vertices; } set vertices(value) { if (!value) { throw new Error('`value` cannot be null!'); } if (value instanceof Array) { value = new Float32Array(value); } if (!(value instanceof Float32Array)) { throw new Error('`value` is not type of either Array or Float32Array!'); } const { _vertices } = this; this._dirty = true; if (this._dirtyMode !== DirtyMode.ALL) { this._dirtyMode = !_vertices || _vertices.length != value.length ? DirtyMode.ALL : DirtyMode.SUB; } this._vertices = value; } get indices() { return this._indices; } set indices(value) { if (!value) { throw new Error('`value` cannot be null!'); } if (value instanceof Array) { value = new Uint16Array(value); } if (!(value instanceof Uint16Array)) { throw new Error('`value` is not type of either Array or Uint16Array!'); } const { _indices } = this; this._dirty = true; if (this._dirtyMode !== DirtyMode.ALL) { this._dirtyMode = !_indices || _indices.length != value.length ? DirtyMode.ALL : DirtyMode.SUB; } this._indices = value; } get verticesUsage() { return this._verticesUsage; } set verticesUsage(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._dirty = true; this._dirtyMode = DirtyMode.ALL; this._verticesUsage = value; } get indicesUsage() { return this._indicesUsage; } set indicesUsage(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._dirty = true; this._dirtyMode = DirtyMode.ALL; this._indicesUsage = value; } get overrideUniforms() { const result = {}; for (const [key, value] of this._overrideUniforms) { result[key] = value; } return result; } set overrideUniforms(value) { const { _overrideUniforms } = this; _overrideUniforms.clear(); if (!value) { return; } for (const name in value) { _overrideUniforms.set(name, value[name]); } } get overrideSamplers() { const result = {}; for (const [key, value] of this._overrideSamplers) { result[key] = value; } return result; } set overrideSamplers(value) { const { _overrideSamplers } = this; _overrideSamplers.clear(); if (!value) { return; } for (const name in value) { _overrideSamplers.set(name, value[name]); } } get renderMode() { return this._renderMode; } set renderMode(value) { if (typeof value !== 'string') { throw new Error('`value` is not type of String!'); } this._renderMode = value; } get layers() { return [ ...this._layers ]; } set layers(value) { if (!value) { this._layers = null; return; } if (!(value instanceof Array)) { throw new Error('`value` is not type of Array!'); } for (let i = 0, c = value.length; i < c; ++i) { if (typeof value[i] !== 'string') { throw new Error(`\`value\` item #${i} is not type of String!`); } } this._layers = [ ...value ]; } constructor() { super(); this._visible = true; this._context = null; this._vertexBuffer = null; this._indexBuffer = null; this._shader = null; this._vertices = null; this._indices = null; this._verticesUsage = BufferUsage.STATIC; this._indicesUsage = BufferUsage.STATIC; this._overrideUniforms = new Map(); this._overrideSamplers = new Map(); this._renderMode = RenderMode.TRIANGLES; this._layers = null; this._verticesChunksToUpdate = []; this._indicesChunksToUpdate = []; this._dirty = true; this._dirtyMode = DirtyMode.ALL; } dispose() { const { _context, _vertexBuffer, _indexBuffer } = this; if (!!_context) { if (!!_vertexBuffer) { _context.deleteBuffer(_vertexBuffer); } if (!!_indexBuffer) { _context.deleteBuffer(_indexBuffer); } } this._overrideUniforms.clear(); this._overrideSamplers.clear(); this._context = null; this._vertexBuffer = null; this._indexBuffer = null; this._shader = null; this._vertices = null; this._indices = null; this._overrideUniforms = null; this._overrideSamplers = null; this._renderMode = null; this._layers = null; this._verticesChunksToUpdate = null; this._indicesChunksToUpdate = null; } updateVerticesChunk(data, offset, size = 0) { if (!data) { throw new Error('`data` cannot be null!'); } const { _vertices } = this; if (!_vertices) { throw new Error('Cannot update non-existing vertices!'); } if (data instanceof Array || data instanceof Float32Array) { if (offset < 0 || offset + data.length > _vertices.length) { throw new Error('Trying to update chunk exceeding vertices bounds!'); } _vertices.set(data, offset); this._verticesChunksToUpdate.push(offset, data.length); } else { throw new Error('`data` is not type of either Array or Float32Array!'); } } updateIndicesChunk(data, offset, size = 0) { if (!data) { throw new Error('`data` cannot be null!'); } const { _indices } = this; if (!_indices) { throw new Error('Cannot update non-existing indices!'); } if (data instanceof Array || data instanceof Uint16Array) { if (offset < 0 || offset + data.length > _indices.length) { throw new Error('Trying to update chunk exceeding indices bounds!'); } _indices.set(data, offset); this._indicesChunksToUpdate.push(offset, data.length); } else { throw new Error('`data` is not type of either Array or Float32Array!'); } } reuploadData() { this._dirty = true; if (this._dirtyMode !== DirtyMode.ALL) { this._dirtyMode = DirtyMode.SUB; } } onAction(name, ...args) { if (name === 'render') { return this.onRender(...args); } else if (name === 'render-layer') { return this.onRenderLayer(...args); } else if (name === 'preview') { return this.onPreview(...args); } } onPropertySerialize(name, value) { if (name === 'vertices' || name === 'indices') { if (!value) { return; } return [ ...value ]; } else if (name === 'overrideUniforms' || name === 'overrideSamplers') { if (value.size === 0) { return; } const result = {}; for (const [key, value] of value.entries()) { result[key] = value; } return result; } else if (name === 'layers') { return !value ? [] : [ ...value ]; } else { return super.onPropertySerialize(name, value); } } onRender(gl, renderer, deltaTime, layer) { const { _visible, _shader, _vertices, _indices, _verticesUsage, _indicesUsage, _overrideUniforms, _overrideSamplers, _renderMode, _verticesChunksToUpdate, _indicesChunksToUpdate } = this; if (!_visible || !_renderMode) { return; } if (!_shader) { console.warn('Trying to render VerticesRenderer without shader!'); return; } if (!_vertices || _vertices.length <= 0) { console.warn('Trying to render VerticesRenderer without vertices!'); return; } if (!_indices || _indices.length <= 0) { console.warn('Trying to render VerticesRenderer without indices!'); return; } this._ensureState(gl); mat4.copy(renderer.modelMatrix, this.entity.transform); gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer); if (this._dirty) { this._dirty = false; this._verticesChunksToUpdate = []; this._indicesChunksToUpdate = []; if (this._dirtyMode === DirtyMode.ALL) { let verticesUsage = gl.STATIC_DRAW; if (_verticesUsage === BufferUsage.DYNAMIC) { verticesUsage = gl.DYNAMIC_DRAW; } else if (_verticesUsage === BufferUsage.STREAM) { verticesUsage = gl.STREAM_DRAW; } let indicesUsage = gl.STATIC_DRAW; if (_indicesUsage === BufferUsage.DYNAMIC) { indicesUsage = gl.DYNAMIC_DRAW; } else if (_indicesUsage === BufferUsage.STREAM) { indicesUsage = gl.STREAM_DRAW; } gl.bufferData(gl.ARRAY_BUFFER, _vertices, verticesUsage); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, _indices, indicesUsage); } else if (this._dirtyMode === DirtyMode.SUB) { gl.bufferSubData(gl.ARRAY_BUFFER, 0, _vertices); gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, _indices); } this._dirtyMode = DirtyMode.NONE; } if (_verticesChunksToUpdate.length > 0) { for (let i = 0, c = _verticesChunksToUpdate.length; i < c; i += 2) { gl.bufferSubData( gl.ARRAY_BUFFER, _verticesChunksToUpdate[i], _vertices.subarray( _verticesChunksToUpdate[i], _verticesChunksToUpdate[i + 1] ) ); } this._verticesChunksToUpdate = []; } if (_indicesChunksToUpdate.length > 0) { for (let i = 0, c = _indicesChunksToUpdate.length; i < c; i += 2) { gl.bufferSubData( gl.ELEMENT_ARRAY_BUFFER, _indicesChunksToUpdate[i], _indices.subarray( _indicesChunksToUpdate[i], _indicesChunksToUpdate[i + 1] ) ); } this._indicesChunksToUpdate = []; } renderer.enableShader(_shader); if (_overrideUniforms.size > 0) { for (const [ name, value ] of _overrideUniforms) { renderer.overrideShaderUniform(name, value); } } if (_overrideSamplers.size > 0) { for (const [ name, { texture, filtering } ] of _overrideSamplers) { renderer.overrideShaderSampler(name, texture, filtering); } } gl.drawElements( gl[_renderMode.toUpperCase()], _indices.length, gl.UNSIGNED_SHORT, 0 ); renderer.disableShader(); } onRenderLayer(gl, renderer, deltaTime, layer) { const { _layers } = this; if (!!layer && !!_layers && _layers.length > 0 && _layers.indexOf(layer) < 0 ) { return; } this.onRender(gl, renderer, deltaTime, layer); } onPreview(gl, renderer, deltaTime) { this.onRender(gl, renderer, deltaTime, null); } _ensureState(gl) { this._context = gl; if (!this._vertexBuffer) { this._vertexBuffer = gl.createBuffer(); this._dirty = true; this._dirtyMode = DirtyMode.ALL; } if (!this._indexBuffer) { this._indexBuffer = gl.createBuffer(); this._dirty = true; this._dirtyMode = DirtyMode.ALL; } } } </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>