This commit is contained in:
Akko
2025-08-04 18:57:35 +02:00
parent 8cf6e78a79
commit 9495868c2e
5030 changed files with 518594 additions and 17609 deletions

View File

@@ -0,0 +1,95 @@
import { Texture } from '../../rendering/renderers/shared/texture/Texture';
import { Mesh } from '../mesh/shared/Mesh';
import { PerspectivePlaneGeometry } from './PerspectivePlaneGeometry';
import type { MeshPlaneOptions } from '../mesh-plane/MeshPlane';
/**
*
* Constructor options used for `PerspectiveMesh` instances.
* ```js
* const meshPlane = new PerspectiveMesh({
* texture: Texture.from('snake.png'),
* verticesX: 20,
* verticesY: 20,
* x0: 0,
* y0: 0,
* x1: 100,
* y1: 0,
* x2: 100,
* y2: 100,
* x3: 0,
* y3: 100
* });
* @see {@link scene.PerspectiveMesh}
* @memberof scene
*/
export interface PerspectivePlaneOptions extends MeshPlaneOptions {
/** top left corner x value */
x0?: number;
/** top left corner y value */
y0?: number;
/** top right corner x value */
x1?: number;
/** top right corner y value */
y1?: number;
/** bottom right corner x value */
x2?: number;
/** bottom right corner y value */
y2?: number;
/** bottom left corner x value */
x3?: number;
/** bottom left corner y value */
y3?: number;
}
/**
* A perspective mesh that allows you to draw a 2d plane with perspective. Where ever you move the corners
* the texture will be projected to look like it is in 3d space. Great for mapping a 2D mesh into a 3D scene.
*
* The calculations is done at the uv level. This means that the more vertices you have the more smooth
* the perspective will be. If you have a low amount of vertices you may see the texture stretch. Too many vertices
* could be slower. It is a balance between performance and quality! We leave that to you to decide.
*
* IMPORTANT: This is not a full 3D mesh, it is a 2D mesh with a perspective projection applied to it :)
* @example
* ```js
* const meshPlane = new PerspectiveMesh({
* texture: Texture.from('snake.png'),
* verticesX: 20,
* verticesY: 20,
* x0: 0,
* y0: 0,
* x1: 100,
* y1: 0,
* x2: 100,
* y2: 100,
* x3: 0,
* y3: 100
* });
* @see {@link scene.PerspectiveMesh}
* @memberof scene
*/
export declare class PerspectiveMesh extends Mesh<PerspectivePlaneGeometry> {
/** default options for the mesh */
static defaultOptions: PerspectivePlaneOptions;
/**
* @param options - Options to be applied to PerspectiveMesh
*/
constructor(options: PerspectivePlaneOptions);
/** Update the geometry when the texture is updated */
protected textureUpdated(): void;
set texture(value: Texture);
/** The texture that the mesh uses */
get texture(): Texture;
/**
* Set the corners of the quad to the given coordinates
* The mesh will then calculate the perspective so it looks correct!
* @param x0 - x coordinate of the first corner
* @param y0 - y coordinate of the first corner
* @param x1 - x coordinate of the second corner
* @param y1 - y coordinate of the second corner
* @param x2 - x coordinate of the third corner
* @param y2 - y coordinate of the third corner
* @param x3 - x coordinate of the fourth corner
* @param y3 - y coordinate of the fourth corner
*/
setCorners(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
}

View File

@@ -0,0 +1,90 @@
'use strict';
var Texture = require('../../rendering/renderers/shared/texture/Texture.js');
var definedProps = require('../container/utils/definedProps.js');
var Mesh = require('../mesh/shared/Mesh.js');
var PerspectivePlaneGeometry = require('./PerspectivePlaneGeometry.js');
"use strict";
const _PerspectiveMesh = class _PerspectiveMesh extends Mesh.Mesh {
/**
* @param options - Options to be applied to PerspectiveMesh
*/
constructor(options) {
options = { ..._PerspectiveMesh.defaultOptions, ...options };
const { texture, verticesX, verticesY, ...rest } = options;
const planeGeometry = new PerspectivePlaneGeometry.PerspectivePlaneGeometry(definedProps.definedProps({
width: texture.width,
height: texture.height,
verticesX,
verticesY
}));
super(definedProps.definedProps({ ...rest, geometry: planeGeometry }));
this._texture = texture;
this.geometry.setCorners(
options.x0,
options.y0,
options.x1,
options.y1,
options.x2,
options.y2,
options.x3,
options.y3
);
}
/** Update the geometry when the texture is updated */
textureUpdated() {
const geometry = this.geometry;
if (!geometry)
return;
const { width, height } = this.texture;
if (geometry.width !== width || geometry.height !== height) {
geometry.width = width;
geometry.height = height;
geometry.updateProjection();
}
}
set texture(value) {
if (this._texture === value)
return;
super.texture = value;
this.textureUpdated();
}
/** The texture that the mesh uses */
get texture() {
return this._texture;
}
/**
* Set the corners of the quad to the given coordinates
* The mesh will then calculate the perspective so it looks correct!
* @param x0 - x coordinate of the first corner
* @param y0 - y coordinate of the first corner
* @param x1 - x coordinate of the second corner
* @param y1 - y coordinate of the second corner
* @param x2 - x coordinate of the third corner
* @param y2 - y coordinate of the third corner
* @param x3 - x coordinate of the fourth corner
* @param y3 - y coordinate of the fourth corner
*/
setCorners(x0, y0, x1, y1, x2, y2, x3, y3) {
this.geometry.setCorners(x0, y0, x1, y1, x2, y2, x3, y3);
}
};
/** default options for the mesh */
_PerspectiveMesh.defaultOptions = {
texture: Texture.Texture.WHITE,
verticesX: 10,
verticesY: 10,
x0: 0,
y0: 0,
x1: 100,
y1: 0,
x2: 100,
y2: 100,
x3: 0,
y3: 100
};
let PerspectiveMesh = _PerspectiveMesh;
exports.PerspectiveMesh = PerspectiveMesh;
//# sourceMappingURL=PerspectiveMesh.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,88 @@
import { Texture } from '../../rendering/renderers/shared/texture/Texture.mjs';
import { definedProps } from '../container/utils/definedProps.mjs';
import { Mesh } from '../mesh/shared/Mesh.mjs';
import { PerspectivePlaneGeometry } from './PerspectivePlaneGeometry.mjs';
"use strict";
const _PerspectiveMesh = class _PerspectiveMesh extends Mesh {
/**
* @param options - Options to be applied to PerspectiveMesh
*/
constructor(options) {
options = { ..._PerspectiveMesh.defaultOptions, ...options };
const { texture, verticesX, verticesY, ...rest } = options;
const planeGeometry = new PerspectivePlaneGeometry(definedProps({
width: texture.width,
height: texture.height,
verticesX,
verticesY
}));
super(definedProps({ ...rest, geometry: planeGeometry }));
this._texture = texture;
this.geometry.setCorners(
options.x0,
options.y0,
options.x1,
options.y1,
options.x2,
options.y2,
options.x3,
options.y3
);
}
/** Update the geometry when the texture is updated */
textureUpdated() {
const geometry = this.geometry;
if (!geometry)
return;
const { width, height } = this.texture;
if (geometry.width !== width || geometry.height !== height) {
geometry.width = width;
geometry.height = height;
geometry.updateProjection();
}
}
set texture(value) {
if (this._texture === value)
return;
super.texture = value;
this.textureUpdated();
}
/** The texture that the mesh uses */
get texture() {
return this._texture;
}
/**
* Set the corners of the quad to the given coordinates
* The mesh will then calculate the perspective so it looks correct!
* @param x0 - x coordinate of the first corner
* @param y0 - y coordinate of the first corner
* @param x1 - x coordinate of the second corner
* @param y1 - y coordinate of the second corner
* @param x2 - x coordinate of the third corner
* @param y2 - y coordinate of the third corner
* @param x3 - x coordinate of the fourth corner
* @param y3 - y coordinate of the fourth corner
*/
setCorners(x0, y0, x1, y1, x2, y2, x3, y3) {
this.geometry.setCorners(x0, y0, x1, y1, x2, y2, x3, y3);
}
};
/** default options for the mesh */
_PerspectiveMesh.defaultOptions = {
texture: Texture.WHITE,
verticesX: 10,
verticesY: 10,
x0: 0,
y0: 0,
x1: 100,
y1: 0,
x2: 100,
y2: 100,
x3: 0,
y3: 100
};
let PerspectiveMesh = _PerspectiveMesh;
export { PerspectiveMesh };
//# sourceMappingURL=PerspectiveMesh.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,57 @@
import { PlaneGeometry } from '../mesh-plane/PlaneGeometry';
import type { PlaneGeometryOptions } from '../mesh-plane/PlaneGeometry';
/**
* Constructor options used for `PerspectivePlaneGeometry` instances.
* @memberof scene
*/
export interface PerspectivePlaneGeometryOptions extends PlaneGeometryOptions {
/** The width of the plane */
width: number;
/** The height of the plane */
height: number;
}
/**
* A PerspectivePlaneGeometry allows you to draw a 2d plane with perspective. Where ever you move the corners
* the texture will be projected to look like it is in 3d space. Great for mapping a 2D mesh into a 3D scene.
*
* IMPORTANT: This is not a full 3D mesh, it is a 2D mesh with a perspective projection applied to it :)
*
* ```js
* const perspectivePlaneGeometry = new PerspectivePlaneGeometry({
* width: 100,
* height: 100,
* verticesX: 10,
* verticesY: 10,
* });
* ```
* @see {@link scene.PerspectivePlaneGeometry}
* @memberof scene
*/
export declare class PerspectivePlaneGeometry extends PlaneGeometry {
/** The corner points of the quad you can modify these directly, if you do make sure to call `updateProjection` */
corners: [number, number, number, number, number, number, number, number];
private readonly _projectionMatrix;
/**
* @param options - Options to be applied to MeshPlane
* @param options.width - The width of the plane
* @param options.height - The height of the plane
* @param options.verticesX - The amount of vertices on the x axis
* @param options.verticesY - The amount of vertices on the y axis
*/
constructor(options: PerspectivePlaneGeometryOptions);
/**
* Will set the corners of the quad to the given coordinates
* Calculating the perspective so it looks correct!
* @param x0 - x coordinate of the first corner
* @param y0 - y coordinate of the first corner
* @param x1 - x coordinate of the second corner
* @param y1 - y coordinate of the second corner
* @param x2 - x coordinate of the third corner
* @param y2 - y coordinate of the third corner
* @param x3 - x coordinate of the fourth corner
* @param y3 - y coordinate of the fourth corner
*/
setCorners(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
/** Update the projection matrix based on the corners */
updateProjection(): void;
}

View File

@@ -0,0 +1,87 @@
'use strict';
var PlaneGeometry = require('../mesh-plane/PlaneGeometry.js');
var applyProjectiveTransformationToPlane = require('./utils/applyProjectiveTransformationToPlane.js');
var compute2DProjections = require('./utils/compute2DProjections.js');
"use strict";
class PerspectivePlaneGeometry extends PlaneGeometry.PlaneGeometry {
/**
* @param options - Options to be applied to MeshPlane
* @param options.width - The width of the plane
* @param options.height - The height of the plane
* @param options.verticesX - The amount of vertices on the x axis
* @param options.verticesY - The amount of vertices on the y axis
*/
constructor(options) {
super(options);
this._projectionMatrix = [0, 0, 0, 0, 0, 0, 0, 0, 0];
const { width, height } = options;
this.corners = [0, 0, width, 0, width, height, 0, height];
}
/**
* Will set the corners of the quad to the given coordinates
* Calculating the perspective so it looks correct!
* @param x0 - x coordinate of the first corner
* @param y0 - y coordinate of the first corner
* @param x1 - x coordinate of the second corner
* @param y1 - y coordinate of the second corner
* @param x2 - x coordinate of the third corner
* @param y2 - y coordinate of the third corner
* @param x3 - x coordinate of the fourth corner
* @param y3 - y coordinate of the fourth corner
*/
setCorners(x0, y0, x1, y1, x2, y2, x3, y3) {
const corners = this.corners;
corners[0] = x0;
corners[1] = y0;
corners[2] = x1;
corners[3] = y1;
corners[4] = x2;
corners[5] = y2;
corners[6] = x3;
corners[7] = y3;
this.updateProjection();
}
/** Update the projection matrix based on the corners */
updateProjection() {
const { width, height } = this;
const corners = this.corners;
const projectionMatrix = compute2DProjections.compute2DProjection(
this._projectionMatrix,
0,
0,
// top-left source
corners[0],
corners[1],
// top-left dest
width,
0,
// top-right source
corners[2],
corners[3],
// top-right dest
width,
height,
// bottom-right source
corners[4],
corners[5],
// bottom-right dest
0,
height,
// bottom-left source
corners[6],
corners[7]
// bottom-left dest
);
applyProjectiveTransformationToPlane.applyProjectiveTransformationToPlane(
width,
height,
this,
projectionMatrix
);
}
}
exports.PerspectivePlaneGeometry = PerspectivePlaneGeometry;
//# sourceMappingURL=PerspectivePlaneGeometry.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,85 @@
import { PlaneGeometry } from '../mesh-plane/PlaneGeometry.mjs';
import { applyProjectiveTransformationToPlane } from './utils/applyProjectiveTransformationToPlane.mjs';
import { compute2DProjection } from './utils/compute2DProjections.mjs';
"use strict";
class PerspectivePlaneGeometry extends PlaneGeometry {
/**
* @param options - Options to be applied to MeshPlane
* @param options.width - The width of the plane
* @param options.height - The height of the plane
* @param options.verticesX - The amount of vertices on the x axis
* @param options.verticesY - The amount of vertices on the y axis
*/
constructor(options) {
super(options);
this._projectionMatrix = [0, 0, 0, 0, 0, 0, 0, 0, 0];
const { width, height } = options;
this.corners = [0, 0, width, 0, width, height, 0, height];
}
/**
* Will set the corners of the quad to the given coordinates
* Calculating the perspective so it looks correct!
* @param x0 - x coordinate of the first corner
* @param y0 - y coordinate of the first corner
* @param x1 - x coordinate of the second corner
* @param y1 - y coordinate of the second corner
* @param x2 - x coordinate of the third corner
* @param y2 - y coordinate of the third corner
* @param x3 - x coordinate of the fourth corner
* @param y3 - y coordinate of the fourth corner
*/
setCorners(x0, y0, x1, y1, x2, y2, x3, y3) {
const corners = this.corners;
corners[0] = x0;
corners[1] = y0;
corners[2] = x1;
corners[3] = y1;
corners[4] = x2;
corners[5] = y2;
corners[6] = x3;
corners[7] = y3;
this.updateProjection();
}
/** Update the projection matrix based on the corners */
updateProjection() {
const { width, height } = this;
const corners = this.corners;
const projectionMatrix = compute2DProjection(
this._projectionMatrix,
0,
0,
// top-left source
corners[0],
corners[1],
// top-left dest
width,
0,
// top-right source
corners[2],
corners[3],
// top-right dest
width,
height,
// bottom-right source
corners[4],
corners[5],
// bottom-right dest
0,
height,
// bottom-left source
corners[6],
corners[7]
// bottom-left dest
);
applyProjectiveTransformationToPlane(
width,
height,
this,
projectionMatrix
);
}
}
export { PerspectivePlaneGeometry };
//# sourceMappingURL=PerspectivePlaneGeometry.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,10 @@
import type { ArrayFixed } from '../../../utils/types';
import type { PlaneGeometry } from '../../mesh-plane/PlaneGeometry';
/**
* Apply a projective transformation to a plane geometry
* @param width - The width of the plane
* @param height - The height of the plane
* @param geometry - The plane geometry to apply the transformation to
* @param transformationMatrix - The transformation matrix to apply
*/
export declare function applyProjectiveTransformationToPlane(width: number, height: number, geometry: PlaneGeometry, transformationMatrix: ArrayFixed<number, 9>): void;

View File

@@ -0,0 +1,34 @@
'use strict';
"use strict";
function applyProjectiveTransformationToPlane(width, height, geometry, transformationMatrix) {
const buffer = geometry.buffers[0];
const vertices = buffer.data;
const { verticesX, verticesY } = geometry;
const sizeX = width / (verticesX - 1);
const sizeY = height / (verticesY - 1);
let index = 0;
const a00 = transformationMatrix[0];
const a01 = transformationMatrix[1];
const a02 = transformationMatrix[2];
const a10 = transformationMatrix[3];
const a11 = transformationMatrix[4];
const a12 = transformationMatrix[5];
const a20 = transformationMatrix[6];
const a21 = transformationMatrix[7];
const a22 = transformationMatrix[8];
for (let i = 0; i < vertices.length; i += 2) {
const x = index % verticesX * sizeX;
const y = (index / verticesX | 0) * sizeY;
const newX = a00 * x + a01 * y + a02;
const newY = a10 * x + a11 * y + a12;
const w = a20 * x + a21 * y + a22;
vertices[i] = newX / w;
vertices[i + 1] = newY / w;
index++;
}
buffer.update();
}
exports.applyProjectiveTransformationToPlane = applyProjectiveTransformationToPlane;
//# sourceMappingURL=applyProjectiveTransformationToPlane.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"applyProjectiveTransformationToPlane.js","sources":["../../../../src/scene/mesh-perspective/utils/applyProjectiveTransformationToPlane.ts"],"sourcesContent":["import type { ArrayFixed } from '../../../utils/types';\nimport type { PlaneGeometry } from '../../mesh-plane/PlaneGeometry';\n\n/**\n * Apply a projective transformation to a plane geometry\n * @param width - The width of the plane\n * @param height - The height of the plane\n * @param geometry - The plane geometry to apply the transformation to\n * @param transformationMatrix - The transformation matrix to apply\n */\nexport function applyProjectiveTransformationToPlane(\n width: number,\n height: number,\n geometry: PlaneGeometry,\n transformationMatrix: ArrayFixed<number, 9>\n)\n{\n const buffer = geometry.buffers[0];\n\n // Access the vertices of the mesh\n const vertices = buffer.data;\n\n const { verticesX, verticesY } = geometry;\n\n const sizeX = (width) / (verticesX - 1);\n const sizeY = (height) / (verticesY - 1);\n\n let index = 0;\n\n const a00 = transformationMatrix[0];\n const a01 = transformationMatrix[1];\n const a02 = transformationMatrix[2];\n const a10 = transformationMatrix[3];\n const a11 = transformationMatrix[4];\n const a12 = transformationMatrix[5];\n const a20 = transformationMatrix[6];\n const a21 = transformationMatrix[7];\n const a22 = transformationMatrix[8];\n\n // Apply the transformation to each vertex\n for (let i = 0; i < vertices.length; i += 2)\n {\n const x = (index % verticesX) * sizeX;\n const y = ((index / verticesX) | 0) * sizeY;\n\n const newX = (a00 * x) + (a01 * y) + a02;\n const newY = (a10 * x) + (a11 * y) + a12;\n const w = (a20 * x) + (a21 * y) + a22;\n\n vertices[i] = newX / w;\n vertices[i + 1] = newY / w;\n\n index++;\n }\n\n // Update the mesh geometry to reflect the changes\n buffer.update();\n}\n"],"names":[],"mappings":";;;AAUO,SAAS,oCACZ,CAAA,KAAA,EACA,MACA,EAAA,QAAA,EACA,oBAEJ,EAAA;AACI,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,OAAA,CAAQ,CAAC,CAAA,CAAA;AAGjC,EAAA,MAAM,WAAW,MAAO,CAAA,IAAA,CAAA;AAExB,EAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAA,QAAA,CAAA;AAEjC,EAAM,MAAA,KAAA,GAAS,SAAU,SAAY,GAAA,CAAA,CAAA,CAAA;AACrC,EAAM,MAAA,KAAA,GAAS,UAAW,SAAY,GAAA,CAAA,CAAA,CAAA;AAEtC,EAAA,IAAI,KAAQ,GAAA,CAAA,CAAA;AAEZ,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAGlC,EAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,QAAS,CAAA,MAAA,EAAQ,KAAK,CAC1C,EAAA;AACI,IAAM,MAAA,CAAA,GAAK,QAAQ,SAAa,GAAA,KAAA,CAAA;AAChC,IAAM,MAAA,CAAA,GAAA,CAAM,KAAQ,GAAA,SAAA,GAAa,CAAK,IAAA,KAAA,CAAA;AAEtC,IAAA,MAAM,IAAQ,GAAA,GAAA,GAAM,CAAM,GAAA,GAAA,GAAM,CAAK,GAAA,GAAA,CAAA;AACrC,IAAA,MAAM,IAAQ,GAAA,GAAA,GAAM,CAAM,GAAA,GAAA,GAAM,CAAK,GAAA,GAAA,CAAA;AACrC,IAAA,MAAM,CAAK,GAAA,GAAA,GAAM,CAAM,GAAA,GAAA,GAAM,CAAK,GAAA,GAAA,CAAA;AAElC,IAAS,QAAA,CAAA,CAAC,IAAI,IAAO,GAAA,CAAA,CAAA;AACrB,IAAS,QAAA,CAAA,CAAA,GAAI,CAAC,CAAA,GAAI,IAAO,GAAA,CAAA,CAAA;AAEzB,IAAA,KAAA,EAAA,CAAA;AAAA,GACJ;AAGA,EAAA,MAAA,CAAO,MAAO,EAAA,CAAA;AAClB;;;;"}

View File

@@ -0,0 +1,32 @@
"use strict";
function applyProjectiveTransformationToPlane(width, height, geometry, transformationMatrix) {
const buffer = geometry.buffers[0];
const vertices = buffer.data;
const { verticesX, verticesY } = geometry;
const sizeX = width / (verticesX - 1);
const sizeY = height / (verticesY - 1);
let index = 0;
const a00 = transformationMatrix[0];
const a01 = transformationMatrix[1];
const a02 = transformationMatrix[2];
const a10 = transformationMatrix[3];
const a11 = transformationMatrix[4];
const a12 = transformationMatrix[5];
const a20 = transformationMatrix[6];
const a21 = transformationMatrix[7];
const a22 = transformationMatrix[8];
for (let i = 0; i < vertices.length; i += 2) {
const x = index % verticesX * sizeX;
const y = (index / verticesX | 0) * sizeY;
const newX = a00 * x + a01 * y + a02;
const newY = a10 * x + a11 * y + a12;
const w = a20 * x + a21 * y + a22;
vertices[i] = newX / w;
vertices[i + 1] = newY / w;
index++;
}
buffer.update();
}
export { applyProjectiveTransformationToPlane };
//# sourceMappingURL=applyProjectiveTransformationToPlane.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"applyProjectiveTransformationToPlane.mjs","sources":["../../../../src/scene/mesh-perspective/utils/applyProjectiveTransformationToPlane.ts"],"sourcesContent":["import type { ArrayFixed } from '../../../utils/types';\nimport type { PlaneGeometry } from '../../mesh-plane/PlaneGeometry';\n\n/**\n * Apply a projective transformation to a plane geometry\n * @param width - The width of the plane\n * @param height - The height of the plane\n * @param geometry - The plane geometry to apply the transformation to\n * @param transformationMatrix - The transformation matrix to apply\n */\nexport function applyProjectiveTransformationToPlane(\n width: number,\n height: number,\n geometry: PlaneGeometry,\n transformationMatrix: ArrayFixed<number, 9>\n)\n{\n const buffer = geometry.buffers[0];\n\n // Access the vertices of the mesh\n const vertices = buffer.data;\n\n const { verticesX, verticesY } = geometry;\n\n const sizeX = (width) / (verticesX - 1);\n const sizeY = (height) / (verticesY - 1);\n\n let index = 0;\n\n const a00 = transformationMatrix[0];\n const a01 = transformationMatrix[1];\n const a02 = transformationMatrix[2];\n const a10 = transformationMatrix[3];\n const a11 = transformationMatrix[4];\n const a12 = transformationMatrix[5];\n const a20 = transformationMatrix[6];\n const a21 = transformationMatrix[7];\n const a22 = transformationMatrix[8];\n\n // Apply the transformation to each vertex\n for (let i = 0; i < vertices.length; i += 2)\n {\n const x = (index % verticesX) * sizeX;\n const y = ((index / verticesX) | 0) * sizeY;\n\n const newX = (a00 * x) + (a01 * y) + a02;\n const newY = (a10 * x) + (a11 * y) + a12;\n const w = (a20 * x) + (a21 * y) + a22;\n\n vertices[i] = newX / w;\n vertices[i + 1] = newY / w;\n\n index++;\n }\n\n // Update the mesh geometry to reflect the changes\n buffer.update();\n}\n"],"names":[],"mappings":";AAUO,SAAS,oCACZ,CAAA,KAAA,EACA,MACA,EAAA,QAAA,EACA,oBAEJ,EAAA;AACI,EAAM,MAAA,MAAA,GAAS,QAAS,CAAA,OAAA,CAAQ,CAAC,CAAA,CAAA;AAGjC,EAAA,MAAM,WAAW,MAAO,CAAA,IAAA,CAAA;AAExB,EAAM,MAAA,EAAE,SAAW,EAAA,SAAA,EAAc,GAAA,QAAA,CAAA;AAEjC,EAAM,MAAA,KAAA,GAAS,SAAU,SAAY,GAAA,CAAA,CAAA,CAAA;AACrC,EAAM,MAAA,KAAA,GAAS,UAAW,SAAY,GAAA,CAAA,CAAA,CAAA;AAEtC,EAAA,IAAI,KAAQ,GAAA,CAAA,CAAA;AAEZ,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAClC,EAAM,MAAA,GAAA,GAAM,qBAAqB,CAAC,CAAA,CAAA;AAGlC,EAAA,KAAA,IAAS,IAAI,CAAG,EAAA,CAAA,GAAI,QAAS,CAAA,MAAA,EAAQ,KAAK,CAC1C,EAAA;AACI,IAAM,MAAA,CAAA,GAAK,QAAQ,SAAa,GAAA,KAAA,CAAA;AAChC,IAAM,MAAA,CAAA,GAAA,CAAM,KAAQ,GAAA,SAAA,GAAa,CAAK,IAAA,KAAA,CAAA;AAEtC,IAAA,MAAM,IAAQ,GAAA,GAAA,GAAM,CAAM,GAAA,GAAA,GAAM,CAAK,GAAA,GAAA,CAAA;AACrC,IAAA,MAAM,IAAQ,GAAA,GAAA,GAAM,CAAM,GAAA,GAAA,GAAM,CAAK,GAAA,GAAA,CAAA;AACrC,IAAA,MAAM,CAAK,GAAA,GAAA,GAAM,CAAM,GAAA,GAAA,GAAM,CAAK,GAAA,GAAA,CAAA;AAElC,IAAS,QAAA,CAAA,CAAC,IAAI,IAAO,GAAA,CAAA,CAAA;AACrB,IAAS,QAAA,CAAA,CAAA,GAAI,CAAC,CAAA,GAAI,IAAO,GAAA,CAAA,CAAA;AAEzB,IAAA,KAAA,EAAA,CAAA;AAAA,GACJ;AAGA,EAAA,MAAA,CAAO,MAAO,EAAA,CAAA;AAClB;;;;"}

View File

@@ -0,0 +1,26 @@
import type { ArrayFixed } from '../../../utils/types';
type Matrix3x3 = ArrayFixed<number, 9>;
/**
* Compute a 2D projection matrix
* @param out - The matrix to store the result in
* @param x1s - The x coordinate of the first source point
* @param y1s - The y coordinate of the first source point
* @param x1d - The x coordinate of the first destination point
* @param y1d - The y coordinate of the first destination point
* @param x2s - The x coordinate of the second source point
* @param y2s - The y coordinate of the second source point
* @param x2d - The x coordinate of the second destination point
* @param y2d - The y coordinate of the second destination point
* @param x3s - The x coordinate of the third source point
* @param y3s - The y coordinate of the third source point
* @param x3d - The x coordinate of the third destination point
* @param y3d - The y coordinate of the third destination point
* @param x4s - The x coordinate of the fourth source point
* @param y4s - The y coordinate of the fourth source point
* @param x4d - The x coordinate of the fourth destination point
* @param y4d - The y coordinate of the fourth destination point
* @returns - The computed 2D projection matrix
* @private
*/
export declare function compute2DProjection(out: Matrix3x3, x1s: number, y1s: number, x1d: number, y1d: number, x2s: number, y2s: number, x2d: number, y2d: number, x3s: number, y3s: number, x3d: number, y3d: number, x4s: number, y4s: number, x4d: number, y4d: number): Matrix3x3;
export {};

View File

@@ -0,0 +1,136 @@
'use strict';
"use strict";
function computeAdjugate(out, matrix) {
const a00 = matrix[0];
const a01 = matrix[1];
const a02 = matrix[2];
const a10 = matrix[3];
const a11 = matrix[4];
const a12 = matrix[5];
const a20 = matrix[6];
const a21 = matrix[7];
const a22 = matrix[8];
out[0] = a11 * a22 - a12 * a21;
out[1] = a02 * a21 - a01 * a22;
out[2] = a01 * a12 - a02 * a11;
out[3] = a12 * a20 - a10 * a22;
out[4] = a00 * a22 - a02 * a20;
out[5] = a02 * a10 - a00 * a12;
out[6] = a10 * a21 - a11 * a20;
out[7] = a01 * a20 - a00 * a21;
out[8] = a00 * a11 - a01 * a10;
return out;
}
function multiplyMatrix3x3(out, a, b) {
const a00 = a[0];
const a01 = a[1];
const a02 = a[2];
const a10 = a[3];
const a11 = a[4];
const a12 = a[5];
const a20 = a[6];
const a21 = a[7];
const a22 = a[8];
const b00 = b[0];
const b01 = b[1];
const b02 = b[2];
const b10 = b[3];
const b11 = b[4];
const b12 = b[5];
const b20 = b[6];
const b21 = b[7];
const b22 = b[8];
out[0] = b00 * a00 + b01 * a10 + b02 * a20;
out[1] = b00 * a01 + b01 * a11 + b02 * a21;
out[2] = b00 * a02 + b01 * a12 + b02 * a22;
out[3] = b10 * a00 + b11 * a10 + b12 * a20;
out[4] = b10 * a01 + b11 * a11 + b12 * a21;
out[5] = b10 * a02 + b11 * a12 + b12 * a22;
out[6] = b20 * a00 + b21 * a10 + b22 * a20;
out[7] = b20 * a01 + b21 * a11 + b22 * a21;
out[8] = b20 * a02 + b21 * a12 + b22 * a22;
return out;
}
function multiplyMatrixAndVector(out, m, v) {
const x = v[0];
const y = v[1];
const z = v[2];
out[0] = m[0] * x + m[1] * y + m[2] * z;
out[1] = m[3] * x + m[4] * y + m[5] * z;
out[2] = m[6] * x + m[7] * y + m[8] * z;
return out;
}
const tempMatrix = [0, 0, 0, 0, 0, 0, 0, 0, 0];
const tempVec = [0, 0, 0];
const tempVec2 = [0, 0, 0];
function generateBasisToPointsMatrix(out, x1, y1, x2, y2, x3, y3, x4, y4) {
const m = tempMatrix;
m[0] = x1;
m[1] = x2;
m[2] = x3;
m[3] = y1;
m[4] = y2;
m[5] = y3;
m[6] = 1;
m[7] = 1;
m[8] = 1;
const adjugateM = computeAdjugate(
out,
// reusing out as adjugateM is only used once
m
);
tempVec2[0] = x4;
tempVec2[1] = y4;
tempVec2[2] = 1;
const v = multiplyMatrixAndVector(
tempVec,
adjugateM,
tempVec2
);
const diagonalMatrix = out;
out[0] = v[0];
out[1] = 0;
out[2] = 0;
out[3] = 0;
out[4] = v[1];
out[5] = 0;
out[6] = 0;
out[7] = 0;
out[8] = v[2];
return multiplyMatrix3x3(out, diagonalMatrix, m);
}
const tempSourceMatrix = [0, 0, 0, 0, 0, 0, 0, 0, 0];
const tempDestinationMatrix = [0, 0, 0, 0, 0, 0, 0, 0, 0];
function compute2DProjection(out, x1s, y1s, x1d, y1d, x2s, y2s, x2d, y2d, x3s, y3s, x3d, y3d, x4s, y4s, x4d, y4d) {
const sourceMatrix = generateBasisToPointsMatrix(
tempSourceMatrix,
x1s,
y1s,
x2s,
y2s,
x3s,
y3s,
x4s,
y4s
);
const destinationMatrix = generateBasisToPointsMatrix(
tempDestinationMatrix,
x1d,
y1d,
x2d,
y2d,
x3d,
y3d,
x4d,
y4d
);
return multiplyMatrix3x3(
out,
computeAdjugate(sourceMatrix, sourceMatrix),
destinationMatrix
);
}
exports.compute2DProjection = compute2DProjection;
//# sourceMappingURL=compute2DProjections.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,134 @@
"use strict";
function computeAdjugate(out, matrix) {
const a00 = matrix[0];
const a01 = matrix[1];
const a02 = matrix[2];
const a10 = matrix[3];
const a11 = matrix[4];
const a12 = matrix[5];
const a20 = matrix[6];
const a21 = matrix[7];
const a22 = matrix[8];
out[0] = a11 * a22 - a12 * a21;
out[1] = a02 * a21 - a01 * a22;
out[2] = a01 * a12 - a02 * a11;
out[3] = a12 * a20 - a10 * a22;
out[4] = a00 * a22 - a02 * a20;
out[5] = a02 * a10 - a00 * a12;
out[6] = a10 * a21 - a11 * a20;
out[7] = a01 * a20 - a00 * a21;
out[8] = a00 * a11 - a01 * a10;
return out;
}
function multiplyMatrix3x3(out, a, b) {
const a00 = a[0];
const a01 = a[1];
const a02 = a[2];
const a10 = a[3];
const a11 = a[4];
const a12 = a[5];
const a20 = a[6];
const a21 = a[7];
const a22 = a[8];
const b00 = b[0];
const b01 = b[1];
const b02 = b[2];
const b10 = b[3];
const b11 = b[4];
const b12 = b[5];
const b20 = b[6];
const b21 = b[7];
const b22 = b[8];
out[0] = b00 * a00 + b01 * a10 + b02 * a20;
out[1] = b00 * a01 + b01 * a11 + b02 * a21;
out[2] = b00 * a02 + b01 * a12 + b02 * a22;
out[3] = b10 * a00 + b11 * a10 + b12 * a20;
out[4] = b10 * a01 + b11 * a11 + b12 * a21;
out[5] = b10 * a02 + b11 * a12 + b12 * a22;
out[6] = b20 * a00 + b21 * a10 + b22 * a20;
out[7] = b20 * a01 + b21 * a11 + b22 * a21;
out[8] = b20 * a02 + b21 * a12 + b22 * a22;
return out;
}
function multiplyMatrixAndVector(out, m, v) {
const x = v[0];
const y = v[1];
const z = v[2];
out[0] = m[0] * x + m[1] * y + m[2] * z;
out[1] = m[3] * x + m[4] * y + m[5] * z;
out[2] = m[6] * x + m[7] * y + m[8] * z;
return out;
}
const tempMatrix = [0, 0, 0, 0, 0, 0, 0, 0, 0];
const tempVec = [0, 0, 0];
const tempVec2 = [0, 0, 0];
function generateBasisToPointsMatrix(out, x1, y1, x2, y2, x3, y3, x4, y4) {
const m = tempMatrix;
m[0] = x1;
m[1] = x2;
m[2] = x3;
m[3] = y1;
m[4] = y2;
m[5] = y3;
m[6] = 1;
m[7] = 1;
m[8] = 1;
const adjugateM = computeAdjugate(
out,
// reusing out as adjugateM is only used once
m
);
tempVec2[0] = x4;
tempVec2[1] = y4;
tempVec2[2] = 1;
const v = multiplyMatrixAndVector(
tempVec,
adjugateM,
tempVec2
);
const diagonalMatrix = out;
out[0] = v[0];
out[1] = 0;
out[2] = 0;
out[3] = 0;
out[4] = v[1];
out[5] = 0;
out[6] = 0;
out[7] = 0;
out[8] = v[2];
return multiplyMatrix3x3(out, diagonalMatrix, m);
}
const tempSourceMatrix = [0, 0, 0, 0, 0, 0, 0, 0, 0];
const tempDestinationMatrix = [0, 0, 0, 0, 0, 0, 0, 0, 0];
function compute2DProjection(out, x1s, y1s, x1d, y1d, x2s, y2s, x2d, y2d, x3s, y3s, x3d, y3d, x4s, y4s, x4d, y4d) {
const sourceMatrix = generateBasisToPointsMatrix(
tempSourceMatrix,
x1s,
y1s,
x2s,
y2s,
x3s,
y3s,
x4s,
y4s
);
const destinationMatrix = generateBasisToPointsMatrix(
tempDestinationMatrix,
x1d,
y1d,
x2d,
y2d,
x3d,
y3d,
x4d,
y4d
);
return multiplyMatrix3x3(
out,
computeAdjugate(sourceMatrix, sourceMatrix),
destinationMatrix
);
}
export { compute2DProjection };
//# sourceMappingURL=compute2DProjections.mjs.map

File diff suppressed because one or more lines are too long