Skip to content

Commit b9a3563

Browse files
frank-weindelfrank-weindel
authored
Replace FinalizationRegistry based Texture Usage GC with Manual Strategy (#27)
- Usaged-Based Texture Memory management now defaults to a new manual reference count and time threshold strategy. - This removes the requirement of the FinalizationRegistry browser feature which is not available prior to chrome 84 / WPE 2.38. - The prior behavior is still available by setting a new experimental renderer setting to `true`: - `experimental_FinalizationRegistryTextureUsageTracker` - Added `texture-memory-stress` test with instructions on how to perform. - Example tests may now export a `customSettings` function which returns any renderer settings overrides that the test requires to run. These settings are applied on top of all of the defaults specified by the example test launcher. - Improve type checking for EffectDesc - `type` now determines the specific properties types checked. - **Breaking changes:** - Refactor ShaderDesc / TextureDesc related areas including change their names to ShaderRef / TextureRef. - RendererMain.makeTexture renamed to RendererMain.createTexture - RendererMain.makeShader renamed to RendererMain.createShader - TextureDesc type renamed to TextureRef type - ShaderDesc type renamed to ShaderRef type
2 parents 79ba0de + 2e6d15a commit b9a3563

28 files changed

+683
-197
lines changed

‎examples/common/Character.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@
1818
*/
1919

2020
import type {
21+
SpecificTextureRef,
2122
INode,
2223
INodeWritableProps,
2324
RendererMain,
24-
TextureDesc,
25+
TextureRef,
2526
} from '@lightningjs/renderer';
2627
import { assertTruthy } from '@lightningjs/renderer/utils';
2728

@@ -30,12 +31,12 @@ export class Character {
3031
curIntervalAnimation: ReturnType<typeof setTimeout> | null = null;
3132
direction!: 'left' | 'right'; // Set in setState
3233
state!: 'idle' | 'walk' | 'run' | 'jump'; // Set in setState
33-
leftFrames: TextureDesc[] = [];
34+
leftFrames: TextureRef[] = [];
3435

3536
constructor(
3637
private props: Partial<INodeWritableProps>,
3738
private renderer: RendererMain,
38-
private rightFrames: TextureDesc<'SubTexture'>[],
39+
private rightFrames: SpecificTextureRef<'SubTexture'>[],
3940
) {
4041
this.node = renderer.createNode({
4142
x: props.x,
@@ -47,7 +48,7 @@ export class Character {
4748
zIndex: props.zIndex,
4849
});
4950
this.leftFrames = rightFrames.map((frame) => {
50-
return renderer.makeTexture('SubTexture', frame.props, {
51+
return renderer.createTexture('SubTexture', frame.props, {
5152
flipX: true,
5253
});
5354
});

‎examples/common/ExampleSettings.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import type { Dimensions, RendererMain } from '@lightningjs/renderer';
33
export interface ExampleSettings {
44
testName: string;
55
renderer: RendererMain;
6-
appDimensions: Dimensions;
76
driverName: 'main' | 'threadx';
87
canvas: HTMLCanvasElement;
98
}

‎examples/index.ts‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
ThreadXRenderDriver,
2424
type IRenderDriver,
2525
type Dimensions,
26+
type RendererMainSettings,
2627
} from '@lightningjs/renderer';
2728
import { assertTruthy } from '@lightningjs/renderer/utils';
2829
import coreWorkerUrl from './common/CoreWorker.js?importChunkUrl';
@@ -34,13 +35,23 @@ import type { ExampleSettings } from './common/ExampleSettings.js';
3435
// - driver: main | threadx (default: threadx)
3536
// - test: <test name> (default: test)
3637
// - showOverlay: true | false (default: true)
38+
// - finalizationRegistry: true | false (default: false)
39+
// - Use FinalizationRegistryTextureUsageTracker instead of
40+
// ManualCountTextureUsageTracker
3741
const urlParams = new URLSearchParams(window.location.search);
3842
let driverName = urlParams.get('driver');
3943
const test = urlParams.get('test') || 'test';
4044
const showOverlay = urlParams.get('overlay') !== 'false';
45+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
46+
const module = await import(`./tests/${test}.ts`);
47+
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
48+
const customSettings: Partial<RendererMainSettings> =
49+
typeof module.customSettings === 'function'
50+
? module.customSettings(urlParams)
51+
: {};
4152

4253
if (driverName !== 'main' && driverName !== 'threadx') {
43-
driverName = 'threadx';
54+
driverName = 'main';
4455
}
4556

4657
let driver: IRenderDriver | null = null;
@@ -53,18 +64,15 @@ import type { ExampleSettings } from './common/ExampleSettings.js';
5364
});
5465
}
5566

56-
const appDimensions = {
57-
width: 1920,
58-
height: 1080,
59-
};
60-
6167
const renderer = new RendererMain(
6268
{
63-
...appDimensions,
69+
appWidth: 1920,
70+
appHeight: 1080,
6471
deviceLogicalPixelRatio: 0.6666667,
6572
devicePhysicalPixelRatio: 1,
6673
clearColor: 0x00000000,
6774
coreExtensionModule: coreExtensionModuleUrl,
75+
...customSettings,
6876
},
6977
'app',
7078
driver,
@@ -87,19 +95,15 @@ import type { ExampleSettings } from './common/ExampleSettings.js';
8795
overlayText.once(
8896
'textLoaded',
8997
(target: any, { width, height }: Dimensions) => {
90-
overlayText.x = appDimensions.width - width - 20;
91-
overlayText.y = appDimensions.height - height - 20;
98+
overlayText.x = renderer.settings.appWidth - width - 20;
99+
overlayText.y = renderer.settings.appHeight - height - 20;
92100
},
93101
);
94102
}
95103

96-
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
97-
const module = await import(`./tests/${test}.ts`);
98-
99104
const exampleSettings: ExampleSettings = {
100105
testName: test,
101106
renderer,
102-
appDimensions,
103107
driverName: driverName as 'main' | 'threadx',
104108
canvas,
105109
};

‎examples/tests/alpha-blending.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ interface LocalStorageData {
3737
export default async function ({
3838
testName,
3939
renderer,
40-
appDimensions,
4140
canvas,
4241
}: ExampleSettings) {
4342
const savedState = loadStorage<LocalStorageData>(testName);
@@ -55,10 +54,10 @@ export default async function ({
5554
// the right half of the canvas
5655
// We will test WebGL -> WebGL alpha over this background
5756
const rightBackground = renderer.createNode({
58-
x: appDimensions.width / 2,
57+
x: renderer.settings.appWidth / 2,
5958
y: 0,
60-
width: appDimensions.width / 2,
61-
height: appDimensions.height,
59+
width: renderer.settings.appWidth / 2,
60+
height: renderer.settings.appHeight,
6261
color: rightSideBg === 'red' ? 0xff0000ff : 0x00ff00ff,
6362
parent: renderer.root,
6463
zIndex: 0,
@@ -76,7 +75,7 @@ export default async function ({
7675
fontSize: HEADER_FONT_SIZE,
7776
color: 0xffffffff,
7877
contain: 'width',
79-
width: appDimensions.width / 2,
78+
width: renderer.settings.appWidth / 2,
8079
y: PADDING,
8180
textAlign: 'center',
8281
parent: renderer.root,
@@ -88,8 +87,8 @@ export default async function ({
8887
fontSize: HEADER_FONT_SIZE,
8988
color: 0xffffffff,
9089
contain: 'width',
91-
width: appDimensions.width / 2,
92-
x: appDimensions.width / 2,
90+
width: renderer.settings.appWidth / 2,
91+
x: renderer.settings.appWidth / 2,
9392
y: PADDING,
9493
textAlign: 'center',
9594
parent: renderer.root,
@@ -100,7 +99,7 @@ export default async function ({
10099
fontSize: 30,
101100
color: 0xffffffff,
102101
x: PADDING,
103-
y: appDimensions.height - 30 - PADDING,
102+
y: renderer.settings.appHeight - 30 - PADDING,
104103
parent: renderer.root,
105104
});
106105

‎examples/tests/animation.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
import type { ExampleSettings } from '../common/ExampleSettings.js';
2121

22-
export default async function ({ renderer, appDimensions }: ExampleSettings) {
22+
export default async function ({ renderer }: ExampleSettings) {
2323
const randomColor = () => {
2424
const alpha = Math.floor(Math.random() * 256);
2525
const red = Math.floor(Math.random() * 256);
@@ -57,7 +57,7 @@ export default async function ({ renderer, appDimensions }: ExampleSettings) {
5757
create(i)
5858
.animate(
5959
{
60-
x: appDimensions.width + 100,
60+
x: renderer.settings.appWidth + 100,
6161
},
6262
{
6363
duration: 4400,
@@ -97,7 +97,7 @@ export default async function ({ renderer, appDimensions }: ExampleSettings) {
9797
create(2 + i)
9898
.animate(
9999
{
100-
x: appDimensions.width + 100,
100+
x: renderer.settings.appWidth + 100,
101101
},
102102
{
103103
duration: 3400,

‎examples/tests/clipping.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,10 @@ import { PageContainer } from '../common/PageContainer.js';
2424
const SQUARE_SIZE = 200;
2525
const PADDING = 20;
2626

27-
export default async function ({
28-
testName,
29-
renderer,
30-
appDimensions,
31-
}: ExampleSettings) {
27+
export default async function ({ testName, renderer }: ExampleSettings) {
3228
const pageContainer = new PageContainer(renderer, {
33-
width: appDimensions.width,
34-
height: appDimensions.height,
29+
width: renderer.settings.appWidth,
30+
height: renderer.settings.appHeight,
3531
parent: renderer.root,
3632
title: 'Clipping Tests',
3733
testName,

‎examples/tests/dynamic-shader.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default async function ({ renderer }: ExampleSettings) {
2626
y: 100,
2727
width: 250,
2828
height: 500,
29-
shader: renderer.makeShader('DynamicShader', {
29+
shader: renderer.createShader('DynamicShader', {
3030
effects: [
3131
{
3232
type: 'radius',
@@ -72,7 +72,7 @@ export default async function ({ renderer }: ExampleSettings) {
7272
width: 250,
7373
height: 500,
7474
color: 0x00ff00ff,
75-
shader: renderer.makeShader('DynamicShader', {
75+
shader: renderer.createShader('DynamicShader', {
7676
effects: [
7777
{
7878
type: 'borderTop',
@@ -98,7 +98,7 @@ export default async function ({ renderer }: ExampleSettings) {
9898
y: 100,
9999
width: 250,
100100
height: 500,
101-
shader: renderer.makeShader('DynamicShader', {
101+
shader: renderer.createShader('DynamicShader', {
102102
effects: [
103103
{
104104
type: 'linearGradient',
@@ -128,7 +128,7 @@ export default async function ({ renderer }: ExampleSettings) {
128128
width: 250,
129129
height: 500,
130130
color: 0x0000ffff,
131-
shader: renderer.makeShader('DynamicShader', {
131+
shader: renderer.createShader('DynamicShader', {
132132
effects: [
133133
{
134134
type: 'borderRight',
@@ -155,22 +155,22 @@ export default async function ({ renderer }: ExampleSettings) {
155155
width: 250,
156156
height: 500,
157157
color: 0xff0000ff,
158-
shader: renderer.makeShader('DynamicShader', {
158+
shader: renderer.createShader('DynamicShader', {
159159
effects: [
160160
{
161161
type: 'linearGradient',
162162
props: {
163163
angle: 180,
164164
stops: [0.4, 0.8],
165-
colors: [0x0000ffff, '#00000000'],
165+
colors: [0x0000ffff, 0x00000000],
166166
},
167167
},
168168
{
169169
type: 'linearGradient',
170170
props: {
171171
angle: -90,
172172
stops: [0.1, 0.75],
173-
colors: [0x0000ffff, '#00000000'],
173+
colors: [0x0000ffff, 0x00000000],
174174
},
175175
},
176176
],
@@ -184,7 +184,7 @@ export default async function ({ renderer }: ExampleSettings) {
184184
width: 750,
185185
height: 250,
186186
color: 0xff0000ff,
187-
shader: renderer.makeShader('DynamicShader', {
187+
shader: renderer.createShader('DynamicShader', {
188188
effects: [
189189
{
190190
type: 'radius',
@@ -208,7 +208,7 @@ export default async function ({ renderer }: ExampleSettings) {
208208
y: 700,
209209
width: 750,
210210
height: 250,
211-
shader: renderer.makeShader('DynamicShader', {
211+
shader: renderer.createShader('DynamicShader', {
212212
effects: [
213213
{
214214
type: 'radialGradient',

‎examples/tests/mount-pivot.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export default async function ({ renderer }: ExampleSettings) {
7474
colorBottom: randomColor() * 0xffffffaa,
7575
colorTop: randomColor() * 0xffffffaa,
7676
parent: renderer.root,
77-
shader: renderer.makeShader('RoundedRectangle', {
77+
shader: renderer.createShader('RoundedRectangle', {
7878
radius: rnd(10, 50),
7979
}),
8080
mountX,
@@ -90,7 +90,7 @@ export default async function ({ renderer }: ExampleSettings) {
9090
height: 20,
9191
color: 0xffffffff,
9292
parent: node,
93-
shader: renderer.makeShader('RoundedRectangle', {
93+
shader: renderer.createShader('RoundedRectangle', {
9494
radius: 10,
9595
}),
9696
scale: 1,

‎examples/tests/robot.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import robotImg from '../assets/robot/robot.png';
2727
import shadowImg from '../assets/robot/robot-shadow.png';
2828
import type { ExampleSettings } from '../common/ExampleSettings.js';
2929

30-
export default async function ({ renderer, appDimensions }: ExampleSettings) {
30+
export default async function ({ renderer }: ExampleSettings) {
3131
const elevatorBg = renderer.createNode({
3232
x: 368,
3333
y: 228,
@@ -71,8 +71,8 @@ export default async function ({ renderer, appDimensions }: ExampleSettings) {
7171
const environment = renderer.createNode({
7272
x: 0,
7373
y: 0,
74-
width: appDimensions.width,
75-
height: appDimensions.height,
74+
width: renderer.settings.appWidth,
75+
height: renderer.settings.appHeight,
7676
zIndex: 3,
7777
src: environmentImg,
7878
parent: renderer.root,
@@ -167,7 +167,7 @@ export default async function ({ renderer, appDimensions }: ExampleSettings) {
167167
shadow.animate({ alpha: 1 }, { duration: 500 }).start();
168168
await shadow.animate({}, { duration: 2000 }).start().waitUntilStopped();
169169
await robot
170-
.animate({ x: appDimensions.width }, { duration: 5000 })
170+
.animate({ x: renderer.settings.appWidth }, { duration: 5000 })
171171
.start()
172172
.waitUntilStopped();
173173
await closeTopDoors(1000);

‎examples/tests/rotation.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default async function ({ renderer }: ExampleSettings) {
4242
colorBottom: randomColor(),
4343
colorTop: randomColor(),
4444
parent: renderer.root,
45-
shader: renderer.makeShader('RoundedRectangle', {
45+
shader: renderer.createShader('RoundedRectangle', {
4646
radius: rnd(10, 50),
4747
}),
4848
scale: 1,

0 commit comments

Comments
 (0)