Lightning 3 Renderer
npm install @lightningjs/rendererA 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 project. While it is possible to use the renderer directly, it is not recommended. Instead, Lightning 3 works best when combined with Blits.
``Install renderer + example dependencies
pnpm install
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.
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.
This supports modern browsers as well as Chrome 38 and above through a legacy build.
See 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 for more info.
Manual Regression Tests
See [docs/ManualRegressionTests.md].
Release Procedure
See 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 |