seed-engine

Version:

A Lightweight 2D game engine using WebGL2. The engine is designed on the focus of creating a bridge between creating and publishing games to the Seed Network as modules.

github.com/JaegarSarauer/SeedGameEngine

JaegarSarauer/SeedGameEngine

308 lines (261 loc) • 24 kB

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../../../"> <title data-ice="title">src/manager/RenderManager.js | seed-engine</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="A Lightweight 2D game engine using WebGL2. The engine is designed on the focus of creating a bridge between creating and publishing games to the Seed Network as modules."><meta property="twitter:card" content="summary"><meta property="twitter:title" content="seed-engine"><meta property="twitter:description" content="A Lightweight 2D game engine using WebGL2. The engine is designed on the focus of creating a bridge between creating and publishing games to the Seed Network as modules."></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> <a href="test.html" data-ice="testLink">Test</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/JaegarSarauer/SeedGameEngine"><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/Engine.js~_Engine.html">_Engine</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-Engine">Engine</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#base">base</a>C<a href="class/src/base/Updateable.js~Updateable.html">Updateable</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#component">component</a>C<a href="class/src/component/Animation.js~Animation.html">Animation</a></li> <li data-ice="doc">C<a href="class/src/component/Audio.js~Audio.html">Audio</a></li> <li data-ice="doc">C<a href="class/src/component/BoxCollider.js~BoxCollider.html">BoxCollider</a></li> <li data-ice="doc">C<a href="class/src/component/CircleCollider.js~CircleCollider.html">CircleCollider</a></li> <li data-ice="doc">C<a href="class/src/component/ClickController.js~ClickController.html">ClickController</a></li> <li data-ice="doc">C<a href="class/src/component/Collider.js~Collider.html">Collider</a></li> <li data-ice="doc">C<a href="class/src/component/Collider2D.js~Collider2D.html">Collider2D</a></li> <li data-ice="doc">C<a href="class/src/component/Component.js~Component.html">Component</a></li> <li data-ice="doc">C<a href="class/src/component/Controller.js~Controller.html">Controller</a></li> <li data-ice="doc">C<a href="class/src/component/Physics.js~Physics.html">Physics</a></li> <li data-ice="doc">C<a href="class/src/component/Physics2D.js~Physics2D.html">Physics2D</a></li> <li data-ice="doc">C<a href="class/src/component/Renderable.js~Renderable.html">Renderable</a></li> <li data-ice="doc">C<a href="class/src/component/Renderable2D.js~Renderable2D.html">Renderable2D</a></li> <li data-ice="doc">C<a href="class/src/component/Renderable2DGrid.js~Renderable2DGrid.html">Renderable2DGrid</a></li> <li data-ice="doc">C<a href="class/src/component/Renderable2DMultitex.js~Renderable2DMultitex.html">Renderable2DMultitex</a></li> <li data-ice="doc">C<a href="class/src/component/RenderableSquare.js~RenderableSquare.html">RenderableSquare</a></li> <li data-ice="doc">C<a href="class/src/component/RenderableText.js~RenderableText.html">RenderableText</a></li> <li data-ice="doc">C<a href="class/src/component/TopDownController.js~TopDownController.html">TopDownController</a></li> <li data-ice="doc">C<a href="class/src/component/Transform.js~Transform.html">Transform</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#const">const</a>V<a href="variable/index.html#static-variable-DEFAULT_F">DEFAULT_F</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-TILEMAP_F">TILEMAP_F</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-KeyCode">KeyCode</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-DEFAULT_V">DEFAULT_V</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#internal">internal</a>C<a href="class/src/internal/Bounds.js~Bounds.html">Bounds</a></li> <li data-ice="doc">C<a href="class/src/internal/Color.js~Color.html">Color</a></li> <li data-ice="doc">C<a href="class/src/internal/Point.js~Point.html">Point</a></li> <li data-ice="doc">C<a href="class/src/internal/PostBoard.js~PostBoard.html">PostBoard</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#manager">manager</a>C<a href="class/src/manager/AudioManager.js~_AudioManager.html">_AudioManager</a></li> <li data-ice="doc">C<a href="class/src/manager/DOMManager.js~_DOMManager.html">_DOMManager</a></li> <li data-ice="doc">C<a href="class/src/manager/EngineManager.js~_EngineManager.html">_EngineManager</a></li> <li data-ice="doc">C<a href="class/src/manager/InputManager.js~_InputManager.html">_InputManager</a></li> <li data-ice="doc">C<a href="class/src/manager/Manager.js~Manager.html">Manager</a></li> <li data-ice="doc">C<a href="class/src/manager/PersistentManager.js~_PersistentManager.html">_PersistentManager</a></li> <li data-ice="doc">C<a href="class/src/manager/PhysicsManager.js~_PhysicsManager.html">_PhysicsManager</a></li> <li data-ice="doc">C<a href="class/src/manager/ProgramManager.js~_ProgramManager.html">_ProgramManager</a></li> <li data-ice="doc">C<a href="class/src/manager/RenderManager.js~_RenderManager.html">_RenderManager</a></li> <li data-ice="doc">C<a href="class/src/manager/SceneManager.js~_SceneManager.html">_SceneManager</a></li> <li data-ice="doc">C<a href="class/src/manager/TextureManager.js~_TextureManager.html">_TextureManager</a></li> <li data-ice="doc">C<a href="class/src/manager/UIManager.js~_UIManager.html">_UIManager</a></li> <li data-ice="doc">C<a href="class/src/manager/UpdateableManager.js~_UpdateableManager.html">_UpdateableManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-AudioManager">AudioManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-DOMManager">DOMManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-EngineManager">EngineManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-InputManager">InputManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-PersistentManager">PersistentManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-PhysicsManager">PhysicsManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-ProgramManager">ProgramManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-RenderManager">RenderManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-SceneManager">SceneManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-TextureManager">TextureManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-UIManager">UIManager</a></li> <li data-ice="doc">V<a href="variable/index.html#static-variable-UpdateableManager">UpdateableManager</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#object">object</a>C<a href="class/src/object/GameObject.js~GameObject.html">GameObject</a></li> <li data-ice="doc">C<a href="class/src/object/PersistentObject.js~PersistentObject.html">PersistentObject</a></li> <li data-ice="doc">C<a href="class/src/object/SceneObject.js~SceneObject.html">SceneObject</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#prefab-ui">prefab/ui</a>C<a href="class/src/prefab/ui/UIButton.js~UIButton.html">UIButton</a></li> <li data-ice="doc">C<a href="class/src/prefab/ui/UIElement.js~UIElement.html">UIElement</a></li> <li data-ice="doc">C<a href="class/src/prefab/ui/UIPanel.js~UIPanel.html">UIPanel</a></li> <li data-ice="doc">C<a href="class/src/prefab/ui/UIText.js~UIText.html">UIText</a></li> <li data-ice="doc">C<a href="class/src/prefab/ui/UITextInput.js~UITextInput.html">UITextInput</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#render">render</a>C<a href="class/src/render/Viewport.js~Viewport.html">Viewport</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#render-webgl">render/WebGL</a>C<a href="class/src/render/WebGL/Matrix.js~Matrix.html">Matrix</a></li> <li data-ice="doc">C<a href="class/src/render/WebGL/Matrix3.js~Matrix3.html">Matrix3</a></li> <li data-ice="doc"><a data-ice="dirPath" class="nav-dir-path" href="identifiers.html#scene">scene</a>C<a href="class/src/scene/BasicScene.js~BasicScene.html">BasicScene</a></li> <li data-ice="doc">C<a href="class/src/scene/Scene.js~Scene.html">Scene</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/Loader.js~Loader.html">Loader</a></li> <li data-ice="doc">C<a href="class/src/utils/Messager.js~Messager.html">Messager</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-degToRad">degToRad</a></li> <li data-ice="doc">F<a href="function/index.html#static-function-radToDeg">radToDeg</a></li> </ul> </div> </nav> <div class="content" data-ice="content"><h1 data-ice="title">src/manager/RenderManager.js</h1> <pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">import Manager from './Manager'; import DOMManager from './DOMManager'; import ProgramManager from './ProgramManager'; import SceneManager from './SceneManager'; import * as VertexShader from '../const/VertexShader'; import * as FragmentShader from '../const/FragmentShader'; import Matrix3 from '../render/WebGL/Matrix3'; import { TextureManager } from '../entry'; /** * Manages the WebGL2 rendering of all renderable components in the scene. * This manager is not intended to be referenced directly. */ export class _RenderManager extends Manager { constructor() { super(); this.GL = null; this.currentProgram = null; this.activeTextureIDs = []; //text this.RenderableTextIDCounter = 0; //last update microsecond this.lastUpdate = -1; } /** * Initial setup on GL rendering. */ start() { this.GL = DOMManager.GL; if (this.GL == null) return; this._updateProgram(ProgramManager.getProgram('Default')); this.positionAttributeLocation = this.GL.getAttribLocation(this.currentProgram.program, "a_position"); //textures this.texcoordAttributeLocation = this.GL.getAttribLocation(this.currentProgram.program, "a_texcoord"); let positionBuffer = this.GL.createBuffer(); this.GL.bindBuffer(this.GL.ARRAY_BUFFER, positionBuffer); this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), this.GL.STATIC_DRAW); this.vao = this.GL.createVertexArray(); this.GL.bindVertexArray(this.vao); this.GL.enableVertexAttribArray(this.positionAttributeLocation); let size = 2; let type = this.GL.FLOAT; let normalize = false; let stride = 0; let vertexOffset = 0; this.GL.vertexAttribPointer(this.positionAttributeLocation, size, type, normalize, stride, vertexOffset); //textures this.texcoordBuffer = this.GL.createBuffer(); this.GL.bindBuffer(this.GL.ARRAY_BUFFER, this.texcoordBuffer); this.GL.bufferData(this.GL.ARRAY_BUFFER, new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]), this.GL.STATIC_DRAW); // Turn on the attribute this.GL.enableVertexAttribArray(this.texcoordAttributeLocation); // Tell the attribute how to get data out of colorBuffer (ARRAY_BUFFER) let t_size = 2; // 3 components per iteration let t_type = this.GL.FLOAT; // the data is 32bit floats let t_normalize = true; // convert from 0-255 to 0.0-1.0 let t_stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next color let t_offset = 0; // start at the beginning of the buffer this.GL.vertexAttribPointer( this.texcoordAttributeLocation, t_size, t_type, t_normalize, t_stride, t_offset); this.GL.enable(this.GL.DEPTH_TEST); this.GL.depthFunc(this.GL.LESS); this.GL.enable(this.GL.BLEND); //this.GL.blendFuncSeparate(this.GL.GL_SRC_ALPHA, this.GL.GL_ONE_MINUS_SRC_ALPHA, this.GL.GL_ONE, this.GL.GL_ONE_MINUS_SRC_ALPHA); } /** * Checks if the program for the next object to draw must be changed. * If it does, it will change WebGL programs. * * @param {ProgramObject} program A program object returned from ProgramManager.getProgram() */ _updateProgram(program) { if (this.currentProgram == null || this.currentProgram.id != program.id) { this.GL.useProgram(program.program); this.currentProgram = program; } } _updateTextures(textures) { let newActiveTextures = []; for (let t = 0; t < textures.length; t++) { newActiveTextures.push(textures[t].id); this.GL.activeTexture(this.GL.TEXTURE0 + t); this.GL.bindTexture(this.GL.TEXTURE_2D, textures[t].tex); } } registerTextRenderable(textRenderable, width, height) { textRenderable.renderableTextID = this.RenderableTextIDCounter++ % 1024; if (TextureManager.getTexture('TextData') == null) { //data of the text data to be read in the FS for rendering. Defaults to 0's. If you have a character at location 0, 1st column, it will be the "empty" character. let textDataTextureData = new Uint16Array(width * height); TextureManager.addDataTexture('TextData', textDataTextureData, RenderManager.GL.R16UI, RenderManager.GL.RED_INTEGER, RenderManager.GL.UNSIGNED_SHORT, -1, -1, width, height); } } forceUpdate() { if (performance.now() + 0.1 <= this.lastUpdate) return; requestAnimationFrame((time) => { if (time > this.lastUpdate) { this.lastUpdate = time; RenderManager.update(); } }); } /** * Update function for updating all renderable objects in each viewport in the current scene. */ update() { if (this.GL == null) return; // this.GL.clearColor(0, 0, 0, 0); // this.GL.clearDepth(1.0); this.GL.clear(this.GL.COLOR_BUFFER_BIT | this.GL.DEPTH_BUFFER_BIT); let scene = SceneManager.getCurrentScene(); if (scene == null) return; let viewports = scene.viewports; for (let vi = 0; vi < viewports.length; vi++) { let viewport = viewports[vi]; let viewPortWidth = viewport._rendererBounds.p2.x; let viewPortHeight = viewport._rendererBounds.p2.y; this.GL.viewport(viewport._rendererBounds.p1.x, viewport._rendererBounds.p1.y, viewPortWidth, viewPortHeight); //setup camera from viewport let renderables = viewport.renderables; let renderableKeys = Object.keys(renderables); for (let ri = 0; ri < renderableKeys.length; ri++) { let renderable = renderables[renderableKeys[ri]]; if (renderable.hasPaused) continue; this._updateProgram(renderable.program); if (!renderable.setUniformData(Matrix3.projection(viewPortWidth, viewPortHeight).multiply(renderable.getMatrix()).m)) continue; //if (renderable.updateTextures) { this._updateTextures(renderable.textures); renderable.updateTextures = false; //} this.GL.drawArrays(renderable.primitiveType, 0, renderable.primitiveCount); } } } } /** * Singleton reference to the Rendering Manager. */ const RenderManager = new _RenderManager(); export default RenderManager;</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>