@lightningjs/renderer 3.0.0-beta4 → 3.0.0-beta5

package/README.md

@@ -1,147 +1,147 @@
-# Lightning 3 Renderer
-
-A powerful 2D scene renderer designed for rendering highly performant user
-interfaces on web browsers running on embedded devices using WebGL.
-
-The Renderer is part of the [LightningJS](https://lightningjs.io) project. While it is possible to use the renderer directly, it is not recommended. Instead, Lightning 3 works best when combined with [Blits](https://lightningjs.io/v3-docs/blits/getting_started/intro.html).
-
-## Setup & Commands
-
-```
-# Install renderer + example dependencies
-pnpm install
-
-# Build Renderer
-pnpm build
-
-# Build Renderer (watch mode)
-pnpm watch
-
-# Run unit tests
-pnpm test
-
-# Run Visual Regression Tests
-pnpm test:visual
-
-# Build API Documentation (builds into ./typedocs folder)
-pnpm typedoc
-
-# Launch Example Tests in dev mode (includes Build Renderer (watch mode))
-pnpm start
-
-# Launch Example Tests in production mode
-# IMPORTANT: To run test examples on embedded devices that use older browser versions
-# you MUST run the examples in this mode.
-pnpm start:prod
-```
-
-## Browser Targets
-
-The Lightning 3 Renderer's goal is to work with the following browser versions and above:
-
-- Chrome v38 (Released October 7, 2014)
-
-Any JavaScript language features or browser APIs that cannot be automatically transpiled or polyfilled by industry standard transpilers (such as Babel) to target these versions must be carefully considered before use.
-
-For a more detailed and comprehensive list of browsers and their features please see [browsers](./BROWSERS.md).
-
-## Example Tests
-
-The Example Tests sub-project define a set of tests for various Renderer
-features. This is NOT an automated test. The command below will launch a
-web server which can be accessed by a web browser for manual testing. However,
-many of the Example Tests define Snapshots for the Visual Regression Test Runner
-(see below).
-
-The Example Tests can be launched with:
-
-```
-pnpm start
-```
-
-A hosted version can be found [here](https://lightning-js.github.io/renderer/).
-
-This supports modern browsers as well as Chrome 38 and above through a legacy build.
-
-See [examples/README.md](./examples/README.md) for more info.
-
-## Visual Regression Tests
-
-In order to prevent bugs on existing Renderer features when new features or bug
-fixes are added, the Renderer includes a Visual Regression Test Runner along
-with a set of certified snapshot files that are checked into the repository.
-
-These tests can be launched with:
-
-```
-pnpm test:visual
-```
-
-The captured Snapshots of these tests are optionally defined in the individual
-Example Tests.
-
-See [visual-regression/README.md](./visual-regression/README.md) for more info.
-
-## Manual Regression Tests
-
-See [docs/ManualRegressionTests.md].
-
-## Release Procedure
-
-See [RELEASE.md](./RELEASE.md)
-
-## Installing Fonts
-
-Fonts can be installed into the Font Manager exposed by the Renderer's Stage.
-There are two types of fonts that you can install, Web/Canvas2D fonts (WebTrFontFace)
-and SDF fonts (SdfTrFontFace). Install that fonts that your applications needs
-at start up so they are ready when your application is rendered.
-
-```ts
-import {
-  RendererMain,
-  WebTrFontFace,
-  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.
-);
-
-// Load fonts into renderer
-renderer.stage.fontManager.addFontFace(
-  new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
-);
-
-renderer.stage.fontManager.addFontFace(
-  new SdfTrFontFace(
-    'Ubuntu',
-    {},
-    'msdf',
-    stage,
-    '/fonts/Ubuntu-Regular.msdf.png',
-    '/fonts/Ubuntu-Regular.msdf.json',
-  ),
-);
-```
-
-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        |
+# Lightning 3 Renderer
+
+A powerful 2D scene renderer designed for rendering highly performant user
+interfaces on web browsers running on embedded devices using WebGL.
+
+The Renderer is part of the [LightningJS](https://lightningjs.io) project. While it is possible to use the renderer directly, it is not recommended. Instead, Lightning 3 works best when combined with [Blits](https://lightningjs.io/v3-docs/blits/getting_started/intro.html).
+
+## Setup & Commands
+
+```
+# Install renderer + example dependencies
+pnpm install
+
+# Build Renderer
+pnpm build
+
+# Build Renderer (watch mode)
+pnpm watch
+
+# Run unit tests
+pnpm test
+
+# Run Visual Regression Tests
+pnpm test:visual
+
+# Build API Documentation (builds into ./typedocs folder)
+pnpm typedoc
+
+# Launch Example Tests in dev mode (includes Build Renderer (watch mode))
+pnpm start
+
+# Launch Example Tests in production mode
+# IMPORTANT: To run test examples on embedded devices that use older browser versions
+# you MUST run the examples in this mode.
+pnpm start:prod
+```
+
+## Browser Targets
+
+The Lightning 3 Renderer's goal is to work with the following browser versions and above:
+
+- Chrome v38 (Released October 7, 2014)
+
+Any JavaScript language features or browser APIs that cannot be automatically transpiled or polyfilled by industry standard transpilers (such as Babel) to target these versions must be carefully considered before use.
+
+For a more detailed and comprehensive list of browsers and their features please see [browsers](./BROWSERS.md).
+
+## Example Tests
+
+The Example Tests sub-project define a set of tests for various Renderer
+features. This is NOT an automated test. The command below will launch a
+web server which can be accessed by a web browser for manual testing. However,
+many of the Example Tests define Snapshots for the Visual Regression Test Runner
+(see below).
+
+The Example Tests can be launched with:
+
+```
+pnpm start
+```
+
+A hosted version can be found [here](https://lightning-js.github.io/renderer/).
+
+This supports modern browsers as well as Chrome 38 and above through a legacy build.
+
+See [examples/README.md](./examples/README.md) for more info.
+
+## Visual Regression Tests
+
+In order to prevent bugs on existing Renderer features when new features or bug
+fixes are added, the Renderer includes a Visual Regression Test Runner along
+with a set of certified snapshot files that are checked into the repository.
+
+These tests can be launched with:
+
+```
+pnpm test:visual
+```
+
+The captured Snapshots of these tests are optionally defined in the individual
+Example Tests.
+
+See [visual-regression/README.md](./visual-regression/README.md) for more info.
+
+## Manual Regression Tests
+
+See [docs/ManualRegressionTests.md].
+
+## Release Procedure
+
+See [RELEASE.md](./RELEASE.md)
+
+## Installing Fonts
+
+Fonts can be installed into the Font Manager exposed by the Renderer's Stage.
+There are two types of fonts that you can install, Web/Canvas2D fonts (WebTrFontFace)
+and SDF fonts (SdfTrFontFace). Install that fonts that your applications needs
+at start up so they are ready when your application is rendered.
+
+```ts
+import {
+  RendererMain,
+  WebTrFontFace,
+  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.
+);
+
+// Load fonts into renderer
+renderer.stage.fontManager.addFontFace(
+  new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
+);
+
+renderer.stage.fontManager.addFontFace(
+  new SdfTrFontFace(
+    'Ubuntu',
+    {},
+    'msdf',
+    stage,
+    '/fonts/Ubuntu-Regular.msdf.png',
+    '/fonts/Ubuntu-Regular.msdf.json',
+  ),
+);
+```
+
+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        |

package/dist/exports/core-api.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Lightning 3 Renderer Core API
+ *
+ * @remarks
+ * ```
+ * import * from '@lightning/renderer/core';
+ * ```
+ *
+ * The Core API is used by developers to extend the capabilities of the Renderer
+ * by writing custom Shaders, Dynamic Shader Effects, Textures, Text Renderers,
+ * etc.
+ *
+ * Custom capabilities as well as fonts can be loaded via Core Extensions.
+ *
+ * A core extension module is structured like so:
+ * ```ts
+ * import {
+ *   CoreExtension,
+ *   WebTrFontFace,
+ *   SdfTrFontFace,
+ *   type Stage
+ * } from '@lightning/renderer/core';
+ *
+ * export default class MyCoreExtension extends CoreExtension {
+ *   async run(stage: Stage) {
+ *     stage.fontManager.addFontFace(
+ *       new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
+ *     );
+ *
+ *     stage.fontManager.addFontFace(
+ *       new SdfTrFontFace(
+ *         'Ubuntu',
+ *         {},
+ *         'msdf',
+ *         stage,
+ *         '/fonts/Ubuntu-Regular.msdf.png',
+ *         '/fonts/Ubuntu-Regular.msdf.json',
+ *       ),
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * And then imported and registered in the application's entry point
+ * using the `@lightningjs/vite-plugin-import-chunk-url` plugin:
+ * ```ts
+ * import coreExtensionModuleUrl from './MyCoreExtension.js?importChunkUrl';
+ *
+ * // Set up driver, etc.
+ *
+ * // Initialize the Renderer
+ * const renderer = new RendererMain(
+ *   {
+ *     // Other Renderer Config...
+ *     coreExtensionModule: coreExtensionModuleUrl,
+ *   },
+ *   'app',
+ *   driver,
+ * );
+ * ```
+ *
+ * @module
+ */
+export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
+export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
+export * from '../src/core/textures/Texture.js';
+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/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';
+export * from '../src/core/CoreExtension.js';
+export type * from '../src/core/Stage.js';

package/dist/exports/core-api.js

@@ -0,0 +1,96 @@
+/*
+ * 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.
+ */
+/**
+ * Lightning 3 Renderer Core API
+ *
+ * @remarks
+ * ```
+ * import * from '@lightning/renderer/core';
+ * ```
+ *
+ * The Core API is used by developers to extend the capabilities of the Renderer
+ * by writing custom Shaders, Dynamic Shader Effects, Textures, Text Renderers,
+ * etc.
+ *
+ * Custom capabilities as well as fonts can be loaded via Core Extensions.
+ *
+ * A core extension module is structured like so:
+ * ```ts
+ * import {
+ *   CoreExtension,
+ *   WebTrFontFace,
+ *   SdfTrFontFace,
+ *   type Stage
+ * } from '@lightning/renderer/core';
+ *
+ * export default class MyCoreExtension extends CoreExtension {
+ *   async run(stage: Stage) {
+ *     stage.fontManager.addFontFace(
+ *       new WebTrFontFace('Ubuntu', {}, '/fonts/Ubuntu-Regular.ttf'),
+ *     );
+ *
+ *     stage.fontManager.addFontFace(
+ *       new SdfTrFontFace(
+ *         'Ubuntu',
+ *         {},
+ *         'msdf',
+ *         stage,
+ *         '/fonts/Ubuntu-Regular.msdf.png',
+ *         '/fonts/Ubuntu-Regular.msdf.json',
+ *       ),
+ *     );
+ *   }
+ * }
+ * ```
+ *
+ * And then imported and registered in the application's entry point
+ * using the `@lightningjs/vite-plugin-import-chunk-url` plugin:
+ * ```ts
+ * import coreExtensionModuleUrl from './MyCoreExtension.js?importChunkUrl';
+ *
+ * // Set up driver, etc.
+ *
+ * // Initialize the Renderer
+ * const renderer = new RendererMain(
+ *   {
+ *     // Other Renderer Config...
+ *     coreExtensionModule: coreExtensionModuleUrl,
+ *   },
+ *   'app',
+ *   driver,
+ * );
+ * ```
+ *
+ * @module
+ */
+// Shaders
+export * from '../src/core/renderers/webgl/WebGlCoreShader.js';
+export * from '../src/core/renderers/webgl/shaders/effects/ShaderEffect.js';
+// Textures
+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/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';
+// Core Extensions
+export * from '../src/core/CoreExtension.js';
+//# sourceMappingURL=core-api.js.map

package/dist/exports/core-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-api.js","sourceRoot":"","sources":["../../exports/core-api.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AAEH,UAAU;AACV,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6DAA6D,CAAC;AAE5E,WAAW;AACX,cAAc,iCAAiC,CAAC;AAEhD,yBAAyB;AACzB,cAAc,sDAAsD,CAAC;AACrE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,yEAAyE,CAAC;AACxF,cAAc,0DAA0D,CAAC;AACzE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,2EAA2E,CAAC;AAE1F,kBAAkB;AAClB,cAAc,8BAA8B,CAAC"}

package/dist/exports/main-api.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Lightning 3 Renderer Main API
+ *
+ * @remarks
+ * This module exports the Main API for the Lightning 3 Renderer. You
+ * can import the exports from this module like so:
+ * ```ts
+ * import { RendererMain } from '@lightning/renderer';
+ * ```
+ *
+ * Generally developers/frameworks using the Renderer will use the Main API to
+ * render applications.
+ *
+ * Do not confuse the Main API with the Core API which is used to extend
+ * capabilities of the Renderer. The Main API code always runs from the main
+ * thread.
+ *
+ * @module
+ */
+export * from '../src/main-api/INode.js';
+export * from '../src/main-api/ICoreDriver.js';
+export * from '../src/main-api/RendererMain.js';
+export * from '../src/render-drivers/main/MainCoreDriver.js';
+export * from '../src/render-drivers/threadx/ThreadXCoreDriver.js';
+export * from '../src/common/IAnimationController.js';
+export * from '../src/common/CommonTypes.js';
+export type { TextRendererMap } from '../src/core/text-rendering/renderers/TextRenderer.js';
+export type { TrFontFaceMap } from '../src/core/text-rendering/font-face-types/TrFontFace.js';
+export type { AnimationSettings } from '../src/core/animations/CoreAnimation.js';
+export type { EffectProps, FadeOutEffectProps, LinearGradientEffectProps, RadialGradientEffectProps, GrayscaleEffectProps, GlitchEffectProps, RadialProgressEffectProps, } from '../src/core/CoreShaderManager.js';

package/dist/exports/main-api.js

@@ -0,0 +1,45 @@
+/*
+ * 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.
+ */
+/**
+ * Lightning 3 Renderer Main API
+ *
+ * @remarks
+ * This module exports the Main API for the Lightning 3 Renderer. You
+ * can import the exports from this module like so:
+ * ```ts
+ * import { RendererMain } from '@lightning/renderer';
+ * ```
+ *
+ * Generally developers/frameworks using the Renderer will use the Main API to
+ * render applications.
+ *
+ * Do not confuse the Main API with the Core API which is used to extend
+ * capabilities of the Renderer. The Main API code always runs from the main
+ * thread.
+ *
+ * @module
+ */
+export * from '../src/main-api/INode.js';
+export * from '../src/main-api/ICoreDriver.js';
+export * from '../src/main-api/RendererMain.js';
+export * from '../src/render-drivers/main/MainCoreDriver.js';
+export * from '../src/render-drivers/threadx/ThreadXCoreDriver.js';
+export * from '../src/common/IAnimationController.js';
+export * from '../src/common/CommonTypes.js';
+//# sourceMappingURL=main-api.js.map

package/dist/exports/main-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-api.js","sourceRoot":"","sources":["../../exports/main-api.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC;AAChD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,oDAAoD,CAAC;AACnE,cAAc,uCAAuC,CAAC;AACtD,cAAc,8BAA8B,CAAC"}

package/dist/src/core/CoreExtension.d.ts

@@ -0,0 +1,12 @@
+import type { Stage } from './Stage.js';
+/**
+ * Base class for Core extensions.
+ *
+ * @remarks
+ * Core extensions are used to extend the Core Renderer with custom code such as
+ * custom fonts, custom shaders, custom textures, custom animation functions,
+ * and more.
+ */
+export declare abstract class CoreExtension {
+    abstract run(stage: Stage): Promise<void>;
+}

package/dist/src/core/CoreExtension.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+/**
+ * Base class for Core extensions.
+ *
+ * @remarks
+ * Core extensions are used to extend the Core Renderer with custom code such as
+ * custom fonts, custom shaders, custom textures, custom animation functions,
+ * and more.
+ */
+export class CoreExtension {
+}
+//# sourceMappingURL=CoreExtension.js.map

package/dist/src/core/CoreExtension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoreExtension.js","sourceRoot":"","sources":["../../../src/core/CoreExtension.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH;;;;;;;GAOG;AACH,MAAM,OAAgB,aAAa;CAElC"}

package/dist/src/core/CoreNode.js

@@ -1405,7 +1405,7 @@ export class CoreNode extends EventEmitter {
             shader.attachNode(this);
         }
         this.props.shader = shader;
-        this.setUpdateType(UpdateType.IsRenderable);
+        this.setUpdateType(UpdateType.IsRenderable | UpdateType.RecalcUniforms);
     }
     get src() {
         return this.props.src;