@oliversalzburg/js-utils 0.0.24-dev.11 → 0.0.24-dev.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/errors/NotImplementedError.d.ts +1 -1
- package/errors/NotImplementedError.js +1 -1
- package/errors/NotImplementedError.js.map +1 -1
- package/graphics/canvas-sandbox.d.ts +10 -8
- package/graphics/canvas-sandbox.js +4 -3
- package/graphics/canvas-sandbox.js.map +1 -1
- package/graphics/canvas.d.ts +28 -143
- package/graphics/canvas.js +12 -277
- package/graphics/canvas.js.map +1 -1
- package/graphics/canvas2d.d.ts +168 -0
- package/graphics/canvas2d.js +324 -0
- package/graphics/canvas2d.js.map +1 -0
- package/graphics/canvas3d.d.ts +56 -0
- package/graphics/canvas3d.js +75 -0
- package/graphics/canvas3d.js.map +1 -0
- package/graphics/index.d.ts +3 -0
- package/graphics/index.js +3 -0
- package/graphics/index.js.map +1 -1
- package/graphics/render-loop.d.ts +1 -1
- package/graphics/render-loop.js +5 -44
- package/graphics/render-loop.js.map +1 -1
- package/graphics/shader.d.ts +70 -0
- package/graphics/shader.js +90 -0
- package/graphics/shader.js.map +1 -0
- package/math/vector3.d.ts +2 -2
- package/nil.d.ts +35 -0
- package/nil.js +63 -0
- package/nil.js.map +1 -1
- package/package.json +1 -1
package/graphics/canvas.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../source/graphics/canvas.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../source/graphics/canvas.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,OAAgB,MAAM;IAC1B;;OAEG;IACM,SAAS,CAAoB;IAEtC;;;OAGG;IACH,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;IAC9B,CAAC;IAED;;;OAGG;IACH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACH,YAAY,MAAyB;QACnC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC;IAC1B,CAAC;CAiCF"}
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
/// <reference types="@types/web" />
|
|
2
|
+
import { Canvas } from "./canvas.js";
|
|
3
|
+
/**
|
|
4
|
+
* Construction options for a {@linkcode Canvas2D}.
|
|
5
|
+
* @group Graphics
|
|
6
|
+
*/
|
|
7
|
+
export interface Canvas2DOptions {
|
|
8
|
+
/**
|
|
9
|
+
* Was this {@linkcode Canvas2D} created with the ability to copy the front buffer back into
|
|
10
|
+
* the back buffer?
|
|
11
|
+
*/
|
|
12
|
+
readonly supportReadBack: boolean;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* The {@linkcode Canvas2D} is a double-buffered construct to help with drawing to a
|
|
16
|
+
* {@linkcode !HTMLCanvasElement} with best possible performance.
|
|
17
|
+
* We utilize an {@linkcode !OffscreenCanvas} with a {@linkcode !OffscreenCanvasRenderingContext2D}
|
|
18
|
+
* to draw frames and expect to render them back to the DOM in regular intervals.
|
|
19
|
+
* @group Graphics
|
|
20
|
+
*/
|
|
21
|
+
export declare class Canvas2D extends Canvas {
|
|
22
|
+
#private;
|
|
23
|
+
/**
|
|
24
|
+
* Retrieves the rendering context of the canvas.
|
|
25
|
+
* @returns The rendering context of the canvas.
|
|
26
|
+
*/
|
|
27
|
+
get context(): OffscreenCanvasRenderingContext2D;
|
|
28
|
+
/**
|
|
29
|
+
* Our back buffer.
|
|
30
|
+
*/
|
|
31
|
+
buffer: Uint8ClampedArray;
|
|
32
|
+
/**
|
|
33
|
+
* The configuration that was used for this canvas.
|
|
34
|
+
*/
|
|
35
|
+
readonly options: Readonly<Partial<Canvas2DOptions>>;
|
|
36
|
+
/**
|
|
37
|
+
* Constructs a new {@linkcode Canvas2D}.
|
|
38
|
+
* @param canvas - The canvas to wrap.
|
|
39
|
+
* @param options - The configuration for this canvas.
|
|
40
|
+
*/
|
|
41
|
+
constructor(canvas: HTMLCanvasElement, options?: Partial<Canvas2DOptions>);
|
|
42
|
+
/**
|
|
43
|
+
* Recreate internal buffers in reaction to a change in our target {@linkcode !HTMLCanvasElement}.
|
|
44
|
+
*/
|
|
45
|
+
refreshCanvasNode(): void;
|
|
46
|
+
/**
|
|
47
|
+
* Draw FPS information onto the canvas.
|
|
48
|
+
* @param frameTimes - Durations of previous frame draws.
|
|
49
|
+
* @param frameTime - The duration of the previous frame draw.
|
|
50
|
+
* @param timeDelta - The time elapsed since the last frame.
|
|
51
|
+
*/
|
|
52
|
+
renderFpsInfo(frameTimes: Array<number>, frameTime: number, timeDelta: number): void;
|
|
53
|
+
/**
|
|
54
|
+
* Draws the back buffer onto the canvas.
|
|
55
|
+
*/
|
|
56
|
+
update(): void;
|
|
57
|
+
/**
|
|
58
|
+
* Draws the offscreen canvas into the DOM canvas.
|
|
59
|
+
*/
|
|
60
|
+
render(): void;
|
|
61
|
+
/**
|
|
62
|
+
* Draws a slightly transparent, black rectangle over the canvas,
|
|
63
|
+
* and then reads the result back into the buffer.
|
|
64
|
+
* @param color - The color to fade the buffer with. The alpha component of
|
|
65
|
+
* the color defines how strong the fade is. `0` is not at all, `255` makes
|
|
66
|
+
* it instantly black.
|
|
67
|
+
*/
|
|
68
|
+
fade(color?: number): void;
|
|
69
|
+
/**
|
|
70
|
+
* Reads the front buffer back into the back buffer.
|
|
71
|
+
*/
|
|
72
|
+
bufferReadBack(): void;
|
|
73
|
+
/**
|
|
74
|
+
* Returns the color of a pixel in the back buffer.
|
|
75
|
+
* @param x - The X coordinate to retrieve.
|
|
76
|
+
* @param y - The X coordinate to retrieve.
|
|
77
|
+
* @returns The color of the pixel at the given local.
|
|
78
|
+
*/
|
|
79
|
+
getPixel32(x: number, y: number): number;
|
|
80
|
+
/**
|
|
81
|
+
* Colors a pixel in the back buffer.
|
|
82
|
+
* @param x - The X coordinate to color.
|
|
83
|
+
* @param y - The Y coordinate to color.
|
|
84
|
+
* @param color - The color to place at the coordinate.
|
|
85
|
+
*/
|
|
86
|
+
setPixel32(x: number, y: number, color: number): void;
|
|
87
|
+
/**
|
|
88
|
+
* Fills the entire back buffer with the given color.
|
|
89
|
+
* @param color - The color to fill the back buffer with.
|
|
90
|
+
*/
|
|
91
|
+
clearWith(color: number): void;
|
|
92
|
+
/**
|
|
93
|
+
* Fills the entire back buffer with the given color.
|
|
94
|
+
* @param color - The color to fill the back buffer with.
|
|
95
|
+
*/
|
|
96
|
+
blendWith(color: number): void;
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Linearly blends a new pixel with an existing color value in a {@linkcode Canvas2D}.
|
|
100
|
+
*
|
|
101
|
+
* As this method is often called many times in render loops, only bounds
|
|
102
|
+
* checking is applied to the given coordinates.
|
|
103
|
+
*
|
|
104
|
+
* The coordinates are **expected to already be integers**. Supplying numbers with fractions
|
|
105
|
+
* has performance implications. Ensure you're working with integers, or truncate the
|
|
106
|
+
* coordinates before passing them in.
|
|
107
|
+
*
|
|
108
|
+
* The `alpha` value is expected to be an integer in the range from `0` to `255`.
|
|
109
|
+
* `0` meaning fully transparent, `255` meaning fully opaque.
|
|
110
|
+
* @param canvas - The {@linkcode Canvas2D} to interact with.
|
|
111
|
+
* @param x - The X coordinate at which to place the pixel.
|
|
112
|
+
* @param y - The Y coordinate at which to place the pixel.
|
|
113
|
+
* @param color - The color of the pixel.
|
|
114
|
+
* @param alpha - The alpha value to use to blend the pixel with existing color at the location.
|
|
115
|
+
* @group Graphics
|
|
116
|
+
*/
|
|
117
|
+
export declare const putPixel32: (canvas: Canvas2D, x: number, y: number, color: number, alpha: number) => void;
|
|
118
|
+
/**
|
|
119
|
+
* Additively blends a new pixel with an existing color value in a {@linkcode Canvas2D}.
|
|
120
|
+
*
|
|
121
|
+
* As this method is often called many times in render loops, only bounds
|
|
122
|
+
* checking is applied to the given coordinates.
|
|
123
|
+
*
|
|
124
|
+
* The coordinates are **expected to already be integers**. Supplying numbers with fractions
|
|
125
|
+
* has performance implications. Ensure you're working with integers, or truncate the
|
|
126
|
+
* coordinates before passing them in.
|
|
127
|
+
*
|
|
128
|
+
* The `alpha` value is expected to be an integer in the range from `0` to `255`.
|
|
129
|
+
* `0` meaning fully transparent, `255` meaning fully opaque.
|
|
130
|
+
* @param canvas - The {@linkcode Canvas2D} to interact with.
|
|
131
|
+
* @param x - The X coordinate at which to place the pixel.
|
|
132
|
+
* @param y - The Y coordinate at which to place the pixel.
|
|
133
|
+
* @param color - The color of the pixel.
|
|
134
|
+
* @param alpha - The alpha value to use to blend the pixel with existing color at the location.
|
|
135
|
+
* @group Graphics
|
|
136
|
+
*/
|
|
137
|
+
export declare const putPixel32Add: (canvas: Canvas2D, x: number, y: number, color: number, alpha: number) => void;
|
|
138
|
+
/**
|
|
139
|
+
* Subtractively blends a new pixel with an existing color value in a {@linkcode Canvas2D}.
|
|
140
|
+
*
|
|
141
|
+
* As this method is often called many times in render loops, only bounds
|
|
142
|
+
* checking is applied to the given coordinates.
|
|
143
|
+
*
|
|
144
|
+
* The coordinates are **expected to already be integers**. Supplying numbers with fractions
|
|
145
|
+
* has performance implications. Ensure you're working with integers, or truncate the
|
|
146
|
+
* coordinates before passing them in.
|
|
147
|
+
*
|
|
148
|
+
* The `alpha` value is expected to be an integer in the range from `0` to `255`.
|
|
149
|
+
* `0` meaning fully transparent, `255` meaning fully opaque.
|
|
150
|
+
* @param canvas - The {@linkcode Canvas2D} to interact with.
|
|
151
|
+
* @param x - The X coordinate at which to place the pixel.
|
|
152
|
+
* @param y - The Y coordinate at which to place the pixel.
|
|
153
|
+
* @param color - The color of the pixel.
|
|
154
|
+
* @param alpha - The alpha value to use to blend the pixel with existing color at the location.
|
|
155
|
+
* @group Graphics
|
|
156
|
+
*/
|
|
157
|
+
export declare const putPixel32Sub: (canvas: Canvas2D, x: number, y: number, color: number, alpha: number) => void;
|
|
158
|
+
/**
|
|
159
|
+
* Linearly blends a new pixel with an existing color value in a {@linkcode Canvas2D}.
|
|
160
|
+
* Compared to {@linkcode putPixel32}, this function supports sub-pixel placement, but is dramatically slower.
|
|
161
|
+
* @param canvas - The {@linkcode Canvas2D} to interact with.
|
|
162
|
+
* @param x - The X coordinate at which to place the pixel.
|
|
163
|
+
* @param y - The Y coordinate at which to place the pixel.
|
|
164
|
+
* @param color - The color of the pixel.
|
|
165
|
+
* @param alpha - The alpha value to use to blend the pixel with existing color at the location.
|
|
166
|
+
* @group Graphics
|
|
167
|
+
*/
|
|
168
|
+
export declare const putSubPixel32: (canvas: Canvas2D, x: number, y: number, color: number, alpha: number) => void;
|
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
import { InvalidOperationError } from "../errors/InvalidOperationError.js";
|
|
2
|
+
import { mustExist } from "../nil.js";
|
|
3
|
+
import { Canvas } from "./canvas.js";
|
|
4
|
+
import { blend, blendAdditive, blendSubtractive, fromRGBA, getA, getB, getG, getR, } from "./core.js";
|
|
5
|
+
import { MS_PER_FRAME_60FPS } from "./render-loop.js";
|
|
6
|
+
/**
|
|
7
|
+
* The {@linkcode Canvas2D} is a double-buffered construct to help with drawing to a
|
|
8
|
+
* {@linkcode !HTMLCanvasElement} with best possible performance.
|
|
9
|
+
* We utilize an {@linkcode !OffscreenCanvas} with a {@linkcode !OffscreenCanvasRenderingContext2D}
|
|
10
|
+
* to draw frames and expect to render them back to the DOM in regular intervals.
|
|
11
|
+
* @group Graphics
|
|
12
|
+
*/
|
|
13
|
+
export class Canvas2D extends Canvas {
|
|
14
|
+
/**
|
|
15
|
+
* The rendering context for the canvas located in the DOM.
|
|
16
|
+
*/
|
|
17
|
+
#canvasDomContext;
|
|
18
|
+
/**
|
|
19
|
+
* The offscreen canvas we use for rendering.
|
|
20
|
+
*/
|
|
21
|
+
#canvasOffscreen;
|
|
22
|
+
/**
|
|
23
|
+
* The 2D rendering context we're using to draw to the canvas.
|
|
24
|
+
*/
|
|
25
|
+
#context;
|
|
26
|
+
/**
|
|
27
|
+
* Retrieves the rendering context of the canvas.
|
|
28
|
+
* @returns The rendering context of the canvas.
|
|
29
|
+
*/
|
|
30
|
+
get context() {
|
|
31
|
+
return this.#context;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* The {@linkcode !ImageData} object in our offscreen canvas. We usually interact with its
|
|
35
|
+
* {@linkcode Canvas2D.buffer buffer} directly.
|
|
36
|
+
*/
|
|
37
|
+
#imageData;
|
|
38
|
+
/**
|
|
39
|
+
* Our back buffer.
|
|
40
|
+
*/
|
|
41
|
+
buffer;
|
|
42
|
+
/**
|
|
43
|
+
* The configuration that was used for this canvas.
|
|
44
|
+
*/
|
|
45
|
+
options;
|
|
46
|
+
/**
|
|
47
|
+
* Constructs a new {@linkcode Canvas2D}.
|
|
48
|
+
* @param canvas - The canvas to wrap.
|
|
49
|
+
* @param options - The configuration for this canvas.
|
|
50
|
+
*/
|
|
51
|
+
constructor(canvas, options = {}) {
|
|
52
|
+
super(canvas);
|
|
53
|
+
this.options = options;
|
|
54
|
+
this.#canvasDomContext = mustExist(this.canvasDom.getContext("bitmaprenderer", {
|
|
55
|
+
alpha: false,
|
|
56
|
+
}), "Unable to create rendering context for DOM canvas.");
|
|
57
|
+
// Why not .transferControlToOffscreen()?
|
|
58
|
+
// It prevents the consumer from interactively resizing the DOM canvas.
|
|
59
|
+
// We prefer to just have a discrete offscreen buffer, which we can
|
|
60
|
+
// fully control. In testing, the performance impact seemed insignificant.
|
|
61
|
+
this.#canvasOffscreen = new OffscreenCanvas(this.width, this.height);
|
|
62
|
+
this.#context = mustExist(this.#canvasOffscreen.getContext("2d", {
|
|
63
|
+
alpha: false,
|
|
64
|
+
desynchronized: true,
|
|
65
|
+
willReadFrequently: this.options.supportReadBack,
|
|
66
|
+
}), "Unable to create rendering context for offscreen canvas.");
|
|
67
|
+
this.#imageData = this.#context.createImageData(this.width, this.height);
|
|
68
|
+
this.buffer = this.#imageData.data;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* Recreate internal buffers in reaction to a change in our target {@linkcode !HTMLCanvasElement}.
|
|
72
|
+
*/
|
|
73
|
+
refreshCanvasNode() {
|
|
74
|
+
this.#canvasOffscreen = new OffscreenCanvas(this.width, this.height);
|
|
75
|
+
this.#context = mustExist(this.#canvasOffscreen.getContext("2d", {
|
|
76
|
+
alpha: false,
|
|
77
|
+
desynchronized: true,
|
|
78
|
+
willReadFrequently: this.options.supportReadBack,
|
|
79
|
+
}), "Unable to create rendering context for offscreen canvas.");
|
|
80
|
+
this.#imageData = this.#context.createImageData(this.width, this.height);
|
|
81
|
+
this.buffer = this.#imageData.data;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* Draw FPS information onto the canvas.
|
|
85
|
+
* @param frameTimes - Durations of previous frame draws.
|
|
86
|
+
* @param frameTime - The duration of the previous frame draw.
|
|
87
|
+
* @param timeDelta - The time elapsed since the last frame.
|
|
88
|
+
*/
|
|
89
|
+
renderFpsInfo(frameTimes, frameTime, timeDelta) {
|
|
90
|
+
const maxFrameTime = frameTimes.reduce((max, frameTime) => {
|
|
91
|
+
if (max < frameTime) {
|
|
92
|
+
max = frameTime;
|
|
93
|
+
}
|
|
94
|
+
return max;
|
|
95
|
+
}, 0);
|
|
96
|
+
const sumFrameTimes = frameTimes.reduce((sum, frameTime) => sum + frameTime, 0);
|
|
97
|
+
const fpsAll = Math.round(frameTimes.length / (sumFrameTimes / 1000)).toString();
|
|
98
|
+
const fpsFrame = 1000 / frameTime;
|
|
99
|
+
const fpsDelta = 1000 / timeDelta;
|
|
100
|
+
let currentX = this.width;
|
|
101
|
+
for (const frameTime of frameTimes) {
|
|
102
|
+
let fillColor = 0x00ff00ff;
|
|
103
|
+
let width = 1;
|
|
104
|
+
if (MS_PER_FRAME_60FPS < frameTime) {
|
|
105
|
+
const quality = frameTime / maxFrameTime;
|
|
106
|
+
fillColor = blend(0x00ff00ff, 0xff0000ff, Math.trunc(quality * 255)) >>> 0;
|
|
107
|
+
width = Math.round(frameTime / MS_PER_FRAME_60FPS);
|
|
108
|
+
}
|
|
109
|
+
this.context.fillStyle = `#${fillColor.toString(16).padStart(8, "0")}`;
|
|
110
|
+
this.context.globalAlpha = 255;
|
|
111
|
+
this.context.fillRect(currentX - width, this.height, width, (frameTime / Math.max(100, maxFrameTime)) * -100);
|
|
112
|
+
currentX -= width;
|
|
113
|
+
}
|
|
114
|
+
this.context.beginPath();
|
|
115
|
+
this.context.strokeStyle = "#fff";
|
|
116
|
+
this.context.moveTo(0, this.height - MS_PER_FRAME_60FPS);
|
|
117
|
+
this.context.lineTo(this.width, this.height - MS_PER_FRAME_60FPS);
|
|
118
|
+
this.context.stroke();
|
|
119
|
+
const fpsString = `${Math.round(fpsFrame)}f ${fpsAll}∑ ${Math.round(fpsDelta)}δ`;
|
|
120
|
+
this.context.font = "13px monospace";
|
|
121
|
+
this.context.strokeStyle = "rgba( 255, 255, 255, 1)";
|
|
122
|
+
this.context.textAlign = "right";
|
|
123
|
+
this.context.textRendering = "geometricPrecision";
|
|
124
|
+
this.context.strokeText(fpsString, this.width - 3, this.height - 3);
|
|
125
|
+
this.context.fillStyle = "#000000";
|
|
126
|
+
this.context.fillText(fpsString, this.width - 3, this.height - 3);
|
|
127
|
+
}
|
|
128
|
+
/**
|
|
129
|
+
* Draws the back buffer onto the canvas.
|
|
130
|
+
*/
|
|
131
|
+
update() {
|
|
132
|
+
this.#context.putImageData(this.#imageData, 0, 0);
|
|
133
|
+
}
|
|
134
|
+
/**
|
|
135
|
+
* Draws the offscreen canvas into the DOM canvas.
|
|
136
|
+
*/
|
|
137
|
+
render() {
|
|
138
|
+
const newFrame = this.#canvasOffscreen.transferToImageBitmap();
|
|
139
|
+
this.#canvasDomContext.transferFromImageBitmap(newFrame);
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Draws a slightly transparent, black rectangle over the canvas,
|
|
143
|
+
* and then reads the result back into the buffer.
|
|
144
|
+
* @param color - The color to fade the buffer with. The alpha component of
|
|
145
|
+
* the color defines how strong the fade is. `0` is not at all, `255` makes
|
|
146
|
+
* it instantly black.
|
|
147
|
+
*/
|
|
148
|
+
fade(color = fromRGBA(0, 0, 0, 1)) {
|
|
149
|
+
this.blendWith(color);
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* Reads the front buffer back into the back buffer.
|
|
153
|
+
*/
|
|
154
|
+
bufferReadBack() {
|
|
155
|
+
if (!this.options.supportReadBack) {
|
|
156
|
+
throw new InvalidOperationError("To use `bufferReadBack()`, you must construct the `Canvas` with `options.supportReadBack` set to `true`.");
|
|
157
|
+
}
|
|
158
|
+
this.#imageData = this.#context.getImageData(0, 0, this.width, this.height);
|
|
159
|
+
this.buffer = this.#imageData.data;
|
|
160
|
+
}
|
|
161
|
+
/**
|
|
162
|
+
* Returns the color of a pixel in the back buffer.
|
|
163
|
+
* @param x - The X coordinate to retrieve.
|
|
164
|
+
* @param y - The X coordinate to retrieve.
|
|
165
|
+
* @returns The color of the pixel at the given local.
|
|
166
|
+
*/
|
|
167
|
+
getPixel32(x, y) {
|
|
168
|
+
const bufferOffset = (x + y * this.width) * 4;
|
|
169
|
+
return fromRGBA(this.buffer[bufferOffset + 0], this.buffer[bufferOffset + 1], this.buffer[bufferOffset + 2], this.buffer[bufferOffset + 3]);
|
|
170
|
+
}
|
|
171
|
+
/**
|
|
172
|
+
* Colors a pixel in the back buffer.
|
|
173
|
+
* @param x - The X coordinate to color.
|
|
174
|
+
* @param y - The Y coordinate to color.
|
|
175
|
+
* @param color - The color to place at the coordinate.
|
|
176
|
+
*/
|
|
177
|
+
setPixel32(x, y, color) {
|
|
178
|
+
const bufferOffset = (x + y * this.width) * 4;
|
|
179
|
+
this.buffer[bufferOffset + 0] = getR(color);
|
|
180
|
+
this.buffer[bufferOffset + 1] = getG(color);
|
|
181
|
+
this.buffer[bufferOffset + 2] = getB(color);
|
|
182
|
+
this.buffer[bufferOffset + 3] = getA(color);
|
|
183
|
+
}
|
|
184
|
+
/**
|
|
185
|
+
* Fills the entire back buffer with the given color.
|
|
186
|
+
* @param color - The color to fill the back buffer with.
|
|
187
|
+
*/
|
|
188
|
+
clearWith(color) {
|
|
189
|
+
const r = getR(color);
|
|
190
|
+
const g = getG(color);
|
|
191
|
+
const b = getB(color);
|
|
192
|
+
const a = getA(color);
|
|
193
|
+
for (let bufferOffset = 0; bufferOffset < this.width * this.height * 4; bufferOffset += 4) {
|
|
194
|
+
this.buffer[bufferOffset + 0] = r;
|
|
195
|
+
this.buffer[bufferOffset + 1] = g;
|
|
196
|
+
this.buffer[bufferOffset + 2] = b;
|
|
197
|
+
this.buffer[bufferOffset + 3] = a;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* Fills the entire back buffer with the given color.
|
|
202
|
+
* @param color - The color to fill the back buffer with.
|
|
203
|
+
*/
|
|
204
|
+
blendWith(color) {
|
|
205
|
+
const r = getR(color);
|
|
206
|
+
const g = getG(color);
|
|
207
|
+
const b = getB(color);
|
|
208
|
+
const a = getA(color);
|
|
209
|
+
for (let bufferOffset = 0; bufferOffset < this.width * this.height * 4; bufferOffset += 4) {
|
|
210
|
+
this.buffer[bufferOffset + 0] = (a * r + (255 - a) * this.buffer[bufferOffset + 0]) >> 8;
|
|
211
|
+
this.buffer[bufferOffset + 1] = (a * g + (255 - a) * this.buffer[bufferOffset + 1]) >> 8;
|
|
212
|
+
this.buffer[bufferOffset + 2] = (a * b + (255 - a) * this.buffer[bufferOffset + 2]) >> 8;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Linearly blends a new pixel with an existing color value in a {@linkcode Canvas2D}.
|
|
218
|
+
*
|
|
219
|
+
* As this method is often called many times in render loops, only bounds
|
|
220
|
+
* checking is applied to the given coordinates.
|
|
221
|
+
*
|
|
222
|
+
* The coordinates are **expected to already be integers**. Supplying numbers with fractions
|
|
223
|
+
* has performance implications. Ensure you're working with integers, or truncate the
|
|
224
|
+
* coordinates before passing them in.
|
|
225
|
+
*
|
|
226
|
+
* The `alpha` value is expected to be an integer in the range from `0` to `255`.
|
|
227
|
+
* `0` meaning fully transparent, `255` meaning fully opaque.
|
|
228
|
+
* @param canvas - The {@linkcode Canvas2D} to interact with.
|
|
229
|
+
* @param x - The X coordinate at which to place the pixel.
|
|
230
|
+
* @param y - The Y coordinate at which to place the pixel.
|
|
231
|
+
* @param color - The color of the pixel.
|
|
232
|
+
* @param alpha - The alpha value to use to blend the pixel with existing color at the location.
|
|
233
|
+
* @group Graphics
|
|
234
|
+
*/
|
|
235
|
+
export const putPixel32 = (canvas, x, y, color, alpha) => {
|
|
236
|
+
if (canvas.width < x || x < 0 || canvas.height < y || y < 0) {
|
|
237
|
+
return;
|
|
238
|
+
}
|
|
239
|
+
const srcColor = canvas.getPixel32(x, y);
|
|
240
|
+
const newColor = blend(srcColor, color, alpha);
|
|
241
|
+
canvas.setPixel32(x, y, newColor);
|
|
242
|
+
};
|
|
243
|
+
/**
|
|
244
|
+
* Additively blends a new pixel with an existing color value in a {@linkcode Canvas2D}.
|
|
245
|
+
*
|
|
246
|
+
* As this method is often called many times in render loops, only bounds
|
|
247
|
+
* checking is applied to the given coordinates.
|
|
248
|
+
*
|
|
249
|
+
* The coordinates are **expected to already be integers**. Supplying numbers with fractions
|
|
250
|
+
* has performance implications. Ensure you're working with integers, or truncate the
|
|
251
|
+
* coordinates before passing them in.
|
|
252
|
+
*
|
|
253
|
+
* The `alpha` value is expected to be an integer in the range from `0` to `255`.
|
|
254
|
+
* `0` meaning fully transparent, `255` meaning fully opaque.
|
|
255
|
+
* @param canvas - The {@linkcode Canvas2D} to interact with.
|
|
256
|
+
* @param x - The X coordinate at which to place the pixel.
|
|
257
|
+
* @param y - The Y coordinate at which to place the pixel.
|
|
258
|
+
* @param color - The color of the pixel.
|
|
259
|
+
* @param alpha - The alpha value to use to blend the pixel with existing color at the location.
|
|
260
|
+
* @group Graphics
|
|
261
|
+
*/
|
|
262
|
+
export const putPixel32Add = (canvas, x, y, color, alpha) => {
|
|
263
|
+
if (canvas.width < x || x < 0 || canvas.height < y || y < 0) {
|
|
264
|
+
return;
|
|
265
|
+
}
|
|
266
|
+
const srcColor = canvas.getPixel32(x, y);
|
|
267
|
+
const newColor = blendAdditive(srcColor, color, alpha);
|
|
268
|
+
canvas.setPixel32(x, y, newColor);
|
|
269
|
+
};
|
|
270
|
+
/**
|
|
271
|
+
* Subtractively blends a new pixel with an existing color value in a {@linkcode Canvas2D}.
|
|
272
|
+
*
|
|
273
|
+
* As this method is often called many times in render loops, only bounds
|
|
274
|
+
* checking is applied to the given coordinates.
|
|
275
|
+
*
|
|
276
|
+
* The coordinates are **expected to already be integers**. Supplying numbers with fractions
|
|
277
|
+
* has performance implications. Ensure you're working with integers, or truncate the
|
|
278
|
+
* coordinates before passing them in.
|
|
279
|
+
*
|
|
280
|
+
* The `alpha` value is expected to be an integer in the range from `0` to `255`.
|
|
281
|
+
* `0` meaning fully transparent, `255` meaning fully opaque.
|
|
282
|
+
* @param canvas - The {@linkcode Canvas2D} to interact with.
|
|
283
|
+
* @param x - The X coordinate at which to place the pixel.
|
|
284
|
+
* @param y - The Y coordinate at which to place the pixel.
|
|
285
|
+
* @param color - The color of the pixel.
|
|
286
|
+
* @param alpha - The alpha value to use to blend the pixel with existing color at the location.
|
|
287
|
+
* @group Graphics
|
|
288
|
+
*/
|
|
289
|
+
export const putPixel32Sub = (canvas, x, y, color, alpha) => {
|
|
290
|
+
if (canvas.width < x || x < 0 || canvas.height < y || y < 0) {
|
|
291
|
+
return;
|
|
292
|
+
}
|
|
293
|
+
const srcColor = canvas.getPixel32(x, y);
|
|
294
|
+
const newColor = blendSubtractive(srcColor, color, alpha);
|
|
295
|
+
canvas.setPixel32(x, y, newColor);
|
|
296
|
+
};
|
|
297
|
+
/**
|
|
298
|
+
* Linearly blends a new pixel with an existing color value in a {@linkcode Canvas2D}.
|
|
299
|
+
* Compared to {@linkcode putPixel32}, this function supports sub-pixel placement, but is dramatically slower.
|
|
300
|
+
* @param canvas - The {@linkcode Canvas2D} to interact with.
|
|
301
|
+
* @param x - The X coordinate at which to place the pixel.
|
|
302
|
+
* @param y - The Y coordinate at which to place the pixel.
|
|
303
|
+
* @param color - The color of the pixel.
|
|
304
|
+
* @param alpha - The alpha value to use to blend the pixel with existing color at the location.
|
|
305
|
+
* @group Graphics
|
|
306
|
+
*/
|
|
307
|
+
export const putSubPixel32 = (canvas, x, y, color, alpha) => {
|
|
308
|
+
if (canvas.width < x || x < 0 || canvas.height < y || y < 0) {
|
|
309
|
+
return;
|
|
310
|
+
}
|
|
311
|
+
const xweight = x - Math.trunc(x);
|
|
312
|
+
const yweight = y - Math.trunc(y);
|
|
313
|
+
const xweightn = 1 - xweight;
|
|
314
|
+
const yweightn = 1 - yweight;
|
|
315
|
+
const alpha0 = xweightn * yweightn * alpha;
|
|
316
|
+
const alpha1 = xweight * yweightn * alpha;
|
|
317
|
+
const alpha2 = xweightn * yweight * alpha;
|
|
318
|
+
const alpha3 = xweight * yweight * alpha;
|
|
319
|
+
putPixel32(canvas, x + 0, y + 0, color, alpha0);
|
|
320
|
+
putPixel32(canvas, x + 1, y + 0, color, alpha1);
|
|
321
|
+
putPixel32(canvas, x + 0, y + 1, color, alpha2);
|
|
322
|
+
putPixel32(canvas, x + 1, y + 1, color, alpha3);
|
|
323
|
+
};
|
|
324
|
+
//# sourceMappingURL=canvas2d.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"canvas2d.js","sourceRoot":"","sources":["../../source/graphics/canvas2d.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/// <reference types="@types/web" />
|
|
2
|
+
import { Canvas } from "./canvas.js";
|
|
3
|
+
/**
|
|
4
|
+
* Construction options for a {@linkcode Canvas3D}.
|
|
5
|
+
* @group Graphics
|
|
6
|
+
* @group WebGL
|
|
7
|
+
*/
|
|
8
|
+
export interface Canvas3DOptions {
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* A canvas to interact with WebGL.
|
|
12
|
+
* @group Graphics
|
|
13
|
+
* @group WebGL
|
|
14
|
+
*/
|
|
15
|
+
export declare class Canvas3D extends Canvas {
|
|
16
|
+
#private;
|
|
17
|
+
/**
|
|
18
|
+
* Retrieves the rendering context of the canvas.
|
|
19
|
+
* @returns The rendering context of the canvas.
|
|
20
|
+
*/
|
|
21
|
+
get context(): WebGL2RenderingContext;
|
|
22
|
+
/**
|
|
23
|
+
* The configuration that was used for this canvas.
|
|
24
|
+
*/
|
|
25
|
+
readonly options: Readonly<Partial<Canvas3DOptions>>;
|
|
26
|
+
/**
|
|
27
|
+
* Constructs a new {@linkcode Canvas3D}.
|
|
28
|
+
* @param canvas - The canvas to wrap.
|
|
29
|
+
* @param options - The configuration for this canvas.
|
|
30
|
+
*/
|
|
31
|
+
constructor(canvas: HTMLCanvasElement, options?: Partial<Canvas3DOptions>);
|
|
32
|
+
/**
|
|
33
|
+
* Recreate internal buffers in reaction to a change in our target {@linkcode !HTMLCanvasElement}.
|
|
34
|
+
*/
|
|
35
|
+
refreshCanvasNode(): void;
|
|
36
|
+
/**
|
|
37
|
+
* Does nothing.
|
|
38
|
+
*/
|
|
39
|
+
update(): void;
|
|
40
|
+
/**
|
|
41
|
+
* Does nothing.
|
|
42
|
+
*/
|
|
43
|
+
render(): void;
|
|
44
|
+
/**
|
|
45
|
+
* Not supported.
|
|
46
|
+
* @param _color - Ignored
|
|
47
|
+
*/
|
|
48
|
+
clearWith(_color: number): void;
|
|
49
|
+
/**
|
|
50
|
+
* Not supported.
|
|
51
|
+
* @param _frameTimes - Ignored.
|
|
52
|
+
* @param _frameTime - Ignored.
|
|
53
|
+
* @param _timeDelta - Ignored.
|
|
54
|
+
*/
|
|
55
|
+
renderFpsInfo(_frameTimes: Array<number>, _frameTime: number, _timeDelta: number): void;
|
|
56
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { NotImplementedError } from "../errors/NotImplementedError.js";
|
|
2
|
+
import { mustExist } from "../nil.js";
|
|
3
|
+
import { Canvas } from "./canvas.js";
|
|
4
|
+
/**
|
|
5
|
+
* A canvas to interact with WebGL.
|
|
6
|
+
* @group Graphics
|
|
7
|
+
* @group WebGL
|
|
8
|
+
*/
|
|
9
|
+
export class Canvas3D extends Canvas {
|
|
10
|
+
/**
|
|
11
|
+
* The rendering context of the canvas.
|
|
12
|
+
*/
|
|
13
|
+
#context;
|
|
14
|
+
/**
|
|
15
|
+
* Retrieves the rendering context of the canvas.
|
|
16
|
+
* @returns The rendering context of the canvas.
|
|
17
|
+
*/
|
|
18
|
+
get context() {
|
|
19
|
+
return this.#context;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* The configuration that was used for this canvas.
|
|
23
|
+
*/
|
|
24
|
+
options;
|
|
25
|
+
/**
|
|
26
|
+
* Constructs a new {@linkcode Canvas3D}.
|
|
27
|
+
* @param canvas - The canvas to wrap.
|
|
28
|
+
* @param options - The configuration for this canvas.
|
|
29
|
+
*/
|
|
30
|
+
constructor(canvas, options = {}) {
|
|
31
|
+
super(canvas);
|
|
32
|
+
this.options = options;
|
|
33
|
+
this.#context = mustExist(this.canvasDom.getContext("webgl2", {
|
|
34
|
+
alpha: false,
|
|
35
|
+
}), "Unable to create rendering context for offscreen canvas.");
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Recreate internal buffers in reaction to a change in our target {@linkcode !HTMLCanvasElement}.
|
|
39
|
+
*/
|
|
40
|
+
refreshCanvasNode() {
|
|
41
|
+
this.#context = mustExist(this.canvasDom.getContext("webgl2", {
|
|
42
|
+
alpha: false,
|
|
43
|
+
desynchronized: true,
|
|
44
|
+
}), "Unable to create rendering context for offscreen canvas.");
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Does nothing.
|
|
48
|
+
*/
|
|
49
|
+
update() {
|
|
50
|
+
// There is nothing to do here.
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Does nothing.
|
|
54
|
+
*/
|
|
55
|
+
render() {
|
|
56
|
+
// There is nothing to do here.
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Not supported.
|
|
60
|
+
* @param _color - Ignored
|
|
61
|
+
*/
|
|
62
|
+
clearWith(_color) {
|
|
63
|
+
throw new NotImplementedError();
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Not supported.
|
|
67
|
+
* @param _frameTimes - Ignored.
|
|
68
|
+
* @param _frameTime - Ignored.
|
|
69
|
+
* @param _timeDelta - Ignored.
|
|
70
|
+
*/
|
|
71
|
+
renderFpsInfo(_frameTimes, _frameTime, _timeDelta) {
|
|
72
|
+
throw new NotImplementedError();
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
//# sourceMappingURL=canvas3d.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"canvas3d.js","sourceRoot":"","sources":["../../source/graphics/canvas3d.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAUrC;;;;GAIG;AACH,MAAM,OAAO,QAAS,SAAQ,MAAM;IAClC;;OAEG;IACH,QAAQ,CAAyB;IACjC;;;OAGG;IACH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED;;OAEG;IACM,OAAO,CAAqC;IAErD;;;;OAIG;IACH,YAAY,MAAyB,EAAE,UAAoC,EAAE;QAC3E,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QAEvB,IAAI,CAAC,QAAQ,GAAG,SAAS,CACvB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,QAAQ,EAAE;YAClC,KAAK,EAAE,KAAK;SACb,CAAC,EACF,0DAA0D,CAC3D,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,SAAS,CACvB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,QAAQ,EAAE;YAClC,KAAK,EAAE,KAAK;YACZ,cAAc,EAAE,IAAI;SACrB,CAAC,EACF,0DAA0D,CAC3D,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,MAAM;QACJ,+BAA+B;IACjC,CAAC;IACD;;OAEG;IACH,MAAM;QACJ,+BAA+B;IACjC,CAAC;IAED;;;OAGG;IACH,SAAS,CAAC,MAAc;QACtB,MAAM,IAAI,mBAAmB,EAAE,CAAC;IAClC,CAAC;IAED;;;;;OAKG;IACH,aAAa,CAAC,WAA0B,EAAE,UAAkB,EAAE,UAAkB;QAC9E,MAAM,IAAI,mBAAmB,EAAE,CAAC;IAClC,CAAC;CACF"}
|