npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lightningjs/renderer

v2.8.0

Published

Lightning 3 Renderer

Downloads

4,973

Readme

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 not designed for direct application development but instead to provide a lightweight API for front-end application frameworks like Bolt and Solid.

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.

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

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.

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 | | | | |