@woosh/meep-engine 2.60.0 → 2.61.0

package/src/engine/graphics/GraphicsEngine.js

@@ -13,31 +13,30 @@ import {
     VSMShadowMap,
     WebGLRenderer
 } from "three";
+import {assert} from "../../core/assert.js";
 
-import Signal from "../../core/events/signal/Signal.js";
+import {BinaryNode} from "../../core/bvh2/BinaryNode.js";
 
-import { BinaryNode } from "../../core/bvh2/BinaryNode.js";
-import { max2 } from "../../core/math/max2.js";
+import Signal from "../../core/events/signal/Signal.js";
+import Vector1 from "../../core/geom/Vector1.js";
+import {max2} from "../../core/math/max2.js";
+import EmptyView from "../../view/elements/EmptyView.js";
+import {globalMetrics} from "../metrics/GlobalMetrics.js";
+import {MetricsCategory} from "../metrics/MetricsCategory.js";
+import {CompositingStages} from "./composit/CompositingStages.js";
 
 import LayerCompositer from "./composit/LayerCompositer.js";
-import { Camera } from "./ecs/camera/Camera.js";
-import EmptyView from "../../view/elements/EmptyView.js";
-import { assert } from "../../core/assert.js";
-import { RenderLayerManager } from "./render/layers/RenderLayerManager.js";
-import { FrameBufferManager } from "./render/buffer/FrameBufferManager.js";
-import { ColorAndDepthFrameBuffer } from "./render/buffer/buffers/ColorAndDepthFrameBuffer.js";
-import { RenderPassType } from "./render/RenderPassType.js";
-import { renderTextureToScreenQuad } from "./render/utils/renderTextureToScreenQuad.js";
-import { globalMetrics } from "../metrics/GlobalMetrics.js";
-import { MetricsCategory } from "../metrics/MetricsCategory.js";
-import Vector1 from "../../core/geom/Vector1.js";
-import { NormalFrameBuffer } from "./render/buffer/buffers/NormalFrameBuffer.js";
-import { MaterialManager } from "./material/manager/MaterialManager.js";
-import { ShadowMapRenderer } from "./shadows/ShadowMapRenderer.js";
-import { CameraViewManager } from "./render/view/CameraViewManager.js";
-import { StandardFrameBuffers } from "./StandardFrameBuffers.js";
-import { CompositingStages } from "./composit/CompositingStages.js";
-import { DEG_TO_RAD } from "../../core/math/DEG_TO_RAD.js";
+import {Camera} from "./ecs/camera/Camera.js";
+import {MaterialManager} from "./material/manager/MaterialManager.js";
+import {ColorAndDepthFrameBuffer} from "./render/buffer/buffers/ColorAndDepthFrameBuffer.js";
+import {NormalFrameBuffer} from "./render/buffer/buffers/NormalFrameBuffer.js";
+import {FrameBufferManager} from "./render/buffer/FrameBufferManager.js";
+import {RenderLayerManager} from "./render/layers/RenderLayerManager.js";
+import {RenderPassType} from "./render/RenderPassType.js";
+import {renderTextureToScreenQuad} from "./render/utils/renderTextureToScreenQuad.js";
+import {CameraViewManager} from "./render/view/CameraViewManager.js";
+import {ShadowMapRenderer} from "./shadows/ShadowMapRenderer.js";
+import {StandardFrameBuffers} from "./StandardFrameBuffers.js";
 
 /**
  *
@@ -70,609 +69,560 @@ function configureThreeRenderer(webGLRenderer) {
 }
 
 
-/**
- *
- * @param {Camera} camera
- * @param {EntityManager} entityManger
- * @constructor
- */
-function GraphicsEngine(camera, entityManger) {
-    const self = this;
-
-    this.entityManager = entityManger;
-
+export class GraphicsEngine {
     /**
      *
-     * @type {MaterialManager}
-     * @private
+     * @param {Camera} camera
+     * @constructor
      */
-    this.__material_manager = new MaterialManager();
+    constructor(camera) {
+        const self = this;
+
+        /**
+         *
+         * @type {MaterialManager}
+         * @private
+         */
+        this.__material_manager = new MaterialManager();
+
+        // The line below would de-dupe textures, it is a rather slow process however
+        // this.__material_manager.addCompileStep(new CoalesceTextures());
 
-    // The line below would de-dupe textures, it is a rather slow process however
-    // this.__material_manager.addCompileStep(new CoalesceTextures());
+        this.on = {
+            preRender: new Signal(),
+            postRender: new Signal(),
 
-    this.on = {
-        preRender: new Signal(),
-        postRender: new Signal(),
+            preOpaquePass: new Signal(),
+            postOpaquePass: new Signal(),
 
-        preOpaquePass: new Signal(),
-        postOpaquePass: new Signal(),
+            /**
+             * @deprecated
+             */
+            preComposite: new Signal(),
+            /**
+             * @deprecated
+             */
+            postComposite: new Signal(),
+
+            buffersRendered: new Signal(),
+            visibilityConstructionStarted: new Signal(),
+            visibilityConstructionEnded: new Signal()
+        };
 
         /**
-         * @deprecated
+         * @type {Vector1}
          */
-        preComposite: new Signal(),
+        this.pixelRatio = new Vector1(1);
+
         /**
-         * @deprecated
+         *
+         * @type {RenderLayerManager}
          */
-        postComposite: new Signal(),
+        this.layers = new RenderLayerManager();
 
-        buffersRendered: new Signal(),
-        visibilityConstructionStarted: new Signal(),
-        visibilityConstructionEnded: new Signal()
-    };
+        /**
+         *
+         * @type {BinaryNode}
+         */
+        this.bvh = new BinaryNode();
+        this.bvh.setNegativelyInfiniteBounds();
 
-    /**
-     * @type {Vector1}
-     */
-    this.pixelRatio = new Vector1(1);
+        //renderer setup
+        const scene = new ThreeScene();
+        //prevent automatic updates to all descendants of the scene, such updates are very wasteful
+        scene.autoUpdate = false;
+        //prevent scene matrix from automatically updating, as it would result in updates to the entire scene graph
+        scene.matrixAutoUpdate = false;
+        //setup environment
 
-    /**
-     *
-     * @type {RenderLayerManager}
-     */
-    this.layers = new RenderLayerManager();
 
-    /**
-     *
-     * @type {BinaryNode}
-     */
-    this.bvh = new BinaryNode();
-    this.bvh.setNegativelyInfiniteBounds();
+        /**
+         *
+         * @type {Scene}
+         */
+        this.scene = scene;
 
-    //renderer setup
-    const scene = new ThreeScene();
-    //prevent automatic updates to all descendants of the scene, such updates are very wasteful
-    scene.autoUpdate = false;
-    //prevent scene matrix from automatically updating, as it would result in updates to the entire scene graph
-    scene.matrixAutoUpdate = false;
-    //setup environment
 
+        /**
+         *
+         * @type {Group}
+         */
+        this.visibleGroup = new Group();
+        this.visibleGroup.matrixAutoUpdate = false;
 
-    /**
-     *
-     * @type {Scene}
-     */
-    this.scene = scene;
+        this.scene.add(this.visibleGroup);
 
+        /**
+         *
+         * @type {Camera}
+         */
+        this.camera = camera;
 
-    /**
-     *
-     * @type {Group}
-     */
-    this.visibleGroup = new Group();
-    this.visibleGroup.matrixAutoUpdate = false;
+        /**
+         *
+         * @type {WebGLRenderer}
+         */
+        this.renderer = null;
 
-    this.scene.add(this.visibleGroup);
+        //webGLRenderer.shadowMapDebug = true;
+        this.layerComposer = new LayerCompositer();
 
-    /**
-     *
-     * @type {Camera}
-     */
-    this.camera = camera;
+        Object.defineProperties(this, {
+            info: {
+                get: function () {
+                    return self.renderer.info;
+                }
+            }
+        });
 
-    /**
-     *
-     * @type {WebGLRenderer}
-     */
-    this.renderer = null;
+        /**
+         * @type {View}
+         */
+        this.viewport = new EmptyView();
+        this.viewport.size.onChanged.add(this.updateSize, this);
+        this.pixelRatio.onChanged.add(this.updateSize, this);
 
-    //webGLRenderer.shadowMapDebug = true;
-    this.layerComposer = new LayerCompositer();
+        /**
+         * @readonly
+         * @type {FrameBufferManager}
+         */
+        this.frameBuffers = new FrameBufferManager();
 
-    this.initGUI = function (folder) {
-        const ge = this;
-        if (ge.effects === void 0) {
-            return;
-        }
-        ge.effects.initializeGUI(folder);
-    };
+        /**
+         *
+         * @type {ShadowMapRenderer}
+         */
+        this.shadowmap_renderer = new ShadowMapRenderer();
 
-    Object.defineProperties(this, {
-        info: {
-            get: function () {
-                return self.renderer.info;
-            }
-        }
-    });
+        /**
+         * @readonly
+         * @type {CameraViewManager}
+         */
+        this.views = new CameraViewManager();
 
-    /**
-     * @type {View}
-     */
-    this.viewport = new EmptyView();
-    this.viewport.size.onChanged.add(this.updateSize, this);
-    this.pixelRatio.onChanged.add(this.updateSize, this);
+        /**
+         *
+         * @type {CameraView}
+         */
+        this.main_view = this.views.create();
+        this.main_view.name = 'Main Camera';
 
-    /**
-     * @readonly
-     * @type {FrameBufferManager}
-     */
-    this.frameBuffers = new FrameBufferManager();
+        /**
+         * Used to signal that scene needs to be drawn
+         * When set to true will draw frame at next opportunity
+         * @type {boolean}
+         */
+        this.needDraw = true;
 
-    /**
-     *
-     * @type {ShadowMapRenderer}
-     */
-    this.shadowmap_renderer = new ShadowMapRenderer();
+        /**
+         * Will automatically draw each frame
+         * @type {boolean}
+         */
+        this.autoDraw = true;
 
-    /**
-     * @readonly
-     * @type {CameraViewManager}
-     */
-    this.views = new CameraViewManager();
+        /**
+         * Monotonically increasing rendered-frame counter
+         * @type {number}
+         */
+        this.frameIndex = 0;
+        this.intersectObjectUnderViewportPoint = (function () {
+            const point = new ThreeVector3();
+            const raycaster = new ThreeRaycaster();
+            const origin = new ThreeVector3();
+
+            function intersectObject(x, y, object, recurse) {
+                this.viewportProjectionRay(x, y, origin, point);
+                //
+                raycaster.set(origin, point);
+                //console.log(x,y,point.x, point.y, point.z);
+                return raycaster.intersectObject(object, recurse);
+            }
 
+            return intersectObject;
+        })();
+    }
     /**
      *
-     * @type {CameraView}
+     * @returns {MaterialManager}
      */
-    this.main_view = this.views.create();
-    this.main_view.name = 'Main Camera';
+    getMaterialManager() {
+        return this.__material_manager;
+    }
 
     /**
-     * Used to signal that scene needs to be drawn
-     * When set to true will draw frame at next opportunity
-     * @type {boolean}
+     * Get direct access to three.js renderer
+     * @returns {WebGLRenderer}
      */
-    this.needDraw = true;
+    getRenderer() {
+        return this.renderer;
+    }
 
-    /**
-     * Will automatically draw each frame
-     * @type {boolean}
-     */
-    this.autoDraw = true;
+    updateSize() {
+        const size = this.viewport.size;
 
-    /**
-     * Monotonically increasing rendered-frame counter
-     * @type {number}
-     */
-    this.frameIndex = 0;
-}
+        const renderer = this.renderer;
 
-/**
- *
- * @returns {MaterialManager}
- */
-GraphicsEngine.prototype.getMaterialManager = function () {
-    return this.__material_manager;
-}
+        const pixelRatio = this.pixelRatio.getValue();
 
-/**
- * Get direct access to three.js renderer
- * @returns {WebGLRenderer}
- */
-GraphicsEngine.prototype.getRenderer = function () {
-    return this.renderer;
-};
+        const _w = max2(0, size.x * pixelRatio);
+        const _h = max2(0, size.y * pixelRatio);
 
-/**
- * @deprecated
- * @param {string[]|string} paths URLs to faces of the cubemap
- * @returns {Promise<Texture>}
- */
-GraphicsEngine.prototype.loadEnvironmentMap = async function (paths) {
-    throw new Error('Deprecated use `load_and_set_cubemap_v0` instead');
-}
+        renderer.setSize(_w, _h);
 
-GraphicsEngine.prototype.updateSize = function () {
-    const size = this.viewport.size;
+        const devicePixelRatio = window.devicePixelRatio;
 
-    const renderer = this.renderer;
+        renderer.setPixelRatio(devicePixelRatio);
 
-    const pixelRatio = this.pixelRatio.getValue();
 
-    const _w = max2(0, size.x * pixelRatio);
-    const _h = max2(0, size.y * pixelRatio);
+        renderer.domElement.style.width = size.x + "px";
+        renderer.domElement.style.height = size.y + "px";
 
-    renderer.setSize(_w, _h);
 
-    const devicePixelRatio = window.devicePixelRatio;
+        this.frameBuffers.setPixelRatio(devicePixelRatio);
+        this.layerComposer.setPixelRatio(devicePixelRatio);
 
-    renderer.setPixelRatio(devicePixelRatio);
+        this.layerComposer.setSize(_w, _h);
+        this.frameBuffers.setSize(_w, _h);
+    }
 
+    /**
+     *
+     * @param {Vector2|{set:function(x:number,y:number)}} target
+     */
+    getResolution(target) {
+        const ar = this.computeTotalPixelRatio();
 
-    renderer.domElement.style.width = size.x + "px";
-    renderer.domElement.style.height = size.y + "px";
+        target.set(
+            this.viewport.size.x * ar,
+            this.viewport.size.y * ar
+        );
+    }
 
+    /**
+     *
+     * @returns {number}
+     */
+    computeTotalPixelRatio() {
+        return this.pixelRatio.getValue() * window.devicePixelRatio;
+    }
 
-    this.frameBuffers.setPixelRatio(devicePixelRatio);
-    this.layerComposer.setPixelRatio(devicePixelRatio);
+    initializeFrameBuffers() {
+        const colorAndDepthFrameBuffer = new ColorAndDepthFrameBuffer(StandardFrameBuffers.ColorAndDepth);
 
-    this.layerComposer.setSize(_w, _h);
-    this.frameBuffers.setSize(_w, _h);
-};
+        //whole renderer relies on color+depth buffer, so we flag it as always in use to ensure it's always being drawn
+        colorAndDepthFrameBuffer.referenceCount += 1;
 
-/**
- *
- * @param {Vector2|{set:function(x:number,y:number)}} target
- */
-GraphicsEngine.prototype.getResolution = function (target) {
-    const ar = this.computeTotalPixelRatio();
+        this.frameBuffers.add(colorAndDepthFrameBuffer);
 
-    target.set(
-        this.viewport.size.x * ar,
-        this.viewport.size.y * ar
-    );
-}
+        const normalFrameBuffer = new NormalFrameBuffer(StandardFrameBuffers.Normal);
 
-/**
- *
- * @returns {number}
- */
-GraphicsEngine.prototype.computeTotalPixelRatio = function () {
-    return this.pixelRatio.getValue() * window.devicePixelRatio;
-};
+        this.frameBuffers.add(normalFrameBuffer);
 
-GraphicsEngine.prototype.initializeFrameBuffers = function () {
-    const colorAndDepthFrameBuffer = new ColorAndDepthFrameBuffer(StandardFrameBuffers.ColorAndDepth);
+        //initialize buffers
+        this.frameBuffers.initialize(this.renderer);
+    }
 
-    //whole renderer relies on color+depth buffer, so we flag it as always in use to ensure it's always being drawn
-    colorAndDepthFrameBuffer.referenceCount += 1;
+    start() {
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("webgl2", {antialias: false});
 
-    this.frameBuffers.add(colorAndDepthFrameBuffer);
+        const rendererParameters = {
+            antialias: true,
+            logarithmicDepthBuffer: false,
+            canvas,
+            context,
+            /**
+             * @see https://registry.khronos.org/webgl/specs/latest/1.0/#5.2
+             */
+            powerPreference: "high-performance"
+        };
 
-    const normalFrameBuffer = new NormalFrameBuffer(StandardFrameBuffers.Normal);
+        const webGLRenderer = this.renderer = new WebGLRenderer(rendererParameters);
 
-    this.frameBuffers.add(normalFrameBuffer);
+        //print GPU info
+        const GPU_NAME = this.getGPUName();
 
-    //initialize buffers
-    this.frameBuffers.initialize(this.renderer);
-};
+        console.log("GL renderer : ", GPU_NAME);
 
-/**
- * @returns {Texture}
- */
-GraphicsEngine.prototype.getDepthTexture = function () {
-    const frameBuffer = this.frameBuffers.getById(StandardFrameBuffers.ColorAndDepth);
-    return frameBuffer.renderTarget.depthTexture;
-};
-
-GraphicsEngine.prototype.start = function () {
-    const canvas = document.createElement("canvas");
-    const context = canvas.getContext("webgl2", { antialias: false });
-
-    const rendererParameters = {
-        antialias: true,
-        logarithmicDepthBuffer: false,
-        canvas,
-        context,
-        /**
-         * @see https://registry.khronos.org/webgl/specs/latest/1.0/#5.2
-         */
-        powerPreference: "high-performance"
-    };
+        globalMetrics.record("gpu-type", {
+            category: MetricsCategory.System,
+            label: GPU_NAME
+        });
 
-    const webGLRenderer = this.renderer = new WebGLRenderer(rendererParameters);
 
-    //print GPU info
-    const GPU_NAME = this.getGPUName();
+        webGLRenderer.domElement.addEventListener("webglcontextrestored", function (event) {
+            console.warn("webgl cotnext restored", event);
+        }, false);
 
-    console.log("GL renderer : ", GPU_NAME);
+        webGLRenderer.domElement.addEventListener("webglcontextlost", function (event) {
+            // By default when a WebGL program loses the context it never gets it back.  To recover, we prevent default behaviour
+            event.preventDefault();
 
-    globalMetrics.record("gpu-type", {
-        category: MetricsCategory.System,
-        label: GPU_NAME
-    });
+            console.warn("webgl context lost", event);
+        }, false);
 
+        const domElement = this.domElement = webGLRenderer.domElement;
+        //disable selection
+        const style = domElement.style;
+        domElement.classList.add("graphics-engine-render-canvas");
+        style.userSelect = style.webkitUserSelect = style.mozUserSelect = "none";
+        // see : https://www.w3.org/TR/pointerevents/#the-touch-action-css-property
+        style.touchAction = "none";
 
-    webGLRenderer.domElement.addEventListener("webglcontextrestored", function (event) {
-        console.warn("webgl cotnext restored", event);
-    }, false);
+        configureThreeRenderer(webGLRenderer);
 
-    webGLRenderer.domElement.addEventListener("webglcontextlost", function (event) {
-        // By default when a WebGL program loses the context it never gets it back.  To recover, we prevent default behaviour
-        event.preventDefault();
+        this.enableExtensions();
 
-        console.warn("webgl context lost", event);
-    }, false);
+        this.initializeFrameBuffers();
 
-    const domElement = this.domElement = webGLRenderer.domElement;
-    //disable selection
-    const style = domElement.style;
-    domElement.classList.add("graphics-engine-render-canvas");
-    style.userSelect = style.webkitUserSelect = style.mozUserSelect = "none";
-    // see : https://www.w3.org/TR/pointerevents/#the-touch-action-css-property
-    style.touchAction = "none";
+        const viewport = this.viewport;
+        const viewportSize = viewport.size;
 
-    configureThreeRenderer(webGLRenderer);
+        //initialize size
+        webGLRenderer.setSize(viewportSize.x, viewportSize.y);
+        this.frameBuffers.setSize(viewportSize.x, viewportSize.y);
 
-    this.enableExtensions();
+        viewport.el = webGLRenderer.domElement;
+    }
 
-    this.initializeFrameBuffers();
+    /**
+     * Produces GPU identification string via WebGL extension if available
+     * @returns {string}
+     */
+    getGPUName() {
+        const gl = this.renderer.getContext();
 
-    const viewport = this.viewport;
-    const viewportSize = viewport.size;
+        const ext = gl.getExtension("WEBGL_debug_renderer_info");
 
-    //initialize size
-    webGLRenderer.setSize(viewportSize.x, viewportSize.y);
-    this.frameBuffers.setSize(viewportSize.x, viewportSize.y);
+        if (ext === null) {
+            return "Unknown";
+        }
 
-    viewport.el = webGLRenderer.domElement;
-};
+        return gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
+    }
 
-/**
- * Produces GPU identification string via WebGL extension if available
- * @returns {string}
- */
-GraphicsEngine.prototype.getGPUName = function () {
-    const gl = this.renderer.getContext();
+    /**
+     * Shut down renderer engine. After calling this method the engine may no longer be used.
+     */
+    stop() {
+        const renderer = this.renderer;
+        if (renderer !== undefined) {
+            renderer.forceContextLoss();
+            renderer.context = null;
+            renderer.domElement = null;
+            this.renderer = null;
+        }
+    }
 
-    const ext = gl.getExtension("WEBGL_debug_renderer_info");
+    /**
+     * Enables various WebGL extensions required by the engine
+     */
+    enableExtensions() {
+        const ctx = this.renderer.getContext();
+        // Standard derivatives are required for Terrain Shader
+        ctx.getExtension("OES_standard_derivatives");
+        // Depth texture is required for Particle Emitter engine
+        ctx.getExtension("WEBGL_depth_texture");
+        ctx.getExtension("WEBGL_compressed_texture_s3tc");
 
-    if (ext === null) {
-        return "Unknown";
     }
 
-    return gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);
-};
-/**
- * Shut down renderer engine. After calling this method the engine may no longer be used.
- */
-GraphicsEngine.prototype.stop = function () {
-    const renderer = this.renderer;
-    if (renderer !== undefined) {
-        renderer.forceContextLoss();
-        renderer.context = null;
-        renderer.domElement = null;
-        this.renderer = null;
+    /**
+     * Creates a ray from viewport orthogonally into the view frustum
+     * @param {number} x
+     * @param {number} y
+     * @param {Vector3} source Ray source is written here
+     * @param {Vector3} direction Ray target is written here
+     */
+    viewportProjectionRay(x, y, source, direction) {
+        Camera.projectRay(this.camera, x, y, source, direction);
     }
-};
 
+    /**
+     * Converts screen-space pixel position to normalized clip-space
+     * @param {Vector2|Vector3} input
+     * @param {Vector2|Vector3} result
+     */
+    normalizeViewportPoint(input, result) {
+        assert.notEqual(input, undefined);
+        assert.notEqual(result, undefined);
 
-/**
- * Enables various WebGL extensions required by the engine
- */
-GraphicsEngine.prototype.enableExtensions = function () {
-    const ctx = this.renderer.getContext();
-    // Standard derivatives are required for Terrain Shader
-    ctx.getExtension("OES_standard_derivatives");
-    // Depth texture is required for Particle Emitter engine
-    ctx.getExtension("WEBGL_depth_texture");
-    ctx.getExtension("WEBGL_compressed_texture_s3tc");
+        const viewportSize = this.viewport.size;
 
-};
+        // shift by pixel center
+        const _x = input.x + 0.5;
+        const _y = input.y + 0.5;
 
-/**
- * Creates a ray from viewport orthogonally into the view frustum
- * @param {number} x
- * @param {number} y
- * @param {Vector3} source Ray source is written here
- * @param {Vector3} direction Ray target is written here
- */
-GraphicsEngine.prototype.viewportProjectionRay = function viewportProjectionRay(x, y, source, direction) {
-    Camera.projectRay(this.camera, x, y, source, direction);
-};
-
-GraphicsEngine.prototype.intersectObjectUnderViewportPoint = (function () {
-    const point = new ThreeVector3();
-    const raycaster = new ThreeRaycaster();
-    const origin = new ThreeVector3();
-
-    function intersectObject(x, y, object, recurse) {
-        this.viewportProjectionRay(x, y, origin, point);
-        //
-        raycaster.set(origin, point);
-        //console.log(x,y,point.x, point.y, point.z);
-        return raycaster.intersectObject(object, recurse);
+        result.x = (_x / viewportSize.x) * 2 - 1;
+        result.y = -(_y / viewportSize.y) * 2 + 1;
     }
 
-    return intersectObject;
-})();
+    /**
+     * @private
+     * @param {THREE.WebGLRenderer} renderer
+     * @param {THREE.Camera} camera
+     * @param {THREE.Scene} scene
+     */
+    constructVisibleScene(renderer, camera, scene) {
+        this.on.visibilityConstructionStarted.send3(renderer, camera, scene);
 
-/**
- * Converts screen-space pixel position to normalized clip-space
- * @param {Vector2|Vector3} input
- * @param {Vector2|Vector3} result
- */
-GraphicsEngine.prototype.normalizeViewportPoint = function (input, result) {
-    assert.notEqual(input, undefined);
-    assert.notEqual(result, undefined);
+        // Build visibility information
+        this.main_view.set_from_camera(camera);
+        this.views.build_visibility(this.layers);
 
-    const viewportSize = this.viewport.size;
+        this.on.visibilityConstructionEnded.send3(renderer, camera, scene);
+    }
 
-    // shift by pixel center
-    const _x = input.x + 0.5;
-    const _y = input.y + 0.5;
+    clearVisibleGroup() {
+        this.visibleGroup.children.length = 0;
+    }
 
-    result.x = (_x / viewportSize.x) * 2 - 1;
-    result.y = -(_y / viewportSize.y) * 2 + 1;
-};
+    /**
+     *
+     * @param {RenderPassType} passType
+     */
+    prepareRenderPass(passType) {
 
-/**
- * Compute size of viewport in world-space
- * @param {PerspectiveCamera} camera
- * @param {number} zDistance
- * @param {Vector2} result
- * @returns {Vector2}
- */
-GraphicsEngine.prototype.viewportWorldSize = function (camera, zDistance, result) {
-    const size = this.viewport.size;
-    const angleY = camera.fov * DEG_TO_RAD;
-    const cameraZ = camera.position.z;
-    const distFromCamToPlane = Math.abs(cameraZ) + zDistance;
+        this.clearVisibleGroup();
 
-    const planeHeight = Math.tan((angleY * 0.5)) * distFromCamToPlane * 2;
-    const aspectRatio = size.x / size.y;
-    const planeWidth = planeHeight * aspectRatio;
+        const visibleGroup = this.visibleGroup;
 
-    result.x = planeWidth;
-    result.y = planeHeight;
-    return result;
-};
+        let j = 0;
 
-/**
- *
- * @param {THREE.WebGLRenderer} renderer
- * @param {THREE.Camera} camera
- * @param {THREE.Scene} scene
- */
-GraphicsEngine.prototype.constructVisibleScene = function (renderer, camera, scene) {
-    this.on.visibilityConstructionStarted.send3(renderer, camera, scene);
+        const visible_objects = this.main_view.visible_objects;
 
-    // Build visibility information
-    this.main_view.set_from_camera(camera);
-    this.views.build_visibility(this.layers);
+        const element_count = visible_objects.size;
+        const elements = visible_objects.elements;
 
-    this.on.visibilityConstructionEnded.send3(renderer, camera, scene);
-};
+        for (let i = 0; i < element_count; i++) {
+            const object3D = elements[i];
 
-GraphicsEngine.prototype.clearVisibleGroup = function () {
-    this.visibleGroup.children.length = 0;
-};
+            const object_pass = classifyPassTypeFromObject(object3D);
 
-/**
- *
- * @param {THREE.Object3D} object
- * @returns {RenderPassType}
- */
-function classifyPassTypeFromObject(object) {
-    if (object.isMesh || object.isPoints) {
+            if (object_pass === passType) {
 
-        /**
-         * @type {THREE.Material}
-         */
-        const material = object.material;
-        if (material.depthWrite === false && material.depthTest === false) {
-            return RenderPassType.Transparent;
+                //insert object, bypassing Object#add for speed
+                //visibleGroup.add(object3D);
+                object3D.parent = visibleGroup;
+                visibleGroup.children[j++] = object3D;
+            }
         }
-    }
-
-    return RenderPassType.Opaque;
-}
 
-/**
- *
- * @param {RenderPassType} passType
- */
-GraphicsEngine.prototype.prepareRenderPass = function (passType) {
-
-    this.clearVisibleGroup();
+        visibleGroup.length = j;
+    }
 
-    const visibleGroup = this.visibleGroup;
+    /**
+     * Renders opaque assets
+     */
+    renderOpaque() {
+        this.on.preOpaquePass.send0();
 
-    let j = 0;
+        this.prepareRenderPass(RenderPassType.Opaque);
 
-    const visible_objects = this.main_view.visible_objects;
+        const renderer = this.renderer;
 
-    const element_count = visible_objects.size;
-    const elements = visible_objects.elements;
+        const buffers = this.frameBuffers;
 
-    for (let i = 0; i < element_count; i++) {
-        const object3D = elements[i];
+        buffers.render(renderer, this.camera, this.scene);
 
-        const object_pass = classifyPassTypeFromObject(object3D);
+        // TODO designate opaque output buffer
+        const frameBuffer = buffers.getById(StandardFrameBuffers.ColorAndDepth);
 
-        if (object_pass === passType) {
+        renderTextureToScreenQuad(frameBuffer.renderTarget.texture, renderer);
 
-            //insert object, bypassing Object#add for speed
-            //visibleGroup.add(object3D);
-            object3D.parent = visibleGroup;
-            visibleGroup.children[j++] = object3D;
-        }
+        this.on.postOpaquePass.send0();
     }
 
-    visibleGroup.length = j;
-};
+    /**
+     * Renders assets that (may) contain transparent fragments
+     */
+    renderTransparent() {
+        const scene = this.scene;
 
-/**
- * Renders opaque assets
- */
-GraphicsEngine.prototype.renderOpaque = function () {
-    this.on.preOpaquePass.send0();
+        // clear background, as transparent pass is drawn on top, the background should already be composited
+        const _background = scene.background;
+        scene.background = null;
 
-    this.prepareRenderPass(RenderPassType.Opaque);
+        this.prepareRenderPass(RenderPassType.Transparent);
 
-    const renderer = this.renderer;
+        const renderer = this.renderer;
 
-    const buffers = this.frameBuffers;
+        renderer.render(scene, this.camera);
 
-    buffers.render(renderer, this.camera, this.scene);
+        // restore background
+        scene.background = _background;
+    }
 
-    // TODO designate opaque output buffer
-    const frameBuffer = buffers.getById(StandardFrameBuffers.ColorAndDepth);
+    /**
+     *
+     */
+    render() {
+        if (this.needDraw && !this.autoDraw) {
+            this.needDraw = false;
+        }
 
-    renderTextureToScreenQuad(frameBuffer.renderTarget.texture, renderer);
+        this.frameIndex++;
 
-    this.on.postOpaquePass.send0();
-};
+        const renderer = this.renderer;
 
-/**
- * Renders assets that (may) contain transparent fragments
- */
-GraphicsEngine.prototype.renderTransparent = function () {
-    const scene = this.scene;
+        //reset renderer statistics (used for debug)
+        renderer.info.reset();
 
-    // clear background, as transparent pass is drawn on top, the background should already be composited
-    const _background = scene.background;
-    scene.background = null;
+        renderer.autoClear = false;
+        renderer.clearAlpha = 0;
 
-    this.prepareRenderPass(RenderPassType.Transparent);
+        //render actual scene
+        const scene = this.scene;
 
-    const renderer = this.renderer;
+        const camera = this.camera;
 
-    renderer.render(scene, this.camera);
+        if (scene.children.indexOf(camera) < 0) {
+            console.log("added camera");
+            scene.add(camera);
+        }
 
-    // restore background
-    scene.background = _background;
-};
+        this.constructVisibleScene(renderer, camera, scene);
 
-/**
- *
- */
-GraphicsEngine.prototype.render = function () {
-    if (this.needDraw && !this.autoDraw) {
-        this.needDraw = false;
-    }
+        //dispatch pre-render event
+        this.on.preRender.send3(renderer, camera, scene);
 
-    this.frameIndex++;
+        this.main_view.on.preRender.send1(this.main_view);
 
-    const renderer = this.renderer;
+        //do the opaque pass
+        this.renderOpaque();
 
-    //reset renderer statistics (used for debug)
-    renderer.info.reset();
+        this.layerComposer.composite(renderer, CompositingStages.POST_OPAQUE);
 
-    renderer.autoClear = false;
-    renderer.clearAlpha = 0;
+        this.on.buffersRendered.send3(renderer, camera, scene);
 
-    //render actual scene
-    const scene = this.scene;
+        // transparent pass
+        this.renderTransparent();
 
-    const camera = this.camera;
+        this.layerComposer.composite(renderer, CompositingStages.POST_TRANSPARENT);
 
-    if (scene.children.indexOf(camera) < 0) {
-        console.log("added camera");
-        scene.add(camera);
+        //dispatch post-render event
+        this.on.postRender.send3(renderer, camera, scene);
     }
+}
 
-    this.constructVisibleScene(renderer, camera, scene);
-
-    //dispatch pre-render event
-    this.on.preRender.send3(renderer, camera, scene);
-
-    this.main_view.on.preRender.send1(this.main_view);
-
-    //do the opaque pass
-    this.renderOpaque();
-
-    this.layerComposer.composite(renderer, CompositingStages.POST_OPAQUE);
 
-    this.on.buffersRendered.send3(renderer, camera, scene);
+/**
+ *
+ * @param {THREE.Object3D} object
+ * @returns {RenderPassType}
+ */
+function classifyPassTypeFromObject(object) {
+    if (object.isMesh || object.isPoints) {
 
-    // transparent pass
-    this.renderTransparent();
+        /**
+         * @type {THREE.Material}
+         */
+        const material = object.material;
+        if (material.depthWrite === false && material.depthTest === false) {
+            return RenderPassType.Transparent;
+        }
+    }
 
-    this.layerComposer.composite(renderer, CompositingStages.POST_TRANSPARENT);
+    return RenderPassType.Opaque;
+}
 
-    //dispatch post-render event
-    this.on.postRender.send3(renderer, camera, scene);
-};
-export { GraphicsEngine };