Support for Tree Shakable Canvas/WebGL renderer and Font Engines (#348)

* Expose Canvas and WebGL Core Renderers under
`@lightningjs/renderer/webgl` and `@lightningjs/renderer/canvas`
respectively
* Allow RendererMain config to accept a `renderEngine` parameter where
the core renderers can be provided
* Expose SDF Text Renderer and CanvasTextRenderer under canvas/webgl
exports.
* Allow RendererMain config to accept an array of `fontEngines` where
you can provide 1 or 2 Font Engines.
* Fallback with Canvas still works IF Canvas Text Renderer is provided
* Drop memize dependency to reduce overall bundle size, apply simple
caching instead

Todo:
- [x] Check tests, see if text renderer override still works
- [x] Run through some of the resolve code again to make sure we're not
introducing new bottlenecks

In my tests the simple benchmark app went down by `20 kb` by just using
1 font engine to `40 kb` when only using canvas and canvas rendering.

Note: This is a breaking init change, handle with care.

Author: wouterlucas

README.md

@@ -103,10 +103,18 @@ import {
   SdfTrFontFace,
 } from '@lightningjs/renderer';
 
+import {
+  WebGlCoreRenderer,
+  SdfTextRenderer,
+} from '@lightningjs/renderer/webgl';
+import { CanvasTextRenderer } from '@lightningjs/renderer/canvas';
+
 const renderer = new RendererMain(
   {
     appWidth: 1920,
     appHeight: 1080,
+    renderEngine: WebGlCoreRenderer,
+    fontEngines: [SdfTextRenderer, CanvasTextRenderer],
     // ...Other Renderer Config
   },
   'app', // id of div to insert Canvas.
@@ -128,3 +136,12 @@ renderer.stage.fontManager.addFontFace(
   ),
 );
 ```
+
+Please note that the WebGL renderer supports both SDF Fonts and Web Fonts, however the
+Canvas renderer only supports Web Fonts:
+
+| Font Type Renderer | SDF Font | Web Font |
+| ------------------ | -------- | -------- |
+| WebGL              | Y        | Y        |
+| Canvas             | N        | Y        |
+|                    |          |          |

examples/index.ts

@@ -23,6 +23,15 @@ import {
   type RendererMainSettings,
   type FpsUpdatePayload,
 } from '@lightningjs/renderer';
+import {
+  WebGlCoreRenderer,
+  SdfTextRenderer,
+} from '@lightningjs/renderer/webgl';
+import {
+  CanvasCoreRenderer,
+  CanvasTextRenderer,
+} from '@lightningjs/renderer/canvas';
+
 import { assertTruthy } from '@lightningjs/renderer/utils';
 import * as mt19937 from '@stdlib/random-base-mt19937';
 import type {
@@ -225,7 +234,9 @@ async function initRenderer(
       fpsUpdateInterval: logFps ? 1000 : 0,
       enableContextSpy,
       enableInspector,
-      renderMode: renderMode as 'webgl' | 'canvas',
+      renderEngine:
+        renderMode === 'webgl' ? WebGlCoreRenderer : CanvasCoreRenderer,
+      fontEngines: [SdfTextRenderer, CanvasTextRenderer],
       ...customSettings,
     },
     'app',

examples/tests/text-canvas.ts

@@ -71,7 +71,7 @@ export default async function test(settings: ExampleSettings) {
       ] || 0xff0000ff;
   };
 
-  const spawn = (amount = 100) => {
+  const spawn = (amount = 1) => {
     for (let i = 0; i < amount; i++) {
       renderNode(i.toString());
     }

exports/canvas.ts

@@ -0,0 +1,37 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Canvas Text Renderer
+ *
+ * @remarks
+ * This module exports the Canvas Text Renderer for the Lightning 3 Renderer.
+ * The Canvas Text Renderer is used to render text using the Canvas API,
+ * this is slightly less performant than the SDF Text Renderer. However
+ * the Canvas Text Renderer is more widely supported on older devices.
+ *
+ * You can import the exports from this module like so:
+ * ```ts
+ * import { CanvasTextRenderer } from '@lightning/renderer';
+ * ```
+ *
+ * @packageDocumentation
+ */
+
+export { CanvasTextRenderer } from '../src/core/text-rendering/renderers/CanvasTextRenderer.js';
+export { CanvasCoreRenderer } from '../src/core/renderers/canvas/CanvasCoreRenderer.js';

exports/index.ts

@@ -76,9 +76,7 @@ export type { ShaderProgramSources } from '../src/core/renderers/webgl/internal/
 export * from '../src/core/textures/Texture.js';
 
 // Text Rendering & Fonts
-export * from '../src/core/text-rendering/renderers/TextRenderer.js';
-export * from '../src/core/text-rendering/renderers/CanvasTextRenderer.js';
-export * from '../src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
+// export * from '../src/core/text-rendering/renderers/TextRenderer.js';
 export * from '../src/core/text-rendering/font-face-types/TrFontFace.js';
 export * from '../src/core/text-rendering/font-face-types/WebTrFontFace.js';
 export * from '../src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.js';

exports/webgl.ts

@@ -0,0 +1,38 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * SDF Font renderer
+ *
+ * @remarks
+ * This module exports the SDF Font renderer for the Lightning 3 Renderer.
+ * The SDF Font renderer is used to render text using Single-Channel Signed
+ * Distance Field (SSDF) fonts or Multi-Channel Signed Distance Field (MSDF)
+ * fonts. The SDF font renderer is used to render text in a way that is
+ * optimized for GPU rendering.
+ *
+ * You can import the exports from this module like so:
+ * ```ts
+ * import { SdfTextRenderer } from '@lightning/renderer';
+ * ```
+ *
+ * @packageDocumentation
+ */
+
+export { SdfTextRenderer } from '../src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js';
+export { WebGlCoreRenderer } from '../src/core/renderers/webgl/WebGlCoreRenderer.js';

package.json

@@ -6,7 +6,9 @@
   "main": "./dist/exports/index.js",
   "exports": {
     ".": "./dist/exports/index.js",
-    "./utils": "./dist/exports/utils.js"
+    "./utils": "./dist/exports/utils.js",
+    "./canvas": "./dist/exports/canvas.js",
+    "./webgl": "./dist/exports/webgl.js"
   },
   "scripts": {
     "preinstall": "node scripts/please-use-pnpm.js",
@@ -63,10 +65,6 @@
     "vitest": "^1.6.0",
     "vitest-mock-extended": "^1.3.1"
   },
-  "dependencies": {
-    "@protobufjs/eventemitter": "^1.1.0",
-    "memize": "^2.1.0"
-  },
   "lint-staged": {
     "*.ts": [
       "prettier --write",