pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 8.93 kB

Source Map (JSON)

View Raw

{"version":3,"file":"MeshSimple.mjs","sources":["../../../src/scene/mesh-simple/MeshSimple.ts"],"sourcesContent":["import { definedProps } from '../container/utils/definedProps';\nimport { Mesh } from '../mesh/shared/Mesh';\nimport { MeshGeometry } from '../mesh/shared/MeshGeometry';\n\nimport type { TypedArray } from '../../rendering/renderers/shared/buffer/Buffer';\nimport type { Topology } from '../../rendering/renderers/shared/geometry/const';\nimport type { Texture } from '../../rendering/renderers/shared/texture/Texture';\nimport type { MeshOptions } from '../mesh/shared/Mesh';\n\n/**\n * Options for creating a SimpleMesh instance. Defines the texture, geometry data, and rendering topology\n * for a basic mesh with direct vertex manipulation capabilities.\n * @example\n * ```ts\n * // Create a basic textured triangle\n * const mesh = new MeshSimple({\n * texture: Texture.from('sprite.png'),\n * vertices: new Float32Array([\n * 0, 0, // Vertex 1\n * 100, 0, // Vertex 2\n * 50, 100 // Vertex 3\n * ]),\n * uvs: new Float32Array([\n * 0, 0, // UV 1\n * 1, 0, // UV 2\n * 0.5, 1 // UV 3\n * ])\n * });\n *\n * // Create an indexed quad with custom topology\n * const quadMesh = new MeshSimple({\n * texture: Texture.from('square.png'),\n * vertices: new Float32Array([\n * 0, 0, // Top-left\n * 100, 0, // Top-right\n * 100, 100, // Bottom-right\n * 0, 100 // Bottom-left\n * ]),\n * uvs: new Float32Array([\n * 0, 0, // Top-left\n * 1, 0, // Top-right\n * 1, 1, // Bottom-right\n * 0, 1 // Bottom-left\n * ]),\n * indices: new Uint32Array([\n * 0, 1, 2, // Triangle 1\n * 0, 2, 3 // Triangle 2\n * ]),\n * topology: 'triangle-list'\n * });\n * ```\n * @category scene\n * @advanced\n * @noInheritDoc\n */\nexport interface SimpleMeshOptions extends Omit<MeshOptions, 'geometry'>\n{\n /** The texture to use */\n texture: Texture,\n /** Array of vertex positions as x,y pairs. Each vertex is 2 floats - x, y */\n vertices?: Float32Array,\n /** Array of UV coordinates for texture mapping. Each UV is 2 floats - u, v */\n uvs?: Float32Array,\n /** Array of indices defining triangles. Each triangle is 3 indices into the vertices array. */\n indices?: Uint32Array,\n /**\n * How vertices are connected to form triangles.\n * - 'triangle-list': Individual triangles (default)\n * - 'triangle-strip': Connected triangle strip\n * - 'line-list': Lines between vertices\n * - 'line-strip': Connected line strip\n * - 'point-list': Points rendered individually\n * @default 'triangle-list'\n */\n topology?: Topology;\n}\n\n/**\n * A simplified mesh class that provides an easy way to create and manipulate textured meshes\n * with direct vertex control. Perfect for creating custom shapes, deformable sprites, and\n * simple 2D effects.\n * @example\n * ```ts\n * // Create a basic triangle mesh\n * const triangleMesh = new MeshSimple({\n * texture: Texture.from('sprite.png'),\n * vertices: new Float32Array([\n * 0, 0, // Top-left\n * 100, 0, // Top-right\n * 50, 100 // Bottom-center\n * ]),\n * uvs: new Float32Array([\n * 0, 0, // Map top-left of texture\n * 1, 0, // Map top-right of texture\n * 0.5, 1 // Map bottom-center of texture\n * ])\n * });\n *\n * // Animate vertices\n * app.ticker.add(() => {\n * const time = performance.now() / 1000;\n * const vertices = triangleMesh.vertices;\n *\n * // Move the top vertex up and down\n * vertices[1] = Math.sin(time) * 20;\n * triangleMesh.vertices = vertices; // Update vertices\n *\n * // Auto-updates by default\n * });\n *\n * // Create a line strip\n * const lineMesh = new MeshSimple({\n * texture: Texture.from('line.png'),\n * vertices: new Float32Array([\n * 0, 0,\n * 50, 50,\n * 100, 0,\n * 150, 50\n * ]),\n * topology: 'line-strip'\n * });\n *\n * // Manual vertex updates\n * lineMesh.autoUpdate = false;\n * const vertices = lineMesh.vertices;\n * vertices[0] += 10;\n * lineMesh.vertices = vertices; // Update vertices manually\n * // Update the vertices buffer manually\n * lineMesh.geometry.getBuffer('aPosition').update();\n * ```\n * @category scene\n * @advanced\n * @see {@link Mesh} For more advanced mesh customization\n * @see {@link MeshGeometry} For direct geometry manipulation\n */\nexport class MeshSimple extends Mesh\n{\n /**\n * Controls whether the mesh's vertex buffer is automatically updated each frame.\n * When true, vertex changes will be reflected immediately. When false, manual updates are required.\n * @example\n * ```ts\n * // Auto-update mode (default)\n * mesh.autoUpdate = true;\n * app.ticker.add(() => {\n * // Vertices update automatically each frame\n * const vertices = mesh.vertices;\n * vertices[1] = Math.sin(performance.now() / 1000) * 20;\n * mesh.vertices = vertices;\n * });\n *\n * // Manual update mode\n * mesh.autoUpdate = false;\n * app.ticker.add(() => {\n * // Update vertices\n * const vertices = mesh.vertices;\n * vertices[1] = Math.sin(performance.now() / 1000) * 20;\n * mesh.vertices = vertices;\n *\n * // Manually trigger buffer update\n * mesh.geometry.getBuffer('aPosition').update();\n * });\n * ```\n * @default true\n * @see {@link MeshGeometry#getBuffer} For manual buffer updates\n * @see {@link MeshSimple#vertices} For accessing vertex data\n */\n public autoUpdate: boolean;\n\n /**\n * @param options - Options to be used for construction\n */\n constructor(options: SimpleMeshOptions)\n {\n const { texture, vertices, uvs, indices, topology, ...rest } = options;\n const geometry = new MeshGeometry(definedProps({\n positions: vertices,\n uvs,\n indices,\n topology\n }));\n\n // geometry.getBuffer('aPosition').static = false;\n\n super(definedProps({\n ...rest,\n texture,\n geometry,\n }));\n\n this.autoUpdate = true;\n this.onRender = this._render;\n }\n\n /**\n * The vertex positions of the mesh as a TypedArray. Each vertex is represented by two\n * consecutive values (x, y) in the array. Changes to these values will update the mesh's shape.\n * @example\n * ```ts\n * // Read vertex positions\n * const vertices = mesh.vertices;\n * console.log('First vertex:', vertices[0], vertices[1]);\n *\n * // Modify vertices directly\n * vertices[0] += 10; // Move first vertex right\n * vertices[1] -= 20; // Move first vertex up\n *\n * // Animate vertices\n * app.ticker.add(() => {\n * const time = performance.now() / 1000;\n * const vertices = mesh.vertices;\n *\n * // Wave motion\n * for (let i = 0; i < vertices.length; i += 2) {\n * vertices[i + 1] = Math.sin(time + i * 0.5) * 20;\n * }\n * });\n * ```\n * @see {@link MeshSimple#autoUpdate} For controlling vertex buffer updates\n * @see {@link MeshGeometry#getBuffer} For direct buffer access\n */\n get vertices(): TypedArray\n {\n return this.geometry.getBuffer('aPosition').data;\n }\n set vertices(value: TypedArray)\n {\n this.geometry.getBuffer('aPosition').data = value;\n }\n\n private _render(): void\n {\n if (this.autoUpdate)\n {\n this.geometry.getBuffer('aPosition').update();\n }\n }\n}\n"],"names":[],"mappings":";;;;;AAuIO,MAAM,mBAAmB,IAChC,CAAA;AAAA;AAAA;AAAA;AAAA,EAoCI,YAAY,OACZ,EAAA;AACI,IAAM,MAAA,EAAE,SAAS,QAAU,EAAA,GAAA,EAAK,SAAS,QAAU,EAAA,GAAG,MAAS,GAAA,OAAA,CAAA;AAC/D,IAAM,MAAA,QAAA,GAAW,IAAI,YAAA,CAAa,YAAa,CAAA;AAAA,MAC3C,SAAW,EAAA,QAAA;AAAA,MACX,GAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,KACH,CAAC,CAAA,CAAA;AAIF,IAAA,KAAA,CAAM,YAAa,CAAA;AAAA,MACf,GAAG,IAAA;AAAA,MACH,OAAA;AAAA,MACA,QAAA;AAAA,KACH,CAAC,CAAA,CAAA;AAEF,IAAA,IAAA,CAAK,UAAa,GAAA,IAAA,CAAA;AAClB,IAAA,IAAA,CAAK,WAAW,IAAK,CAAA,OAAA,CAAA;AAAA,GACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6BA,IAAI,QACJ,GAAA;AACI,IAAA,OAAO,IAAK,CAAA,QAAA,CAAS,SAAU,CAAA,WAAW,CAAE,CAAA,IAAA,CAAA;AAAA,GAChD;AAAA,EACA,IAAI,SAAS,KACb,EAAA;AACI,IAAA,IAAA,CAAK,QAAS,CAAA,SAAA,CAAU,WAAW,CAAA,CAAE,IAAO,GAAA,KAAA,CAAA;AAAA,GAChD;AAAA,EAEQ,OACR,GAAA;AACI,IAAA,IAAI,KAAK,UACT,EAAA;AACI,MAAA,IAAA,CAAK,QAAS,CAAA,SAAA,CAAU,WAAW,CAAA,CAAE,MAAO,EAAA,CAAA;AAAA,KAChD;AAAA,GACJ;AACJ;;;;"}