44115 lines
1.6 MiB
44115 lines
1.6 MiB
/*!
|
|
* PixiJS - v8.4.1
|
|
* Compiled Thu, 19 Sep 2024 10:28:58 UTC
|
|
*
|
|
* PixiJS is licensed under the MIT License.
|
|
* http://www.opensource.org/licenses/mit-license
|
|
*/
|
|
var PIXI = (function (exports) {
|
|
'use strict';
|
|
|
|
"use strict";
|
|
var __defProp$16 = Object.defineProperty;
|
|
var __defProps$q = Object.defineProperties;
|
|
var __getOwnPropDescs$q = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$16 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$16 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$16 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$16 = (obj, key, value) => key in obj ? __defProp$16(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$16 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$16.call(b, prop))
|
|
__defNormalProp$16(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$16)
|
|
for (var prop of __getOwnPropSymbols$16(b)) {
|
|
if (__propIsEnum$16.call(b, prop))
|
|
__defNormalProp$16(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$q = (a, b) => __defProps$q(a, __getOwnPropDescs$q(b));
|
|
var ExtensionType = /* @__PURE__ */ ((ExtensionType2) => {
|
|
ExtensionType2["Application"] = "application";
|
|
ExtensionType2["WebGLPipes"] = "webgl-pipes";
|
|
ExtensionType2["WebGLPipesAdaptor"] = "webgl-pipes-adaptor";
|
|
ExtensionType2["WebGLSystem"] = "webgl-system";
|
|
ExtensionType2["WebGPUPipes"] = "webgpu-pipes";
|
|
ExtensionType2["WebGPUPipesAdaptor"] = "webgpu-pipes-adaptor";
|
|
ExtensionType2["WebGPUSystem"] = "webgpu-system";
|
|
ExtensionType2["CanvasSystem"] = "canvas-system";
|
|
ExtensionType2["CanvasPipesAdaptor"] = "canvas-pipes-adaptor";
|
|
ExtensionType2["CanvasPipes"] = "canvas-pipes";
|
|
ExtensionType2["Asset"] = "asset";
|
|
ExtensionType2["LoadParser"] = "load-parser";
|
|
ExtensionType2["ResolveParser"] = "resolve-parser";
|
|
ExtensionType2["CacheParser"] = "cache-parser";
|
|
ExtensionType2["DetectionParser"] = "detection-parser";
|
|
ExtensionType2["MaskEffect"] = "mask-effect";
|
|
ExtensionType2["BlendMode"] = "blend-mode";
|
|
ExtensionType2["TextureSource"] = "texture-source";
|
|
ExtensionType2["Environment"] = "environment";
|
|
ExtensionType2["ShapeBuilder"] = "shape-builder";
|
|
ExtensionType2["Batcher"] = "batcher";
|
|
return ExtensionType2;
|
|
})(ExtensionType || {});
|
|
const normalizeExtension = (ext) => {
|
|
if (typeof ext === "function" || typeof ext === "object" && ext.extension) {
|
|
if (!ext.extension) {
|
|
throw new Error("Extension class must have an extension object");
|
|
}
|
|
const metadata = typeof ext.extension !== "object" ? { type: ext.extension } : ext.extension;
|
|
ext = __spreadProps$q(__spreadValues$16({}, metadata), { ref: ext });
|
|
}
|
|
if (typeof ext === "object") {
|
|
ext = __spreadValues$16({}, ext);
|
|
} else {
|
|
throw new Error("Invalid extension type");
|
|
}
|
|
if (typeof ext.type === "string") {
|
|
ext.type = [ext.type];
|
|
}
|
|
return ext;
|
|
};
|
|
const normalizeExtensionPriority = (ext, defaultPriority) => {
|
|
var _a;
|
|
return (_a = normalizeExtension(ext).priority) != null ? _a : defaultPriority;
|
|
};
|
|
const extensions = {
|
|
/** @ignore */
|
|
_addHandlers: {},
|
|
/** @ignore */
|
|
_removeHandlers: {},
|
|
/** @ignore */
|
|
_queue: {},
|
|
/**
|
|
* Remove extensions from PixiJS.
|
|
* @param extensions - Extensions to be removed.
|
|
* @returns {extensions} For chaining.
|
|
*/
|
|
remove(...extensions2) {
|
|
extensions2.map(normalizeExtension).forEach((ext) => {
|
|
ext.type.forEach((type) => {
|
|
var _a, _b;
|
|
return (_b = (_a = this._removeHandlers)[type]) == null ? void 0 : _b.call(_a, ext);
|
|
});
|
|
});
|
|
return this;
|
|
},
|
|
/**
|
|
* Register new extensions with PixiJS.
|
|
* @param extensions - The spread of extensions to add to PixiJS.
|
|
* @returns {extensions} For chaining.
|
|
*/
|
|
add(...extensions2) {
|
|
extensions2.map(normalizeExtension).forEach((ext) => {
|
|
ext.type.forEach((type) => {
|
|
var _a, _b;
|
|
const handlers = this._addHandlers;
|
|
const queue = this._queue;
|
|
if (!handlers[type]) {
|
|
queue[type] = queue[type] || [];
|
|
(_a = queue[type]) == null ? void 0 : _a.push(ext);
|
|
} else {
|
|
(_b = handlers[type]) == null ? void 0 : _b.call(handlers, ext);
|
|
}
|
|
});
|
|
});
|
|
return this;
|
|
},
|
|
/**
|
|
* Internal method to handle extensions by name.
|
|
* @param type - The extension type.
|
|
* @param onAdd - Function handler when extensions are added/registered {@link StrictExtensionFormat}.
|
|
* @param onRemove - Function handler when extensions are removed/unregistered {@link StrictExtensionFormat}.
|
|
* @returns {extensions} For chaining.
|
|
*/
|
|
handle(type, onAdd, onRemove) {
|
|
var _a;
|
|
const addHandlers = this._addHandlers;
|
|
const removeHandlers = this._removeHandlers;
|
|
if (addHandlers[type] || removeHandlers[type]) {
|
|
throw new Error(`Extension type ${type} already has a handler`);
|
|
}
|
|
addHandlers[type] = onAdd;
|
|
removeHandlers[type] = onRemove;
|
|
const queue = this._queue;
|
|
if (queue[type]) {
|
|
(_a = queue[type]) == null ? void 0 : _a.forEach((ext) => onAdd(ext));
|
|
delete queue[type];
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* Handle a type, but using a map by `name` property.
|
|
* @param type - Type of extension to handle.
|
|
* @param map - The object map of named extensions.
|
|
* @returns {extensions} For chaining.
|
|
*/
|
|
handleByMap(type, map) {
|
|
return this.handle(
|
|
type,
|
|
(extension) => {
|
|
if (extension.name) {
|
|
map[extension.name] = extension.ref;
|
|
}
|
|
},
|
|
(extension) => {
|
|
if (extension.name) {
|
|
delete map[extension.name];
|
|
}
|
|
}
|
|
);
|
|
},
|
|
/**
|
|
* Handle a type, but using a list of extensions with a `name` property.
|
|
* @param type - Type of extension to handle.
|
|
* @param map - The array of named extensions.
|
|
* @param defaultPriority - Fallback priority if none is defined.
|
|
* @returns {extensions} For chaining.
|
|
*/
|
|
handleByNamedList(type, map, defaultPriority = -1) {
|
|
return this.handle(
|
|
type,
|
|
(extension) => {
|
|
const index = map.findIndex((item) => item.name === extension.name);
|
|
if (index >= 0)
|
|
return;
|
|
map.push({ name: extension.name, value: extension.ref });
|
|
map.sort((a, b) => normalizeExtensionPriority(b.value, defaultPriority) - normalizeExtensionPriority(a.value, defaultPriority));
|
|
},
|
|
(extension) => {
|
|
const index = map.findIndex((item) => item.name === extension.name);
|
|
if (index !== -1) {
|
|
map.splice(index, 1);
|
|
}
|
|
}
|
|
);
|
|
},
|
|
/**
|
|
* Handle a type, but using a list of extensions.
|
|
* @param type - Type of extension to handle.
|
|
* @param list - The list of extensions.
|
|
* @param defaultPriority - The default priority to use if none is specified.
|
|
* @returns {extensions} For chaining.
|
|
*/
|
|
handleByList(type, list, defaultPriority = -1) {
|
|
return this.handle(
|
|
type,
|
|
(extension) => {
|
|
if (list.includes(extension.ref)) {
|
|
return;
|
|
}
|
|
list.push(extension.ref);
|
|
list.sort((a, b) => normalizeExtensionPriority(b, defaultPriority) - normalizeExtensionPriority(a, defaultPriority));
|
|
},
|
|
(extension) => {
|
|
const index = list.indexOf(extension.ref);
|
|
if (index !== -1) {
|
|
list.splice(index, 1);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
|
|
function getDefaultExportFromCjs (x) {
|
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
}
|
|
|
|
function getDefaultExportFromNamespaceIfPresent (n) {
|
|
return n && Object.prototype.hasOwnProperty.call(n, 'default') ? n['default'] : n;
|
|
}
|
|
|
|
function getDefaultExportFromNamespaceIfNotNamed (n) {
|
|
return n && Object.prototype.hasOwnProperty.call(n, 'default') && Object.keys(n).length === 1 ? n['default'] : n;
|
|
}
|
|
|
|
function getAugmentedNamespace(n) {
|
|
if (n.__esModule) return n;
|
|
var f = n.default;
|
|
if (typeof f == "function") {
|
|
var a = function a () {
|
|
if (this instanceof a) {
|
|
return Reflect.construct(f, arguments, this.constructor);
|
|
}
|
|
return f.apply(this, arguments);
|
|
};
|
|
a.prototype = f.prototype;
|
|
} else a = {};
|
|
Object.defineProperty(a, '__esModule', {value: true});
|
|
Object.keys(n).forEach(function (k) {
|
|
var d = Object.getOwnPropertyDescriptor(n, k);
|
|
Object.defineProperty(a, k, d.get ? d : {
|
|
enumerable: true,
|
|
get: function () {
|
|
return n[k];
|
|
}
|
|
});
|
|
});
|
|
return a;
|
|
}
|
|
|
|
var eventemitter3$1 = {exports: {}};
|
|
|
|
var eventemitter3 = eventemitter3$1.exports;
|
|
|
|
(function (module) {
|
|
'use strict';
|
|
|
|
var has = Object.prototype.hasOwnProperty
|
|
, prefix = '~';
|
|
|
|
/**
|
|
* Constructor to create a storage for our `EE` objects.
|
|
* An `Events` instance is a plain object whose properties are event names.
|
|
*
|
|
* @constructor
|
|
* @private
|
|
*/
|
|
function Events() {}
|
|
|
|
//
|
|
// We try to not inherit from `Object.prototype`. In some engines creating an
|
|
// instance in this way is faster than calling `Object.create(null)` directly.
|
|
// If `Object.create(null)` is not supported we prefix the event names with a
|
|
// character to make sure that the built-in object properties are not
|
|
// overridden or used as an attack vector.
|
|
//
|
|
if (Object.create) {
|
|
Events.prototype = Object.create(null);
|
|
|
|
//
|
|
// This hack is needed because the `__proto__` property is still inherited in
|
|
// some old browsers like Android 4, iPhone 5.1, Opera 11 and Safari 5.
|
|
//
|
|
if (!new Events().__proto__) prefix = false;
|
|
}
|
|
|
|
/**
|
|
* Representation of a single event listener.
|
|
*
|
|
* @param {Function} fn The listener function.
|
|
* @param {*} context The context to invoke the listener with.
|
|
* @param {Boolean} [once=false] Specify if the listener is a one-time listener.
|
|
* @constructor
|
|
* @private
|
|
*/
|
|
function EE(fn, context, once) {
|
|
this.fn = fn;
|
|
this.context = context;
|
|
this.once = once || false;
|
|
}
|
|
|
|
/**
|
|
* Add a listener for a given event.
|
|
*
|
|
* @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
|
|
* @param {(String|Symbol)} event The event name.
|
|
* @param {Function} fn The listener function.
|
|
* @param {*} context The context to invoke the listener with.
|
|
* @param {Boolean} once Specify if the listener is a one-time listener.
|
|
* @returns {EventEmitter}
|
|
* @private
|
|
*/
|
|
function addListener(emitter, event, fn, context, once) {
|
|
if (typeof fn !== 'function') {
|
|
throw new TypeError('The listener must be a function');
|
|
}
|
|
|
|
var listener = new EE(fn, context || emitter, once)
|
|
, evt = prefix ? prefix + event : event;
|
|
|
|
if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;
|
|
else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);
|
|
else emitter._events[evt] = [emitter._events[evt], listener];
|
|
|
|
return emitter;
|
|
}
|
|
|
|
/**
|
|
* Clear event by name.
|
|
*
|
|
* @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
|
|
* @param {(String|Symbol)} evt The Event name.
|
|
* @private
|
|
*/
|
|
function clearEvent(emitter, evt) {
|
|
if (--emitter._eventsCount === 0) emitter._events = new Events();
|
|
else delete emitter._events[evt];
|
|
}
|
|
|
|
/**
|
|
* Minimal `EventEmitter` interface that is molded against the Node.js
|
|
* `EventEmitter` interface.
|
|
*
|
|
* @constructor
|
|
* @public
|
|
*/
|
|
function EventEmitter() {
|
|
this._events = new Events();
|
|
this._eventsCount = 0;
|
|
}
|
|
|
|
/**
|
|
* Return an array listing the events for which the emitter has registered
|
|
* listeners.
|
|
*
|
|
* @returns {Array}
|
|
* @public
|
|
*/
|
|
EventEmitter.prototype.eventNames = function eventNames() {
|
|
var names = []
|
|
, events
|
|
, name;
|
|
|
|
if (this._eventsCount === 0) return names;
|
|
|
|
for (name in (events = this._events)) {
|
|
if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
|
|
}
|
|
|
|
if (Object.getOwnPropertySymbols) {
|
|
return names.concat(Object.getOwnPropertySymbols(events));
|
|
}
|
|
|
|
return names;
|
|
};
|
|
|
|
/**
|
|
* Return the listeners registered for a given event.
|
|
*
|
|
* @param {(String|Symbol)} event The event name.
|
|
* @returns {Array} The registered listeners.
|
|
* @public
|
|
*/
|
|
EventEmitter.prototype.listeners = function listeners(event) {
|
|
var evt = prefix ? prefix + event : event
|
|
, handlers = this._events[evt];
|
|
|
|
if (!handlers) return [];
|
|
if (handlers.fn) return [handlers.fn];
|
|
|
|
for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
|
|
ee[i] = handlers[i].fn;
|
|
}
|
|
|
|
return ee;
|
|
};
|
|
|
|
/**
|
|
* Return the number of listeners listening to a given event.
|
|
*
|
|
* @param {(String|Symbol)} event The event name.
|
|
* @returns {Number} The number of listeners.
|
|
* @public
|
|
*/
|
|
EventEmitter.prototype.listenerCount = function listenerCount(event) {
|
|
var evt = prefix ? prefix + event : event
|
|
, listeners = this._events[evt];
|
|
|
|
if (!listeners) return 0;
|
|
if (listeners.fn) return 1;
|
|
return listeners.length;
|
|
};
|
|
|
|
/**
|
|
* Calls each of the listeners registered for a given event.
|
|
*
|
|
* @param {(String|Symbol)} event The event name.
|
|
* @returns {Boolean} `true` if the event had listeners, else `false`.
|
|
* @public
|
|
*/
|
|
EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
|
|
var evt = prefix ? prefix + event : event;
|
|
|
|
if (!this._events[evt]) return false;
|
|
|
|
var listeners = this._events[evt]
|
|
, len = arguments.length
|
|
, args
|
|
, i;
|
|
|
|
if (listeners.fn) {
|
|
if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);
|
|
|
|
switch (len) {
|
|
case 1: return listeners.fn.call(listeners.context), true;
|
|
case 2: return listeners.fn.call(listeners.context, a1), true;
|
|
case 3: return listeners.fn.call(listeners.context, a1, a2), true;
|
|
case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true;
|
|
case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
|
|
case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
|
|
}
|
|
|
|
for (i = 1, args = new Array(len -1); i < len; i++) {
|
|
args[i - 1] = arguments[i];
|
|
}
|
|
|
|
listeners.fn.apply(listeners.context, args);
|
|
} else {
|
|
var length = listeners.length
|
|
, j;
|
|
|
|
for (i = 0; i < length; i++) {
|
|
if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);
|
|
|
|
switch (len) {
|
|
case 1: listeners[i].fn.call(listeners[i].context); break;
|
|
case 2: listeners[i].fn.call(listeners[i].context, a1); break;
|
|
case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break;
|
|
case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break;
|
|
default:
|
|
if (!args) for (j = 1, args = new Array(len -1); j < len; j++) {
|
|
args[j - 1] = arguments[j];
|
|
}
|
|
|
|
listeners[i].fn.apply(listeners[i].context, args);
|
|
}
|
|
}
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
/**
|
|
* Add a listener for a given event.
|
|
*
|
|
* @param {(String|Symbol)} event The event name.
|
|
* @param {Function} fn The listener function.
|
|
* @param {*} [context=this] The context to invoke the listener with.
|
|
* @returns {EventEmitter} `this`.
|
|
* @public
|
|
*/
|
|
EventEmitter.prototype.on = function on(event, fn, context) {
|
|
return addListener(this, event, fn, context, false);
|
|
};
|
|
|
|
/**
|
|
* Add a one-time listener for a given event.
|
|
*
|
|
* @param {(String|Symbol)} event The event name.
|
|
* @param {Function} fn The listener function.
|
|
* @param {*} [context=this] The context to invoke the listener with.
|
|
* @returns {EventEmitter} `this`.
|
|
* @public
|
|
*/
|
|
EventEmitter.prototype.once = function once(event, fn, context) {
|
|
return addListener(this, event, fn, context, true);
|
|
};
|
|
|
|
/**
|
|
* Remove the listeners of a given event.
|
|
*
|
|
* @param {(String|Symbol)} event The event name.
|
|
* @param {Function} fn Only remove the listeners that match this function.
|
|
* @param {*} context Only remove the listeners that have this context.
|
|
* @param {Boolean} once Only remove one-time listeners.
|
|
* @returns {EventEmitter} `this`.
|
|
* @public
|
|
*/
|
|
EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
|
|
var evt = prefix ? prefix + event : event;
|
|
|
|
if (!this._events[evt]) return this;
|
|
if (!fn) {
|
|
clearEvent(this, evt);
|
|
return this;
|
|
}
|
|
|
|
var listeners = this._events[evt];
|
|
|
|
if (listeners.fn) {
|
|
if (
|
|
listeners.fn === fn &&
|
|
(!once || listeners.once) &&
|
|
(!context || listeners.context === context)
|
|
) {
|
|
clearEvent(this, evt);
|
|
}
|
|
} else {
|
|
for (var i = 0, events = [], length = listeners.length; i < length; i++) {
|
|
if (
|
|
listeners[i].fn !== fn ||
|
|
(once && !listeners[i].once) ||
|
|
(context && listeners[i].context !== context)
|
|
) {
|
|
events.push(listeners[i]);
|
|
}
|
|
}
|
|
|
|
//
|
|
// Reset the array, or remove it completely if we have no more listeners.
|
|
//
|
|
if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;
|
|
else clearEvent(this, evt);
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Remove all listeners, or those of the specified event.
|
|
*
|
|
* @param {(String|Symbol)} [event] The event name.
|
|
* @returns {EventEmitter} `this`.
|
|
* @public
|
|
*/
|
|
EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
|
|
var evt;
|
|
|
|
if (event) {
|
|
evt = prefix ? prefix + event : event;
|
|
if (this._events[evt]) clearEvent(this, evt);
|
|
} else {
|
|
this._events = new Events();
|
|
this._eventsCount = 0;
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
//
|
|
// Alias methods names because people roll like that.
|
|
//
|
|
EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
|
|
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
|
|
|
|
//
|
|
// Expose the prefix.
|
|
//
|
|
EventEmitter.prefixed = prefix;
|
|
|
|
//
|
|
// Allow `EventEmitter` to be imported as module namespace.
|
|
//
|
|
EventEmitter.EventEmitter = EventEmitter;
|
|
|
|
//
|
|
// Expose the module.
|
|
//
|
|
if ('undefined' !== 'object') {
|
|
module.exports = EventEmitter;
|
|
}
|
|
} (eventemitter3$1));
|
|
|
|
var eventemitter3Exports = eventemitter3$1.exports;
|
|
var EventEmitter = /*@__PURE__*/getDefaultExportFromCjs(eventemitter3Exports);
|
|
|
|
var r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return "string"==typeof r?r.length>0:"number"==typeof r},n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return (r=isFinite(r)?r%360:0)>0?r:r+360},a=function(r){return {r:e(r.r,0,255),g:e(r.g,0,255),b:e(r.b,0,255),a:e(r.a)}},o=function(r){return {r:n(r.r),g:n(r.g),b:n(r.b),a:n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return {h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return {r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return {h:u(r.h),s:e(r.s,0,100),l:e(r.l,0,100),a:e(r.a)}},d=function(r){return {h:n(r.h),s:n(r.s),l:n(r.l),a:n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e;},c=function(r){return {h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u;},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return {h:u(r.h),s:e(r.s,0,100),v:e(r.v,0,100),a:e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return [e,t[n][1]]}return [null,void 0]},x=function(r){return "string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},I=function(r){return x(r)[1]},M=function(r,t){var n=c(r);return {h:n.h,s:e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return (299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return {h:n.h,s:n.s,l:e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1};}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i;},r.prototype.toRgb=function(){return o(this.rgba)},r.prototype.toRgbString=function(){return r=o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u;},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u;},r.prototype.toHsv=function(){return r=h(this.rgba),{h:n(r.h),s:n(r.s),v:n(r.v),a:n(r.a,3)};var r;},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r;},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return "number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):n(this.rgba.a,3);var t;},r.prototype.hue=function(r){var t=c(this.rgba);return "number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(j,y),S.push(r));});},E=function(){return new j({r:255*Math.random(),g:255*Math.random(),b:255*Math.random()})};
|
|
|
|
function namesPlugin(e,f){var a={white:"#ffffff",bisque:"#ffe4c4",blue:"#0000ff",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",antiquewhite:"#faebd7",aqua:"#00ffff",azure:"#f0ffff",whitesmoke:"#f5f5f5",papayawhip:"#ffefd5",plum:"#dda0dd",blanchedalmond:"#ffebcd",black:"#000000",gold:"#ffd700",goldenrod:"#daa520",gainsboro:"#dcdcdc",cornsilk:"#fff8dc",cornflowerblue:"#6495ed",burlywood:"#deb887",aquamarine:"#7fffd4",beige:"#f5f5dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkkhaki:"#bdb76b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",peachpuff:"#ffdab9",darkmagenta:"#8b008b",darkred:"#8b0000",darkorchid:"#9932cc",darkorange:"#ff8c00",darkslateblue:"#483d8b",gray:"#808080",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",deeppink:"#ff1493",deepskyblue:"#00bfff",wheat:"#f5deb3",firebrick:"#b22222",floralwhite:"#fffaf0",ghostwhite:"#f8f8ff",darkviolet:"#9400d3",magenta:"#ff00ff",green:"#008000",dodgerblue:"#1e90ff",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",blueviolet:"#8a2be2",forestgreen:"#228b22",lawngreen:"#7cfc00",indianred:"#cd5c5c",indigo:"#4b0082",fuchsia:"#ff00ff",brown:"#a52a2a",maroon:"#800000",mediumblue:"#0000cd",lightcoral:"#f08080",darkturquoise:"#00ced1",lightcyan:"#e0ffff",ivory:"#fffff0",lightyellow:"#ffffe0",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",linen:"#faf0e6",mediumaquamarine:"#66cdaa",lemonchiffon:"#fffacd",lime:"#00ff00",khaki:"#f0e68c",mediumseagreen:"#3cb371",limegreen:"#32cd32",mediumspringgreen:"#00fa9a",lightskyblue:"#87cefa",lightblue:"#add8e6",midnightblue:"#191970",lightpink:"#ffb6c1",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",mintcream:"#f5fffa",lightslategray:"#778899",lightslategrey:"#778899",navajowhite:"#ffdead",navy:"#000080",mediumvioletred:"#c71585",powderblue:"#b0e0e6",palegoldenrod:"#eee8aa",oldlace:"#fdf5e6",paleturquoise:"#afeeee",mediumturquoise:"#48d1cc",mediumorchid:"#ba55d3",rebeccapurple:"#663399",lightsteelblue:"#b0c4de",mediumslateblue:"#7b68ee",thistle:"#d8bfd8",tan:"#d2b48c",orchid:"#da70d6",mediumpurple:"#9370db",purple:"#800080",pink:"#ffc0cb",skyblue:"#87ceeb",springgreen:"#00ff7f",palegreen:"#98fb98",red:"#ff0000",yellow:"#ffff00",slateblue:"#6a5acd",lavenderblush:"#fff0f5",peru:"#cd853f",palevioletred:"#db7093",violet:"#ee82ee",teal:"#008080",slategray:"#708090",slategrey:"#708090",aliceblue:"#f0f8ff",darkseagreen:"#8fbc8f",darkolivegreen:"#556b2f",greenyellow:"#adff2f",seagreen:"#2e8b57",seashell:"#fff5ee",tomato:"#ff6347",silver:"#c0c0c0",sienna:"#a0522d",lavender:"#e6e6fa",lightgreen:"#90ee90",orange:"#ffa500",orangered:"#ff4500",steelblue:"#4682b4",royalblue:"#4169e1",turquoise:"#40e0d0",yellowgreen:"#9acd32",salmon:"#fa8072",saddlebrown:"#8b4513",sandybrown:"#f4a460",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightgoldenrodyellow:"#fafad2",snow:"#fffafa",lightgrey:"#d3d3d3",lightgray:"#d3d3d3",dimgray:"#696969",dimgrey:"#696969",olivedrab:"#6b8e23",olive:"#808000"},r={};for(var d in a)r[a[d]]=d;var l={};e.prototype.toName=function(f){if(!(this.rgba.a||this.rgba.r||this.rgba.g||this.rgba.b))return "transparent";var d,i,n=r[this.toHex()];if(n)return n;if(null==f?void 0:f.closest){var o=this.toRgb(),t=1/0,b="black";if(!l.length)for(var c in a)l[c]=new e(a[c]).toRgb();for(var g in a){var u=(d=o,i=l[g],Math.pow(d.r-i.r,2)+Math.pow(d.g-i.g,2)+Math.pow(d.b-i.b,2));u<t&&(t=u,b=g);}return b}};f.string.push([function(f){var r=f.toLowerCase(),d="transparent"===r?"#0000":a[r];return d?new e(d).toRgb():null},"name"]);}
|
|
|
|
"use strict";
|
|
var __defProp$15 = Object.defineProperty;
|
|
var __getOwnPropSymbols$15 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$15 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$15 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$15 = (obj, key, value) => key in obj ? __defProp$15(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$15 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$15.call(b, prop))
|
|
__defNormalProp$15(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$15)
|
|
for (var prop of __getOwnPropSymbols$15(b)) {
|
|
if (__propIsEnum$15.call(b, prop))
|
|
__defNormalProp$15(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
k([namesPlugin]);
|
|
const _Color = class _Color {
|
|
/**
|
|
* @param {ColorSource} value - Optional value to use, if not provided, white is used.
|
|
*/
|
|
constructor(value = 16777215) {
|
|
this._value = null;
|
|
this._components = new Float32Array(4);
|
|
this._components.fill(1);
|
|
this._int = 16777215;
|
|
this.value = value;
|
|
}
|
|
/** Get red component (0 - 1) */
|
|
get red() {
|
|
return this._components[0];
|
|
}
|
|
/** Get green component (0 - 1) */
|
|
get green() {
|
|
return this._components[1];
|
|
}
|
|
/** Get blue component (0 - 1) */
|
|
get blue() {
|
|
return this._components[2];
|
|
}
|
|
/** Get alpha component (0 - 1) */
|
|
get alpha() {
|
|
return this._components[3];
|
|
}
|
|
/**
|
|
* Set the value, suitable for chaining
|
|
* @param value
|
|
* @see Color.value
|
|
*/
|
|
setValue(value) {
|
|
this.value = value;
|
|
return this;
|
|
}
|
|
/**
|
|
* The current color source.
|
|
*
|
|
* When setting:
|
|
* - Setting to an instance of `Color` will copy its color source and components.
|
|
* - Otherwise, `Color` will try to normalize the color source and set the components.
|
|
* If the color source is invalid, an `Error` will be thrown and the `Color` will left unchanged.
|
|
*
|
|
* Note: The `null` in the setter's parameter type is added to match the TypeScript rule: return type of getter
|
|
* must be assignable to its setter's parameter type. Setting `value` to `null` will throw an `Error`.
|
|
*
|
|
* When getting:
|
|
* - A return value of `null` means the previous value was overridden (e.g., {@link Color.multiply multiply},
|
|
* {@link Color.premultiply premultiply} or {@link Color.round round}).
|
|
* - Otherwise, the color source used when setting is returned.
|
|
*/
|
|
set value(value) {
|
|
if (value instanceof _Color) {
|
|
this._value = this._cloneSource(value._value);
|
|
this._int = value._int;
|
|
this._components.set(value._components);
|
|
} else if (value === null) {
|
|
throw new Error("Cannot set Color#value to null");
|
|
} else if (this._value === null || !this._isSourceEqual(this._value, value)) {
|
|
this._value = this._cloneSource(value);
|
|
this._normalize(this._value);
|
|
}
|
|
}
|
|
get value() {
|
|
return this._value;
|
|
}
|
|
/**
|
|
* Copy a color source internally.
|
|
* @param value - Color source
|
|
*/
|
|
_cloneSource(value) {
|
|
if (typeof value === "string" || typeof value === "number" || value instanceof Number || value === null) {
|
|
return value;
|
|
} else if (Array.isArray(value) || ArrayBuffer.isView(value)) {
|
|
return value.slice(0);
|
|
} else if (typeof value === "object" && value !== null) {
|
|
return __spreadValues$15({}, value);
|
|
}
|
|
return value;
|
|
}
|
|
/**
|
|
* Equality check for color sources.
|
|
* @param value1 - First color source
|
|
* @param value2 - Second color source
|
|
* @returns `true` if the color sources are equal, `false` otherwise.
|
|
*/
|
|
_isSourceEqual(value1, value2) {
|
|
const type1 = typeof value1;
|
|
const type2 = typeof value2;
|
|
if (type1 !== type2) {
|
|
return false;
|
|
} else if (type1 === "number" || type1 === "string" || value1 instanceof Number) {
|
|
return value1 === value2;
|
|
} else if (Array.isArray(value1) && Array.isArray(value2) || ArrayBuffer.isView(value1) && ArrayBuffer.isView(value2)) {
|
|
if (value1.length !== value2.length) {
|
|
return false;
|
|
}
|
|
return value1.every((v, i) => v === value2[i]);
|
|
} else if (value1 !== null && value2 !== null) {
|
|
const keys1 = Object.keys(value1);
|
|
const keys2 = Object.keys(value2);
|
|
if (keys1.length !== keys2.length) {
|
|
return false;
|
|
}
|
|
return keys1.every((key) => value1[key] === value2[key]);
|
|
}
|
|
return value1 === value2;
|
|
}
|
|
/**
|
|
* Convert to a RGBA color object.
|
|
* @example
|
|
* import { Color } from 'pixi.js';
|
|
* new Color('white').toRgb(); // returns { r: 1, g: 1, b: 1, a: 1 }
|
|
*/
|
|
toRgba() {
|
|
const [r, g, b, a] = this._components;
|
|
return { r, g, b, a };
|
|
}
|
|
/**
|
|
* Convert to a RGB color object.
|
|
* @example
|
|
* import { Color } from 'pixi.js';
|
|
* new Color('white').toRgb(); // returns { r: 1, g: 1, b: 1 }
|
|
*/
|
|
toRgb() {
|
|
const [r, g, b] = this._components;
|
|
return { r, g, b };
|
|
}
|
|
/** Convert to a CSS-style rgba string: `rgba(255,255,255,1.0)`. */
|
|
toRgbaString() {
|
|
const [r, g, b] = this.toUint8RgbArray();
|
|
return `rgba(${r},${g},${b},${this.alpha})`;
|
|
}
|
|
toUint8RgbArray(out) {
|
|
const [r, g, b] = this._components;
|
|
if (!this._arrayRgb) {
|
|
this._arrayRgb = [];
|
|
}
|
|
out = out || this._arrayRgb;
|
|
out[0] = Math.round(r * 255);
|
|
out[1] = Math.round(g * 255);
|
|
out[2] = Math.round(b * 255);
|
|
return out;
|
|
}
|
|
toArray(out) {
|
|
if (!this._arrayRgba) {
|
|
this._arrayRgba = [];
|
|
}
|
|
out = out || this._arrayRgba;
|
|
const [r, g, b, a] = this._components;
|
|
out[0] = r;
|
|
out[1] = g;
|
|
out[2] = b;
|
|
out[3] = a;
|
|
return out;
|
|
}
|
|
toRgbArray(out) {
|
|
if (!this._arrayRgb) {
|
|
this._arrayRgb = [];
|
|
}
|
|
out = out || this._arrayRgb;
|
|
const [r, g, b] = this._components;
|
|
out[0] = r;
|
|
out[1] = g;
|
|
out[2] = b;
|
|
return out;
|
|
}
|
|
/**
|
|
* Convert to a hexadecimal number.
|
|
* @example
|
|
* import { Color } from 'pixi.js';
|
|
* new Color('white').toNumber(); // returns 16777215
|
|
*/
|
|
toNumber() {
|
|
return this._int;
|
|
}
|
|
/**
|
|
* Convert to a BGR number
|
|
* @example
|
|
* import { Color } from 'pixi.js';
|
|
* new Color(0xffcc99).toBgrNumber(); // returns 0x99ccff
|
|
*/
|
|
toBgrNumber() {
|
|
const [r, g, b] = this.toUint8RgbArray();
|
|
return (b << 16) + (g << 8) + r;
|
|
}
|
|
/**
|
|
* Convert to a hexadecimal number in little endian format (e.g., BBGGRR).
|
|
* @example
|
|
* import { Color } from 'pixi.js';
|
|
* new Color(0xffcc99).toLittleEndianNumber(); // returns 0x99ccff
|
|
* @returns {number} - The color as a number in little endian format.
|
|
*/
|
|
toLittleEndianNumber() {
|
|
const value = this._int;
|
|
return (value >> 16) + (value & 65280) + ((value & 255) << 16);
|
|
}
|
|
/**
|
|
* Multiply with another color. This action is destructive, and will
|
|
* override the previous `value` property to be `null`.
|
|
* @param {ColorSource} value - The color to multiply by.
|
|
*/
|
|
multiply(value) {
|
|
const [r, g, b, a] = _Color._temp.setValue(value)._components;
|
|
this._components[0] *= r;
|
|
this._components[1] *= g;
|
|
this._components[2] *= b;
|
|
this._components[3] *= a;
|
|
this._refreshInt();
|
|
this._value = null;
|
|
return this;
|
|
}
|
|
/**
|
|
* Converts color to a premultiplied alpha format. This action is destructive, and will
|
|
* override the previous `value` property to be `null`.
|
|
* @param alpha - The alpha to multiply by.
|
|
* @param {boolean} [applyToRGB=true] - Whether to premultiply RGB channels.
|
|
* @returns {Color} - Itself.
|
|
*/
|
|
premultiply(alpha, applyToRGB = true) {
|
|
if (applyToRGB) {
|
|
this._components[0] *= alpha;
|
|
this._components[1] *= alpha;
|
|
this._components[2] *= alpha;
|
|
}
|
|
this._components[3] = alpha;
|
|
this._refreshInt();
|
|
this._value = null;
|
|
return this;
|
|
}
|
|
/**
|
|
* Premultiplies alpha with current color.
|
|
* @param {number} alpha - The alpha to multiply by.
|
|
* @param {boolean} [applyToRGB=true] - Whether to premultiply RGB channels.
|
|
* @returns {number} tint multiplied by alpha
|
|
*/
|
|
toPremultiplied(alpha, applyToRGB = true) {
|
|
if (alpha === 1) {
|
|
return (255 << 24) + this._int;
|
|
}
|
|
if (alpha === 0) {
|
|
return applyToRGB ? 0 : this._int;
|
|
}
|
|
let r = this._int >> 16 & 255;
|
|
let g = this._int >> 8 & 255;
|
|
let b = this._int & 255;
|
|
if (applyToRGB) {
|
|
r = r * alpha + 0.5 | 0;
|
|
g = g * alpha + 0.5 | 0;
|
|
b = b * alpha + 0.5 | 0;
|
|
}
|
|
return (alpha * 255 << 24) + (r << 16) + (g << 8) + b;
|
|
}
|
|
/**
|
|
* Convert to a hexadecimal string.
|
|
* @example
|
|
* import { Color } from 'pixi.js';
|
|
* new Color('white').toHex(); // returns "#ffffff"
|
|
*/
|
|
toHex() {
|
|
const hexString = this._int.toString(16);
|
|
return `#${"000000".substring(0, 6 - hexString.length) + hexString}`;
|
|
}
|
|
/**
|
|
* Convert to a hexadecimal string with alpha.
|
|
* @example
|
|
* import { Color } from 'pixi.js';
|
|
* new Color('white').toHexa(); // returns "#ffffffff"
|
|
*/
|
|
toHexa() {
|
|
const alphaValue = Math.round(this._components[3] * 255);
|
|
const alphaString = alphaValue.toString(16);
|
|
return this.toHex() + "00".substring(0, 2 - alphaString.length) + alphaString;
|
|
}
|
|
/**
|
|
* Set alpha, suitable for chaining.
|
|
* @param alpha
|
|
*/
|
|
setAlpha(alpha) {
|
|
this._components[3] = this._clamp(alpha);
|
|
return this;
|
|
}
|
|
/**
|
|
* Normalize the input value into rgba
|
|
* @param value - Input value
|
|
*/
|
|
_normalize(value) {
|
|
let r;
|
|
let g;
|
|
let b;
|
|
let a;
|
|
if ((typeof value === "number" || value instanceof Number) && value >= 0 && value <= 16777215) {
|
|
const int = value;
|
|
r = (int >> 16 & 255) / 255;
|
|
g = (int >> 8 & 255) / 255;
|
|
b = (int & 255) / 255;
|
|
a = 1;
|
|
} else if ((Array.isArray(value) || value instanceof Float32Array) && value.length >= 3 && value.length <= 4) {
|
|
value = this._clamp(value);
|
|
[r, g, b, a = 1] = value;
|
|
} else if ((value instanceof Uint8Array || value instanceof Uint8ClampedArray) && value.length >= 3 && value.length <= 4) {
|
|
value = this._clamp(value, 0, 255);
|
|
[r, g, b, a = 255] = value;
|
|
r /= 255;
|
|
g /= 255;
|
|
b /= 255;
|
|
a /= 255;
|
|
} else if (typeof value === "string" || typeof value === "object") {
|
|
if (typeof value === "string") {
|
|
const match = _Color.HEX_PATTERN.exec(value);
|
|
if (match) {
|
|
value = `#${match[2]}`;
|
|
}
|
|
}
|
|
const color = w(value);
|
|
if (color.isValid()) {
|
|
({ r, g, b, a } = color.rgba);
|
|
r /= 255;
|
|
g /= 255;
|
|
b /= 255;
|
|
}
|
|
}
|
|
if (r !== void 0) {
|
|
this._components[0] = r;
|
|
this._components[1] = g;
|
|
this._components[2] = b;
|
|
this._components[3] = a;
|
|
this._refreshInt();
|
|
} else {
|
|
throw new Error(`Unable to convert color ${value}`);
|
|
}
|
|
}
|
|
/** Refresh the internal color rgb number */
|
|
_refreshInt() {
|
|
this._clamp(this._components);
|
|
const [r, g, b] = this._components;
|
|
this._int = (r * 255 << 16) + (g * 255 << 8) + (b * 255 | 0);
|
|
}
|
|
/**
|
|
* Clamps values to a range. Will override original values
|
|
* @param value - Value(s) to clamp
|
|
* @param min - Minimum value
|
|
* @param max - Maximum value
|
|
*/
|
|
_clamp(value, min = 0, max = 1) {
|
|
if (typeof value === "number") {
|
|
return Math.min(Math.max(value, min), max);
|
|
}
|
|
value.forEach((v, i) => {
|
|
value[i] = Math.min(Math.max(v, min), max);
|
|
});
|
|
return value;
|
|
}
|
|
/**
|
|
* Check if the value is a color-like object
|
|
* @param value - Value to check
|
|
* @returns True if the value is a color-like object
|
|
* @static
|
|
* @example
|
|
* import { Color } from 'pixi.js';
|
|
* Color.isColorLike('white'); // returns true
|
|
* Color.isColorLike(0xffffff); // returns true
|
|
* Color.isColorLike([1, 1, 1]); // returns true
|
|
*/
|
|
static isColorLike(value) {
|
|
return typeof value === "number" || typeof value === "string" || value instanceof Number || value instanceof _Color || Array.isArray(value) || value instanceof Uint8Array || value instanceof Uint8ClampedArray || value instanceof Float32Array || value.r !== void 0 && value.g !== void 0 && value.b !== void 0 || value.r !== void 0 && value.g !== void 0 && value.b !== void 0 && value.a !== void 0 || value.h !== void 0 && value.s !== void 0 && value.l !== void 0 || value.h !== void 0 && value.s !== void 0 && value.l !== void 0 && value.a !== void 0 || value.h !== void 0 && value.s !== void 0 && value.v !== void 0 || value.h !== void 0 && value.s !== void 0 && value.v !== void 0 && value.a !== void 0;
|
|
}
|
|
};
|
|
/**
|
|
* Default Color object for static uses
|
|
* @example
|
|
* import { Color } from 'pixi.js';
|
|
* Color.shared.setValue(0xffffff).toHex(); // '#ffffff'
|
|
*/
|
|
_Color.shared = new _Color();
|
|
/**
|
|
* Temporary Color object for static uses internally.
|
|
* As to not conflict with Color.shared.
|
|
* @ignore
|
|
*/
|
|
_Color._temp = new _Color();
|
|
/** Pattern for hex strings */
|
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
_Color.HEX_PATTERN = /^(#|0x)?(([a-f0-9]{3}){1,2}([a-f0-9]{2})?)$/i;
|
|
let Color = _Color;
|
|
|
|
"use strict";
|
|
const cullingMixin = {
|
|
cullArea: null,
|
|
cullable: false,
|
|
cullableChildren: true
|
|
};
|
|
|
|
"use strict";
|
|
const PI_2 = Math.PI * 2;
|
|
const RAD_TO_DEG = 180 / Math.PI;
|
|
const DEG_TO_RAD = Math.PI / 180;
|
|
|
|
"use strict";
|
|
class Point {
|
|
/**
|
|
* Creates a new `Point`
|
|
* @param {number} [x=0] - position of the point on the x axis
|
|
* @param {number} [y=0] - position of the point on the y axis
|
|
*/
|
|
constructor(x = 0, y = 0) {
|
|
/** Position of the point on the x axis */
|
|
this.x = 0;
|
|
/** Position of the point on the y axis */
|
|
this.y = 0;
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
/**
|
|
* Creates a clone of this point
|
|
* @returns A clone of this point
|
|
*/
|
|
clone() {
|
|
return new Point(this.x, this.y);
|
|
}
|
|
/**
|
|
* Copies `x` and `y` from the given point into this point
|
|
* @param p - The point to copy from
|
|
* @returns The point instance itself
|
|
*/
|
|
copyFrom(p) {
|
|
this.set(p.x, p.y);
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies this point's x and y into the given point (`p`).
|
|
* @param p - The point to copy to. Can be any of type that is or extends `PointData`
|
|
* @returns The point (`p`) with values updated
|
|
*/
|
|
copyTo(p) {
|
|
p.set(this.x, this.y);
|
|
return p;
|
|
}
|
|
/**
|
|
* Accepts another point (`p`) and returns `true` if the given point is equal to this point
|
|
* @param p - The point to check
|
|
* @returns Returns `true` if both `x` and `y` are equal
|
|
*/
|
|
equals(p) {
|
|
return p.x === this.x && p.y === this.y;
|
|
}
|
|
/**
|
|
* Sets the point to a new `x` and `y` position.
|
|
* If `y` is omitted, both `x` and `y` will be set to `x`.
|
|
* @param {number} [x=0] - position of the point on the `x` axis
|
|
* @param {number} [y=x] - position of the point on the `y` axis
|
|
* @returns The point instance itself
|
|
*/
|
|
set(x = 0, y = x) {
|
|
this.x = x;
|
|
this.y = y;
|
|
return this;
|
|
}
|
|
toString() {
|
|
return `[pixi.js/math:Point x=${this.x} y=${this.y}]`;
|
|
}
|
|
/**
|
|
* A static Point object with `x` and `y` values of `0`. Can be used to avoid creating new objects multiple times.
|
|
* @readonly
|
|
*/
|
|
static get shared() {
|
|
tempPoint.x = 0;
|
|
tempPoint.y = 0;
|
|
return tempPoint;
|
|
}
|
|
}
|
|
const tempPoint = new Point();
|
|
|
|
"use strict";
|
|
class Matrix {
|
|
/**
|
|
* @param a - x scale
|
|
* @param b - y skew
|
|
* @param c - x skew
|
|
* @param d - y scale
|
|
* @param tx - x translation
|
|
* @param ty - y translation
|
|
*/
|
|
constructor(a = 1, b = 0, c = 0, d = 1, tx = 0, ty = 0) {
|
|
/** An array of the current matrix. Only populated when `toArray` is called */
|
|
this.array = null;
|
|
this.a = a;
|
|
this.b = b;
|
|
this.c = c;
|
|
this.d = d;
|
|
this.tx = tx;
|
|
this.ty = ty;
|
|
}
|
|
/**
|
|
* Creates a Matrix object based on the given array. The Element to Matrix mapping order is as follows:
|
|
*
|
|
* a = array[0]
|
|
* b = array[1]
|
|
* c = array[3]
|
|
* d = array[4]
|
|
* tx = array[2]
|
|
* ty = array[5]
|
|
* @param array - The array that the matrix will be populated from.
|
|
*/
|
|
fromArray(array) {
|
|
this.a = array[0];
|
|
this.b = array[1];
|
|
this.c = array[3];
|
|
this.d = array[4];
|
|
this.tx = array[2];
|
|
this.ty = array[5];
|
|
}
|
|
/**
|
|
* Sets the matrix properties.
|
|
* @param a - Matrix component
|
|
* @param b - Matrix component
|
|
* @param c - Matrix component
|
|
* @param d - Matrix component
|
|
* @param tx - Matrix component
|
|
* @param ty - Matrix component
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
set(a, b, c, d, tx, ty) {
|
|
this.a = a;
|
|
this.b = b;
|
|
this.c = c;
|
|
this.d = d;
|
|
this.tx = tx;
|
|
this.ty = ty;
|
|
return this;
|
|
}
|
|
/**
|
|
* Creates an array from the current Matrix object.
|
|
* @param transpose - Whether we need to transpose the matrix or not
|
|
* @param [out=new Float32Array(9)] - If provided the array will be assigned to out
|
|
* @returns The newly created array which contains the matrix
|
|
*/
|
|
toArray(transpose, out) {
|
|
if (!this.array) {
|
|
this.array = new Float32Array(9);
|
|
}
|
|
const array = out || this.array;
|
|
if (transpose) {
|
|
array[0] = this.a;
|
|
array[1] = this.b;
|
|
array[2] = 0;
|
|
array[3] = this.c;
|
|
array[4] = this.d;
|
|
array[5] = 0;
|
|
array[6] = this.tx;
|
|
array[7] = this.ty;
|
|
array[8] = 1;
|
|
} else {
|
|
array[0] = this.a;
|
|
array[1] = this.c;
|
|
array[2] = this.tx;
|
|
array[3] = this.b;
|
|
array[4] = this.d;
|
|
array[5] = this.ty;
|
|
array[6] = 0;
|
|
array[7] = 0;
|
|
array[8] = 1;
|
|
}
|
|
return array;
|
|
}
|
|
/**
|
|
* Get a new position with the current transformation applied.
|
|
* Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering)
|
|
* @param pos - The origin
|
|
* @param {Point} [newPos] - The point that the new position is assigned to (allowed to be same as input)
|
|
* @returns {Point} The new point, transformed through this matrix
|
|
*/
|
|
apply(pos, newPos) {
|
|
newPos = newPos || new Point();
|
|
const x = pos.x;
|
|
const y = pos.y;
|
|
newPos.x = this.a * x + this.c * y + this.tx;
|
|
newPos.y = this.b * x + this.d * y + this.ty;
|
|
return newPos;
|
|
}
|
|
/**
|
|
* Get a new position with the inverse of the current transformation applied.
|
|
* Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input)
|
|
* @param pos - The origin
|
|
* @param {Point} [newPos] - The point that the new position is assigned to (allowed to be same as input)
|
|
* @returns {Point} The new point, inverse-transformed through this matrix
|
|
*/
|
|
applyInverse(pos, newPos) {
|
|
newPos = newPos || new Point();
|
|
const a = this.a;
|
|
const b = this.b;
|
|
const c = this.c;
|
|
const d = this.d;
|
|
const tx = this.tx;
|
|
const ty = this.ty;
|
|
const id = 1 / (a * d + c * -b);
|
|
const x = pos.x;
|
|
const y = pos.y;
|
|
newPos.x = d * id * x + -c * id * y + (ty * c - tx * d) * id;
|
|
newPos.y = a * id * y + -b * id * x + (-ty * a + tx * b) * id;
|
|
return newPos;
|
|
}
|
|
/**
|
|
* Translates the matrix on the x and y.
|
|
* @param x - How much to translate x by
|
|
* @param y - How much to translate y by
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
translate(x, y) {
|
|
this.tx += x;
|
|
this.ty += y;
|
|
return this;
|
|
}
|
|
/**
|
|
* Applies a scale transformation to the matrix.
|
|
* @param x - The amount to scale horizontally
|
|
* @param y - The amount to scale vertically
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
scale(x, y) {
|
|
this.a *= x;
|
|
this.d *= y;
|
|
this.c *= x;
|
|
this.b *= y;
|
|
this.tx *= x;
|
|
this.ty *= y;
|
|
return this;
|
|
}
|
|
/**
|
|
* Applies a rotation transformation to the matrix.
|
|
* @param angle - The angle in radians.
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
rotate(angle) {
|
|
const cos = Math.cos(angle);
|
|
const sin = Math.sin(angle);
|
|
const a1 = this.a;
|
|
const c1 = this.c;
|
|
const tx1 = this.tx;
|
|
this.a = a1 * cos - this.b * sin;
|
|
this.b = a1 * sin + this.b * cos;
|
|
this.c = c1 * cos - this.d * sin;
|
|
this.d = c1 * sin + this.d * cos;
|
|
this.tx = tx1 * cos - this.ty * sin;
|
|
this.ty = tx1 * sin + this.ty * cos;
|
|
return this;
|
|
}
|
|
/**
|
|
* Appends the given Matrix to this Matrix.
|
|
* @param matrix - The matrix to append.
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
append(matrix) {
|
|
const a1 = this.a;
|
|
const b1 = this.b;
|
|
const c1 = this.c;
|
|
const d1 = this.d;
|
|
this.a = matrix.a * a1 + matrix.b * c1;
|
|
this.b = matrix.a * b1 + matrix.b * d1;
|
|
this.c = matrix.c * a1 + matrix.d * c1;
|
|
this.d = matrix.c * b1 + matrix.d * d1;
|
|
this.tx = matrix.tx * a1 + matrix.ty * c1 + this.tx;
|
|
this.ty = matrix.tx * b1 + matrix.ty * d1 + this.ty;
|
|
return this;
|
|
}
|
|
/**
|
|
* Appends two matrix's and sets the result to this matrix. AB = A * B
|
|
* @param a - The matrix to append.
|
|
* @param b - The matrix to append.
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
appendFrom(a, b) {
|
|
const a1 = a.a;
|
|
const b1 = a.b;
|
|
const c1 = a.c;
|
|
const d1 = a.d;
|
|
const tx = a.tx;
|
|
const ty = a.ty;
|
|
const a2 = b.a;
|
|
const b2 = b.b;
|
|
const c2 = b.c;
|
|
const d2 = b.d;
|
|
this.a = a1 * a2 + b1 * c2;
|
|
this.b = a1 * b2 + b1 * d2;
|
|
this.c = c1 * a2 + d1 * c2;
|
|
this.d = c1 * b2 + d1 * d2;
|
|
this.tx = tx * a2 + ty * c2 + b.tx;
|
|
this.ty = tx * b2 + ty * d2 + b.ty;
|
|
return this;
|
|
}
|
|
/**
|
|
* Sets the matrix based on all the available properties
|
|
* @param x - Position on the x axis
|
|
* @param y - Position on the y axis
|
|
* @param pivotX - Pivot on the x axis
|
|
* @param pivotY - Pivot on the y axis
|
|
* @param scaleX - Scale on the x axis
|
|
* @param scaleY - Scale on the y axis
|
|
* @param rotation - Rotation in radians
|
|
* @param skewX - Skew on the x axis
|
|
* @param skewY - Skew on the y axis
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
setTransform(x, y, pivotX, pivotY, scaleX, scaleY, rotation, skewX, skewY) {
|
|
this.a = Math.cos(rotation + skewY) * scaleX;
|
|
this.b = Math.sin(rotation + skewY) * scaleX;
|
|
this.c = -Math.sin(rotation - skewX) * scaleY;
|
|
this.d = Math.cos(rotation - skewX) * scaleY;
|
|
this.tx = x - (pivotX * this.a + pivotY * this.c);
|
|
this.ty = y - (pivotX * this.b + pivotY * this.d);
|
|
return this;
|
|
}
|
|
/**
|
|
* Prepends the given Matrix to this Matrix.
|
|
* @param matrix - The matrix to prepend
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
prepend(matrix) {
|
|
const tx1 = this.tx;
|
|
if (matrix.a !== 1 || matrix.b !== 0 || matrix.c !== 0 || matrix.d !== 1) {
|
|
const a1 = this.a;
|
|
const c1 = this.c;
|
|
this.a = a1 * matrix.a + this.b * matrix.c;
|
|
this.b = a1 * matrix.b + this.b * matrix.d;
|
|
this.c = c1 * matrix.a + this.d * matrix.c;
|
|
this.d = c1 * matrix.b + this.d * matrix.d;
|
|
}
|
|
this.tx = tx1 * matrix.a + this.ty * matrix.c + matrix.tx;
|
|
this.ty = tx1 * matrix.b + this.ty * matrix.d + matrix.ty;
|
|
return this;
|
|
}
|
|
/**
|
|
* Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform.
|
|
* @param transform - The transform to apply the properties to.
|
|
* @returns The transform with the newly applied properties
|
|
*/
|
|
decompose(transform) {
|
|
const a = this.a;
|
|
const b = this.b;
|
|
const c = this.c;
|
|
const d = this.d;
|
|
const pivot = transform.pivot;
|
|
const skewX = -Math.atan2(-c, d);
|
|
const skewY = Math.atan2(b, a);
|
|
const delta = Math.abs(skewX + skewY);
|
|
if (delta < 1e-5 || Math.abs(PI_2 - delta) < 1e-5) {
|
|
transform.rotation = skewY;
|
|
transform.skew.x = transform.skew.y = 0;
|
|
} else {
|
|
transform.rotation = 0;
|
|
transform.skew.x = skewX;
|
|
transform.skew.y = skewY;
|
|
}
|
|
transform.scale.x = Math.sqrt(a * a + b * b);
|
|
transform.scale.y = Math.sqrt(c * c + d * d);
|
|
transform.position.x = this.tx + (pivot.x * a + pivot.y * c);
|
|
transform.position.y = this.ty + (pivot.x * b + pivot.y * d);
|
|
return transform;
|
|
}
|
|
/**
|
|
* Inverts this matrix
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
invert() {
|
|
const a1 = this.a;
|
|
const b1 = this.b;
|
|
const c1 = this.c;
|
|
const d1 = this.d;
|
|
const tx1 = this.tx;
|
|
const n = a1 * d1 - b1 * c1;
|
|
this.a = d1 / n;
|
|
this.b = -b1 / n;
|
|
this.c = -c1 / n;
|
|
this.d = a1 / n;
|
|
this.tx = (c1 * this.ty - d1 * tx1) / n;
|
|
this.ty = -(a1 * this.ty - b1 * tx1) / n;
|
|
return this;
|
|
}
|
|
/** Checks if this matrix is an identity matrix */
|
|
isIdentity() {
|
|
return this.a === 1 && this.b === 0 && this.c === 0 && this.d === 1 && this.tx === 0 && this.ty === 0;
|
|
}
|
|
/**
|
|
* Resets this Matrix to an identity (default) matrix.
|
|
* @returns This matrix. Good for chaining method calls.
|
|
*/
|
|
identity() {
|
|
this.a = 1;
|
|
this.b = 0;
|
|
this.c = 0;
|
|
this.d = 1;
|
|
this.tx = 0;
|
|
this.ty = 0;
|
|
return this;
|
|
}
|
|
/**
|
|
* Creates a new Matrix object with the same values as this one.
|
|
* @returns A copy of this matrix. Good for chaining method calls.
|
|
*/
|
|
clone() {
|
|
const matrix = new Matrix();
|
|
matrix.a = this.a;
|
|
matrix.b = this.b;
|
|
matrix.c = this.c;
|
|
matrix.d = this.d;
|
|
matrix.tx = this.tx;
|
|
matrix.ty = this.ty;
|
|
return matrix;
|
|
}
|
|
/**
|
|
* Changes the values of the given matrix to be the same as the ones in this matrix
|
|
* @param matrix - The matrix to copy to.
|
|
* @returns The matrix given in parameter with its values updated.
|
|
*/
|
|
copyTo(matrix) {
|
|
matrix.a = this.a;
|
|
matrix.b = this.b;
|
|
matrix.c = this.c;
|
|
matrix.d = this.d;
|
|
matrix.tx = this.tx;
|
|
matrix.ty = this.ty;
|
|
return matrix;
|
|
}
|
|
/**
|
|
* Changes the values of the matrix to be the same as the ones in given matrix
|
|
* @param matrix - The matrix to copy from.
|
|
* @returns this
|
|
*/
|
|
copyFrom(matrix) {
|
|
this.a = matrix.a;
|
|
this.b = matrix.b;
|
|
this.c = matrix.c;
|
|
this.d = matrix.d;
|
|
this.tx = matrix.tx;
|
|
this.ty = matrix.ty;
|
|
return this;
|
|
}
|
|
/**
|
|
* check to see if two matrices are the same
|
|
* @param matrix - The matrix to compare to.
|
|
*/
|
|
equals(matrix) {
|
|
return matrix.a === this.a && matrix.b === this.b && matrix.c === this.c && matrix.d === this.d && matrix.tx === this.tx && matrix.ty === this.ty;
|
|
}
|
|
toString() {
|
|
return `[pixi.js:Matrix a=${this.a} b=${this.b} c=${this.c} d=${this.d} tx=${this.tx} ty=${this.ty}]`;
|
|
}
|
|
/**
|
|
* A default (identity) matrix.
|
|
*
|
|
* This is a shared object, if you want to modify it consider creating a new `Matrix`
|
|
* @readonly
|
|
*/
|
|
static get IDENTITY() {
|
|
return identityMatrix$1.identity();
|
|
}
|
|
/**
|
|
* A static Matrix that can be used to avoid creating new objects.
|
|
* Will always ensure the matrix is reset to identity when requested.
|
|
* Use this object for fast but temporary calculations, as it may be mutated later on.
|
|
* This is a different object to the `IDENTITY` object and so can be modified without changing `IDENTITY`.
|
|
* @readonly
|
|
*/
|
|
static get shared() {
|
|
return tempMatrix$5.identity();
|
|
}
|
|
}
|
|
const tempMatrix$5 = new Matrix();
|
|
const identityMatrix$1 = new Matrix();
|
|
|
|
"use strict";
|
|
class ObservablePoint {
|
|
/**
|
|
* Creates a new `ObservablePoint`
|
|
* @param observer - Observer to pass to listen for change events.
|
|
* @param {number} [x=0] - position of the point on the x axis
|
|
* @param {number} [y=0] - position of the point on the y axis
|
|
*/
|
|
constructor(observer, x, y) {
|
|
this._x = x || 0;
|
|
this._y = y || 0;
|
|
this._observer = observer;
|
|
}
|
|
/**
|
|
* Creates a clone of this point.
|
|
* @param observer - Optional observer to pass to the new observable point.
|
|
* @returns a copy of this observable point
|
|
*/
|
|
clone(observer) {
|
|
return new ObservablePoint(observer != null ? observer : this._observer, this._x, this._y);
|
|
}
|
|
/**
|
|
* Sets the point to a new `x` and `y` position.
|
|
* If `y` is omitted, both `x` and `y` will be set to `x`.
|
|
* @param {number} [x=0] - position of the point on the x axis
|
|
* @param {number} [y=x] - position of the point on the y axis
|
|
* @returns The observable point instance itself
|
|
*/
|
|
set(x = 0, y = x) {
|
|
if (this._x !== x || this._y !== y) {
|
|
this._x = x;
|
|
this._y = y;
|
|
this._observer._onUpdate(this);
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies x and y from the given point (`p`)
|
|
* @param p - The point to copy from. Can be any of type that is or extends `PointData`
|
|
* @returns The observable point instance itself
|
|
*/
|
|
copyFrom(p) {
|
|
if (this._x !== p.x || this._y !== p.y) {
|
|
this._x = p.x;
|
|
this._y = p.y;
|
|
this._observer._onUpdate(this);
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies this point's x and y into that of the given point (`p`)
|
|
* @param p - The point to copy to. Can be any of type that is or extends `PointData`
|
|
* @returns The point (`p`) with values updated
|
|
*/
|
|
copyTo(p) {
|
|
p.set(this._x, this._y);
|
|
return p;
|
|
}
|
|
/**
|
|
* Accepts another point (`p`) and returns `true` if the given point is equal to this point
|
|
* @param p - The point to check
|
|
* @returns Returns `true` if both `x` and `y` are equal
|
|
*/
|
|
equals(p) {
|
|
return p.x === this._x && p.y === this._y;
|
|
}
|
|
toString() {
|
|
return `[pixi.js/math:ObservablePoint x=${0} y=${0} scope=${this._observer}]`;
|
|
}
|
|
/** Position of the observable point on the x axis. */
|
|
get x() {
|
|
return this._x;
|
|
}
|
|
set x(value) {
|
|
if (this._x !== value) {
|
|
this._x = value;
|
|
this._observer._onUpdate(this);
|
|
}
|
|
}
|
|
/** Position of the observable point on the y axis. */
|
|
get y() {
|
|
return this._y;
|
|
}
|
|
set y(value) {
|
|
if (this._y !== value) {
|
|
this._y = value;
|
|
this._observer._onUpdate(this);
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const uidCache = {
|
|
default: -1
|
|
};
|
|
function uid$1(name = "default") {
|
|
if (uidCache[name] === void 0) {
|
|
uidCache[name] = -1;
|
|
}
|
|
return ++uidCache[name];
|
|
}
|
|
function resetUids() {
|
|
for (const key in uidCache) {
|
|
delete uidCache[key];
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const warnings = {};
|
|
const v8_0_0 = "8.0.0";
|
|
const v8_3_4 = "8.3.4";
|
|
function deprecation(version, message, ignoreDepth = 3) {
|
|
if (warnings[message]) {
|
|
return;
|
|
}
|
|
let stack = new Error().stack;
|
|
if (typeof stack === "undefined") {
|
|
console.warn("PixiJS Deprecation Warning: ", `${message}
|
|
Deprecated since v${version}`);
|
|
} else {
|
|
stack = stack.split("\n").splice(ignoreDepth).join("\n");
|
|
if (console.groupCollapsed) {
|
|
console.groupCollapsed(
|
|
"%cPixiJS Deprecation Warning: %c%s",
|
|
"color:#614108;background:#fffbe6",
|
|
"font-weight:normal;color:#614108;background:#fffbe6",
|
|
`${message}
|
|
Deprecated since v${version}`
|
|
);
|
|
console.warn(stack);
|
|
console.groupEnd();
|
|
} else {
|
|
console.warn("PixiJS Deprecation Warning: ", `${message}
|
|
Deprecated since v${version}`);
|
|
console.warn(stack);
|
|
}
|
|
}
|
|
warnings[message] = true;
|
|
}
|
|
|
|
"use strict";
|
|
class Pool {
|
|
/**
|
|
* Constructs a new Pool.
|
|
* @param ClassType - The constructor of the items in the pool.
|
|
* @param {number} [initialSize] - The initial size of the pool.
|
|
*/
|
|
constructor(ClassType, initialSize) {
|
|
this._pool = [];
|
|
this._count = 0;
|
|
this._index = 0;
|
|
this._classType = ClassType;
|
|
if (initialSize) {
|
|
this.prepopulate(initialSize);
|
|
}
|
|
}
|
|
/**
|
|
* Prepopulates the pool with a given number of items.
|
|
* @param total - The number of items to add to the pool.
|
|
*/
|
|
prepopulate(total) {
|
|
for (let i = 0; i < total; i++) {
|
|
this._pool[this._index++] = new this._classType();
|
|
}
|
|
this._count += total;
|
|
}
|
|
/**
|
|
* Gets an item from the pool. Calls the item's `init` method if it exists.
|
|
* If there are no items left in the pool, a new one will be created.
|
|
* @param {unknown} [data] - Optional data to pass to the item's constructor.
|
|
* @returns {T} The item from the pool.
|
|
*/
|
|
get(data) {
|
|
var _a;
|
|
let item;
|
|
if (this._index > 0) {
|
|
item = this._pool[--this._index];
|
|
} else {
|
|
item = new this._classType();
|
|
}
|
|
(_a = item.init) == null ? void 0 : _a.call(item, data);
|
|
return item;
|
|
}
|
|
/**
|
|
* Returns an item to the pool. Calls the item's `reset` method if it exists.
|
|
* @param {T} item - The item to return to the pool.
|
|
*/
|
|
return(item) {
|
|
var _a;
|
|
(_a = item.reset) == null ? void 0 : _a.call(item);
|
|
this._pool[this._index++] = item;
|
|
}
|
|
/**
|
|
* Gets the number of items in the pool.
|
|
* @readonly
|
|
* @member {number}
|
|
*/
|
|
get totalSize() {
|
|
return this._count;
|
|
}
|
|
/**
|
|
* Gets the number of items in the pool that are free to use without needing to create more.
|
|
* @readonly
|
|
* @member {number}
|
|
*/
|
|
get totalFree() {
|
|
return this._index;
|
|
}
|
|
/**
|
|
* Gets the number of items in the pool that are currently in use.
|
|
* @readonly
|
|
* @member {number}
|
|
*/
|
|
get totalUsed() {
|
|
return this._count - this._index;
|
|
}
|
|
/** clears the pool - mainly used for debugging! */
|
|
clear() {
|
|
this._pool.length = 0;
|
|
this._index = 0;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class PoolGroupClass {
|
|
constructor() {
|
|
/**
|
|
* A map to store the pools by their class type.
|
|
* @private
|
|
*/
|
|
this._poolsByClass = /* @__PURE__ */ new Map();
|
|
}
|
|
/**
|
|
* Prepopulates a specific pool with a given number of items.
|
|
* @template T The type of items in the pool. Must extend PoolItem.
|
|
* @param {PoolItemConstructor<T>} Class - The constructor of the items in the pool.
|
|
* @param {number} total - The number of items to add to the pool.
|
|
*/
|
|
prepopulate(Class, total) {
|
|
const classPool = this.getPool(Class);
|
|
classPool.prepopulate(total);
|
|
}
|
|
/**
|
|
* Gets an item from a specific pool.
|
|
* @template T The type of items in the pool. Must extend PoolItem.
|
|
* @param {PoolItemConstructor<T>} Class - The constructor of the items in the pool.
|
|
* @param {unknown} [data] - Optional data to pass to the item's constructor.
|
|
* @returns {T} The item from the pool.
|
|
*/
|
|
get(Class, data) {
|
|
const pool = this.getPool(Class);
|
|
return pool.get(data);
|
|
}
|
|
/**
|
|
* Returns an item to its respective pool.
|
|
* @param {PoolItem} item - The item to return to the pool.
|
|
*/
|
|
return(item) {
|
|
const pool = this.getPool(item.constructor);
|
|
pool.return(item);
|
|
}
|
|
/**
|
|
* Gets a specific pool based on the class type.
|
|
* @template T The type of items in the pool. Must extend PoolItem.
|
|
* @param {PoolItemConstructor<T>} ClassType - The constructor of the items in the pool.
|
|
* @returns {Pool<T>} The pool of the given class type.
|
|
*/
|
|
getPool(ClassType) {
|
|
if (!this._poolsByClass.has(ClassType)) {
|
|
this._poolsByClass.set(ClassType, new Pool(ClassType));
|
|
}
|
|
return this._poolsByClass.get(ClassType);
|
|
}
|
|
/** gets the usage stats of each pool in the system */
|
|
stats() {
|
|
const stats = {};
|
|
this._poolsByClass.forEach((pool) => {
|
|
const name = stats[pool._classType.name] ? pool._classType.name + pool._classType.ID : pool._classType.name;
|
|
stats[name] = {
|
|
free: pool.totalFree,
|
|
used: pool.totalUsed,
|
|
size: pool.totalSize
|
|
};
|
|
});
|
|
return stats;
|
|
}
|
|
}
|
|
const BigPool = new PoolGroupClass();
|
|
|
|
"use strict";
|
|
function removeItems(arr, startIdx, removeCount) {
|
|
const length = arr.length;
|
|
let i;
|
|
if (startIdx >= length || removeCount === 0) {
|
|
return;
|
|
}
|
|
removeCount = startIdx + removeCount > length ? length - startIdx : removeCount;
|
|
const len = length - removeCount;
|
|
for (i = startIdx; i < len; ++i) {
|
|
arr[i] = arr[i + removeCount];
|
|
}
|
|
arr.length = len;
|
|
}
|
|
|
|
"use strict";
|
|
const childrenHelperMixin = {
|
|
allowChildren: true,
|
|
/**
|
|
* Removes all children from this container that are within the begin and end indexes.
|
|
* @param beginIndex - The beginning position.
|
|
* @param endIndex - The ending position. Default value is size of the container.
|
|
* @returns - List of removed children
|
|
* @memberof scene.Container#
|
|
*/
|
|
removeChildren(beginIndex = 0, endIndex) {
|
|
const end = endIndex != null ? endIndex : this.children.length;
|
|
const range = end - beginIndex;
|
|
const removed = [];
|
|
if (range > 0 && range <= end) {
|
|
for (let i = end - 1; i >= beginIndex; i--) {
|
|
const child = this.children[i];
|
|
if (!child)
|
|
continue;
|
|
removed.push(child);
|
|
child.parent = null;
|
|
}
|
|
removeItems(this.children, beginIndex, end);
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.removeChildren(removed);
|
|
}
|
|
for (let i = 0; i < removed.length; ++i) {
|
|
this.emit("childRemoved", removed[i], this, i);
|
|
removed[i].emit("removed", this);
|
|
}
|
|
return removed;
|
|
} else if (range === 0 && this.children.length === 0) {
|
|
return removed;
|
|
}
|
|
throw new RangeError("removeChildren: numeric values are outside the acceptable range.");
|
|
},
|
|
/**
|
|
* Removes a child from the specified index position.
|
|
* @param index - The index to get the child from
|
|
* @returns The child that was removed.
|
|
* @memberof scene.Container#
|
|
*/
|
|
removeChildAt(index) {
|
|
const child = this.getChildAt(index);
|
|
return this.removeChild(child);
|
|
},
|
|
/**
|
|
* Returns the child at the specified index
|
|
* @param index - The index to get the child at
|
|
* @returns - The child at the given index, if any.
|
|
* @memberof scene.Container#
|
|
*/
|
|
getChildAt(index) {
|
|
if (index < 0 || index >= this.children.length) {
|
|
throw new Error(`getChildAt: Index (${index}) does not exist.`);
|
|
}
|
|
return this.children[index];
|
|
},
|
|
/**
|
|
* Changes the position of an existing child in the container container
|
|
* @param child - The child Container instance for which you want to change the index number
|
|
* @param index - The resulting index number for the child container
|
|
* @memberof scene.Container#
|
|
*/
|
|
setChildIndex(child, index) {
|
|
if (index < 0 || index >= this.children.length) {
|
|
throw new Error(`The index ${index} supplied is out of bounds ${this.children.length}`);
|
|
}
|
|
this.getChildIndex(child);
|
|
this.addChildAt(child, index);
|
|
},
|
|
/**
|
|
* Returns the index position of a child Container instance
|
|
* @param child - The Container instance to identify
|
|
* @returns - The index position of the child container to identify
|
|
* @memberof scene.Container#
|
|
*/
|
|
getChildIndex(child) {
|
|
const index = this.children.indexOf(child);
|
|
if (index === -1) {
|
|
throw new Error("The supplied Container must be a child of the caller");
|
|
}
|
|
return index;
|
|
},
|
|
/**
|
|
* Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown.
|
|
* If the child is already in this container, it will be moved to the specified index.
|
|
* @param {Container} child - The child to add.
|
|
* @param {number} index - The absolute index where the child will be positioned at the end of the operation.
|
|
* @returns {Container} The child that was added.
|
|
* @memberof scene.Container#
|
|
*/
|
|
addChildAt(child, index) {
|
|
if (!this.allowChildren) {
|
|
deprecation(v8_0_0, "addChildAt: Only Containers will be allowed to add children in v8.0.0");
|
|
}
|
|
const { children } = this;
|
|
if (index < 0 || index > children.length) {
|
|
throw new Error(`${child}addChildAt: The index ${index} supplied is out of bounds ${children.length}`);
|
|
}
|
|
if (child.parent) {
|
|
const currentIndex = child.parent.children.indexOf(child);
|
|
if (child.parent === this && currentIndex === index) {
|
|
return child;
|
|
}
|
|
if (currentIndex !== -1) {
|
|
child.parent.children.splice(currentIndex, 1);
|
|
}
|
|
}
|
|
if (index === children.length) {
|
|
children.push(child);
|
|
} else {
|
|
children.splice(index, 0, child);
|
|
}
|
|
child.parent = this;
|
|
child.didChange = true;
|
|
child.didViewUpdate = false;
|
|
child._updateFlags = 15;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.addChild(child);
|
|
}
|
|
if (this.sortableChildren)
|
|
this.sortDirty = true;
|
|
this.emit("childAdded", child, this, index);
|
|
child.emit("added", this);
|
|
return child;
|
|
},
|
|
/**
|
|
* Swaps the position of 2 Containers within this container.
|
|
* @param child - First container to swap
|
|
* @param child2 - Second container to swap
|
|
*/
|
|
swapChildren(child, child2) {
|
|
if (child === child2) {
|
|
return;
|
|
}
|
|
const index1 = this.getChildIndex(child);
|
|
const index2 = this.getChildIndex(child2);
|
|
this.children[index1] = child2;
|
|
this.children[index2] = child;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.structureDidChange = true;
|
|
}
|
|
this._didContainerChangeTick++;
|
|
},
|
|
/**
|
|
* Remove the Container from its parent Container. If the Container has no parent, do nothing.
|
|
* @memberof scene.Container#
|
|
*/
|
|
removeFromParent() {
|
|
var _a;
|
|
(_a = this.parent) == null ? void 0 : _a.removeChild(this);
|
|
},
|
|
/**
|
|
* Reparent the child to this container, keeping the same worldTransform.
|
|
* @param child - The child to reparent
|
|
* @returns The first child that was reparented.
|
|
* @memberof scene.Container#
|
|
*/
|
|
reparentChild(...child) {
|
|
if (child.length === 1) {
|
|
return this.reparentChildAt(child[0], this.children.length);
|
|
}
|
|
child.forEach((c) => this.reparentChildAt(c, this.children.length));
|
|
return child[0];
|
|
},
|
|
/**
|
|
* Reparent the child to this container at the specified index, keeping the same worldTransform.
|
|
* @param child - The child to reparent
|
|
* @param index - The index to reparent the child to
|
|
* @memberof scene.Container#
|
|
*/
|
|
reparentChildAt(child, index) {
|
|
if (child.parent === this) {
|
|
this.setChildIndex(child, index);
|
|
return child;
|
|
}
|
|
const childMat = child.worldTransform.clone();
|
|
child.removeFromParent();
|
|
this.addChildAt(child, index);
|
|
const newMatrix = this.worldTransform.clone();
|
|
newMatrix.invert();
|
|
childMat.prepend(newMatrix);
|
|
child.setFromMatrix(childMat);
|
|
return child;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
class FilterEffect {
|
|
constructor() {
|
|
/** the pipe that knows how to handle this effect */
|
|
this.pipe = "filter";
|
|
/** the priority of this effect */
|
|
this.priority = 1;
|
|
}
|
|
destroy() {
|
|
for (let i = 0; i < this.filters.length; i++) {
|
|
this.filters[i].destroy();
|
|
}
|
|
this.filters = null;
|
|
this.filterArea = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class MaskEffectManagerClass {
|
|
constructor() {
|
|
/**
|
|
* @private
|
|
*/
|
|
this._effectClasses = [];
|
|
this._tests = [];
|
|
this._initialized = false;
|
|
}
|
|
init() {
|
|
if (this._initialized)
|
|
return;
|
|
this._initialized = true;
|
|
this._effectClasses.forEach((test) => {
|
|
this.add({
|
|
test: test.test,
|
|
maskClass: test
|
|
});
|
|
});
|
|
}
|
|
add(test) {
|
|
this._tests.push(test);
|
|
}
|
|
getMaskEffect(item) {
|
|
if (!this._initialized)
|
|
this.init();
|
|
for (let i = 0; i < this._tests.length; i++) {
|
|
const test = this._tests[i];
|
|
if (test.test(item)) {
|
|
return BigPool.get(test.maskClass, item);
|
|
}
|
|
}
|
|
return item;
|
|
}
|
|
returnMaskEffect(effect) {
|
|
BigPool.return(effect);
|
|
}
|
|
}
|
|
const MaskEffectManager = new MaskEffectManagerClass();
|
|
extensions.handleByList(ExtensionType.MaskEffect, MaskEffectManager._effectClasses);
|
|
|
|
"use strict";
|
|
const effectsMixin = {
|
|
_maskEffect: null,
|
|
_filterEffect: null,
|
|
/**
|
|
* @todo Needs docs.
|
|
* @memberof scene.Container#
|
|
* @type {Array<Effect>}
|
|
*/
|
|
effects: [],
|
|
/**
|
|
* @todo Needs docs.
|
|
* @param effect - The effect to add.
|
|
* @memberof scene.Container#
|
|
* @ignore
|
|
*/
|
|
addEffect(effect) {
|
|
const index = this.effects.indexOf(effect);
|
|
if (index !== -1)
|
|
return;
|
|
this.effects.push(effect);
|
|
this.effects.sort((a, b) => a.priority - b.priority);
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.structureDidChange = true;
|
|
}
|
|
this._updateIsSimple();
|
|
},
|
|
/**
|
|
* @todo Needs docs.
|
|
* @param effect - The effect to remove.
|
|
* @memberof scene.Container#
|
|
* @ignore
|
|
*/
|
|
removeEffect(effect) {
|
|
const index = this.effects.indexOf(effect);
|
|
if (index === -1)
|
|
return;
|
|
this.effects.splice(index, 1);
|
|
if (this.parentRenderGroup) {
|
|
this.parentRenderGroup.structureDidChange = true;
|
|
}
|
|
this._updateIsSimple();
|
|
},
|
|
set mask(value) {
|
|
const effect = this._maskEffect;
|
|
if ((effect == null ? void 0 : effect.mask) === value)
|
|
return;
|
|
if (effect) {
|
|
this.removeEffect(effect);
|
|
MaskEffectManager.returnMaskEffect(effect);
|
|
this._maskEffect = null;
|
|
}
|
|
if (value === null || value === void 0)
|
|
return;
|
|
this._maskEffect = MaskEffectManager.getMaskEffect(value);
|
|
this.addEffect(this._maskEffect);
|
|
},
|
|
/**
|
|
* Sets a mask for the displayObject. A mask is an object that limits the visibility of an
|
|
* object to the shape of the mask applied to it. In PixiJS a regular mask must be a
|
|
* {@link Graphics} or a {@link Sprite} object. This allows for much faster masking in canvas as it
|
|
* utilities shape clipping. Furthermore, a mask of an object must be in the subtree of its parent.
|
|
* Otherwise, `getLocalBounds` may calculate incorrect bounds, which makes the container's width and height wrong.
|
|
* To remove a mask, set this property to `null`.
|
|
*
|
|
* For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask.
|
|
* @example
|
|
* import { Graphics, Sprite } from 'pixi.js';
|
|
*
|
|
* const graphics = new Graphics();
|
|
* graphics.beginFill(0xFF3300);
|
|
* graphics.drawRect(50, 250, 100, 100);
|
|
* graphics.endFill();
|
|
*
|
|
* const sprite = new Sprite(texture);
|
|
* sprite.mask = graphics;
|
|
* @memberof scene.Container#
|
|
*/
|
|
get mask() {
|
|
var _a;
|
|
return (_a = this._maskEffect) == null ? void 0 : _a.mask;
|
|
},
|
|
set filters(value) {
|
|
var _a;
|
|
if (!Array.isArray(value) && value)
|
|
value = [value];
|
|
const effect = this._filterEffect || (this._filterEffect = new FilterEffect());
|
|
value = value;
|
|
const hasFilters = (value == null ? void 0 : value.length) > 0;
|
|
const hadFilters = ((_a = effect.filters) == null ? void 0 : _a.length) > 0;
|
|
const didChange = hasFilters !== hadFilters;
|
|
value = Array.isArray(value) ? value.slice(0) : value;
|
|
effect.filters = Object.freeze(value);
|
|
if (didChange) {
|
|
if (hasFilters) {
|
|
this.addEffect(effect);
|
|
} else {
|
|
this.removeEffect(effect);
|
|
effect.filters = value != null ? value : null;
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* Sets the filters for the displayObject.
|
|
* IMPORTANT: This is a WebGL only feature and will be ignored by the canvas renderer.
|
|
* To remove filters simply set this property to `'null'`.
|
|
* @memberof scene.Container#
|
|
*/
|
|
get filters() {
|
|
var _a;
|
|
return (_a = this._filterEffect) == null ? void 0 : _a.filters;
|
|
},
|
|
set filterArea(value) {
|
|
this._filterEffect || (this._filterEffect = new FilterEffect());
|
|
this._filterEffect.filterArea = value;
|
|
},
|
|
/**
|
|
* The area the filter is applied to. This is used as more of an optimization
|
|
* rather than figuring out the dimensions of the displayObject each frame you can set this rectangle.
|
|
*
|
|
* Also works as an interaction mask.
|
|
* @memberof scene.Container#
|
|
*/
|
|
get filterArea() {
|
|
var _a;
|
|
return (_a = this._filterEffect) == null ? void 0 : _a.filterArea;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const findMixin = {
|
|
/**
|
|
* The instance label of the object.
|
|
* @memberof scene.Container#
|
|
* @member {string} label
|
|
*/
|
|
label: null,
|
|
/**
|
|
* The instance name of the object.
|
|
* @deprecated since 8.0.0
|
|
* @see scene.Container#label
|
|
* @member {string} name
|
|
* @memberof scene.Container#
|
|
*/
|
|
get name() {
|
|
deprecation(v8_0_0, "Container.name property has been removed, use Container.label instead");
|
|
return this.label;
|
|
},
|
|
set name(value) {
|
|
deprecation(v8_0_0, "Container.name property has been removed, use Container.label instead");
|
|
this.label = value;
|
|
},
|
|
/**
|
|
* @method getChildByName
|
|
* @deprecated since 8.0.0
|
|
* @param {string} name - Instance name.
|
|
* @param {boolean}[deep=false] - Whether to search recursively
|
|
* @returns {Container} The child with the specified name.
|
|
* @see scene.Container#getChildByLabel
|
|
* @memberof scene.Container#
|
|
*/
|
|
getChildByName(name, deep = false) {
|
|
return this.getChildByLabel(name, deep);
|
|
},
|
|
/**
|
|
* Returns the first child in the container with the specified label.
|
|
*
|
|
* Recursive searches are done in a pre-order traversal.
|
|
* @memberof scene.Container#
|
|
* @param {string|RegExp} label - Instance label.
|
|
* @param {boolean}[deep=false] - Whether to search recursively
|
|
* @returns {Container} The child with the specified label.
|
|
*/
|
|
getChildByLabel(label, deep = false) {
|
|
const children = this.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
const child = children[i];
|
|
if (child.label === label || label instanceof RegExp && label.test(child.label))
|
|
return child;
|
|
}
|
|
if (deep) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
const child = children[i];
|
|
const found = child.getChildByLabel(label, true);
|
|
if (found) {
|
|
return found;
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
/**
|
|
* Returns all children in the container with the specified label.
|
|
* @memberof scene.Container#
|
|
* @param {string|RegExp} label - Instance label.
|
|
* @param {boolean}[deep=false] - Whether to search recursively
|
|
* @param {Container[]} [out=[]] - The array to store matching children in.
|
|
* @returns {Container[]} An array of children with the specified label.
|
|
*/
|
|
getChildrenByLabel(label, deep = false, out = []) {
|
|
const children = this.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
const child = children[i];
|
|
if (child.label === label || label instanceof RegExp && label.test(child.label)) {
|
|
out.push(child);
|
|
}
|
|
}
|
|
if (deep) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
children[i].getChildrenByLabel(label, true, out);
|
|
}
|
|
}
|
|
return out;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const tempPoints = [new Point(), new Point(), new Point(), new Point()];
|
|
class Rectangle {
|
|
/**
|
|
* @param x - The X coordinate of the upper-left corner of the rectangle
|
|
* @param y - The Y coordinate of the upper-left corner of the rectangle
|
|
* @param width - The overall width of the rectangle
|
|
* @param height - The overall height of the rectangle
|
|
*/
|
|
constructor(x = 0, y = 0, width = 0, height = 0) {
|
|
/**
|
|
* The type of the object, mainly used to avoid `instanceof` checks
|
|
* @default 'rectangle'
|
|
*/
|
|
this.type = "rectangle";
|
|
this.x = Number(x);
|
|
this.y = Number(y);
|
|
this.width = Number(width);
|
|
this.height = Number(height);
|
|
}
|
|
/** Returns the left edge of the rectangle. */
|
|
get left() {
|
|
return this.x;
|
|
}
|
|
/** Returns the right edge of the rectangle. */
|
|
get right() {
|
|
return this.x + this.width;
|
|
}
|
|
/** Returns the top edge of the rectangle. */
|
|
get top() {
|
|
return this.y;
|
|
}
|
|
/** Returns the bottom edge of the rectangle. */
|
|
get bottom() {
|
|
return this.y + this.height;
|
|
}
|
|
/** Determines whether the Rectangle is empty. */
|
|
isEmpty() {
|
|
return this.left === this.right || this.top === this.bottom;
|
|
}
|
|
/** A constant empty rectangle. This is a new object every time the property is accessed */
|
|
static get EMPTY() {
|
|
return new Rectangle(0, 0, 0, 0);
|
|
}
|
|
/**
|
|
* Creates a clone of this Rectangle
|
|
* @returns a copy of the rectangle
|
|
*/
|
|
clone() {
|
|
return new Rectangle(this.x, this.y, this.width, this.height);
|
|
}
|
|
/**
|
|
* Converts a Bounds object to a Rectangle object.
|
|
* @param bounds - The bounds to copy and convert to a rectangle.
|
|
* @returns Returns itself.
|
|
*/
|
|
copyFromBounds(bounds) {
|
|
this.x = bounds.minX;
|
|
this.y = bounds.minY;
|
|
this.width = bounds.maxX - bounds.minX;
|
|
this.height = bounds.maxY - bounds.minY;
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies another rectangle to this one.
|
|
* @param rectangle - The rectangle to copy from.
|
|
* @returns Returns itself.
|
|
*/
|
|
copyFrom(rectangle) {
|
|
this.x = rectangle.x;
|
|
this.y = rectangle.y;
|
|
this.width = rectangle.width;
|
|
this.height = rectangle.height;
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies this rectangle to another one.
|
|
* @param rectangle - The rectangle to copy to.
|
|
* @returns Returns given parameter.
|
|
*/
|
|
copyTo(rectangle) {
|
|
rectangle.copyFrom(this);
|
|
return rectangle;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this Rectangle
|
|
* @param x - The X coordinate of the point to test
|
|
* @param y - The Y coordinate of the point to test
|
|
* @returns Whether the x/y coordinates are within this Rectangle
|
|
*/
|
|
contains(x, y) {
|
|
if (this.width <= 0 || this.height <= 0) {
|
|
return false;
|
|
}
|
|
if (x >= this.x && x < this.x + this.width) {
|
|
if (y >= this.y && y < this.y + this.height) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this rectangle including the stroke.
|
|
* @param x - The X coordinate of the point to test
|
|
* @param y - The Y coordinate of the point to test
|
|
* @param strokeWidth - The width of the line to check
|
|
* @returns Whether the x/y coordinates are within this rectangle
|
|
*/
|
|
strokeContains(x, y, strokeWidth) {
|
|
const { width, height } = this;
|
|
if (width <= 0 || height <= 0)
|
|
return false;
|
|
const _x = this.x;
|
|
const _y = this.y;
|
|
const outerLeft = _x - strokeWidth / 2;
|
|
const outerRight = _x + width + strokeWidth / 2;
|
|
const outerTop = _y - strokeWidth / 2;
|
|
const outerBottom = _y + height + strokeWidth / 2;
|
|
const innerLeft = _x + strokeWidth / 2;
|
|
const innerRight = _x + width - strokeWidth / 2;
|
|
const innerTop = _y + strokeWidth / 2;
|
|
const innerBottom = _y + height - strokeWidth / 2;
|
|
return x >= outerLeft && x <= outerRight && y >= outerTop && y <= outerBottom && !(x > innerLeft && x < innerRight && y > innerTop && y < innerBottom);
|
|
}
|
|
/**
|
|
* Determines whether the `other` Rectangle transformed by `transform` intersects with `this` Rectangle object.
|
|
* Returns true only if the area of the intersection is >0, this means that Rectangles
|
|
* sharing a side are not overlapping. Another side effect is that an arealess rectangle
|
|
* (width or height equal to zero) can't intersect any other rectangle.
|
|
* @param {Rectangle} other - The Rectangle to intersect with `this`.
|
|
* @param {Matrix} transform - The transformation matrix of `other`.
|
|
* @returns {boolean} A value of `true` if the transformed `other` Rectangle intersects with `this`; otherwise `false`.
|
|
*/
|
|
intersects(other, transform) {
|
|
if (!transform) {
|
|
const x02 = this.x < other.x ? other.x : this.x;
|
|
const x12 = this.right > other.right ? other.right : this.right;
|
|
if (x12 <= x02) {
|
|
return false;
|
|
}
|
|
const y02 = this.y < other.y ? other.y : this.y;
|
|
const y12 = this.bottom > other.bottom ? other.bottom : this.bottom;
|
|
return y12 > y02;
|
|
}
|
|
const x0 = this.left;
|
|
const x1 = this.right;
|
|
const y0 = this.top;
|
|
const y1 = this.bottom;
|
|
if (x1 <= x0 || y1 <= y0) {
|
|
return false;
|
|
}
|
|
const lt = tempPoints[0].set(other.left, other.top);
|
|
const lb = tempPoints[1].set(other.left, other.bottom);
|
|
const rt = tempPoints[2].set(other.right, other.top);
|
|
const rb = tempPoints[3].set(other.right, other.bottom);
|
|
if (rt.x <= lt.x || lb.y <= lt.y) {
|
|
return false;
|
|
}
|
|
const s = Math.sign(transform.a * transform.d - transform.b * transform.c);
|
|
if (s === 0) {
|
|
return false;
|
|
}
|
|
transform.apply(lt, lt);
|
|
transform.apply(lb, lb);
|
|
transform.apply(rt, rt);
|
|
transform.apply(rb, rb);
|
|
if (Math.max(lt.x, lb.x, rt.x, rb.x) <= x0 || Math.min(lt.x, lb.x, rt.x, rb.x) >= x1 || Math.max(lt.y, lb.y, rt.y, rb.y) <= y0 || Math.min(lt.y, lb.y, rt.y, rb.y) >= y1) {
|
|
return false;
|
|
}
|
|
const nx = s * (lb.y - lt.y);
|
|
const ny = s * (lt.x - lb.x);
|
|
const n00 = nx * x0 + ny * y0;
|
|
const n10 = nx * x1 + ny * y0;
|
|
const n01 = nx * x0 + ny * y1;
|
|
const n11 = nx * x1 + ny * y1;
|
|
if (Math.max(n00, n10, n01, n11) <= nx * lt.x + ny * lt.y || Math.min(n00, n10, n01, n11) >= nx * rb.x + ny * rb.y) {
|
|
return false;
|
|
}
|
|
const mx = s * (lt.y - rt.y);
|
|
const my = s * (rt.x - lt.x);
|
|
const m00 = mx * x0 + my * y0;
|
|
const m10 = mx * x1 + my * y0;
|
|
const m01 = mx * x0 + my * y1;
|
|
const m11 = mx * x1 + my * y1;
|
|
if (Math.max(m00, m10, m01, m11) <= mx * lt.x + my * lt.y || Math.min(m00, m10, m01, m11) >= mx * rb.x + my * rb.y) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
/**
|
|
* Pads the rectangle making it grow in all directions.
|
|
* If paddingY is omitted, both paddingX and paddingY will be set to paddingX.
|
|
* @param paddingX - The horizontal padding amount.
|
|
* @param paddingY - The vertical padding amount.
|
|
* @returns Returns itself.
|
|
*/
|
|
pad(paddingX = 0, paddingY = paddingX) {
|
|
this.x -= paddingX;
|
|
this.y -= paddingY;
|
|
this.width += paddingX * 2;
|
|
this.height += paddingY * 2;
|
|
return this;
|
|
}
|
|
/**
|
|
* Fits this rectangle around the passed one.
|
|
* @param rectangle - The rectangle to fit.
|
|
* @returns Returns itself.
|
|
*/
|
|
fit(rectangle) {
|
|
const x1 = Math.max(this.x, rectangle.x);
|
|
const x2 = Math.min(this.x + this.width, rectangle.x + rectangle.width);
|
|
const y1 = Math.max(this.y, rectangle.y);
|
|
const y2 = Math.min(this.y + this.height, rectangle.y + rectangle.height);
|
|
this.x = x1;
|
|
this.width = Math.max(x2 - x1, 0);
|
|
this.y = y1;
|
|
this.height = Math.max(y2 - y1, 0);
|
|
return this;
|
|
}
|
|
/**
|
|
* Enlarges rectangle that way its corners lie on grid
|
|
* @param resolution - resolution
|
|
* @param eps - precision
|
|
* @returns Returns itself.
|
|
*/
|
|
ceil(resolution = 1, eps = 1e-3) {
|
|
const x2 = Math.ceil((this.x + this.width - eps) * resolution) / resolution;
|
|
const y2 = Math.ceil((this.y + this.height - eps) * resolution) / resolution;
|
|
this.x = Math.floor((this.x + eps) * resolution) / resolution;
|
|
this.y = Math.floor((this.y + eps) * resolution) / resolution;
|
|
this.width = x2 - this.x;
|
|
this.height = y2 - this.y;
|
|
return this;
|
|
}
|
|
/**
|
|
* Enlarges this rectangle to include the passed rectangle.
|
|
* @param rectangle - The rectangle to include.
|
|
* @returns Returns itself.
|
|
*/
|
|
enlarge(rectangle) {
|
|
const x1 = Math.min(this.x, rectangle.x);
|
|
const x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width);
|
|
const y1 = Math.min(this.y, rectangle.y);
|
|
const y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height);
|
|
this.x = x1;
|
|
this.width = x2 - x1;
|
|
this.y = y1;
|
|
this.height = y2 - y1;
|
|
return this;
|
|
}
|
|
/**
|
|
* Returns the framing rectangle of the rectangle as a Rectangle object
|
|
* @param out - optional rectangle to store the result
|
|
* @returns The framing rectangle
|
|
*/
|
|
getBounds(out) {
|
|
out = out || new Rectangle();
|
|
out.copyFrom(this);
|
|
return out;
|
|
}
|
|
toString() {
|
|
return `[pixi.js/math:Rectangle x=${this.x} y=${this.y} width=${this.width} height=${this.height}]`;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const defaultMatrix = new Matrix();
|
|
class Bounds {
|
|
constructor(minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity) {
|
|
/** @default Infinity */
|
|
this.minX = Infinity;
|
|
/** @default Infinity */
|
|
this.minY = Infinity;
|
|
/** @default -Infinity */
|
|
this.maxX = -Infinity;
|
|
/** @default -Infinity */
|
|
this.maxY = -Infinity;
|
|
this.matrix = defaultMatrix;
|
|
this.minX = minX;
|
|
this.minY = minY;
|
|
this.maxX = maxX;
|
|
this.maxY = maxY;
|
|
}
|
|
/**
|
|
* Checks if bounds are empty.
|
|
* @returns - True if empty.
|
|
*/
|
|
isEmpty() {
|
|
return this.minX > this.maxX || this.minY > this.maxY;
|
|
}
|
|
/** The bounding rectangle of the bounds. */
|
|
get rectangle() {
|
|
if (!this._rectangle) {
|
|
this._rectangle = new Rectangle();
|
|
}
|
|
const rectangle = this._rectangle;
|
|
if (this.minX > this.maxX || this.minY > this.maxY) {
|
|
rectangle.x = 0;
|
|
rectangle.y = 0;
|
|
rectangle.width = 0;
|
|
rectangle.height = 0;
|
|
} else {
|
|
rectangle.copyFromBounds(this);
|
|
}
|
|
return rectangle;
|
|
}
|
|
/** Clears the bounds and resets. */
|
|
clear() {
|
|
this.minX = Infinity;
|
|
this.minY = Infinity;
|
|
this.maxX = -Infinity;
|
|
this.maxY = -Infinity;
|
|
this.matrix = defaultMatrix;
|
|
return this;
|
|
}
|
|
/**
|
|
* Sets the bounds.
|
|
* @param x0 - left X of frame
|
|
* @param y0 - top Y of frame
|
|
* @param x1 - right X of frame
|
|
* @param y1 - bottom Y of frame
|
|
*/
|
|
set(x0, y0, x1, y1) {
|
|
this.minX = x0;
|
|
this.minY = y0;
|
|
this.maxX = x1;
|
|
this.maxY = y1;
|
|
}
|
|
/**
|
|
* Adds sprite frame
|
|
* @param x0 - left X of frame
|
|
* @param y0 - top Y of frame
|
|
* @param x1 - right X of frame
|
|
* @param y1 - bottom Y of frame
|
|
* @param matrix
|
|
*/
|
|
addFrame(x0, y0, x1, y1, matrix) {
|
|
matrix || (matrix = this.matrix);
|
|
const a = matrix.a;
|
|
const b = matrix.b;
|
|
const c = matrix.c;
|
|
const d = matrix.d;
|
|
const tx = matrix.tx;
|
|
const ty = matrix.ty;
|
|
let minX = this.minX;
|
|
let minY = this.minY;
|
|
let maxX = this.maxX;
|
|
let maxY = this.maxY;
|
|
let x = a * x0 + c * y0 + tx;
|
|
let y = b * x0 + d * y0 + ty;
|
|
if (x < minX)
|
|
minX = x;
|
|
if (y < minY)
|
|
minY = y;
|
|
if (x > maxX)
|
|
maxX = x;
|
|
if (y > maxY)
|
|
maxY = y;
|
|
x = a * x1 + c * y0 + tx;
|
|
y = b * x1 + d * y0 + ty;
|
|
if (x < minX)
|
|
minX = x;
|
|
if (y < minY)
|
|
minY = y;
|
|
if (x > maxX)
|
|
maxX = x;
|
|
if (y > maxY)
|
|
maxY = y;
|
|
x = a * x0 + c * y1 + tx;
|
|
y = b * x0 + d * y1 + ty;
|
|
if (x < minX)
|
|
minX = x;
|
|
if (y < minY)
|
|
minY = y;
|
|
if (x > maxX)
|
|
maxX = x;
|
|
if (y > maxY)
|
|
maxY = y;
|
|
x = a * x1 + c * y1 + tx;
|
|
y = b * x1 + d * y1 + ty;
|
|
if (x < minX)
|
|
minX = x;
|
|
if (y < minY)
|
|
minY = y;
|
|
if (x > maxX)
|
|
maxX = x;
|
|
if (y > maxY)
|
|
maxY = y;
|
|
this.minX = minX;
|
|
this.minY = minY;
|
|
this.maxX = maxX;
|
|
this.maxY = maxY;
|
|
}
|
|
/**
|
|
* Adds a rectangle to the bounds.
|
|
* @param rect - The rectangle to be added.
|
|
* @param matrix - The matrix to apply to the bounds.
|
|
*/
|
|
addRect(rect, matrix) {
|
|
this.addFrame(rect.x, rect.y, rect.x + rect.width, rect.y + rect.height, matrix);
|
|
}
|
|
/**
|
|
* Adds other {@link Bounds}.
|
|
* @param bounds - The Bounds to be added
|
|
* @param matrix
|
|
*/
|
|
addBounds(bounds, matrix) {
|
|
this.addFrame(bounds.minX, bounds.minY, bounds.maxX, bounds.maxY, matrix);
|
|
}
|
|
/**
|
|
* Adds other Bounds, masked with Bounds.
|
|
* @param mask - The Bounds to be added.
|
|
*/
|
|
addBoundsMask(mask) {
|
|
this.minX = this.minX > mask.minX ? this.minX : mask.minX;
|
|
this.minY = this.minY > mask.minY ? this.minY : mask.minY;
|
|
this.maxX = this.maxX < mask.maxX ? this.maxX : mask.maxX;
|
|
this.maxY = this.maxY < mask.maxY ? this.maxY : mask.maxY;
|
|
}
|
|
/**
|
|
* Adds other Bounds, multiplied with matrix.
|
|
* @param matrix - The matrix to apply to the bounds.
|
|
*/
|
|
applyMatrix(matrix) {
|
|
const minX = this.minX;
|
|
const minY = this.minY;
|
|
const maxX = this.maxX;
|
|
const maxY = this.maxY;
|
|
const { a, b, c, d, tx, ty } = matrix;
|
|
let x = a * minX + c * minY + tx;
|
|
let y = b * minX + d * minY + ty;
|
|
this.minX = x;
|
|
this.minY = y;
|
|
this.maxX = x;
|
|
this.maxY = y;
|
|
x = a * maxX + c * minY + tx;
|
|
y = b * maxX + d * minY + ty;
|
|
this.minX = x < this.minX ? x : this.minX;
|
|
this.minY = y < this.minY ? y : this.minY;
|
|
this.maxX = x > this.maxX ? x : this.maxX;
|
|
this.maxY = y > this.maxY ? y : this.maxY;
|
|
x = a * minX + c * maxY + tx;
|
|
y = b * minX + d * maxY + ty;
|
|
this.minX = x < this.minX ? x : this.minX;
|
|
this.minY = y < this.minY ? y : this.minY;
|
|
this.maxX = x > this.maxX ? x : this.maxX;
|
|
this.maxY = y > this.maxY ? y : this.maxY;
|
|
x = a * maxX + c * maxY + tx;
|
|
y = b * maxX + d * maxY + ty;
|
|
this.minX = x < this.minX ? x : this.minX;
|
|
this.minY = y < this.minY ? y : this.minY;
|
|
this.maxX = x > this.maxX ? x : this.maxX;
|
|
this.maxY = y > this.maxY ? y : this.maxY;
|
|
}
|
|
/**
|
|
* Resizes the bounds object to include the given rectangle.
|
|
* @param rect - The rectangle to be included.
|
|
*/
|
|
fit(rect) {
|
|
if (this.minX < rect.left)
|
|
this.minX = rect.left;
|
|
if (this.maxX > rect.right)
|
|
this.maxX = rect.right;
|
|
if (this.minY < rect.top)
|
|
this.minY = rect.top;
|
|
if (this.maxY > rect.bottom)
|
|
this.maxY = rect.bottom;
|
|
return this;
|
|
}
|
|
/**
|
|
* Resizes the bounds object to include the given bounds.
|
|
* @param left - The left value of the bounds.
|
|
* @param right - The right value of the bounds.
|
|
* @param top - The top value of the bounds.
|
|
* @param bottom - The bottom value of the bounds.
|
|
*/
|
|
fitBounds(left, right, top, bottom) {
|
|
if (this.minX < left)
|
|
this.minX = left;
|
|
if (this.maxX > right)
|
|
this.maxX = right;
|
|
if (this.minY < top)
|
|
this.minY = top;
|
|
if (this.maxY > bottom)
|
|
this.maxY = bottom;
|
|
return this;
|
|
}
|
|
/**
|
|
* Pads bounds object, making it grow in all directions.
|
|
* If paddingY is omitted, both paddingX and paddingY will be set to paddingX.
|
|
* @param paddingX - The horizontal padding amount.
|
|
* @param paddingY - The vertical padding amount.
|
|
*/
|
|
pad(paddingX, paddingY = paddingX) {
|
|
this.minX -= paddingX;
|
|
this.maxX += paddingX;
|
|
this.minY -= paddingY;
|
|
this.maxY += paddingY;
|
|
return this;
|
|
}
|
|
/** Ceils the bounds. */
|
|
ceil() {
|
|
this.minX = Math.floor(this.minX);
|
|
this.minY = Math.floor(this.minY);
|
|
this.maxX = Math.ceil(this.maxX);
|
|
this.maxY = Math.ceil(this.maxY);
|
|
return this;
|
|
}
|
|
/** Clones the bounds. */
|
|
clone() {
|
|
return new Bounds(this.minX, this.minY, this.maxX, this.maxY);
|
|
}
|
|
/**
|
|
* Scales the bounds by the given values
|
|
* @param x - The X value to scale by.
|
|
* @param y - The Y value to scale by.
|
|
*/
|
|
scale(x, y = x) {
|
|
this.minX *= x;
|
|
this.minY *= y;
|
|
this.maxX *= x;
|
|
this.maxY *= y;
|
|
return this;
|
|
}
|
|
/** the x value of the bounds. */
|
|
get x() {
|
|
return this.minX;
|
|
}
|
|
set x(value) {
|
|
const width = this.maxX - this.minX;
|
|
this.minX = value;
|
|
this.maxX = value + width;
|
|
}
|
|
/** the y value of the bounds. */
|
|
get y() {
|
|
return this.minY;
|
|
}
|
|
set y(value) {
|
|
const height = this.maxY - this.minY;
|
|
this.minY = value;
|
|
this.maxY = value + height;
|
|
}
|
|
/** the width value of the bounds. */
|
|
get width() {
|
|
return this.maxX - this.minX;
|
|
}
|
|
set width(value) {
|
|
this.maxX = this.minX + value;
|
|
}
|
|
/** the height value of the bounds. */
|
|
get height() {
|
|
return this.maxY - this.minY;
|
|
}
|
|
set height(value) {
|
|
this.maxY = this.minY + value;
|
|
}
|
|
/** the left value of the bounds. */
|
|
get left() {
|
|
return this.minX;
|
|
}
|
|
/** the right value of the bounds. */
|
|
get right() {
|
|
return this.maxX;
|
|
}
|
|
/** the top value of the bounds. */
|
|
get top() {
|
|
return this.minY;
|
|
}
|
|
/** the bottom value of the bounds. */
|
|
get bottom() {
|
|
return this.maxY;
|
|
}
|
|
/** Is the bounds positive. */
|
|
get isPositive() {
|
|
return this.maxX - this.minX > 0 && this.maxY - this.minY > 0;
|
|
}
|
|
get isValid() {
|
|
return this.minX + this.minY !== Infinity;
|
|
}
|
|
/**
|
|
* Adds screen vertices from array
|
|
* @param vertexData - calculated vertices
|
|
* @param beginOffset - begin offset
|
|
* @param endOffset - end offset, excluded
|
|
* @param matrix
|
|
*/
|
|
addVertexData(vertexData, beginOffset, endOffset, matrix) {
|
|
let minX = this.minX;
|
|
let minY = this.minY;
|
|
let maxX = this.maxX;
|
|
let maxY = this.maxY;
|
|
matrix || (matrix = this.matrix);
|
|
const a = matrix.a;
|
|
const b = matrix.b;
|
|
const c = matrix.c;
|
|
const d = matrix.d;
|
|
const tx = matrix.tx;
|
|
const ty = matrix.ty;
|
|
for (let i = beginOffset; i < endOffset; i += 2) {
|
|
const localX = vertexData[i];
|
|
const localY = vertexData[i + 1];
|
|
const x = a * localX + c * localY + tx;
|
|
const y = b * localX + d * localY + ty;
|
|
minX = x < minX ? x : minX;
|
|
minY = y < minY ? y : minY;
|
|
maxX = x > maxX ? x : maxX;
|
|
maxY = y > maxY ? y : maxY;
|
|
}
|
|
this.minX = minX;
|
|
this.minY = minY;
|
|
this.maxX = maxX;
|
|
this.maxY = maxY;
|
|
}
|
|
/**
|
|
* Checks if the point is contained within the bounds.
|
|
* @param x - x coordinate
|
|
* @param y - y coordinate
|
|
*/
|
|
containsPoint(x, y) {
|
|
if (this.minX <= x && this.minY <= y && this.maxX >= x && this.maxY >= y) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
toString() {
|
|
return `[pixi.js:Bounds minX=${this.minX} minY=${this.minY} maxX=${this.maxX} maxY=${this.maxY} width=${this.width} height=${this.height}]`;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const matrixPool = new Pool(Matrix);
|
|
const boundsPool = new Pool(Bounds);
|
|
|
|
"use strict";
|
|
function getGlobalBounds(target, skipUpdateTransform, bounds) {
|
|
bounds.clear();
|
|
let parentTransform;
|
|
let pooledMatrix;
|
|
if (target.parent) {
|
|
if (!skipUpdateTransform) {
|
|
pooledMatrix = matrixPool.get().identity();
|
|
parentTransform = updateTransformBackwards(target, pooledMatrix);
|
|
} else {
|
|
parentTransform = target.parent.worldTransform;
|
|
}
|
|
} else {
|
|
parentTransform = Matrix.IDENTITY;
|
|
}
|
|
_getGlobalBounds(target, bounds, parentTransform, skipUpdateTransform);
|
|
if (pooledMatrix) {
|
|
matrixPool.return(pooledMatrix);
|
|
}
|
|
if (!bounds.isValid) {
|
|
bounds.set(0, 0, 0, 0);
|
|
}
|
|
return bounds;
|
|
}
|
|
function _getGlobalBounds(target, bounds, parentTransform, skipUpdateTransform) {
|
|
var _a, _b;
|
|
if (!target.visible || !target.measurable)
|
|
return;
|
|
let worldTransform;
|
|
if (!skipUpdateTransform) {
|
|
target.updateLocalTransform();
|
|
worldTransform = matrixPool.get();
|
|
worldTransform.appendFrom(target.localTransform, parentTransform);
|
|
} else {
|
|
worldTransform = target.worldTransform;
|
|
}
|
|
const parentBounds = bounds;
|
|
const preserveBounds = !!target.effects.length;
|
|
if (preserveBounds) {
|
|
bounds = boundsPool.get().clear();
|
|
}
|
|
if (target.boundsArea) {
|
|
bounds.addRect(target.boundsArea, worldTransform);
|
|
} else {
|
|
if (target.addBounds) {
|
|
bounds.matrix = worldTransform;
|
|
target.addBounds(bounds);
|
|
}
|
|
for (let i = 0; i < target.children.length; i++) {
|
|
_getGlobalBounds(target.children[i], bounds, worldTransform, skipUpdateTransform);
|
|
}
|
|
}
|
|
if (preserveBounds) {
|
|
for (let i = 0; i < target.effects.length; i++) {
|
|
(_b = (_a = target.effects[i]).addBounds) == null ? void 0 : _b.call(_a, bounds);
|
|
}
|
|
parentBounds.addBounds(bounds, Matrix.IDENTITY);
|
|
boundsPool.return(bounds);
|
|
}
|
|
if (!skipUpdateTransform) {
|
|
matrixPool.return(worldTransform);
|
|
}
|
|
}
|
|
function updateTransformBackwards(target, parentTransform) {
|
|
const parent = target.parent;
|
|
if (parent) {
|
|
updateTransformBackwards(parent, parentTransform);
|
|
parent.updateLocalTransform();
|
|
parentTransform.append(parent.localTransform);
|
|
}
|
|
return parentTransform;
|
|
}
|
|
|
|
"use strict";
|
|
let warnCount = 0;
|
|
const maxWarnings = 500;
|
|
function warn(...args) {
|
|
if (warnCount === maxWarnings)
|
|
return;
|
|
warnCount++;
|
|
if (warnCount === maxWarnings) {
|
|
console.warn("PixiJS Warning: too many warnings, no more warnings will be reported to the console by PixiJS.");
|
|
} else {
|
|
console.warn("PixiJS Warning: ", ...args);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function getLocalBounds(target, bounds, relativeMatrix) {
|
|
bounds.clear();
|
|
relativeMatrix || (relativeMatrix = Matrix.IDENTITY);
|
|
_getLocalBounds(target, bounds, relativeMatrix, target, true);
|
|
if (!bounds.isValid) {
|
|
bounds.set(0, 0, 0, 0);
|
|
}
|
|
return bounds;
|
|
}
|
|
function _getLocalBounds(target, bounds, parentTransform, rootContainer, isRoot) {
|
|
var _a, _b;
|
|
let relativeTransform;
|
|
if (!isRoot) {
|
|
if (!target.visible || !target.measurable)
|
|
return;
|
|
target.updateLocalTransform();
|
|
const localTransform = target.localTransform;
|
|
relativeTransform = matrixPool.get();
|
|
relativeTransform.appendFrom(localTransform, parentTransform);
|
|
} else {
|
|
relativeTransform = matrixPool.get();
|
|
relativeTransform = parentTransform.copyTo(relativeTransform);
|
|
}
|
|
const parentBounds = bounds;
|
|
const preserveBounds = !!target.effects.length;
|
|
if (preserveBounds) {
|
|
bounds = boundsPool.get().clear();
|
|
}
|
|
if (target.boundsArea) {
|
|
bounds.addRect(target.boundsArea, relativeTransform);
|
|
} else {
|
|
if (target.renderPipeId) {
|
|
bounds.matrix = relativeTransform;
|
|
target.addBounds(bounds);
|
|
}
|
|
const children = target.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
_getLocalBounds(children[i], bounds, relativeTransform, rootContainer, false);
|
|
}
|
|
}
|
|
if (preserveBounds) {
|
|
for (let i = 0; i < target.effects.length; i++) {
|
|
(_b = (_a = target.effects[i]).addLocalBounds) == null ? void 0 : _b.call(_a, bounds, rootContainer);
|
|
}
|
|
parentBounds.addBounds(bounds, Matrix.IDENTITY);
|
|
boundsPool.return(bounds);
|
|
}
|
|
matrixPool.return(relativeTransform);
|
|
}
|
|
function getParent(target, root, matrix) {
|
|
const parent = target.parent;
|
|
if (!parent) {
|
|
warn("Item is not inside the root container");
|
|
return;
|
|
}
|
|
if (parent !== root) {
|
|
getParent(parent, root, matrix);
|
|
parent.updateLocalTransform();
|
|
matrix.append(parent.localTransform);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function checkChildrenDidChange(container, previousData) {
|
|
const children = container.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
const child = children[i];
|
|
const uid = child.uid;
|
|
const didChange = (child._didViewChangeTick & 65535) << 16 | child._didContainerChangeTick & 65535;
|
|
const index = previousData.index;
|
|
if (previousData.data[index] !== uid || previousData.data[index + 1] !== didChange) {
|
|
previousData.data[previousData.index] = uid;
|
|
previousData.data[previousData.index + 1] = didChange;
|
|
previousData.didChange = true;
|
|
}
|
|
previousData.index = index + 2;
|
|
if (child.children.length) {
|
|
checkChildrenDidChange(child, previousData);
|
|
}
|
|
}
|
|
return previousData.didChange;
|
|
}
|
|
|
|
"use strict";
|
|
const tempMatrix$4 = new Matrix();
|
|
const measureMixin = {
|
|
_localBoundsCacheId: -1,
|
|
_localBoundsCacheData: null,
|
|
_setWidth(value, localWidth) {
|
|
const sign = Math.sign(this.scale.x) || 1;
|
|
if (localWidth !== 0) {
|
|
this.scale.x = value / localWidth * sign;
|
|
} else {
|
|
this.scale.x = sign;
|
|
}
|
|
},
|
|
_setHeight(value, localHeight) {
|
|
const sign = Math.sign(this.scale.y) || 1;
|
|
if (localHeight !== 0) {
|
|
this.scale.y = value / localHeight * sign;
|
|
} else {
|
|
this.scale.y = sign;
|
|
}
|
|
},
|
|
/**
|
|
* Retrieves the local bounds of the container as a Bounds object.
|
|
* @returns - The bounding area.
|
|
* @memberof scene.Container#
|
|
*/
|
|
getLocalBounds() {
|
|
if (!this._localBoundsCacheData) {
|
|
this._localBoundsCacheData = {
|
|
data: [],
|
|
index: 1,
|
|
didChange: false,
|
|
localBounds: new Bounds()
|
|
};
|
|
}
|
|
const localBoundsCacheData = this._localBoundsCacheData;
|
|
localBoundsCacheData.index = 1;
|
|
localBoundsCacheData.didChange = false;
|
|
if (localBoundsCacheData.data[0] !== this._didViewChangeTick) {
|
|
localBoundsCacheData.didChange = true;
|
|
localBoundsCacheData.data[0] = this._didViewChangeTick;
|
|
}
|
|
checkChildrenDidChange(this, localBoundsCacheData);
|
|
if (localBoundsCacheData.didChange) {
|
|
getLocalBounds(this, localBoundsCacheData.localBounds, tempMatrix$4);
|
|
}
|
|
return localBoundsCacheData.localBounds;
|
|
},
|
|
/**
|
|
* Calculates and returns the (world) bounds of the display object as a [Rectangle]{@link Rectangle}.
|
|
* @param skipUpdate - Setting to `true` will stop the transforms of the scene graph from
|
|
* being updated. This means the calculation returned MAY be out of date BUT will give you a
|
|
* nice performance boost.
|
|
* @param bounds - Optional bounds to store the result of the bounds calculation.
|
|
* @returns - The minimum axis-aligned rectangle in world space that fits around this object.
|
|
* @memberof scene.Container#
|
|
*/
|
|
getBounds(skipUpdate, bounds) {
|
|
return getGlobalBounds(this, skipUpdate, bounds || new Bounds());
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const onRenderMixin = {
|
|
_onRender: null,
|
|
set onRender(func) {
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (!func) {
|
|
if (this._onRender) {
|
|
renderGroup == null ? void 0 : renderGroup.removeOnRender(this);
|
|
}
|
|
this._onRender = null;
|
|
return;
|
|
}
|
|
if (!this._onRender) {
|
|
renderGroup == null ? void 0 : renderGroup.addOnRender(this);
|
|
}
|
|
this._onRender = func;
|
|
},
|
|
/**
|
|
* This callback is used when the container is rendered. This is where you should add your custom
|
|
* logic that is needed to be run every frame.
|
|
*
|
|
* In v7 many users used `updateTransform` for this, however the way v8 renders objects is different
|
|
* and "updateTransform" is no longer called every frame
|
|
* @example
|
|
* const container = new Container();
|
|
* container.onRender = () => {
|
|
* container.rotation += 0.01;
|
|
* };
|
|
* @memberof scene.Container#
|
|
*/
|
|
get onRender() {
|
|
return this._onRender;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const sortMixin = {
|
|
_zIndex: 0,
|
|
/**
|
|
* Should children be sorted by zIndex at the next render call.
|
|
*
|
|
* Will get automatically set to true if a new child is added, or if a child's zIndex changes.
|
|
* @type {boolean}
|
|
* @memberof scene.Container#
|
|
*/
|
|
sortDirty: false,
|
|
/**
|
|
* If set to true, the container will sort its children by `zIndex` value
|
|
* when the next render is called, or manually if `sortChildren()` is called.
|
|
*
|
|
* This actually changes the order of elements in the array, so should be treated
|
|
* as a basic solution that is not performant compared to other solutions,
|
|
* such as {@link https://github.com/pixijs/layers PixiJS Layers}
|
|
*
|
|
* Also be aware of that this may not work nicely with the `addChildAt()` function,
|
|
* as the `zIndex` sorting may cause the child to automatically sorted to another position.
|
|
* @type {boolean}
|
|
* @memberof scene.Container#
|
|
*/
|
|
sortableChildren: false,
|
|
/**
|
|
* The zIndex of the container.
|
|
*
|
|
* Setting this value, will automatically set the parent to be sortable. Children will be automatically
|
|
* sorted by zIndex value; a higher value will mean it will be moved towards the end of the array,
|
|
* and thus rendered on top of other display objects within the same container.
|
|
* @see scene.Container#sortableChildren
|
|
* @memberof scene.Container#
|
|
*/
|
|
get zIndex() {
|
|
return this._zIndex;
|
|
},
|
|
set zIndex(value) {
|
|
if (this._zIndex === value)
|
|
return;
|
|
this._zIndex = value;
|
|
this.depthOfChildModified();
|
|
},
|
|
depthOfChildModified() {
|
|
if (this.parent) {
|
|
this.parent.sortableChildren = true;
|
|
this.parent.sortDirty = true;
|
|
}
|
|
if (this.parentRenderGroup) {
|
|
this.parentRenderGroup.structureDidChange = true;
|
|
}
|
|
},
|
|
/**
|
|
* Sorts children by zIndex.
|
|
* @memberof scene.Container#
|
|
*/
|
|
sortChildren() {
|
|
if (!this.sortDirty)
|
|
return;
|
|
this.sortDirty = false;
|
|
this.children.sort(sortChildren);
|
|
}
|
|
};
|
|
function sortChildren(a, b) {
|
|
return a._zIndex - b._zIndex;
|
|
}
|
|
|
|
"use strict";
|
|
const toLocalGlobalMixin = {
|
|
/**
|
|
* Returns the global position of the container.
|
|
* @param point - The optional point to write the global value to.
|
|
* @param skipUpdate - Should we skip the update transform.
|
|
* @returns - The updated point.
|
|
* @memberof scene.Container#
|
|
*/
|
|
getGlobalPosition(point = new Point(), skipUpdate = false) {
|
|
if (this.parent) {
|
|
this.parent.toGlobal(this._position, point, skipUpdate);
|
|
} else {
|
|
point.x = this._position.x;
|
|
point.y = this._position.y;
|
|
}
|
|
return point;
|
|
},
|
|
/**
|
|
* Calculates the global position of the container.
|
|
* @param position - The world origin to calculate from.
|
|
* @param point - A Point object in which to store the value, optional
|
|
* (otherwise will create a new Point).
|
|
* @param skipUpdate - Should we skip the update transform.
|
|
* @returns - A point object representing the position of this object.
|
|
* @memberof scene.Container#
|
|
*/
|
|
toGlobal(position, point, skipUpdate = false) {
|
|
if (!skipUpdate) {
|
|
this.updateLocalTransform();
|
|
const globalMatrix = updateTransformBackwards(this, new Matrix());
|
|
globalMatrix.append(this.localTransform);
|
|
return globalMatrix.apply(position, point);
|
|
}
|
|
return this.worldTransform.apply(position, point);
|
|
},
|
|
/**
|
|
* Calculates the local position of the container relative to another point.
|
|
* @param position - The world origin to calculate from.
|
|
* @param from - The Container to calculate the global position from.
|
|
* @param point - A Point object in which to store the value, optional
|
|
* (otherwise will create a new Point).
|
|
* @param skipUpdate - Should we skip the update transform
|
|
* @returns - A point object representing the position of this object
|
|
* @memberof scene.Container#
|
|
*/
|
|
toLocal(position, from, point, skipUpdate) {
|
|
if (from) {
|
|
position = from.toGlobal(position, point, skipUpdate);
|
|
}
|
|
if (!skipUpdate) {
|
|
this.updateLocalTransform();
|
|
const globalMatrix = updateTransformBackwards(this, new Matrix());
|
|
globalMatrix.append(this.localTransform);
|
|
return globalMatrix.applyInverse(position, point);
|
|
}
|
|
return this.worldTransform.applyInverse(position, point);
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
let _tick = 0;
|
|
class InstructionSet {
|
|
constructor() {
|
|
/** a unique id for this instruction set used through the renderer */
|
|
this.uid = uid$1("instructionSet");
|
|
/** the array of instructions */
|
|
this.instructions = [];
|
|
/** the actual size of the array (any instructions passed this should be ignored) */
|
|
this.instructionSize = 0;
|
|
this.renderables = [];
|
|
this.tick = 0;
|
|
}
|
|
/** reset the instruction set so it can be reused set size back to 0 */
|
|
reset() {
|
|
this.instructionSize = 0;
|
|
this.tick = _tick++;
|
|
}
|
|
/**
|
|
* Add an instruction to the set
|
|
* @param instruction - add an instruction to the set
|
|
*/
|
|
add(instruction) {
|
|
this.instructions[this.instructionSize++] = instruction;
|
|
}
|
|
/**
|
|
* Log the instructions to the console (for debugging)
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
log() {
|
|
this.instructions.length = this.instructionSize;
|
|
console.table(this.instructions, ["type", "action"]);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class RenderGroup {
|
|
constructor() {
|
|
this.renderPipeId = "renderGroup";
|
|
this.root = null;
|
|
this.canBundle = false;
|
|
this.renderGroupParent = null;
|
|
this.renderGroupChildren = [];
|
|
this.worldTransform = new Matrix();
|
|
this.worldColorAlpha = 4294967295;
|
|
this.worldColor = 16777215;
|
|
this.worldAlpha = 1;
|
|
// these updates are transform changes..
|
|
this.childrenToUpdate = /* @__PURE__ */ Object.create(null);
|
|
this.updateTick = 0;
|
|
// these update are renderable changes..
|
|
this.childrenRenderablesToUpdate = { list: [], index: 0 };
|
|
// other
|
|
this.structureDidChange = true;
|
|
this.instructionSet = new InstructionSet();
|
|
this._onRenderContainers = [];
|
|
}
|
|
init(root) {
|
|
this.root = root;
|
|
if (root._onRender)
|
|
this.addOnRender(root);
|
|
root.didChange = true;
|
|
const children = root.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
this.addChild(children[i]);
|
|
}
|
|
}
|
|
reset() {
|
|
this.renderGroupChildren.length = 0;
|
|
for (const i in this.childrenToUpdate) {
|
|
const childrenAtDepth = this.childrenToUpdate[i];
|
|
childrenAtDepth.list.fill(null);
|
|
childrenAtDepth.index = 0;
|
|
}
|
|
this.childrenRenderablesToUpdate.index = 0;
|
|
this.childrenRenderablesToUpdate.list.fill(null);
|
|
this.root = null;
|
|
this.updateTick = 0;
|
|
this.structureDidChange = true;
|
|
this._onRenderContainers.length = 0;
|
|
this.renderGroupParent = null;
|
|
}
|
|
get localTransform() {
|
|
return this.root.localTransform;
|
|
}
|
|
addRenderGroupChild(renderGroupChild) {
|
|
if (renderGroupChild.renderGroupParent) {
|
|
renderGroupChild.renderGroupParent._removeRenderGroupChild(renderGroupChild);
|
|
}
|
|
renderGroupChild.renderGroupParent = this;
|
|
this.renderGroupChildren.push(renderGroupChild);
|
|
}
|
|
_removeRenderGroupChild(renderGroupChild) {
|
|
const index = this.renderGroupChildren.indexOf(renderGroupChild);
|
|
if (index > -1) {
|
|
this.renderGroupChildren.splice(index, 1);
|
|
}
|
|
renderGroupChild.renderGroupParent = null;
|
|
}
|
|
addChild(child) {
|
|
this.structureDidChange = true;
|
|
child.parentRenderGroup = this;
|
|
child.updateTick = -1;
|
|
if (child.parent === this.root) {
|
|
child.relativeRenderGroupDepth = 1;
|
|
} else {
|
|
child.relativeRenderGroupDepth = child.parent.relativeRenderGroupDepth + 1;
|
|
}
|
|
child.didChange = true;
|
|
this.onChildUpdate(child);
|
|
if (child.renderGroup) {
|
|
this.addRenderGroupChild(child.renderGroup);
|
|
return;
|
|
}
|
|
if (child._onRender)
|
|
this.addOnRender(child);
|
|
const children = child.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
this.addChild(children[i]);
|
|
}
|
|
}
|
|
removeChild(child) {
|
|
this.structureDidChange = true;
|
|
if (child._onRender) {
|
|
if (!child.renderGroup) {
|
|
this.removeOnRender(child);
|
|
}
|
|
}
|
|
child.parentRenderGroup = null;
|
|
if (child.renderGroup) {
|
|
this._removeRenderGroupChild(child.renderGroup);
|
|
return;
|
|
}
|
|
const children = child.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
this.removeChild(children[i]);
|
|
}
|
|
}
|
|
removeChildren(children) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
this.removeChild(children[i]);
|
|
}
|
|
}
|
|
onChildUpdate(child) {
|
|
let childrenToUpdate = this.childrenToUpdate[child.relativeRenderGroupDepth];
|
|
if (!childrenToUpdate) {
|
|
childrenToUpdate = this.childrenToUpdate[child.relativeRenderGroupDepth] = {
|
|
index: 0,
|
|
list: []
|
|
};
|
|
}
|
|
childrenToUpdate.list[childrenToUpdate.index++] = child;
|
|
}
|
|
// SHOULD THIS BE HERE?
|
|
updateRenderable(container) {
|
|
if (container.globalDisplayStatus < 7)
|
|
return;
|
|
container.didViewUpdate = false;
|
|
this.instructionSet.renderPipes[container.renderPipeId].updateRenderable(container);
|
|
}
|
|
onChildViewUpdate(child) {
|
|
this.childrenRenderablesToUpdate.list[this.childrenRenderablesToUpdate.index++] = child;
|
|
}
|
|
get isRenderable() {
|
|
return this.root.localDisplayStatus === 7 && this.worldAlpha > 0;
|
|
}
|
|
/**
|
|
* adding a container to the onRender list will make sure the user function
|
|
* passed in to the user defined 'onRender` callBack
|
|
* @param container - the container to add to the onRender list
|
|
*/
|
|
addOnRender(container) {
|
|
this._onRenderContainers.push(container);
|
|
}
|
|
removeOnRender(container) {
|
|
this._onRenderContainers.splice(this._onRenderContainers.indexOf(container), 1);
|
|
}
|
|
runOnRender() {
|
|
for (let i = 0; i < this._onRenderContainers.length; i++) {
|
|
this._onRenderContainers[i]._onRender();
|
|
}
|
|
}
|
|
destroy() {
|
|
this.renderGroupParent = null;
|
|
this.root = null;
|
|
this.childrenRenderablesToUpdate = null;
|
|
this.childrenToUpdate = null;
|
|
this.renderGroupChildren = null;
|
|
this._onRenderContainers = null;
|
|
this.instructionSet = null;
|
|
}
|
|
getChildren(out = []) {
|
|
const children = this.root.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
this._getChildren(children[i], out);
|
|
}
|
|
return out;
|
|
}
|
|
_getChildren(container, out = []) {
|
|
out.push(container);
|
|
if (container.renderGroup)
|
|
return out;
|
|
const children = container.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
this._getChildren(children[i], out);
|
|
}
|
|
return out;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function assignWithIgnore(target, options, ignore = {}) {
|
|
for (const key in options) {
|
|
if (!ignore[key] && options[key] !== void 0) {
|
|
target[key] = options[key];
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const defaultSkew = new ObservablePoint(null);
|
|
const defaultPivot = new ObservablePoint(null);
|
|
const defaultScale = new ObservablePoint(null, 1, 1);
|
|
const UPDATE_COLOR = 1;
|
|
const UPDATE_BLEND = 2;
|
|
const UPDATE_VISIBLE = 4;
|
|
const UPDATE_TRANSFORM = 8;
|
|
class Container extends EventEmitter {
|
|
constructor(options = {}) {
|
|
var _a, _b;
|
|
super();
|
|
/** unique id for this container */
|
|
this.uid = uid$1("renderable");
|
|
/** @private */
|
|
this._updateFlags = 15;
|
|
// the render group this container owns
|
|
/** @private */
|
|
this.renderGroup = null;
|
|
// the render group this container belongs to
|
|
/** @private */
|
|
this.parentRenderGroup = null;
|
|
// the index of the container in the render group
|
|
/** @private */
|
|
this.parentRenderGroupIndex = 0;
|
|
// set to true if the container has changed. It is reset once the changes have been applied
|
|
// by the transform system
|
|
// its here to stop ensure that when things change, only one update gets registers with the transform system
|
|
/** @private */
|
|
this.didChange = false;
|
|
// same as above, but for the renderable
|
|
/** @private */
|
|
this.didViewUpdate = false;
|
|
// how deep is the container relative to its render group..
|
|
// unless the element is the root render group - it will be relative to its parent
|
|
/** @private */
|
|
this.relativeRenderGroupDepth = 0;
|
|
/**
|
|
* The array of children of this container.
|
|
* @readonly
|
|
*/
|
|
this.children = [];
|
|
/** The display object container that contains this display object. */
|
|
this.parent = null;
|
|
// used internally for changing up the render order.. mainly for masks and filters
|
|
// TODO setting this should cause a rebuild??
|
|
/** @private */
|
|
this.includeInBuild = true;
|
|
/** @private */
|
|
this.measurable = true;
|
|
/** @private */
|
|
this.isSimple = true;
|
|
// / /////////////Transform related props//////////////
|
|
// used by the transform system to check if a container needs to be updated that frame
|
|
// if the tick matches the current transform system tick, it is not updated again
|
|
/**
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this.updateTick = -1;
|
|
/**
|
|
* Current transform of the object based on local factors: position, scale, other stuff.
|
|
* @readonly
|
|
*/
|
|
this.localTransform = new Matrix();
|
|
/**
|
|
* The relative group transform is a transform relative to the render group it belongs too. It will include all parent
|
|
* transforms and up to the render group (think of it as kind of like a stage - but the stage can be nested).
|
|
* If this container is is self a render group matrix will be relative to its parent render group
|
|
* @readonly
|
|
*/
|
|
this.relativeGroupTransform = new Matrix();
|
|
/**
|
|
* The group transform is a transform relative to the render group it belongs too.
|
|
* If this container is render group then this will be an identity matrix. other wise it
|
|
* will be the same as the relativeGroupTransform.
|
|
* Use this value when actually rendering things to the screen
|
|
* @readonly
|
|
*/
|
|
this.groupTransform = this.relativeGroupTransform;
|
|
/** If the object has been destroyed via destroy(). If true, it should not be used. */
|
|
this.destroyed = false;
|
|
// transform data..
|
|
/**
|
|
* The coordinate of the object relative to the local coordinates of the parent.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._position = new ObservablePoint(this, 0, 0);
|
|
/**
|
|
* The scale factor of the object.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._scale = defaultScale;
|
|
/**
|
|
* The pivot point of the container that it rotates around.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._pivot = defaultPivot;
|
|
/**
|
|
* The skew amount, on the x and y axis.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._skew = defaultSkew;
|
|
/**
|
|
* The X-coordinate value of the normalized local X axis,
|
|
* the first column of the local transformation matrix without a scale.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._cx = 1;
|
|
/**
|
|
* The Y-coordinate value of the normalized local X axis,
|
|
* the first column of the local transformation matrix without a scale.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._sx = 0;
|
|
/**
|
|
* The X-coordinate value of the normalized local Y axis,
|
|
* the second column of the local transformation matrix without a scale.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._cy = 0;
|
|
/**
|
|
* The Y-coordinate value of the normalized local Y axis,
|
|
* the second column of the local transformation matrix without a scale.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._sy = 1;
|
|
/**
|
|
* The rotation amount.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._rotation = 0;
|
|
// / COLOR related props //////////////
|
|
// color stored as ABGR
|
|
this.localColor = 16777215;
|
|
this.localAlpha = 1;
|
|
this.groupAlpha = 1;
|
|
// A
|
|
this.groupColor = 16777215;
|
|
// BGR
|
|
this.groupColorAlpha = 4294967295;
|
|
// ABGR
|
|
// / BLEND related props //////////////
|
|
/**
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this.localBlendMode = "inherit";
|
|
/**
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this.groupBlendMode = "normal";
|
|
// / VISIBILITY related props //////////////
|
|
// visibility
|
|
// 0b11
|
|
// first bit is visible, second bit is renderable
|
|
/**
|
|
* This property holds three bits: culled, visible, renderable
|
|
* the third bit represents culling (0 = culled, 1 = not culled) 0b100
|
|
* the second bit represents visibility (0 = not visible, 1 = visible) 0b010
|
|
* the first bit represents renderable (0 = not renderable, 1 = renderable) 0b001
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this.localDisplayStatus = 7;
|
|
// 0b11 | 0b10 | 0b01 | 0b00
|
|
/**
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this.globalDisplayStatus = 7;
|
|
/**
|
|
* A value that increments each time the containe is modified
|
|
* eg children added, removed etc
|
|
* @ignore
|
|
*/
|
|
this._didContainerChangeTick = 0;
|
|
/**
|
|
* A value that increments each time the container view is modified
|
|
* eg texture swap, geometry change etc
|
|
* @ignore
|
|
*/
|
|
this._didViewChangeTick = 0;
|
|
/**
|
|
* property that tracks if the container transform has changed
|
|
* @ignore
|
|
*/
|
|
this._didLocalTransformChangeId = -1;
|
|
this.effects = [];
|
|
assignWithIgnore(this, options, {
|
|
children: true,
|
|
parent: true,
|
|
effects: true
|
|
});
|
|
(_a = options.children) == null ? void 0 : _a.forEach((child) => this.addChild(child));
|
|
(_b = options.parent) == null ? void 0 : _b.addChild(this);
|
|
}
|
|
/**
|
|
* Mixes all enumerable properties and methods from a source object to Container.
|
|
* @param source - The source of properties and methods to mix in.
|
|
*/
|
|
static mixin(source) {
|
|
Object.defineProperties(Container.prototype, Object.getOwnPropertyDescriptors(source));
|
|
}
|
|
/**
|
|
* We now use the _didContainerChangeTick and _didViewChangeTick to track changes
|
|
* @deprecated since 8.2.6
|
|
* @ignore
|
|
*/
|
|
set _didChangeId(value) {
|
|
this._didViewChangeTick = value >> 12 & 4095;
|
|
this._didContainerChangeTick = value & 4095;
|
|
}
|
|
get _didChangeId() {
|
|
return this._didContainerChangeTick & 4095 | (this._didViewChangeTick & 4095) << 12;
|
|
}
|
|
/**
|
|
* Adds one or more children to the container.
|
|
*
|
|
* Multiple items can be added like so: `myContainer.addChild(thingOne, thingTwo, thingThree)`
|
|
* @param {...Container} children - The Container(s) to add to the container
|
|
* @returns {Container} - The first child that was added.
|
|
*/
|
|
addChild(...children) {
|
|
if (!this.allowChildren) {
|
|
deprecation(v8_0_0, "addChild: Only Containers will be allowed to add children in v8.0.0");
|
|
}
|
|
if (children.length > 1) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
this.addChild(children[i]);
|
|
}
|
|
return children[0];
|
|
}
|
|
const child = children[0];
|
|
if (child.parent === this) {
|
|
this.children.splice(this.children.indexOf(child), 1);
|
|
this.children.push(child);
|
|
if (this.parentRenderGroup) {
|
|
this.parentRenderGroup.structureDidChange = true;
|
|
}
|
|
return child;
|
|
}
|
|
if (child.parent) {
|
|
child.parent.removeChild(child);
|
|
}
|
|
this.children.push(child);
|
|
if (this.sortableChildren)
|
|
this.sortDirty = true;
|
|
child.parent = this;
|
|
child.didChange = true;
|
|
child.didViewUpdate = false;
|
|
child._updateFlags = 15;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.addChild(child);
|
|
}
|
|
this.emit("childAdded", child, this, this.children.length - 1);
|
|
child.emit("added", this);
|
|
this._didViewChangeTick++;
|
|
if (child._zIndex !== 0) {
|
|
child.depthOfChildModified();
|
|
}
|
|
return child;
|
|
}
|
|
/**
|
|
* Removes one or more children from the container.
|
|
* @param {...Container} children - The Container(s) to remove
|
|
* @returns {Container} The first child that was removed.
|
|
*/
|
|
removeChild(...children) {
|
|
if (children.length > 1) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
this.removeChild(children[i]);
|
|
}
|
|
return children[0];
|
|
}
|
|
const child = children[0];
|
|
const index = this.children.indexOf(child);
|
|
if (index > -1) {
|
|
this._didViewChangeTick++;
|
|
this.children.splice(index, 1);
|
|
if (this.renderGroup) {
|
|
this.renderGroup.removeChild(child);
|
|
} else if (this.parentRenderGroup) {
|
|
this.parentRenderGroup.removeChild(child);
|
|
}
|
|
child.parent = null;
|
|
this.emit("childRemoved", child, this, index);
|
|
child.emit("removed", this);
|
|
}
|
|
return child;
|
|
}
|
|
/** @ignore */
|
|
_onUpdate(point) {
|
|
if (point) {
|
|
if (point === this._skew) {
|
|
this._updateSkew();
|
|
}
|
|
}
|
|
this._didContainerChangeTick++;
|
|
if (this.didChange)
|
|
return;
|
|
this.didChange = true;
|
|
if (this.parentRenderGroup) {
|
|
this.parentRenderGroup.onChildUpdate(this);
|
|
}
|
|
}
|
|
set isRenderGroup(value) {
|
|
if (!!this.renderGroup === value)
|
|
return;
|
|
if (value) {
|
|
this.enableRenderGroup();
|
|
} else {
|
|
this.disableRenderGroup();
|
|
}
|
|
}
|
|
/**
|
|
* Returns true if this container is a render group.
|
|
* This means that it will be rendered as a separate pass, with its own set of instructions
|
|
*/
|
|
get isRenderGroup() {
|
|
return !!this.renderGroup;
|
|
}
|
|
/**
|
|
* Calling this enables a render group for this container.
|
|
* This means it will be rendered as a separate set of instructions.
|
|
* The transform of the container will also be handled on the GPU rather than the CPU.
|
|
*/
|
|
enableRenderGroup() {
|
|
if (this.renderGroup)
|
|
return;
|
|
const parentRenderGroup = this.parentRenderGroup;
|
|
parentRenderGroup == null ? void 0 : parentRenderGroup.removeChild(this);
|
|
this.renderGroup = BigPool.get(RenderGroup, this);
|
|
this.groupTransform = Matrix.IDENTITY;
|
|
parentRenderGroup == null ? void 0 : parentRenderGroup.addChild(this);
|
|
this._updateIsSimple();
|
|
}
|
|
/** This will disable the render group for this container. */
|
|
disableRenderGroup() {
|
|
if (!this.renderGroup)
|
|
return;
|
|
const parentRenderGroup = this.parentRenderGroup;
|
|
parentRenderGroup == null ? void 0 : parentRenderGroup.removeChild(this);
|
|
BigPool.return(this.renderGroup);
|
|
this.renderGroup = null;
|
|
this.groupTransform = this.relativeGroupTransform;
|
|
parentRenderGroup == null ? void 0 : parentRenderGroup.addChild(this);
|
|
this._updateIsSimple();
|
|
}
|
|
/** @ignore */
|
|
_updateIsSimple() {
|
|
this.isSimple = !this.renderGroup && this.effects.length === 0;
|
|
}
|
|
/**
|
|
* Current transform of the object based on world (parent) factors.
|
|
* @readonly
|
|
*/
|
|
get worldTransform() {
|
|
this._worldTransform || (this._worldTransform = new Matrix());
|
|
if (this.renderGroup) {
|
|
this._worldTransform.copyFrom(this.renderGroup.worldTransform);
|
|
} else if (this.parentRenderGroup) {
|
|
this._worldTransform.appendFrom(this.relativeGroupTransform, this.parentRenderGroup.worldTransform);
|
|
}
|
|
return this._worldTransform;
|
|
}
|
|
// / ////// transform related stuff
|
|
/**
|
|
* The position of the container on the x axis relative to the local coordinates of the parent.
|
|
* An alias to position.x
|
|
*/
|
|
get x() {
|
|
return this._position.x;
|
|
}
|
|
set x(value) {
|
|
this._position.x = value;
|
|
}
|
|
/**
|
|
* The position of the container on the y axis relative to the local coordinates of the parent.
|
|
* An alias to position.y
|
|
*/
|
|
get y() {
|
|
return this._position.y;
|
|
}
|
|
set y(value) {
|
|
this._position.y = value;
|
|
}
|
|
/**
|
|
* The coordinate of the object relative to the local coordinates of the parent.
|
|
* @since 4.0.0
|
|
*/
|
|
get position() {
|
|
return this._position;
|
|
}
|
|
set position(value) {
|
|
this._position.copyFrom(value);
|
|
}
|
|
/**
|
|
* The rotation of the object in radians.
|
|
* 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
|
|
*/
|
|
get rotation() {
|
|
return this._rotation;
|
|
}
|
|
set rotation(value) {
|
|
if (this._rotation !== value) {
|
|
this._rotation = value;
|
|
this._onUpdate(this._skew);
|
|
}
|
|
}
|
|
/**
|
|
* The angle of the object in degrees.
|
|
* 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
|
|
*/
|
|
get angle() {
|
|
return this.rotation * RAD_TO_DEG;
|
|
}
|
|
set angle(value) {
|
|
this.rotation = value * DEG_TO_RAD;
|
|
}
|
|
/**
|
|
* The center of rotation, scaling, and skewing for this display object in its local space. The `position`
|
|
* is the projection of `pivot` in the parent's local space.
|
|
*
|
|
* By default, the pivot is the origin (0, 0).
|
|
* @since 4.0.0
|
|
*/
|
|
get pivot() {
|
|
if (this._pivot === defaultPivot) {
|
|
this._pivot = new ObservablePoint(this, 0, 0);
|
|
}
|
|
return this._pivot;
|
|
}
|
|
set pivot(value) {
|
|
if (this._pivot === defaultPivot) {
|
|
this._pivot = new ObservablePoint(this, 0, 0);
|
|
}
|
|
typeof value === "number" ? this._pivot.set(value) : this._pivot.copyFrom(value);
|
|
}
|
|
/**
|
|
* The skew factor for the object in radians.
|
|
* @since 4.0.0
|
|
*/
|
|
get skew() {
|
|
if (this._skew === defaultSkew) {
|
|
this._skew = new ObservablePoint(this, 0, 0);
|
|
}
|
|
return this._skew;
|
|
}
|
|
set skew(value) {
|
|
if (this._skew === defaultSkew) {
|
|
this._skew = new ObservablePoint(this, 0, 0);
|
|
}
|
|
this._skew.copyFrom(value);
|
|
}
|
|
/**
|
|
* The scale factors of this object along the local coordinate axes.
|
|
*
|
|
* The default scale is (1, 1).
|
|
* @since 4.0.0
|
|
*/
|
|
get scale() {
|
|
if (this._scale === defaultScale) {
|
|
this._scale = new ObservablePoint(this, 1, 1);
|
|
}
|
|
return this._scale;
|
|
}
|
|
set scale(value) {
|
|
if (this._scale === defaultScale) {
|
|
this._scale = new ObservablePoint(this, 0, 0);
|
|
}
|
|
typeof value === "number" ? this._scale.set(value) : this._scale.copyFrom(value);
|
|
}
|
|
/**
|
|
* The width of the Container, setting this will actually modify the scale to achieve the value set.
|
|
* @memberof scene.Container#
|
|
*/
|
|
get width() {
|
|
return Math.abs(this.scale.x * this.getLocalBounds().width);
|
|
}
|
|
set width(value) {
|
|
const localWidth = this.getLocalBounds().width;
|
|
this._setWidth(value, localWidth);
|
|
}
|
|
/**
|
|
* The height of the Container, setting this will actually modify the scale to achieve the value set.
|
|
* @memberof scene.Container#
|
|
*/
|
|
get height() {
|
|
return Math.abs(this.scale.y * this.getLocalBounds().height);
|
|
}
|
|
set height(value) {
|
|
const localHeight = this.getLocalBounds().height;
|
|
this._setHeight(value, localHeight);
|
|
}
|
|
/**
|
|
* Retrieves the size of the container as a [Size]{@link Size} object.
|
|
* This is faster than get the width and height separately.
|
|
* @param out - Optional object to store the size in.
|
|
* @returns - The size of the container.
|
|
* @memberof scene.Container#
|
|
*/
|
|
getSize(out) {
|
|
if (!out) {
|
|
out = {};
|
|
}
|
|
const bounds = this.getLocalBounds();
|
|
out.width = Math.abs(this.scale.x * bounds.width);
|
|
out.height = Math.abs(this.scale.y * bounds.height);
|
|
return out;
|
|
}
|
|
/**
|
|
* Sets the size of the container to the specified width and height.
|
|
* This is faster than setting the width and height separately.
|
|
* @param value - This can be either a number or a [Size]{@link Size} object.
|
|
* @param height - The height to set. Defaults to the value of `width` if not provided.
|
|
* @memberof scene.Container#
|
|
*/
|
|
setSize(value, height) {
|
|
var _a;
|
|
const size = this.getLocalBounds();
|
|
if (typeof value === "object") {
|
|
height = (_a = value.height) != null ? _a : value.width;
|
|
value = value.width;
|
|
} else {
|
|
height != null ? height : height = value;
|
|
}
|
|
value !== void 0 && this._setWidth(value, size.width);
|
|
height !== void 0 && this._setHeight(height, size.height);
|
|
}
|
|
/** Called when the skew or the rotation changes. */
|
|
_updateSkew() {
|
|
const rotation = this._rotation;
|
|
const skew = this._skew;
|
|
this._cx = Math.cos(rotation + skew._y);
|
|
this._sx = Math.sin(rotation + skew._y);
|
|
this._cy = -Math.sin(rotation - skew._x);
|
|
this._sy = Math.cos(rotation - skew._x);
|
|
}
|
|
/**
|
|
* Updates the transform properties of the container (accepts partial values).
|
|
* @param {object} opts - The options for updating the transform.
|
|
* @param {number} opts.x - The x position of the container.
|
|
* @param {number} opts.y - The y position of the container.
|
|
* @param {number} opts.scaleX - The scale factor on the x-axis.
|
|
* @param {number} opts.scaleY - The scale factor on the y-axis.
|
|
* @param {number} opts.rotation - The rotation of the container, in radians.
|
|
* @param {number} opts.skewX - The skew factor on the x-axis.
|
|
* @param {number} opts.skewY - The skew factor on the y-axis.
|
|
* @param {number} opts.pivotX - The x coordinate of the pivot point.
|
|
* @param {number} opts.pivotY - The y coordinate of the pivot point.
|
|
*/
|
|
updateTransform(opts) {
|
|
this.position.set(
|
|
typeof opts.x === "number" ? opts.x : this.position.x,
|
|
typeof opts.y === "number" ? opts.y : this.position.y
|
|
);
|
|
this.scale.set(
|
|
typeof opts.scaleX === "number" ? opts.scaleX || 1 : this.scale.x,
|
|
typeof opts.scaleY === "number" ? opts.scaleY || 1 : this.scale.y
|
|
);
|
|
this.rotation = typeof opts.rotation === "number" ? opts.rotation : this.rotation;
|
|
this.skew.set(
|
|
typeof opts.skewX === "number" ? opts.skewX : this.skew.x,
|
|
typeof opts.skewY === "number" ? opts.skewY : this.skew.y
|
|
);
|
|
this.pivot.set(
|
|
typeof opts.pivotX === "number" ? opts.pivotX : this.pivot.x,
|
|
typeof opts.pivotY === "number" ? opts.pivotY : this.pivot.y
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Updates the local transform using the given matrix.
|
|
* @param matrix - The matrix to use for updating the transform.
|
|
*/
|
|
setFromMatrix(matrix) {
|
|
matrix.decompose(this);
|
|
}
|
|
/** Updates the local transform. */
|
|
updateLocalTransform() {
|
|
const localTransformChangeId = this._didContainerChangeTick;
|
|
if (this._didLocalTransformChangeId === localTransformChangeId)
|
|
return;
|
|
this._didLocalTransformChangeId = localTransformChangeId;
|
|
const lt = this.localTransform;
|
|
const scale = this._scale;
|
|
const pivot = this._pivot;
|
|
const position = this._position;
|
|
const sx = scale._x;
|
|
const sy = scale._y;
|
|
const px = pivot._x;
|
|
const py = pivot._y;
|
|
lt.a = this._cx * sx;
|
|
lt.b = this._sx * sx;
|
|
lt.c = this._cy * sy;
|
|
lt.d = this._sy * sy;
|
|
lt.tx = position._x - (px * lt.a + py * lt.c);
|
|
lt.ty = position._y - (px * lt.b + py * lt.d);
|
|
}
|
|
// / ///// color related stuff
|
|
set alpha(value) {
|
|
if (value === this.localAlpha)
|
|
return;
|
|
this.localAlpha = value;
|
|
this._updateFlags |= UPDATE_COLOR;
|
|
this._onUpdate();
|
|
}
|
|
/** The opacity of the object. */
|
|
get alpha() {
|
|
return this.localAlpha;
|
|
}
|
|
set tint(value) {
|
|
const tempColor = Color.shared.setValue(value != null ? value : 16777215);
|
|
const bgr = tempColor.toBgrNumber();
|
|
if (bgr === this.localColor)
|
|
return;
|
|
this.localColor = bgr;
|
|
this._updateFlags |= UPDATE_COLOR;
|
|
this._onUpdate();
|
|
}
|
|
/**
|
|
* The tint applied to the sprite. This is a hex value.
|
|
*
|
|
* A value of 0xFFFFFF will remove any tint effect.
|
|
* @default 0xFFFFFF
|
|
*/
|
|
get tint() {
|
|
const bgr = this.localColor;
|
|
return ((bgr & 255) << 16) + (bgr & 65280) + (bgr >> 16 & 255);
|
|
}
|
|
// / //////////////// blend related stuff
|
|
set blendMode(value) {
|
|
if (this.localBlendMode === value)
|
|
return;
|
|
if (this.parentRenderGroup) {
|
|
this.parentRenderGroup.structureDidChange = true;
|
|
}
|
|
this._updateFlags |= UPDATE_BLEND;
|
|
this.localBlendMode = value;
|
|
this._onUpdate();
|
|
}
|
|
/**
|
|
* The blend mode to be applied to the sprite. Apply a value of `'normal'` to reset the blend mode.
|
|
* @default 'normal'
|
|
*/
|
|
get blendMode() {
|
|
return this.localBlendMode;
|
|
}
|
|
// / ///////// VISIBILITY / RENDERABLE /////////////////
|
|
/** The visibility of the object. If false the object will not be drawn, and the transform will not be updated. */
|
|
get visible() {
|
|
return !!(this.localDisplayStatus & 2);
|
|
}
|
|
set visible(value) {
|
|
const valueNumber = value ? 2 : 0;
|
|
if ((this.localDisplayStatus & 2) === valueNumber)
|
|
return;
|
|
if (this.parentRenderGroup) {
|
|
this.parentRenderGroup.structureDidChange = true;
|
|
}
|
|
this._updateFlags |= UPDATE_VISIBLE;
|
|
this.localDisplayStatus ^= 2;
|
|
this._onUpdate();
|
|
}
|
|
/** @ignore */
|
|
get culled() {
|
|
return !(this.localDisplayStatus & 4);
|
|
}
|
|
/** @ignore */
|
|
set culled(value) {
|
|
const valueNumber = value ? 0 : 4;
|
|
if ((this.localDisplayStatus & 4) === valueNumber)
|
|
return;
|
|
if (this.parentRenderGroup) {
|
|
this.parentRenderGroup.structureDidChange = true;
|
|
}
|
|
this._updateFlags |= UPDATE_VISIBLE;
|
|
this.localDisplayStatus ^= 4;
|
|
this._onUpdate();
|
|
}
|
|
/** Can this object be rendered, if false the object will not be drawn but the transform will still be updated. */
|
|
get renderable() {
|
|
return !!(this.localDisplayStatus & 1);
|
|
}
|
|
set renderable(value) {
|
|
const valueNumber = value ? 1 : 0;
|
|
if ((this.localDisplayStatus & 1) === valueNumber)
|
|
return;
|
|
this._updateFlags |= UPDATE_VISIBLE;
|
|
this.localDisplayStatus ^= 1;
|
|
if (this.parentRenderGroup) {
|
|
this.parentRenderGroup.structureDidChange = true;
|
|
}
|
|
this._onUpdate();
|
|
}
|
|
/** Whether or not the object should be rendered. */
|
|
get isRenderable() {
|
|
return this.localDisplayStatus === 7 && this.groupAlpha > 0;
|
|
}
|
|
/**
|
|
* Removes all internal references and listeners as well as removes children from the display list.
|
|
* Do not use a Container after calling `destroy`.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
* have been set to that value
|
|
* @param {boolean} [options.children=false] - if set to true, all the children will have their destroy
|
|
* method called as well. 'options' will be passed on to those calls.
|
|
* @param {boolean} [options.texture=false] - Only used for children with textures e.g. Sprites. If options.children
|
|
* is set to true it should destroy the texture of the child sprite
|
|
* @param {boolean} [options.textureSource=false] - Only used for children with textures e.g. Sprites.
|
|
* If options.children is set to true it should destroy the texture source of the child sprite
|
|
* @param {boolean} [options.context=false] - Only used for children with graphicsContexts e.g. Graphics.
|
|
* If options.children is set to true it should destroy the context of the child graphics
|
|
*/
|
|
destroy(options = false) {
|
|
var _a;
|
|
if (this.destroyed)
|
|
return;
|
|
this.destroyed = true;
|
|
const oldChildren = this.removeChildren(0, this.children.length);
|
|
this.removeFromParent();
|
|
this.parent = null;
|
|
this._maskEffect = null;
|
|
this._filterEffect = null;
|
|
this.effects = null;
|
|
this._position = null;
|
|
this._scale = null;
|
|
this._pivot = null;
|
|
this._skew = null;
|
|
this.emit("destroyed", this);
|
|
this.removeAllListeners();
|
|
const destroyChildren = typeof options === "boolean" ? options : options == null ? void 0 : options.children;
|
|
if (destroyChildren) {
|
|
for (let i = 0; i < oldChildren.length; ++i) {
|
|
oldChildren[i].destroy(options);
|
|
}
|
|
}
|
|
(_a = this.renderGroup) == null ? void 0 : _a.destroy();
|
|
this.renderGroup = null;
|
|
}
|
|
}
|
|
Container.mixin(childrenHelperMixin);
|
|
Container.mixin(toLocalGlobalMixin);
|
|
Container.mixin(onRenderMixin);
|
|
Container.mixin(measureMixin);
|
|
Container.mixin(effectsMixin);
|
|
Container.mixin(findMixin);
|
|
Container.mixin(sortMixin);
|
|
Container.mixin(cullingMixin);
|
|
|
|
"use strict";
|
|
class FederatedEvent {
|
|
/**
|
|
* @param manager - The event boundary which manages this event. Propagation can only occur
|
|
* within the boundary's jurisdiction.
|
|
*/
|
|
constructor(manager) {
|
|
/** Flags whether this event bubbles. This will take effect only if it is set before propagation. */
|
|
this.bubbles = true;
|
|
/** @deprecated since 7.0.0 */
|
|
this.cancelBubble = true;
|
|
/**
|
|
* Flags whether this event can be canceled using {@link FederatedEvent.preventDefault}. This is always
|
|
* false (for now).
|
|
*/
|
|
this.cancelable = false;
|
|
/**
|
|
* Flag added for compatibility with DOM {@code Event}. It is not used in the Federated Events
|
|
* API.
|
|
* @see https://dom.spec.whatwg.org/#dom-event-composed
|
|
*/
|
|
this.composed = false;
|
|
/** Flags whether the default response of the user agent was prevent through this event. */
|
|
this.defaultPrevented = false;
|
|
/**
|
|
* The propagation phase.
|
|
* @default {@link FederatedEvent.NONE}
|
|
*/
|
|
this.eventPhase = FederatedEvent.prototype.NONE;
|
|
/** Flags whether propagation was stopped. */
|
|
this.propagationStopped = false;
|
|
/** Flags whether propagation was immediately stopped. */
|
|
this.propagationImmediatelyStopped = false;
|
|
/** The coordinates of the event relative to the nearest DOM layer. This is a non-standard property. */
|
|
this.layer = new Point();
|
|
/** The coordinates of the event relative to the DOM document. This is a non-standard property. */
|
|
this.page = new Point();
|
|
this.NONE = 0;
|
|
this.CAPTURING_PHASE = 1;
|
|
this.AT_TARGET = 2;
|
|
this.BUBBLING_PHASE = 3;
|
|
this.manager = manager;
|
|
}
|
|
/** @readonly */
|
|
get layerX() {
|
|
return this.layer.x;
|
|
}
|
|
/** @readonly */
|
|
get layerY() {
|
|
return this.layer.y;
|
|
}
|
|
/** @readonly */
|
|
get pageX() {
|
|
return this.page.x;
|
|
}
|
|
/** @readonly */
|
|
get pageY() {
|
|
return this.page.y;
|
|
}
|
|
/**
|
|
* Fallback for the deprecated @code{InteractionEvent.data}.
|
|
* @deprecated since 7.0.0
|
|
*/
|
|
get data() {
|
|
return this;
|
|
}
|
|
/** The propagation path for this event. Alias for {@link EventBoundary.propagationPath}. */
|
|
composedPath() {
|
|
if (this.manager && (!this.path || this.path[this.path.length - 1] !== this.target)) {
|
|
this.path = this.target ? this.manager.propagationPath(this.target) : [];
|
|
}
|
|
return this.path;
|
|
}
|
|
/**
|
|
* Unimplemented method included for implementing the DOM interface {@code Event}. It will throw an {@code Error}.
|
|
* @deprecated
|
|
* @param _type
|
|
* @param _bubbles
|
|
* @param _cancelable
|
|
*/
|
|
initEvent(_type, _bubbles, _cancelable) {
|
|
throw new Error("initEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
|
|
}
|
|
/**
|
|
* Unimplemented method included for implementing the DOM interface {@code UIEvent}. It will throw an {@code Error}.
|
|
* @deprecated
|
|
* @param _typeArg
|
|
* @param _bubblesArg
|
|
* @param _cancelableArg
|
|
* @param _viewArg
|
|
* @param _detailArg
|
|
*/
|
|
initUIEvent(_typeArg, _bubblesArg, _cancelableArg, _viewArg, _detailArg) {
|
|
throw new Error("initUIEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
|
|
}
|
|
/** Prevent default behavior of PixiJS and the user agent. */
|
|
preventDefault() {
|
|
if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
|
|
this.nativeEvent.preventDefault();
|
|
}
|
|
this.defaultPrevented = true;
|
|
}
|
|
/**
|
|
* Stop this event from propagating to any addition listeners, including on the
|
|
* {@link FederatedEventTarget.currentTarget currentTarget} and also the following
|
|
* event targets on the propagation path.
|
|
*/
|
|
stopImmediatePropagation() {
|
|
this.propagationImmediatelyStopped = true;
|
|
}
|
|
/**
|
|
* Stop this event from propagating to the next {@link FederatedEventTarget}. The rest of the listeners
|
|
* on the {@link FederatedEventTarget.currentTarget currentTarget} will still be notified.
|
|
*/
|
|
stopPropagation() {
|
|
this.propagationStopped = true;
|
|
}
|
|
}
|
|
|
|
var appleIphone = /iPhone/i;
|
|
var appleIpod = /iPod/i;
|
|
var appleTablet = /iPad/i;
|
|
var appleUniversal = /\biOS-universal(?:.+)Mac\b/i;
|
|
var androidPhone = /\bAndroid(?:.+)Mobile\b/i;
|
|
var androidTablet = /Android/i;
|
|
var amazonPhone = /(?:SD4930UR|\bSilk(?:.+)Mobile\b)/i;
|
|
var amazonTablet = /Silk/i;
|
|
var windowsPhone = /Windows Phone/i;
|
|
var windowsTablet = /\bWindows(?:.+)ARM\b/i;
|
|
var otherBlackBerry = /BlackBerry/i;
|
|
var otherBlackBerry10 = /BB10/i;
|
|
var otherOpera = /Opera Mini/i;
|
|
var otherChrome = /\b(CriOS|Chrome)(?:.+)Mobile/i;
|
|
var otherFirefox = /Mobile(?:.+)Firefox\b/i;
|
|
var isAppleTabletOnIos13 = function (navigator) {
|
|
return (typeof navigator !== 'undefined' &&
|
|
navigator.platform === 'MacIntel' &&
|
|
typeof navigator.maxTouchPoints === 'number' &&
|
|
navigator.maxTouchPoints > 1 &&
|
|
typeof MSStream === 'undefined');
|
|
};
|
|
function createMatch(userAgent) {
|
|
return function (regex) { return regex.test(userAgent); };
|
|
}
|
|
function isMobile$1(param) {
|
|
var nav = {
|
|
userAgent: '',
|
|
platform: '',
|
|
maxTouchPoints: 0
|
|
};
|
|
if (!param && typeof navigator !== 'undefined') {
|
|
nav = {
|
|
userAgent: navigator.userAgent,
|
|
platform: navigator.platform,
|
|
maxTouchPoints: navigator.maxTouchPoints || 0
|
|
};
|
|
}
|
|
else if (typeof param === 'string') {
|
|
nav.userAgent = param;
|
|
}
|
|
else if (param && param.userAgent) {
|
|
nav = {
|
|
userAgent: param.userAgent,
|
|
platform: param.platform,
|
|
maxTouchPoints: param.maxTouchPoints || 0
|
|
};
|
|
}
|
|
var userAgent = nav.userAgent;
|
|
var tmp = userAgent.split('[FBAN');
|
|
if (typeof tmp[1] !== 'undefined') {
|
|
userAgent = tmp[0];
|
|
}
|
|
tmp = userAgent.split('Twitter');
|
|
if (typeof tmp[1] !== 'undefined') {
|
|
userAgent = tmp[0];
|
|
}
|
|
var match = createMatch(userAgent);
|
|
var result = {
|
|
apple: {
|
|
phone: match(appleIphone) && !match(windowsPhone),
|
|
ipod: match(appleIpod),
|
|
tablet: !match(appleIphone) &&
|
|
(match(appleTablet) || isAppleTabletOnIos13(nav)) &&
|
|
!match(windowsPhone),
|
|
universal: match(appleUniversal),
|
|
device: (match(appleIphone) ||
|
|
match(appleIpod) ||
|
|
match(appleTablet) ||
|
|
match(appleUniversal) ||
|
|
isAppleTabletOnIos13(nav)) &&
|
|
!match(windowsPhone)
|
|
},
|
|
amazon: {
|
|
phone: match(amazonPhone),
|
|
tablet: !match(amazonPhone) && match(amazonTablet),
|
|
device: match(amazonPhone) || match(amazonTablet)
|
|
},
|
|
android: {
|
|
phone: (!match(windowsPhone) && match(amazonPhone)) ||
|
|
(!match(windowsPhone) && match(androidPhone)),
|
|
tablet: !match(windowsPhone) &&
|
|
!match(amazonPhone) &&
|
|
!match(androidPhone) &&
|
|
(match(amazonTablet) || match(androidTablet)),
|
|
device: (!match(windowsPhone) &&
|
|
(match(amazonPhone) ||
|
|
match(amazonTablet) ||
|
|
match(androidPhone) ||
|
|
match(androidTablet))) ||
|
|
match(/\bokhttp\b/i)
|
|
},
|
|
windows: {
|
|
phone: match(windowsPhone),
|
|
tablet: match(windowsTablet),
|
|
device: match(windowsPhone) || match(windowsTablet)
|
|
},
|
|
other: {
|
|
blackberry: match(otherBlackBerry),
|
|
blackberry10: match(otherBlackBerry10),
|
|
opera: match(otherOpera),
|
|
firefox: match(otherFirefox),
|
|
chrome: match(otherChrome),
|
|
device: match(otherBlackBerry) ||
|
|
match(otherBlackBerry10) ||
|
|
match(otherOpera) ||
|
|
match(otherFirefox) ||
|
|
match(otherChrome)
|
|
},
|
|
any: false,
|
|
phone: false,
|
|
tablet: false
|
|
};
|
|
result.any =
|
|
result.apple.device ||
|
|
result.android.device ||
|
|
result.windows.device ||
|
|
result.other.device;
|
|
result.phone =
|
|
result.apple.phone || result.android.phone || result.windows.phone;
|
|
result.tablet =
|
|
result.apple.tablet || result.android.tablet || result.windows.tablet;
|
|
return result;
|
|
}
|
|
|
|
"use strict";
|
|
var _a;
|
|
const isMobileCall = (_a = isMobile$1.default) != null ? _a : isMobile$1;
|
|
const isMobile = isMobileCall(globalThis.navigator);
|
|
|
|
"use strict";
|
|
const KEY_CODE_TAB = 9;
|
|
const DIV_TOUCH_SIZE = 100;
|
|
const DIV_TOUCH_POS_X = 0;
|
|
const DIV_TOUCH_POS_Y = 0;
|
|
const DIV_TOUCH_ZINDEX = 2;
|
|
const DIV_HOOK_SIZE = 1;
|
|
const DIV_HOOK_POS_X = -1e3;
|
|
const DIV_HOOK_POS_Y = -1e3;
|
|
const DIV_HOOK_ZINDEX = 2;
|
|
class AccessibilitySystem {
|
|
// 2fps
|
|
// eslint-disable-next-line jsdoc/require-param
|
|
/**
|
|
* @param {WebGLRenderer|WebGPURenderer} renderer - A reference to the current renderer
|
|
*/
|
|
constructor(renderer, _mobileInfo = isMobile) {
|
|
this._mobileInfo = _mobileInfo;
|
|
/** Setting this to true will visually show the divs. */
|
|
this.debug = false;
|
|
/** Internal variable, see isActive getter. */
|
|
this._isActive = false;
|
|
/** Internal variable, see isMobileAccessibility getter. */
|
|
this._isMobileAccessibility = false;
|
|
/** A simple pool for storing divs. */
|
|
this._pool = [];
|
|
/** This is a tick used to check if an object is no longer being rendered. */
|
|
this._renderId = 0;
|
|
/** The array of currently active accessible items. */
|
|
this._children = [];
|
|
/** Count to throttle div updates on android devices. */
|
|
this._androidUpdateCount = 0;
|
|
/** The frequency to update the div elements. */
|
|
this._androidUpdateFrequency = 500;
|
|
this._hookDiv = null;
|
|
if (_mobileInfo.tablet || _mobileInfo.phone) {
|
|
this._createTouchHook();
|
|
}
|
|
const div = document.createElement("div");
|
|
div.style.width = `${DIV_TOUCH_SIZE}px`;
|
|
div.style.height = `${DIV_TOUCH_SIZE}px`;
|
|
div.style.position = "absolute";
|
|
div.style.top = `${DIV_TOUCH_POS_X}px`;
|
|
div.style.left = `${DIV_TOUCH_POS_Y}px`;
|
|
div.style.zIndex = DIV_TOUCH_ZINDEX.toString();
|
|
this._div = div;
|
|
this._renderer = renderer;
|
|
this._onKeyDown = this._onKeyDown.bind(this);
|
|
this._onMouseMove = this._onMouseMove.bind(this);
|
|
globalThis.addEventListener("keydown", this._onKeyDown, false);
|
|
}
|
|
/**
|
|
* Value of `true` if accessibility is currently active and accessibility layers are showing.
|
|
* @member {boolean}
|
|
* @readonly
|
|
*/
|
|
get isActive() {
|
|
return this._isActive;
|
|
}
|
|
/**
|
|
* Value of `true` if accessibility is enabled for touch devices.
|
|
* @member {boolean}
|
|
* @readonly
|
|
*/
|
|
get isMobileAccessibility() {
|
|
return this._isMobileAccessibility;
|
|
}
|
|
get hookDiv() {
|
|
return this._hookDiv;
|
|
}
|
|
/**
|
|
* Creates the touch hooks.
|
|
* @private
|
|
*/
|
|
_createTouchHook() {
|
|
const hookDiv = document.createElement("button");
|
|
hookDiv.style.width = `${DIV_HOOK_SIZE}px`;
|
|
hookDiv.style.height = `${DIV_HOOK_SIZE}px`;
|
|
hookDiv.style.position = "absolute";
|
|
hookDiv.style.top = `${DIV_HOOK_POS_X}px`;
|
|
hookDiv.style.left = `${DIV_HOOK_POS_Y}px`;
|
|
hookDiv.style.zIndex = DIV_HOOK_ZINDEX.toString();
|
|
hookDiv.style.backgroundColor = "#FF0000";
|
|
hookDiv.title = "select to enable accessibility for this content";
|
|
hookDiv.addEventListener("focus", () => {
|
|
this._isMobileAccessibility = true;
|
|
this._activate();
|
|
this._destroyTouchHook();
|
|
});
|
|
document.body.appendChild(hookDiv);
|
|
this._hookDiv = hookDiv;
|
|
}
|
|
/**
|
|
* Destroys the touch hooks.
|
|
* @private
|
|
*/
|
|
_destroyTouchHook() {
|
|
if (!this._hookDiv) {
|
|
return;
|
|
}
|
|
document.body.removeChild(this._hookDiv);
|
|
this._hookDiv = null;
|
|
}
|
|
/**
|
|
* Activating will cause the Accessibility layer to be shown.
|
|
* This is called when a user presses the tab key.
|
|
* @private
|
|
*/
|
|
_activate() {
|
|
var _a;
|
|
if (this._isActive) {
|
|
return;
|
|
}
|
|
this._isActive = true;
|
|
globalThis.document.addEventListener("mousemove", this._onMouseMove, true);
|
|
globalThis.removeEventListener("keydown", this._onKeyDown, false);
|
|
this._renderer.runners.postrender.add(this);
|
|
(_a = this._renderer.view.canvas.parentNode) == null ? void 0 : _a.appendChild(this._div);
|
|
}
|
|
/**
|
|
* Deactivating will cause the Accessibility layer to be hidden.
|
|
* This is called when a user moves the mouse.
|
|
* @private
|
|
*/
|
|
_deactivate() {
|
|
var _a;
|
|
if (!this._isActive || this._isMobileAccessibility) {
|
|
return;
|
|
}
|
|
this._isActive = false;
|
|
globalThis.document.removeEventListener("mousemove", this._onMouseMove, true);
|
|
globalThis.addEventListener("keydown", this._onKeyDown, false);
|
|
this._renderer.runners.postrender.remove(this);
|
|
(_a = this._div.parentNode) == null ? void 0 : _a.removeChild(this._div);
|
|
}
|
|
/**
|
|
* This recursive function will run through the scene graph and add any new accessible objects to the DOM layer.
|
|
* @private
|
|
* @param {Container} container - The Container to check.
|
|
*/
|
|
_updateAccessibleObjects(container) {
|
|
if (!container.visible || !container.accessibleChildren) {
|
|
return;
|
|
}
|
|
if (container.accessible && container.isInteractive()) {
|
|
if (!container._accessibleActive) {
|
|
this._addChild(container);
|
|
}
|
|
container._renderId = this._renderId;
|
|
}
|
|
const children = container.children;
|
|
if (children) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
this._updateAccessibleObjects(children[i]);
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Runner init called, view is available at this point.
|
|
* @ignore
|
|
*/
|
|
init(options) {
|
|
var _a;
|
|
this.debug = (_a = options == null ? void 0 : options.debug) != null ? _a : this.debug;
|
|
this._renderer.runners.postrender.remove(this);
|
|
}
|
|
/**
|
|
* Runner postrender was called, ensure that all divs are mapped correctly to their Containers.
|
|
* Only fires while active.
|
|
* @ignore
|
|
*/
|
|
postrender() {
|
|
const now = performance.now();
|
|
if (this._mobileInfo.android.device && now < this._androidUpdateCount) {
|
|
return;
|
|
}
|
|
this._androidUpdateCount = now + this._androidUpdateFrequency;
|
|
if (!this._renderer.renderingToScreen || !this._renderer.view.canvas) {
|
|
return;
|
|
}
|
|
if (this._renderer.lastObjectRendered) {
|
|
this._updateAccessibleObjects(this._renderer.lastObjectRendered);
|
|
}
|
|
const { x, y, width, height } = this._renderer.view.canvas.getBoundingClientRect();
|
|
const { width: viewWidth, height: viewHeight, resolution } = this._renderer;
|
|
const sx = width / viewWidth * resolution;
|
|
const sy = height / viewHeight * resolution;
|
|
let div = this._div;
|
|
div.style.left = `${x}px`;
|
|
div.style.top = `${y}px`;
|
|
div.style.width = `${viewWidth}px`;
|
|
div.style.height = `${viewHeight}px`;
|
|
for (let i = 0; i < this._children.length; i++) {
|
|
const child = this._children[i];
|
|
if (child._renderId !== this._renderId) {
|
|
child._accessibleActive = false;
|
|
removeItems(this._children, i, 1);
|
|
this._div.removeChild(child._accessibleDiv);
|
|
this._pool.push(child._accessibleDiv);
|
|
child._accessibleDiv = null;
|
|
i--;
|
|
} else {
|
|
div = child._accessibleDiv;
|
|
let hitArea = child.hitArea;
|
|
const wt = child.worldTransform;
|
|
if (child.hitArea) {
|
|
div.style.left = `${(wt.tx + hitArea.x * wt.a) * sx}px`;
|
|
div.style.top = `${(wt.ty + hitArea.y * wt.d) * sy}px`;
|
|
div.style.width = `${hitArea.width * wt.a * sx}px`;
|
|
div.style.height = `${hitArea.height * wt.d * sy}px`;
|
|
} else {
|
|
hitArea = child.getBounds().rectangle;
|
|
this._capHitArea(hitArea);
|
|
div.style.left = `${hitArea.x * sx}px`;
|
|
div.style.top = `${hitArea.y * sy}px`;
|
|
div.style.width = `${hitArea.width * sx}px`;
|
|
div.style.height = `${hitArea.height * sy}px`;
|
|
if (div.title !== child.accessibleTitle && child.accessibleTitle !== null) {
|
|
div.title = child.accessibleTitle || "";
|
|
}
|
|
if (div.getAttribute("aria-label") !== child.accessibleHint && child.accessibleHint !== null) {
|
|
div.setAttribute("aria-label", child.accessibleHint || "");
|
|
}
|
|
}
|
|
if (child.accessibleTitle !== div.title || child.tabIndex !== div.tabIndex) {
|
|
div.title = child.accessibleTitle || "";
|
|
div.tabIndex = child.tabIndex;
|
|
if (this.debug) {
|
|
this._updateDebugHTML(div);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this._renderId++;
|
|
}
|
|
/**
|
|
* private function that will visually add the information to the
|
|
* accessibility div
|
|
* @param {HTMLElement} div -
|
|
*/
|
|
_updateDebugHTML(div) {
|
|
div.innerHTML = `type: ${div.type}</br> title : ${div.title}</br> tabIndex: ${div.tabIndex}`;
|
|
}
|
|
/**
|
|
* Adjust the hit area based on the bounds of a display object
|
|
* @param {Rectangle} hitArea - Bounds of the child
|
|
*/
|
|
_capHitArea(hitArea) {
|
|
if (hitArea.x < 0) {
|
|
hitArea.width += hitArea.x;
|
|
hitArea.x = 0;
|
|
}
|
|
if (hitArea.y < 0) {
|
|
hitArea.height += hitArea.y;
|
|
hitArea.y = 0;
|
|
}
|
|
const { width: viewWidth, height: viewHeight } = this._renderer;
|
|
if (hitArea.x + hitArea.width > viewWidth) {
|
|
hitArea.width = viewWidth - hitArea.x;
|
|
}
|
|
if (hitArea.y + hitArea.height > viewHeight) {
|
|
hitArea.height = viewHeight - hitArea.y;
|
|
}
|
|
}
|
|
/**
|
|
* Adds a Container to the accessibility manager
|
|
* @private
|
|
* @param {Container} container - The child to make accessible.
|
|
*/
|
|
_addChild(container) {
|
|
let div = this._pool.pop();
|
|
if (!div) {
|
|
div = document.createElement("button");
|
|
div.style.width = `${DIV_TOUCH_SIZE}px`;
|
|
div.style.height = `${DIV_TOUCH_SIZE}px`;
|
|
div.style.backgroundColor = this.debug ? "rgba(255,255,255,0.5)" : "transparent";
|
|
div.style.position = "absolute";
|
|
div.style.zIndex = DIV_TOUCH_ZINDEX.toString();
|
|
div.style.borderStyle = "none";
|
|
if (navigator.userAgent.toLowerCase().includes("chrome")) {
|
|
div.setAttribute("aria-live", "off");
|
|
} else {
|
|
div.setAttribute("aria-live", "polite");
|
|
}
|
|
if (navigator.userAgent.match(/rv:.*Gecko\//)) {
|
|
div.setAttribute("aria-relevant", "additions");
|
|
} else {
|
|
div.setAttribute("aria-relevant", "text");
|
|
}
|
|
div.addEventListener("click", this._onClick.bind(this));
|
|
div.addEventListener("focus", this._onFocus.bind(this));
|
|
div.addEventListener("focusout", this._onFocusOut.bind(this));
|
|
}
|
|
div.style.pointerEvents = container.accessiblePointerEvents;
|
|
div.type = container.accessibleType;
|
|
if (container.accessibleTitle && container.accessibleTitle !== null) {
|
|
div.title = container.accessibleTitle;
|
|
} else if (!container.accessibleHint || container.accessibleHint === null) {
|
|
div.title = `container ${container.tabIndex}`;
|
|
}
|
|
if (container.accessibleHint && container.accessibleHint !== null) {
|
|
div.setAttribute("aria-label", container.accessibleHint);
|
|
}
|
|
if (this.debug) {
|
|
this._updateDebugHTML(div);
|
|
}
|
|
container._accessibleActive = true;
|
|
container._accessibleDiv = div;
|
|
div.container = container;
|
|
this._children.push(container);
|
|
this._div.appendChild(container._accessibleDiv);
|
|
container._accessibleDiv.tabIndex = container.tabIndex;
|
|
}
|
|
/**
|
|
* Dispatch events with the EventSystem.
|
|
* @param e
|
|
* @param type
|
|
* @private
|
|
*/
|
|
_dispatchEvent(e, type) {
|
|
const { container: target } = e.target;
|
|
const boundary = this._renderer.events.rootBoundary;
|
|
const event = Object.assign(new FederatedEvent(boundary), { target });
|
|
boundary.rootTarget = this._renderer.lastObjectRendered;
|
|
type.forEach((type2) => boundary.dispatchEvent(event, type2));
|
|
}
|
|
/**
|
|
* Maps the div button press to pixi's EventSystem (click)
|
|
* @private
|
|
* @param {MouseEvent} e - The click event.
|
|
*/
|
|
_onClick(e) {
|
|
this._dispatchEvent(e, ["click", "pointertap", "tap"]);
|
|
}
|
|
/**
|
|
* Maps the div focus events to pixi's EventSystem (mouseover)
|
|
* @private
|
|
* @param {FocusEvent} e - The focus event.
|
|
*/
|
|
_onFocus(e) {
|
|
if (!e.target.getAttribute("aria-live")) {
|
|
e.target.setAttribute("aria-live", "assertive");
|
|
}
|
|
this._dispatchEvent(e, ["mouseover"]);
|
|
}
|
|
/**
|
|
* Maps the div focus events to pixi's EventSystem (mouseout)
|
|
* @private
|
|
* @param {FocusEvent} e - The focusout event.
|
|
*/
|
|
_onFocusOut(e) {
|
|
if (!e.target.getAttribute("aria-live")) {
|
|
e.target.setAttribute("aria-live", "polite");
|
|
}
|
|
this._dispatchEvent(e, ["mouseout"]);
|
|
}
|
|
/**
|
|
* Is called when a key is pressed
|
|
* @private
|
|
* @param {KeyboardEvent} e - The keydown event.
|
|
*/
|
|
_onKeyDown(e) {
|
|
if (e.keyCode !== KEY_CODE_TAB) {
|
|
return;
|
|
}
|
|
this._activate();
|
|
}
|
|
/**
|
|
* Is called when the mouse moves across the renderer element
|
|
* @private
|
|
* @param {MouseEvent} e - The mouse event.
|
|
*/
|
|
_onMouseMove(e) {
|
|
if (e.movementX === 0 && e.movementY === 0) {
|
|
return;
|
|
}
|
|
this._deactivate();
|
|
}
|
|
/** Destroys the accessibility manager */
|
|
destroy() {
|
|
this._destroyTouchHook();
|
|
this._div = null;
|
|
globalThis.document.removeEventListener("mousemove", this._onMouseMove, true);
|
|
globalThis.removeEventListener("keydown", this._onKeyDown);
|
|
this._pool = null;
|
|
this._children = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
AccessibilitySystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "accessibility"
|
|
};
|
|
|
|
"use strict";
|
|
const accessibilityTarget = {
|
|
/**
|
|
* Flag for if the object is accessible. If true AccessibilityManager will overlay a
|
|
* shadow div with attributes set
|
|
* @member {boolean}
|
|
* @memberof scene.Container#
|
|
*/
|
|
accessible: false,
|
|
/**
|
|
* Sets the title attribute of the shadow div
|
|
* If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'
|
|
* @member {string}
|
|
* @memberof scene.Container#
|
|
*/
|
|
accessibleTitle: null,
|
|
/**
|
|
* Sets the aria-label attribute of the shadow div
|
|
* @member {string}
|
|
* @memberof scene.Container#
|
|
*/
|
|
accessibleHint: null,
|
|
/**
|
|
* @member {number}
|
|
* @memberof scene.Container#
|
|
* @todo Needs docs.
|
|
*/
|
|
tabIndex: 0,
|
|
/**
|
|
* @member {boolean}
|
|
* @memberof scene.Container#
|
|
* @private
|
|
*/
|
|
_accessibleActive: false,
|
|
/**
|
|
* @memberof scene.Container#
|
|
* @private
|
|
*/
|
|
_accessibleDiv: null,
|
|
/**
|
|
* Specify the type of div the accessible layer is. Screen readers treat the element differently
|
|
* depending on this type. Defaults to button.
|
|
* @member {string}
|
|
* @memberof scene.Container#
|
|
* @default 'button'
|
|
*/
|
|
accessibleType: "button",
|
|
/**
|
|
* Specify the pointer-events the accessible div will use
|
|
* Defaults to auto.
|
|
* @type {PointerEvents}
|
|
* @memberof scene.Container#
|
|
* @default 'auto'
|
|
*/
|
|
accessiblePointerEvents: "auto",
|
|
/**
|
|
* Setting to false will prevent any children inside this container to
|
|
* be accessible. Defaults to true.
|
|
* @member {boolean}
|
|
* @memberof scene.Container#
|
|
* @default true
|
|
*/
|
|
accessibleChildren: true,
|
|
/**
|
|
* @member {number}
|
|
* @memberof scene.Container#
|
|
* @private
|
|
*/
|
|
_renderId: -1
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(AccessibilitySystem);
|
|
Container.mixin(accessibilityTarget);
|
|
|
|
"use strict";
|
|
class ResizePlugin {
|
|
/**
|
|
* Initialize the plugin with scope of application instance
|
|
* @static
|
|
* @private
|
|
* @param {object} [options] - See application options
|
|
*/
|
|
static init(options) {
|
|
Object.defineProperty(
|
|
this,
|
|
"resizeTo",
|
|
/**
|
|
* The HTML element or window to automatically resize the
|
|
* renderer's view element to match width and height.
|
|
* @member {Window|HTMLElement}
|
|
* @name resizeTo
|
|
* @memberof app.Application#
|
|
*/
|
|
{
|
|
set(dom) {
|
|
globalThis.removeEventListener("resize", this.queueResize);
|
|
this._resizeTo = dom;
|
|
if (dom) {
|
|
globalThis.addEventListener("resize", this.queueResize);
|
|
this.resize();
|
|
}
|
|
},
|
|
get() {
|
|
return this._resizeTo;
|
|
}
|
|
}
|
|
);
|
|
this.queueResize = () => {
|
|
if (!this._resizeTo) {
|
|
return;
|
|
}
|
|
this._cancelResize();
|
|
this._resizeId = requestAnimationFrame(() => this.resize());
|
|
};
|
|
this._cancelResize = () => {
|
|
if (this._resizeId) {
|
|
cancelAnimationFrame(this._resizeId);
|
|
this._resizeId = null;
|
|
}
|
|
};
|
|
this.resize = () => {
|
|
if (!this._resizeTo) {
|
|
return;
|
|
}
|
|
this._cancelResize();
|
|
let width;
|
|
let height;
|
|
if (this._resizeTo === globalThis.window) {
|
|
width = globalThis.innerWidth;
|
|
height = globalThis.innerHeight;
|
|
} else {
|
|
const { clientWidth, clientHeight } = this._resizeTo;
|
|
width = clientWidth;
|
|
height = clientHeight;
|
|
}
|
|
this.renderer.resize(width, height);
|
|
this.render();
|
|
};
|
|
this._resizeId = null;
|
|
this._resizeTo = null;
|
|
this.resizeTo = options.resizeTo || null;
|
|
}
|
|
/**
|
|
* Clean up the ticker, scoped to application
|
|
* @static
|
|
* @private
|
|
*/
|
|
static destroy() {
|
|
globalThis.removeEventListener("resize", this.queueResize);
|
|
this._cancelResize();
|
|
this._cancelResize = null;
|
|
this.queueResize = null;
|
|
this.resizeTo = null;
|
|
this.resize = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
ResizePlugin.extension = ExtensionType.Application;
|
|
|
|
"use strict";
|
|
var UPDATE_PRIORITY = /* @__PURE__ */ ((UPDATE_PRIORITY2) => {
|
|
UPDATE_PRIORITY2[UPDATE_PRIORITY2["INTERACTION"] = 50] = "INTERACTION";
|
|
UPDATE_PRIORITY2[UPDATE_PRIORITY2["HIGH"] = 25] = "HIGH";
|
|
UPDATE_PRIORITY2[UPDATE_PRIORITY2["NORMAL"] = 0] = "NORMAL";
|
|
UPDATE_PRIORITY2[UPDATE_PRIORITY2["LOW"] = -25] = "LOW";
|
|
UPDATE_PRIORITY2[UPDATE_PRIORITY2["UTILITY"] = -50] = "UTILITY";
|
|
return UPDATE_PRIORITY2;
|
|
})(UPDATE_PRIORITY || {});
|
|
|
|
"use strict";
|
|
class TickerListener {
|
|
/**
|
|
* Constructor
|
|
* @private
|
|
* @param fn - The listener function to be added for one update
|
|
* @param context - The listener context
|
|
* @param priority - The priority for emitting
|
|
* @param once - If the handler should fire once
|
|
*/
|
|
constructor(fn, context = null, priority = 0, once = false) {
|
|
/** The next item in chain. */
|
|
this.next = null;
|
|
/** The previous item in chain. */
|
|
this.previous = null;
|
|
/** `true` if this listener has been destroyed already. */
|
|
this._destroyed = false;
|
|
this._fn = fn;
|
|
this._context = context;
|
|
this.priority = priority;
|
|
this._once = once;
|
|
}
|
|
/**
|
|
* Simple compare function to figure out if a function and context match.
|
|
* @param fn - The listener function to be added for one update
|
|
* @param context - The listener context
|
|
* @returns `true` if the listener match the arguments
|
|
*/
|
|
match(fn, context = null) {
|
|
return this._fn === fn && this._context === context;
|
|
}
|
|
/**
|
|
* Emit by calling the current function.
|
|
* @param ticker - The ticker emitting.
|
|
* @returns Next ticker
|
|
*/
|
|
emit(ticker) {
|
|
if (this._fn) {
|
|
if (this._context) {
|
|
this._fn.call(this._context, ticker);
|
|
} else {
|
|
this._fn(ticker);
|
|
}
|
|
}
|
|
const redirect = this.next;
|
|
if (this._once) {
|
|
this.destroy(true);
|
|
}
|
|
if (this._destroyed) {
|
|
this.next = null;
|
|
}
|
|
return redirect;
|
|
}
|
|
/**
|
|
* Connect to the list.
|
|
* @param previous - Input node, previous listener
|
|
*/
|
|
connect(previous) {
|
|
this.previous = previous;
|
|
if (previous.next) {
|
|
previous.next.previous = this;
|
|
}
|
|
this.next = previous.next;
|
|
previous.next = this;
|
|
}
|
|
/**
|
|
* Destroy and don't use after this.
|
|
* @param hard - `true` to remove the `next` reference, this
|
|
* is considered a hard destroy. Soft destroy maintains the next reference.
|
|
* @returns The listener to redirect while emitting or removing.
|
|
*/
|
|
destroy(hard = false) {
|
|
this._destroyed = true;
|
|
this._fn = null;
|
|
this._context = null;
|
|
if (this.previous) {
|
|
this.previous.next = this.next;
|
|
}
|
|
if (this.next) {
|
|
this.next.previous = this.previous;
|
|
}
|
|
const redirect = this.next;
|
|
this.next = hard ? null : redirect;
|
|
this.previous = null;
|
|
return redirect;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const _Ticker = class _Ticker {
|
|
constructor() {
|
|
/**
|
|
* Whether or not this ticker should invoke the method
|
|
* {@link ticker.Ticker#start|start} automatically when a listener is added.
|
|
*/
|
|
this.autoStart = false;
|
|
/**
|
|
* Scalar time value from last frame to this frame.
|
|
* This value is capped by setting {@link ticker.Ticker#minFPS|minFPS}
|
|
* and is scaled with {@link ticker.Ticker#speed|speed}.
|
|
* **Note:** The cap may be exceeded by scaling.
|
|
*/
|
|
this.deltaTime = 1;
|
|
/**
|
|
* The last time {@link ticker.Ticker#update|update} was invoked.
|
|
* This value is also reset internally outside of invoking
|
|
* update, but only when a new animation frame is requested.
|
|
* If the platform supports DOMHighResTimeStamp,
|
|
* this value will have a precision of 1 µs.
|
|
*/
|
|
this.lastTime = -1;
|
|
/**
|
|
* Factor of current {@link ticker.Ticker#deltaTime|deltaTime}.
|
|
* @example
|
|
* // Scales ticker.deltaTime to what would be
|
|
* // the equivalent of approximately 120 FPS
|
|
* ticker.speed = 2;
|
|
*/
|
|
this.speed = 1;
|
|
/**
|
|
* Whether or not this ticker has been started.
|
|
* `true` if {@link ticker.Ticker#start|start} has been called.
|
|
* `false` if {@link ticker.Ticker#stop|Stop} has been called.
|
|
* While `false`, this value may change to `true` in the
|
|
* event of {@link ticker.Ticker#autoStart|autoStart} being `true`
|
|
* and a listener is added.
|
|
*/
|
|
this.started = false;
|
|
/** Internal current frame request ID */
|
|
this._requestId = null;
|
|
/**
|
|
* Internal value managed by minFPS property setter and getter.
|
|
* This is the maximum allowed milliseconds between updates.
|
|
*/
|
|
this._maxElapsedMS = 100;
|
|
/**
|
|
* Internal value managed by minFPS property setter and getter.
|
|
* This is the minimum allowed milliseconds between updates.
|
|
*/
|
|
this._minElapsedMS = 0;
|
|
/** If enabled, deleting is disabled.*/
|
|
this._protected = false;
|
|
/** The last time keyframe was executed. Maintains a relatively fixed interval with the previous value. */
|
|
this._lastFrame = -1;
|
|
this._head = new TickerListener(null, null, Infinity);
|
|
this.deltaMS = 1 / _Ticker.targetFPMS;
|
|
this.elapsedMS = 1 / _Ticker.targetFPMS;
|
|
this._tick = (time) => {
|
|
this._requestId = null;
|
|
if (this.started) {
|
|
this.update(time);
|
|
if (this.started && this._requestId === null && this._head.next) {
|
|
this._requestId = requestAnimationFrame(this._tick);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
/**
|
|
* Conditionally requests a new animation frame.
|
|
* If a frame has not already been requested, and if the internal
|
|
* emitter has listeners, a new frame is requested.
|
|
* @private
|
|
*/
|
|
_requestIfNeeded() {
|
|
if (this._requestId === null && this._head.next) {
|
|
this.lastTime = performance.now();
|
|
this._lastFrame = this.lastTime;
|
|
this._requestId = requestAnimationFrame(this._tick);
|
|
}
|
|
}
|
|
/**
|
|
* Conditionally cancels a pending animation frame.
|
|
* @private
|
|
*/
|
|
_cancelIfNeeded() {
|
|
if (this._requestId !== null) {
|
|
cancelAnimationFrame(this._requestId);
|
|
this._requestId = null;
|
|
}
|
|
}
|
|
/**
|
|
* Conditionally requests a new animation frame.
|
|
* If the ticker has been started it checks if a frame has not already
|
|
* been requested, and if the internal emitter has listeners. If these
|
|
* conditions are met, a new frame is requested. If the ticker has not
|
|
* been started, but autoStart is `true`, then the ticker starts now,
|
|
* and continues with the previous conditions to request a new frame.
|
|
* @private
|
|
*/
|
|
_startIfPossible() {
|
|
if (this.started) {
|
|
this._requestIfNeeded();
|
|
} else if (this.autoStart) {
|
|
this.start();
|
|
}
|
|
}
|
|
/**
|
|
* Register a handler for tick events. Calls continuously unless
|
|
* it is removed or the ticker is stopped.
|
|
* @param fn - The listener function to be added for updates
|
|
* @param context - The listener context
|
|
* @param {number} [priority=UPDATE_PRIORITY.NORMAL] - The priority for emitting
|
|
* @returns This instance of a ticker
|
|
*/
|
|
add(fn, context, priority = UPDATE_PRIORITY.NORMAL) {
|
|
return this._addListener(new TickerListener(fn, context, priority));
|
|
}
|
|
/**
|
|
* Add a handler for the tick event which is only execute once.
|
|
* @param fn - The listener function to be added for one update
|
|
* @param context - The listener context
|
|
* @param {number} [priority=UPDATE_PRIORITY.NORMAL] - The priority for emitting
|
|
* @returns This instance of a ticker
|
|
*/
|
|
addOnce(fn, context, priority = UPDATE_PRIORITY.NORMAL) {
|
|
return this._addListener(new TickerListener(fn, context, priority, true));
|
|
}
|
|
/**
|
|
* Internally adds the event handler so that it can be sorted by priority.
|
|
* Priority allows certain handler (user, AnimatedSprite, Interaction) to be run
|
|
* before the rendering.
|
|
* @private
|
|
* @param listener - Current listener being added.
|
|
* @returns This instance of a ticker
|
|
*/
|
|
_addListener(listener) {
|
|
let current = this._head.next;
|
|
let previous = this._head;
|
|
if (!current) {
|
|
listener.connect(previous);
|
|
} else {
|
|
while (current) {
|
|
if (listener.priority > current.priority) {
|
|
listener.connect(previous);
|
|
break;
|
|
}
|
|
previous = current;
|
|
current = current.next;
|
|
}
|
|
if (!listener.previous) {
|
|
listener.connect(previous);
|
|
}
|
|
}
|
|
this._startIfPossible();
|
|
return this;
|
|
}
|
|
/**
|
|
* Removes any handlers matching the function and context parameters.
|
|
* If no handlers are left after removing, then it cancels the animation frame.
|
|
* @param fn - The listener function to be removed
|
|
* @param context - The listener context to be removed
|
|
* @returns This instance of a ticker
|
|
*/
|
|
remove(fn, context) {
|
|
let listener = this._head.next;
|
|
while (listener) {
|
|
if (listener.match(fn, context)) {
|
|
listener = listener.destroy();
|
|
} else {
|
|
listener = listener.next;
|
|
}
|
|
}
|
|
if (!this._head.next) {
|
|
this._cancelIfNeeded();
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* The number of listeners on this ticker, calculated by walking through linked list
|
|
* @readonly
|
|
* @member {number}
|
|
*/
|
|
get count() {
|
|
if (!this._head) {
|
|
return 0;
|
|
}
|
|
let count = 0;
|
|
let current = this._head;
|
|
while (current = current.next) {
|
|
count++;
|
|
}
|
|
return count;
|
|
}
|
|
/** Starts the ticker. If the ticker has listeners a new animation frame is requested at this point. */
|
|
start() {
|
|
if (!this.started) {
|
|
this.started = true;
|
|
this._requestIfNeeded();
|
|
}
|
|
}
|
|
/** Stops the ticker. If the ticker has requested an animation frame it is canceled at this point. */
|
|
stop() {
|
|
if (this.started) {
|
|
this.started = false;
|
|
this._cancelIfNeeded();
|
|
}
|
|
}
|
|
/** Destroy the ticker and don't use after this. Calling this method removes all references to internal events. */
|
|
destroy() {
|
|
if (!this._protected) {
|
|
this.stop();
|
|
let listener = this._head.next;
|
|
while (listener) {
|
|
listener = listener.destroy(true);
|
|
}
|
|
this._head.destroy();
|
|
this._head = null;
|
|
}
|
|
}
|
|
/**
|
|
* Triggers an update. An update entails setting the
|
|
* current {@link ticker.Ticker#elapsedMS|elapsedMS},
|
|
* the current {@link ticker.Ticker#deltaTime|deltaTime},
|
|
* invoking all listeners with current deltaTime,
|
|
* and then finally setting {@link ticker.Ticker#lastTime|lastTime}
|
|
* with the value of currentTime that was provided.
|
|
* This method will be called automatically by animation
|
|
* frame callbacks if the ticker instance has been started
|
|
* and listeners are added.
|
|
* @param {number} [currentTime=performance.now()] - the current time of execution
|
|
*/
|
|
update(currentTime = performance.now()) {
|
|
let elapsedMS;
|
|
if (currentTime > this.lastTime) {
|
|
elapsedMS = this.elapsedMS = currentTime - this.lastTime;
|
|
if (elapsedMS > this._maxElapsedMS) {
|
|
elapsedMS = this._maxElapsedMS;
|
|
}
|
|
elapsedMS *= this.speed;
|
|
if (this._minElapsedMS) {
|
|
const delta = currentTime - this._lastFrame | 0;
|
|
if (delta < this._minElapsedMS) {
|
|
return;
|
|
}
|
|
this._lastFrame = currentTime - delta % this._minElapsedMS;
|
|
}
|
|
this.deltaMS = elapsedMS;
|
|
this.deltaTime = this.deltaMS * _Ticker.targetFPMS;
|
|
const head = this._head;
|
|
let listener = head.next;
|
|
while (listener) {
|
|
listener = listener.emit(this);
|
|
}
|
|
if (!head.next) {
|
|
this._cancelIfNeeded();
|
|
}
|
|
} else {
|
|
this.deltaTime = this.deltaMS = this.elapsedMS = 0;
|
|
}
|
|
this.lastTime = currentTime;
|
|
}
|
|
/**
|
|
* The frames per second at which this ticker is running.
|
|
* The default is approximately 60 in most modern browsers.
|
|
* **Note:** This does not factor in the value of
|
|
* {@link ticker.Ticker#speed|speed}, which is specific
|
|
* to scaling {@link ticker.Ticker#deltaTime|deltaTime}.
|
|
* @member {number}
|
|
* @readonly
|
|
*/
|
|
get FPS() {
|
|
return 1e3 / this.elapsedMS;
|
|
}
|
|
/**
|
|
* Manages the maximum amount of milliseconds allowed to
|
|
* elapse between invoking {@link ticker.Ticker#update|update}.
|
|
* This value is used to cap {@link ticker.Ticker#deltaTime|deltaTime},
|
|
* but does not effect the measured value of {@link ticker.Ticker#FPS|FPS}.
|
|
* When setting this property it is clamped to a value between
|
|
* `0` and `Ticker.targetFPMS * 1000`.
|
|
* @member {number}
|
|
* @default 10
|
|
*/
|
|
get minFPS() {
|
|
return 1e3 / this._maxElapsedMS;
|
|
}
|
|
set minFPS(fps) {
|
|
const minFPS = Math.min(this.maxFPS, fps);
|
|
const minFPMS = Math.min(Math.max(0, minFPS) / 1e3, _Ticker.targetFPMS);
|
|
this._maxElapsedMS = 1 / minFPMS;
|
|
}
|
|
/**
|
|
* Manages the minimum amount of milliseconds required to
|
|
* elapse between invoking {@link ticker.Ticker#update|update}.
|
|
* This will effect the measured value of {@link ticker.Ticker#FPS|FPS}.
|
|
* If it is set to `0`, then there is no limit; PixiJS will render as many frames as it can.
|
|
* Otherwise it will be at least `minFPS`
|
|
* @member {number}
|
|
* @default 0
|
|
*/
|
|
get maxFPS() {
|
|
if (this._minElapsedMS) {
|
|
return Math.round(1e3 / this._minElapsedMS);
|
|
}
|
|
return 0;
|
|
}
|
|
set maxFPS(fps) {
|
|
if (fps === 0) {
|
|
this._minElapsedMS = 0;
|
|
} else {
|
|
const maxFPS = Math.max(this.minFPS, fps);
|
|
this._minElapsedMS = 1 / (maxFPS / 1e3);
|
|
}
|
|
}
|
|
/**
|
|
* The shared ticker instance used by {@link AnimatedSprite} and by
|
|
* {@link VideoResource} to update animation frames / video textures.
|
|
*
|
|
* It may also be used by {@link Application} if created with the `sharedTicker` option property set to true.
|
|
*
|
|
* The property {@link ticker.Ticker#autoStart|autoStart} is set to `true` for this instance.
|
|
* Please follow the examples for usage, including how to opt-out of auto-starting the shared ticker.
|
|
* @example
|
|
* import { Ticker } from 'pixi.js';
|
|
*
|
|
* const ticker = Ticker.shared;
|
|
* // Set this to prevent starting this ticker when listeners are added.
|
|
* // By default this is true only for the Ticker.shared instance.
|
|
* ticker.autoStart = false;
|
|
*
|
|
* // FYI, call this to ensure the ticker is stopped. It should be stopped
|
|
* // if you have not attempted to render anything yet.
|
|
* ticker.stop();
|
|
*
|
|
* // Call this when you are ready for a running shared ticker.
|
|
* ticker.start();
|
|
* @example
|
|
* import { autoDetectRenderer, Container } from 'pixi.js';
|
|
*
|
|
* // You may use the shared ticker to render...
|
|
* const renderer = autoDetectRenderer();
|
|
* const stage = new Container();
|
|
* document.body.appendChild(renderer.view);
|
|
* ticker.add((time) => renderer.render(stage));
|
|
*
|
|
* // Or you can just update it manually.
|
|
* ticker.autoStart = false;
|
|
* ticker.stop();
|
|
* const animate = (time) => {
|
|
* ticker.update(time);
|
|
* renderer.render(stage);
|
|
* requestAnimationFrame(animate);
|
|
* };
|
|
* animate(performance.now());
|
|
* @member {ticker.Ticker}
|
|
* @readonly
|
|
* @static
|
|
*/
|
|
static get shared() {
|
|
if (!_Ticker._shared) {
|
|
const shared = _Ticker._shared = new _Ticker();
|
|
shared.autoStart = true;
|
|
shared._protected = true;
|
|
}
|
|
return _Ticker._shared;
|
|
}
|
|
/**
|
|
* The system ticker instance used by {@link BasePrepare} for core timing
|
|
* functionality that shouldn't usually need to be paused, unlike the `shared`
|
|
* ticker which drives visual animations and rendering which may want to be paused.
|
|
*
|
|
* The property {@link ticker.Ticker#autoStart|autoStart} is set to `true` for this instance.
|
|
* @member {ticker.Ticker}
|
|
* @readonly
|
|
* @static
|
|
*/
|
|
static get system() {
|
|
if (!_Ticker._system) {
|
|
const system = _Ticker._system = new _Ticker();
|
|
system.autoStart = true;
|
|
system._protected = true;
|
|
}
|
|
return _Ticker._system;
|
|
}
|
|
};
|
|
/**
|
|
* Target frames per millisecond.
|
|
* @static
|
|
*/
|
|
_Ticker.targetFPMS = 0.06;
|
|
let Ticker = _Ticker;
|
|
|
|
"use strict";
|
|
class TickerPlugin {
|
|
/**
|
|
* Initialize the plugin with scope of application instance
|
|
* @static
|
|
* @private
|
|
* @param {object} [options] - See application options
|
|
*/
|
|
static init(options) {
|
|
options = Object.assign({
|
|
autoStart: true,
|
|
sharedTicker: false
|
|
}, options);
|
|
Object.defineProperty(
|
|
this,
|
|
"ticker",
|
|
{
|
|
set(ticker) {
|
|
if (this._ticker) {
|
|
this._ticker.remove(this.render, this);
|
|
}
|
|
this._ticker = ticker;
|
|
if (ticker) {
|
|
ticker.add(this.render, this, UPDATE_PRIORITY.LOW);
|
|
}
|
|
},
|
|
get() {
|
|
return this._ticker;
|
|
}
|
|
}
|
|
);
|
|
this.stop = () => {
|
|
this._ticker.stop();
|
|
};
|
|
this.start = () => {
|
|
this._ticker.start();
|
|
};
|
|
this._ticker = null;
|
|
this.ticker = options.sharedTicker ? Ticker.shared : new Ticker();
|
|
if (options.autoStart) {
|
|
this.start();
|
|
}
|
|
}
|
|
/**
|
|
* Clean up the ticker, scoped to application.
|
|
* @static
|
|
* @private
|
|
*/
|
|
static destroy() {
|
|
if (this._ticker) {
|
|
const oldTicker = this._ticker;
|
|
this.ticker = null;
|
|
oldTicker.destroy();
|
|
}
|
|
}
|
|
}
|
|
/** @ignore */
|
|
TickerPlugin.extension = ExtensionType.Application;
|
|
|
|
"use strict";
|
|
extensions.add(ResizePlugin);
|
|
extensions.add(TickerPlugin);
|
|
|
|
"use strict";
|
|
class EventsTickerClass {
|
|
constructor() {
|
|
/** The frequency that fake events will be fired. */
|
|
this.interactionFrequency = 10;
|
|
this._deltaTime = 0;
|
|
this._didMove = false;
|
|
this._tickerAdded = false;
|
|
this._pauseUpdate = true;
|
|
}
|
|
/**
|
|
* Initializes the event ticker.
|
|
* @param events - The event system.
|
|
*/
|
|
init(events) {
|
|
this.removeTickerListener();
|
|
this.events = events;
|
|
this.interactionFrequency = 10;
|
|
this._deltaTime = 0;
|
|
this._didMove = false;
|
|
this._tickerAdded = false;
|
|
this._pauseUpdate = true;
|
|
}
|
|
/** Whether to pause the update checks or not. */
|
|
get pauseUpdate() {
|
|
return this._pauseUpdate;
|
|
}
|
|
set pauseUpdate(paused) {
|
|
this._pauseUpdate = paused;
|
|
}
|
|
/** Adds the ticker listener. */
|
|
addTickerListener() {
|
|
if (this._tickerAdded || !this.domElement) {
|
|
return;
|
|
}
|
|
Ticker.system.add(this._tickerUpdate, this, UPDATE_PRIORITY.INTERACTION);
|
|
this._tickerAdded = true;
|
|
}
|
|
/** Removes the ticker listener. */
|
|
removeTickerListener() {
|
|
if (!this._tickerAdded) {
|
|
return;
|
|
}
|
|
Ticker.system.remove(this._tickerUpdate, this);
|
|
this._tickerAdded = false;
|
|
}
|
|
/** Sets flag to not fire extra events when the user has already moved there mouse */
|
|
pointerMoved() {
|
|
this._didMove = true;
|
|
}
|
|
/** Updates the state of interactive objects. */
|
|
_update() {
|
|
if (!this.domElement || this._pauseUpdate) {
|
|
return;
|
|
}
|
|
if (this._didMove) {
|
|
this._didMove = false;
|
|
return;
|
|
}
|
|
const rootPointerEvent = this.events["_rootPointerEvent"];
|
|
if (this.events.supportsTouchEvents && rootPointerEvent.pointerType === "touch") {
|
|
return;
|
|
}
|
|
globalThis.document.dispatchEvent(new PointerEvent("pointermove", {
|
|
clientX: rootPointerEvent.clientX,
|
|
clientY: rootPointerEvent.clientY,
|
|
pointerType: rootPointerEvent.pointerType,
|
|
pointerId: rootPointerEvent.pointerId
|
|
}));
|
|
}
|
|
/**
|
|
* Updates the state of interactive objects if at least {@link interactionFrequency}
|
|
* milliseconds have passed since the last invocation.
|
|
*
|
|
* Invoked by a throttled ticker update from {@link Ticker.system}.
|
|
* @param ticker - The throttled ticker.
|
|
*/
|
|
_tickerUpdate(ticker) {
|
|
this._deltaTime += ticker.deltaTime;
|
|
if (this._deltaTime < this.interactionFrequency) {
|
|
return;
|
|
}
|
|
this._deltaTime = 0;
|
|
this._update();
|
|
}
|
|
}
|
|
const EventsTicker = new EventsTickerClass();
|
|
|
|
"use strict";
|
|
class FederatedMouseEvent extends FederatedEvent {
|
|
constructor() {
|
|
super(...arguments);
|
|
/** The coordinates of the mouse event relative to the canvas. */
|
|
this.client = new Point();
|
|
/** The movement in this pointer relative to the last `mousemove` event. */
|
|
this.movement = new Point();
|
|
/** The offset of the pointer coordinates w.r.t. target Container in world space. This is not supported at the moment. */
|
|
this.offset = new Point();
|
|
/** The pointer coordinates in world space. */
|
|
this.global = new Point();
|
|
/**
|
|
* The pointer coordinates in the renderer's {@link Renderer.screen screen}. This has slightly
|
|
* different semantics than native PointerEvent screenX/screenY.
|
|
*/
|
|
this.screen = new Point();
|
|
}
|
|
/** @readonly */
|
|
get clientX() {
|
|
return this.client.x;
|
|
}
|
|
/** @readonly */
|
|
get clientY() {
|
|
return this.client.y;
|
|
}
|
|
/**
|
|
* Alias for {@link FederatedMouseEvent.clientX this.clientX}.
|
|
* @readonly
|
|
*/
|
|
get x() {
|
|
return this.clientX;
|
|
}
|
|
/**
|
|
* Alias for {@link FederatedMouseEvent.clientY this.clientY}.
|
|
* @readonly
|
|
*/
|
|
get y() {
|
|
return this.clientY;
|
|
}
|
|
/** @readonly */
|
|
get movementX() {
|
|
return this.movement.x;
|
|
}
|
|
/** @readonly */
|
|
get movementY() {
|
|
return this.movement.y;
|
|
}
|
|
/** @readonly */
|
|
get offsetX() {
|
|
return this.offset.x;
|
|
}
|
|
/** @readonly */
|
|
get offsetY() {
|
|
return this.offset.y;
|
|
}
|
|
/** @readonly */
|
|
get globalX() {
|
|
return this.global.x;
|
|
}
|
|
/** @readonly */
|
|
get globalY() {
|
|
return this.global.y;
|
|
}
|
|
/**
|
|
* The pointer coordinates in the renderer's screen. Alias for {@code screen.x}.
|
|
* @readonly
|
|
*/
|
|
get screenX() {
|
|
return this.screen.x;
|
|
}
|
|
/**
|
|
* The pointer coordinates in the renderer's screen. Alias for {@code screen.y}.
|
|
* @readonly
|
|
*/
|
|
get screenY() {
|
|
return this.screen.y;
|
|
}
|
|
/**
|
|
* This will return the local coordinates of the specified container for this InteractionData
|
|
* @param {Container} container - The Container that you would like the local
|
|
* coords off
|
|
* @param {PointData} point - A Point object in which to store the value, optional (otherwise
|
|
* will create a new point)
|
|
* @param {PointData} globalPos - A Point object containing your custom global coords, optional
|
|
* (otherwise will use the current global coords)
|
|
* @returns - A point containing the coordinates of the InteractionData position relative
|
|
* to the Container
|
|
*/
|
|
getLocalPosition(container, point, globalPos) {
|
|
return container.worldTransform.applyInverse(globalPos || this.global, point);
|
|
}
|
|
/**
|
|
* Whether the modifier key was pressed when this event natively occurred.
|
|
* @param key - The modifier key.
|
|
*/
|
|
getModifierState(key) {
|
|
return "getModifierState" in this.nativeEvent && this.nativeEvent.getModifierState(key);
|
|
}
|
|
/**
|
|
* Not supported.
|
|
* @param _typeArg
|
|
* @param _canBubbleArg
|
|
* @param _cancelableArg
|
|
* @param _viewArg
|
|
* @param _detailArg
|
|
* @param _screenXArg
|
|
* @param _screenYArg
|
|
* @param _clientXArg
|
|
* @param _clientYArg
|
|
* @param _ctrlKeyArg
|
|
* @param _altKeyArg
|
|
* @param _shiftKeyArg
|
|
* @param _metaKeyArg
|
|
* @param _buttonArg
|
|
* @param _relatedTargetArg
|
|
* @deprecated since 7.0.0
|
|
*/
|
|
// eslint-disable-next-line max-params
|
|
initMouseEvent(_typeArg, _canBubbleArg, _cancelableArg, _viewArg, _detailArg, _screenXArg, _screenYArg, _clientXArg, _clientYArg, _ctrlKeyArg, _altKeyArg, _shiftKeyArg, _metaKeyArg, _buttonArg, _relatedTargetArg) {
|
|
throw new Error("Method not implemented.");
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class FederatedPointerEvent extends FederatedMouseEvent {
|
|
constructor() {
|
|
super(...arguments);
|
|
/**
|
|
* The width of the pointer's contact along the x-axis, measured in CSS pixels.
|
|
* radiusX of TouchEvents will be represented by this value.
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width
|
|
*/
|
|
this.width = 0;
|
|
/**
|
|
* The height of the pointer's contact along the y-axis, measured in CSS pixels.
|
|
* radiusY of TouchEvents will be represented by this value.
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height
|
|
*/
|
|
this.height = 0;
|
|
/**
|
|
* Indicates whether or not the pointer device that created the event is the primary pointer.
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary
|
|
*/
|
|
this.isPrimary = false;
|
|
}
|
|
// Only included for completeness for now
|
|
getCoalescedEvents() {
|
|
if (this.type === "pointermove" || this.type === "mousemove" || this.type === "touchmove") {
|
|
return [this];
|
|
}
|
|
return [];
|
|
}
|
|
// Only included for completeness for now
|
|
getPredictedEvents() {
|
|
throw new Error("getPredictedEvents is not supported!");
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class FederatedWheelEvent extends FederatedMouseEvent {
|
|
constructor() {
|
|
super(...arguments);
|
|
/** Units specified in pixels. */
|
|
this.DOM_DELTA_PIXEL = 0;
|
|
/** Units specified in lines. */
|
|
this.DOM_DELTA_LINE = 1;
|
|
/** Units specified in pages. */
|
|
this.DOM_DELTA_PAGE = 2;
|
|
}
|
|
}
|
|
/** Units specified in pixels. */
|
|
FederatedWheelEvent.DOM_DELTA_PIXEL = 0;
|
|
/** Units specified in lines. */
|
|
FederatedWheelEvent.DOM_DELTA_LINE = 1;
|
|
/** Units specified in pages. */
|
|
FederatedWheelEvent.DOM_DELTA_PAGE = 2;
|
|
|
|
"use strict";
|
|
const PROPAGATION_LIMIT = 2048;
|
|
const tempHitLocation = new Point();
|
|
const tempLocalMapping = new Point();
|
|
class EventBoundary {
|
|
/**
|
|
* @param rootTarget - The holder of the event boundary.
|
|
*/
|
|
constructor(rootTarget) {
|
|
/**
|
|
* Emits events after they were dispatched into the scene graph.
|
|
*
|
|
* This can be used for global events listening, regardless of the scene graph being used. It should
|
|
* not be used by interactive libraries for normal use.
|
|
*
|
|
* Special events that do not bubble all the way to the root target are not emitted from here,
|
|
* e.g. pointerenter, pointerleave, click.
|
|
*/
|
|
this.dispatch = new EventEmitter();
|
|
/**
|
|
* This flag would emit `pointermove`, `touchmove`, and `mousemove` events on all Containers.
|
|
*
|
|
* The `moveOnAll` semantics mirror those of earlier versions of PixiJS. This was disabled in favor of
|
|
* the Pointer Event API's approach.
|
|
*/
|
|
this.moveOnAll = false;
|
|
/** Enables the global move events. `globalpointermove`, `globaltouchmove`, and `globalmousemove` */
|
|
this.enableGlobalMoveEvents = true;
|
|
/**
|
|
* State object for mapping methods.
|
|
* @see EventBoundary#trackingData
|
|
*/
|
|
this.mappingState = {
|
|
trackingData: {}
|
|
};
|
|
/**
|
|
* The event pool maps event constructors to an free pool of instances of those specific events.
|
|
* @see EventBoundary#allocateEvent
|
|
* @see EventBoundary#freeEvent
|
|
*/
|
|
this.eventPool = /* @__PURE__ */ new Map();
|
|
/** Every interactive element gathered from the scene. Only used in `pointermove` */
|
|
this._allInteractiveElements = [];
|
|
/** Every element that passed the hit test. Only used in `pointermove` */
|
|
this._hitElements = [];
|
|
/** Whether or not to collect all the interactive elements from the scene. Enabled in `pointermove` */
|
|
this._isPointerMoveEvent = false;
|
|
this.rootTarget = rootTarget;
|
|
this.hitPruneFn = this.hitPruneFn.bind(this);
|
|
this.hitTestFn = this.hitTestFn.bind(this);
|
|
this.mapPointerDown = this.mapPointerDown.bind(this);
|
|
this.mapPointerMove = this.mapPointerMove.bind(this);
|
|
this.mapPointerOut = this.mapPointerOut.bind(this);
|
|
this.mapPointerOver = this.mapPointerOver.bind(this);
|
|
this.mapPointerUp = this.mapPointerUp.bind(this);
|
|
this.mapPointerUpOutside = this.mapPointerUpOutside.bind(this);
|
|
this.mapWheel = this.mapWheel.bind(this);
|
|
this.mappingTable = {};
|
|
this.addEventMapping("pointerdown", this.mapPointerDown);
|
|
this.addEventMapping("pointermove", this.mapPointerMove);
|
|
this.addEventMapping("pointerout", this.mapPointerOut);
|
|
this.addEventMapping("pointerleave", this.mapPointerOut);
|
|
this.addEventMapping("pointerover", this.mapPointerOver);
|
|
this.addEventMapping("pointerup", this.mapPointerUp);
|
|
this.addEventMapping("pointerupoutside", this.mapPointerUpOutside);
|
|
this.addEventMapping("wheel", this.mapWheel);
|
|
}
|
|
/**
|
|
* Adds an event mapping for the event `type` handled by `fn`.
|
|
*
|
|
* Event mappings can be used to implement additional or custom events. They take an event
|
|
* coming from the upstream scene (or directly from the {@link EventSystem}) and dispatch new downstream events
|
|
* generally trickling down and bubbling up to {@link EventBoundary.rootTarget this.rootTarget}.
|
|
*
|
|
* To modify the semantics of existing events, the built-in mapping methods of EventBoundary should be overridden
|
|
* instead.
|
|
* @param type - The type of upstream event to map.
|
|
* @param fn - The mapping method. The context of this function must be bound manually, if desired.
|
|
*/
|
|
addEventMapping(type, fn) {
|
|
if (!this.mappingTable[type]) {
|
|
this.mappingTable[type] = [];
|
|
}
|
|
this.mappingTable[type].push({
|
|
fn,
|
|
priority: 0
|
|
});
|
|
this.mappingTable[type].sort((a, b) => a.priority - b.priority);
|
|
}
|
|
/**
|
|
* Dispatches the given event
|
|
* @param e - The event to dispatch.
|
|
* @param type - The type of event to dispatch. Defaults to `e.type`.
|
|
*/
|
|
dispatchEvent(e, type) {
|
|
e.propagationStopped = false;
|
|
e.propagationImmediatelyStopped = false;
|
|
this.propagate(e, type);
|
|
this.dispatch.emit(type || e.type, e);
|
|
}
|
|
/**
|
|
* Maps the given upstream event through the event boundary and propagates it downstream.
|
|
* @param e - The event to map.
|
|
*/
|
|
mapEvent(e) {
|
|
if (!this.rootTarget) {
|
|
return;
|
|
}
|
|
const mappers = this.mappingTable[e.type];
|
|
if (mappers) {
|
|
for (let i = 0, j = mappers.length; i < j; i++) {
|
|
mappers[i].fn(e);
|
|
}
|
|
} else {
|
|
warn(`[EventBoundary]: Event mapping not defined for ${e.type}`);
|
|
}
|
|
}
|
|
/**
|
|
* Finds the Container that is the target of a event at the given coordinates.
|
|
*
|
|
* The passed (x,y) coordinates are in the world space above this event boundary.
|
|
* @param x - The x coordinate of the event.
|
|
* @param y - The y coordinate of the event.
|
|
*/
|
|
hitTest(x, y) {
|
|
EventsTicker.pauseUpdate = true;
|
|
const useMove = this._isPointerMoveEvent && this.enableGlobalMoveEvents;
|
|
const fn = useMove ? "hitTestMoveRecursive" : "hitTestRecursive";
|
|
const invertedPath = this[fn](
|
|
this.rootTarget,
|
|
this.rootTarget.eventMode,
|
|
tempHitLocation.set(x, y),
|
|
this.hitTestFn,
|
|
this.hitPruneFn
|
|
);
|
|
return invertedPath && invertedPath[0];
|
|
}
|
|
/**
|
|
* Propagate the passed event from from {@link EventBoundary.rootTarget this.rootTarget} to its
|
|
* target {@code e.target}.
|
|
* @param e - The event to propagate.
|
|
* @param type - The type of event to propagate. Defaults to `e.type`.
|
|
*/
|
|
propagate(e, type) {
|
|
if (!e.target) {
|
|
return;
|
|
}
|
|
const composedPath = e.composedPath();
|
|
e.eventPhase = e.CAPTURING_PHASE;
|
|
for (let i = 0, j = composedPath.length - 1; i < j; i++) {
|
|
e.currentTarget = composedPath[i];
|
|
this.notifyTarget(e, type);
|
|
if (e.propagationStopped || e.propagationImmediatelyStopped)
|
|
return;
|
|
}
|
|
e.eventPhase = e.AT_TARGET;
|
|
e.currentTarget = e.target;
|
|
this.notifyTarget(e, type);
|
|
if (e.propagationStopped || e.propagationImmediatelyStopped)
|
|
return;
|
|
e.eventPhase = e.BUBBLING_PHASE;
|
|
for (let i = composedPath.length - 2; i >= 0; i--) {
|
|
e.currentTarget = composedPath[i];
|
|
this.notifyTarget(e, type);
|
|
if (e.propagationStopped || e.propagationImmediatelyStopped)
|
|
return;
|
|
}
|
|
}
|
|
/**
|
|
* Emits the event {@code e} to all interactive containers. The event is propagated in the bubbling phase always.
|
|
*
|
|
* This is used in the `globalpointermove` event.
|
|
* @param e - The emitted event.
|
|
* @param type - The listeners to notify.
|
|
* @param targets - The targets to notify.
|
|
*/
|
|
all(e, type, targets = this._allInteractiveElements) {
|
|
if (targets.length === 0)
|
|
return;
|
|
e.eventPhase = e.BUBBLING_PHASE;
|
|
const events = Array.isArray(type) ? type : [type];
|
|
for (let i = targets.length - 1; i >= 0; i--) {
|
|
events.forEach((event) => {
|
|
e.currentTarget = targets[i];
|
|
this.notifyTarget(e, event);
|
|
});
|
|
}
|
|
}
|
|
/**
|
|
* Finds the propagation path from {@link EventBoundary.rootTarget rootTarget} to the passed
|
|
* {@code target}. The last element in the path is {@code target}.
|
|
* @param target - The target to find the propagation path to.
|
|
*/
|
|
propagationPath(target) {
|
|
const propagationPath = [target];
|
|
for (let i = 0; i < PROPAGATION_LIMIT && (target !== this.rootTarget && target.parent); i++) {
|
|
if (!target.parent) {
|
|
throw new Error("Cannot find propagation path to disconnected target");
|
|
}
|
|
propagationPath.push(target.parent);
|
|
target = target.parent;
|
|
}
|
|
propagationPath.reverse();
|
|
return propagationPath;
|
|
}
|
|
hitTestMoveRecursive(currentTarget, eventMode, location, testFn, pruneFn, ignore = false) {
|
|
let shouldReturn = false;
|
|
if (this._interactivePrune(currentTarget))
|
|
return null;
|
|
if (currentTarget.eventMode === "dynamic" || eventMode === "dynamic") {
|
|
EventsTicker.pauseUpdate = false;
|
|
}
|
|
if (currentTarget.interactiveChildren && currentTarget.children) {
|
|
const children = currentTarget.children;
|
|
for (let i = children.length - 1; i >= 0; i--) {
|
|
const child = children[i];
|
|
const nestedHit = this.hitTestMoveRecursive(
|
|
child,
|
|
this._isInteractive(eventMode) ? eventMode : child.eventMode,
|
|
location,
|
|
testFn,
|
|
pruneFn,
|
|
ignore || pruneFn(currentTarget, location)
|
|
);
|
|
if (nestedHit) {
|
|
if (nestedHit.length > 0 && !nestedHit[nestedHit.length - 1].parent) {
|
|
continue;
|
|
}
|
|
const isInteractive = currentTarget.isInteractive();
|
|
if (nestedHit.length > 0 || isInteractive) {
|
|
if (isInteractive)
|
|
this._allInteractiveElements.push(currentTarget);
|
|
nestedHit.push(currentTarget);
|
|
}
|
|
if (this._hitElements.length === 0)
|
|
this._hitElements = nestedHit;
|
|
shouldReturn = true;
|
|
}
|
|
}
|
|
}
|
|
const isInteractiveMode = this._isInteractive(eventMode);
|
|
const isInteractiveTarget = currentTarget.isInteractive();
|
|
if (isInteractiveTarget && isInteractiveTarget)
|
|
this._allInteractiveElements.push(currentTarget);
|
|
if (ignore || this._hitElements.length > 0)
|
|
return null;
|
|
if (shouldReturn)
|
|
return this._hitElements;
|
|
if (isInteractiveMode && (!pruneFn(currentTarget, location) && testFn(currentTarget, location))) {
|
|
return isInteractiveTarget ? [currentTarget] : [];
|
|
}
|
|
return null;
|
|
}
|
|
/**
|
|
* Recursive implementation for {@link EventBoundary.hitTest hitTest}.
|
|
* @param currentTarget - The Container that is to be hit tested.
|
|
* @param eventMode - The event mode for the `currentTarget` or one of its parents.
|
|
* @param location - The location that is being tested for overlap.
|
|
* @param testFn - Callback that determines whether the target passes hit testing. This callback
|
|
* can assume that `pruneFn` failed to prune the container.
|
|
* @param pruneFn - Callback that determiness whether the target and all of its children
|
|
* cannot pass the hit test. It is used as a preliminary optimization to prune entire subtrees
|
|
* of the scene graph.
|
|
* @returns An array holding the hit testing target and all its ancestors in order. The first element
|
|
* is the target itself and the last is {@link EventBoundary.rootTarget rootTarget}. This is the opposite
|
|
* order w.r.t. the propagation path. If no hit testing target is found, null is returned.
|
|
*/
|
|
hitTestRecursive(currentTarget, eventMode, location, testFn, pruneFn) {
|
|
if (this._interactivePrune(currentTarget) || pruneFn(currentTarget, location)) {
|
|
return null;
|
|
}
|
|
if (currentTarget.eventMode === "dynamic" || eventMode === "dynamic") {
|
|
EventsTicker.pauseUpdate = false;
|
|
}
|
|
if (currentTarget.interactiveChildren && currentTarget.children) {
|
|
const children = currentTarget.children;
|
|
const relativeLocation = location;
|
|
for (let i = children.length - 1; i >= 0; i--) {
|
|
const child = children[i];
|
|
const nestedHit = this.hitTestRecursive(
|
|
child,
|
|
this._isInteractive(eventMode) ? eventMode : child.eventMode,
|
|
relativeLocation,
|
|
testFn,
|
|
pruneFn
|
|
);
|
|
if (nestedHit) {
|
|
if (nestedHit.length > 0 && !nestedHit[nestedHit.length - 1].parent) {
|
|
continue;
|
|
}
|
|
const isInteractive = currentTarget.isInteractive();
|
|
if (nestedHit.length > 0 || isInteractive)
|
|
nestedHit.push(currentTarget);
|
|
return nestedHit;
|
|
}
|
|
}
|
|
}
|
|
const isInteractiveMode = this._isInteractive(eventMode);
|
|
const isInteractiveTarget = currentTarget.isInteractive();
|
|
if (isInteractiveMode && testFn(currentTarget, location)) {
|
|
return isInteractiveTarget ? [currentTarget] : [];
|
|
}
|
|
return null;
|
|
}
|
|
_isInteractive(int) {
|
|
return int === "static" || int === "dynamic";
|
|
}
|
|
_interactivePrune(container) {
|
|
if (!container || !container.visible || !container.renderable || !container.includeInBuild || !container.measurable) {
|
|
return true;
|
|
}
|
|
if (container.eventMode === "none") {
|
|
return true;
|
|
}
|
|
if (container.eventMode === "passive" && !container.interactiveChildren) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* Checks whether the container or any of its children cannot pass the hit test at all.
|
|
*
|
|
* {@link EventBoundary}'s implementation uses the {@link Container.hitArea hitArea}
|
|
* and {@link Container._maskEffect} for pruning.
|
|
* @param container - The container to prune.
|
|
* @param location - The location to test for overlap.
|
|
*/
|
|
hitPruneFn(container, location) {
|
|
if (container.hitArea) {
|
|
container.worldTransform.applyInverse(location, tempLocalMapping);
|
|
if (!container.hitArea.contains(tempLocalMapping.x, tempLocalMapping.y)) {
|
|
return true;
|
|
}
|
|
}
|
|
if (container.effects && container.effects.length) {
|
|
for (let i = 0; i < container.effects.length; i++) {
|
|
const effect = container.effects[i];
|
|
if (effect.containsPoint) {
|
|
const effectContainsPoint = effect.containsPoint(location, this.hitTestFn);
|
|
if (!effectContainsPoint) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* Checks whether the container passes hit testing for the given location.
|
|
* @param container - The container to test.
|
|
* @param location - The location to test for overlap.
|
|
* @returns - Whether `container` passes hit testing for `location`.
|
|
*/
|
|
hitTestFn(container, location) {
|
|
if (container.hitArea) {
|
|
return true;
|
|
}
|
|
if (container == null ? void 0 : container.containsPoint) {
|
|
container.worldTransform.applyInverse(location, tempLocalMapping);
|
|
return container.containsPoint(tempLocalMapping);
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* Notify all the listeners to the event's `currentTarget`.
|
|
*
|
|
* If the `currentTarget` contains the property `on<type>`, then it is called here,
|
|
* simulating the behavior from version 6.x and prior.
|
|
* @param e - The event passed to the target.
|
|
* @param type - The type of event to notify. Defaults to `e.type`.
|
|
*/
|
|
notifyTarget(e, type) {
|
|
var _a, _b;
|
|
if (!e.currentTarget.isInteractive()) {
|
|
return;
|
|
}
|
|
type = type != null ? type : e.type;
|
|
const handlerKey = `on${type}`;
|
|
(_b = (_a = e.currentTarget)[handlerKey]) == null ? void 0 : _b.call(_a, e);
|
|
const key = e.eventPhase === e.CAPTURING_PHASE || e.eventPhase === e.AT_TARGET ? `${type}capture` : type;
|
|
this._notifyListeners(e, key);
|
|
if (e.eventPhase === e.AT_TARGET) {
|
|
this._notifyListeners(e, type);
|
|
}
|
|
}
|
|
/**
|
|
* Maps the upstream `pointerdown` events to a downstream `pointerdown` event.
|
|
*
|
|
* `touchstart`, `rightdown`, `mousedown` events are also dispatched for specific pointer types.
|
|
* @param from - The upstream `pointerdown` event.
|
|
*/
|
|
mapPointerDown(from) {
|
|
if (!(from instanceof FederatedPointerEvent)) {
|
|
warn("EventBoundary cannot map a non-pointer event as a pointer event");
|
|
return;
|
|
}
|
|
const e = this.createPointerEvent(from);
|
|
this.dispatchEvent(e, "pointerdown");
|
|
if (e.pointerType === "touch") {
|
|
this.dispatchEvent(e, "touchstart");
|
|
} else if (e.pointerType === "mouse" || e.pointerType === "pen") {
|
|
const isRightButton = e.button === 2;
|
|
this.dispatchEvent(e, isRightButton ? "rightdown" : "mousedown");
|
|
}
|
|
const trackingData = this.trackingData(from.pointerId);
|
|
trackingData.pressTargetsByButton[from.button] = e.composedPath();
|
|
this.freeEvent(e);
|
|
}
|
|
/**
|
|
* Maps the upstream `pointermove` to downstream `pointerout`, `pointerover`, and `pointermove` events, in that order.
|
|
*
|
|
* The tracking data for the specific pointer has an updated `overTarget`. `mouseout`, `mouseover`,
|
|
* `mousemove`, and `touchmove` events are fired as well for specific pointer types.
|
|
* @param from - The upstream `pointermove` event.
|
|
*/
|
|
mapPointerMove(from) {
|
|
var _a, _b, _c;
|
|
if (!(from instanceof FederatedPointerEvent)) {
|
|
warn("EventBoundary cannot map a non-pointer event as a pointer event");
|
|
return;
|
|
}
|
|
this._allInteractiveElements.length = 0;
|
|
this._hitElements.length = 0;
|
|
this._isPointerMoveEvent = true;
|
|
const e = this.createPointerEvent(from);
|
|
this._isPointerMoveEvent = false;
|
|
const isMouse = e.pointerType === "mouse" || e.pointerType === "pen";
|
|
const trackingData = this.trackingData(from.pointerId);
|
|
const outTarget = this.findMountedTarget(trackingData.overTargets);
|
|
if (((_a = trackingData.overTargets) == null ? void 0 : _a.length) > 0 && outTarget !== e.target) {
|
|
const outType = from.type === "mousemove" ? "mouseout" : "pointerout";
|
|
const outEvent = this.createPointerEvent(from, outType, outTarget);
|
|
this.dispatchEvent(outEvent, "pointerout");
|
|
if (isMouse)
|
|
this.dispatchEvent(outEvent, "mouseout");
|
|
if (!e.composedPath().includes(outTarget)) {
|
|
const leaveEvent = this.createPointerEvent(from, "pointerleave", outTarget);
|
|
leaveEvent.eventPhase = leaveEvent.AT_TARGET;
|
|
while (leaveEvent.target && !e.composedPath().includes(leaveEvent.target)) {
|
|
leaveEvent.currentTarget = leaveEvent.target;
|
|
this.notifyTarget(leaveEvent);
|
|
if (isMouse)
|
|
this.notifyTarget(leaveEvent, "mouseleave");
|
|
leaveEvent.target = leaveEvent.target.parent;
|
|
}
|
|
this.freeEvent(leaveEvent);
|
|
}
|
|
this.freeEvent(outEvent);
|
|
}
|
|
if (outTarget !== e.target) {
|
|
const overType = from.type === "mousemove" ? "mouseover" : "pointerover";
|
|
const overEvent = this.clonePointerEvent(e, overType);
|
|
this.dispatchEvent(overEvent, "pointerover");
|
|
if (isMouse)
|
|
this.dispatchEvent(overEvent, "mouseover");
|
|
let overTargetAncestor = outTarget == null ? void 0 : outTarget.parent;
|
|
while (overTargetAncestor && overTargetAncestor !== this.rootTarget.parent) {
|
|
if (overTargetAncestor === e.target)
|
|
break;
|
|
overTargetAncestor = overTargetAncestor.parent;
|
|
}
|
|
const didPointerEnter = !overTargetAncestor || overTargetAncestor === this.rootTarget.parent;
|
|
if (didPointerEnter) {
|
|
const enterEvent = this.clonePointerEvent(e, "pointerenter");
|
|
enterEvent.eventPhase = enterEvent.AT_TARGET;
|
|
while (enterEvent.target && enterEvent.target !== outTarget && enterEvent.target !== this.rootTarget.parent) {
|
|
enterEvent.currentTarget = enterEvent.target;
|
|
this.notifyTarget(enterEvent);
|
|
if (isMouse)
|
|
this.notifyTarget(enterEvent, "mouseenter");
|
|
enterEvent.target = enterEvent.target.parent;
|
|
}
|
|
this.freeEvent(enterEvent);
|
|
}
|
|
this.freeEvent(overEvent);
|
|
}
|
|
const allMethods = [];
|
|
const allowGlobalPointerEvents = (_b = this.enableGlobalMoveEvents) != null ? _b : true;
|
|
this.moveOnAll ? allMethods.push("pointermove") : this.dispatchEvent(e, "pointermove");
|
|
allowGlobalPointerEvents && allMethods.push("globalpointermove");
|
|
if (e.pointerType === "touch") {
|
|
this.moveOnAll ? allMethods.splice(1, 0, "touchmove") : this.dispatchEvent(e, "touchmove");
|
|
allowGlobalPointerEvents && allMethods.push("globaltouchmove");
|
|
}
|
|
if (isMouse) {
|
|
this.moveOnAll ? allMethods.splice(1, 0, "mousemove") : this.dispatchEvent(e, "mousemove");
|
|
allowGlobalPointerEvents && allMethods.push("globalmousemove");
|
|
this.cursor = (_c = e.target) == null ? void 0 : _c.cursor;
|
|
}
|
|
if (allMethods.length > 0) {
|
|
this.all(e, allMethods);
|
|
}
|
|
this._allInteractiveElements.length = 0;
|
|
this._hitElements.length = 0;
|
|
trackingData.overTargets = e.composedPath();
|
|
this.freeEvent(e);
|
|
}
|
|
/**
|
|
* Maps the upstream `pointerover` to downstream `pointerover` and `pointerenter` events, in that order.
|
|
*
|
|
* The tracking data for the specific pointer gets a new `overTarget`.
|
|
* @param from - The upstream `pointerover` event.
|
|
*/
|
|
mapPointerOver(from) {
|
|
var _a;
|
|
if (!(from instanceof FederatedPointerEvent)) {
|
|
warn("EventBoundary cannot map a non-pointer event as a pointer event");
|
|
return;
|
|
}
|
|
const trackingData = this.trackingData(from.pointerId);
|
|
const e = this.createPointerEvent(from);
|
|
const isMouse = e.pointerType === "mouse" || e.pointerType === "pen";
|
|
this.dispatchEvent(e, "pointerover");
|
|
if (isMouse)
|
|
this.dispatchEvent(e, "mouseover");
|
|
if (e.pointerType === "mouse")
|
|
this.cursor = (_a = e.target) == null ? void 0 : _a.cursor;
|
|
const enterEvent = this.clonePointerEvent(e, "pointerenter");
|
|
enterEvent.eventPhase = enterEvent.AT_TARGET;
|
|
while (enterEvent.target && enterEvent.target !== this.rootTarget.parent) {
|
|
enterEvent.currentTarget = enterEvent.target;
|
|
this.notifyTarget(enterEvent);
|
|
if (isMouse)
|
|
this.notifyTarget(enterEvent, "mouseenter");
|
|
enterEvent.target = enterEvent.target.parent;
|
|
}
|
|
trackingData.overTargets = e.composedPath();
|
|
this.freeEvent(e);
|
|
this.freeEvent(enterEvent);
|
|
}
|
|
/**
|
|
* Maps the upstream `pointerout` to downstream `pointerout`, `pointerleave` events, in that order.
|
|
*
|
|
* The tracking data for the specific pointer is cleared of a `overTarget`.
|
|
* @param from - The upstream `pointerout` event.
|
|
*/
|
|
mapPointerOut(from) {
|
|
if (!(from instanceof FederatedPointerEvent)) {
|
|
warn("EventBoundary cannot map a non-pointer event as a pointer event");
|
|
return;
|
|
}
|
|
const trackingData = this.trackingData(from.pointerId);
|
|
if (trackingData.overTargets) {
|
|
const isMouse = from.pointerType === "mouse" || from.pointerType === "pen";
|
|
const outTarget = this.findMountedTarget(trackingData.overTargets);
|
|
const outEvent = this.createPointerEvent(from, "pointerout", outTarget);
|
|
this.dispatchEvent(outEvent);
|
|
if (isMouse)
|
|
this.dispatchEvent(outEvent, "mouseout");
|
|
const leaveEvent = this.createPointerEvent(from, "pointerleave", outTarget);
|
|
leaveEvent.eventPhase = leaveEvent.AT_TARGET;
|
|
while (leaveEvent.target && leaveEvent.target !== this.rootTarget.parent) {
|
|
leaveEvent.currentTarget = leaveEvent.target;
|
|
this.notifyTarget(leaveEvent);
|
|
if (isMouse)
|
|
this.notifyTarget(leaveEvent, "mouseleave");
|
|
leaveEvent.target = leaveEvent.target.parent;
|
|
}
|
|
trackingData.overTargets = null;
|
|
this.freeEvent(outEvent);
|
|
this.freeEvent(leaveEvent);
|
|
}
|
|
this.cursor = null;
|
|
}
|
|
/**
|
|
* Maps the upstream `pointerup` event to downstream `pointerup`, `pointerupoutside`,
|
|
* and `click`/`rightclick`/`pointertap` events, in that order.
|
|
*
|
|
* The `pointerupoutside` event bubbles from the original `pointerdown` target to the most specific
|
|
* ancestor of the `pointerdown` and `pointerup` targets, which is also the `click` event's target. `touchend`,
|
|
* `rightup`, `mouseup`, `touchendoutside`, `rightupoutside`, `mouseupoutside`, and `tap` are fired as well for
|
|
* specific pointer types.
|
|
* @param from - The upstream `pointerup` event.
|
|
*/
|
|
mapPointerUp(from) {
|
|
if (!(from instanceof FederatedPointerEvent)) {
|
|
warn("EventBoundary cannot map a non-pointer event as a pointer event");
|
|
return;
|
|
}
|
|
const now = performance.now();
|
|
const e = this.createPointerEvent(from);
|
|
this.dispatchEvent(e, "pointerup");
|
|
if (e.pointerType === "touch") {
|
|
this.dispatchEvent(e, "touchend");
|
|
} else if (e.pointerType === "mouse" || e.pointerType === "pen") {
|
|
const isRightButton = e.button === 2;
|
|
this.dispatchEvent(e, isRightButton ? "rightup" : "mouseup");
|
|
}
|
|
const trackingData = this.trackingData(from.pointerId);
|
|
const pressTarget = this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);
|
|
let clickTarget = pressTarget;
|
|
if (pressTarget && !e.composedPath().includes(pressTarget)) {
|
|
let currentTarget = pressTarget;
|
|
while (currentTarget && !e.composedPath().includes(currentTarget)) {
|
|
e.currentTarget = currentTarget;
|
|
this.notifyTarget(e, "pointerupoutside");
|
|
if (e.pointerType === "touch") {
|
|
this.notifyTarget(e, "touchendoutside");
|
|
} else if (e.pointerType === "mouse" || e.pointerType === "pen") {
|
|
const isRightButton = e.button === 2;
|
|
this.notifyTarget(e, isRightButton ? "rightupoutside" : "mouseupoutside");
|
|
}
|
|
currentTarget = currentTarget.parent;
|
|
}
|
|
delete trackingData.pressTargetsByButton[from.button];
|
|
clickTarget = currentTarget;
|
|
}
|
|
if (clickTarget) {
|
|
const clickEvent = this.clonePointerEvent(e, "click");
|
|
clickEvent.target = clickTarget;
|
|
clickEvent.path = null;
|
|
if (!trackingData.clicksByButton[from.button]) {
|
|
trackingData.clicksByButton[from.button] = {
|
|
clickCount: 0,
|
|
target: clickEvent.target,
|
|
timeStamp: now
|
|
};
|
|
}
|
|
const clickHistory = trackingData.clicksByButton[from.button];
|
|
if (clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < 200) {
|
|
++clickHistory.clickCount;
|
|
} else {
|
|
clickHistory.clickCount = 1;
|
|
}
|
|
clickHistory.target = clickEvent.target;
|
|
clickHistory.timeStamp = now;
|
|
clickEvent.detail = clickHistory.clickCount;
|
|
if (clickEvent.pointerType === "mouse") {
|
|
const isRightButton = clickEvent.button === 2;
|
|
this.dispatchEvent(clickEvent, isRightButton ? "rightclick" : "click");
|
|
} else if (clickEvent.pointerType === "touch") {
|
|
this.dispatchEvent(clickEvent, "tap");
|
|
}
|
|
this.dispatchEvent(clickEvent, "pointertap");
|
|
this.freeEvent(clickEvent);
|
|
}
|
|
this.freeEvent(e);
|
|
}
|
|
/**
|
|
* Maps the upstream `pointerupoutside` event to a downstream `pointerupoutside` event, bubbling from the original
|
|
* `pointerdown` target to `rootTarget`.
|
|
*
|
|
* (The most specific ancestor of the `pointerdown` event and the `pointerup` event must the
|
|
* `{@link EventBoundary}'s root because the `pointerup` event occurred outside of the boundary.)
|
|
*
|
|
* `touchendoutside`, `mouseupoutside`, and `rightupoutside` events are fired as well for specific pointer
|
|
* types. The tracking data for the specific pointer is cleared of a `pressTarget`.
|
|
* @param from - The upstream `pointerupoutside` event.
|
|
*/
|
|
mapPointerUpOutside(from) {
|
|
if (!(from instanceof FederatedPointerEvent)) {
|
|
warn("EventBoundary cannot map a non-pointer event as a pointer event");
|
|
return;
|
|
}
|
|
const trackingData = this.trackingData(from.pointerId);
|
|
const pressTarget = this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);
|
|
const e = this.createPointerEvent(from);
|
|
if (pressTarget) {
|
|
let currentTarget = pressTarget;
|
|
while (currentTarget) {
|
|
e.currentTarget = currentTarget;
|
|
this.notifyTarget(e, "pointerupoutside");
|
|
if (e.pointerType === "touch") {
|
|
this.notifyTarget(e, "touchendoutside");
|
|
} else if (e.pointerType === "mouse" || e.pointerType === "pen") {
|
|
this.notifyTarget(e, e.button === 2 ? "rightupoutside" : "mouseupoutside");
|
|
}
|
|
currentTarget = currentTarget.parent;
|
|
}
|
|
delete trackingData.pressTargetsByButton[from.button];
|
|
}
|
|
this.freeEvent(e);
|
|
}
|
|
/**
|
|
* Maps the upstream `wheel` event to a downstream `wheel` event.
|
|
* @param from - The upstream `wheel` event.
|
|
*/
|
|
mapWheel(from) {
|
|
if (!(from instanceof FederatedWheelEvent)) {
|
|
warn("EventBoundary cannot map a non-wheel event as a wheel event");
|
|
return;
|
|
}
|
|
const wheelEvent = this.createWheelEvent(from);
|
|
this.dispatchEvent(wheelEvent);
|
|
this.freeEvent(wheelEvent);
|
|
}
|
|
/**
|
|
* Finds the most specific event-target in the given propagation path that is still mounted in the scene graph.
|
|
*
|
|
* This is used to find the correct `pointerup` and `pointerout` target in the case that the original `pointerdown`
|
|
* or `pointerover` target was unmounted from the scene graph.
|
|
* @param propagationPath - The propagation path was valid in the past.
|
|
* @returns - The most specific event-target still mounted at the same location in the scene graph.
|
|
*/
|
|
findMountedTarget(propagationPath) {
|
|
if (!propagationPath) {
|
|
return null;
|
|
}
|
|
let currentTarget = propagationPath[0];
|
|
for (let i = 1; i < propagationPath.length; i++) {
|
|
if (propagationPath[i].parent === currentTarget) {
|
|
currentTarget = propagationPath[i];
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
return currentTarget;
|
|
}
|
|
/**
|
|
* Creates an event whose {@code originalEvent} is {@code from}, with an optional `type` and `target` override.
|
|
*
|
|
* The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.
|
|
* @param from - The {@code originalEvent} for the returned event.
|
|
* @param [type=from.type] - The type of the returned event.
|
|
* @param target - The target of the returned event.
|
|
*/
|
|
createPointerEvent(from, type, target) {
|
|
var _a;
|
|
const event = this.allocateEvent(FederatedPointerEvent);
|
|
this.copyPointerData(from, event);
|
|
this.copyMouseData(from, event);
|
|
this.copyData(from, event);
|
|
event.nativeEvent = from.nativeEvent;
|
|
event.originalEvent = from;
|
|
event.target = (_a = target != null ? target : this.hitTest(event.global.x, event.global.y)) != null ? _a : this._hitElements[0];
|
|
if (typeof type === "string") {
|
|
event.type = type;
|
|
}
|
|
return event;
|
|
}
|
|
/**
|
|
* Creates a wheel event whose {@code originalEvent} is {@code from}.
|
|
*
|
|
* The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.
|
|
* @param from - The upstream wheel event.
|
|
*/
|
|
createWheelEvent(from) {
|
|
const event = this.allocateEvent(FederatedWheelEvent);
|
|
this.copyWheelData(from, event);
|
|
this.copyMouseData(from, event);
|
|
this.copyData(from, event);
|
|
event.nativeEvent = from.nativeEvent;
|
|
event.originalEvent = from;
|
|
event.target = this.hitTest(event.global.x, event.global.y);
|
|
return event;
|
|
}
|
|
/**
|
|
* Clones the event {@code from}, with an optional {@code type} override.
|
|
*
|
|
* The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.
|
|
* @param from - The event to clone.
|
|
* @param [type=from.type] - The type of the returned event.
|
|
*/
|
|
clonePointerEvent(from, type) {
|
|
const event = this.allocateEvent(FederatedPointerEvent);
|
|
event.nativeEvent = from.nativeEvent;
|
|
event.originalEvent = from.originalEvent;
|
|
this.copyPointerData(from, event);
|
|
this.copyMouseData(from, event);
|
|
this.copyData(from, event);
|
|
event.target = from.target;
|
|
event.path = from.composedPath().slice();
|
|
event.type = type != null ? type : event.type;
|
|
return event;
|
|
}
|
|
/**
|
|
* Copies wheel {@link FederatedWheelEvent} data from {@code from} into {@code to}.
|
|
*
|
|
* The following properties are copied:
|
|
* + deltaMode
|
|
* + deltaX
|
|
* + deltaY
|
|
* + deltaZ
|
|
* @param from - The event to copy data from.
|
|
* @param to - The event to copy data into.
|
|
*/
|
|
copyWheelData(from, to) {
|
|
to.deltaMode = from.deltaMode;
|
|
to.deltaX = from.deltaX;
|
|
to.deltaY = from.deltaY;
|
|
to.deltaZ = from.deltaZ;
|
|
}
|
|
/**
|
|
* Copies pointer {@link FederatedPointerEvent} data from {@code from} into {@code to}.
|
|
*
|
|
* The following properties are copied:
|
|
* + pointerId
|
|
* + width
|
|
* + height
|
|
* + isPrimary
|
|
* + pointerType
|
|
* + pressure
|
|
* + tangentialPressure
|
|
* + tiltX
|
|
* + tiltY
|
|
* @param from - The event to copy data from.
|
|
* @param to - The event to copy data into.
|
|
*/
|
|
copyPointerData(from, to) {
|
|
if (!(from instanceof FederatedPointerEvent && to instanceof FederatedPointerEvent))
|
|
return;
|
|
to.pointerId = from.pointerId;
|
|
to.width = from.width;
|
|
to.height = from.height;
|
|
to.isPrimary = from.isPrimary;
|
|
to.pointerType = from.pointerType;
|
|
to.pressure = from.pressure;
|
|
to.tangentialPressure = from.tangentialPressure;
|
|
to.tiltX = from.tiltX;
|
|
to.tiltY = from.tiltY;
|
|
to.twist = from.twist;
|
|
}
|
|
/**
|
|
* Copies mouse {@link FederatedMouseEvent} data from {@code from} to {@code to}.
|
|
*
|
|
* The following properties are copied:
|
|
* + altKey
|
|
* + button
|
|
* + buttons
|
|
* + clientX
|
|
* + clientY
|
|
* + metaKey
|
|
* + movementX
|
|
* + movementY
|
|
* + pageX
|
|
* + pageY
|
|
* + x
|
|
* + y
|
|
* + screen
|
|
* + shiftKey
|
|
* + global
|
|
* @param from - The event to copy data from.
|
|
* @param to - The event to copy data into.
|
|
*/
|
|
copyMouseData(from, to) {
|
|
if (!(from instanceof FederatedMouseEvent && to instanceof FederatedMouseEvent))
|
|
return;
|
|
to.altKey = from.altKey;
|
|
to.button = from.button;
|
|
to.buttons = from.buttons;
|
|
to.client.copyFrom(from.client);
|
|
to.ctrlKey = from.ctrlKey;
|
|
to.metaKey = from.metaKey;
|
|
to.movement.copyFrom(from.movement);
|
|
to.screen.copyFrom(from.screen);
|
|
to.shiftKey = from.shiftKey;
|
|
to.global.copyFrom(from.global);
|
|
}
|
|
/**
|
|
* Copies base {@link FederatedEvent} data from {@code from} into {@code to}.
|
|
*
|
|
* The following properties are copied:
|
|
* + isTrusted
|
|
* + srcElement
|
|
* + timeStamp
|
|
* + type
|
|
* @param from - The event to copy data from.
|
|
* @param to - The event to copy data into.
|
|
*/
|
|
copyData(from, to) {
|
|
to.isTrusted = from.isTrusted;
|
|
to.srcElement = from.srcElement;
|
|
to.timeStamp = performance.now();
|
|
to.type = from.type;
|
|
to.detail = from.detail;
|
|
to.view = from.view;
|
|
to.which = from.which;
|
|
to.layer.copyFrom(from.layer);
|
|
to.page.copyFrom(from.page);
|
|
}
|
|
/**
|
|
* @param id - The pointer ID.
|
|
* @returns The tracking data stored for the given pointer. If no data exists, a blank
|
|
* state will be created.
|
|
*/
|
|
trackingData(id) {
|
|
if (!this.mappingState.trackingData[id]) {
|
|
this.mappingState.trackingData[id] = {
|
|
pressTargetsByButton: {},
|
|
clicksByButton: {},
|
|
overTarget: null
|
|
};
|
|
}
|
|
return this.mappingState.trackingData[id];
|
|
}
|
|
/**
|
|
* Allocate a specific type of event from {@link EventBoundary#eventPool this.eventPool}.
|
|
*
|
|
* This allocation is constructor-agnostic, as long as it only takes one argument - this event
|
|
* boundary.
|
|
* @param constructor - The event's constructor.
|
|
*/
|
|
allocateEvent(constructor) {
|
|
if (!this.eventPool.has(constructor)) {
|
|
this.eventPool.set(constructor, []);
|
|
}
|
|
const event = this.eventPool.get(constructor).pop() || new constructor(this);
|
|
event.eventPhase = event.NONE;
|
|
event.currentTarget = null;
|
|
event.path = null;
|
|
event.target = null;
|
|
return event;
|
|
}
|
|
/**
|
|
* Frees the event and puts it back into the event pool.
|
|
*
|
|
* It is illegal to reuse the event until it is allocated again, using `this.allocateEvent`.
|
|
*
|
|
* It is also advised that events not allocated from {@link EventBoundary#allocateEvent this.allocateEvent}
|
|
* not be freed. This is because of the possibility that the same event is freed twice, which can cause
|
|
* it to be allocated twice & result in overwriting.
|
|
* @param event - The event to be freed.
|
|
* @throws Error if the event is managed by another event boundary.
|
|
*/
|
|
freeEvent(event) {
|
|
if (event.manager !== this)
|
|
throw new Error("It is illegal to free an event not managed by this EventBoundary!");
|
|
const constructor = event.constructor;
|
|
if (!this.eventPool.has(constructor)) {
|
|
this.eventPool.set(constructor, []);
|
|
}
|
|
this.eventPool.get(constructor).push(event);
|
|
}
|
|
/**
|
|
* Similar to {@link EventEmitter.emit}, except it stops if the `propagationImmediatelyStopped` flag
|
|
* is set on the event.
|
|
* @param e - The event to call each listener with.
|
|
* @param type - The event key.
|
|
*/
|
|
_notifyListeners(e, type) {
|
|
const listeners = e.currentTarget._events[type];
|
|
if (!listeners)
|
|
return;
|
|
if ("fn" in listeners) {
|
|
if (listeners.once)
|
|
e.currentTarget.removeListener(type, listeners.fn, void 0, true);
|
|
listeners.fn.call(listeners.context, e);
|
|
} else {
|
|
for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) {
|
|
if (listeners[i].once)
|
|
e.currentTarget.removeListener(type, listeners[i].fn, void 0, true);
|
|
listeners[i].fn.call(listeners[i].context, e);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$14 = Object.defineProperty;
|
|
var __getOwnPropSymbols$14 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$14 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$14 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$14 = (obj, key, value) => key in obj ? __defProp$14(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$14 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$14.call(b, prop))
|
|
__defNormalProp$14(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$14)
|
|
for (var prop of __getOwnPropSymbols$14(b)) {
|
|
if (__propIsEnum$14.call(b, prop))
|
|
__defNormalProp$14(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const MOUSE_POINTER_ID = 1;
|
|
const TOUCH_TO_POINTER = {
|
|
touchstart: "pointerdown",
|
|
touchend: "pointerup",
|
|
touchendoutside: "pointerupoutside",
|
|
touchmove: "pointermove",
|
|
touchcancel: "pointercancel"
|
|
};
|
|
const _EventSystem = class _EventSystem {
|
|
/**
|
|
* @param {Renderer} renderer
|
|
*/
|
|
constructor(renderer) {
|
|
/** Does the device support touch events https://www.w3.org/TR/touch-events/ */
|
|
this.supportsTouchEvents = "ontouchstart" in globalThis;
|
|
/** Does the device support pointer events https://www.w3.org/Submission/pointer-events/ */
|
|
this.supportsPointerEvents = !!globalThis.PointerEvent;
|
|
/**
|
|
* The DOM element to which the root event listeners are bound. This is automatically set to
|
|
* the renderer's {@link Renderer#view view}.
|
|
*/
|
|
this.domElement = null;
|
|
/** The resolution used to convert between the DOM client space into world space. */
|
|
this.resolution = 1;
|
|
this.renderer = renderer;
|
|
this.rootBoundary = new EventBoundary(null);
|
|
EventsTicker.init(this);
|
|
this.autoPreventDefault = true;
|
|
this._eventsAdded = false;
|
|
this._rootPointerEvent = new FederatedPointerEvent(null);
|
|
this._rootWheelEvent = new FederatedWheelEvent(null);
|
|
this.cursorStyles = {
|
|
default: "inherit",
|
|
pointer: "pointer"
|
|
};
|
|
this.features = new Proxy(__spreadValues$14({}, _EventSystem.defaultEventFeatures), {
|
|
set: (target, key, value) => {
|
|
if (key === "globalMove") {
|
|
this.rootBoundary.enableGlobalMoveEvents = value;
|
|
}
|
|
target[key] = value;
|
|
return true;
|
|
}
|
|
});
|
|
this._onPointerDown = this._onPointerDown.bind(this);
|
|
this._onPointerMove = this._onPointerMove.bind(this);
|
|
this._onPointerUp = this._onPointerUp.bind(this);
|
|
this._onPointerOverOut = this._onPointerOverOut.bind(this);
|
|
this.onWheel = this.onWheel.bind(this);
|
|
}
|
|
/**
|
|
* The default interaction mode for all display objects.
|
|
* @see Container.eventMode
|
|
* @type {EventMode}
|
|
* @readonly
|
|
* @since 7.2.0
|
|
*/
|
|
static get defaultEventMode() {
|
|
return this._defaultEventMode;
|
|
}
|
|
/**
|
|
* Runner init called, view is available at this point.
|
|
* @ignore
|
|
*/
|
|
init(options) {
|
|
var _a, _b;
|
|
const { canvas, resolution } = this.renderer;
|
|
this.setTargetElement(canvas);
|
|
this.resolution = resolution;
|
|
_EventSystem._defaultEventMode = (_a = options.eventMode) != null ? _a : "passive";
|
|
Object.assign(this.features, (_b = options.eventFeatures) != null ? _b : {});
|
|
this.rootBoundary.enableGlobalMoveEvents = this.features.globalMove;
|
|
}
|
|
/**
|
|
* Handle changing resolution.
|
|
* @ignore
|
|
*/
|
|
resolutionChange(resolution) {
|
|
this.resolution = resolution;
|
|
}
|
|
/** Destroys all event listeners and detaches the renderer. */
|
|
destroy() {
|
|
this.setTargetElement(null);
|
|
this.renderer = null;
|
|
this._currentCursor = null;
|
|
}
|
|
/**
|
|
* Sets the current cursor mode, handling any callbacks or CSS style changes.
|
|
* @param mode - cursor mode, a key from the cursorStyles dictionary
|
|
*/
|
|
setCursor(mode) {
|
|
mode = mode || "default";
|
|
let applyStyles = true;
|
|
if (globalThis.OffscreenCanvas && this.domElement instanceof OffscreenCanvas) {
|
|
applyStyles = false;
|
|
}
|
|
if (this._currentCursor === mode) {
|
|
return;
|
|
}
|
|
this._currentCursor = mode;
|
|
const style = this.cursorStyles[mode];
|
|
if (style) {
|
|
switch (typeof style) {
|
|
case "string":
|
|
if (applyStyles) {
|
|
this.domElement.style.cursor = style;
|
|
}
|
|
break;
|
|
case "function":
|
|
style(mode);
|
|
break;
|
|
case "object":
|
|
if (applyStyles) {
|
|
Object.assign(this.domElement.style, style);
|
|
}
|
|
break;
|
|
}
|
|
} else if (applyStyles && typeof mode === "string" && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) {
|
|
this.domElement.style.cursor = mode;
|
|
}
|
|
}
|
|
/**
|
|
* The global pointer event.
|
|
* Useful for getting the pointer position without listening to events.
|
|
* @since 7.2.0
|
|
*/
|
|
get pointer() {
|
|
return this._rootPointerEvent;
|
|
}
|
|
/**
|
|
* Event handler for pointer down events on {@link EventSystem#domElement this.domElement}.
|
|
* @param nativeEvent - The native mouse/pointer/touch event.
|
|
*/
|
|
_onPointerDown(nativeEvent) {
|
|
if (!this.features.click)
|
|
return;
|
|
this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
|
|
const events = this._normalizeToPointerData(nativeEvent);
|
|
if (this.autoPreventDefault && events[0].isNormalized) {
|
|
const cancelable = nativeEvent.cancelable || !("cancelable" in nativeEvent);
|
|
if (cancelable) {
|
|
nativeEvent.preventDefault();
|
|
}
|
|
}
|
|
for (let i = 0, j = events.length; i < j; i++) {
|
|
const nativeEvent2 = events[i];
|
|
const federatedEvent = this._bootstrapEvent(this._rootPointerEvent, nativeEvent2);
|
|
this.rootBoundary.mapEvent(federatedEvent);
|
|
}
|
|
this.setCursor(this.rootBoundary.cursor);
|
|
}
|
|
/**
|
|
* Event handler for pointer move events on on {@link EventSystem#domElement this.domElement}.
|
|
* @param nativeEvent - The native mouse/pointer/touch events.
|
|
*/
|
|
_onPointerMove(nativeEvent) {
|
|
if (!this.features.move)
|
|
return;
|
|
this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
|
|
EventsTicker.pointerMoved();
|
|
const normalizedEvents = this._normalizeToPointerData(nativeEvent);
|
|
for (let i = 0, j = normalizedEvents.length; i < j; i++) {
|
|
const event = this._bootstrapEvent(this._rootPointerEvent, normalizedEvents[i]);
|
|
this.rootBoundary.mapEvent(event);
|
|
}
|
|
this.setCursor(this.rootBoundary.cursor);
|
|
}
|
|
/**
|
|
* Event handler for pointer up events on {@link EventSystem#domElement this.domElement}.
|
|
* @param nativeEvent - The native mouse/pointer/touch event.
|
|
*/
|
|
_onPointerUp(nativeEvent) {
|
|
if (!this.features.click)
|
|
return;
|
|
this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
|
|
let target = nativeEvent.target;
|
|
if (nativeEvent.composedPath && nativeEvent.composedPath().length > 0) {
|
|
target = nativeEvent.composedPath()[0];
|
|
}
|
|
const outside = target !== this.domElement ? "outside" : "";
|
|
const normalizedEvents = this._normalizeToPointerData(nativeEvent);
|
|
for (let i = 0, j = normalizedEvents.length; i < j; i++) {
|
|
const event = this._bootstrapEvent(this._rootPointerEvent, normalizedEvents[i]);
|
|
event.type += outside;
|
|
this.rootBoundary.mapEvent(event);
|
|
}
|
|
this.setCursor(this.rootBoundary.cursor);
|
|
}
|
|
/**
|
|
* Event handler for pointer over & out events on {@link EventSystem#domElement this.domElement}.
|
|
* @param nativeEvent - The native mouse/pointer/touch event.
|
|
*/
|
|
_onPointerOverOut(nativeEvent) {
|
|
if (!this.features.click)
|
|
return;
|
|
this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
|
|
const normalizedEvents = this._normalizeToPointerData(nativeEvent);
|
|
for (let i = 0, j = normalizedEvents.length; i < j; i++) {
|
|
const event = this._bootstrapEvent(this._rootPointerEvent, normalizedEvents[i]);
|
|
this.rootBoundary.mapEvent(event);
|
|
}
|
|
this.setCursor(this.rootBoundary.cursor);
|
|
}
|
|
/**
|
|
* Passive handler for `wheel` events on {@link EventSystem.domElement this.domElement}.
|
|
* @param nativeEvent - The native wheel event.
|
|
*/
|
|
onWheel(nativeEvent) {
|
|
if (!this.features.wheel)
|
|
return;
|
|
const wheelEvent = this.normalizeWheelEvent(nativeEvent);
|
|
this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
|
|
this.rootBoundary.mapEvent(wheelEvent);
|
|
}
|
|
/**
|
|
* Sets the {@link EventSystem#domElement domElement} and binds event listeners.
|
|
*
|
|
* To deregister the current DOM element without setting a new one, pass {@code null}.
|
|
* @param element - The new DOM element.
|
|
*/
|
|
setTargetElement(element) {
|
|
this._removeEvents();
|
|
this.domElement = element;
|
|
EventsTicker.domElement = element;
|
|
this._addEvents();
|
|
}
|
|
/** Register event listeners on {@link Renderer#domElement this.domElement}. */
|
|
_addEvents() {
|
|
if (this._eventsAdded || !this.domElement) {
|
|
return;
|
|
}
|
|
EventsTicker.addTickerListener();
|
|
const style = this.domElement.style;
|
|
if (style) {
|
|
if (globalThis.navigator.msPointerEnabled) {
|
|
style.msContentZooming = "none";
|
|
style.msTouchAction = "none";
|
|
} else if (this.supportsPointerEvents) {
|
|
style.touchAction = "none";
|
|
}
|
|
}
|
|
if (this.supportsPointerEvents) {
|
|
globalThis.document.addEventListener("pointermove", this._onPointerMove, true);
|
|
this.domElement.addEventListener("pointerdown", this._onPointerDown, true);
|
|
this.domElement.addEventListener("pointerleave", this._onPointerOverOut, true);
|
|
this.domElement.addEventListener("pointerover", this._onPointerOverOut, true);
|
|
globalThis.addEventListener("pointerup", this._onPointerUp, true);
|
|
} else {
|
|
globalThis.document.addEventListener("mousemove", this._onPointerMove, true);
|
|
this.domElement.addEventListener("mousedown", this._onPointerDown, true);
|
|
this.domElement.addEventListener("mouseout", this._onPointerOverOut, true);
|
|
this.domElement.addEventListener("mouseover", this._onPointerOverOut, true);
|
|
globalThis.addEventListener("mouseup", this._onPointerUp, true);
|
|
if (this.supportsTouchEvents) {
|
|
this.domElement.addEventListener("touchstart", this._onPointerDown, true);
|
|
this.domElement.addEventListener("touchend", this._onPointerUp, true);
|
|
this.domElement.addEventListener("touchmove", this._onPointerMove, true);
|
|
}
|
|
}
|
|
this.domElement.addEventListener("wheel", this.onWheel, {
|
|
passive: true,
|
|
capture: true
|
|
});
|
|
this._eventsAdded = true;
|
|
}
|
|
/** Unregister event listeners on {@link EventSystem#domElement this.domElement}. */
|
|
_removeEvents() {
|
|
if (!this._eventsAdded || !this.domElement) {
|
|
return;
|
|
}
|
|
EventsTicker.removeTickerListener();
|
|
const style = this.domElement.style;
|
|
if (style) {
|
|
if (globalThis.navigator.msPointerEnabled) {
|
|
style.msContentZooming = "";
|
|
style.msTouchAction = "";
|
|
} else if (this.supportsPointerEvents) {
|
|
style.touchAction = "";
|
|
}
|
|
}
|
|
if (this.supportsPointerEvents) {
|
|
globalThis.document.removeEventListener("pointermove", this._onPointerMove, true);
|
|
this.domElement.removeEventListener("pointerdown", this._onPointerDown, true);
|
|
this.domElement.removeEventListener("pointerleave", this._onPointerOverOut, true);
|
|
this.domElement.removeEventListener("pointerover", this._onPointerOverOut, true);
|
|
globalThis.removeEventListener("pointerup", this._onPointerUp, true);
|
|
} else {
|
|
globalThis.document.removeEventListener("mousemove", this._onPointerMove, true);
|
|
this.domElement.removeEventListener("mousedown", this._onPointerDown, true);
|
|
this.domElement.removeEventListener("mouseout", this._onPointerOverOut, true);
|
|
this.domElement.removeEventListener("mouseover", this._onPointerOverOut, true);
|
|
globalThis.removeEventListener("mouseup", this._onPointerUp, true);
|
|
if (this.supportsTouchEvents) {
|
|
this.domElement.removeEventListener("touchstart", this._onPointerDown, true);
|
|
this.domElement.removeEventListener("touchend", this._onPointerUp, true);
|
|
this.domElement.removeEventListener("touchmove", this._onPointerMove, true);
|
|
}
|
|
}
|
|
this.domElement.removeEventListener("wheel", this.onWheel, true);
|
|
this.domElement = null;
|
|
this._eventsAdded = false;
|
|
}
|
|
/**
|
|
* Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The
|
|
* resulting value is stored in the point. This takes into account the fact that the DOM
|
|
* element could be scaled and positioned anywhere on the screen.
|
|
* @param {PointData} point - the point that the result will be stored in
|
|
* @param {number} x - the x coord of the position to map
|
|
* @param {number} y - the y coord of the position to map
|
|
*/
|
|
mapPositionToPoint(point, x, y) {
|
|
const rect = this.domElement.isConnected ? this.domElement.getBoundingClientRect() : {
|
|
x: 0,
|
|
y: 0,
|
|
width: this.domElement.width,
|
|
height: this.domElement.height,
|
|
left: 0,
|
|
top: 0
|
|
};
|
|
const resolutionMultiplier = 1 / this.resolution;
|
|
point.x = (x - rect.left) * (this.domElement.width / rect.width) * resolutionMultiplier;
|
|
point.y = (y - rect.top) * (this.domElement.height / rect.height) * resolutionMultiplier;
|
|
}
|
|
/**
|
|
* Ensures that the original event object contains all data that a regular pointer event would have
|
|
* @param event - The original event data from a touch or mouse event
|
|
* @returns An array containing a single normalized pointer event, in the case of a pointer
|
|
* or mouse event, or a multiple normalized pointer events if there are multiple changed touches
|
|
*/
|
|
_normalizeToPointerData(event) {
|
|
const normalizedEvents = [];
|
|
if (this.supportsTouchEvents && event instanceof TouchEvent) {
|
|
for (let i = 0, li = event.changedTouches.length; i < li; i++) {
|
|
const touch = event.changedTouches[i];
|
|
if (typeof touch.button === "undefined")
|
|
touch.button = 0;
|
|
if (typeof touch.buttons === "undefined")
|
|
touch.buttons = 1;
|
|
if (typeof touch.isPrimary === "undefined") {
|
|
touch.isPrimary = event.touches.length === 1 && event.type === "touchstart";
|
|
}
|
|
if (typeof touch.width === "undefined")
|
|
touch.width = touch.radiusX || 1;
|
|
if (typeof touch.height === "undefined")
|
|
touch.height = touch.radiusY || 1;
|
|
if (typeof touch.tiltX === "undefined")
|
|
touch.tiltX = 0;
|
|
if (typeof touch.tiltY === "undefined")
|
|
touch.tiltY = 0;
|
|
if (typeof touch.pointerType === "undefined")
|
|
touch.pointerType = "touch";
|
|
if (typeof touch.pointerId === "undefined")
|
|
touch.pointerId = touch.identifier || 0;
|
|
if (typeof touch.pressure === "undefined")
|
|
touch.pressure = touch.force || 0.5;
|
|
if (typeof touch.twist === "undefined")
|
|
touch.twist = 0;
|
|
if (typeof touch.tangentialPressure === "undefined")
|
|
touch.tangentialPressure = 0;
|
|
if (typeof touch.layerX === "undefined")
|
|
touch.layerX = touch.offsetX = touch.clientX;
|
|
if (typeof touch.layerY === "undefined")
|
|
touch.layerY = touch.offsetY = touch.clientY;
|
|
touch.isNormalized = true;
|
|
touch.type = event.type;
|
|
normalizedEvents.push(touch);
|
|
}
|
|
} else if (!globalThis.MouseEvent || event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof globalThis.PointerEvent))) {
|
|
const tempEvent = event;
|
|
if (typeof tempEvent.isPrimary === "undefined")
|
|
tempEvent.isPrimary = true;
|
|
if (typeof tempEvent.width === "undefined")
|
|
tempEvent.width = 1;
|
|
if (typeof tempEvent.height === "undefined")
|
|
tempEvent.height = 1;
|
|
if (typeof tempEvent.tiltX === "undefined")
|
|
tempEvent.tiltX = 0;
|
|
if (typeof tempEvent.tiltY === "undefined")
|
|
tempEvent.tiltY = 0;
|
|
if (typeof tempEvent.pointerType === "undefined")
|
|
tempEvent.pointerType = "mouse";
|
|
if (typeof tempEvent.pointerId === "undefined")
|
|
tempEvent.pointerId = MOUSE_POINTER_ID;
|
|
if (typeof tempEvent.pressure === "undefined")
|
|
tempEvent.pressure = 0.5;
|
|
if (typeof tempEvent.twist === "undefined")
|
|
tempEvent.twist = 0;
|
|
if (typeof tempEvent.tangentialPressure === "undefined")
|
|
tempEvent.tangentialPressure = 0;
|
|
tempEvent.isNormalized = true;
|
|
normalizedEvents.push(tempEvent);
|
|
} else {
|
|
normalizedEvents.push(event);
|
|
}
|
|
return normalizedEvents;
|
|
}
|
|
/**
|
|
* Normalizes the native {@link https://w3c.github.io/uievents/#interface-wheelevent WheelEvent}.
|
|
*
|
|
* The returned {@link FederatedWheelEvent} is a shared instance. It will not persist across
|
|
* multiple native wheel events.
|
|
* @param nativeEvent - The native wheel event that occurred on the canvas.
|
|
* @returns A federated wheel event.
|
|
*/
|
|
normalizeWheelEvent(nativeEvent) {
|
|
const event = this._rootWheelEvent;
|
|
this._transferMouseData(event, nativeEvent);
|
|
event.deltaX = nativeEvent.deltaX;
|
|
event.deltaY = nativeEvent.deltaY;
|
|
event.deltaZ = nativeEvent.deltaZ;
|
|
event.deltaMode = nativeEvent.deltaMode;
|
|
this.mapPositionToPoint(event.screen, nativeEvent.clientX, nativeEvent.clientY);
|
|
event.global.copyFrom(event.screen);
|
|
event.offset.copyFrom(event.screen);
|
|
event.nativeEvent = nativeEvent;
|
|
event.type = nativeEvent.type;
|
|
return event;
|
|
}
|
|
/**
|
|
* Normalizes the `nativeEvent` into a federateed {@link FederatedPointerEvent}.
|
|
* @param event
|
|
* @param nativeEvent
|
|
*/
|
|
_bootstrapEvent(event, nativeEvent) {
|
|
event.originalEvent = null;
|
|
event.nativeEvent = nativeEvent;
|
|
event.pointerId = nativeEvent.pointerId;
|
|
event.width = nativeEvent.width;
|
|
event.height = nativeEvent.height;
|
|
event.isPrimary = nativeEvent.isPrimary;
|
|
event.pointerType = nativeEvent.pointerType;
|
|
event.pressure = nativeEvent.pressure;
|
|
event.tangentialPressure = nativeEvent.tangentialPressure;
|
|
event.tiltX = nativeEvent.tiltX;
|
|
event.tiltY = nativeEvent.tiltY;
|
|
event.twist = nativeEvent.twist;
|
|
this._transferMouseData(event, nativeEvent);
|
|
this.mapPositionToPoint(event.screen, nativeEvent.clientX, nativeEvent.clientY);
|
|
event.global.copyFrom(event.screen);
|
|
event.offset.copyFrom(event.screen);
|
|
event.isTrusted = nativeEvent.isTrusted;
|
|
if (event.type === "pointerleave") {
|
|
event.type = "pointerout";
|
|
}
|
|
if (event.type.startsWith("mouse")) {
|
|
event.type = event.type.replace("mouse", "pointer");
|
|
}
|
|
if (event.type.startsWith("touch")) {
|
|
event.type = TOUCH_TO_POINTER[event.type] || event.type;
|
|
}
|
|
return event;
|
|
}
|
|
/**
|
|
* Transfers base & mouse event data from the {@code nativeEvent} to the federated event.
|
|
* @param event
|
|
* @param nativeEvent
|
|
*/
|
|
_transferMouseData(event, nativeEvent) {
|
|
event.isTrusted = nativeEvent.isTrusted;
|
|
event.srcElement = nativeEvent.srcElement;
|
|
event.timeStamp = performance.now();
|
|
event.type = nativeEvent.type;
|
|
event.altKey = nativeEvent.altKey;
|
|
event.button = nativeEvent.button;
|
|
event.buttons = nativeEvent.buttons;
|
|
event.client.x = nativeEvent.clientX;
|
|
event.client.y = nativeEvent.clientY;
|
|
event.ctrlKey = nativeEvent.ctrlKey;
|
|
event.metaKey = nativeEvent.metaKey;
|
|
event.movement.x = nativeEvent.movementX;
|
|
event.movement.y = nativeEvent.movementY;
|
|
event.page.x = nativeEvent.pageX;
|
|
event.page.y = nativeEvent.pageY;
|
|
event.relatedTarget = null;
|
|
event.shiftKey = nativeEvent.shiftKey;
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_EventSystem.extension = {
|
|
name: "events",
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.CanvasSystem,
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
priority: -1
|
|
};
|
|
/**
|
|
* The event features that are enabled by the EventSystem
|
|
* (included in the **pixi.js** and **pixi.js-legacy** bundle), otherwise it will be ignored.
|
|
* @since 7.2.0
|
|
*/
|
|
_EventSystem.defaultEventFeatures = {
|
|
/** Enables pointer events associated with pointer movement. */
|
|
move: true,
|
|
/** Enables global pointer move events. */
|
|
globalMove: true,
|
|
/** Enables pointer events associated with clicking. */
|
|
click: true,
|
|
/** Enables wheel events. */
|
|
wheel: true
|
|
};
|
|
let EventSystem = _EventSystem;
|
|
|
|
"use strict";
|
|
const FederatedContainer = {
|
|
/**
|
|
* Property-based event handler for the `click` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onclick = (event) => {
|
|
* //some function here that happens on click
|
|
* }
|
|
*/
|
|
onclick: null,
|
|
/**
|
|
* Property-based event handler for the `mousedown` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmousedown = (event) => {
|
|
* //some function here that happens on mousedown
|
|
* }
|
|
*/
|
|
onmousedown: null,
|
|
/**
|
|
* Property-based event handler for the `mouseenter` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseenter = (event) => {
|
|
* //some function here that happens on mouseenter
|
|
* }
|
|
*/
|
|
onmouseenter: null,
|
|
/**
|
|
* Property-based event handler for the `mouseleave` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseleave = (event) => {
|
|
* //some function here that happens on mouseleave
|
|
* }
|
|
*/
|
|
onmouseleave: null,
|
|
/**
|
|
* Property-based event handler for the `mousemove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmousemove = (event) => {
|
|
* //some function here that happens on mousemove
|
|
* }
|
|
*/
|
|
onmousemove: null,
|
|
/**
|
|
* Property-based event handler for the `globalmousemove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onglobalmousemove = (event) => {
|
|
* //some function here that happens on globalmousemove
|
|
* }
|
|
*/
|
|
onglobalmousemove: null,
|
|
/**
|
|
* Property-based event handler for the `mouseout` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseout = (event) => {
|
|
* //some function here that happens on mouseout
|
|
* }
|
|
*/
|
|
onmouseout: null,
|
|
/**
|
|
* Property-based event handler for the `mouseover` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseover = (event) => {
|
|
* //some function here that happens on mouseover
|
|
* }
|
|
*/
|
|
onmouseover: null,
|
|
/**
|
|
* Property-based event handler for the `mouseup` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseup = (event) => {
|
|
* //some function here that happens on mouseup
|
|
* }
|
|
*/
|
|
onmouseup: null,
|
|
/**
|
|
* Property-based event handler for the `mouseupoutside` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseupoutside = (event) => {
|
|
* //some function here that happens on mouseupoutside
|
|
* }
|
|
*/
|
|
onmouseupoutside: null,
|
|
/**
|
|
* Property-based event handler for the `pointercancel` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointercancel = (event) => {
|
|
* //some function here that happens on pointercancel
|
|
* }
|
|
*/
|
|
onpointercancel: null,
|
|
/**
|
|
* Property-based event handler for the `pointerdown` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerdown = (event) => {
|
|
* //some function here that happens on pointerdown
|
|
* }
|
|
*/
|
|
onpointerdown: null,
|
|
/**
|
|
* Property-based event handler for the `pointerenter` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerenter = (event) => {
|
|
* //some function here that happens on pointerenter
|
|
* }
|
|
*/
|
|
onpointerenter: null,
|
|
/**
|
|
* Property-based event handler for the `pointerleave` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerleave = (event) => {
|
|
* //some function here that happens on pointerleave
|
|
* }
|
|
*/
|
|
onpointerleave: null,
|
|
/**
|
|
* Property-based event handler for the `pointermove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointermove = (event) => {
|
|
* //some function here that happens on pointermove
|
|
* }
|
|
*/
|
|
onpointermove: null,
|
|
/**
|
|
* Property-based event handler for the `globalpointermove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onglobalpointermove = (event) => {
|
|
* //some function here that happens on globalpointermove
|
|
* }
|
|
*/
|
|
onglobalpointermove: null,
|
|
/**
|
|
* Property-based event handler for the `pointerout` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerout = (event) => {
|
|
* //some function here that happens on pointerout
|
|
* }
|
|
*/
|
|
onpointerout: null,
|
|
/**
|
|
* Property-based event handler for the `pointerover` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerover = (event) => {
|
|
* //some function here that happens on pointerover
|
|
* }
|
|
*/
|
|
onpointerover: null,
|
|
/**
|
|
* Property-based event handler for the `pointertap` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointertap = (event) => {
|
|
* //some function here that happens on pointertap
|
|
* }
|
|
*/
|
|
onpointertap: null,
|
|
/**
|
|
* Property-based event handler for the `pointerup` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerup = (event) => {
|
|
* //some function here that happens on pointerup
|
|
* }
|
|
*/
|
|
onpointerup: null,
|
|
/**
|
|
* Property-based event handler for the `pointerupoutside` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerupoutside = (event) => {
|
|
* //some function here that happens on pointerupoutside
|
|
* }
|
|
*/
|
|
onpointerupoutside: null,
|
|
/**
|
|
* Property-based event handler for the `rightclick` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onrightclick = (event) => {
|
|
* //some function here that happens on rightclick
|
|
* }
|
|
*/
|
|
onrightclick: null,
|
|
/**
|
|
* Property-based event handler for the `rightdown` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onrightdown = (event) => {
|
|
* //some function here that happens on rightdown
|
|
* }
|
|
*/
|
|
onrightdown: null,
|
|
/**
|
|
* Property-based event handler for the `rightup` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onrightup = (event) => {
|
|
* //some function here that happens on rightup
|
|
* }
|
|
*/
|
|
onrightup: null,
|
|
/**
|
|
* Property-based event handler for the `rightupoutside` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onrightupoutside = (event) => {
|
|
* //some function here that happens on rightupoutside
|
|
* }
|
|
*/
|
|
onrightupoutside: null,
|
|
/**
|
|
* Property-based event handler for the `tap` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontap = (event) => {
|
|
* //some function here that happens on tap
|
|
* }
|
|
*/
|
|
ontap: null,
|
|
/**
|
|
* Property-based event handler for the `touchcancel` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchcancel = (event) => {
|
|
* //some function here that happens on touchcancel
|
|
* }
|
|
*/
|
|
ontouchcancel: null,
|
|
/**
|
|
* Property-based event handler for the `touchend` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchend = (event) => {
|
|
* //some function here that happens on touchend
|
|
* }
|
|
*/
|
|
ontouchend: null,
|
|
/**
|
|
* Property-based event handler for the `touchendoutside` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchendoutside = (event) => {
|
|
* //some function here that happens on touchendoutside
|
|
* }
|
|
*/
|
|
ontouchendoutside: null,
|
|
/**
|
|
* Property-based event handler for the `touchmove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchmove = (event) => {
|
|
* //some function here that happens on touchmove
|
|
* }
|
|
*/
|
|
ontouchmove: null,
|
|
/**
|
|
* Property-based event handler for the `globaltouchmove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onglobaltouchmove = (event) => {
|
|
* //some function here that happens on globaltouchmove
|
|
* }
|
|
*/
|
|
onglobaltouchmove: null,
|
|
/**
|
|
* Property-based event handler for the `touchstart` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchstart = (event) => {
|
|
* //some function here that happens on touchstart
|
|
* }
|
|
*/
|
|
ontouchstart: null,
|
|
/**
|
|
* Property-based event handler for the `wheel` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onwheel = (event) => {
|
|
* //some function here that happens on wheel
|
|
* }
|
|
*/
|
|
onwheel: null,
|
|
/**
|
|
* Enable interaction events for the Container. Touch, pointer and mouse
|
|
* @memberof scene.Container#
|
|
*/
|
|
get interactive() {
|
|
return this.eventMode === "dynamic" || this.eventMode === "static";
|
|
},
|
|
set interactive(value) {
|
|
this.eventMode = value ? "static" : "passive";
|
|
},
|
|
/**
|
|
* @ignore
|
|
*/
|
|
_internalEventMode: void 0,
|
|
/**
|
|
* Enable interaction events for the Container. Touch, pointer and mouse.
|
|
* There are 5 types of interaction settings:
|
|
* - `'none'`: Ignores all interaction events, even on its children.
|
|
* - `'passive'`: **(default)** Does not emit events and ignores all hit testing on itself and non-interactive children.
|
|
* Interactive children will still emit events.
|
|
* - `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7
|
|
* - `'static'`: Emit events and is hit tested. Same as `interaction = true` in v7
|
|
* - `'dynamic'`: Emits events and is hit tested but will also receive mock interaction events fired from a ticker to
|
|
* allow for interaction when the mouse isn't moving
|
|
* @example
|
|
* import { Sprite } from 'pixi.js';
|
|
*
|
|
* const sprite = new Sprite(texture);
|
|
* sprite.eventMode = 'static';
|
|
* sprite.on('tap', (event) => {
|
|
* // Handle event
|
|
* });
|
|
* @memberof scene.Container#
|
|
* @since 7.2.0
|
|
*/
|
|
get eventMode() {
|
|
var _a;
|
|
return (_a = this._internalEventMode) != null ? _a : EventSystem.defaultEventMode;
|
|
},
|
|
set eventMode(value) {
|
|
this._internalEventMode = value;
|
|
},
|
|
/**
|
|
* Determines if the container is interactive or not
|
|
* @returns {boolean} Whether the container is interactive or not
|
|
* @memberof scene.Container#
|
|
* @since 7.2.0
|
|
* @example
|
|
* import { Sprite } from 'pixi.js';
|
|
*
|
|
* const sprite = new Sprite(texture);
|
|
* sprite.eventMode = 'static';
|
|
* sprite.isInteractive(); // true
|
|
*
|
|
* sprite.eventMode = 'dynamic';
|
|
* sprite.isInteractive(); // true
|
|
*
|
|
* sprite.eventMode = 'none';
|
|
* sprite.isInteractive(); // false
|
|
*
|
|
* sprite.eventMode = 'passive';
|
|
* sprite.isInteractive(); // false
|
|
*
|
|
* sprite.eventMode = 'auto';
|
|
* sprite.isInteractive(); // false
|
|
*/
|
|
isInteractive() {
|
|
return this.eventMode === "static" || this.eventMode === "dynamic";
|
|
},
|
|
/**
|
|
* Determines if the children to the container can be clicked/touched
|
|
* Setting this to false allows PixiJS to bypass a recursive `hitTest` function
|
|
* @memberof scene.Container#
|
|
*/
|
|
interactiveChildren: true,
|
|
/**
|
|
* Interaction shape. Children will be hit first, then this shape will be checked.
|
|
* Setting this will cause this shape to be checked in hit tests rather than the container's bounds.
|
|
* @example
|
|
* import { Rectangle, Sprite } from 'pixi.js';
|
|
*
|
|
* const sprite = new Sprite(texture);
|
|
* sprite.interactive = true;
|
|
* sprite.hitArea = new Rectangle(0, 0, 100, 100);
|
|
* @member {IHitArea}
|
|
* @memberof scene.Container#
|
|
*/
|
|
hitArea: null,
|
|
/**
|
|
* Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
|
|
* seeks to be compatible with the DOM's `addEventListener` with support for options.
|
|
* @memberof scene.Container
|
|
* @param type - The type of event to listen to.
|
|
* @param listener - The listener callback or object.
|
|
* @param options - Listener options, used for capture phase.
|
|
* @example
|
|
* // Tell the user whether they did a single, double, triple, or nth click.
|
|
* button.addEventListener('click', {
|
|
* handleEvent(e): {
|
|
* let prefix;
|
|
*
|
|
* switch (e.detail) {
|
|
* case 1: prefix = 'single'; break;
|
|
* case 2: prefix = 'double'; break;
|
|
* case 3: prefix = 'triple'; break;
|
|
* default: prefix = e.detail + 'th'; break;
|
|
* }
|
|
*
|
|
* console.log('That was a ' + prefix + 'click');
|
|
* }
|
|
* });
|
|
*
|
|
* // But skip the first click!
|
|
* button.parent.addEventListener('click', function blockClickOnce(e) {
|
|
* e.stopImmediatePropagation();
|
|
* button.parent.removeEventListener('click', blockClickOnce, true);
|
|
* }, {
|
|
* capture: true,
|
|
* });
|
|
*/
|
|
addEventListener(type, listener, options) {
|
|
const capture = typeof options === "boolean" && options || typeof options === "object" && options.capture;
|
|
const signal = typeof options === "object" ? options.signal : void 0;
|
|
const once = typeof options === "object" ? options.once === true : false;
|
|
const context = typeof listener === "function" ? void 0 : listener;
|
|
type = capture ? `${type}capture` : type;
|
|
const listenerFn = typeof listener === "function" ? listener : listener.handleEvent;
|
|
const emitter = this;
|
|
if (signal) {
|
|
signal.addEventListener("abort", () => {
|
|
emitter.off(type, listenerFn, context);
|
|
});
|
|
}
|
|
if (once) {
|
|
emitter.once(type, listenerFn, context);
|
|
} else {
|
|
emitter.on(type, listenerFn, context);
|
|
}
|
|
},
|
|
/**
|
|
* Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
|
|
* seeks to be compatible with the DOM's `removeEventListener` with support for options.
|
|
* @memberof scene.Container
|
|
* @param type - The type of event the listener is bound to.
|
|
* @param listener - The listener callback or object.
|
|
* @param options - The original listener options. This is required to deregister a capture phase listener.
|
|
*/
|
|
removeEventListener(type, listener, options) {
|
|
const capture = typeof options === "boolean" && options || typeof options === "object" && options.capture;
|
|
const context = typeof listener === "function" ? void 0 : listener;
|
|
type = capture ? `${type}capture` : type;
|
|
listener = typeof listener === "function" ? listener : listener.handleEvent;
|
|
this.off(type, listener, context);
|
|
},
|
|
/**
|
|
* Dispatch the event on this {@link Container} using the event's {@link EventBoundary}.
|
|
*
|
|
* The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.
|
|
* @memberof scene.Container
|
|
* @param e - The event to dispatch.
|
|
* @returns Whether the {@link FederatedEvent.preventDefault preventDefault}() method was not invoked.
|
|
* @example
|
|
* // Reuse a click event!
|
|
* button.dispatchEvent(clickEvent);
|
|
*/
|
|
dispatchEvent(e) {
|
|
if (!(e instanceof FederatedEvent)) {
|
|
throw new Error("Container cannot propagate events outside of the Federated Events API");
|
|
}
|
|
e.defaultPrevented = false;
|
|
e.path = null;
|
|
e.target = this;
|
|
e.manager.dispatchEvent(e);
|
|
return !e.defaultPrevented;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(EventSystem);
|
|
Container.mixin(FederatedContainer);
|
|
|
|
"use strict";
|
|
var LoaderParserPriority = /* @__PURE__ */ ((LoaderParserPriority2) => {
|
|
LoaderParserPriority2[LoaderParserPriority2["Low"] = 0] = "Low";
|
|
LoaderParserPriority2[LoaderParserPriority2["Normal"] = 1] = "Normal";
|
|
LoaderParserPriority2[LoaderParserPriority2["High"] = 2] = "High";
|
|
return LoaderParserPriority2;
|
|
})(LoaderParserPriority || {});
|
|
|
|
"use strict";
|
|
const BrowserAdapter = {
|
|
createCanvas: (width, height) => {
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
return canvas;
|
|
},
|
|
getCanvasRenderingContext2D: () => CanvasRenderingContext2D,
|
|
getWebGLRenderingContext: () => WebGLRenderingContext,
|
|
getNavigator: () => navigator,
|
|
getBaseUrl: () => {
|
|
var _a;
|
|
return (_a = document.baseURI) != null ? _a : window.location.href;
|
|
},
|
|
getFontFaceSet: () => document.fonts,
|
|
fetch: (url, options) => fetch(url, options),
|
|
parseXML: (xml) => {
|
|
const parser = new DOMParser();
|
|
return parser.parseFromString(xml, "text/xml");
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
let currentAdapter = BrowserAdapter;
|
|
const DOMAdapter = {
|
|
/**
|
|
* Returns the current adapter.
|
|
* @returns {environment.Adapter} The current adapter.
|
|
*/
|
|
get() {
|
|
return currentAdapter;
|
|
},
|
|
/**
|
|
* Sets the current adapter.
|
|
* @param adapter - The new adapter.
|
|
*/
|
|
set(adapter) {
|
|
currentAdapter = adapter;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
function assertPath(path2) {
|
|
if (typeof path2 !== "string") {
|
|
throw new TypeError(`Path must be a string. Received ${JSON.stringify(path2)}`);
|
|
}
|
|
}
|
|
function removeUrlParams(url) {
|
|
const re = url.split("?")[0];
|
|
return re.split("#")[0];
|
|
}
|
|
function escapeRegExp(string) {
|
|
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
}
|
|
function replaceAll(str, find, replace) {
|
|
return str.replace(new RegExp(escapeRegExp(find), "g"), replace);
|
|
}
|
|
function normalizeStringPosix(path2, allowAboveRoot) {
|
|
let res = "";
|
|
let lastSegmentLength = 0;
|
|
let lastSlash = -1;
|
|
let dots = 0;
|
|
let code = -1;
|
|
for (let i = 0; i <= path2.length; ++i) {
|
|
if (i < path2.length) {
|
|
code = path2.charCodeAt(i);
|
|
} else if (code === 47) {
|
|
break;
|
|
} else {
|
|
code = 47;
|
|
}
|
|
if (code === 47) {
|
|
if (lastSlash === i - 1 || dots === 1) {
|
|
} else if (lastSlash !== i - 1 && dots === 2) {
|
|
if (res.length < 2 || lastSegmentLength !== 2 || res.charCodeAt(res.length - 1) !== 46 || res.charCodeAt(res.length - 2) !== 46) {
|
|
if (res.length > 2) {
|
|
const lastSlashIndex = res.lastIndexOf("/");
|
|
if (lastSlashIndex !== res.length - 1) {
|
|
if (lastSlashIndex === -1) {
|
|
res = "";
|
|
lastSegmentLength = 0;
|
|
} else {
|
|
res = res.slice(0, lastSlashIndex);
|
|
lastSegmentLength = res.length - 1 - res.lastIndexOf("/");
|
|
}
|
|
lastSlash = i;
|
|
dots = 0;
|
|
continue;
|
|
}
|
|
} else if (res.length === 2 || res.length === 1) {
|
|
res = "";
|
|
lastSegmentLength = 0;
|
|
lastSlash = i;
|
|
dots = 0;
|
|
continue;
|
|
}
|
|
}
|
|
if (allowAboveRoot) {
|
|
if (res.length > 0) {
|
|
res += "/..";
|
|
} else {
|
|
res = "..";
|
|
}
|
|
lastSegmentLength = 2;
|
|
}
|
|
} else {
|
|
if (res.length > 0) {
|
|
res += `/${path2.slice(lastSlash + 1, i)}`;
|
|
} else {
|
|
res = path2.slice(lastSlash + 1, i);
|
|
}
|
|
lastSegmentLength = i - lastSlash - 1;
|
|
}
|
|
lastSlash = i;
|
|
dots = 0;
|
|
} else if (code === 46 && dots !== -1) {
|
|
++dots;
|
|
} else {
|
|
dots = -1;
|
|
}
|
|
}
|
|
return res;
|
|
}
|
|
const path = {
|
|
/**
|
|
* Converts a path to posix format.
|
|
* @param path - The path to convert to posix
|
|
*/
|
|
toPosix(path2) {
|
|
return replaceAll(path2, "\\", "/");
|
|
},
|
|
/**
|
|
* Checks if the path is a URL e.g. http://, https://
|
|
* @param path - The path to check
|
|
*/
|
|
isUrl(path2) {
|
|
return /^https?:/.test(this.toPosix(path2));
|
|
},
|
|
/**
|
|
* Checks if the path is a data URL
|
|
* @param path - The path to check
|
|
*/
|
|
isDataUrl(path2) {
|
|
return /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z0-9-.!#$%*+.{}|~`]+=[a-z0-9-.!#$%*+.{}()_|~`]+)*)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@\/?%\s<>]*?)$/i.test(path2);
|
|
},
|
|
/**
|
|
* Checks if the path is a blob URL
|
|
* @param path - The path to check
|
|
*/
|
|
isBlobUrl(path2) {
|
|
return path2.startsWith("blob:");
|
|
},
|
|
/**
|
|
* Checks if the path has a protocol e.g. http://, https://, file:///, data:, blob:, C:/
|
|
* This will return true for windows file paths
|
|
* @param path - The path to check
|
|
*/
|
|
hasProtocol(path2) {
|
|
return /^[^/:]+:/.test(this.toPosix(path2));
|
|
},
|
|
/**
|
|
* Returns the protocol of the path e.g. http://, https://, file:///, data:, blob:, C:/
|
|
* @param path - The path to get the protocol from
|
|
*/
|
|
getProtocol(path2) {
|
|
assertPath(path2);
|
|
path2 = this.toPosix(path2);
|
|
const matchFile = /^file:\/\/\//.exec(path2);
|
|
if (matchFile) {
|
|
return matchFile[0];
|
|
}
|
|
const matchProtocol = /^[^/:]+:\/{0,2}/.exec(path2);
|
|
if (matchProtocol) {
|
|
return matchProtocol[0];
|
|
}
|
|
return "";
|
|
},
|
|
/**
|
|
* Converts URL to an absolute path.
|
|
* When loading from a Web Worker, we must use absolute paths.
|
|
* If the URL is already absolute we return it as is
|
|
* If it's not, we convert it
|
|
* @param url - The URL to test
|
|
* @param customBaseUrl - The base URL to use
|
|
* @param customRootUrl - The root URL to use
|
|
*/
|
|
toAbsolute(url, customBaseUrl, customRootUrl) {
|
|
assertPath(url);
|
|
if (this.isDataUrl(url) || this.isBlobUrl(url))
|
|
return url;
|
|
const baseUrl = removeUrlParams(this.toPosix(customBaseUrl != null ? customBaseUrl : DOMAdapter.get().getBaseUrl()));
|
|
const rootUrl = removeUrlParams(this.toPosix(customRootUrl != null ? customRootUrl : this.rootname(baseUrl)));
|
|
url = this.toPosix(url);
|
|
if (url.startsWith("/")) {
|
|
return path.join(rootUrl, url.slice(1));
|
|
}
|
|
const absolutePath = this.isAbsolute(url) ? url : this.join(baseUrl, url);
|
|
return absolutePath;
|
|
},
|
|
/**
|
|
* Normalizes the given path, resolving '..' and '.' segments
|
|
* @param path - The path to normalize
|
|
*/
|
|
normalize(path2) {
|
|
assertPath(path2);
|
|
if (path2.length === 0)
|
|
return ".";
|
|
if (this.isDataUrl(path2) || this.isBlobUrl(path2))
|
|
return path2;
|
|
path2 = this.toPosix(path2);
|
|
let protocol = "";
|
|
const isAbsolute = path2.startsWith("/");
|
|
if (this.hasProtocol(path2)) {
|
|
protocol = this.rootname(path2);
|
|
path2 = path2.slice(protocol.length);
|
|
}
|
|
const trailingSeparator = path2.endsWith("/");
|
|
path2 = normalizeStringPosix(path2, false);
|
|
if (path2.length > 0 && trailingSeparator)
|
|
path2 += "/";
|
|
if (isAbsolute)
|
|
return `/${path2}`;
|
|
return protocol + path2;
|
|
},
|
|
/**
|
|
* Determines if path is an absolute path.
|
|
* Absolute paths can be urls, data urls, or paths on disk
|
|
* @param path - The path to test
|
|
*/
|
|
isAbsolute(path2) {
|
|
assertPath(path2);
|
|
path2 = this.toPosix(path2);
|
|
if (this.hasProtocol(path2))
|
|
return true;
|
|
return path2.startsWith("/");
|
|
},
|
|
/**
|
|
* Joins all given path segments together using the platform-specific separator as a delimiter,
|
|
* then normalizes the resulting path
|
|
* @param segments - The segments of the path to join
|
|
*/
|
|
join(...segments) {
|
|
var _a;
|
|
if (segments.length === 0) {
|
|
return ".";
|
|
}
|
|
let joined;
|
|
for (let i = 0; i < segments.length; ++i) {
|
|
const arg = segments[i];
|
|
assertPath(arg);
|
|
if (arg.length > 0) {
|
|
if (joined === void 0)
|
|
joined = arg;
|
|
else {
|
|
const prevArg = (_a = segments[i - 1]) != null ? _a : "";
|
|
if (this.joinExtensions.includes(this.extname(prevArg).toLowerCase())) {
|
|
joined += `/../${arg}`;
|
|
} else {
|
|
joined += `/${arg}`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (joined === void 0) {
|
|
return ".";
|
|
}
|
|
return this.normalize(joined);
|
|
},
|
|
/**
|
|
* Returns the directory name of a path
|
|
* @param path - The path to parse
|
|
*/
|
|
dirname(path2) {
|
|
assertPath(path2);
|
|
if (path2.length === 0)
|
|
return ".";
|
|
path2 = this.toPosix(path2);
|
|
let code = path2.charCodeAt(0);
|
|
const hasRoot = code === 47;
|
|
let end = -1;
|
|
let matchedSlash = true;
|
|
const proto = this.getProtocol(path2);
|
|
const origpath = path2;
|
|
path2 = path2.slice(proto.length);
|
|
for (let i = path2.length - 1; i >= 1; --i) {
|
|
code = path2.charCodeAt(i);
|
|
if (code === 47) {
|
|
if (!matchedSlash) {
|
|
end = i;
|
|
break;
|
|
}
|
|
} else {
|
|
matchedSlash = false;
|
|
}
|
|
}
|
|
if (end === -1)
|
|
return hasRoot ? "/" : this.isUrl(origpath) ? proto + path2 : proto;
|
|
if (hasRoot && end === 1)
|
|
return "//";
|
|
return proto + path2.slice(0, end);
|
|
},
|
|
/**
|
|
* Returns the root of the path e.g. /, C:/, file:///, http://domain.com/
|
|
* @param path - The path to parse
|
|
*/
|
|
rootname(path2) {
|
|
assertPath(path2);
|
|
path2 = this.toPosix(path2);
|
|
let root = "";
|
|
if (path2.startsWith("/"))
|
|
root = "/";
|
|
else {
|
|
root = this.getProtocol(path2);
|
|
}
|
|
if (this.isUrl(path2)) {
|
|
const index = path2.indexOf("/", root.length);
|
|
if (index !== -1) {
|
|
root = path2.slice(0, index);
|
|
} else
|
|
root = path2;
|
|
if (!root.endsWith("/"))
|
|
root += "/";
|
|
}
|
|
return root;
|
|
},
|
|
/**
|
|
* Returns the last portion of a path
|
|
* @param path - The path to test
|
|
* @param ext - Optional extension to remove
|
|
*/
|
|
basename(path2, ext) {
|
|
assertPath(path2);
|
|
if (ext)
|
|
assertPath(ext);
|
|
path2 = removeUrlParams(this.toPosix(path2));
|
|
let start = 0;
|
|
let end = -1;
|
|
let matchedSlash = true;
|
|
let i;
|
|
if (ext !== void 0 && ext.length > 0 && ext.length <= path2.length) {
|
|
if (ext.length === path2.length && ext === path2)
|
|
return "";
|
|
let extIdx = ext.length - 1;
|
|
let firstNonSlashEnd = -1;
|
|
for (i = path2.length - 1; i >= 0; --i) {
|
|
const code = path2.charCodeAt(i);
|
|
if (code === 47) {
|
|
if (!matchedSlash) {
|
|
start = i + 1;
|
|
break;
|
|
}
|
|
} else {
|
|
if (firstNonSlashEnd === -1) {
|
|
matchedSlash = false;
|
|
firstNonSlashEnd = i + 1;
|
|
}
|
|
if (extIdx >= 0) {
|
|
if (code === ext.charCodeAt(extIdx)) {
|
|
if (--extIdx === -1) {
|
|
end = i;
|
|
}
|
|
} else {
|
|
extIdx = -1;
|
|
end = firstNonSlashEnd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (start === end)
|
|
end = firstNonSlashEnd;
|
|
else if (end === -1)
|
|
end = path2.length;
|
|
return path2.slice(start, end);
|
|
}
|
|
for (i = path2.length - 1; i >= 0; --i) {
|
|
if (path2.charCodeAt(i) === 47) {
|
|
if (!matchedSlash) {
|
|
start = i + 1;
|
|
break;
|
|
}
|
|
} else if (end === -1) {
|
|
matchedSlash = false;
|
|
end = i + 1;
|
|
}
|
|
}
|
|
if (end === -1)
|
|
return "";
|
|
return path2.slice(start, end);
|
|
},
|
|
/**
|
|
* Returns the extension of the path, from the last occurrence of the . (period) character to end of string in the last
|
|
* portion of the path. If there is no . in the last portion of the path, or if there are no . characters other than
|
|
* the first character of the basename of path, an empty string is returned.
|
|
* @param path - The path to parse
|
|
*/
|
|
extname(path2) {
|
|
assertPath(path2);
|
|
path2 = removeUrlParams(this.toPosix(path2));
|
|
let startDot = -1;
|
|
let startPart = 0;
|
|
let end = -1;
|
|
let matchedSlash = true;
|
|
let preDotState = 0;
|
|
for (let i = path2.length - 1; i >= 0; --i) {
|
|
const code = path2.charCodeAt(i);
|
|
if (code === 47) {
|
|
if (!matchedSlash) {
|
|
startPart = i + 1;
|
|
break;
|
|
}
|
|
continue;
|
|
}
|
|
if (end === -1) {
|
|
matchedSlash = false;
|
|
end = i + 1;
|
|
}
|
|
if (code === 46) {
|
|
if (startDot === -1)
|
|
startDot = i;
|
|
else if (preDotState !== 1)
|
|
preDotState = 1;
|
|
} else if (startDot !== -1) {
|
|
preDotState = -1;
|
|
}
|
|
}
|
|
if (startDot === -1 || end === -1 || preDotState === 0 || preDotState === 1 && startDot === end - 1 && startDot === startPart + 1) {
|
|
return "";
|
|
}
|
|
return path2.slice(startDot, end);
|
|
},
|
|
/**
|
|
* Parses a path into an object containing the 'root', `dir`, `base`, `ext`, and `name` properties.
|
|
* @param path - The path to parse
|
|
*/
|
|
parse(path2) {
|
|
assertPath(path2);
|
|
const ret = { root: "", dir: "", base: "", ext: "", name: "" };
|
|
if (path2.length === 0)
|
|
return ret;
|
|
path2 = removeUrlParams(this.toPosix(path2));
|
|
let code = path2.charCodeAt(0);
|
|
const isAbsolute = this.isAbsolute(path2);
|
|
let start;
|
|
const protocol = "";
|
|
ret.root = this.rootname(path2);
|
|
if (isAbsolute || this.hasProtocol(path2)) {
|
|
start = 1;
|
|
} else {
|
|
start = 0;
|
|
}
|
|
let startDot = -1;
|
|
let startPart = 0;
|
|
let end = -1;
|
|
let matchedSlash = true;
|
|
let i = path2.length - 1;
|
|
let preDotState = 0;
|
|
for (; i >= start; --i) {
|
|
code = path2.charCodeAt(i);
|
|
if (code === 47) {
|
|
if (!matchedSlash) {
|
|
startPart = i + 1;
|
|
break;
|
|
}
|
|
continue;
|
|
}
|
|
if (end === -1) {
|
|
matchedSlash = false;
|
|
end = i + 1;
|
|
}
|
|
if (code === 46) {
|
|
if (startDot === -1)
|
|
startDot = i;
|
|
else if (preDotState !== 1)
|
|
preDotState = 1;
|
|
} else if (startDot !== -1) {
|
|
preDotState = -1;
|
|
}
|
|
}
|
|
if (startDot === -1 || end === -1 || preDotState === 0 || preDotState === 1 && startDot === end - 1 && startDot === startPart + 1) {
|
|
if (end !== -1) {
|
|
if (startPart === 0 && isAbsolute)
|
|
ret.base = ret.name = path2.slice(1, end);
|
|
else
|
|
ret.base = ret.name = path2.slice(startPart, end);
|
|
}
|
|
} else {
|
|
if (startPart === 0 && isAbsolute) {
|
|
ret.name = path2.slice(1, startDot);
|
|
ret.base = path2.slice(1, end);
|
|
} else {
|
|
ret.name = path2.slice(startPart, startDot);
|
|
ret.base = path2.slice(startPart, end);
|
|
}
|
|
ret.ext = path2.slice(startDot, end);
|
|
}
|
|
ret.dir = this.dirname(path2);
|
|
if (protocol)
|
|
ret.dir = protocol + ret.dir;
|
|
return ret;
|
|
},
|
|
sep: "/",
|
|
delimiter: ":",
|
|
joinExtensions: [".html"]
|
|
};
|
|
|
|
"use strict";
|
|
const convertToList = (input, transform, forceTransform = false) => {
|
|
if (!Array.isArray(input)) {
|
|
input = [input];
|
|
}
|
|
if (!transform) {
|
|
return input;
|
|
}
|
|
return input.map((item) => {
|
|
if (typeof item === "string" || forceTransform) {
|
|
return transform(item);
|
|
}
|
|
return item;
|
|
});
|
|
};
|
|
|
|
"use strict";
|
|
function processX(base, ids, depth, result, tags) {
|
|
const id = ids[depth];
|
|
for (let i = 0; i < id.length; i++) {
|
|
const value = id[i];
|
|
if (depth < ids.length - 1) {
|
|
processX(base.replace(result[depth], value), ids, depth + 1, result, tags);
|
|
} else {
|
|
tags.push(base.replace(result[depth], value));
|
|
}
|
|
}
|
|
}
|
|
function createStringVariations(string) {
|
|
const regex = /\{(.*?)\}/g;
|
|
const result = string.match(regex);
|
|
const tags = [];
|
|
if (result) {
|
|
const ids = [];
|
|
result.forEach((vars) => {
|
|
const split = vars.substring(1, vars.length - 1).split(",");
|
|
ids.push(split);
|
|
});
|
|
processX(string, ids, 0, result, tags);
|
|
} else {
|
|
tags.push(string);
|
|
}
|
|
return tags;
|
|
}
|
|
|
|
"use strict";
|
|
const isSingleItem = (item) => !Array.isArray(item);
|
|
|
|
"use strict";
|
|
var __defProp$13 = Object.defineProperty;
|
|
var __getOwnPropSymbols$13 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$13 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$13 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$13 = (obj, key, value) => key in obj ? __defProp$13(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$13 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$13.call(b, prop))
|
|
__defNormalProp$13(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$13)
|
|
for (var prop of __getOwnPropSymbols$13(b)) {
|
|
if (__propIsEnum$13.call(b, prop))
|
|
__defNormalProp$13(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
class Resolver {
|
|
constructor() {
|
|
this._defaultBundleIdentifierOptions = {
|
|
connector: "-",
|
|
createBundleAssetId: (bundleId, assetId) => `${bundleId}${this._bundleIdConnector}${assetId}`,
|
|
extractAssetIdFromBundle: (bundleId, assetBundleId) => assetBundleId.replace(`${bundleId}${this._bundleIdConnector}`, "")
|
|
};
|
|
/** The character that is used to connect the bundleId and the assetId when generating a bundle asset id key */
|
|
this._bundleIdConnector = this._defaultBundleIdentifierOptions.connector;
|
|
/**
|
|
* A function that generates a bundle asset id key from a bundleId and an assetId
|
|
* @param bundleId - the bundleId
|
|
* @param assetId - the assetId
|
|
* @returns the bundle asset id key
|
|
*/
|
|
this._createBundleAssetId = this._defaultBundleIdentifierOptions.createBundleAssetId;
|
|
/**
|
|
* A function that generates an assetId from a bundle asset id key. This is the reverse of generateBundleAssetId
|
|
* @param bundleId - the bundleId
|
|
* @param assetBundleId - the bundle asset id key
|
|
* @returns the assetId
|
|
*/
|
|
this._extractAssetIdFromBundle = this._defaultBundleIdentifierOptions.extractAssetIdFromBundle;
|
|
this._assetMap = {};
|
|
this._preferredOrder = [];
|
|
this._parsers = [];
|
|
this._resolverHash = {};
|
|
this._bundles = {};
|
|
}
|
|
/**
|
|
* Override how the resolver deals with generating bundle ids.
|
|
* must be called before any bundles are added
|
|
* @param bundleIdentifier - the bundle identifier options
|
|
*/
|
|
setBundleIdentifier(bundleIdentifier) {
|
|
var _a, _b, _c;
|
|
this._bundleIdConnector = (_a = bundleIdentifier.connector) != null ? _a : this._bundleIdConnector;
|
|
this._createBundleAssetId = (_b = bundleIdentifier.createBundleAssetId) != null ? _b : this._createBundleAssetId;
|
|
this._extractAssetIdFromBundle = (_c = bundleIdentifier.extractAssetIdFromBundle) != null ? _c : this._extractAssetIdFromBundle;
|
|
if (this._extractAssetIdFromBundle("foo", this._createBundleAssetId("foo", "bar")) !== "bar") {
|
|
throw new Error("[Resolver] GenerateBundleAssetId are not working correctly");
|
|
}
|
|
}
|
|
/**
|
|
* Let the resolver know which assets you prefer to use when resolving assets.
|
|
* Multiple prefer user defined rules can be added.
|
|
* @example
|
|
* resolver.prefer({
|
|
* // first look for something with the correct format, and then then correct resolution
|
|
* priority: ['format', 'resolution'],
|
|
* params:{
|
|
* format:'webp', // prefer webp images
|
|
* resolution: 2, // prefer a resolution of 2
|
|
* }
|
|
* })
|
|
* resolver.add('foo', ['bar@2x.webp', 'bar@2x.png', 'bar.webp', 'bar.png']);
|
|
* resolver.resolveUrl('foo') // => 'bar@2x.webp'
|
|
* @param preferOrders - the prefer options
|
|
*/
|
|
prefer(...preferOrders) {
|
|
preferOrders.forEach((prefer) => {
|
|
this._preferredOrder.push(prefer);
|
|
if (!prefer.priority) {
|
|
prefer.priority = Object.keys(prefer.params);
|
|
}
|
|
});
|
|
this._resolverHash = {};
|
|
}
|
|
/**
|
|
* Set the base path to prepend to all urls when resolving
|
|
* @example
|
|
* resolver.basePath = 'https://home.com/';
|
|
* resolver.add('foo', 'bar.ong');
|
|
* resolver.resolveUrl('foo', 'bar.png'); // => 'https://home.com/bar.png'
|
|
* @param basePath - the base path to use
|
|
*/
|
|
set basePath(basePath) {
|
|
this._basePath = basePath;
|
|
}
|
|
get basePath() {
|
|
return this._basePath;
|
|
}
|
|
/**
|
|
* Set the root path for root-relative URLs. By default the `basePath`'s root is used. If no `basePath` is set, then the
|
|
* default value for browsers is `window.location.origin`
|
|
* @example
|
|
* // Application hosted on https://home.com/some-path/index.html
|
|
* resolver.basePath = 'https://home.com/some-path/';
|
|
* resolver.rootPath = 'https://home.com/';
|
|
* resolver.add('foo', '/bar.png');
|
|
* resolver.resolveUrl('foo', '/bar.png'); // => 'https://home.com/bar.png'
|
|
* @param rootPath - the root path to use
|
|
*/
|
|
set rootPath(rootPath) {
|
|
this._rootPath = rootPath;
|
|
}
|
|
get rootPath() {
|
|
return this._rootPath;
|
|
}
|
|
/**
|
|
* All the active URL parsers that help the parser to extract information and create
|
|
* an asset object-based on parsing the URL itself.
|
|
*
|
|
* Can be added using the extensions API
|
|
* @example
|
|
* resolver.add('foo', [
|
|
* {
|
|
* resolution: 2,
|
|
* format: 'png',
|
|
* src: 'image@2x.png',
|
|
* },
|
|
* {
|
|
* resolution:1,
|
|
* format:'png',
|
|
* src: 'image.png',
|
|
* },
|
|
* ]);
|
|
*
|
|
* // With a url parser the information such as resolution and file format could extracted from the url itself:
|
|
* extensions.add({
|
|
* extension: ExtensionType.ResolveParser,
|
|
* test: loadTextures.test, // test if url ends in an image
|
|
* parse: (value: string) =>
|
|
* ({
|
|
* resolution: parseFloat(Resolver.RETINA_PREFIX.exec(value)?.[1] ?? '1'),
|
|
* format: value.split('.').pop(),
|
|
* src: value,
|
|
* }),
|
|
* });
|
|
*
|
|
* // Now resolution and format can be extracted from the url
|
|
* resolver.add('foo', [
|
|
* 'image@2x.png',
|
|
* 'image.png',
|
|
* ]);
|
|
*/
|
|
get parsers() {
|
|
return this._parsers;
|
|
}
|
|
/** Used for testing, this resets the resolver to its initial state */
|
|
reset() {
|
|
this.setBundleIdentifier(this._defaultBundleIdentifierOptions);
|
|
this._assetMap = {};
|
|
this._preferredOrder = [];
|
|
this._resolverHash = {};
|
|
this._rootPath = null;
|
|
this._basePath = null;
|
|
this._manifest = null;
|
|
this._bundles = {};
|
|
this._defaultSearchParams = null;
|
|
}
|
|
/**
|
|
* Sets the default URL search parameters for the URL resolver. The urls can be specified as a string or an object.
|
|
* @param searchParams - the default url parameters to append when resolving urls
|
|
*/
|
|
setDefaultSearchParams(searchParams) {
|
|
if (typeof searchParams === "string") {
|
|
this._defaultSearchParams = searchParams;
|
|
} else {
|
|
const queryValues = searchParams;
|
|
this._defaultSearchParams = Object.keys(queryValues).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(queryValues[key])}`).join("&");
|
|
}
|
|
}
|
|
/**
|
|
* Returns the aliases for a given asset
|
|
* @param asset - the asset to get the aliases for
|
|
*/
|
|
getAlias(asset) {
|
|
const { alias, src } = asset;
|
|
const aliasesToUse = convertToList(
|
|
alias || src,
|
|
(value) => {
|
|
if (typeof value === "string")
|
|
return value;
|
|
if (Array.isArray(value))
|
|
return value.map((v) => {
|
|
var _a;
|
|
return (_a = v == null ? void 0 : v.src) != null ? _a : v;
|
|
});
|
|
if (value == null ? void 0 : value.src)
|
|
return value.src;
|
|
return value;
|
|
},
|
|
true
|
|
);
|
|
return aliasesToUse;
|
|
}
|
|
/**
|
|
* Add a manifest to the asset resolver. This is a nice way to add all the asset information in one go.
|
|
* generally a manifest would be built using a tool.
|
|
* @param manifest - the manifest to add to the resolver
|
|
*/
|
|
addManifest(manifest) {
|
|
if (this._manifest) {
|
|
warn("[Resolver] Manifest already exists, this will be overwritten");
|
|
}
|
|
this._manifest = manifest;
|
|
manifest.bundles.forEach((bundle) => {
|
|
this.addBundle(bundle.name, bundle.assets);
|
|
});
|
|
}
|
|
/**
|
|
* This adds a bundle of assets in one go so that you can resolve them as a group.
|
|
* For example you could add a bundle for each screen in you pixi app
|
|
* @example
|
|
* resolver.addBundle('animals', [
|
|
* { alias: 'bunny', src: 'bunny.png' },
|
|
* { alias: 'chicken', src: 'chicken.png' },
|
|
* { alias: 'thumper', src: 'thumper.png' },
|
|
* ]);
|
|
* // or
|
|
* resolver.addBundle('animals', {
|
|
* bunny: 'bunny.png',
|
|
* chicken: 'chicken.png',
|
|
* thumper: 'thumper.png',
|
|
* });
|
|
*
|
|
* const resolvedAssets = await resolver.resolveBundle('animals');
|
|
* @param bundleId - The id of the bundle to add
|
|
* @param assets - A record of the asset or assets that will be chosen from when loading via the specified key
|
|
*/
|
|
addBundle(bundleId, assets) {
|
|
const assetNames = [];
|
|
let convertedAssets = assets;
|
|
if (!Array.isArray(assets)) {
|
|
convertedAssets = Object.entries(assets).map(([alias, src]) => {
|
|
if (typeof src === "string" || Array.isArray(src)) {
|
|
return { alias, src };
|
|
}
|
|
return __spreadValues$13({ alias }, src);
|
|
});
|
|
}
|
|
convertedAssets.forEach((asset) => {
|
|
const srcs = asset.src;
|
|
const aliases = asset.alias;
|
|
let ids;
|
|
if (typeof aliases === "string") {
|
|
const bundleAssetId = this._createBundleAssetId(bundleId, aliases);
|
|
assetNames.push(bundleAssetId);
|
|
ids = [aliases, bundleAssetId];
|
|
} else {
|
|
const bundleIds = aliases.map((name) => this._createBundleAssetId(bundleId, name));
|
|
assetNames.push(...bundleIds);
|
|
ids = [...aliases, ...bundleIds];
|
|
}
|
|
this.add(__spreadValues$13(__spreadValues$13({}, asset), {
|
|
alias: ids,
|
|
src: srcs
|
|
}));
|
|
});
|
|
this._bundles[bundleId] = assetNames;
|
|
}
|
|
/**
|
|
* Tells the resolver what keys are associated with witch asset.
|
|
* The most important thing the resolver does
|
|
* @example
|
|
* // Single key, single asset:
|
|
* resolver.add({alias: 'foo', src: 'bar.png');
|
|
* resolver.resolveUrl('foo') // => 'bar.png'
|
|
*
|
|
* // Multiple keys, single asset:
|
|
* resolver.add({alias: ['foo', 'boo'], src: 'bar.png'});
|
|
* resolver.resolveUrl('foo') // => 'bar.png'
|
|
* resolver.resolveUrl('boo') // => 'bar.png'
|
|
*
|
|
* // Multiple keys, multiple assets:
|
|
* resolver.add({alias: ['foo', 'boo'], src: ['bar.png', 'bar.webp']});
|
|
* resolver.resolveUrl('foo') // => 'bar.png'
|
|
*
|
|
* // Add custom data attached to the resolver
|
|
* Resolver.add({
|
|
* alias: 'bunnyBooBooSmooth',
|
|
* src: 'bunny{png,webp}',
|
|
* data: { scaleMode:SCALE_MODES.NEAREST }, // Base texture options
|
|
* });
|
|
*
|
|
* resolver.resolve('bunnyBooBooSmooth') // => { src: 'bunny.png', data: { scaleMode: SCALE_MODES.NEAREST } }
|
|
* @param aliases - the UnresolvedAsset or array of UnresolvedAssets to add to the resolver
|
|
*/
|
|
add(aliases) {
|
|
const assets = [];
|
|
if (Array.isArray(aliases)) {
|
|
assets.push(...aliases);
|
|
} else {
|
|
assets.push(aliases);
|
|
}
|
|
let keyCheck;
|
|
keyCheck = (key) => {
|
|
if (this.hasKey(key)) {
|
|
warn(`[Resolver] already has key: ${key} overwriting`);
|
|
}
|
|
};
|
|
const assetArray = convertToList(assets);
|
|
assetArray.forEach((asset) => {
|
|
const { src } = asset;
|
|
let { data, format, loadParser } = asset;
|
|
const srcsToUse = convertToList(src).map((src2) => {
|
|
if (typeof src2 === "string") {
|
|
return createStringVariations(src2);
|
|
}
|
|
return Array.isArray(src2) ? src2 : [src2];
|
|
});
|
|
const aliasesToUse = this.getAlias(asset);
|
|
Array.isArray(aliasesToUse) ? aliasesToUse.forEach(keyCheck) : keyCheck(aliasesToUse);
|
|
const resolvedAssets = [];
|
|
srcsToUse.forEach((srcs) => {
|
|
srcs.forEach((src2) => {
|
|
var _a, _b, _c;
|
|
let formattedAsset = {};
|
|
if (typeof src2 !== "object") {
|
|
formattedAsset.src = src2;
|
|
for (let i = 0; i < this._parsers.length; i++) {
|
|
const parser = this._parsers[i];
|
|
if (parser.test(src2)) {
|
|
formattedAsset = parser.parse(src2);
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
data = (_a = src2.data) != null ? _a : data;
|
|
format = (_b = src2.format) != null ? _b : format;
|
|
loadParser = (_c = src2.loadParser) != null ? _c : loadParser;
|
|
formattedAsset = __spreadValues$13(__spreadValues$13({}, formattedAsset), src2);
|
|
}
|
|
if (!aliasesToUse) {
|
|
throw new Error(`[Resolver] alias is undefined for this asset: ${formattedAsset.src}`);
|
|
}
|
|
formattedAsset = this._buildResolvedAsset(formattedAsset, {
|
|
aliases: aliasesToUse,
|
|
data,
|
|
format,
|
|
loadParser
|
|
});
|
|
resolvedAssets.push(formattedAsset);
|
|
});
|
|
});
|
|
aliasesToUse.forEach((alias) => {
|
|
this._assetMap[alias] = resolvedAssets;
|
|
});
|
|
});
|
|
}
|
|
// TODO: this needs an overload like load did in Assets
|
|
/**
|
|
* If the resolver has had a manifest set via setManifest, this will return the assets urls for
|
|
* a given bundleId or bundleIds.
|
|
* @example
|
|
* // Manifest Example
|
|
* const manifest = {
|
|
* bundles: [
|
|
* {
|
|
* name: 'load-screen',
|
|
* assets: [
|
|
* {
|
|
* alias: 'background',
|
|
* src: 'sunset.png',
|
|
* },
|
|
* {
|
|
* alias: 'bar',
|
|
* src: 'load-bar.{png,webp}',
|
|
* },
|
|
* ],
|
|
* },
|
|
* {
|
|
* name: 'game-screen',
|
|
* assets: [
|
|
* {
|
|
* alias: 'character',
|
|
* src: 'robot.png',
|
|
* },
|
|
* {
|
|
* alias: 'enemy',
|
|
* src: 'bad-guy.png',
|
|
* },
|
|
* ],
|
|
* },
|
|
* ]
|
|
* };
|
|
*
|
|
* resolver.setManifest(manifest);
|
|
* const resolved = resolver.resolveBundle('load-screen');
|
|
* @param bundleIds - The bundle ids to resolve
|
|
* @returns All the bundles assets or a hash of assets for each bundle specified
|
|
*/
|
|
resolveBundle(bundleIds) {
|
|
const singleAsset = isSingleItem(bundleIds);
|
|
bundleIds = convertToList(bundleIds);
|
|
const out = {};
|
|
bundleIds.forEach((bundleId) => {
|
|
const assetNames = this._bundles[bundleId];
|
|
if (assetNames) {
|
|
const results = this.resolve(assetNames);
|
|
const assets = {};
|
|
for (const key in results) {
|
|
const asset = results[key];
|
|
assets[this._extractAssetIdFromBundle(bundleId, key)] = asset;
|
|
}
|
|
out[bundleId] = assets;
|
|
}
|
|
});
|
|
return singleAsset ? out[bundleIds[0]] : out;
|
|
}
|
|
/**
|
|
* Does exactly what resolve does, but returns just the URL rather than the whole asset object
|
|
* @param key - The key or keys to resolve
|
|
* @returns - The URLs associated with the key(s)
|
|
*/
|
|
resolveUrl(key) {
|
|
const result = this.resolve(key);
|
|
if (typeof key !== "string") {
|
|
const out = {};
|
|
for (const i in result) {
|
|
out[i] = result[i].src;
|
|
}
|
|
return out;
|
|
}
|
|
return result.src;
|
|
}
|
|
resolve(keys) {
|
|
const singleAsset = isSingleItem(keys);
|
|
keys = convertToList(keys);
|
|
const result = {};
|
|
keys.forEach((key) => {
|
|
if (!this._resolverHash[key]) {
|
|
if (this._assetMap[key]) {
|
|
let assets = this._assetMap[key];
|
|
const preferredOrder = this._getPreferredOrder(assets);
|
|
preferredOrder == null ? void 0 : preferredOrder.priority.forEach((priorityKey) => {
|
|
preferredOrder.params[priorityKey].forEach((value) => {
|
|
const filteredAssets = assets.filter((asset) => {
|
|
if (asset[priorityKey]) {
|
|
return asset[priorityKey] === value;
|
|
}
|
|
return false;
|
|
});
|
|
if (filteredAssets.length) {
|
|
assets = filteredAssets;
|
|
}
|
|
});
|
|
});
|
|
this._resolverHash[key] = assets[0];
|
|
} else {
|
|
this._resolverHash[key] = this._buildResolvedAsset({
|
|
alias: [key],
|
|
src: key
|
|
}, {});
|
|
}
|
|
}
|
|
result[key] = this._resolverHash[key];
|
|
});
|
|
return singleAsset ? result[keys[0]] : result;
|
|
}
|
|
/**
|
|
* Checks if an asset with a given key exists in the resolver
|
|
* @param key - The key of the asset
|
|
*/
|
|
hasKey(key) {
|
|
return !!this._assetMap[key];
|
|
}
|
|
/**
|
|
* Checks if a bundle with the given key exists in the resolver
|
|
* @param key - The key of the bundle
|
|
*/
|
|
hasBundle(key) {
|
|
return !!this._bundles[key];
|
|
}
|
|
/**
|
|
* Internal function for figuring out what prefer criteria an asset should use.
|
|
* @param assets
|
|
*/
|
|
_getPreferredOrder(assets) {
|
|
for (let i = 0; i < assets.length; i++) {
|
|
const asset = assets[0];
|
|
const preferred = this._preferredOrder.find((preference) => preference.params.format.includes(asset.format));
|
|
if (preferred) {
|
|
return preferred;
|
|
}
|
|
}
|
|
return this._preferredOrder[0];
|
|
}
|
|
/**
|
|
* Appends the default url parameters to the url
|
|
* @param url - The url to append the default parameters to
|
|
* @returns - The url with the default parameters appended
|
|
*/
|
|
_appendDefaultSearchParams(url) {
|
|
if (!this._defaultSearchParams)
|
|
return url;
|
|
const paramConnector = /\?/.test(url) ? "&" : "?";
|
|
return `${url}${paramConnector}${this._defaultSearchParams}`;
|
|
}
|
|
_buildResolvedAsset(formattedAsset, data) {
|
|
var _a, _b;
|
|
const { aliases, data: assetData, loadParser, format } = data;
|
|
if (this._basePath || this._rootPath) {
|
|
formattedAsset.src = path.toAbsolute(formattedAsset.src, this._basePath, this._rootPath);
|
|
}
|
|
formattedAsset.alias = (_a = aliases != null ? aliases : formattedAsset.alias) != null ? _a : [formattedAsset.src];
|
|
formattedAsset.src = this._appendDefaultSearchParams(formattedAsset.src);
|
|
formattedAsset.data = __spreadValues$13(__spreadValues$13({}, assetData || {}), formattedAsset.data);
|
|
formattedAsset.loadParser = loadParser != null ? loadParser : formattedAsset.loadParser;
|
|
formattedAsset.format = (_b = format != null ? format : formattedAsset.format) != null ? _b : getUrlExtension(formattedAsset.src);
|
|
return formattedAsset;
|
|
}
|
|
}
|
|
/**
|
|
* The prefix that denotes a URL is for a retina asset.
|
|
* @static
|
|
* @name RETINA_PREFIX
|
|
* @type {RegExp}
|
|
* @default /@([0-9\.]+)x/
|
|
* @example `@2x`
|
|
*/
|
|
Resolver.RETINA_PREFIX = /@([0-9\.]+)x/;
|
|
function getUrlExtension(url) {
|
|
return url.split(".").pop().split("?").shift().split("#").shift();
|
|
}
|
|
|
|
"use strict";
|
|
const copySearchParams = (targetUrl, sourceUrl) => {
|
|
const searchParams = sourceUrl.split("?")[1];
|
|
if (searchParams) {
|
|
targetUrl += `?${searchParams}`;
|
|
}
|
|
return targetUrl;
|
|
};
|
|
|
|
"use strict";
|
|
const ux = [1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1, 0, 1];
|
|
const uy = [0, 1, 1, 1, 0, -1, -1, -1, 0, 1, 1, 1, 0, -1, -1, -1];
|
|
const vx = [0, -1, -1, -1, 0, 1, 1, 1, 0, 1, 1, 1, 0, -1, -1, -1];
|
|
const vy = [1, 1, 0, -1, -1, -1, 0, 1, -1, -1, 0, 1, 1, 1, 0, -1];
|
|
const rotationCayley = [];
|
|
const rotationMatrices = [];
|
|
const signum = Math.sign;
|
|
function init() {
|
|
for (let i = 0; i < 16; i++) {
|
|
const row = [];
|
|
rotationCayley.push(row);
|
|
for (let j = 0; j < 16; j++) {
|
|
const _ux = signum(ux[i] * ux[j] + vx[i] * uy[j]);
|
|
const _uy = signum(uy[i] * ux[j] + vy[i] * uy[j]);
|
|
const _vx = signum(ux[i] * vx[j] + vx[i] * vy[j]);
|
|
const _vy = signum(uy[i] * vx[j] + vy[i] * vy[j]);
|
|
for (let k = 0; k < 16; k++) {
|
|
if (ux[k] === _ux && uy[k] === _uy && vx[k] === _vx && vy[k] === _vy) {
|
|
row.push(k);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
for (let i = 0; i < 16; i++) {
|
|
const mat = new Matrix();
|
|
mat.set(ux[i], uy[i], vx[i], vy[i], 0, 0);
|
|
rotationMatrices.push(mat);
|
|
}
|
|
}
|
|
init();
|
|
const groupD8 = {
|
|
/**
|
|
* | Rotation | Direction |
|
|
* |----------|-----------|
|
|
* | 0° | East |
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
E: 0,
|
|
/**
|
|
* | Rotation | Direction |
|
|
* |----------|-----------|
|
|
* | 45°↻ | Southeast |
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
SE: 1,
|
|
/**
|
|
* | Rotation | Direction |
|
|
* |----------|-----------|
|
|
* | 90°↻ | South |
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
S: 2,
|
|
/**
|
|
* | Rotation | Direction |
|
|
* |----------|-----------|
|
|
* | 135°↻ | Southwest |
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
SW: 3,
|
|
/**
|
|
* | Rotation | Direction |
|
|
* |----------|-----------|
|
|
* | 180° | West |
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
W: 4,
|
|
/**
|
|
* | Rotation | Direction |
|
|
* |-------------|--------------|
|
|
* | -135°/225°↻ | Northwest |
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
NW: 5,
|
|
/**
|
|
* | Rotation | Direction |
|
|
* |-------------|--------------|
|
|
* | -90°/270°↻ | North |
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
N: 6,
|
|
/**
|
|
* | Rotation | Direction |
|
|
* |-------------|--------------|
|
|
* | -45°/315°↻ | Northeast |
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
NE: 7,
|
|
/**
|
|
* Reflection about Y-axis.
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
MIRROR_VERTICAL: 8,
|
|
/**
|
|
* Reflection about the main diagonal.
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
MAIN_DIAGONAL: 10,
|
|
/**
|
|
* Reflection about X-axis.
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
MIRROR_HORIZONTAL: 12,
|
|
/**
|
|
* Reflection about reverse diagonal.
|
|
* @memberof maths.groupD8
|
|
* @constant {GD8Symmetry}
|
|
*/
|
|
REVERSE_DIAGONAL: 14,
|
|
/**
|
|
* @memberof maths.groupD8
|
|
* @param {GD8Symmetry} ind - sprite rotation angle.
|
|
* @returns {GD8Symmetry} The X-component of the U-axis
|
|
* after rotating the axes.
|
|
*/
|
|
uX: (ind) => ux[ind],
|
|
/**
|
|
* @memberof maths.groupD8
|
|
* @param {GD8Symmetry} ind - sprite rotation angle.
|
|
* @returns {GD8Symmetry} The Y-component of the U-axis
|
|
* after rotating the axes.
|
|
*/
|
|
uY: (ind) => uy[ind],
|
|
/**
|
|
* @memberof maths.groupD8
|
|
* @param {GD8Symmetry} ind - sprite rotation angle.
|
|
* @returns {GD8Symmetry} The X-component of the V-axis
|
|
* after rotating the axes.
|
|
*/
|
|
vX: (ind) => vx[ind],
|
|
/**
|
|
* @memberof maths.groupD8
|
|
* @param {GD8Symmetry} ind - sprite rotation angle.
|
|
* @returns {GD8Symmetry} The Y-component of the V-axis
|
|
* after rotating the axes.
|
|
*/
|
|
vY: (ind) => vy[ind],
|
|
/**
|
|
* @memberof maths.groupD8
|
|
* @param {GD8Symmetry} rotation - symmetry whose opposite
|
|
* is needed. Only rotations have opposite symmetries while
|
|
* reflections don't.
|
|
* @returns {GD8Symmetry} The opposite symmetry of `rotation`
|
|
*/
|
|
inv: (rotation) => {
|
|
if (rotation & 8) {
|
|
return rotation & 15;
|
|
}
|
|
return -rotation & 7;
|
|
},
|
|
/**
|
|
* Composes the two D8 operations.
|
|
*
|
|
* Taking `^` as reflection:
|
|
*
|
|
* | | E=0 | S=2 | W=4 | N=6 | E^=8 | S^=10 | W^=12 | N^=14 |
|
|
* |-------|-----|-----|-----|-----|------|-------|-------|-------|
|
|
* | E=0 | E | S | W | N | E^ | S^ | W^ | N^ |
|
|
* | S=2 | S | W | N | E | S^ | W^ | N^ | E^ |
|
|
* | W=4 | W | N | E | S | W^ | N^ | E^ | S^ |
|
|
* | N=6 | N | E | S | W | N^ | E^ | S^ | W^ |
|
|
* | E^=8 | E^ | N^ | W^ | S^ | E | N | W | S |
|
|
* | S^=10 | S^ | E^ | N^ | W^ | S | E | N | W |
|
|
* | W^=12 | W^ | S^ | E^ | N^ | W | S | E | N |
|
|
* | N^=14 | N^ | W^ | S^ | E^ | N | W | S | E |
|
|
*
|
|
* [This is a Cayley table]{@link https://en.wikipedia.org/wiki/Cayley_table}
|
|
* @memberof maths.groupD8
|
|
* @param {GD8Symmetry} rotationSecond - Second operation, which
|
|
* is the row in the above cayley table.
|
|
* @param {GD8Symmetry} rotationFirst - First operation, which
|
|
* is the column in the above cayley table.
|
|
* @returns {GD8Symmetry} Composed operation
|
|
*/
|
|
add: (rotationSecond, rotationFirst) => rotationCayley[rotationSecond][rotationFirst],
|
|
/**
|
|
* Reverse of `add`.
|
|
* @memberof maths.groupD8
|
|
* @param {GD8Symmetry} rotationSecond - Second operation
|
|
* @param {GD8Symmetry} rotationFirst - First operation
|
|
* @returns {GD8Symmetry} Result
|
|
*/
|
|
sub: (rotationSecond, rotationFirst) => rotationCayley[rotationSecond][groupD8.inv(rotationFirst)],
|
|
/**
|
|
* Adds 180 degrees to rotation, which is a commutative
|
|
* operation.
|
|
* @memberof maths.groupD8
|
|
* @param {number} rotation - The number to rotate.
|
|
* @returns {number} Rotated number
|
|
*/
|
|
rotate180: (rotation) => rotation ^ 4,
|
|
/**
|
|
* Checks if the rotation angle is vertical, i.e. south
|
|
* or north. It doesn't work for reflections.
|
|
* @memberof maths.groupD8
|
|
* @param {GD8Symmetry} rotation - The number to check.
|
|
* @returns {boolean} Whether or not the direction is vertical
|
|
*/
|
|
isVertical: (rotation) => (rotation & 3) === 2,
|
|
// rotation % 4 === 2
|
|
/**
|
|
* Approximates the vector `V(dx,dy)` into one of the
|
|
* eight directions provided by `groupD8`.
|
|
* @memberof maths.groupD8
|
|
* @param {number} dx - X-component of the vector
|
|
* @param {number} dy - Y-component of the vector
|
|
* @returns {GD8Symmetry} Approximation of the vector into
|
|
* one of the eight symmetries.
|
|
*/
|
|
byDirection: (dx, dy) => {
|
|
if (Math.abs(dx) * 2 <= Math.abs(dy)) {
|
|
if (dy >= 0) {
|
|
return groupD8.S;
|
|
}
|
|
return groupD8.N;
|
|
} else if (Math.abs(dy) * 2 <= Math.abs(dx)) {
|
|
if (dx > 0) {
|
|
return groupD8.E;
|
|
}
|
|
return groupD8.W;
|
|
} else if (dy > 0) {
|
|
if (dx > 0) {
|
|
return groupD8.SE;
|
|
}
|
|
return groupD8.SW;
|
|
} else if (dx > 0) {
|
|
return groupD8.NE;
|
|
}
|
|
return groupD8.NW;
|
|
},
|
|
/**
|
|
* Helps sprite to compensate texture packer rotation.
|
|
* @memberof maths.groupD8
|
|
* @param {Matrix} matrix - sprite world matrix
|
|
* @param {GD8Symmetry} rotation - The rotation factor to use.
|
|
* @param {number} tx - sprite anchoring
|
|
* @param {number} ty - sprite anchoring
|
|
*/
|
|
matrixAppendRotationInv: (matrix, rotation, tx = 0, ty = 0) => {
|
|
const mat = rotationMatrices[groupD8.inv(rotation)];
|
|
mat.tx = tx;
|
|
mat.ty = ty;
|
|
matrix.append(mat);
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const NOOP = () => {
|
|
};
|
|
|
|
"use strict";
|
|
function nextPow2(v) {
|
|
v += v === 0 ? 1 : 0;
|
|
--v;
|
|
v |= v >>> 1;
|
|
v |= v >>> 2;
|
|
v |= v >>> 4;
|
|
v |= v >>> 8;
|
|
v |= v >>> 16;
|
|
return v + 1;
|
|
}
|
|
function isPow2(v) {
|
|
return !(v & v - 1) && !!v;
|
|
}
|
|
function log2(v) {
|
|
let r = (v > 65535 ? 1 : 0) << 4;
|
|
v >>>= r;
|
|
let shift = (v > 255 ? 1 : 0) << 3;
|
|
v >>>= shift;
|
|
r |= shift;
|
|
shift = (v > 15 ? 1 : 0) << 2;
|
|
v >>>= shift;
|
|
r |= shift;
|
|
shift = (v > 3 ? 1 : 0) << 1;
|
|
v >>>= shift;
|
|
r |= shift;
|
|
return r | v >> 1;
|
|
}
|
|
|
|
"use strict";
|
|
function definedProps(obj) {
|
|
const result = {};
|
|
for (const key in obj) {
|
|
if (obj[key] !== void 0) {
|
|
result[key] = obj[key];
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$12 = Object.defineProperty;
|
|
var __getOwnPropSymbols$12 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$12 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$12 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$12 = (obj, key, value) => key in obj ? __defProp$12(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$12 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$12.call(b, prop))
|
|
__defNormalProp$12(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$12)
|
|
for (var prop of __getOwnPropSymbols$12(b)) {
|
|
if (__propIsEnum$12.call(b, prop))
|
|
__defNormalProp$12(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const idHash$1 = /* @__PURE__ */ Object.create(null);
|
|
function createResourceIdFromString(value) {
|
|
const id = idHash$1[value];
|
|
if (id === void 0) {
|
|
idHash$1[value] = uid$1("resource");
|
|
}
|
|
return id;
|
|
}
|
|
const _TextureStyle = class _TextureStyle extends EventEmitter {
|
|
/**
|
|
* @param options - options for the style
|
|
*/
|
|
constructor(options = {}) {
|
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
super();
|
|
this._resourceType = "textureSampler";
|
|
this._touched = 0;
|
|
/**
|
|
* Specifies the maximum anisotropy value clamp used by the sampler.
|
|
* Note: Most implementations support {@link GPUSamplerDescriptor#maxAnisotropy} values in range
|
|
* between 1 and 16, inclusive. The used value of {@link GPUSamplerDescriptor#maxAnisotropy} will
|
|
* be clamped to the maximum value that the platform supports.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._maxAnisotropy = 1;
|
|
/**
|
|
* Has the style been destroyed?
|
|
* @readonly
|
|
*/
|
|
this.destroyed = false;
|
|
options = __spreadValues$12(__spreadValues$12({}, _TextureStyle.defaultOptions), options);
|
|
this.addressMode = options.addressMode;
|
|
this.addressModeU = (_a = options.addressModeU) != null ? _a : this.addressModeU;
|
|
this.addressModeV = (_b = options.addressModeV) != null ? _b : this.addressModeV;
|
|
this.addressModeW = (_c = options.addressModeW) != null ? _c : this.addressModeW;
|
|
this.scaleMode = options.scaleMode;
|
|
this.magFilter = (_d = options.magFilter) != null ? _d : this.magFilter;
|
|
this.minFilter = (_e = options.minFilter) != null ? _e : this.minFilter;
|
|
this.mipmapFilter = (_f = options.mipmapFilter) != null ? _f : this.mipmapFilter;
|
|
this.lodMinClamp = options.lodMinClamp;
|
|
this.lodMaxClamp = options.lodMaxClamp;
|
|
this.compare = options.compare;
|
|
this.maxAnisotropy = (_g = options.maxAnisotropy) != null ? _g : 1;
|
|
}
|
|
set addressMode(value) {
|
|
this.addressModeU = value;
|
|
this.addressModeV = value;
|
|
this.addressModeW = value;
|
|
}
|
|
/** setting this will set wrapModeU,wrapModeV and wrapModeW all at once! */
|
|
get addressMode() {
|
|
return this.addressModeU;
|
|
}
|
|
set wrapMode(value) {
|
|
deprecation(v8_0_0, "TextureStyle.wrapMode is now TextureStyle.addressMode");
|
|
this.addressMode = value;
|
|
}
|
|
get wrapMode() {
|
|
return this.addressMode;
|
|
}
|
|
set scaleMode(value) {
|
|
this.magFilter = value;
|
|
this.minFilter = value;
|
|
this.mipmapFilter = value;
|
|
}
|
|
/** setting this will set magFilter,minFilter and mipmapFilter all at once! */
|
|
get scaleMode() {
|
|
return this.magFilter;
|
|
}
|
|
/** Specifies the maximum anisotropy value clamp used by the sampler. */
|
|
set maxAnisotropy(value) {
|
|
this._maxAnisotropy = Math.min(value, 16);
|
|
if (this._maxAnisotropy > 1) {
|
|
this.scaleMode = "linear";
|
|
}
|
|
}
|
|
get maxAnisotropy() {
|
|
return this._maxAnisotropy;
|
|
}
|
|
// TODO - move this to WebGL?
|
|
get _resourceId() {
|
|
return this._sharedResourceId || this._generateResourceId();
|
|
}
|
|
update() {
|
|
this.emit("change", this);
|
|
this._sharedResourceId = null;
|
|
}
|
|
_generateResourceId() {
|
|
const bigKey = `${this.addressModeU}-${this.addressModeV}-${this.addressModeW}-${this.magFilter}-${this.minFilter}-${this.mipmapFilter}-${this.lodMinClamp}-${this.lodMaxClamp}-${this.compare}-${this._maxAnisotropy}`;
|
|
this._sharedResourceId = createResourceIdFromString(bigKey);
|
|
return this._resourceId;
|
|
}
|
|
/** Destroys the style */
|
|
destroy() {
|
|
this.destroyed = true;
|
|
this.emit("destroy", this);
|
|
this.emit("change", this);
|
|
this.removeAllListeners();
|
|
}
|
|
};
|
|
/** default options for the style */
|
|
_TextureStyle.defaultOptions = {
|
|
addressMode: "clamp-to-edge",
|
|
scaleMode: "linear"
|
|
};
|
|
let TextureStyle = _TextureStyle;
|
|
|
|
"use strict";
|
|
var __defProp$11 = Object.defineProperty;
|
|
var __getOwnPropSymbols$11 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$11 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$11 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$11 = (obj, key, value) => key in obj ? __defProp$11(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$11 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$11.call(b, prop))
|
|
__defNormalProp$11(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$11)
|
|
for (var prop of __getOwnPropSymbols$11(b)) {
|
|
if (__propIsEnum$11.call(b, prop))
|
|
__defNormalProp$11(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _TextureSource = class _TextureSource extends EventEmitter {
|
|
/**
|
|
* @param options - options for creating a new TextureSource
|
|
*/
|
|
constructor(options = {}) {
|
|
var _a, _b, _c;
|
|
super();
|
|
this.options = options;
|
|
/** unique id for this Texture source */
|
|
this.uid = uid$1("textureSource");
|
|
/**
|
|
* The resource type used by this TextureSource. This is used by the bind groups to determine
|
|
* how to handle this resource.
|
|
* @ignore
|
|
* @internal
|
|
*/
|
|
this._resourceType = "textureSource";
|
|
/**
|
|
* i unique resource id, used by the bind group systems.
|
|
* This can change if the texture is resized or its resource changes
|
|
*/
|
|
this._resourceId = uid$1("resource");
|
|
/**
|
|
* this is how the backends know how to upload this texture to the GPU
|
|
* It changes depending on the resource type. Classes that extend TextureSource
|
|
* should override this property.
|
|
* @ignore
|
|
* @internal
|
|
*/
|
|
this.uploadMethodId = "unknown";
|
|
// dimensions
|
|
this._resolution = 1;
|
|
/** the pixel width of this texture source. This is the REAL pure number, not accounting resolution */
|
|
this.pixelWidth = 1;
|
|
/** the pixel height of this texture source. This is the REAL pure number, not accounting resolution */
|
|
this.pixelHeight = 1;
|
|
/**
|
|
* the width of this texture source, accounting for resolution
|
|
* eg pixelWidth 200, resolution 2, then width will be 100
|
|
*/
|
|
this.width = 1;
|
|
/**
|
|
* the height of this texture source, accounting for resolution
|
|
* eg pixelHeight 200, resolution 2, then height will be 100
|
|
*/
|
|
this.height = 1;
|
|
/**
|
|
* The number of samples of a multisample texture. This is always 1 for non-multisample textures.
|
|
* To enable multisample for a texture, set antialias to true
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this.sampleCount = 1;
|
|
/** The number of mip levels to generate for this texture. this is overridden if autoGenerateMipmaps is true */
|
|
this.mipLevelCount = 1;
|
|
/**
|
|
* Should we auto generate mipmaps for this texture? This will automatically generate mipmaps
|
|
* for this texture when uploading to the GPU. Mipmapped textures take up more memory, but
|
|
* can look better when scaled down.
|
|
*
|
|
* For performance reasons, it is recommended to NOT use this with RenderTextures, as they are often updated every frame.
|
|
* If you do, make sure to call `updateMipmaps` after you update the texture.
|
|
*/
|
|
this.autoGenerateMipmaps = false;
|
|
/** the format that the texture data has */
|
|
this.format = "rgba8unorm";
|
|
/** how many dimensions does this texture have? currently v8 only supports 2d */
|
|
this.dimension = "2d";
|
|
/**
|
|
* Only really affects RenderTextures.
|
|
* Should we use antialiasing for this texture. It will look better, but may impact performance as a
|
|
* Blit operation will be required to resolve the texture.
|
|
*/
|
|
this.antialias = false;
|
|
/**
|
|
* Used by automatic texture Garbage Collection, stores last GC tick when it was bound
|
|
* @protected
|
|
*/
|
|
this._touched = 0;
|
|
/**
|
|
* Used by the batcher to build texture batches. faster to have the variable here!
|
|
* @protected
|
|
*/
|
|
this._batchTick = -1;
|
|
/**
|
|
* A temporary batch location for the texture batching. Here for performance reasons only!
|
|
* @protected
|
|
*/
|
|
this._textureBindLocation = -1;
|
|
options = __spreadValues$11(__spreadValues$11({}, _TextureSource.defaultOptions), options);
|
|
this.label = (_a = options.label) != null ? _a : "";
|
|
this.resource = options.resource;
|
|
this.autoGarbageCollect = options.autoGarbageCollect;
|
|
this._resolution = options.resolution;
|
|
if (options.width) {
|
|
this.pixelWidth = options.width * this._resolution;
|
|
} else {
|
|
this.pixelWidth = this.resource ? (_b = this.resourceWidth) != null ? _b : 1 : 1;
|
|
}
|
|
if (options.height) {
|
|
this.pixelHeight = options.height * this._resolution;
|
|
} else {
|
|
this.pixelHeight = this.resource ? (_c = this.resourceHeight) != null ? _c : 1 : 1;
|
|
}
|
|
this.width = this.pixelWidth / this._resolution;
|
|
this.height = this.pixelHeight / this._resolution;
|
|
this.format = options.format;
|
|
this.dimension = options.dimensions;
|
|
this.mipLevelCount = options.mipLevelCount;
|
|
this.autoGenerateMipmaps = options.autoGenerateMipmaps;
|
|
this.sampleCount = options.sampleCount;
|
|
this.antialias = options.antialias;
|
|
this.alphaMode = options.alphaMode;
|
|
this.style = new TextureStyle(definedProps(options));
|
|
this.destroyed = false;
|
|
this._refreshPOT();
|
|
}
|
|
/** returns itself */
|
|
get source() {
|
|
return this;
|
|
}
|
|
/** the style of the texture */
|
|
get style() {
|
|
return this._style;
|
|
}
|
|
set style(value) {
|
|
var _a, _b;
|
|
if (this.style === value)
|
|
return;
|
|
(_a = this._style) == null ? void 0 : _a.off("change", this._onStyleChange, this);
|
|
this._style = value;
|
|
(_b = this._style) == null ? void 0 : _b.on("change", this._onStyleChange, this);
|
|
this._onStyleChange();
|
|
}
|
|
/** setting this will set wrapModeU,wrapModeV and wrapModeW all at once! */
|
|
get addressMode() {
|
|
return this._style.addressMode;
|
|
}
|
|
set addressMode(value) {
|
|
this._style.addressMode = value;
|
|
}
|
|
/** setting this will set wrapModeU,wrapModeV and wrapModeW all at once! */
|
|
get repeatMode() {
|
|
return this._style.addressMode;
|
|
}
|
|
set repeatMode(value) {
|
|
this._style.addressMode = value;
|
|
}
|
|
/** Specifies the sampling behavior when the sample footprint is smaller than or equal to one texel. */
|
|
get magFilter() {
|
|
return this._style.magFilter;
|
|
}
|
|
set magFilter(value) {
|
|
this._style.magFilter = value;
|
|
}
|
|
/** Specifies the sampling behavior when the sample footprint is larger than one texel. */
|
|
get minFilter() {
|
|
return this._style.minFilter;
|
|
}
|
|
set minFilter(value) {
|
|
this._style.minFilter = value;
|
|
}
|
|
/** Specifies behavior for sampling between mipmap levels. */
|
|
get mipmapFilter() {
|
|
return this._style.mipmapFilter;
|
|
}
|
|
set mipmapFilter(value) {
|
|
this._style.mipmapFilter = value;
|
|
}
|
|
/** Specifies the minimum and maximum levels of detail, respectively, used internally when sampling a texture. */
|
|
get lodMinClamp() {
|
|
return this._style.lodMinClamp;
|
|
}
|
|
set lodMinClamp(value) {
|
|
this._style.lodMinClamp = value;
|
|
}
|
|
/** Specifies the minimum and maximum levels of detail, respectively, used internally when sampling a texture. */
|
|
get lodMaxClamp() {
|
|
return this._style.lodMaxClamp;
|
|
}
|
|
set lodMaxClamp(value) {
|
|
this._style.lodMaxClamp = value;
|
|
}
|
|
_onStyleChange() {
|
|
this.emit("styleChange", this);
|
|
}
|
|
/** call this if you have modified the texture outside of the constructor */
|
|
update() {
|
|
if (this.resource) {
|
|
const resolution = this._resolution;
|
|
const didResize = this.resize(this.resourceWidth / resolution, this.resourceHeight / resolution);
|
|
if (didResize)
|
|
return;
|
|
}
|
|
this.emit("update", this);
|
|
}
|
|
/** Destroys this texture source */
|
|
destroy() {
|
|
this.destroyed = true;
|
|
this.emit("destroy", this);
|
|
this.emit("change", this);
|
|
if (this._style) {
|
|
this._style.destroy();
|
|
this._style = null;
|
|
}
|
|
this.uploadMethodId = null;
|
|
this.resource = null;
|
|
this.removeAllListeners();
|
|
}
|
|
/**
|
|
* This will unload the Texture source from the GPU. This will free up the GPU memory
|
|
* As soon as it is required fore rendering, it will be re-uploaded.
|
|
*/
|
|
unload() {
|
|
this._resourceId = uid$1("resource");
|
|
this.emit("change", this);
|
|
this.emit("unload", this);
|
|
}
|
|
/** the width of the resource. This is the REAL pure number, not accounting resolution */
|
|
get resourceWidth() {
|
|
const { resource } = this;
|
|
return resource.naturalWidth || resource.videoWidth || resource.displayWidth || resource.width;
|
|
}
|
|
/** the height of the resource. This is the REAL pure number, not accounting resolution */
|
|
get resourceHeight() {
|
|
const { resource } = this;
|
|
return resource.naturalHeight || resource.videoHeight || resource.displayHeight || resource.height;
|
|
}
|
|
/**
|
|
* the resolution of the texture. Changing this number, will not change the number of pixels in the actual texture
|
|
* but will the size of the texture when rendered.
|
|
*
|
|
* changing the resolution of this texture to 2 for example will make it appear twice as small when rendered (as pixel
|
|
* density will have increased)
|
|
*/
|
|
get resolution() {
|
|
return this._resolution;
|
|
}
|
|
set resolution(resolution) {
|
|
if (this._resolution === resolution)
|
|
return;
|
|
this._resolution = resolution;
|
|
this.width = this.pixelWidth / resolution;
|
|
this.height = this.pixelHeight / resolution;
|
|
}
|
|
/**
|
|
* Resize the texture, this is handy if you want to use the texture as a render texture
|
|
* @param width - the new width of the texture
|
|
* @param height - the new height of the texture
|
|
* @param resolution - the new resolution of the texture
|
|
* @returns - if the texture was resized
|
|
*/
|
|
resize(width, height, resolution) {
|
|
resolution = resolution || this._resolution;
|
|
width = width || this.width;
|
|
height = height || this.height;
|
|
const newPixelWidth = Math.round(width * resolution);
|
|
const newPixelHeight = Math.round(height * resolution);
|
|
this.width = newPixelWidth / resolution;
|
|
this.height = newPixelHeight / resolution;
|
|
this._resolution = resolution;
|
|
if (this.pixelWidth === newPixelWidth && this.pixelHeight === newPixelHeight) {
|
|
return false;
|
|
}
|
|
this._refreshPOT();
|
|
this.pixelWidth = newPixelWidth;
|
|
this.pixelHeight = newPixelHeight;
|
|
this.emit("resize", this);
|
|
this._resourceId = uid$1("resource");
|
|
this.emit("change", this);
|
|
return true;
|
|
}
|
|
/**
|
|
* Lets the renderer know that this texture has been updated and its mipmaps should be re-generated.
|
|
* This is only important for RenderTexture instances, as standard Texture instances will have their
|
|
* mipmaps generated on upload. You should call this method after you make any change to the texture
|
|
*
|
|
* The reason for this is is can be quite expensive to update mipmaps for a texture. So by default,
|
|
* We want you, the developer to specify when this action should happen.
|
|
*
|
|
* Generally you don't want to have mipmaps generated on Render targets that are changed every frame,
|
|
*/
|
|
updateMipmaps() {
|
|
if (this.autoGenerateMipmaps && this.mipLevelCount > 1) {
|
|
this.emit("updateMipmaps", this);
|
|
}
|
|
}
|
|
set wrapMode(value) {
|
|
this._style.wrapMode = value;
|
|
}
|
|
get wrapMode() {
|
|
return this._style.wrapMode;
|
|
}
|
|
set scaleMode(value) {
|
|
this._style.scaleMode = value;
|
|
}
|
|
/** setting this will set magFilter,minFilter and mipmapFilter all at once! */
|
|
get scaleMode() {
|
|
return this._style.scaleMode;
|
|
}
|
|
/**
|
|
* Refresh check for isPowerOfTwo texture based on size
|
|
* @private
|
|
*/
|
|
_refreshPOT() {
|
|
this.isPowerOfTwo = isPow2(this.pixelWidth) && isPow2(this.pixelHeight);
|
|
}
|
|
static test(_resource) {
|
|
throw new Error("Unimplemented");
|
|
}
|
|
};
|
|
/** The default options used when creating a new TextureSource. override these to add your own defaults */
|
|
_TextureSource.defaultOptions = {
|
|
resolution: 1,
|
|
format: "bgra8unorm",
|
|
alphaMode: "premultiply-alpha-on-upload",
|
|
dimensions: "2d",
|
|
mipLevelCount: 1,
|
|
autoGenerateMipmaps: false,
|
|
sampleCount: 1,
|
|
antialias: false,
|
|
autoGarbageCollect: false
|
|
};
|
|
let TextureSource = _TextureSource;
|
|
|
|
"use strict";
|
|
var __defProp$10 = Object.defineProperty;
|
|
var __defProps$p = Object.defineProperties;
|
|
var __getOwnPropDescs$p = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$10 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$10 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$10 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$10 = (obj, key, value) => key in obj ? __defProp$10(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$10 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$10.call(b, prop))
|
|
__defNormalProp$10(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$10)
|
|
for (var prop of __getOwnPropSymbols$10(b)) {
|
|
if (__propIsEnum$10.call(b, prop))
|
|
__defNormalProp$10(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$p = (a, b) => __defProps$p(a, __getOwnPropDescs$p(b));
|
|
class BufferImageSource extends TextureSource {
|
|
constructor(options) {
|
|
const buffer = options.resource || new Float32Array(options.width * options.height * 4);
|
|
let format = options.format;
|
|
if (!format) {
|
|
if (buffer instanceof Float32Array) {
|
|
format = "rgba32float";
|
|
} else if (buffer instanceof Int32Array) {
|
|
format = "rgba32uint";
|
|
} else if (buffer instanceof Uint32Array) {
|
|
format = "rgba32uint";
|
|
} else if (buffer instanceof Int16Array) {
|
|
format = "rgba16uint";
|
|
} else if (buffer instanceof Uint16Array) {
|
|
format = "rgba16uint";
|
|
} else if (buffer instanceof Int8Array) {
|
|
format = "bgra8unorm";
|
|
} else {
|
|
format = "bgra8unorm";
|
|
}
|
|
}
|
|
super(__spreadProps$p(__spreadValues$10({}, options), {
|
|
resource: buffer,
|
|
format
|
|
}));
|
|
this.uploadMethodId = "buffer";
|
|
}
|
|
static test(resource) {
|
|
return resource instanceof Int8Array || resource instanceof Uint8Array || resource instanceof Uint8ClampedArray || resource instanceof Int16Array || resource instanceof Uint16Array || resource instanceof Int32Array || resource instanceof Uint32Array || resource instanceof Float32Array;
|
|
}
|
|
}
|
|
BufferImageSource.extension = ExtensionType.TextureSource;
|
|
|
|
"use strict";
|
|
const tempMat = new Matrix();
|
|
class TextureMatrix {
|
|
/**
|
|
* @param texture - observed texture
|
|
* @param clampMargin - Changes frame clamping, 0.5 by default. Use -0.5 for extra border.
|
|
*/
|
|
constructor(texture, clampMargin) {
|
|
this.mapCoord = new Matrix();
|
|
this.uClampFrame = new Float32Array(4);
|
|
this.uClampOffset = new Float32Array(2);
|
|
this._textureID = -1;
|
|
this._updateID = 0;
|
|
this.clampOffset = 0;
|
|
if (typeof clampMargin === "undefined") {
|
|
this.clampMargin = texture.width < 10 ? 0 : 0.5;
|
|
} else {
|
|
this.clampMargin = clampMargin;
|
|
}
|
|
this.isSimple = false;
|
|
this.texture = texture;
|
|
}
|
|
/** Texture property. */
|
|
get texture() {
|
|
return this._texture;
|
|
}
|
|
set texture(value) {
|
|
var _a;
|
|
if (this.texture === value)
|
|
return;
|
|
(_a = this._texture) == null ? void 0 : _a.removeListener("update", this.update, this);
|
|
this._texture = value;
|
|
this._texture.addListener("update", this.update, this);
|
|
this.update();
|
|
}
|
|
/**
|
|
* Multiplies uvs array to transform
|
|
* @param uvs - mesh uvs
|
|
* @param [out=uvs] - output
|
|
* @returns - output
|
|
*/
|
|
multiplyUvs(uvs, out) {
|
|
if (out === void 0) {
|
|
out = uvs;
|
|
}
|
|
const mat = this.mapCoord;
|
|
for (let i = 0; i < uvs.length; i += 2) {
|
|
const x = uvs[i];
|
|
const y = uvs[i + 1];
|
|
out[i] = x * mat.a + y * mat.c + mat.tx;
|
|
out[i + 1] = x * mat.b + y * mat.d + mat.ty;
|
|
}
|
|
return out;
|
|
}
|
|
/**
|
|
* Updates matrices if texture was changed
|
|
* @returns - whether or not it was updated
|
|
*/
|
|
update() {
|
|
const tex = this._texture;
|
|
this._updateID++;
|
|
const uvs = tex.uvs;
|
|
this.mapCoord.set(uvs.x1 - uvs.x0, uvs.y1 - uvs.y0, uvs.x3 - uvs.x0, uvs.y3 - uvs.y0, uvs.x0, uvs.y0);
|
|
const orig = tex.orig;
|
|
const trim = tex.trim;
|
|
if (trim) {
|
|
tempMat.set(
|
|
orig.width / trim.width,
|
|
0,
|
|
0,
|
|
orig.height / trim.height,
|
|
-trim.x / trim.width,
|
|
-trim.y / trim.height
|
|
);
|
|
this.mapCoord.append(tempMat);
|
|
}
|
|
const texBase = tex.source;
|
|
const frame = this.uClampFrame;
|
|
const margin = this.clampMargin / texBase._resolution;
|
|
const offset = this.clampOffset / texBase._resolution;
|
|
frame[0] = (tex.frame.x + margin + offset) / texBase.width;
|
|
frame[1] = (tex.frame.y + margin + offset) / texBase.height;
|
|
frame[2] = (tex.frame.x + tex.frame.width - margin + offset) / texBase.width;
|
|
frame[3] = (tex.frame.y + tex.frame.height - margin + offset) / texBase.height;
|
|
this.uClampOffset[0] = this.clampOffset / texBase.pixelWidth;
|
|
this.uClampOffset[1] = this.clampOffset / texBase.pixelHeight;
|
|
this.isSimple = tex.frame.width === texBase.width && tex.frame.height === texBase.height && tex.rotate === 0;
|
|
return true;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class Texture extends EventEmitter {
|
|
/**
|
|
* @param {rendering.TextureOptions} options - Options for the texture
|
|
*/
|
|
constructor({
|
|
source,
|
|
label,
|
|
frame,
|
|
orig,
|
|
trim,
|
|
defaultAnchor,
|
|
defaultBorders,
|
|
rotate,
|
|
dynamic
|
|
} = {}) {
|
|
var _a;
|
|
super();
|
|
/** unique id for this texture */
|
|
this.uid = uid$1("texture");
|
|
/** A uvs object based on the given frame and the texture source */
|
|
this.uvs = { x0: 0, y0: 0, x1: 0, y1: 0, x2: 0, y2: 0, x3: 0, y3: 0 };
|
|
/**
|
|
* This is the area of the BaseTexture image to actually copy to the Canvas / WebGL when rendering,
|
|
* irrespective of the actual frame size or placement (which can be influenced by trimmed texture atlases)
|
|
*/
|
|
this.frame = new Rectangle();
|
|
/**
|
|
* Does this Texture have any frame data assigned to it?
|
|
*
|
|
* This mode is enabled automatically if no frame was passed inside constructor.
|
|
*
|
|
* In this mode texture is subscribed to baseTexture events, and fires `update` on any change.
|
|
*
|
|
* Beware, after loading or resize of baseTexture event can fired two times!
|
|
* If you want more control, subscribe on baseTexture itself.
|
|
* @example
|
|
* texture.on('update', () => {});
|
|
*/
|
|
this.noFrame = false;
|
|
/**
|
|
* Set to true if you plan on modifying the uvs of this texture.
|
|
* When this is the case, sprites and other objects using the texture will
|
|
* make sure to listen for changes to the uvs and update their vertices accordingly.
|
|
*/
|
|
this.dynamic = false;
|
|
/** is it a texture? yes! used for type checking */
|
|
this.isTexture = true;
|
|
this.label = label;
|
|
this.source = (_a = source == null ? void 0 : source.source) != null ? _a : new TextureSource();
|
|
this.noFrame = !frame;
|
|
if (frame) {
|
|
this.frame.copyFrom(frame);
|
|
} else {
|
|
const { width, height } = this._source;
|
|
this.frame.width = width;
|
|
this.frame.height = height;
|
|
}
|
|
this.orig = orig || this.frame;
|
|
this.trim = trim;
|
|
this.rotate = rotate != null ? rotate : 0;
|
|
this.defaultAnchor = defaultAnchor;
|
|
this.defaultBorders = defaultBorders;
|
|
this.destroyed = false;
|
|
this.dynamic = dynamic || false;
|
|
this.updateUvs();
|
|
}
|
|
set source(value) {
|
|
if (this._source) {
|
|
this._source.off("resize", this.update, this);
|
|
}
|
|
this._source = value;
|
|
value.on("resize", this.update, this);
|
|
this.emit("update", this);
|
|
}
|
|
/** the underlying source of the texture (equivalent of baseTexture in v7) */
|
|
get source() {
|
|
return this._source;
|
|
}
|
|
/** returns a TextureMatrix instance for this texture. By default, that object is not created because its heavy. */
|
|
get textureMatrix() {
|
|
if (!this._textureMatrix) {
|
|
this._textureMatrix = new TextureMatrix(this);
|
|
}
|
|
return this._textureMatrix;
|
|
}
|
|
/** The width of the Texture in pixels. */
|
|
get width() {
|
|
return this.orig.width;
|
|
}
|
|
/** The height of the Texture in pixels. */
|
|
get height() {
|
|
return this.orig.height;
|
|
}
|
|
/** Call this function when you have modified the frame of this texture. */
|
|
updateUvs() {
|
|
const { uvs, frame } = this;
|
|
const { width, height } = this._source;
|
|
const nX = frame.x / width;
|
|
const nY = frame.y / height;
|
|
const nW = frame.width / width;
|
|
const nH = frame.height / height;
|
|
let rotate = this.rotate;
|
|
if (rotate) {
|
|
const w2 = nW / 2;
|
|
const h2 = nH / 2;
|
|
const cX = nX + w2;
|
|
const cY = nY + h2;
|
|
rotate = groupD8.add(rotate, groupD8.NW);
|
|
uvs.x0 = cX + w2 * groupD8.uX(rotate);
|
|
uvs.y0 = cY + h2 * groupD8.uY(rotate);
|
|
rotate = groupD8.add(rotate, 2);
|
|
uvs.x1 = cX + w2 * groupD8.uX(rotate);
|
|
uvs.y1 = cY + h2 * groupD8.uY(rotate);
|
|
rotate = groupD8.add(rotate, 2);
|
|
uvs.x2 = cX + w2 * groupD8.uX(rotate);
|
|
uvs.y2 = cY + h2 * groupD8.uY(rotate);
|
|
rotate = groupD8.add(rotate, 2);
|
|
uvs.x3 = cX + w2 * groupD8.uX(rotate);
|
|
uvs.y3 = cY + h2 * groupD8.uY(rotate);
|
|
} else {
|
|
uvs.x0 = nX;
|
|
uvs.y0 = nY;
|
|
uvs.x1 = nX + nW;
|
|
uvs.y1 = nY;
|
|
uvs.x2 = nX + nW;
|
|
uvs.y2 = nY + nH;
|
|
uvs.x3 = nX;
|
|
uvs.y3 = nY + nH;
|
|
}
|
|
}
|
|
/**
|
|
* Destroys this texture
|
|
* @param destroySource - Destroy the source when the texture is destroyed.
|
|
*/
|
|
destroy(destroySource = false) {
|
|
if (this._source) {
|
|
if (destroySource) {
|
|
this._source.destroy();
|
|
this._source = null;
|
|
}
|
|
}
|
|
this._textureMatrix = null;
|
|
this.destroyed = true;
|
|
this.emit("destroy", this);
|
|
this.removeAllListeners();
|
|
}
|
|
/** call this if you have modified the `texture outside` of the constructor */
|
|
update() {
|
|
if (this.noFrame) {
|
|
this.frame.width = this._source.width;
|
|
this.frame.height = this._source.height;
|
|
}
|
|
this.updateUvs();
|
|
this.emit("update", this);
|
|
}
|
|
/** @deprecated since 8.0.0 */
|
|
get baseTexture() {
|
|
deprecation(v8_0_0, "Texture.baseTexture is now Texture.source");
|
|
return this._source;
|
|
}
|
|
}
|
|
Texture.EMPTY = new Texture({
|
|
label: "EMPTY",
|
|
source: new TextureSource({
|
|
label: "EMPTY"
|
|
})
|
|
});
|
|
Texture.EMPTY.destroy = NOOP;
|
|
Texture.WHITE = new Texture({
|
|
source: new BufferImageSource({
|
|
resource: new Uint8Array([255, 255, 255, 255]),
|
|
width: 1,
|
|
height: 1,
|
|
alphaMode: "premultiply-alpha-on-upload",
|
|
label: "WHITE"
|
|
}),
|
|
label: "WHITE"
|
|
});
|
|
Texture.WHITE.destroy = NOOP;
|
|
|
|
"use strict";
|
|
const _Spritesheet = class _Spritesheet {
|
|
/**
|
|
* @param texture - Reference to the source BaseTexture object.
|
|
* @param {object} data - Spritesheet image data.
|
|
*/
|
|
constructor(texture, data) {
|
|
/** For multi-packed spritesheets, this contains a reference to all the other spritesheets it depends on. */
|
|
this.linkedSheets = [];
|
|
this._texture = texture instanceof Texture ? texture : null;
|
|
this.textureSource = texture.source;
|
|
this.textures = {};
|
|
this.animations = {};
|
|
this.data = data;
|
|
const metaResolution = parseFloat(data.meta.scale);
|
|
if (metaResolution) {
|
|
this.resolution = metaResolution;
|
|
texture.source.resolution = this.resolution;
|
|
} else {
|
|
this.resolution = texture.source._resolution;
|
|
}
|
|
this._frames = this.data.frames;
|
|
this._frameKeys = Object.keys(this._frames);
|
|
this._batchIndex = 0;
|
|
this._callback = null;
|
|
}
|
|
/**
|
|
* Parser spritesheet from loaded data. This is done asynchronously
|
|
* to prevent creating too many Texture within a single process.
|
|
*/
|
|
parse() {
|
|
return new Promise((resolve) => {
|
|
this._callback = resolve;
|
|
this._batchIndex = 0;
|
|
if (this._frameKeys.length <= _Spritesheet.BATCH_SIZE) {
|
|
this._processFrames(0);
|
|
this._processAnimations();
|
|
this._parseComplete();
|
|
} else {
|
|
this._nextBatch();
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* Process a batch of frames
|
|
* @param initialFrameIndex - The index of frame to start.
|
|
*/
|
|
_processFrames(initialFrameIndex) {
|
|
let frameIndex = initialFrameIndex;
|
|
const maxFrames = _Spritesheet.BATCH_SIZE;
|
|
while (frameIndex - initialFrameIndex < maxFrames && frameIndex < this._frameKeys.length) {
|
|
const i = this._frameKeys[frameIndex];
|
|
const data = this._frames[i];
|
|
const rect = data.frame;
|
|
if (rect) {
|
|
let frame = null;
|
|
let trim = null;
|
|
const sourceSize = data.trimmed !== false && data.sourceSize ? data.sourceSize : data.frame;
|
|
const orig = new Rectangle(
|
|
0,
|
|
0,
|
|
Math.floor(sourceSize.w) / this.resolution,
|
|
Math.floor(sourceSize.h) / this.resolution
|
|
);
|
|
if (data.rotated) {
|
|
frame = new Rectangle(
|
|
Math.floor(rect.x) / this.resolution,
|
|
Math.floor(rect.y) / this.resolution,
|
|
Math.floor(rect.h) / this.resolution,
|
|
Math.floor(rect.w) / this.resolution
|
|
);
|
|
} else {
|
|
frame = new Rectangle(
|
|
Math.floor(rect.x) / this.resolution,
|
|
Math.floor(rect.y) / this.resolution,
|
|
Math.floor(rect.w) / this.resolution,
|
|
Math.floor(rect.h) / this.resolution
|
|
);
|
|
}
|
|
if (data.trimmed !== false && data.spriteSourceSize) {
|
|
trim = new Rectangle(
|
|
Math.floor(data.spriteSourceSize.x) / this.resolution,
|
|
Math.floor(data.spriteSourceSize.y) / this.resolution,
|
|
Math.floor(rect.w) / this.resolution,
|
|
Math.floor(rect.h) / this.resolution
|
|
);
|
|
}
|
|
this.textures[i] = new Texture({
|
|
source: this.textureSource,
|
|
frame,
|
|
orig,
|
|
trim,
|
|
rotate: data.rotated ? 2 : 0,
|
|
defaultAnchor: data.anchor,
|
|
defaultBorders: data.borders,
|
|
label: i.toString()
|
|
});
|
|
}
|
|
frameIndex++;
|
|
}
|
|
}
|
|
/** Parse animations config. */
|
|
_processAnimations() {
|
|
const animations = this.data.animations || {};
|
|
for (const animName in animations) {
|
|
this.animations[animName] = [];
|
|
for (let i = 0; i < animations[animName].length; i++) {
|
|
const frameName = animations[animName][i];
|
|
this.animations[animName].push(this.textures[frameName]);
|
|
}
|
|
}
|
|
}
|
|
/** The parse has completed. */
|
|
_parseComplete() {
|
|
const callback = this._callback;
|
|
this._callback = null;
|
|
this._batchIndex = 0;
|
|
callback.call(this, this.textures);
|
|
}
|
|
/** Begin the next batch of textures. */
|
|
_nextBatch() {
|
|
this._processFrames(this._batchIndex * _Spritesheet.BATCH_SIZE);
|
|
this._batchIndex++;
|
|
setTimeout(() => {
|
|
if (this._batchIndex * _Spritesheet.BATCH_SIZE < this._frameKeys.length) {
|
|
this._nextBatch();
|
|
} else {
|
|
this._processAnimations();
|
|
this._parseComplete();
|
|
}
|
|
}, 0);
|
|
}
|
|
/**
|
|
* Destroy Spritesheet and don't use after this.
|
|
* @param {boolean} [destroyBase=false] - Whether to destroy the base texture as well
|
|
*/
|
|
destroy(destroyBase = false) {
|
|
var _a;
|
|
for (const i in this.textures) {
|
|
this.textures[i].destroy();
|
|
}
|
|
this._frames = null;
|
|
this._frameKeys = null;
|
|
this.data = null;
|
|
this.textures = null;
|
|
if (destroyBase) {
|
|
(_a = this._texture) == null ? void 0 : _a.destroy();
|
|
this.textureSource.destroy();
|
|
}
|
|
this._texture = null;
|
|
this.textureSource = null;
|
|
this.linkedSheets = [];
|
|
}
|
|
};
|
|
/** The maximum number of Textures to build per process. */
|
|
_Spritesheet.BATCH_SIZE = 1e3;
|
|
let Spritesheet = _Spritesheet;
|
|
|
|
"use strict";
|
|
const validImages = [
|
|
"jpg",
|
|
"png",
|
|
"jpeg",
|
|
"avif",
|
|
"webp",
|
|
"basis",
|
|
"etc2",
|
|
"bc7",
|
|
"bc6h",
|
|
"bc5",
|
|
"bc4",
|
|
"bc3",
|
|
"bc2",
|
|
"bc1",
|
|
"eac",
|
|
"astc"
|
|
];
|
|
function getCacheableAssets(keys, asset, ignoreMultiPack) {
|
|
const out = {};
|
|
keys.forEach((key) => {
|
|
out[key] = asset;
|
|
});
|
|
Object.keys(asset.textures).forEach((key) => {
|
|
out[key] = asset.textures[key];
|
|
});
|
|
if (!ignoreMultiPack) {
|
|
const basePath = path.dirname(keys[0]);
|
|
asset.linkedSheets.forEach((item, i) => {
|
|
const out2 = getCacheableAssets([`${basePath}/${asset.data.meta.related_multi_packs[i]}`], item, true);
|
|
Object.assign(out, out2);
|
|
});
|
|
}
|
|
return out;
|
|
}
|
|
const spritesheetAsset = {
|
|
extension: ExtensionType.Asset,
|
|
/** Handle the caching of the related Spritesheet Textures */
|
|
cache: {
|
|
test: (asset) => asset instanceof Spritesheet,
|
|
getCacheableAssets: (keys, asset) => getCacheableAssets(keys, asset, false)
|
|
},
|
|
/** Resolve the resolution of the asset. */
|
|
resolver: {
|
|
extension: {
|
|
type: ExtensionType.ResolveParser,
|
|
name: "resolveSpritesheet"
|
|
},
|
|
test: (value) => {
|
|
const tempURL = value.split("?")[0];
|
|
const split = tempURL.split(".");
|
|
const extension = split.pop();
|
|
const format = split.pop();
|
|
return extension === "json" && validImages.includes(format);
|
|
},
|
|
parse: (value) => {
|
|
var _a, _b;
|
|
const split = value.split(".");
|
|
return {
|
|
resolution: parseFloat((_b = (_a = Resolver.RETINA_PREFIX.exec(value)) == null ? void 0 : _a[1]) != null ? _b : "1"),
|
|
format: split[split.length - 2],
|
|
src: value
|
|
};
|
|
}
|
|
},
|
|
/**
|
|
* Loader plugin that parses sprite sheets!
|
|
* once the JSON has been loaded this checks to see if the JSON is spritesheet data.
|
|
* If it is, we load the spritesheets image and parse the data into Spritesheet
|
|
* All textures in the sprite sheet are then added to the cache
|
|
*/
|
|
loader: {
|
|
name: "spritesheetLoader",
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.Normal,
|
|
name: "spritesheetLoader"
|
|
},
|
|
async testParse(asset, options) {
|
|
return path.extname(options.src).toLowerCase() === ".json" && !!asset.frames;
|
|
},
|
|
async parse(asset, options, loader) {
|
|
var _a, _b, _c;
|
|
const {
|
|
texture: imageTexture,
|
|
// if user need to use preloaded texture
|
|
imageFilename
|
|
// if user need to use custom filename (not from jsonFile.meta.image)
|
|
} = (_a = options == null ? void 0 : options.data) != null ? _a : {};
|
|
let basePath = path.dirname(options.src);
|
|
if (basePath && basePath.lastIndexOf("/") !== basePath.length - 1) {
|
|
basePath += "/";
|
|
}
|
|
let texture;
|
|
if (imageTexture instanceof Texture) {
|
|
texture = imageTexture;
|
|
} else {
|
|
const imagePath = copySearchParams(basePath + (imageFilename != null ? imageFilename : asset.meta.image), options.src);
|
|
const assets = await loader.load([imagePath]);
|
|
texture = assets[imagePath];
|
|
}
|
|
const spritesheet = new Spritesheet(
|
|
texture.source,
|
|
asset
|
|
);
|
|
await spritesheet.parse();
|
|
const multiPacks = (_b = asset == null ? void 0 : asset.meta) == null ? void 0 : _b.related_multi_packs;
|
|
if (Array.isArray(multiPacks)) {
|
|
const promises = [];
|
|
for (const item of multiPacks) {
|
|
if (typeof item !== "string") {
|
|
continue;
|
|
}
|
|
let itemUrl = basePath + item;
|
|
if ((_c = options.data) == null ? void 0 : _c.ignoreMultiPack) {
|
|
continue;
|
|
}
|
|
itemUrl = copySearchParams(itemUrl, options.src);
|
|
promises.push(loader.load({
|
|
src: itemUrl,
|
|
data: {
|
|
ignoreMultiPack: true
|
|
}
|
|
}));
|
|
}
|
|
const res = await Promise.all(promises);
|
|
spritesheet.linkedSheets = res;
|
|
res.forEach((item) => {
|
|
item.linkedSheets = [spritesheet].concat(spritesheet.linkedSheets.filter((sp) => sp !== item));
|
|
});
|
|
}
|
|
return spritesheet;
|
|
},
|
|
async unload(spritesheet, _resolvedAsset, loader) {
|
|
await loader.unload(spritesheet.textureSource._sourceOrigin);
|
|
spritesheet.destroy(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(spritesheetAsset);
|
|
|
|
"use strict";
|
|
function updateQuadBounds(bounds, anchor, texture, padding) {
|
|
const { width, height } = texture.orig;
|
|
const trim = texture.trim;
|
|
if (trim) {
|
|
const sourceWidth = trim.width;
|
|
const sourceHeight = trim.height;
|
|
bounds.minX = trim.x - anchor._x * width - padding;
|
|
bounds.maxX = bounds.minX + sourceWidth;
|
|
bounds.minY = trim.y - anchor._y * height - padding;
|
|
bounds.maxY = bounds.minY + sourceHeight;
|
|
} else {
|
|
bounds.minX = -anchor._x * width - padding;
|
|
bounds.maxX = bounds.minX + width;
|
|
bounds.minY = -anchor._y * height - padding;
|
|
bounds.maxY = bounds.minY + height;
|
|
}
|
|
return;
|
|
}
|
|
|
|
"use strict";
|
|
class ViewContainer extends Container {
|
|
constructor() {
|
|
super(...arguments);
|
|
/** @private */
|
|
this.canBundle = true;
|
|
/** @private */
|
|
this.allowChildren = false;
|
|
/** @private */
|
|
this._roundPixels = 0;
|
|
/** @private */
|
|
this._lastUsed = 0;
|
|
/** @private */
|
|
this._lastInstructionTick = -1;
|
|
this._bounds = new Bounds(0, 1, 0, 0);
|
|
this._boundsDirty = true;
|
|
}
|
|
/** @private */
|
|
_updateBounds() {
|
|
}
|
|
/**
|
|
* Whether or not to round the x/y position of the sprite.
|
|
* @type {boolean}
|
|
*/
|
|
get roundPixels() {
|
|
return !!this._roundPixels;
|
|
}
|
|
set roundPixels(value) {
|
|
this._roundPixels = value ? 1 : 0;
|
|
}
|
|
/**
|
|
* Checks if the object contains the given point.
|
|
* @param point - The point to check
|
|
*/
|
|
containsPoint(point) {
|
|
const bounds = this.bounds;
|
|
const { x, y } = point;
|
|
return x >= bounds.minX && x <= bounds.maxX && y >= bounds.minY && y <= bounds.maxY;
|
|
}
|
|
destroy(options) {
|
|
super.destroy(options);
|
|
this._bounds = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$$ = Object.defineProperty;
|
|
var __getOwnPropSymbols$$ = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$$ = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$$ = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$$ = (obj, key, value) => key in obj ? __defProp$$(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$$ = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$$.call(b, prop))
|
|
__defNormalProp$$(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$$)
|
|
for (var prop of __getOwnPropSymbols$$(b)) {
|
|
if (__propIsEnum$$.call(b, prop))
|
|
__defNormalProp$$(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$k = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$$.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$$)
|
|
for (var prop of __getOwnPropSymbols$$(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$$.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class Sprite extends ViewContainer {
|
|
/**
|
|
* @param options - The options for creating the sprite.
|
|
*/
|
|
constructor(options = Texture.EMPTY) {
|
|
if (options instanceof Texture) {
|
|
options = { texture: options };
|
|
}
|
|
const _a = options, { texture = Texture.EMPTY, anchor, roundPixels, width, height } = _a, rest = __objRest$k(_a, ["texture", "anchor", "roundPixels", "width", "height"]);
|
|
super(__spreadValues$$({
|
|
label: "Sprite"
|
|
}, rest));
|
|
this.renderPipeId = "sprite";
|
|
this.batched = true;
|
|
this._didSpriteUpdate = false;
|
|
this._sourceBounds = { minX: 0, maxX: 1, minY: 0, maxY: 0 };
|
|
this._sourceBoundsDirty = true;
|
|
this._anchor = new ObservablePoint(
|
|
{
|
|
_onUpdate: () => {
|
|
this.onViewUpdate();
|
|
}
|
|
}
|
|
);
|
|
if (anchor) {
|
|
this.anchor = anchor;
|
|
} else if (texture.defaultAnchor) {
|
|
this.anchor = texture.defaultAnchor;
|
|
}
|
|
this.texture = texture;
|
|
this.allowChildren = false;
|
|
this.roundPixels = roundPixels != null ? roundPixels : false;
|
|
if (width !== void 0)
|
|
this.width = width;
|
|
if (height !== void 0)
|
|
this.height = height;
|
|
}
|
|
/**
|
|
* Helper function that creates a new sprite based on the source you provide.
|
|
* The source can be - frame id, image, video, canvas element, video element, texture
|
|
* @param source - Source to create texture from
|
|
* @param [skipCache] - Whether to skip the cache or not
|
|
* @returns The newly created sprite
|
|
*/
|
|
static from(source, skipCache = false) {
|
|
if (source instanceof Texture) {
|
|
return new Sprite(source);
|
|
}
|
|
return new Sprite(Texture.from(source, skipCache));
|
|
}
|
|
set texture(value) {
|
|
value || (value = Texture.EMPTY);
|
|
const currentTexture = this._texture;
|
|
if (currentTexture === value)
|
|
return;
|
|
if (currentTexture && currentTexture.dynamic)
|
|
currentTexture.off("update", this.onViewUpdate, this);
|
|
if (value.dynamic)
|
|
value.on("update", this.onViewUpdate, this);
|
|
this._texture = value;
|
|
if (this._width) {
|
|
this._setWidth(this._width, this._texture.orig.width);
|
|
}
|
|
if (this._height) {
|
|
this._setHeight(this._height, this._texture.orig.height);
|
|
}
|
|
this.onViewUpdate();
|
|
}
|
|
/** The texture that the sprite is using. */
|
|
get texture() {
|
|
return this._texture;
|
|
}
|
|
/**
|
|
* The local bounds of the sprite.
|
|
* @type {rendering.Bounds}
|
|
*/
|
|
get bounds() {
|
|
if (this._boundsDirty) {
|
|
this._updateBounds();
|
|
this._boundsDirty = false;
|
|
}
|
|
return this._bounds;
|
|
}
|
|
/**
|
|
* The bounds of the sprite, taking the texture's trim into account.
|
|
* @type {rendering.Bounds}
|
|
*/
|
|
get sourceBounds() {
|
|
if (this._sourceBoundsDirty) {
|
|
this._updateSourceBounds();
|
|
this._sourceBoundsDirty = false;
|
|
}
|
|
return this._sourceBounds;
|
|
}
|
|
/**
|
|
* Checks if the object contains the given point.
|
|
* @param point - The point to check
|
|
*/
|
|
containsPoint(point) {
|
|
const bounds = this.sourceBounds;
|
|
if (point.x >= bounds.maxX && point.x <= bounds.minX) {
|
|
if (point.y >= bounds.maxY && point.y <= bounds.minY) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* Adds the bounds of this object to the bounds object.
|
|
* @param bounds - The output bounds object.
|
|
*/
|
|
addBounds(bounds) {
|
|
const _bounds = this._texture.trim ? this.sourceBounds : this.bounds;
|
|
bounds.addFrame(_bounds.minX, _bounds.minY, _bounds.maxX, _bounds.maxY);
|
|
}
|
|
onViewUpdate() {
|
|
this._didViewChangeTick++;
|
|
this._didSpriteUpdate = true;
|
|
this._sourceBoundsDirty = this._boundsDirty = true;
|
|
if (this.didViewUpdate)
|
|
return;
|
|
this.didViewUpdate = true;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.onChildViewUpdate(this);
|
|
}
|
|
}
|
|
_updateBounds() {
|
|
updateQuadBounds(this._bounds, this._anchor, this._texture, 0);
|
|
}
|
|
_updateSourceBounds() {
|
|
const anchor = this._anchor;
|
|
const texture = this._texture;
|
|
const sourceBounds = this._sourceBounds;
|
|
const { width, height } = texture.orig;
|
|
sourceBounds.maxX = -anchor._x * width;
|
|
sourceBounds.minX = sourceBounds.maxX + width;
|
|
sourceBounds.maxY = -anchor._y * height;
|
|
sourceBounds.minY = sourceBounds.maxY + height;
|
|
}
|
|
/**
|
|
* Destroys this sprite renderable and optionally its texture.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
* have been set to that value
|
|
* @param {boolean} [options.texture=false] - Should it destroy the current texture of the renderable as well
|
|
* @param {boolean} [options.textureSource=false] - Should it destroy the textureSource of the renderable as well
|
|
*/
|
|
destroy(options = false) {
|
|
super.destroy(options);
|
|
const destroyTexture = typeof options === "boolean" ? options : options == null ? void 0 : options.texture;
|
|
if (destroyTexture) {
|
|
const destroyTextureSource = typeof options === "boolean" ? options : options == null ? void 0 : options.textureSource;
|
|
this._texture.destroy(destroyTextureSource);
|
|
}
|
|
this._texture = null;
|
|
this._bounds = null;
|
|
this._sourceBounds = null;
|
|
this._anchor = null;
|
|
}
|
|
/**
|
|
* The anchor sets the origin point of the sprite. The default value is taken from the {@link Texture}
|
|
* and passed to the constructor.
|
|
*
|
|
* The default is `(0,0)`, this means the sprite's origin is the top left.
|
|
*
|
|
* Setting the anchor to `(0.5,0.5)` means the sprite's origin is centered.
|
|
*
|
|
* Setting the anchor to `(1,1)` would mean the sprite's origin point will be the bottom right corner.
|
|
*
|
|
* If you pass only single parameter, it will set both x and y to the same value as shown in the example below.
|
|
* @example
|
|
* import { Sprite } from 'pixi.js';
|
|
*
|
|
* const sprite = new Sprite({texture: Texture.WHITE});
|
|
* sprite.anchor.set(0.5); // This will set the origin to center. (0.5) is same as (0.5, 0.5).
|
|
*/
|
|
get anchor() {
|
|
return this._anchor;
|
|
}
|
|
set anchor(value) {
|
|
typeof value === "number" ? this._anchor.set(value) : this._anchor.copyFrom(value);
|
|
}
|
|
/** The width of the sprite, setting this will actually modify the scale to achieve the value set. */
|
|
get width() {
|
|
return Math.abs(this.scale.x) * this._texture.orig.width;
|
|
}
|
|
set width(value) {
|
|
this._setWidth(value, this._texture.orig.width);
|
|
this._width = value;
|
|
}
|
|
/** The height of the sprite, setting this will actually modify the scale to achieve the value set. */
|
|
get height() {
|
|
return Math.abs(this.scale.y) * this._texture.orig.height;
|
|
}
|
|
set height(value) {
|
|
this._setHeight(value, this._texture.orig.height);
|
|
this._height = value;
|
|
}
|
|
/**
|
|
* Retrieves the size of the Sprite as a [Size]{@link Size} object.
|
|
* This is faster than get the width and height separately.
|
|
* @param out - Optional object to store the size in.
|
|
* @returns - The size of the Sprite.
|
|
*/
|
|
getSize(out) {
|
|
out || (out = {});
|
|
out.width = Math.abs(this.scale.x) * this._texture.orig.width;
|
|
out.height = Math.abs(this.scale.y) * this._texture.orig.height;
|
|
return out;
|
|
}
|
|
/**
|
|
* Sets the size of the Sprite to the specified width and height.
|
|
* This is faster than setting the width and height separately.
|
|
* @param value - This can be either a number or a [Size]{@link Size} object.
|
|
* @param height - The height to set. Defaults to the value of `width` if not provided.
|
|
*/
|
|
setSize(value, height) {
|
|
var _a;
|
|
if (typeof value === "object") {
|
|
height = (_a = value.height) != null ? _a : value.width;
|
|
value = value.width;
|
|
} else {
|
|
height != null ? height : height = value;
|
|
}
|
|
value !== void 0 && this._setWidth(value, this._texture.orig.width);
|
|
height !== void 0 && this._setHeight(height, this._texture.orig.height);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const tempBounds$4 = new Bounds();
|
|
function addMaskBounds(mask, bounds, skipUpdateTransform) {
|
|
const boundsToMask = tempBounds$4;
|
|
mask.measurable = true;
|
|
getGlobalBounds(mask, skipUpdateTransform, boundsToMask);
|
|
bounds.addBoundsMask(boundsToMask);
|
|
mask.measurable = false;
|
|
}
|
|
|
|
"use strict";
|
|
function addMaskLocalBounds(mask, bounds, localRoot) {
|
|
const boundsToMask = boundsPool.get();
|
|
mask.measurable = true;
|
|
const tempMatrix = matrixPool.get().identity();
|
|
const relativeMask = getMatrixRelativeToParent(mask, localRoot, tempMatrix);
|
|
getLocalBounds(mask, boundsToMask, relativeMask);
|
|
mask.measurable = false;
|
|
bounds.addBoundsMask(boundsToMask);
|
|
matrixPool.return(tempMatrix);
|
|
boundsPool.return(boundsToMask);
|
|
}
|
|
function getMatrixRelativeToParent(target, root, matrix) {
|
|
if (!target) {
|
|
warn("Mask bounds, renderable is not inside the root container");
|
|
return matrix;
|
|
}
|
|
if (target !== root) {
|
|
getMatrixRelativeToParent(target.parent, root, matrix);
|
|
target.updateLocalTransform();
|
|
matrix.append(target.localTransform);
|
|
}
|
|
return matrix;
|
|
}
|
|
|
|
"use strict";
|
|
class AlphaMask {
|
|
constructor(options) {
|
|
this.priority = 0;
|
|
this.pipe = "alphaMask";
|
|
if (options == null ? void 0 : options.mask) {
|
|
this.init(options.mask);
|
|
}
|
|
}
|
|
init(mask) {
|
|
this.mask = mask;
|
|
this.renderMaskToTexture = !(mask instanceof Sprite);
|
|
this.mask.renderable = this.renderMaskToTexture;
|
|
this.mask.includeInBuild = !this.renderMaskToTexture;
|
|
this.mask.measurable = false;
|
|
}
|
|
reset() {
|
|
this.mask.measurable = true;
|
|
this.mask = null;
|
|
}
|
|
addBounds(bounds, skipUpdateTransform) {
|
|
addMaskBounds(this.mask, bounds, skipUpdateTransform);
|
|
}
|
|
addLocalBounds(bounds, localRoot) {
|
|
addMaskLocalBounds(this.mask, bounds, localRoot);
|
|
}
|
|
containsPoint(point, hitTestFn) {
|
|
const mask = this.mask;
|
|
return hitTestFn(mask, point);
|
|
}
|
|
destroy() {
|
|
this.reset();
|
|
}
|
|
static test(mask) {
|
|
return mask instanceof Sprite;
|
|
}
|
|
}
|
|
AlphaMask.extension = ExtensionType.MaskEffect;
|
|
|
|
"use strict";
|
|
class ColorMask {
|
|
constructor(options) {
|
|
this.priority = 0;
|
|
this.pipe = "colorMask";
|
|
if (options == null ? void 0 : options.mask) {
|
|
this.init(options.mask);
|
|
}
|
|
}
|
|
init(mask) {
|
|
this.mask = mask;
|
|
}
|
|
destroy() {
|
|
}
|
|
static test(mask) {
|
|
return typeof mask === "number";
|
|
}
|
|
}
|
|
ColorMask.extension = ExtensionType.MaskEffect;
|
|
|
|
"use strict";
|
|
class StencilMask {
|
|
constructor(options) {
|
|
this.priority = 0;
|
|
this.pipe = "stencilMask";
|
|
if (options == null ? void 0 : options.mask) {
|
|
this.init(options.mask);
|
|
}
|
|
}
|
|
init(mask) {
|
|
this.mask = mask;
|
|
this.mask.includeInBuild = false;
|
|
this.mask.measurable = false;
|
|
}
|
|
reset() {
|
|
this.mask.measurable = true;
|
|
this.mask.includeInBuild = true;
|
|
this.mask = null;
|
|
}
|
|
addBounds(bounds, skipUpdateTransform) {
|
|
addMaskBounds(this.mask, bounds, skipUpdateTransform);
|
|
}
|
|
addLocalBounds(bounds, localRoot) {
|
|
addMaskLocalBounds(this.mask, bounds, localRoot);
|
|
}
|
|
containsPoint(point, hitTestFn) {
|
|
const mask = this.mask;
|
|
return hitTestFn(mask, point);
|
|
}
|
|
destroy() {
|
|
this.reset();
|
|
}
|
|
static test(mask) {
|
|
return mask instanceof Container;
|
|
}
|
|
}
|
|
StencilMask.extension = ExtensionType.MaskEffect;
|
|
|
|
"use strict";
|
|
class CanvasSource extends TextureSource {
|
|
constructor(options) {
|
|
if (!options.resource) {
|
|
options.resource = DOMAdapter.get().createCanvas();
|
|
}
|
|
if (!options.width) {
|
|
options.width = options.resource.width;
|
|
if (!options.autoDensity) {
|
|
options.width /= options.resolution;
|
|
}
|
|
}
|
|
if (!options.height) {
|
|
options.height = options.resource.height;
|
|
if (!options.autoDensity) {
|
|
options.height /= options.resolution;
|
|
}
|
|
}
|
|
super(options);
|
|
this.uploadMethodId = "image";
|
|
this.autoDensity = options.autoDensity;
|
|
const canvas = options.resource;
|
|
if (this.pixelWidth !== canvas.width || this.pixelWidth !== canvas.height) {
|
|
this.resizeCanvas();
|
|
}
|
|
this.transparent = !!options.transparent;
|
|
}
|
|
resizeCanvas() {
|
|
if (this.autoDensity) {
|
|
this.resource.style.width = `${this.width}px`;
|
|
this.resource.style.height = `${this.height}px`;
|
|
}
|
|
if (this.resource.width !== this.pixelWidth || this.resource.height !== this.pixelHeight) {
|
|
this.resource.width = this.pixelWidth;
|
|
this.resource.height = this.pixelHeight;
|
|
}
|
|
}
|
|
resize(width = this.width, height = this.height, resolution = this._resolution) {
|
|
const didResize = super.resize(width, height, resolution);
|
|
if (didResize) {
|
|
this.resizeCanvas();
|
|
}
|
|
return didResize;
|
|
}
|
|
static test(resource) {
|
|
return globalThis.HTMLCanvasElement && resource instanceof HTMLCanvasElement || globalThis.OffscreenCanvas && resource instanceof OffscreenCanvas;
|
|
}
|
|
/**
|
|
* Returns the 2D rendering context for the canvas.
|
|
* Caches the context after creating it.
|
|
* @returns The 2D rendering context of the canvas.
|
|
*/
|
|
get context2D() {
|
|
return this._context2D || (this._context2D = this.resource.getContext("2d"));
|
|
}
|
|
}
|
|
CanvasSource.extension = ExtensionType.TextureSource;
|
|
|
|
"use strict";
|
|
class ImageSource extends TextureSource {
|
|
constructor(options) {
|
|
if (options.resource && (globalThis.HTMLImageElement && options.resource instanceof HTMLImageElement)) {
|
|
const canvas = DOMAdapter.get().createCanvas(options.resource.width, options.resource.height);
|
|
const context = canvas.getContext("2d");
|
|
context.drawImage(options.resource, 0, 0, options.resource.width, options.resource.height);
|
|
options.resource = canvas;
|
|
warn("ImageSource: Image element passed, converting to canvas. Use CanvasSource instead.");
|
|
}
|
|
super(options);
|
|
this.uploadMethodId = "image";
|
|
this.autoGarbageCollect = true;
|
|
}
|
|
static test(resource) {
|
|
return globalThis.HTMLImageElement && resource instanceof HTMLImageElement || typeof ImageBitmap !== "undefined" && resource instanceof ImageBitmap || globalThis.VideoFrame && resource instanceof VideoFrame;
|
|
}
|
|
}
|
|
ImageSource.extension = ExtensionType.TextureSource;
|
|
|
|
"use strict";
|
|
let promise;
|
|
async function detectVideoAlphaMode() {
|
|
promise != null ? promise : promise = (async () => {
|
|
var _a;
|
|
const canvas = document.createElement("canvas");
|
|
const gl = canvas.getContext("webgl");
|
|
if (!gl) {
|
|
return "premultiply-alpha-on-upload";
|
|
}
|
|
const video = await new Promise((resolve) => {
|
|
const video2 = document.createElement("video");
|
|
video2.onloadeddata = () => resolve(video2);
|
|
video2.onerror = () => resolve(null);
|
|
video2.autoplay = false;
|
|
video2.crossOrigin = "anonymous";
|
|
video2.preload = "auto";
|
|
video2.src = "data:video/webm;base64,GkXfo59ChoEBQveBAULygQRC84EIQoKEd2VibUKHgQJChYECGFOAZwEAAAAAAAHTEU2bdLpNu4tTq4QVSalmU6yBoU27i1OrhBZUrmtTrIHGTbuMU6uEElTDZ1OsggEXTbuMU6uEHFO7a1OsggG97AEAAAAAAABZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAVSalmoCrXsYMPQkBNgIRMYXZmV0GETGF2ZkSJiEBEAAAAAAAAFlSua8yuAQAAAAAAAEPXgQFzxYgAAAAAAAAAAZyBACK1nIN1bmSIgQCGhVZfVlA5g4EBI+ODhAJiWgDglLCBArqBApqBAlPAgQFVsIRVuYEBElTDZ9Vzc9JjwItjxYgAAAAAAAAAAWfInEWjh0VOQ09ERVJEh49MYXZjIGxpYnZweC12cDlnyKJFo4hEVVJBVElPTkSHlDAwOjAwOjAwLjA0MDAwMDAwMAAAH0O2dcfngQCgwqGggQAAAIJJg0IAABAAFgA4JBwYSgAAICAAEb///4r+AAB1oZ2mm+6BAaWWgkmDQgAAEAAWADgkHBhKAAAgIABIQBxTu2uRu4+zgQC3iveBAfGCAXHwgQM=";
|
|
video2.load();
|
|
});
|
|
if (!video) {
|
|
return "premultiply-alpha-on-upload";
|
|
}
|
|
const texture = gl.createTexture();
|
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
const framebuffer = gl.createFramebuffer();
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
|
|
gl.framebufferTexture2D(
|
|
gl.FRAMEBUFFER,
|
|
gl.COLOR_ATTACHMENT0,
|
|
gl.TEXTURE_2D,
|
|
texture,
|
|
0
|
|
);
|
|
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
|
gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
|
|
const pixel = new Uint8Array(4);
|
|
gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
|
|
gl.deleteFramebuffer(framebuffer);
|
|
gl.deleteTexture(texture);
|
|
(_a = gl.getExtension("WEBGL_lose_context")) == null ? void 0 : _a.loseContext();
|
|
return pixel[0] <= pixel[3] ? "premultiplied-alpha" : "premultiply-alpha-on-upload";
|
|
})();
|
|
return promise;
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$_ = Object.defineProperty;
|
|
var __defProps$o = Object.defineProperties;
|
|
var __getOwnPropDescs$o = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$_ = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$_ = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$_ = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$_ = (obj, key, value) => key in obj ? __defProp$_(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$_ = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$_.call(b, prop))
|
|
__defNormalProp$_(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$_)
|
|
for (var prop of __getOwnPropSymbols$_(b)) {
|
|
if (__propIsEnum$_.call(b, prop))
|
|
__defNormalProp$_(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$o = (a, b) => __defProps$o(a, __getOwnPropDescs$o(b));
|
|
const _VideoSource = class _VideoSource extends TextureSource {
|
|
constructor(options) {
|
|
var _a;
|
|
super(options);
|
|
// Public
|
|
/** Whether or not the video is ready to play. */
|
|
this.isReady = false;
|
|
/** The upload method for this texture. */
|
|
this.uploadMethodId = "video";
|
|
options = __spreadValues$_(__spreadValues$_({}, _VideoSource.defaultOptions), options);
|
|
this._autoUpdate = true;
|
|
this._isConnectedToTicker = false;
|
|
this._updateFPS = options.updateFPS || 0;
|
|
this._msToNextUpdate = 0;
|
|
this.autoPlay = options.autoPlay !== false;
|
|
this.alphaMode = (_a = options.alphaMode) != null ? _a : "premultiply-alpha-on-upload";
|
|
this._videoFrameRequestCallback = this._videoFrameRequestCallback.bind(this);
|
|
this._videoFrameRequestCallbackHandle = null;
|
|
this._load = null;
|
|
this._resolve = null;
|
|
this._reject = null;
|
|
this._onCanPlay = this._onCanPlay.bind(this);
|
|
this._onCanPlayThrough = this._onCanPlayThrough.bind(this);
|
|
this._onError = this._onError.bind(this);
|
|
this._onPlayStart = this._onPlayStart.bind(this);
|
|
this._onPlayStop = this._onPlayStop.bind(this);
|
|
this._onSeeked = this._onSeeked.bind(this);
|
|
if (options.autoLoad !== false) {
|
|
void this.load();
|
|
}
|
|
}
|
|
/** Update the video frame if the source is not destroyed and meets certain conditions. */
|
|
updateFrame() {
|
|
if (this.destroyed) {
|
|
return;
|
|
}
|
|
if (this._updateFPS) {
|
|
const elapsedMS = Ticker.shared.elapsedMS * this.resource.playbackRate;
|
|
this._msToNextUpdate = Math.floor(this._msToNextUpdate - elapsedMS);
|
|
}
|
|
if (!this._updateFPS || this._msToNextUpdate <= 0) {
|
|
this._msToNextUpdate = this._updateFPS ? Math.floor(1e3 / this._updateFPS) : 0;
|
|
}
|
|
if (this.isValid) {
|
|
this.update();
|
|
}
|
|
}
|
|
/** Callback to update the video frame and potentially request the next frame update. */
|
|
_videoFrameRequestCallback() {
|
|
this.updateFrame();
|
|
if (this.destroyed) {
|
|
this._videoFrameRequestCallbackHandle = null;
|
|
} else {
|
|
this._videoFrameRequestCallbackHandle = this.resource.requestVideoFrameCallback(
|
|
this._videoFrameRequestCallback
|
|
);
|
|
}
|
|
}
|
|
/**
|
|
* Checks if the resource has valid dimensions.
|
|
* @returns {boolean} True if width and height are set, otherwise false.
|
|
*/
|
|
get isValid() {
|
|
return !!this.resource.videoWidth && !!this.resource.videoHeight;
|
|
}
|
|
/**
|
|
* Start preloading the video resource.
|
|
* @returns {Promise<this>} Handle the validate event
|
|
*/
|
|
async load() {
|
|
if (this._load) {
|
|
return this._load;
|
|
}
|
|
const source = this.resource;
|
|
const options = this.options;
|
|
if ((source.readyState === source.HAVE_ENOUGH_DATA || source.readyState === source.HAVE_FUTURE_DATA) && source.width && source.height) {
|
|
source.complete = true;
|
|
}
|
|
source.addEventListener("play", this._onPlayStart);
|
|
source.addEventListener("pause", this._onPlayStop);
|
|
source.addEventListener("seeked", this._onSeeked);
|
|
if (!this._isSourceReady()) {
|
|
if (!options.preload) {
|
|
source.addEventListener("canplay", this._onCanPlay);
|
|
}
|
|
source.addEventListener("canplaythrough", this._onCanPlayThrough);
|
|
source.addEventListener("error", this._onError, true);
|
|
} else {
|
|
this._mediaReady();
|
|
}
|
|
this.alphaMode = await detectVideoAlphaMode();
|
|
this._load = new Promise((resolve, reject) => {
|
|
if (this.isValid) {
|
|
resolve(this);
|
|
} else {
|
|
this._resolve = resolve;
|
|
this._reject = reject;
|
|
if (options.preloadTimeoutMs !== void 0) {
|
|
this._preloadTimeout = setTimeout(() => {
|
|
this._onError(new ErrorEvent(`Preload exceeded timeout of ${options.preloadTimeoutMs}ms`));
|
|
});
|
|
}
|
|
source.load();
|
|
}
|
|
});
|
|
return this._load;
|
|
}
|
|
/**
|
|
* Handle video error events.
|
|
* @param event - The error event
|
|
*/
|
|
_onError(event) {
|
|
this.resource.removeEventListener("error", this._onError, true);
|
|
this.emit("error", event);
|
|
if (this._reject) {
|
|
this._reject(event);
|
|
this._reject = null;
|
|
this._resolve = null;
|
|
}
|
|
}
|
|
/**
|
|
* Checks if the underlying source is playing.
|
|
* @returns True if playing.
|
|
*/
|
|
_isSourcePlaying() {
|
|
const source = this.resource;
|
|
return !source.paused && !source.ended;
|
|
}
|
|
/**
|
|
* Checks if the underlying source is ready for playing.
|
|
* @returns True if ready.
|
|
*/
|
|
_isSourceReady() {
|
|
const source = this.resource;
|
|
return source.readyState > 2;
|
|
}
|
|
/** Runs the update loop when the video is ready to play. */
|
|
_onPlayStart() {
|
|
if (!this.isValid) {
|
|
this._mediaReady();
|
|
}
|
|
this._configureAutoUpdate();
|
|
}
|
|
/** Stops the update loop when a pause event is triggered. */
|
|
_onPlayStop() {
|
|
this._configureAutoUpdate();
|
|
}
|
|
/** Handles behavior when the video completes seeking to the current playback position. */
|
|
_onSeeked() {
|
|
if (this._autoUpdate && !this._isSourcePlaying()) {
|
|
this._msToNextUpdate = 0;
|
|
this.updateFrame();
|
|
this._msToNextUpdate = 0;
|
|
}
|
|
}
|
|
_onCanPlay() {
|
|
const source = this.resource;
|
|
source.removeEventListener("canplay", this._onCanPlay);
|
|
this._mediaReady();
|
|
}
|
|
_onCanPlayThrough() {
|
|
const source = this.resource;
|
|
source.removeEventListener("canplaythrough", this._onCanPlay);
|
|
if (this._preloadTimeout) {
|
|
clearTimeout(this._preloadTimeout);
|
|
this._preloadTimeout = void 0;
|
|
}
|
|
this._mediaReady();
|
|
}
|
|
/** Fired when the video is loaded and ready to play. */
|
|
_mediaReady() {
|
|
const source = this.resource;
|
|
if (this.isValid) {
|
|
this.isReady = true;
|
|
this.resize(source.videoWidth, source.videoHeight);
|
|
}
|
|
this._msToNextUpdate = 0;
|
|
this.updateFrame();
|
|
this._msToNextUpdate = 0;
|
|
if (this._resolve) {
|
|
this._resolve(this);
|
|
this._resolve = null;
|
|
this._reject = null;
|
|
}
|
|
if (this._isSourcePlaying()) {
|
|
this._onPlayStart();
|
|
} else if (this.autoPlay) {
|
|
void this.resource.play();
|
|
}
|
|
}
|
|
/** Cleans up resources and event listeners associated with this texture. */
|
|
destroy() {
|
|
this._configureAutoUpdate();
|
|
const source = this.resource;
|
|
if (source) {
|
|
source.removeEventListener("play", this._onPlayStart);
|
|
source.removeEventListener("pause", this._onPlayStop);
|
|
source.removeEventListener("seeked", this._onSeeked);
|
|
source.removeEventListener("canplay", this._onCanPlay);
|
|
source.removeEventListener("canplaythrough", this._onCanPlayThrough);
|
|
source.removeEventListener("error", this._onError, true);
|
|
source.pause();
|
|
source.src = "";
|
|
source.load();
|
|
}
|
|
super.destroy();
|
|
}
|
|
/** Should the base texture automatically update itself, set to true by default. */
|
|
get autoUpdate() {
|
|
return this._autoUpdate;
|
|
}
|
|
set autoUpdate(value) {
|
|
if (value !== this._autoUpdate) {
|
|
this._autoUpdate = value;
|
|
this._configureAutoUpdate();
|
|
}
|
|
}
|
|
/**
|
|
* How many times a second to update the texture from the video.
|
|
* Leave at 0 to update at every render.
|
|
* A lower fps can help performance, as updating the texture at 60fps on a 30ps video may not be efficient.
|
|
*/
|
|
get updateFPS() {
|
|
return this._updateFPS;
|
|
}
|
|
set updateFPS(value) {
|
|
if (value !== this._updateFPS) {
|
|
this._updateFPS = value;
|
|
this._configureAutoUpdate();
|
|
}
|
|
}
|
|
/**
|
|
* Configures the updating mechanism based on the current state and settings.
|
|
*
|
|
* This method decides between using the browser's native video frame callback or a custom ticker
|
|
* for updating the video frame. It ensures optimal performance and responsiveness
|
|
* based on the video's state, playback status, and the desired frames-per-second setting.
|
|
*
|
|
* - If `_autoUpdate` is enabled and the video source is playing:
|
|
* - It will prefer the native video frame callback if available and no specific FPS is set.
|
|
* - Otherwise, it will use a custom ticker for manual updates.
|
|
* - If `_autoUpdate` is disabled or the video isn't playing, any active update mechanisms are halted.
|
|
*/
|
|
_configureAutoUpdate() {
|
|
if (this._autoUpdate && this._isSourcePlaying()) {
|
|
if (!this._updateFPS && this.resource.requestVideoFrameCallback) {
|
|
if (this._isConnectedToTicker) {
|
|
Ticker.shared.remove(this.updateFrame, this);
|
|
this._isConnectedToTicker = false;
|
|
this._msToNextUpdate = 0;
|
|
}
|
|
if (this._videoFrameRequestCallbackHandle === null) {
|
|
this._videoFrameRequestCallbackHandle = this.resource.requestVideoFrameCallback(
|
|
this._videoFrameRequestCallback
|
|
);
|
|
}
|
|
} else {
|
|
if (this._videoFrameRequestCallbackHandle !== null) {
|
|
this.resource.cancelVideoFrameCallback(this._videoFrameRequestCallbackHandle);
|
|
this._videoFrameRequestCallbackHandle = null;
|
|
}
|
|
if (!this._isConnectedToTicker) {
|
|
Ticker.shared.add(this.updateFrame, this);
|
|
this._isConnectedToTicker = true;
|
|
this._msToNextUpdate = 0;
|
|
}
|
|
}
|
|
} else {
|
|
if (this._videoFrameRequestCallbackHandle !== null) {
|
|
this.resource.cancelVideoFrameCallback(this._videoFrameRequestCallbackHandle);
|
|
this._videoFrameRequestCallbackHandle = null;
|
|
}
|
|
if (this._isConnectedToTicker) {
|
|
Ticker.shared.remove(this.updateFrame, this);
|
|
this._isConnectedToTicker = false;
|
|
this._msToNextUpdate = 0;
|
|
}
|
|
}
|
|
}
|
|
static test(resource) {
|
|
return globalThis.HTMLVideoElement && resource instanceof HTMLVideoElement;
|
|
}
|
|
};
|
|
_VideoSource.extension = ExtensionType.TextureSource;
|
|
/** The default options for video sources. */
|
|
_VideoSource.defaultOptions = __spreadProps$o(__spreadValues$_({}, TextureSource.defaultOptions), {
|
|
/** If true, the video will start loading immediately. */
|
|
autoLoad: true,
|
|
/** If true, the video will start playing as soon as it is loaded. */
|
|
autoPlay: true,
|
|
/** The number of times a second to update the texture from the video. Leave at 0 to update at every render. */
|
|
updateFPS: 0,
|
|
/** If true, the video will be loaded with the `crossorigin` attribute. */
|
|
crossorigin: true,
|
|
/** If true, the video will loop when it ends. */
|
|
loop: false,
|
|
/** If true, the video will be muted. */
|
|
muted: true,
|
|
/** If true, the video will play inline. */
|
|
playsinline: true,
|
|
/** If true, the video will be preloaded. */
|
|
preload: false
|
|
});
|
|
/**
|
|
* Map of video MIME types that can't be directly derived from file extensions.
|
|
* @readonly
|
|
*/
|
|
_VideoSource.MIME_TYPES = {
|
|
ogv: "video/ogg",
|
|
mov: "video/quicktime",
|
|
m4v: "video/mp4"
|
|
};
|
|
let VideoSource = _VideoSource;
|
|
|
|
"use strict";
|
|
class CacheClass {
|
|
constructor() {
|
|
this._parsers = [];
|
|
this._cache = /* @__PURE__ */ new Map();
|
|
this._cacheMap = /* @__PURE__ */ new Map();
|
|
}
|
|
/** Clear all entries. */
|
|
reset() {
|
|
this._cacheMap.clear();
|
|
this._cache.clear();
|
|
}
|
|
/**
|
|
* Check if the key exists
|
|
* @param key - The key to check
|
|
*/
|
|
has(key) {
|
|
return this._cache.has(key);
|
|
}
|
|
/**
|
|
* Fetch entry by key
|
|
* @param key - The key of the entry to get
|
|
*/
|
|
get(key) {
|
|
const result = this._cache.get(key);
|
|
if (!result) {
|
|
warn(`[Assets] Asset id ${key} was not found in the Cache`);
|
|
}
|
|
return result;
|
|
}
|
|
/**
|
|
* Set a value by key or keys name
|
|
* @param key - The key or keys to set
|
|
* @param value - The value to store in the cache or from which cacheable assets will be derived.
|
|
*/
|
|
set(key, value) {
|
|
const keys = convertToList(key);
|
|
let cacheableAssets;
|
|
for (let i = 0; i < this.parsers.length; i++) {
|
|
const parser = this.parsers[i];
|
|
if (parser.test(value)) {
|
|
cacheableAssets = parser.getCacheableAssets(keys, value);
|
|
break;
|
|
}
|
|
}
|
|
const cacheableMap = new Map(Object.entries(cacheableAssets || {}));
|
|
if (!cacheableAssets) {
|
|
keys.forEach((key2) => {
|
|
cacheableMap.set(key2, value);
|
|
});
|
|
}
|
|
const cacheKeys = [...cacheableMap.keys()];
|
|
const cachedAssets = {
|
|
cacheKeys,
|
|
keys
|
|
};
|
|
keys.forEach((key2) => {
|
|
this._cacheMap.set(key2, cachedAssets);
|
|
});
|
|
cacheKeys.forEach((key2) => {
|
|
const val = cacheableAssets ? cacheableAssets[key2] : value;
|
|
if (this._cache.has(key2) && this._cache.get(key2) !== val) {
|
|
warn("[Cache] already has key:", key2);
|
|
}
|
|
this._cache.set(key2, cacheableMap.get(key2));
|
|
});
|
|
}
|
|
/**
|
|
* Remove entry by key
|
|
*
|
|
* This function will also remove any associated alias from the cache also.
|
|
* @param key - The key of the entry to remove
|
|
*/
|
|
remove(key) {
|
|
if (!this._cacheMap.has(key)) {
|
|
warn(`[Assets] Asset id ${key} was not found in the Cache`);
|
|
return;
|
|
}
|
|
const cacheMap = this._cacheMap.get(key);
|
|
const cacheKeys = cacheMap.cacheKeys;
|
|
cacheKeys.forEach((key2) => {
|
|
this._cache.delete(key2);
|
|
});
|
|
cacheMap.keys.forEach((key2) => {
|
|
this._cacheMap.delete(key2);
|
|
});
|
|
}
|
|
/** All loader parsers registered */
|
|
get parsers() {
|
|
return this._parsers;
|
|
}
|
|
}
|
|
const Cache = new CacheClass();
|
|
|
|
"use strict";
|
|
const sources = [];
|
|
extensions.handleByList(ExtensionType.TextureSource, sources);
|
|
function autoDetectSource(options = {}) {
|
|
return textureSourceFrom(options);
|
|
}
|
|
function textureSourceFrom(options = {}) {
|
|
const hasResource = options && options.resource;
|
|
const res = hasResource ? options.resource : options;
|
|
const opts = hasResource ? options : { resource: options };
|
|
for (let i = 0; i < sources.length; i++) {
|
|
const Source = sources[i];
|
|
if (Source.test(res)) {
|
|
return new Source(opts);
|
|
}
|
|
}
|
|
throw new Error(`Could not find a source type for resource: ${opts.resource}`);
|
|
}
|
|
function resourceToTexture(options = {}, skipCache = false) {
|
|
const hasResource = options && options.resource;
|
|
const resource = hasResource ? options.resource : options;
|
|
const opts = hasResource ? options : { resource: options };
|
|
if (!skipCache && Cache.has(resource)) {
|
|
return Cache.get(resource);
|
|
}
|
|
const texture = new Texture({ source: textureSourceFrom(opts) });
|
|
texture.on("destroy", () => {
|
|
if (Cache.has(resource)) {
|
|
Cache.remove(resource);
|
|
}
|
|
});
|
|
if (!skipCache) {
|
|
Cache.set(resource, texture);
|
|
}
|
|
return texture;
|
|
}
|
|
function textureFrom(id, skipCache = false) {
|
|
if (typeof id === "string") {
|
|
return Cache.get(id);
|
|
} else if (id instanceof TextureSource) {
|
|
return new Texture({ source: id });
|
|
}
|
|
return resourceToTexture(id, skipCache);
|
|
}
|
|
Texture.from = textureFrom;
|
|
TextureSource.from = textureSourceFrom;
|
|
|
|
"use strict";
|
|
extensions.add(AlphaMask, ColorMask, StencilMask, VideoSource, ImageSource, CanvasSource, BufferImageSource);
|
|
|
|
"use strict";
|
|
class BindGroup {
|
|
/**
|
|
* Create a new instance eof the Bind Group.
|
|
* @param resources - The resources that are bound together for use by a shader.
|
|
*/
|
|
constructor(resources) {
|
|
/** The resources that are bound together for use by a shader. */
|
|
this.resources = /* @__PURE__ */ Object.create(null);
|
|
this._dirty = true;
|
|
let index = 0;
|
|
for (const i in resources) {
|
|
const resource = resources[i];
|
|
this.setResource(resource, index++);
|
|
}
|
|
this._updateKey();
|
|
}
|
|
/**
|
|
* Updates the key if its flagged as dirty. This is used internally to
|
|
* match this bind group to a WebGPU BindGroup.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
_updateKey() {
|
|
if (!this._dirty)
|
|
return;
|
|
this._dirty = false;
|
|
const keyParts = [];
|
|
let index = 0;
|
|
for (const i in this.resources) {
|
|
keyParts[index++] = this.resources[i]._resourceId;
|
|
}
|
|
this._key = keyParts.join("|");
|
|
}
|
|
/**
|
|
* Set a resource at a given index. this function will
|
|
* ensure that listeners will be removed from the current resource
|
|
* and added to the new resource.
|
|
* @param resource - The resource to set.
|
|
* @param index - The index to set the resource at.
|
|
*/
|
|
setResource(resource, index) {
|
|
var _a, _b;
|
|
const currentResource = this.resources[index];
|
|
if (resource === currentResource)
|
|
return;
|
|
if (currentResource) {
|
|
(_a = resource.off) == null ? void 0 : _a.call(resource, "change", this.onResourceChange, this);
|
|
}
|
|
(_b = resource.on) == null ? void 0 : _b.call(resource, "change", this.onResourceChange, this);
|
|
this.resources[index] = resource;
|
|
this._dirty = true;
|
|
}
|
|
/**
|
|
* Returns the resource at the current specified index.
|
|
* @param index - The index of the resource to get.
|
|
* @returns - The resource at the specified index.
|
|
*/
|
|
getResource(index) {
|
|
return this.resources[index];
|
|
}
|
|
/**
|
|
* Used internally to 'touch' each resource, to ensure that the GC
|
|
* knows that all resources in this bind group are still being used.
|
|
* @param tick - The current tick.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
_touch(tick) {
|
|
const resources = this.resources;
|
|
for (const i in resources) {
|
|
resources[i]._touched = tick;
|
|
}
|
|
}
|
|
/** Destroys this bind group and removes all listeners. */
|
|
destroy() {
|
|
var _a;
|
|
const resources = this.resources;
|
|
for (const i in resources) {
|
|
const resource = resources[i];
|
|
(_a = resource.off) == null ? void 0 : _a.call(resource, "change", this.onResourceChange, this);
|
|
}
|
|
this.resources = null;
|
|
}
|
|
onResourceChange(resource) {
|
|
this._dirty = true;
|
|
if (resource.destroyed) {
|
|
const resources = this.resources;
|
|
for (const i in resources) {
|
|
if (resources[i] === resource) {
|
|
resources[i] = null;
|
|
}
|
|
}
|
|
} else {
|
|
this._updateKey();
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
let context;
|
|
function getTestContext() {
|
|
if (!context || (context == null ? void 0 : context.isContextLost())) {
|
|
const canvas = DOMAdapter.get().createCanvas();
|
|
context = canvas.getContext("webgl", {});
|
|
}
|
|
return context;
|
|
}
|
|
|
|
"use strict";
|
|
const fragTemplate$1 = [
|
|
"precision mediump float;",
|
|
"void main(void){",
|
|
"float test = 0.1;",
|
|
"%forloop%",
|
|
"gl_FragColor = vec4(0.0);",
|
|
"}"
|
|
].join("\n");
|
|
function generateIfTestSrc(maxIfs) {
|
|
let src = "";
|
|
for (let i = 0; i < maxIfs; ++i) {
|
|
if (i > 0) {
|
|
src += "\nelse ";
|
|
}
|
|
if (i < maxIfs - 1) {
|
|
src += `if(test == ${i}.0){}`;
|
|
}
|
|
}
|
|
return src;
|
|
}
|
|
function checkMaxIfStatementsInShader(maxIfs, gl) {
|
|
if (maxIfs === 0) {
|
|
throw new Error("Invalid value of `0` passed to `checkMaxIfStatementsInShader`");
|
|
}
|
|
const shader = gl.createShader(gl.FRAGMENT_SHADER);
|
|
try {
|
|
while (true) {
|
|
const fragmentSrc = fragTemplate$1.replace(/%forloop%/gi, generateIfTestSrc(maxIfs));
|
|
gl.shaderSource(shader, fragmentSrc);
|
|
gl.compileShader(shader);
|
|
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
maxIfs = maxIfs / 2 | 0;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
} finally {
|
|
gl.deleteShader(shader);
|
|
}
|
|
return maxIfs;
|
|
}
|
|
|
|
"use strict";
|
|
let maxTexturesPerBatchCache = null;
|
|
function getMaxTexturesPerBatch() {
|
|
var _a;
|
|
if (maxTexturesPerBatchCache)
|
|
return maxTexturesPerBatchCache;
|
|
const gl = getTestContext();
|
|
maxTexturesPerBatchCache = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
|
|
maxTexturesPerBatchCache = checkMaxIfStatementsInShader(
|
|
maxTexturesPerBatchCache,
|
|
gl
|
|
);
|
|
(_a = gl.getExtension("WEBGL_lose_context")) == null ? void 0 : _a.loseContext();
|
|
return maxTexturesPerBatchCache;
|
|
}
|
|
|
|
"use strict";
|
|
const cachedGroups = {};
|
|
function getTextureBatchBindGroup(textures, size) {
|
|
let uid = 2166136261;
|
|
for (let i = 0; i < size; i++) {
|
|
uid ^= textures[i].uid;
|
|
uid = Math.imul(uid, 16777619);
|
|
uid >>>= 0;
|
|
}
|
|
return cachedGroups[uid] || generateTextureBatchBindGroup(textures, size, uid);
|
|
}
|
|
let maxTextures = 0;
|
|
function generateTextureBatchBindGroup(textures, size, key) {
|
|
const bindGroupResources = {};
|
|
let bindIndex = 0;
|
|
if (!maxTextures)
|
|
maxTextures = getMaxTexturesPerBatch();
|
|
for (let i = 0; i < maxTextures; i++) {
|
|
const texture = i < size ? textures[i] : Texture.EMPTY.source;
|
|
bindGroupResources[bindIndex++] = texture.source;
|
|
bindGroupResources[bindIndex++] = texture.style;
|
|
}
|
|
const bindGroup = new BindGroup(bindGroupResources);
|
|
cachedGroups[key] = bindGroup;
|
|
return bindGroup;
|
|
}
|
|
|
|
"use strict";
|
|
class ViewableBuffer {
|
|
constructor(sizeOrBuffer) {
|
|
if (typeof sizeOrBuffer === "number") {
|
|
this.rawBinaryData = new ArrayBuffer(sizeOrBuffer);
|
|
} else if (sizeOrBuffer instanceof Uint8Array) {
|
|
this.rawBinaryData = sizeOrBuffer.buffer;
|
|
} else {
|
|
this.rawBinaryData = sizeOrBuffer;
|
|
}
|
|
this.uint32View = new Uint32Array(this.rawBinaryData);
|
|
this.float32View = new Float32Array(this.rawBinaryData);
|
|
this.size = this.rawBinaryData.byteLength;
|
|
}
|
|
/** View on the raw binary data as a `Int8Array`. */
|
|
get int8View() {
|
|
if (!this._int8View) {
|
|
this._int8View = new Int8Array(this.rawBinaryData);
|
|
}
|
|
return this._int8View;
|
|
}
|
|
/** View on the raw binary data as a `Uint8Array`. */
|
|
get uint8View() {
|
|
if (!this._uint8View) {
|
|
this._uint8View = new Uint8Array(this.rawBinaryData);
|
|
}
|
|
return this._uint8View;
|
|
}
|
|
/** View on the raw binary data as a `Int16Array`. */
|
|
get int16View() {
|
|
if (!this._int16View) {
|
|
this._int16View = new Int16Array(this.rawBinaryData);
|
|
}
|
|
return this._int16View;
|
|
}
|
|
/** View on the raw binary data as a `Int32Array`. */
|
|
get int32View() {
|
|
if (!this._int32View) {
|
|
this._int32View = new Int32Array(this.rawBinaryData);
|
|
}
|
|
return this._int32View;
|
|
}
|
|
/** View on the raw binary data as a `Float64Array`. */
|
|
get float64View() {
|
|
if (!this._float64Array) {
|
|
this._float64Array = new Float64Array(this.rawBinaryData);
|
|
}
|
|
return this._float64Array;
|
|
}
|
|
/** View on the raw binary data as a `BigUint64Array`. */
|
|
get bigUint64View() {
|
|
if (!this._bigUint64Array) {
|
|
this._bigUint64Array = new BigUint64Array(this.rawBinaryData);
|
|
}
|
|
return this._bigUint64Array;
|
|
}
|
|
/**
|
|
* Returns the view of the given type.
|
|
* @param type - One of `int8`, `uint8`, `int16`,
|
|
* `uint16`, `int32`, `uint32`, and `float32`.
|
|
* @returns - typed array of given type
|
|
*/
|
|
view(type) {
|
|
return this[`${type}View`];
|
|
}
|
|
/** Destroys all buffer references. Do not use after calling this. */
|
|
destroy() {
|
|
this.rawBinaryData = null;
|
|
this._int8View = null;
|
|
this._uint8View = null;
|
|
this._int16View = null;
|
|
this.uint16View = null;
|
|
this._int32View = null;
|
|
this.uint32View = null;
|
|
this.float32View = null;
|
|
}
|
|
/**
|
|
* Returns the size of the given type in bytes.
|
|
* @param type - One of `int8`, `uint8`, `int16`,
|
|
* `uint16`, `int32`, `uint32`, and `float32`.
|
|
* @returns - size of the type in bytes
|
|
*/
|
|
static sizeOf(type) {
|
|
switch (type) {
|
|
case "int8":
|
|
case "uint8":
|
|
return 1;
|
|
case "int16":
|
|
case "uint16":
|
|
return 2;
|
|
case "int32":
|
|
case "uint32":
|
|
case "float32":
|
|
return 4;
|
|
default:
|
|
throw new Error(`${type} isn't a valid view type`);
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function fastCopy(sourceBuffer, destinationBuffer) {
|
|
const lengthDouble = sourceBuffer.byteLength / 8 | 0;
|
|
const sourceFloat64View = new Float64Array(sourceBuffer, 0, lengthDouble);
|
|
const destinationFloat64View = new Float64Array(destinationBuffer, 0, lengthDouble);
|
|
destinationFloat64View.set(sourceFloat64View);
|
|
const remainingBytes = sourceBuffer.byteLength - lengthDouble * 8;
|
|
if (remainingBytes > 0) {
|
|
const sourceUint8View = new Uint8Array(sourceBuffer, lengthDouble * 8, remainingBytes);
|
|
const destinationUint8View = new Uint8Array(destinationBuffer, lengthDouble * 8, remainingBytes);
|
|
destinationUint8View.set(sourceUint8View);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const BLEND_TO_NPM = {
|
|
normal: "normal-npm",
|
|
add: "add-npm",
|
|
screen: "screen-npm"
|
|
};
|
|
var STENCIL_MODES = /* @__PURE__ */ ((STENCIL_MODES2) => {
|
|
STENCIL_MODES2[STENCIL_MODES2["DISABLED"] = 0] = "DISABLED";
|
|
STENCIL_MODES2[STENCIL_MODES2["RENDERING_MASK_ADD"] = 1] = "RENDERING_MASK_ADD";
|
|
STENCIL_MODES2[STENCIL_MODES2["MASK_ACTIVE"] = 2] = "MASK_ACTIVE";
|
|
STENCIL_MODES2[STENCIL_MODES2["RENDERING_MASK_REMOVE"] = 3] = "RENDERING_MASK_REMOVE";
|
|
STENCIL_MODES2[STENCIL_MODES2["NONE"] = 4] = "NONE";
|
|
return STENCIL_MODES2;
|
|
})(STENCIL_MODES || {});
|
|
|
|
"use strict";
|
|
function getAdjustedBlendModeBlend(blendMode, textureSource) {
|
|
if (textureSource.alphaMode === "no-premultiply-alpha") {
|
|
return BLEND_TO_NPM[blendMode] || blendMode;
|
|
}
|
|
return blendMode;
|
|
}
|
|
|
|
"use strict";
|
|
class BatchTextureArray {
|
|
constructor() {
|
|
/** Respective locations for textures. */
|
|
this.ids = /* @__PURE__ */ Object.create(null);
|
|
this.textures = [];
|
|
this.count = 0;
|
|
}
|
|
/** Clear the textures and their locations. */
|
|
clear() {
|
|
for (let i = 0; i < this.count; i++) {
|
|
const t = this.textures[i];
|
|
this.textures[i] = null;
|
|
this.ids[t.uid] = null;
|
|
}
|
|
this.count = 0;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$Z = Object.defineProperty;
|
|
var __getOwnPropSymbols$Z = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$Z = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$Z = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$Z = (obj, key, value) => key in obj ? __defProp$Z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$Z = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$Z.call(b, prop))
|
|
__defNormalProp$Z(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$Z)
|
|
for (var prop of __getOwnPropSymbols$Z(b)) {
|
|
if (__propIsEnum$Z.call(b, prop))
|
|
__defNormalProp$Z(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
class Batch {
|
|
constructor() {
|
|
this.renderPipeId = "batch";
|
|
this.action = "startBatch";
|
|
// TODO - eventually this could be useful for flagging batches as dirty and then only rebuilding those ones
|
|
// public elementStart = 0;
|
|
// public elementSize = 0;
|
|
// for drawing..
|
|
this.start = 0;
|
|
this.size = 0;
|
|
this.textures = new BatchTextureArray();
|
|
this.blendMode = "normal";
|
|
this.canBundle = true;
|
|
}
|
|
destroy() {
|
|
this.textures = null;
|
|
this.gpuBindGroup = null;
|
|
this.bindGroup = null;
|
|
this.batcher = null;
|
|
}
|
|
}
|
|
const batchPool = [];
|
|
let batchPoolIndex = 0;
|
|
function getBatchFromPool() {
|
|
return batchPoolIndex > 0 ? batchPool[--batchPoolIndex] : new Batch();
|
|
}
|
|
function returnBatchToPool(batch) {
|
|
batchPool[batchPoolIndex++] = batch;
|
|
}
|
|
let BATCH_TICK = 0;
|
|
const _Batcher = class _Batcher {
|
|
constructor(options = {}) {
|
|
/** unique id for this batcher */
|
|
this.uid = uid$1("batcher");
|
|
/** Indicates whether the batch data has been modified and needs updating. */
|
|
this.dirty = true;
|
|
/** The current index of the batch being processed. */
|
|
this.batchIndex = 0;
|
|
/** An array of all batches created during the current rendering process. */
|
|
this.batches = [];
|
|
this._elements = [];
|
|
var _a;
|
|
_Batcher.defaultOptions.maxTextures = (_a = _Batcher.defaultOptions.maxTextures) != null ? _a : getMaxTexturesPerBatch();
|
|
options = __spreadValues$Z(__spreadValues$Z({}, _Batcher.defaultOptions), options);
|
|
const { maxTextures, attributesInitialSize, indicesInitialSize } = options;
|
|
this.attributeBuffer = new ViewableBuffer(attributesInitialSize * 4);
|
|
this.indexBuffer = new Uint16Array(indicesInitialSize);
|
|
this.maxTextures = maxTextures;
|
|
}
|
|
begin() {
|
|
this.elementSize = 0;
|
|
this.elementStart = 0;
|
|
this.indexSize = 0;
|
|
this.attributeSize = 0;
|
|
for (let i = 0; i < this.batchIndex; i++) {
|
|
returnBatchToPool(this.batches[i]);
|
|
}
|
|
this.batchIndex = 0;
|
|
this._batchIndexStart = 0;
|
|
this._batchIndexSize = 0;
|
|
this.dirty = true;
|
|
}
|
|
add(batchableObject) {
|
|
this._elements[this.elementSize++] = batchableObject;
|
|
batchableObject._indexStart = this.indexSize;
|
|
batchableObject._attributeStart = this.attributeSize;
|
|
batchableObject._batcher = this;
|
|
this.indexSize += batchableObject.indexSize;
|
|
this.attributeSize += batchableObject.attributeSize * this.vertexSize;
|
|
}
|
|
checkAndUpdateTexture(batchableObject, texture) {
|
|
const textureId = batchableObject._batch.textures.ids[texture._source.uid];
|
|
if (!textureId && textureId !== 0)
|
|
return false;
|
|
batchableObject._textureId = textureId;
|
|
batchableObject.texture = texture;
|
|
return true;
|
|
}
|
|
updateElement(batchableObject) {
|
|
this.dirty = true;
|
|
const attributeBuffer = this.attributeBuffer;
|
|
if (batchableObject.packAsQuad) {
|
|
this.packQuadAttributes(
|
|
batchableObject,
|
|
attributeBuffer.float32View,
|
|
attributeBuffer.uint32View,
|
|
batchableObject._attributeStart,
|
|
batchableObject._textureId
|
|
);
|
|
} else {
|
|
this.packAttributes(
|
|
batchableObject,
|
|
attributeBuffer.float32View,
|
|
attributeBuffer.uint32View,
|
|
batchableObject._attributeStart,
|
|
batchableObject._textureId
|
|
);
|
|
}
|
|
}
|
|
/**
|
|
* breaks the batcher. This happens when a batch gets too big,
|
|
* or we need to switch to a different type of rendering (a filter for example)
|
|
* @param instructionSet
|
|
*/
|
|
break(instructionSet) {
|
|
const elements = this._elements;
|
|
if (!elements[this.elementStart])
|
|
return;
|
|
let batch = getBatchFromPool();
|
|
let textureBatch = batch.textures;
|
|
textureBatch.clear();
|
|
const firstElement = elements[this.elementStart];
|
|
let blendMode = getAdjustedBlendModeBlend(firstElement.blendMode, firstElement.texture._source);
|
|
if (this.attributeSize * 4 > this.attributeBuffer.size) {
|
|
this._resizeAttributeBuffer(this.attributeSize * 4);
|
|
}
|
|
if (this.indexSize > this.indexBuffer.length) {
|
|
this._resizeIndexBuffer(this.indexSize);
|
|
}
|
|
const f32 = this.attributeBuffer.float32View;
|
|
const u32 = this.attributeBuffer.uint32View;
|
|
const indexBuffer = this.indexBuffer;
|
|
let size = this._batchIndexSize;
|
|
let start = this._batchIndexStart;
|
|
let action = "startBatch";
|
|
const maxTextures = this.maxTextures;
|
|
for (let i = this.elementStart; i < this.elementSize; ++i) {
|
|
const element = elements[i];
|
|
elements[i] = null;
|
|
const texture = element.texture;
|
|
const source = texture._source;
|
|
const adjustedBlendMode = getAdjustedBlendModeBlend(element.blendMode, source);
|
|
const breakRequired = blendMode !== adjustedBlendMode;
|
|
if (source._batchTick === BATCH_TICK && !breakRequired) {
|
|
element._textureId = source._textureBindLocation;
|
|
size += element.indexSize;
|
|
if (element.packAsQuad) {
|
|
this.packQuadAttributes(
|
|
element,
|
|
f32,
|
|
u32,
|
|
element._attributeStart,
|
|
element._textureId
|
|
);
|
|
this.packQuadIndex(
|
|
indexBuffer,
|
|
element._indexStart,
|
|
element._attributeStart / this.vertexSize
|
|
);
|
|
} else {
|
|
this.packAttributes(
|
|
element,
|
|
f32,
|
|
u32,
|
|
element._attributeStart,
|
|
element._textureId
|
|
);
|
|
this.packIndex(
|
|
element,
|
|
indexBuffer,
|
|
element._indexStart,
|
|
element._attributeStart / this.vertexSize
|
|
);
|
|
}
|
|
element._batch = batch;
|
|
continue;
|
|
}
|
|
source._batchTick = BATCH_TICK;
|
|
if (textureBatch.count >= maxTextures || breakRequired) {
|
|
this._finishBatch(
|
|
batch,
|
|
start,
|
|
size - start,
|
|
textureBatch,
|
|
blendMode,
|
|
instructionSet,
|
|
action
|
|
);
|
|
action = "renderBatch";
|
|
start = size;
|
|
blendMode = adjustedBlendMode;
|
|
batch = getBatchFromPool();
|
|
textureBatch = batch.textures;
|
|
textureBatch.clear();
|
|
++BATCH_TICK;
|
|
}
|
|
element._textureId = source._textureBindLocation = textureBatch.count;
|
|
textureBatch.ids[source.uid] = textureBatch.count;
|
|
textureBatch.textures[textureBatch.count++] = source;
|
|
element._batch = batch;
|
|
size += element.indexSize;
|
|
if (element.packAsQuad) {
|
|
this.packQuadAttributes(
|
|
element,
|
|
f32,
|
|
u32,
|
|
element._attributeStart,
|
|
element._textureId
|
|
);
|
|
this.packQuadIndex(
|
|
indexBuffer,
|
|
element._indexStart,
|
|
element._attributeStart / this.vertexSize
|
|
);
|
|
} else {
|
|
this.packAttributes(
|
|
element,
|
|
f32,
|
|
u32,
|
|
element._attributeStart,
|
|
element._textureId
|
|
);
|
|
this.packIndex(
|
|
element,
|
|
indexBuffer,
|
|
element._indexStart,
|
|
element._attributeStart / this.vertexSize
|
|
);
|
|
}
|
|
}
|
|
if (textureBatch.count > 0) {
|
|
this._finishBatch(
|
|
batch,
|
|
start,
|
|
size - start,
|
|
textureBatch,
|
|
blendMode,
|
|
instructionSet,
|
|
action
|
|
);
|
|
start = size;
|
|
++BATCH_TICK;
|
|
}
|
|
this.elementStart = this.elementSize;
|
|
this._batchIndexStart = start;
|
|
this._batchIndexSize = size;
|
|
}
|
|
_finishBatch(batch, indexStart, indexSize, textureBatch, blendMode, instructionSet, action) {
|
|
batch.gpuBindGroup = null;
|
|
batch.bindGroup = null;
|
|
batch.action = action;
|
|
batch.batcher = this;
|
|
batch.textures = textureBatch;
|
|
batch.blendMode = blendMode;
|
|
batch.start = indexStart;
|
|
batch.size = indexSize;
|
|
++BATCH_TICK;
|
|
this.batches[this.batchIndex++] = batch;
|
|
instructionSet.add(batch);
|
|
}
|
|
finish(instructionSet) {
|
|
this.break(instructionSet);
|
|
}
|
|
/**
|
|
* Resizes the attribute buffer to the given size (1 = 1 float32)
|
|
* @param size - the size in vertices to ensure (not bytes!)
|
|
*/
|
|
ensureAttributeBuffer(size) {
|
|
if (size * 4 <= this.attributeBuffer.size)
|
|
return;
|
|
this._resizeAttributeBuffer(size * 4);
|
|
}
|
|
/**
|
|
* Resizes the index buffer to the given size (1 = 1 float32)
|
|
* @param size - the size in vertices to ensure (not bytes!)
|
|
*/
|
|
ensureIndexBuffer(size) {
|
|
if (size <= this.indexBuffer.length)
|
|
return;
|
|
this._resizeIndexBuffer(size);
|
|
}
|
|
_resizeAttributeBuffer(size) {
|
|
const newSize = Math.max(size, this.attributeBuffer.size * 2);
|
|
const newArrayBuffer = new ViewableBuffer(newSize);
|
|
fastCopy(this.attributeBuffer.rawBinaryData, newArrayBuffer.rawBinaryData);
|
|
this.attributeBuffer = newArrayBuffer;
|
|
}
|
|
_resizeIndexBuffer(size) {
|
|
const indexBuffer = this.indexBuffer;
|
|
let newSize = Math.max(size, indexBuffer.length * 1.5);
|
|
newSize += newSize % 2;
|
|
const newIndexBuffer = newSize > 65535 ? new Uint32Array(newSize) : new Uint16Array(newSize);
|
|
if (newIndexBuffer.BYTES_PER_ELEMENT !== indexBuffer.BYTES_PER_ELEMENT) {
|
|
for (let i = 0; i < indexBuffer.length; i++) {
|
|
newIndexBuffer[i] = indexBuffer[i];
|
|
}
|
|
} else {
|
|
fastCopy(indexBuffer.buffer, newIndexBuffer.buffer);
|
|
}
|
|
this.indexBuffer = newIndexBuffer;
|
|
}
|
|
packQuadIndex(indexBuffer, index, indicesOffset) {
|
|
indexBuffer[index] = indicesOffset + 0;
|
|
indexBuffer[index + 1] = indicesOffset + 1;
|
|
indexBuffer[index + 2] = indicesOffset + 2;
|
|
indexBuffer[index + 3] = indicesOffset + 0;
|
|
indexBuffer[index + 4] = indicesOffset + 2;
|
|
indexBuffer[index + 5] = indicesOffset + 3;
|
|
}
|
|
packIndex(element, indexBuffer, index, indicesOffset) {
|
|
const indices = element.indices;
|
|
const size = element.indexSize;
|
|
const indexOffset = element.indexOffset;
|
|
const attributeOffset = element.attributeOffset;
|
|
for (let i = 0; i < size; i++) {
|
|
indexBuffer[index++] = indicesOffset + indices[i + indexOffset] - attributeOffset;
|
|
}
|
|
}
|
|
destroy() {
|
|
for (let i = 0; i < this.batches.length; i++) {
|
|
returnBatchToPool(this.batches[i]);
|
|
}
|
|
this.batches = null;
|
|
for (let i = 0; i < this._elements.length; i++) {
|
|
this._elements[i]._batch = null;
|
|
}
|
|
this._elements = null;
|
|
this.indexBuffer = null;
|
|
this.attributeBuffer.destroy();
|
|
this.attributeBuffer = null;
|
|
}
|
|
};
|
|
_Batcher.defaultOptions = {
|
|
maxTextures: null,
|
|
attributesInitialSize: 4,
|
|
indicesInitialSize: 6
|
|
};
|
|
let Batcher = _Batcher;
|
|
|
|
"use strict";
|
|
var BufferUsage = /* @__PURE__ */ ((BufferUsage2) => {
|
|
BufferUsage2[BufferUsage2["MAP_READ"] = 1] = "MAP_READ";
|
|
BufferUsage2[BufferUsage2["MAP_WRITE"] = 2] = "MAP_WRITE";
|
|
BufferUsage2[BufferUsage2["COPY_SRC"] = 4] = "COPY_SRC";
|
|
BufferUsage2[BufferUsage2["COPY_DST"] = 8] = "COPY_DST";
|
|
BufferUsage2[BufferUsage2["INDEX"] = 16] = "INDEX";
|
|
BufferUsage2[BufferUsage2["VERTEX"] = 32] = "VERTEX";
|
|
BufferUsage2[BufferUsage2["UNIFORM"] = 64] = "UNIFORM";
|
|
BufferUsage2[BufferUsage2["STORAGE"] = 128] = "STORAGE";
|
|
BufferUsage2[BufferUsage2["INDIRECT"] = 256] = "INDIRECT";
|
|
BufferUsage2[BufferUsage2["QUERY_RESOLVE"] = 512] = "QUERY_RESOLVE";
|
|
BufferUsage2[BufferUsage2["STATIC"] = 1024] = "STATIC";
|
|
return BufferUsage2;
|
|
})(BufferUsage || {});
|
|
|
|
"use strict";
|
|
class Buffer extends EventEmitter {
|
|
/**
|
|
* Creates a new Buffer with the given options
|
|
* @param options - the options for the buffer
|
|
*/
|
|
constructor(options) {
|
|
let { data, size } = options;
|
|
const { usage, label, shrinkToFit } = options;
|
|
super();
|
|
/**
|
|
* emits when the underlying buffer has changed shape (i.e. resized)
|
|
* letting the renderer know that it needs to discard the old buffer on the GPU and create a new one
|
|
* @event change
|
|
*/
|
|
/**
|
|
* emits when the underlying buffer data has been updated. letting the renderer know
|
|
* that it needs to update the buffer on the GPU
|
|
* @event update
|
|
*/
|
|
/**
|
|
* emits when the buffer is destroyed. letting the renderer know that it needs to destroy the buffer on the GPU
|
|
* @event destroy
|
|
*/
|
|
/** a unique id for this uniform group used through the renderer */
|
|
this.uid = uid$1("buffer");
|
|
/**
|
|
* a resource type, used to identify how to handle it when its in a bind group / shader resource
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._resourceType = "buffer";
|
|
/**
|
|
* the resource id used internally by the renderer to build bind group keys
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._resourceId = uid$1("resource");
|
|
/**
|
|
* used internally to know if a uniform group was used in the last render pass
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._touched = 0;
|
|
/**
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._updateID = 1;
|
|
/**
|
|
* should the GPU buffer be shrunk when the data becomes smaller?
|
|
* changing this will cause the buffer to be destroyed and a new one created on the GPU
|
|
* this can be expensive, especially if the buffer is already big enough!
|
|
* setting this to false will prevent the buffer from being shrunk. This will yield better performance
|
|
* if you are constantly setting data that is changing size often.
|
|
* @default true
|
|
*/
|
|
this.shrinkToFit = true;
|
|
/**
|
|
* Has the buffer been destroyed?
|
|
* @readonly
|
|
*/
|
|
this.destroyed = false;
|
|
if (data instanceof Array) {
|
|
data = new Float32Array(data);
|
|
}
|
|
this._data = data;
|
|
size = size != null ? size : data == null ? void 0 : data.byteLength;
|
|
const mappedAtCreation = !!data;
|
|
this.descriptor = {
|
|
size,
|
|
usage,
|
|
mappedAtCreation,
|
|
label
|
|
};
|
|
this.shrinkToFit = shrinkToFit != null ? shrinkToFit : true;
|
|
}
|
|
/** the data in the buffer */
|
|
get data() {
|
|
return this._data;
|
|
}
|
|
set data(value) {
|
|
this.setDataWithSize(value, value.length, true);
|
|
}
|
|
/** whether the buffer is static or not */
|
|
get static() {
|
|
return !!(this.descriptor.usage & BufferUsage.STATIC);
|
|
}
|
|
set static(value) {
|
|
if (value) {
|
|
this.descriptor.usage |= BufferUsage.STATIC;
|
|
} else {
|
|
this.descriptor.usage &= ~BufferUsage.STATIC;
|
|
}
|
|
}
|
|
/**
|
|
* Sets the data in the buffer to the given value. This will immediately update the buffer on the GPU.
|
|
* If you only want to update a subset of the buffer, you can pass in the size of the data.
|
|
* @param value - the data to set
|
|
* @param size - the size of the data in bytes
|
|
* @param syncGPU - should the buffer be updated on the GPU immediately?
|
|
*/
|
|
setDataWithSize(value, size, syncGPU) {
|
|
this._updateID++;
|
|
this._updateSize = size * value.BYTES_PER_ELEMENT;
|
|
if (this._data === value) {
|
|
if (syncGPU)
|
|
this.emit("update", this);
|
|
return;
|
|
}
|
|
const oldData = this._data;
|
|
this._data = value;
|
|
if (oldData.length !== value.length) {
|
|
if (!this.shrinkToFit && value.byteLength < oldData.byteLength) {
|
|
if (syncGPU)
|
|
this.emit("update", this);
|
|
} else {
|
|
this.descriptor.size = value.byteLength;
|
|
this._resourceId = uid$1("resource");
|
|
this.emit("change", this);
|
|
}
|
|
return;
|
|
}
|
|
if (syncGPU)
|
|
this.emit("update", this);
|
|
}
|
|
/**
|
|
* updates the buffer on the GPU to reflect the data in the buffer.
|
|
* By default it will update the entire buffer. If you only want to update a subset of the buffer,
|
|
* you can pass in the size of the buffer to update.
|
|
* @param sizeInBytes - the new size of the buffer in bytes
|
|
*/
|
|
update(sizeInBytes) {
|
|
this._updateSize = sizeInBytes != null ? sizeInBytes : this._updateSize;
|
|
this._updateID++;
|
|
this.emit("update", this);
|
|
}
|
|
/** Destroys the buffer */
|
|
destroy() {
|
|
this.destroyed = true;
|
|
this.emit("destroy", this);
|
|
this.emit("change", this);
|
|
this._data = null;
|
|
this.descriptor = null;
|
|
this.removeAllListeners();
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function ensureIsBuffer(buffer, index) {
|
|
if (!(buffer instanceof Buffer)) {
|
|
let usage = index ? BufferUsage.INDEX : BufferUsage.VERTEX;
|
|
if (buffer instanceof Array) {
|
|
if (index) {
|
|
buffer = new Uint32Array(buffer);
|
|
usage = BufferUsage.INDEX | BufferUsage.COPY_DST;
|
|
} else {
|
|
buffer = new Float32Array(buffer);
|
|
usage = BufferUsage.VERTEX | BufferUsage.COPY_DST;
|
|
}
|
|
}
|
|
buffer = new Buffer({
|
|
data: buffer,
|
|
label: index ? "index-mesh-buffer" : "vertex-mesh-buffer",
|
|
usage
|
|
});
|
|
}
|
|
return buffer;
|
|
}
|
|
|
|
"use strict";
|
|
function getGeometryBounds(geometry, attributeId, bounds) {
|
|
const attribute = geometry.getAttribute(attributeId);
|
|
if (!attribute) {
|
|
bounds.minX = 0;
|
|
bounds.minY = 0;
|
|
bounds.maxX = 0;
|
|
bounds.maxY = 0;
|
|
return bounds;
|
|
}
|
|
const data = attribute.buffer.data;
|
|
let minX = Infinity;
|
|
let minY = Infinity;
|
|
let maxX = -Infinity;
|
|
let maxY = -Infinity;
|
|
const byteSize = data.BYTES_PER_ELEMENT;
|
|
const offset = (attribute.offset || 0) / byteSize;
|
|
const stride = (attribute.stride || 2 * 4) / byteSize;
|
|
for (let i = offset; i < data.length; i += stride) {
|
|
const x = data[i];
|
|
const y = data[i + 1];
|
|
if (x > maxX)
|
|
maxX = x;
|
|
if (y > maxY)
|
|
maxY = y;
|
|
if (x < minX)
|
|
minX = x;
|
|
if (y < minY)
|
|
minY = y;
|
|
}
|
|
bounds.minX = minX;
|
|
bounds.minY = minY;
|
|
bounds.maxX = maxX;
|
|
bounds.maxY = maxY;
|
|
return bounds;
|
|
}
|
|
|
|
"use strict";
|
|
function ensureIsAttribute(attribute) {
|
|
if (attribute instanceof Buffer || Array.isArray(attribute) || attribute.BYTES_PER_ELEMENT) {
|
|
attribute = {
|
|
buffer: attribute
|
|
};
|
|
}
|
|
attribute.buffer = ensureIsBuffer(attribute.buffer, false);
|
|
return attribute;
|
|
}
|
|
class Geometry extends EventEmitter {
|
|
/**
|
|
* Create a new instance of a geometry
|
|
* @param options - The options for the geometry.
|
|
*/
|
|
constructor(options) {
|
|
const { attributes, indexBuffer, topology } = options;
|
|
super();
|
|
/** The unique id of the geometry. */
|
|
this.uid = uid$1("geometry");
|
|
/**
|
|
* the layout key will be generated by WebGPU all geometries that have the same structure
|
|
* will have the same layout key. This is used to cache the pipeline layout
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._layoutKey = 0;
|
|
/** the instance count of the geometry to draw */
|
|
this.instanceCount = 1;
|
|
this._bounds = new Bounds();
|
|
this._boundsDirty = true;
|
|
this.attributes = attributes;
|
|
this.buffers = [];
|
|
this.instanceCount = options.instanceCount || 1;
|
|
for (const i in attributes) {
|
|
const attribute = attributes[i] = ensureIsAttribute(attributes[i]);
|
|
const bufferIndex = this.buffers.indexOf(attribute.buffer);
|
|
if (bufferIndex === -1) {
|
|
this.buffers.push(attribute.buffer);
|
|
attribute.buffer.on("update", this.onBufferUpdate, this);
|
|
attribute.buffer.on("change", this.onBufferUpdate, this);
|
|
}
|
|
}
|
|
if (indexBuffer) {
|
|
this.indexBuffer = ensureIsBuffer(indexBuffer, true);
|
|
this.buffers.push(this.indexBuffer);
|
|
}
|
|
this.topology = topology || "triangle-list";
|
|
}
|
|
onBufferUpdate() {
|
|
this._boundsDirty = true;
|
|
this.emit("update", this);
|
|
}
|
|
/**
|
|
* Returns the requested attribute.
|
|
* @param id - The name of the attribute required
|
|
* @returns - The attribute requested.
|
|
*/
|
|
getAttribute(id) {
|
|
return this.attributes[id];
|
|
}
|
|
/**
|
|
* Returns the index buffer
|
|
* @returns - The index buffer.
|
|
*/
|
|
getIndex() {
|
|
return this.indexBuffer;
|
|
}
|
|
/**
|
|
* Returns the requested buffer.
|
|
* @param id - The name of the buffer required.
|
|
* @returns - The buffer requested.
|
|
*/
|
|
getBuffer(id) {
|
|
return this.getAttribute(id).buffer;
|
|
}
|
|
/**
|
|
* Used to figure out how many vertices there are in this geometry
|
|
* @returns the number of vertices in the geometry
|
|
*/
|
|
getSize() {
|
|
for (const i in this.attributes) {
|
|
const attribute = this.attributes[i];
|
|
const buffer = attribute.buffer;
|
|
return buffer.data.length / (attribute.stride / 4 || attribute.size);
|
|
}
|
|
return 0;
|
|
}
|
|
/** Returns the bounds of the geometry. */
|
|
get bounds() {
|
|
if (!this._boundsDirty)
|
|
return this._bounds;
|
|
this._boundsDirty = false;
|
|
return getGeometryBounds(this, "aPosition", this._bounds);
|
|
}
|
|
/**
|
|
* destroys the geometry.
|
|
* @param destroyBuffers - destroy the buffers associated with this geometry
|
|
*/
|
|
destroy(destroyBuffers = false) {
|
|
this.emit("destroy", this);
|
|
this.removeAllListeners();
|
|
if (destroyBuffers) {
|
|
this.buffers.forEach((buffer) => buffer.destroy());
|
|
}
|
|
this.attributes = null;
|
|
this.buffers = null;
|
|
this.indexBuffer = null;
|
|
this._bounds = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const placeHolderBufferData = new Float32Array(1);
|
|
const placeHolderIndexData = new Uint32Array(1);
|
|
class BatchGeometry extends Geometry {
|
|
constructor() {
|
|
const vertexSize = 6;
|
|
const attributeBuffer = new Buffer({
|
|
data: placeHolderBufferData,
|
|
label: "attribute-batch-buffer",
|
|
usage: BufferUsage.VERTEX | BufferUsage.COPY_DST,
|
|
shrinkToFit: false
|
|
});
|
|
const indexBuffer = new Buffer({
|
|
data: placeHolderIndexData,
|
|
label: "index-batch-buffer",
|
|
usage: BufferUsage.INDEX | BufferUsage.COPY_DST,
|
|
// | BufferUsage.STATIC,
|
|
shrinkToFit: false
|
|
});
|
|
const stride = vertexSize * 4;
|
|
super({
|
|
attributes: {
|
|
aPosition: {
|
|
buffer: attributeBuffer,
|
|
format: "float32x2",
|
|
stride,
|
|
offset: 0
|
|
},
|
|
aUV: {
|
|
buffer: attributeBuffer,
|
|
format: "float32x2",
|
|
stride,
|
|
offset: 2 * 4
|
|
},
|
|
aColor: {
|
|
buffer: attributeBuffer,
|
|
format: "unorm8x4",
|
|
stride,
|
|
offset: 4 * 4
|
|
},
|
|
aTextureIdAndRound: {
|
|
buffer: attributeBuffer,
|
|
format: "uint16x2",
|
|
stride,
|
|
offset: 5 * 4
|
|
}
|
|
},
|
|
indexBuffer
|
|
});
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const idCounts = /* @__PURE__ */ Object.create(null);
|
|
const idHash = /* @__PURE__ */ Object.create(null);
|
|
function createIdFromString(value, groupId) {
|
|
let id = idHash[value];
|
|
if (id === void 0) {
|
|
if (idCounts[groupId] === void 0) {
|
|
idCounts[groupId] = 1;
|
|
}
|
|
idHash[value] = id = idCounts[groupId]++;
|
|
}
|
|
return id;
|
|
}
|
|
|
|
"use strict";
|
|
let maxFragmentPrecision;
|
|
function getMaxFragmentPrecision() {
|
|
if (!maxFragmentPrecision) {
|
|
maxFragmentPrecision = "mediump";
|
|
const gl = getTestContext();
|
|
if (gl) {
|
|
if (gl.getShaderPrecisionFormat) {
|
|
const shaderFragment = gl.getShaderPrecisionFormat(gl.FRAGMENT_SHADER, gl.HIGH_FLOAT);
|
|
maxFragmentPrecision = shaderFragment.precision ? "highp" : "mediump";
|
|
}
|
|
}
|
|
}
|
|
return maxFragmentPrecision;
|
|
}
|
|
|
|
"use strict";
|
|
function addProgramDefines(src, isES300, isFragment) {
|
|
if (isES300)
|
|
return src;
|
|
if (isFragment) {
|
|
src = src.replace("out vec4 finalColor;", "");
|
|
return `
|
|
|
|
#ifdef GL_ES // This checks if it is WebGL1
|
|
#define in varying
|
|
#define finalColor gl_FragColor
|
|
#define texture texture2D
|
|
#endif
|
|
${src}
|
|
`;
|
|
}
|
|
return `
|
|
|
|
#ifdef GL_ES // This checks if it is WebGL1
|
|
#define in attribute
|
|
#define out varying
|
|
#endif
|
|
${src}
|
|
`;
|
|
}
|
|
|
|
"use strict";
|
|
function ensurePrecision(src, options, isFragment) {
|
|
const maxSupportedPrecision = isFragment ? options.maxSupportedFragmentPrecision : options.maxSupportedVertexPrecision;
|
|
if (src.substring(0, 9) !== "precision") {
|
|
let precision = isFragment ? options.requestedFragmentPrecision : options.requestedVertexPrecision;
|
|
if (precision === "highp" && maxSupportedPrecision !== "highp") {
|
|
precision = "mediump";
|
|
}
|
|
return `precision ${precision} float;
|
|
${src}`;
|
|
} else if (maxSupportedPrecision !== "highp" && src.substring(0, 15) === "precision highp") {
|
|
return src.replace("precision highp", "precision mediump");
|
|
}
|
|
return src;
|
|
}
|
|
|
|
"use strict";
|
|
function insertVersion(src, isES300) {
|
|
if (!isES300)
|
|
return src;
|
|
return `#version 300 es
|
|
${src}`;
|
|
}
|
|
|
|
"use strict";
|
|
const fragmentNameCache = {};
|
|
const VertexNameCache = {};
|
|
function setProgramName(src, { name = `pixi-program` }, isFragment = true) {
|
|
name = name.replace(/\s+/g, "-");
|
|
name += isFragment ? "-fragment" : "-vertex";
|
|
const nameCache = isFragment ? fragmentNameCache : VertexNameCache;
|
|
if (nameCache[name]) {
|
|
nameCache[name]++;
|
|
name += `-${nameCache[name]}`;
|
|
} else {
|
|
nameCache[name] = 1;
|
|
}
|
|
if (src.indexOf("#define SHADER_NAME") !== -1)
|
|
return src;
|
|
const shaderName = `#define SHADER_NAME ${name}`;
|
|
return `${shaderName}
|
|
${src}`;
|
|
}
|
|
|
|
"use strict";
|
|
function stripVersion(src, isES300) {
|
|
if (!isES300)
|
|
return src;
|
|
return src.replace("#version 300 es", "");
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$Y = Object.defineProperty;
|
|
var __getOwnPropSymbols$Y = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$Y = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$Y = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$Y = (obj, key, value) => key in obj ? __defProp$Y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$Y = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$Y.call(b, prop))
|
|
__defNormalProp$Y(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$Y)
|
|
for (var prop of __getOwnPropSymbols$Y(b)) {
|
|
if (__propIsEnum$Y.call(b, prop))
|
|
__defNormalProp$Y(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const processes = {
|
|
// strips any version headers..
|
|
stripVersion,
|
|
// adds precision string if not already present
|
|
ensurePrecision,
|
|
// add some defines if WebGL1 to make it more compatible with WebGL2 shaders
|
|
addProgramDefines,
|
|
// add the program name to the shader
|
|
setProgramName,
|
|
// add the version string to the shader header
|
|
insertVersion
|
|
};
|
|
const programCache$1 = /* @__PURE__ */ Object.create(null);
|
|
const _GlProgram = class _GlProgram {
|
|
/**
|
|
* Creates a shiny new GlProgram. Used by WebGL renderer.
|
|
* @param options - The options for the program.
|
|
*/
|
|
constructor(options) {
|
|
options = __spreadValues$Y(__spreadValues$Y({}, _GlProgram.defaultOptions), options);
|
|
const isES300 = options.fragment.indexOf("#version 300 es") !== -1;
|
|
const preprocessorOptions = {
|
|
stripVersion: isES300,
|
|
ensurePrecision: {
|
|
requestedFragmentPrecision: options.preferredFragmentPrecision,
|
|
requestedVertexPrecision: options.preferredVertexPrecision,
|
|
maxSupportedVertexPrecision: "highp",
|
|
maxSupportedFragmentPrecision: getMaxFragmentPrecision()
|
|
},
|
|
setProgramName: {
|
|
name: options.name
|
|
},
|
|
addProgramDefines: isES300,
|
|
insertVersion: isES300
|
|
};
|
|
let fragment = options.fragment;
|
|
let vertex = options.vertex;
|
|
Object.keys(processes).forEach((processKey) => {
|
|
const processOptions = preprocessorOptions[processKey];
|
|
fragment = processes[processKey](fragment, processOptions, true);
|
|
vertex = processes[processKey](vertex, processOptions, false);
|
|
});
|
|
this.fragment = fragment;
|
|
this.vertex = vertex;
|
|
this._key = createIdFromString(`${this.vertex}:${this.fragment}`, "gl-program");
|
|
}
|
|
/** destroys the program */
|
|
destroy() {
|
|
this.fragment = null;
|
|
this.vertex = null;
|
|
this._attributeData = null;
|
|
this._uniformData = null;
|
|
this._uniformBlockData = null;
|
|
this.transformFeedbackVaryings = null;
|
|
}
|
|
/**
|
|
* Helper function that creates a program for a given source.
|
|
* It will check the program cache if the program has already been created.
|
|
* If it has that one will be returned, if not a new one will be created and cached.
|
|
* @param options - The options for the program.
|
|
* @returns A program using the same source
|
|
*/
|
|
static from(options) {
|
|
const key = `${options.vertex}:${options.fragment}`;
|
|
if (!programCache$1[key]) {
|
|
programCache$1[key] = new _GlProgram(options);
|
|
}
|
|
return programCache$1[key];
|
|
}
|
|
};
|
|
/** The default options used by the program. */
|
|
_GlProgram.defaultOptions = {
|
|
preferredVertexPrecision: "highp",
|
|
preferredFragmentPrecision: "mediump"
|
|
};
|
|
let GlProgram = _GlProgram;
|
|
|
|
"use strict";
|
|
const attributeFormatData = {
|
|
uint8x2: { size: 2, stride: 2, normalised: false },
|
|
uint8x4: { size: 4, stride: 4, normalised: false },
|
|
sint8x2: { size: 2, stride: 2, normalised: false },
|
|
sint8x4: { size: 4, stride: 4, normalised: false },
|
|
unorm8x2: { size: 2, stride: 2, normalised: true },
|
|
unorm8x4: { size: 4, stride: 4, normalised: true },
|
|
snorm8x2: { size: 2, stride: 2, normalised: true },
|
|
snorm8x4: { size: 4, stride: 4, normalised: true },
|
|
uint16x2: { size: 2, stride: 4, normalised: false },
|
|
uint16x4: { size: 4, stride: 8, normalised: false },
|
|
sint16x2: { size: 2, stride: 4, normalised: false },
|
|
sint16x4: { size: 4, stride: 8, normalised: false },
|
|
unorm16x2: { size: 2, stride: 4, normalised: true },
|
|
unorm16x4: { size: 4, stride: 8, normalised: true },
|
|
snorm16x2: { size: 2, stride: 4, normalised: true },
|
|
snorm16x4: { size: 4, stride: 8, normalised: true },
|
|
float16x2: { size: 2, stride: 4, normalised: false },
|
|
float16x4: { size: 4, stride: 8, normalised: false },
|
|
float32: { size: 1, stride: 4, normalised: false },
|
|
float32x2: { size: 2, stride: 8, normalised: false },
|
|
float32x3: { size: 3, stride: 12, normalised: false },
|
|
float32x4: { size: 4, stride: 16, normalised: false },
|
|
uint32: { size: 1, stride: 4, normalised: false },
|
|
uint32x2: { size: 2, stride: 8, normalised: false },
|
|
uint32x3: { size: 3, stride: 12, normalised: false },
|
|
uint32x4: { size: 4, stride: 16, normalised: false },
|
|
sint32: { size: 1, stride: 4, normalised: false },
|
|
sint32x2: { size: 2, stride: 8, normalised: false },
|
|
sint32x3: { size: 3, stride: 12, normalised: false },
|
|
sint32x4: { size: 4, stride: 16, normalised: false }
|
|
};
|
|
function getAttributeInfoFromFormat(format) {
|
|
var _a;
|
|
return (_a = attributeFormatData[format]) != null ? _a : attributeFormatData.float32;
|
|
}
|
|
|
|
"use strict";
|
|
const WGSL_TO_VERTEX_TYPES = {
|
|
f32: "float32",
|
|
"vec2<f32>": "float32x2",
|
|
"vec3<f32>": "float32x3",
|
|
"vec4<f32>": "float32x4",
|
|
vec2f: "float32x2",
|
|
vec3f: "float32x3",
|
|
vec4f: "float32x4",
|
|
i32: "sint32",
|
|
"vec2<i32>": "sint32x2",
|
|
"vec3<i32>": "sint32x3",
|
|
"vec4<i32>": "sint32x4",
|
|
u32: "uint32",
|
|
"vec2<u32>": "uint32x2",
|
|
"vec3<u32>": "uint32x3",
|
|
"vec4<u32>": "uint32x4",
|
|
bool: "uint32",
|
|
"vec2<bool>": "uint32x2",
|
|
"vec3<bool>": "uint32x3",
|
|
"vec4<bool>": "uint32x4"
|
|
};
|
|
function extractAttributesFromGpuProgram({ source, entryPoint }) {
|
|
var _a;
|
|
const results = {};
|
|
const mainVertStart = source.indexOf(`fn ${entryPoint}`);
|
|
if (mainVertStart !== -1) {
|
|
const arrowFunctionStart = source.indexOf("->", mainVertStart);
|
|
if (arrowFunctionStart !== -1) {
|
|
const functionArgsSubstring = source.substring(mainVertStart, arrowFunctionStart);
|
|
const inputsRegex = /@location\((\d+)\)\s+([a-zA-Z0-9_]+)\s*:\s*([a-zA-Z0-9_<>]+)(?:,|\s|$)/g;
|
|
let match;
|
|
while ((match = inputsRegex.exec(functionArgsSubstring)) !== null) {
|
|
const format = (_a = WGSL_TO_VERTEX_TYPES[match[3]]) != null ? _a : "float32";
|
|
results[match[2]] = {
|
|
location: parseInt(match[1], 10),
|
|
format,
|
|
stride: getAttributeInfoFromFormat(format).stride,
|
|
offset: 0,
|
|
instance: false,
|
|
start: 0
|
|
};
|
|
}
|
|
}
|
|
}
|
|
return results;
|
|
}
|
|
|
|
"use strict";
|
|
function extractStructAndGroups(wgsl) {
|
|
var _a, _b, _c;
|
|
const linePattern = /(^|[^/])@(group|binding)\(\d+\)[^;]+;/g;
|
|
const groupPattern = /@group\((\d+)\)/;
|
|
const bindingPattern = /@binding\((\d+)\)/;
|
|
const namePattern = /var(<[^>]+>)? (\w+)/;
|
|
const typePattern = /:\s*(\w+)/;
|
|
const structPattern = /struct\s+(\w+)\s*{([^}]+)}/g;
|
|
const structMemberPattern = /(\w+)\s*:\s*([\w\<\>]+)/g;
|
|
const structName = /struct\s+(\w+)/;
|
|
const groups = (_a = wgsl.match(linePattern)) == null ? void 0 : _a.map((item) => ({
|
|
group: parseInt(item.match(groupPattern)[1], 10),
|
|
binding: parseInt(item.match(bindingPattern)[1], 10),
|
|
name: item.match(namePattern)[2],
|
|
isUniform: item.match(namePattern)[1] === "<uniform>",
|
|
type: item.match(typePattern)[1]
|
|
}));
|
|
if (!groups) {
|
|
return {
|
|
groups: [],
|
|
structs: []
|
|
};
|
|
}
|
|
const structs = (_c = (_b = wgsl.match(structPattern)) == null ? void 0 : _b.map((struct) => {
|
|
const name = struct.match(structName)[1];
|
|
const members = struct.match(structMemberPattern).reduce((acc, member) => {
|
|
const [name2, type] = member.split(":");
|
|
acc[name2.trim()] = type.trim();
|
|
return acc;
|
|
}, {});
|
|
if (!members) {
|
|
return null;
|
|
}
|
|
return { name, members };
|
|
}).filter(({ name }) => groups.some((group) => group.type === name))) != null ? _c : [];
|
|
return {
|
|
groups,
|
|
structs
|
|
};
|
|
}
|
|
|
|
"use strict";
|
|
var ShaderStage = /* @__PURE__ */ ((ShaderStage2) => {
|
|
ShaderStage2[ShaderStage2["VERTEX"] = 1] = "VERTEX";
|
|
ShaderStage2[ShaderStage2["FRAGMENT"] = 2] = "FRAGMENT";
|
|
ShaderStage2[ShaderStage2["COMPUTE"] = 4] = "COMPUTE";
|
|
return ShaderStage2;
|
|
})(ShaderStage || {});
|
|
|
|
"use strict";
|
|
function generateGpuLayoutGroups({ groups }) {
|
|
const layout = [];
|
|
for (let i = 0; i < groups.length; i++) {
|
|
const group = groups[i];
|
|
if (!layout[group.group]) {
|
|
layout[group.group] = [];
|
|
}
|
|
if (group.isUniform) {
|
|
layout[group.group].push({
|
|
binding: group.binding,
|
|
visibility: ShaderStage.VERTEX | ShaderStage.FRAGMENT,
|
|
buffer: {
|
|
type: "uniform"
|
|
}
|
|
});
|
|
} else if (group.type === "sampler") {
|
|
layout[group.group].push({
|
|
binding: group.binding,
|
|
visibility: ShaderStage.FRAGMENT,
|
|
sampler: {
|
|
type: "filtering"
|
|
}
|
|
});
|
|
} else if (group.type === "texture_2d") {
|
|
layout[group.group].push({
|
|
binding: group.binding,
|
|
visibility: ShaderStage.FRAGMENT,
|
|
texture: {
|
|
sampleType: "float",
|
|
viewDimension: "2d",
|
|
multisampled: false
|
|
}
|
|
});
|
|
}
|
|
}
|
|
return layout;
|
|
}
|
|
|
|
"use strict";
|
|
function generateLayoutHash({ groups }) {
|
|
const layout = [];
|
|
for (let i = 0; i < groups.length; i++) {
|
|
const group = groups[i];
|
|
if (!layout[group.group]) {
|
|
layout[group.group] = {};
|
|
}
|
|
layout[group.group][group.name] = group.binding;
|
|
}
|
|
return layout;
|
|
}
|
|
|
|
"use strict";
|
|
function removeStructAndGroupDuplicates(vertexStructsAndGroups, fragmentStructsAndGroups) {
|
|
const structNameSet = /* @__PURE__ */ new Set();
|
|
const dupeGroupKeySet = /* @__PURE__ */ new Set();
|
|
const structs = [...vertexStructsAndGroups.structs, ...fragmentStructsAndGroups.structs].filter((struct) => {
|
|
if (structNameSet.has(struct.name)) {
|
|
return false;
|
|
}
|
|
structNameSet.add(struct.name);
|
|
return true;
|
|
});
|
|
const groups = [...vertexStructsAndGroups.groups, ...fragmentStructsAndGroups.groups].filter((group) => {
|
|
const key = `${group.name}-${group.binding}`;
|
|
if (dupeGroupKeySet.has(key)) {
|
|
return false;
|
|
}
|
|
dupeGroupKeySet.add(key);
|
|
return true;
|
|
});
|
|
return { structs, groups };
|
|
}
|
|
|
|
"use strict";
|
|
const programCache = /* @__PURE__ */ Object.create(null);
|
|
class GpuProgram {
|
|
/**
|
|
* Create a new GpuProgram
|
|
* @param options - The options for the gpu program
|
|
*/
|
|
constructor(options) {
|
|
/**
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._layoutKey = 0;
|
|
/**
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._attributeLocationsKey = 0;
|
|
var _a, _b;
|
|
const { fragment, vertex, layout, gpuLayout, name } = options;
|
|
this.name = name;
|
|
this.fragment = fragment;
|
|
this.vertex = vertex;
|
|
if (fragment.source === vertex.source) {
|
|
const structsAndGroups = extractStructAndGroups(fragment.source);
|
|
this.structsAndGroups = structsAndGroups;
|
|
} else {
|
|
const vertexStructsAndGroups = extractStructAndGroups(vertex.source);
|
|
const fragmentStructsAndGroups = extractStructAndGroups(fragment.source);
|
|
this.structsAndGroups = removeStructAndGroupDuplicates(vertexStructsAndGroups, fragmentStructsAndGroups);
|
|
}
|
|
this.layout = layout != null ? layout : generateLayoutHash(this.structsAndGroups);
|
|
this.gpuLayout = gpuLayout != null ? gpuLayout : generateGpuLayoutGroups(this.structsAndGroups);
|
|
this.autoAssignGlobalUniforms = !!(((_a = this.layout[0]) == null ? void 0 : _a.globalUniforms) !== void 0);
|
|
this.autoAssignLocalUniforms = !!(((_b = this.layout[1]) == null ? void 0 : _b.localUniforms) !== void 0);
|
|
this._generateProgramKey();
|
|
}
|
|
// TODO maker this pure
|
|
_generateProgramKey() {
|
|
const { vertex, fragment } = this;
|
|
const bigKey = vertex.source + fragment.source + vertex.entryPoint + fragment.entryPoint;
|
|
this._layoutKey = createIdFromString(bigKey, "program");
|
|
}
|
|
get attributeData() {
|
|
var _a;
|
|
(_a = this._attributeData) != null ? _a : this._attributeData = extractAttributesFromGpuProgram(this.vertex);
|
|
return this._attributeData;
|
|
}
|
|
/** destroys the program */
|
|
destroy() {
|
|
this.gpuLayout = null;
|
|
this.layout = null;
|
|
this.structsAndGroups = null;
|
|
this.fragment = null;
|
|
this.vertex = null;
|
|
}
|
|
/**
|
|
* Helper function that creates a program for a given source.
|
|
* It will check the program cache if the program has already been created.
|
|
* If it has that one will be returned, if not a new one will be created and cached.
|
|
* @param options - The options for the program.
|
|
* @returns A program using the same source
|
|
*/
|
|
static from(options) {
|
|
const key = `${options.vertex.source}:${options.fragment.source}:${options.fragment.entryPoint}:${options.vertex.entryPoint}`;
|
|
if (!programCache[key]) {
|
|
programCache[key] = new GpuProgram(options);
|
|
}
|
|
return programCache[key];
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function addBits(srcParts, parts, name) {
|
|
if (srcParts) {
|
|
for (const i in srcParts) {
|
|
const id = i.toLocaleLowerCase();
|
|
const part = parts[id];
|
|
if (part) {
|
|
let sanitisedPart = srcParts[i];
|
|
if (i === "header") {
|
|
sanitisedPart = sanitisedPart.replace(/@in\s+[^;]+;\s*/g, "").replace(/@out\s+[^;]+;\s*/g, "");
|
|
}
|
|
if (name) {
|
|
part.push(`//----${name}----//`);
|
|
}
|
|
part.push(sanitisedPart);
|
|
} else {
|
|
warn(`${i} placement hook does not exist in shader`);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const findHooksRx = /\{\{(.*?)\}\}/g;
|
|
function compileHooks(programSrc) {
|
|
var _a, _b;
|
|
const parts = {};
|
|
const partMatches = (_b = (_a = programSrc.match(findHooksRx)) == null ? void 0 : _a.map((hook) => hook.replace(/[{()}]/g, ""))) != null ? _b : [];
|
|
partMatches.forEach((hook) => {
|
|
parts[hook] = [];
|
|
});
|
|
return parts;
|
|
}
|
|
|
|
"use strict";
|
|
function extractInputs(fragmentSource, out) {
|
|
let match;
|
|
const regex = /@in\s+([^;]+);/g;
|
|
while ((match = regex.exec(fragmentSource)) !== null) {
|
|
out.push(match[1]);
|
|
}
|
|
}
|
|
function compileInputs(fragments, template, sort = false) {
|
|
const results = [];
|
|
extractInputs(template, results);
|
|
fragments.forEach((fragment) => {
|
|
if (fragment.header) {
|
|
extractInputs(fragment.header, results);
|
|
}
|
|
});
|
|
const mainInput = results;
|
|
if (sort) {
|
|
mainInput.sort();
|
|
}
|
|
const finalString = mainInput.map((inValue, i) => ` @location(${i}) ${inValue},`).join("\n");
|
|
let cleanedString = template.replace(/@in\s+[^;]+;\s*/g, "");
|
|
cleanedString = cleanedString.replace("{{in}}", `
|
|
${finalString}
|
|
`);
|
|
return cleanedString;
|
|
}
|
|
|
|
"use strict";
|
|
function extractOutputs(fragmentSource, out) {
|
|
let match;
|
|
const regex = /@out\s+([^;]+);/g;
|
|
while ((match = regex.exec(fragmentSource)) !== null) {
|
|
out.push(match[1]);
|
|
}
|
|
}
|
|
function extractVariableName(value) {
|
|
const regex = /\b(\w+)\s*:/g;
|
|
const match = regex.exec(value);
|
|
return match ? match[1] : "";
|
|
}
|
|
function stripVariable(value) {
|
|
const regex = /@.*?\s+/g;
|
|
return value.replace(regex, "");
|
|
}
|
|
function compileOutputs(fragments, template) {
|
|
const results = [];
|
|
extractOutputs(template, results);
|
|
fragments.forEach((fragment) => {
|
|
if (fragment.header) {
|
|
extractOutputs(fragment.header, results);
|
|
}
|
|
});
|
|
let index = 0;
|
|
const mainStruct = results.sort().map((inValue) => {
|
|
if (inValue.indexOf("builtin") > -1) {
|
|
return inValue;
|
|
}
|
|
return `@location(${index++}) ${inValue}`;
|
|
}).join(",\n");
|
|
const mainStart = results.sort().map((inValue) => ` var ${stripVariable(inValue)};`).join("\n");
|
|
const mainEnd = `return VSOutput(
|
|
${results.sort().map((inValue) => ` ${extractVariableName(inValue)}`).join(",\n")});`;
|
|
let compiledCode = template.replace(/@out\s+[^;]+;\s*/g, "");
|
|
compiledCode = compiledCode.replace("{{struct}}", `
|
|
${mainStruct}
|
|
`);
|
|
compiledCode = compiledCode.replace("{{start}}", `
|
|
${mainStart}
|
|
`);
|
|
compiledCode = compiledCode.replace("{{return}}", `
|
|
${mainEnd}
|
|
`);
|
|
return compiledCode;
|
|
}
|
|
|
|
"use strict";
|
|
function injectBits(templateSrc, fragmentParts) {
|
|
let out = templateSrc;
|
|
for (const i in fragmentParts) {
|
|
const parts = fragmentParts[i];
|
|
const toInject = parts.join("\n");
|
|
if (toInject.length) {
|
|
out = out.replace(`{{${i}}}`, `//-----${i} START-----//
|
|
${parts.join("\n")}
|
|
//----${i} FINISH----//`);
|
|
} else {
|
|
out = out.replace(`{{${i}}}`, "");
|
|
}
|
|
}
|
|
return out;
|
|
}
|
|
|
|
"use strict";
|
|
const cacheMap = /* @__PURE__ */ Object.create(null);
|
|
const bitCacheMap = /* @__PURE__ */ new Map();
|
|
let CACHE_UID = 0;
|
|
function compileHighShader({
|
|
template,
|
|
bits
|
|
}) {
|
|
const cacheId = generateCacheId(template, bits);
|
|
if (cacheMap[cacheId])
|
|
return cacheMap[cacheId];
|
|
const { vertex, fragment } = compileInputsAndOutputs(template, bits);
|
|
cacheMap[cacheId] = compileBits(vertex, fragment, bits);
|
|
return cacheMap[cacheId];
|
|
}
|
|
function compileHighShaderGl({
|
|
template,
|
|
bits
|
|
}) {
|
|
const cacheId = generateCacheId(template, bits);
|
|
if (cacheMap[cacheId])
|
|
return cacheMap[cacheId];
|
|
cacheMap[cacheId] = compileBits(template.vertex, template.fragment, bits);
|
|
return cacheMap[cacheId];
|
|
}
|
|
function compileInputsAndOutputs(template, bits) {
|
|
const vertexFragments = bits.map((shaderBit) => shaderBit.vertex).filter((v) => !!v);
|
|
const fragmentFragments = bits.map((shaderBit) => shaderBit.fragment).filter((v) => !!v);
|
|
let compiledVertex = compileInputs(vertexFragments, template.vertex, true);
|
|
compiledVertex = compileOutputs(vertexFragments, compiledVertex);
|
|
const compiledFragment = compileInputs(fragmentFragments, template.fragment, true);
|
|
return {
|
|
vertex: compiledVertex,
|
|
fragment: compiledFragment
|
|
};
|
|
}
|
|
function generateCacheId(template, bits) {
|
|
return bits.map((highFragment) => {
|
|
if (!bitCacheMap.has(highFragment)) {
|
|
bitCacheMap.set(highFragment, CACHE_UID++);
|
|
}
|
|
return bitCacheMap.get(highFragment);
|
|
}).sort((a, b) => a - b).join("-") + template.vertex + template.fragment;
|
|
}
|
|
function compileBits(vertex, fragment, bits) {
|
|
const vertexParts = compileHooks(vertex);
|
|
const fragmentParts = compileHooks(fragment);
|
|
bits.forEach((shaderBit) => {
|
|
addBits(shaderBit.vertex, vertexParts, shaderBit.name);
|
|
addBits(shaderBit.fragment, fragmentParts, shaderBit.name);
|
|
});
|
|
return {
|
|
vertex: injectBits(vertex, vertexParts),
|
|
fragment: injectBits(fragment, fragmentParts)
|
|
};
|
|
}
|
|
|
|
"use strict";
|
|
const vertexGPUTemplate = (
|
|
/* wgsl */
|
|
`
|
|
@in aPosition: vec2<f32>;
|
|
@in aUV: vec2<f32>;
|
|
|
|
@out @builtin(position) vPosition: vec4<f32>;
|
|
@out vUV : vec2<f32>;
|
|
@out vColor : vec4<f32>;
|
|
|
|
{{header}}
|
|
|
|
struct VSOutput {
|
|
{{struct}}
|
|
};
|
|
|
|
@vertex
|
|
fn main( {{in}} ) -> VSOutput {
|
|
|
|
var worldTransformMatrix = globalUniforms.uWorldTransformMatrix;
|
|
var modelMatrix = mat3x3<f32>(
|
|
1.0, 0.0, 0.0,
|
|
0.0, 1.0, 0.0,
|
|
0.0, 0.0, 1.0
|
|
);
|
|
var position = aPosition;
|
|
var uv = aUV;
|
|
|
|
{{start}}
|
|
|
|
vColor = vec4<f32>(1., 1., 1., 1.);
|
|
|
|
{{main}}
|
|
|
|
vUV = uv;
|
|
|
|
var modelViewProjectionMatrix = globalUniforms.uProjectionMatrix * worldTransformMatrix * modelMatrix;
|
|
|
|
vPosition = vec4<f32>((modelViewProjectionMatrix * vec3<f32>(position, 1.0)).xy, 0.0, 1.0);
|
|
|
|
vColor *= globalUniforms.uWorldColorAlpha;
|
|
|
|
{{end}}
|
|
|
|
{{return}}
|
|
};
|
|
`
|
|
);
|
|
const fragmentGPUTemplate = (
|
|
/* wgsl */
|
|
`
|
|
@in vUV : vec2<f32>;
|
|
@in vColor : vec4<f32>;
|
|
|
|
{{header}}
|
|
|
|
@fragment
|
|
fn main(
|
|
{{in}}
|
|
) -> @location(0) vec4<f32> {
|
|
|
|
{{start}}
|
|
|
|
var outColor:vec4<f32>;
|
|
|
|
{{main}}
|
|
|
|
var finalColor:vec4<f32> = outColor * vColor;
|
|
|
|
{{end}}
|
|
|
|
return finalColor;
|
|
};
|
|
`
|
|
);
|
|
const vertexGlTemplate = (
|
|
/* glsl */
|
|
`
|
|
in vec2 aPosition;
|
|
in vec2 aUV;
|
|
|
|
out vec4 vColor;
|
|
out vec2 vUV;
|
|
|
|
{{header}}
|
|
|
|
void main(void){
|
|
|
|
mat3 worldTransformMatrix = uWorldTransformMatrix;
|
|
mat3 modelMatrix = mat3(
|
|
1.0, 0.0, 0.0,
|
|
0.0, 1.0, 0.0,
|
|
0.0, 0.0, 1.0
|
|
);
|
|
vec2 position = aPosition;
|
|
vec2 uv = aUV;
|
|
|
|
{{start}}
|
|
|
|
vColor = vec4(1.);
|
|
|
|
{{main}}
|
|
|
|
vUV = uv;
|
|
|
|
mat3 modelViewProjectionMatrix = uProjectionMatrix * worldTransformMatrix * modelMatrix;
|
|
|
|
gl_Position = vec4((modelViewProjectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0);
|
|
|
|
vColor *= uWorldColorAlpha;
|
|
|
|
{{end}}
|
|
}
|
|
`
|
|
);
|
|
const fragmentGlTemplate = (
|
|
/* glsl */
|
|
`
|
|
|
|
in vec4 vColor;
|
|
in vec2 vUV;
|
|
|
|
out vec4 finalColor;
|
|
|
|
{{header}}
|
|
|
|
void main(void) {
|
|
|
|
{{start}}
|
|
|
|
vec4 outColor;
|
|
|
|
{{main}}
|
|
|
|
finalColor = outColor * vColor;
|
|
|
|
{{end}}
|
|
}
|
|
`
|
|
);
|
|
|
|
"use strict";
|
|
const globalUniformsBit = {
|
|
name: "global-uniforms-bit",
|
|
vertex: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
struct GlobalUniforms {
|
|
uProjectionMatrix:mat3x3<f32>,
|
|
uWorldTransformMatrix:mat3x3<f32>,
|
|
uWorldColorAlpha: vec4<f32>,
|
|
uResolution: vec2<f32>,
|
|
}
|
|
|
|
@group(0) @binding(0) var<uniform> globalUniforms : GlobalUniforms;
|
|
`
|
|
)
|
|
}
|
|
};
|
|
const globalUniformsUBOBitGl = {
|
|
name: "global-uniforms-ubo-bit",
|
|
vertex: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
uniform globalUniforms {
|
|
mat3 uProjectionMatrix;
|
|
mat3 uWorldTransformMatrix;
|
|
vec4 uWorldColorAlpha;
|
|
vec2 uResolution;
|
|
};
|
|
`
|
|
)
|
|
}
|
|
};
|
|
const globalUniformsBitGl = {
|
|
name: "global-uniforms-bit",
|
|
vertex: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
uniform mat3 uProjectionMatrix;
|
|
uniform mat3 uWorldTransformMatrix;
|
|
uniform vec4 uWorldColorAlpha;
|
|
uniform vec2 uResolution;
|
|
`
|
|
)
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$X = Object.defineProperty;
|
|
var __getOwnPropSymbols$X = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$X = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$X = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$X = (obj, key, value) => key in obj ? __defProp$X(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$X = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$X.call(b, prop))
|
|
__defNormalProp$X(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$X)
|
|
for (var prop of __getOwnPropSymbols$X(b)) {
|
|
if (__propIsEnum$X.call(b, prop))
|
|
__defNormalProp$X(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
function compileHighShaderGpuProgram({ bits, name }) {
|
|
const source = compileHighShader({
|
|
template: {
|
|
fragment: fragmentGPUTemplate,
|
|
vertex: vertexGPUTemplate
|
|
},
|
|
bits: [
|
|
globalUniformsBit,
|
|
...bits
|
|
]
|
|
});
|
|
return GpuProgram.from({
|
|
name,
|
|
vertex: {
|
|
source: source.vertex,
|
|
entryPoint: "main"
|
|
},
|
|
fragment: {
|
|
source: source.fragment,
|
|
entryPoint: "main"
|
|
}
|
|
});
|
|
}
|
|
function compileHighShaderGlProgram({ bits, name }) {
|
|
return new GlProgram(__spreadValues$X({
|
|
name
|
|
}, compileHighShaderGl({
|
|
template: {
|
|
vertex: vertexGlTemplate,
|
|
fragment: fragmentGlTemplate
|
|
},
|
|
bits: [
|
|
globalUniformsBitGl,
|
|
...bits
|
|
]
|
|
})));
|
|
}
|
|
|
|
"use strict";
|
|
const colorBit = {
|
|
name: "color-bit",
|
|
vertex: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
@in aColor: vec4<f32>;
|
|
`
|
|
),
|
|
main: (
|
|
/* wgsl */
|
|
`
|
|
vColor *= vec4<f32>(aColor.rgb * aColor.a, aColor.a);
|
|
`
|
|
)
|
|
}
|
|
};
|
|
const colorBitGl = {
|
|
name: "color-bit",
|
|
vertex: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
in vec4 aColor;
|
|
`
|
|
),
|
|
main: (
|
|
/* glsl */
|
|
`
|
|
vColor *= vec4(aColor.rgb * aColor.a, aColor.a);
|
|
`
|
|
)
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const textureBatchBitGpuCache = {};
|
|
function generateBindingSrc(maxTextures) {
|
|
const src = [];
|
|
if (maxTextures === 1) {
|
|
src.push("@group(1) @binding(0) var textureSource1: texture_2d<f32>;");
|
|
src.push("@group(1) @binding(1) var textureSampler1: sampler;");
|
|
} else {
|
|
let bindingIndex = 0;
|
|
for (let i = 0; i < maxTextures; i++) {
|
|
src.push(`@group(1) @binding(${bindingIndex++}) var textureSource${i + 1}: texture_2d<f32>;`);
|
|
src.push(`@group(1) @binding(${bindingIndex++}) var textureSampler${i + 1}: sampler;`);
|
|
}
|
|
}
|
|
return src.join("\n");
|
|
}
|
|
function generateSampleSrc(maxTextures) {
|
|
const src = [];
|
|
if (maxTextures === 1) {
|
|
src.push("outColor = textureSampleGrad(textureSource1, textureSampler1, vUV, uvDx, uvDy);");
|
|
} else {
|
|
src.push("switch vTextureId {");
|
|
for (let i = 0; i < maxTextures; i++) {
|
|
if (i === maxTextures - 1) {
|
|
src.push(` default:{`);
|
|
} else {
|
|
src.push(` case ${i}:{`);
|
|
}
|
|
src.push(` outColor = textureSampleGrad(textureSource${i + 1}, textureSampler${i + 1}, vUV, uvDx, uvDy);`);
|
|
src.push(` break;}`);
|
|
}
|
|
src.push(`}`);
|
|
}
|
|
return src.join("\n");
|
|
}
|
|
function generateTextureBatchBit(maxTextures) {
|
|
if (!textureBatchBitGpuCache[maxTextures]) {
|
|
textureBatchBitGpuCache[maxTextures] = {
|
|
name: "texture-batch-bit",
|
|
vertex: {
|
|
header: `
|
|
@in aTextureIdAndRound: vec2<u32>;
|
|
@out @interpolate(flat) vTextureId : u32;
|
|
`,
|
|
main: `
|
|
vTextureId = aTextureIdAndRound.y;
|
|
`,
|
|
end: `
|
|
if(aTextureIdAndRound.x == 1)
|
|
{
|
|
vPosition = vec4<f32>(roundPixels(vPosition.xy, globalUniforms.uResolution), vPosition.zw);
|
|
}
|
|
`
|
|
},
|
|
fragment: {
|
|
header: `
|
|
@in @interpolate(flat) vTextureId: u32;
|
|
|
|
${generateBindingSrc(maxTextures)}
|
|
`,
|
|
main: `
|
|
var uvDx = dpdx(vUV);
|
|
var uvDy = dpdy(vUV);
|
|
|
|
${generateSampleSrc(maxTextures)}
|
|
`
|
|
}
|
|
};
|
|
}
|
|
return textureBatchBitGpuCache[maxTextures];
|
|
}
|
|
const textureBatchBitGlCache = {};
|
|
function generateSampleGlSrc(maxTextures) {
|
|
const src = [];
|
|
for (let i = 0; i < maxTextures; i++) {
|
|
if (i > 0) {
|
|
src.push("else");
|
|
}
|
|
if (i < maxTextures - 1) {
|
|
src.push(`if(vTextureId < ${i}.5)`);
|
|
}
|
|
src.push("{");
|
|
src.push(` outColor = texture(uTextures[${i}], vUV);`);
|
|
src.push("}");
|
|
}
|
|
return src.join("\n");
|
|
}
|
|
function generateTextureBatchBitGl(maxTextures) {
|
|
if (!textureBatchBitGlCache[maxTextures]) {
|
|
textureBatchBitGlCache[maxTextures] = {
|
|
name: "texture-batch-bit",
|
|
vertex: {
|
|
header: `
|
|
in vec2 aTextureIdAndRound;
|
|
out float vTextureId;
|
|
|
|
`,
|
|
main: `
|
|
vTextureId = aTextureIdAndRound.y;
|
|
`,
|
|
end: `
|
|
if(aTextureIdAndRound.x == 1.)
|
|
{
|
|
gl_Position.xy = roundPixels(gl_Position.xy, uResolution);
|
|
}
|
|
`
|
|
},
|
|
fragment: {
|
|
header: `
|
|
in float vTextureId;
|
|
|
|
uniform sampler2D uTextures[${maxTextures}];
|
|
|
|
`,
|
|
main: `
|
|
|
|
${generateSampleGlSrc(maxTextures)}
|
|
`
|
|
}
|
|
};
|
|
}
|
|
return textureBatchBitGlCache[maxTextures];
|
|
}
|
|
|
|
"use strict";
|
|
const roundPixelsBit = {
|
|
name: "round-pixels-bit",
|
|
vertex: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
fn roundPixels(position: vec2<f32>, targetSize: vec2<f32>) -> vec2<f32>
|
|
{
|
|
return (floor(((position * 0.5 + 0.5) * targetSize) + 0.5) / targetSize) * 2.0 - 1.0;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
};
|
|
const roundPixelsBitGl = {
|
|
name: "round-pixels-bit",
|
|
vertex: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
vec2 roundPixels(vec2 position, vec2 targetSize)
|
|
{
|
|
return (floor(((position * 0.5 + 0.5) * targetSize) + 0.5) / targetSize) * 2.0 - 1.0;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const UNIFORM_TYPES_VALUES = [
|
|
"f32",
|
|
"i32",
|
|
"vec2<f32>",
|
|
"vec3<f32>",
|
|
"vec4<f32>",
|
|
"mat2x2<f32>",
|
|
"mat3x3<f32>",
|
|
"mat4x4<f32>",
|
|
"mat3x2<f32>",
|
|
"mat4x2<f32>",
|
|
"mat2x3<f32>",
|
|
"mat4x3<f32>",
|
|
"mat2x4<f32>",
|
|
"mat3x4<f32>"
|
|
];
|
|
const UNIFORM_TYPES_MAP = UNIFORM_TYPES_VALUES.reduce((acc, type) => {
|
|
acc[type] = true;
|
|
return acc;
|
|
}, {});
|
|
|
|
"use strict";
|
|
function getDefaultUniformValue(type, size) {
|
|
switch (type) {
|
|
case "f32":
|
|
return 0;
|
|
case "vec2<f32>":
|
|
return new Float32Array(2 * size);
|
|
case "vec3<f32>":
|
|
return new Float32Array(3 * size);
|
|
case "vec4<f32>":
|
|
return new Float32Array(4 * size);
|
|
case "mat2x2<f32>":
|
|
return new Float32Array([
|
|
1,
|
|
0,
|
|
0,
|
|
1
|
|
]);
|
|
case "mat3x3<f32>":
|
|
return new Float32Array([
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
1
|
|
]);
|
|
case "mat4x4<f32>":
|
|
return new Float32Array([
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1
|
|
]);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$W = Object.defineProperty;
|
|
var __getOwnPropSymbols$W = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$W = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$W = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$W = (obj, key, value) => key in obj ? __defProp$W(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$W = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$W.call(b, prop))
|
|
__defNormalProp$W(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$W)
|
|
for (var prop of __getOwnPropSymbols$W(b)) {
|
|
if (__propIsEnum$W.call(b, prop))
|
|
__defNormalProp$W(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _UniformGroup = class _UniformGroup {
|
|
/**
|
|
* Create a new Uniform group
|
|
* @param uniformStructures - The structures of the uniform group
|
|
* @param options - The optional parameters of this uniform group
|
|
*/
|
|
constructor(uniformStructures, options) {
|
|
/** used internally to know if a uniform group was used in the last render pass */
|
|
this._touched = 0;
|
|
/** a unique id for this uniform group used through the renderer */
|
|
this.uid = uid$1("uniform");
|
|
/** a resource type, used to identify how to handle it when its in a bind group / shader resource */
|
|
this._resourceType = "uniformGroup";
|
|
/** the resource id used internally by the renderer to build bind group keys */
|
|
this._resourceId = uid$1("resource");
|
|
/** used ito identify if this is a uniform group */
|
|
this.isUniformGroup = true;
|
|
/**
|
|
* used to flag if this Uniform groups data is different from what it has stored in its buffer / on the GPU
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._dirtyId = 0;
|
|
// implementing the interface - UniformGroup are not destroyed
|
|
this.destroyed = false;
|
|
var _a, _b;
|
|
options = __spreadValues$W(__spreadValues$W({}, _UniformGroup.defaultOptions), options);
|
|
this.uniformStructures = uniformStructures;
|
|
const uniforms = {};
|
|
for (const i in uniformStructures) {
|
|
const uniformData = uniformStructures[i];
|
|
uniformData.name = i;
|
|
uniformData.size = (_a = uniformData.size) != null ? _a : 1;
|
|
if (!UNIFORM_TYPES_MAP[uniformData.type]) {
|
|
throw new Error(`Uniform type ${uniformData.type} is not supported. Supported uniform types are: ${UNIFORM_TYPES_VALUES.join(", ")}`);
|
|
}
|
|
(_b = uniformData.value) != null ? _b : uniformData.value = getDefaultUniformValue(uniformData.type, uniformData.size);
|
|
uniforms[i] = uniformData.value;
|
|
}
|
|
this.uniforms = uniforms;
|
|
this._dirtyId = 1;
|
|
this.ubo = options.ubo;
|
|
this.isStatic = options.isStatic;
|
|
this._signature = createIdFromString(Object.keys(uniforms).map(
|
|
(i) => `${i}-${uniformStructures[i].type}`
|
|
).join("-"), "uniform-group");
|
|
}
|
|
/** Call this if you want the uniform groups data to be uploaded to the GPU only useful if `isStatic` is true. */
|
|
update() {
|
|
this._dirtyId++;
|
|
}
|
|
};
|
|
/** The default options used by the uniform group. */
|
|
_UniformGroup.defaultOptions = {
|
|
/** if true the UniformGroup is handled as an Uniform buffer object. */
|
|
ubo: false,
|
|
/** if true, then you are responsible for when the data is uploaded to the GPU by calling `update()` */
|
|
isStatic: false
|
|
};
|
|
let UniformGroup = _UniformGroup;
|
|
|
|
"use strict";
|
|
const batchSamplersUniformGroupHash = {};
|
|
function getBatchSamplersUniformGroup(maxTextures) {
|
|
let batchSamplersUniformGroup = batchSamplersUniformGroupHash[maxTextures];
|
|
if (batchSamplersUniformGroup)
|
|
return batchSamplersUniformGroup;
|
|
const sampleValues = new Int32Array(maxTextures);
|
|
for (let i = 0; i < maxTextures; i++) {
|
|
sampleValues[i] = i;
|
|
}
|
|
batchSamplersUniformGroup = batchSamplersUniformGroupHash[maxTextures] = new UniformGroup({
|
|
uTextures: { value: sampleValues, type: `i32`, size: maxTextures }
|
|
}, { isStatic: true });
|
|
return batchSamplersUniformGroup;
|
|
}
|
|
|
|
"use strict";
|
|
var RendererType = /* @__PURE__ */ ((RendererType2) => {
|
|
RendererType2[RendererType2["WEBGL"] = 1] = "WEBGL";
|
|
RendererType2[RendererType2["WEBGPU"] = 2] = "WEBGPU";
|
|
RendererType2[RendererType2["BOTH"] = 3] = "BOTH";
|
|
return RendererType2;
|
|
})(RendererType || {});
|
|
|
|
"use strict";
|
|
var __defProp$V = Object.defineProperty;
|
|
var __getOwnPropSymbols$V = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$V = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$V = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$V = (obj, key, value) => key in obj ? __defProp$V(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$V = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$V.call(b, prop))
|
|
__defNormalProp$V(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$V)
|
|
for (var prop of __getOwnPropSymbols$V(b)) {
|
|
if (__propIsEnum$V.call(b, prop))
|
|
__defNormalProp$V(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$j = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$V.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$V)
|
|
for (var prop of __getOwnPropSymbols$V(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$V.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class Shader extends EventEmitter {
|
|
constructor(options) {
|
|
super();
|
|
/**
|
|
* A record of the uniform groups and resources used by the shader.
|
|
* This is used by WebGL renderer to sync uniform data.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._uniformBindMap = /* @__PURE__ */ Object.create(null);
|
|
this._ownedBindGroups = [];
|
|
let {
|
|
gpuProgram,
|
|
glProgram,
|
|
groups,
|
|
resources,
|
|
compatibleRenderers,
|
|
groupMap
|
|
} = options;
|
|
this.gpuProgram = gpuProgram;
|
|
this.glProgram = glProgram;
|
|
if (compatibleRenderers === void 0) {
|
|
compatibleRenderers = 0;
|
|
if (gpuProgram)
|
|
compatibleRenderers |= RendererType.WEBGPU;
|
|
if (glProgram)
|
|
compatibleRenderers |= RendererType.WEBGL;
|
|
}
|
|
this.compatibleRenderers = compatibleRenderers;
|
|
const nameHash = {};
|
|
if (!resources && !groups) {
|
|
resources = {};
|
|
}
|
|
if (resources && groups) {
|
|
throw new Error("[Shader] Cannot have both resources and groups");
|
|
} else if (!gpuProgram && groups && !groupMap) {
|
|
throw new Error("[Shader] No group map or WebGPU shader provided - consider using resources instead.");
|
|
} else if (!gpuProgram && groups && groupMap) {
|
|
for (const i in groupMap) {
|
|
for (const j in groupMap[i]) {
|
|
const uniformName = groupMap[i][j];
|
|
nameHash[uniformName] = {
|
|
group: i,
|
|
binding: j,
|
|
name: uniformName
|
|
};
|
|
}
|
|
}
|
|
} else if (gpuProgram && groups && !groupMap) {
|
|
const groupData = gpuProgram.structsAndGroups.groups;
|
|
groupMap = {};
|
|
groupData.forEach((data) => {
|
|
groupMap[data.group] = groupMap[data.group] || {};
|
|
groupMap[data.group][data.binding] = data.name;
|
|
nameHash[data.name] = data;
|
|
});
|
|
} else if (resources) {
|
|
groups = {};
|
|
groupMap = {};
|
|
if (gpuProgram) {
|
|
const groupData = gpuProgram.structsAndGroups.groups;
|
|
groupData.forEach((data) => {
|
|
groupMap[data.group] = groupMap[data.group] || {};
|
|
groupMap[data.group][data.binding] = data.name;
|
|
nameHash[data.name] = data;
|
|
});
|
|
}
|
|
let bindTick = 0;
|
|
for (const i in resources) {
|
|
if (nameHash[i])
|
|
continue;
|
|
if (!groups[99]) {
|
|
groups[99] = new BindGroup();
|
|
this._ownedBindGroups.push(groups[99]);
|
|
}
|
|
nameHash[i] = { group: 99, binding: bindTick, name: i };
|
|
groupMap[99] = groupMap[99] || {};
|
|
groupMap[99][bindTick] = i;
|
|
bindTick++;
|
|
}
|
|
for (const i in resources) {
|
|
const name = i;
|
|
let value = resources[i];
|
|
if (!value.source && !value._resourceType) {
|
|
value = new UniformGroup(value);
|
|
}
|
|
const data = nameHash[name];
|
|
if (data) {
|
|
if (!groups[data.group]) {
|
|
groups[data.group] = new BindGroup();
|
|
this._ownedBindGroups.push(groups[data.group]);
|
|
}
|
|
groups[data.group].setResource(value, data.binding);
|
|
}
|
|
}
|
|
}
|
|
this.groups = groups;
|
|
this._uniformBindMap = groupMap;
|
|
this.resources = this._buildResourceAccessor(groups, nameHash);
|
|
}
|
|
/**
|
|
* Sometimes a resource group will be provided later (for example global uniforms)
|
|
* In such cases, this method can be used to let the shader know about the group.
|
|
* @param name - the name of the resource group
|
|
* @param groupIndex - the index of the group (should match the webGPU shader group location)
|
|
* @param bindIndex - the index of the bind point (should match the webGPU shader bind point)
|
|
*/
|
|
addResource(name, groupIndex, bindIndex) {
|
|
var _a, _b;
|
|
(_a = this._uniformBindMap)[groupIndex] || (_a[groupIndex] = {});
|
|
(_b = this._uniformBindMap[groupIndex])[bindIndex] || (_b[bindIndex] = name);
|
|
if (!this.groups[groupIndex]) {
|
|
this.groups[groupIndex] = new BindGroup();
|
|
this._ownedBindGroups.push(this.groups[groupIndex]);
|
|
}
|
|
}
|
|
_buildResourceAccessor(groups, nameHash) {
|
|
const uniformsOut = {};
|
|
for (const i in nameHash) {
|
|
const data = nameHash[i];
|
|
Object.defineProperty(uniformsOut, data.name, {
|
|
get() {
|
|
return groups[data.group].getResource(data.binding);
|
|
},
|
|
set(value) {
|
|
groups[data.group].setResource(value, data.binding);
|
|
}
|
|
});
|
|
}
|
|
return uniformsOut;
|
|
}
|
|
/**
|
|
* Use to destroy the shader when its not longer needed.
|
|
* It will destroy the resources and remove listeners.
|
|
* @param destroyPrograms - if the programs should be destroyed as well.
|
|
* Make sure its not being used by other shaders!
|
|
*/
|
|
destroy(destroyPrograms = false) {
|
|
var _a, _b;
|
|
this.emit("destroy", this);
|
|
if (destroyPrograms) {
|
|
(_a = this.gpuProgram) == null ? void 0 : _a.destroy();
|
|
(_b = this.glProgram) == null ? void 0 : _b.destroy();
|
|
}
|
|
this.gpuProgram = null;
|
|
this.glProgram = null;
|
|
this.removeAllListeners();
|
|
this._uniformBindMap = null;
|
|
this._ownedBindGroups.forEach((bindGroup) => {
|
|
bindGroup.destroy();
|
|
});
|
|
this._ownedBindGroups = null;
|
|
this.resources = null;
|
|
this.groups = null;
|
|
}
|
|
static from(options) {
|
|
const _a = options, { gpu, gl } = _a, rest = __objRest$j(_a, ["gpu", "gl"]);
|
|
let gpuProgram;
|
|
let glProgram;
|
|
if (gpu) {
|
|
gpuProgram = GpuProgram.from(gpu);
|
|
}
|
|
if (gl) {
|
|
glProgram = GlProgram.from(gl);
|
|
}
|
|
return new Shader(__spreadValues$V({
|
|
gpuProgram,
|
|
glProgram
|
|
}, rest));
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class DefaultShader extends Shader {
|
|
constructor(maxTextures) {
|
|
const glProgram = compileHighShaderGlProgram({
|
|
name: "batch",
|
|
bits: [
|
|
colorBitGl,
|
|
generateTextureBatchBitGl(maxTextures),
|
|
roundPixelsBitGl
|
|
]
|
|
});
|
|
const gpuProgram = compileHighShaderGpuProgram({
|
|
name: "batch",
|
|
bits: [
|
|
colorBit,
|
|
generateTextureBatchBit(maxTextures),
|
|
roundPixelsBit
|
|
]
|
|
});
|
|
super({
|
|
glProgram,
|
|
gpuProgram,
|
|
resources: {
|
|
batchSamplers: getBatchSamplersUniformGroup(maxTextures)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
let defaultShader = null;
|
|
const _DefaultBatcher = class _DefaultBatcher extends Batcher {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.geometry = new BatchGeometry();
|
|
this.shader = defaultShader || (defaultShader = new DefaultShader(this.maxTextures));
|
|
this.name = _DefaultBatcher.extension.name;
|
|
/** The size of one attribute. 1 = 32 bit. x, y, u, v, color, textureIdAndRound -> total = 6 */
|
|
this.vertexSize = 6;
|
|
}
|
|
/**
|
|
* Packs the attributes of a DefaultBatchableMeshElement into the provided views.
|
|
* @param element - The DefaultBatchableMeshElement to pack.
|
|
* @param float32View - The Float32Array view to pack into.
|
|
* @param uint32View - The Uint32Array view to pack into.
|
|
* @param index - The starting index in the views.
|
|
* @param textureId - The texture ID to use.
|
|
*/
|
|
packAttributes(element, float32View, uint32View, index, textureId) {
|
|
const textureIdAndRound = textureId << 16 | element.roundPixels & 65535;
|
|
const wt = element.transform;
|
|
const a = wt.a;
|
|
const b = wt.b;
|
|
const c = wt.c;
|
|
const d = wt.d;
|
|
const tx = wt.tx;
|
|
const ty = wt.ty;
|
|
const { positions, uvs } = element;
|
|
const argb = element.color;
|
|
const offset = element.attributeOffset;
|
|
const end = offset + element.attributeSize;
|
|
for (let i = offset; i < end; i++) {
|
|
const i2 = i * 2;
|
|
const x = positions[i2];
|
|
const y = positions[i2 + 1];
|
|
float32View[index++] = a * x + c * y + tx;
|
|
float32View[index++] = d * y + b * x + ty;
|
|
float32View[index++] = uvs[i2];
|
|
float32View[index++] = uvs[i2 + 1];
|
|
uint32View[index++] = argb;
|
|
uint32View[index++] = textureIdAndRound;
|
|
}
|
|
}
|
|
/**
|
|
* Packs the attributes of a DefaultBatchableQuadElement into the provided views.
|
|
* @param element - The DefaultBatchableQuadElement to pack.
|
|
* @param float32View - The Float32Array view to pack into.
|
|
* @param uint32View - The Uint32Array view to pack into.
|
|
* @param index - The starting index in the views.
|
|
* @param textureId - The texture ID to use.
|
|
*/
|
|
packQuadAttributes(element, float32View, uint32View, index, textureId) {
|
|
const texture = element.texture;
|
|
const wt = element.transform;
|
|
const a = wt.a;
|
|
const b = wt.b;
|
|
const c = wt.c;
|
|
const d = wt.d;
|
|
const tx = wt.tx;
|
|
const ty = wt.ty;
|
|
const bounds = element.bounds;
|
|
const w0 = bounds.maxX;
|
|
const w1 = bounds.minX;
|
|
const h0 = bounds.maxY;
|
|
const h1 = bounds.minY;
|
|
const uvs = texture.uvs;
|
|
const argb = element.color;
|
|
const textureIdAndRound = textureId << 16 | element.roundPixels & 65535;
|
|
float32View[index + 0] = a * w1 + c * h1 + tx;
|
|
float32View[index + 1] = d * h1 + b * w1 + ty;
|
|
float32View[index + 2] = uvs.x0;
|
|
float32View[index + 3] = uvs.y0;
|
|
uint32View[index + 4] = argb;
|
|
uint32View[index + 5] = textureIdAndRound;
|
|
float32View[index + 6] = a * w0 + c * h1 + tx;
|
|
float32View[index + 7] = d * h1 + b * w0 + ty;
|
|
float32View[index + 8] = uvs.x1;
|
|
float32View[index + 9] = uvs.y1;
|
|
uint32View[index + 10] = argb;
|
|
uint32View[index + 11] = textureIdAndRound;
|
|
float32View[index + 12] = a * w0 + c * h0 + tx;
|
|
float32View[index + 13] = d * h0 + b * w0 + ty;
|
|
float32View[index + 14] = uvs.x2;
|
|
float32View[index + 15] = uvs.y2;
|
|
uint32View[index + 16] = argb;
|
|
uint32View[index + 17] = textureIdAndRound;
|
|
float32View[index + 18] = a * w1 + c * h0 + tx;
|
|
float32View[index + 19] = d * h0 + b * w1 + ty;
|
|
float32View[index + 20] = uvs.x3;
|
|
float32View[index + 21] = uvs.y3;
|
|
uint32View[index + 22] = argb;
|
|
uint32View[index + 23] = textureIdAndRound;
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_DefaultBatcher.extension = {
|
|
type: [
|
|
ExtensionType.Batcher
|
|
],
|
|
name: "default"
|
|
};
|
|
let DefaultBatcher = _DefaultBatcher;
|
|
|
|
"use strict";
|
|
function buildUvs(vertices, verticesStride, verticesOffset, uvs, uvsOffset, uvsStride, size, matrix = null) {
|
|
let index = 0;
|
|
verticesOffset *= verticesStride;
|
|
uvsOffset *= uvsStride;
|
|
const a = matrix.a;
|
|
const b = matrix.b;
|
|
const c = matrix.c;
|
|
const d = matrix.d;
|
|
const tx = matrix.tx;
|
|
const ty = matrix.ty;
|
|
while (index < size) {
|
|
const x = vertices[verticesOffset];
|
|
const y = vertices[verticesOffset + 1];
|
|
uvs[uvsOffset] = a * x + c * y + tx;
|
|
uvs[uvsOffset + 1] = b * x + d * y + ty;
|
|
uvsOffset += uvsStride;
|
|
verticesOffset += verticesStride;
|
|
index++;
|
|
}
|
|
}
|
|
function buildSimpleUvs(uvs, uvsOffset, uvsStride, size) {
|
|
let index = 0;
|
|
uvsOffset *= uvsStride;
|
|
while (index < size) {
|
|
uvs[uvsOffset] = 0;
|
|
uvs[uvsOffset + 1] = 0;
|
|
uvsOffset += uvsStride;
|
|
index++;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function transformVertices(vertices, m, offset, stride, size) {
|
|
const a = m.a;
|
|
const b = m.b;
|
|
const c = m.c;
|
|
const d = m.d;
|
|
const tx = m.tx;
|
|
const ty = m.ty;
|
|
offset = offset || 0;
|
|
stride = stride || 2;
|
|
size = size || vertices.length / stride - offset;
|
|
let index = offset * stride;
|
|
for (let i = 0; i < size; i++) {
|
|
const x = vertices[index];
|
|
const y = vertices[index + 1];
|
|
vertices[index] = a * x + c * y + tx;
|
|
vertices[index + 1] = b * x + d * y + ty;
|
|
index += stride;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function multiplyHexColors(color1, color2) {
|
|
if (color1 === 16777215 || !color2)
|
|
return color2;
|
|
if (color2 === 16777215 || !color1)
|
|
return color1;
|
|
const r1 = color1 >> 16 & 255;
|
|
const g1 = color1 >> 8 & 255;
|
|
const b1 = color1 & 255;
|
|
const r2 = color2 >> 16 & 255;
|
|
const g2 = color2 >> 8 & 255;
|
|
const b2 = color2 & 255;
|
|
const r = r1 * r2 / 255;
|
|
const g = g1 * g2 / 255;
|
|
const b = b1 * b2 / 255;
|
|
return (r << 16) + (g << 8) + b;
|
|
}
|
|
|
|
"use strict";
|
|
const identityMatrix = new Matrix();
|
|
class BatchableGraphics {
|
|
constructor() {
|
|
this.packAsQuad = false;
|
|
this.batcherName = "default";
|
|
this.applyTransform = true;
|
|
this.roundPixels = 0;
|
|
this._batcher = null;
|
|
this._batch = null;
|
|
}
|
|
get uvs() {
|
|
return this.geometryData.uvs;
|
|
}
|
|
get positions() {
|
|
return this.geometryData.vertices;
|
|
}
|
|
get indices() {
|
|
return this.geometryData.indices;
|
|
}
|
|
get blendMode() {
|
|
if (this.applyTransform) {
|
|
return this.renderable.groupBlendMode;
|
|
}
|
|
return "normal";
|
|
}
|
|
get color() {
|
|
const rgb = this.baseColor;
|
|
const bgr = rgb >> 16 | rgb & 65280 | (rgb & 255) << 16;
|
|
const renderable = this.renderable;
|
|
if (renderable) {
|
|
return multiplyHexColors(bgr, renderable.groupColor) + (this.alpha * renderable.groupAlpha * 255 << 24);
|
|
}
|
|
return bgr + (this.alpha * 255 << 24);
|
|
}
|
|
get transform() {
|
|
var _a;
|
|
return ((_a = this.renderable) == null ? void 0 : _a.groupTransform) || identityMatrix;
|
|
}
|
|
copyTo(gpuBuffer) {
|
|
gpuBuffer.indexOffset = this.indexOffset;
|
|
gpuBuffer.indexSize = this.indexSize;
|
|
gpuBuffer.attributeOffset = this.attributeOffset;
|
|
gpuBuffer.attributeSize = this.attributeSize;
|
|
gpuBuffer.baseColor = this.baseColor;
|
|
gpuBuffer.alpha = this.alpha;
|
|
gpuBuffer.texture = this.texture;
|
|
gpuBuffer.geometryData = this.geometryData;
|
|
}
|
|
reset() {
|
|
this.applyTransform = true;
|
|
this.renderable = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$U = Object.defineProperty;
|
|
var __defProps$n = Object.defineProperties;
|
|
var __getOwnPropDescs$n = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$U = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$U = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$U = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$U = (obj, key, value) => key in obj ? __defProp$U(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$U = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$U.call(b, prop))
|
|
__defNormalProp$U(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$U)
|
|
for (var prop of __getOwnPropSymbols$U(b)) {
|
|
if (__propIsEnum$U.call(b, prop))
|
|
__defNormalProp$U(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$n = (a, b) => __defProps$n(a, __getOwnPropDescs$n(b));
|
|
const buildCircle = {
|
|
extension: {
|
|
type: ExtensionType.ShapeBuilder,
|
|
name: "circle"
|
|
},
|
|
build(shape, points) {
|
|
let x;
|
|
let y;
|
|
let dx;
|
|
let dy;
|
|
let rx;
|
|
let ry;
|
|
if (shape.type === "circle") {
|
|
const circle = shape;
|
|
x = circle.x;
|
|
y = circle.y;
|
|
rx = ry = circle.radius;
|
|
dx = dy = 0;
|
|
} else if (shape.type === "ellipse") {
|
|
const ellipse = shape;
|
|
x = ellipse.x;
|
|
y = ellipse.y;
|
|
rx = ellipse.halfWidth;
|
|
ry = ellipse.halfHeight;
|
|
dx = dy = 0;
|
|
} else {
|
|
const roundedRect = shape;
|
|
const halfWidth = roundedRect.width / 2;
|
|
const halfHeight = roundedRect.height / 2;
|
|
x = roundedRect.x + halfWidth;
|
|
y = roundedRect.y + halfHeight;
|
|
rx = ry = Math.max(0, Math.min(roundedRect.radius, Math.min(halfWidth, halfHeight)));
|
|
dx = halfWidth - rx;
|
|
dy = halfHeight - ry;
|
|
}
|
|
if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0)) {
|
|
return points;
|
|
}
|
|
const n = Math.ceil(2.3 * Math.sqrt(rx + ry));
|
|
const m = n * 8 + (dx ? 4 : 0) + (dy ? 4 : 0);
|
|
if (m === 0) {
|
|
return points;
|
|
}
|
|
if (n === 0) {
|
|
points[0] = points[6] = x + dx;
|
|
points[1] = points[3] = y + dy;
|
|
points[2] = points[4] = x - dx;
|
|
points[5] = points[7] = y - dy;
|
|
return points;
|
|
}
|
|
let j1 = 0;
|
|
let j2 = n * 4 + (dx ? 2 : 0) + 2;
|
|
let j3 = j2;
|
|
let j4 = m;
|
|
let x0 = dx + rx;
|
|
let y0 = dy;
|
|
let x1 = x + x0;
|
|
let x2 = x - x0;
|
|
let y1 = y + y0;
|
|
points[j1++] = x1;
|
|
points[j1++] = y1;
|
|
points[--j2] = y1;
|
|
points[--j2] = x2;
|
|
if (dy) {
|
|
const y22 = y - y0;
|
|
points[j3++] = x2;
|
|
points[j3++] = y22;
|
|
points[--j4] = y22;
|
|
points[--j4] = x1;
|
|
}
|
|
for (let i = 1; i < n; i++) {
|
|
const a = Math.PI / 2 * (i / n);
|
|
const x02 = dx + Math.cos(a) * rx;
|
|
const y02 = dy + Math.sin(a) * ry;
|
|
const x12 = x + x02;
|
|
const x22 = x - x02;
|
|
const y12 = y + y02;
|
|
const y22 = y - y02;
|
|
points[j1++] = x12;
|
|
points[j1++] = y12;
|
|
points[--j2] = y12;
|
|
points[--j2] = x22;
|
|
points[j3++] = x22;
|
|
points[j3++] = y22;
|
|
points[--j4] = y22;
|
|
points[--j4] = x12;
|
|
}
|
|
x0 = dx;
|
|
y0 = dy + ry;
|
|
x1 = x + x0;
|
|
x2 = x - x0;
|
|
y1 = y + y0;
|
|
const y2 = y - y0;
|
|
points[j1++] = x1;
|
|
points[j1++] = y1;
|
|
points[--j4] = y2;
|
|
points[--j4] = x1;
|
|
if (dx) {
|
|
points[j1++] = x2;
|
|
points[j1++] = y1;
|
|
points[--j4] = y2;
|
|
points[--j4] = x2;
|
|
}
|
|
return points;
|
|
},
|
|
triangulate(points, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
|
|
if (points.length === 0) {
|
|
return;
|
|
}
|
|
let centerX = 0;
|
|
let centerY = 0;
|
|
for (let i = 0; i < points.length; i += 2) {
|
|
centerX += points[i];
|
|
centerY += points[i + 1];
|
|
}
|
|
centerX /= points.length / 2;
|
|
centerY /= points.length / 2;
|
|
let count = verticesOffset;
|
|
vertices[count * verticesStride] = centerX;
|
|
vertices[count * verticesStride + 1] = centerY;
|
|
const centerIndex = count++;
|
|
for (let i = 0; i < points.length; i += 2) {
|
|
vertices[count * verticesStride] = points[i];
|
|
vertices[count * verticesStride + 1] = points[i + 1];
|
|
if (i > 0) {
|
|
indices[indicesOffset++] = count;
|
|
indices[indicesOffset++] = centerIndex;
|
|
indices[indicesOffset++] = count - 1;
|
|
}
|
|
count++;
|
|
}
|
|
indices[indicesOffset++] = centerIndex + 1;
|
|
indices[indicesOffset++] = centerIndex;
|
|
indices[indicesOffset++] = count - 1;
|
|
}
|
|
};
|
|
const buildEllipse = __spreadProps$n(__spreadValues$U({}, buildCircle), { extension: __spreadProps$n(__spreadValues$U({}, buildCircle.extension), { name: "ellipse" }) });
|
|
const buildRoundedRectangle = __spreadProps$n(__spreadValues$U({}, buildCircle), { extension: __spreadProps$n(__spreadValues$U({}, buildCircle.extension), { name: "roundedRectangle" }) });
|
|
|
|
"use strict";
|
|
const closePointEps = 1e-4;
|
|
const curveEps = 1e-4;
|
|
|
|
"use strict";
|
|
function getOrientationOfPoints(points) {
|
|
const m = points.length;
|
|
if (m < 6) {
|
|
return 1;
|
|
}
|
|
let area = 0;
|
|
for (let i = 0, x1 = points[m - 2], y1 = points[m - 1]; i < m; i += 2) {
|
|
const x2 = points[i];
|
|
const y2 = points[i + 1];
|
|
area += (x2 - x1) * (y2 + y1);
|
|
x1 = x2;
|
|
y1 = y2;
|
|
}
|
|
if (area < 0) {
|
|
return -1;
|
|
}
|
|
return 1;
|
|
}
|
|
|
|
"use strict";
|
|
function square(x, y, nx, ny, innerWeight, outerWeight, clockwise, verts) {
|
|
const ix = x - nx * innerWeight;
|
|
const iy = y - ny * innerWeight;
|
|
const ox = x + nx * outerWeight;
|
|
const oy = y + ny * outerWeight;
|
|
let exx;
|
|
let eyy;
|
|
if (clockwise) {
|
|
exx = ny;
|
|
eyy = -nx;
|
|
} else {
|
|
exx = -ny;
|
|
eyy = nx;
|
|
}
|
|
const eix = ix + exx;
|
|
const eiy = iy + eyy;
|
|
const eox = ox + exx;
|
|
const eoy = oy + eyy;
|
|
verts.push(eix, eiy);
|
|
verts.push(eox, eoy);
|
|
return 2;
|
|
}
|
|
function round(cx, cy, sx, sy, ex, ey, verts, clockwise) {
|
|
const cx2p0x = sx - cx;
|
|
const cy2p0y = sy - cy;
|
|
let angle0 = Math.atan2(cx2p0x, cy2p0y);
|
|
let angle1 = Math.atan2(ex - cx, ey - cy);
|
|
if (clockwise && angle0 < angle1) {
|
|
angle0 += Math.PI * 2;
|
|
} else if (!clockwise && angle0 > angle1) {
|
|
angle1 += Math.PI * 2;
|
|
}
|
|
let startAngle = angle0;
|
|
const angleDiff = angle1 - angle0;
|
|
const absAngleDiff = Math.abs(angleDiff);
|
|
const radius = Math.sqrt(cx2p0x * cx2p0x + cy2p0y * cy2p0y);
|
|
const segCount = (15 * absAngleDiff * Math.sqrt(radius) / Math.PI >> 0) + 1;
|
|
const angleInc = angleDiff / segCount;
|
|
startAngle += angleInc;
|
|
if (clockwise) {
|
|
verts.push(cx, cy);
|
|
verts.push(sx, sy);
|
|
for (let i = 1, angle = startAngle; i < segCount; i++, angle += angleInc) {
|
|
verts.push(cx, cy);
|
|
verts.push(
|
|
cx + Math.sin(angle) * radius,
|
|
cy + Math.cos(angle) * radius
|
|
);
|
|
}
|
|
verts.push(cx, cy);
|
|
verts.push(ex, ey);
|
|
} else {
|
|
verts.push(sx, sy);
|
|
verts.push(cx, cy);
|
|
for (let i = 1, angle = startAngle; i < segCount; i++, angle += angleInc) {
|
|
verts.push(
|
|
cx + Math.sin(angle) * radius,
|
|
cy + Math.cos(angle) * radius
|
|
);
|
|
verts.push(cx, cy);
|
|
}
|
|
verts.push(ex, ey);
|
|
verts.push(cx, cy);
|
|
}
|
|
return segCount * 2;
|
|
}
|
|
function buildLine(points, lineStyle, flipAlignment, closed, vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
|
|
const eps = closePointEps;
|
|
if (points.length === 0) {
|
|
return;
|
|
}
|
|
const style = lineStyle;
|
|
let alignment = style.alignment;
|
|
if (lineStyle.alignment !== 0.5) {
|
|
let orientation = getOrientationOfPoints(points);
|
|
if (flipAlignment)
|
|
orientation *= -1;
|
|
alignment = (alignment - 0.5) * orientation + 0.5;
|
|
}
|
|
const firstPoint = new Point(points[0], points[1]);
|
|
const lastPoint = new Point(points[points.length - 2], points[points.length - 1]);
|
|
const closedShape = closed;
|
|
const closedPath = Math.abs(firstPoint.x - lastPoint.x) < eps && Math.abs(firstPoint.y - lastPoint.y) < eps;
|
|
if (closedShape) {
|
|
points = points.slice();
|
|
if (closedPath) {
|
|
points.pop();
|
|
points.pop();
|
|
lastPoint.set(points[points.length - 2], points[points.length - 1]);
|
|
}
|
|
const midPointX = (firstPoint.x + lastPoint.x) * 0.5;
|
|
const midPointY = (lastPoint.y + firstPoint.y) * 0.5;
|
|
points.unshift(midPointX, midPointY);
|
|
points.push(midPointX, midPointY);
|
|
}
|
|
const verts = vertices;
|
|
const length = points.length / 2;
|
|
let indexCount = points.length;
|
|
const indexStart = verts.length / 2;
|
|
const width = style.width / 2;
|
|
const widthSquared = width * width;
|
|
const miterLimitSquared = style.miterLimit * style.miterLimit;
|
|
let x0 = points[0];
|
|
let y0 = points[1];
|
|
let x1 = points[2];
|
|
let y1 = points[3];
|
|
let x2 = 0;
|
|
let y2 = 0;
|
|
let perpX = -(y0 - y1);
|
|
let perpY = x0 - x1;
|
|
let perp1x = 0;
|
|
let perp1y = 0;
|
|
let dist = Math.sqrt(perpX * perpX + perpY * perpY);
|
|
perpX /= dist;
|
|
perpY /= dist;
|
|
perpX *= width;
|
|
perpY *= width;
|
|
const ratio = alignment;
|
|
const innerWeight = (1 - ratio) * 2;
|
|
const outerWeight = ratio * 2;
|
|
if (!closedShape) {
|
|
if (style.cap === "round") {
|
|
indexCount += round(
|
|
x0 - perpX * (innerWeight - outerWeight) * 0.5,
|
|
y0 - perpY * (innerWeight - outerWeight) * 0.5,
|
|
x0 - perpX * innerWeight,
|
|
y0 - perpY * innerWeight,
|
|
x0 + perpX * outerWeight,
|
|
y0 + perpY * outerWeight,
|
|
verts,
|
|
true
|
|
) + 2;
|
|
} else if (style.cap === "square") {
|
|
indexCount += square(x0, y0, perpX, perpY, innerWeight, outerWeight, true, verts);
|
|
}
|
|
}
|
|
verts.push(
|
|
x0 - perpX * innerWeight,
|
|
y0 - perpY * innerWeight
|
|
);
|
|
verts.push(
|
|
x0 + perpX * outerWeight,
|
|
y0 + perpY * outerWeight
|
|
);
|
|
for (let i = 1; i < length - 1; ++i) {
|
|
x0 = points[(i - 1) * 2];
|
|
y0 = points[(i - 1) * 2 + 1];
|
|
x1 = points[i * 2];
|
|
y1 = points[i * 2 + 1];
|
|
x2 = points[(i + 1) * 2];
|
|
y2 = points[(i + 1) * 2 + 1];
|
|
perpX = -(y0 - y1);
|
|
perpY = x0 - x1;
|
|
dist = Math.sqrt(perpX * perpX + perpY * perpY);
|
|
perpX /= dist;
|
|
perpY /= dist;
|
|
perpX *= width;
|
|
perpY *= width;
|
|
perp1x = -(y1 - y2);
|
|
perp1y = x1 - x2;
|
|
dist = Math.sqrt(perp1x * perp1x + perp1y * perp1y);
|
|
perp1x /= dist;
|
|
perp1y /= dist;
|
|
perp1x *= width;
|
|
perp1y *= width;
|
|
const dx0 = x1 - x0;
|
|
const dy0 = y0 - y1;
|
|
const dx1 = x1 - x2;
|
|
const dy1 = y2 - y1;
|
|
const dot = dx0 * dx1 + dy0 * dy1;
|
|
const cross = dy0 * dx1 - dy1 * dx0;
|
|
const clockwise = cross < 0;
|
|
if (Math.abs(cross) < 1e-3 * Math.abs(dot)) {
|
|
verts.push(
|
|
x1 - perpX * innerWeight,
|
|
y1 - perpY * innerWeight
|
|
);
|
|
verts.push(
|
|
x1 + perpX * outerWeight,
|
|
y1 + perpY * outerWeight
|
|
);
|
|
if (dot >= 0) {
|
|
if (style.join === "round") {
|
|
indexCount += round(
|
|
x1,
|
|
y1,
|
|
x1 - perpX * innerWeight,
|
|
y1 - perpY * innerWeight,
|
|
x1 - perp1x * innerWeight,
|
|
y1 - perp1y * innerWeight,
|
|
verts,
|
|
false
|
|
) + 4;
|
|
} else {
|
|
indexCount += 2;
|
|
}
|
|
verts.push(
|
|
x1 - perp1x * outerWeight,
|
|
y1 - perp1y * outerWeight
|
|
);
|
|
verts.push(
|
|
x1 + perp1x * innerWeight,
|
|
y1 + perp1y * innerWeight
|
|
);
|
|
}
|
|
continue;
|
|
}
|
|
const c1 = (-perpX + x0) * (-perpY + y1) - (-perpX + x1) * (-perpY + y0);
|
|
const c2 = (-perp1x + x2) * (-perp1y + y1) - (-perp1x + x1) * (-perp1y + y2);
|
|
const px = (dx0 * c2 - dx1 * c1) / cross;
|
|
const py = (dy1 * c1 - dy0 * c2) / cross;
|
|
const pDist = (px - x1) * (px - x1) + (py - y1) * (py - y1);
|
|
const imx = x1 + (px - x1) * innerWeight;
|
|
const imy = y1 + (py - y1) * innerWeight;
|
|
const omx = x1 - (px - x1) * outerWeight;
|
|
const omy = y1 - (py - y1) * outerWeight;
|
|
const smallerInsideSegmentSq = Math.min(dx0 * dx0 + dy0 * dy0, dx1 * dx1 + dy1 * dy1);
|
|
const insideWeight = clockwise ? innerWeight : outerWeight;
|
|
const smallerInsideDiagonalSq = smallerInsideSegmentSq + insideWeight * insideWeight * widthSquared;
|
|
const insideMiterOk = pDist <= smallerInsideDiagonalSq;
|
|
if (insideMiterOk) {
|
|
if (style.join === "bevel" || pDist / widthSquared > miterLimitSquared) {
|
|
if (clockwise) {
|
|
verts.push(imx, imy);
|
|
verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
|
|
verts.push(imx, imy);
|
|
verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
|
|
} else {
|
|
verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
|
|
verts.push(omx, omy);
|
|
verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
|
|
verts.push(omx, omy);
|
|
}
|
|
indexCount += 2;
|
|
} else if (style.join === "round") {
|
|
if (clockwise) {
|
|
verts.push(imx, imy);
|
|
verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
|
|
indexCount += round(
|
|
x1,
|
|
y1,
|
|
x1 + perpX * outerWeight,
|
|
y1 + perpY * outerWeight,
|
|
x1 + perp1x * outerWeight,
|
|
y1 + perp1y * outerWeight,
|
|
verts,
|
|
true
|
|
) + 4;
|
|
verts.push(imx, imy);
|
|
verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
|
|
} else {
|
|
verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
|
|
verts.push(omx, omy);
|
|
indexCount += round(
|
|
x1,
|
|
y1,
|
|
x1 - perpX * innerWeight,
|
|
y1 - perpY * innerWeight,
|
|
x1 - perp1x * innerWeight,
|
|
y1 - perp1y * innerWeight,
|
|
verts,
|
|
false
|
|
) + 4;
|
|
verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
|
|
verts.push(omx, omy);
|
|
}
|
|
} else {
|
|
verts.push(imx, imy);
|
|
verts.push(omx, omy);
|
|
}
|
|
} else {
|
|
verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
|
|
verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
|
|
if (style.join === "round") {
|
|
if (clockwise) {
|
|
indexCount += round(
|
|
x1,
|
|
y1,
|
|
x1 + perpX * outerWeight,
|
|
y1 + perpY * outerWeight,
|
|
x1 + perp1x * outerWeight,
|
|
y1 + perp1y * outerWeight,
|
|
verts,
|
|
true
|
|
) + 2;
|
|
} else {
|
|
indexCount += round(
|
|
x1,
|
|
y1,
|
|
x1 - perpX * innerWeight,
|
|
y1 - perpY * innerWeight,
|
|
x1 - perp1x * innerWeight,
|
|
y1 - perp1y * innerWeight,
|
|
verts,
|
|
false
|
|
) + 2;
|
|
}
|
|
} else if (style.join === "miter" && pDist / widthSquared <= miterLimitSquared) {
|
|
if (clockwise) {
|
|
verts.push(omx, omy);
|
|
verts.push(omx, omy);
|
|
} else {
|
|
verts.push(imx, imy);
|
|
verts.push(imx, imy);
|
|
}
|
|
indexCount += 2;
|
|
}
|
|
verts.push(x1 - perp1x * innerWeight, y1 - perp1y * innerWeight);
|
|
verts.push(x1 + perp1x * outerWeight, y1 + perp1y * outerWeight);
|
|
indexCount += 2;
|
|
}
|
|
}
|
|
x0 = points[(length - 2) * 2];
|
|
y0 = points[(length - 2) * 2 + 1];
|
|
x1 = points[(length - 1) * 2];
|
|
y1 = points[(length - 1) * 2 + 1];
|
|
perpX = -(y0 - y1);
|
|
perpY = x0 - x1;
|
|
dist = Math.sqrt(perpX * perpX + perpY * perpY);
|
|
perpX /= dist;
|
|
perpY /= dist;
|
|
perpX *= width;
|
|
perpY *= width;
|
|
verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
|
|
verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
|
|
if (!closedShape) {
|
|
if (style.cap === "round") {
|
|
indexCount += round(
|
|
x1 - perpX * (innerWeight - outerWeight) * 0.5,
|
|
y1 - perpY * (innerWeight - outerWeight) * 0.5,
|
|
x1 - perpX * innerWeight,
|
|
y1 - perpY * innerWeight,
|
|
x1 + perpX * outerWeight,
|
|
y1 + perpY * outerWeight,
|
|
verts,
|
|
false
|
|
) + 2;
|
|
} else if (style.cap === "square") {
|
|
indexCount += square(x1, y1, perpX, perpY, innerWeight, outerWeight, false, verts);
|
|
}
|
|
}
|
|
const eps2 = curveEps * curveEps;
|
|
for (let i = indexStart; i < indexCount + indexStart - 2; ++i) {
|
|
x0 = verts[i * 2];
|
|
y0 = verts[i * 2 + 1];
|
|
x1 = verts[(i + 1) * 2];
|
|
y1 = verts[(i + 1) * 2 + 1];
|
|
x2 = verts[(i + 2) * 2];
|
|
y2 = verts[(i + 2) * 2 + 1];
|
|
if (Math.abs(x0 * (y1 - y2) + x1 * (y2 - y0) + x2 * (y0 - y1)) < eps2) {
|
|
continue;
|
|
}
|
|
indices.push(i, i + 1, i + 2);
|
|
}
|
|
}
|
|
|
|
var earcut$2 = {exports: {}};
|
|
|
|
var earcut_1 = earcut$2.exports;
|
|
|
|
'use strict';
|
|
|
|
earcut$2.exports = earcut;
|
|
var _default = earcut$2.exports.default = earcut;
|
|
|
|
function earcut(data, holeIndices, dim) {
|
|
|
|
dim = dim || 2;
|
|
|
|
var hasHoles = holeIndices && holeIndices.length,
|
|
outerLen = hasHoles ? holeIndices[0] * dim : data.length,
|
|
outerNode = linkedList(data, 0, outerLen, dim, true),
|
|
triangles = [];
|
|
|
|
if (!outerNode || outerNode.next === outerNode.prev) return triangles;
|
|
|
|
var minX, minY, maxX, maxY, x, y, invSize;
|
|
|
|
if (hasHoles) outerNode = eliminateHoles(data, holeIndices, outerNode, dim);
|
|
|
|
// if the shape is not too simple, we'll use z-order curve hash later; calculate polygon bbox
|
|
if (data.length > 80 * dim) {
|
|
minX = maxX = data[0];
|
|
minY = maxY = data[1];
|
|
|
|
for (var i = dim; i < outerLen; i += dim) {
|
|
x = data[i];
|
|
y = data[i + 1];
|
|
if (x < minX) minX = x;
|
|
if (y < minY) minY = y;
|
|
if (x > maxX) maxX = x;
|
|
if (y > maxY) maxY = y;
|
|
}
|
|
|
|
// minX, minY and invSize are later used to transform coords into integers for z-order calculation
|
|
invSize = Math.max(maxX - minX, maxY - minY);
|
|
invSize = invSize !== 0 ? 32767 / invSize : 0;
|
|
}
|
|
|
|
earcutLinked(outerNode, triangles, dim, minX, minY, invSize, 0);
|
|
|
|
return triangles;
|
|
}
|
|
|
|
// create a circular doubly linked list from polygon points in the specified winding order
|
|
function linkedList(data, start, end, dim, clockwise) {
|
|
var i, last;
|
|
|
|
if (clockwise === (signedArea(data, start, end, dim) > 0)) {
|
|
for (i = start; i < end; i += dim) last = insertNode(i, data[i], data[i + 1], last);
|
|
} else {
|
|
for (i = end - dim; i >= start; i -= dim) last = insertNode(i, data[i], data[i + 1], last);
|
|
}
|
|
|
|
if (last && equals(last, last.next)) {
|
|
removeNode(last);
|
|
last = last.next;
|
|
}
|
|
|
|
return last;
|
|
}
|
|
|
|
// eliminate colinear or duplicate points
|
|
function filterPoints(start, end) {
|
|
if (!start) return start;
|
|
if (!end) end = start;
|
|
|
|
var p = start,
|
|
again;
|
|
do {
|
|
again = false;
|
|
|
|
if (!p.steiner && (equals(p, p.next) || area(p.prev, p, p.next) === 0)) {
|
|
removeNode(p);
|
|
p = end = p.prev;
|
|
if (p === p.next) break;
|
|
again = true;
|
|
|
|
} else {
|
|
p = p.next;
|
|
}
|
|
} while (again || p !== end);
|
|
|
|
return end;
|
|
}
|
|
|
|
// main ear slicing loop which triangulates a polygon (given as a linked list)
|
|
function earcutLinked(ear, triangles, dim, minX, minY, invSize, pass) {
|
|
if (!ear) return;
|
|
|
|
// interlink polygon nodes in z-order
|
|
if (!pass && invSize) indexCurve(ear, minX, minY, invSize);
|
|
|
|
var stop = ear,
|
|
prev, next;
|
|
|
|
// iterate through ears, slicing them one by one
|
|
while (ear.prev !== ear.next) {
|
|
prev = ear.prev;
|
|
next = ear.next;
|
|
|
|
if (invSize ? isEarHashed(ear, minX, minY, invSize) : isEar(ear)) {
|
|
// cut off the triangle
|
|
triangles.push(prev.i / dim | 0);
|
|
triangles.push(ear.i / dim | 0);
|
|
triangles.push(next.i / dim | 0);
|
|
|
|
removeNode(ear);
|
|
|
|
// skipping the next vertex leads to less sliver triangles
|
|
ear = next.next;
|
|
stop = next.next;
|
|
|
|
continue;
|
|
}
|
|
|
|
ear = next;
|
|
|
|
// if we looped through the whole remaining polygon and can't find any more ears
|
|
if (ear === stop) {
|
|
// try filtering points and slicing again
|
|
if (!pass) {
|
|
earcutLinked(filterPoints(ear), triangles, dim, minX, minY, invSize, 1);
|
|
|
|
// if this didn't work, try curing all small self-intersections locally
|
|
} else if (pass === 1) {
|
|
ear = cureLocalIntersections(filterPoints(ear), triangles, dim);
|
|
earcutLinked(ear, triangles, dim, minX, minY, invSize, 2);
|
|
|
|
// as a last resort, try splitting the remaining polygon into two
|
|
} else if (pass === 2) {
|
|
splitEarcut(ear, triangles, dim, minX, minY, invSize);
|
|
}
|
|
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
// check whether a polygon node forms a valid ear with adjacent nodes
|
|
function isEar(ear) {
|
|
var a = ear.prev,
|
|
b = ear,
|
|
c = ear.next;
|
|
|
|
if (area(a, b, c) >= 0) return false; // reflex, can't be an ear
|
|
|
|
// now make sure we don't have other points inside the potential ear
|
|
var ax = a.x, bx = b.x, cx = c.x, ay = a.y, by = b.y, cy = c.y;
|
|
|
|
// triangle bbox; min & max are calculated like this for speed
|
|
var x0 = ax < bx ? (ax < cx ? ax : cx) : (bx < cx ? bx : cx),
|
|
y0 = ay < by ? (ay < cy ? ay : cy) : (by < cy ? by : cy),
|
|
x1 = ax > bx ? (ax > cx ? ax : cx) : (bx > cx ? bx : cx),
|
|
y1 = ay > by ? (ay > cy ? ay : cy) : (by > cy ? by : cy);
|
|
|
|
var p = c.next;
|
|
while (p !== a) {
|
|
if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1 &&
|
|
pointInTriangle$1(ax, ay, bx, by, cx, cy, p.x, p.y) &&
|
|
area(p.prev, p, p.next) >= 0) return false;
|
|
p = p.next;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
function isEarHashed(ear, minX, minY, invSize) {
|
|
var a = ear.prev,
|
|
b = ear,
|
|
c = ear.next;
|
|
|
|
if (area(a, b, c) >= 0) return false; // reflex, can't be an ear
|
|
|
|
var ax = a.x, bx = b.x, cx = c.x, ay = a.y, by = b.y, cy = c.y;
|
|
|
|
// triangle bbox; min & max are calculated like this for speed
|
|
var x0 = ax < bx ? (ax < cx ? ax : cx) : (bx < cx ? bx : cx),
|
|
y0 = ay < by ? (ay < cy ? ay : cy) : (by < cy ? by : cy),
|
|
x1 = ax > bx ? (ax > cx ? ax : cx) : (bx > cx ? bx : cx),
|
|
y1 = ay > by ? (ay > cy ? ay : cy) : (by > cy ? by : cy);
|
|
|
|
// z-order range for the current triangle bbox;
|
|
var minZ = zOrder(x0, y0, minX, minY, invSize),
|
|
maxZ = zOrder(x1, y1, minX, minY, invSize);
|
|
|
|
var p = ear.prevZ,
|
|
n = ear.nextZ;
|
|
|
|
// look for points inside the triangle in both directions
|
|
while (p && p.z >= minZ && n && n.z <= maxZ) {
|
|
if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1 && p !== a && p !== c &&
|
|
pointInTriangle$1(ax, ay, bx, by, cx, cy, p.x, p.y) && area(p.prev, p, p.next) >= 0) return false;
|
|
p = p.prevZ;
|
|
|
|
if (n.x >= x0 && n.x <= x1 && n.y >= y0 && n.y <= y1 && n !== a && n !== c &&
|
|
pointInTriangle$1(ax, ay, bx, by, cx, cy, n.x, n.y) && area(n.prev, n, n.next) >= 0) return false;
|
|
n = n.nextZ;
|
|
}
|
|
|
|
// look for remaining points in decreasing z-order
|
|
while (p && p.z >= minZ) {
|
|
if (p.x >= x0 && p.x <= x1 && p.y >= y0 && p.y <= y1 && p !== a && p !== c &&
|
|
pointInTriangle$1(ax, ay, bx, by, cx, cy, p.x, p.y) && area(p.prev, p, p.next) >= 0) return false;
|
|
p = p.prevZ;
|
|
}
|
|
|
|
// look for remaining points in increasing z-order
|
|
while (n && n.z <= maxZ) {
|
|
if (n.x >= x0 && n.x <= x1 && n.y >= y0 && n.y <= y1 && n !== a && n !== c &&
|
|
pointInTriangle$1(ax, ay, bx, by, cx, cy, n.x, n.y) && area(n.prev, n, n.next) >= 0) return false;
|
|
n = n.nextZ;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
// go through all polygon nodes and cure small local self-intersections
|
|
function cureLocalIntersections(start, triangles, dim) {
|
|
var p = start;
|
|
do {
|
|
var a = p.prev,
|
|
b = p.next.next;
|
|
|
|
if (!equals(a, b) && intersects(a, p, p.next, b) && locallyInside(a, b) && locallyInside(b, a)) {
|
|
|
|
triangles.push(a.i / dim | 0);
|
|
triangles.push(p.i / dim | 0);
|
|
triangles.push(b.i / dim | 0);
|
|
|
|
// remove two nodes involved
|
|
removeNode(p);
|
|
removeNode(p.next);
|
|
|
|
p = start = b;
|
|
}
|
|
p = p.next;
|
|
} while (p !== start);
|
|
|
|
return filterPoints(p);
|
|
}
|
|
|
|
// try splitting polygon into two and triangulate them independently
|
|
function splitEarcut(start, triangles, dim, minX, minY, invSize) {
|
|
// look for a valid diagonal that divides the polygon into two
|
|
var a = start;
|
|
do {
|
|
var b = a.next.next;
|
|
while (b !== a.prev) {
|
|
if (a.i !== b.i && isValidDiagonal(a, b)) {
|
|
// split the polygon in two by the diagonal
|
|
var c = splitPolygon(a, b);
|
|
|
|
// filter colinear points around the cuts
|
|
a = filterPoints(a, a.next);
|
|
c = filterPoints(c, c.next);
|
|
|
|
// run earcut on each half
|
|
earcutLinked(a, triangles, dim, minX, minY, invSize, 0);
|
|
earcutLinked(c, triangles, dim, minX, minY, invSize, 0);
|
|
return;
|
|
}
|
|
b = b.next;
|
|
}
|
|
a = a.next;
|
|
} while (a !== start);
|
|
}
|
|
|
|
// link every hole into the outer loop, producing a single-ring polygon without holes
|
|
function eliminateHoles(data, holeIndices, outerNode, dim) {
|
|
var queue = [],
|
|
i, len, start, end, list;
|
|
|
|
for (i = 0, len = holeIndices.length; i < len; i++) {
|
|
start = holeIndices[i] * dim;
|
|
end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
|
|
list = linkedList(data, start, end, dim, false);
|
|
if (list === list.next) list.steiner = true;
|
|
queue.push(getLeftmost(list));
|
|
}
|
|
|
|
queue.sort(compareX);
|
|
|
|
// process holes from left to right
|
|
for (i = 0; i < queue.length; i++) {
|
|
outerNode = eliminateHole(queue[i], outerNode);
|
|
}
|
|
|
|
return outerNode;
|
|
}
|
|
|
|
function compareX(a, b) {
|
|
return a.x - b.x;
|
|
}
|
|
|
|
// find a bridge between vertices that connects hole with an outer ring and and link it
|
|
function eliminateHole(hole, outerNode) {
|
|
var bridge = findHoleBridge(hole, outerNode);
|
|
if (!bridge) {
|
|
return outerNode;
|
|
}
|
|
|
|
var bridgeReverse = splitPolygon(bridge, hole);
|
|
|
|
// filter collinear points around the cuts
|
|
filterPoints(bridgeReverse, bridgeReverse.next);
|
|
return filterPoints(bridge, bridge.next);
|
|
}
|
|
|
|
// David Eberly's algorithm for finding a bridge between hole and outer polygon
|
|
function findHoleBridge(hole, outerNode) {
|
|
var p = outerNode,
|
|
hx = hole.x,
|
|
hy = hole.y,
|
|
qx = -Infinity,
|
|
m;
|
|
|
|
// find a segment intersected by a ray from the hole's leftmost point to the left;
|
|
// segment's endpoint with lesser x will be potential connection point
|
|
do {
|
|
if (hy <= p.y && hy >= p.next.y && p.next.y !== p.y) {
|
|
var x = p.x + (hy - p.y) * (p.next.x - p.x) / (p.next.y - p.y);
|
|
if (x <= hx && x > qx) {
|
|
qx = x;
|
|
m = p.x < p.next.x ? p : p.next;
|
|
if (x === hx) return m; // hole touches outer segment; pick leftmost endpoint
|
|
}
|
|
}
|
|
p = p.next;
|
|
} while (p !== outerNode);
|
|
|
|
if (!m) return null;
|
|
|
|
// look for points inside the triangle of hole point, segment intersection and endpoint;
|
|
// if there are no points found, we have a valid connection;
|
|
// otherwise choose the point of the minimum angle with the ray as connection point
|
|
|
|
var stop = m,
|
|
mx = m.x,
|
|
my = m.y,
|
|
tanMin = Infinity,
|
|
tan;
|
|
|
|
p = m;
|
|
|
|
do {
|
|
if (hx >= p.x && p.x >= mx && hx !== p.x &&
|
|
pointInTriangle$1(hy < my ? hx : qx, hy, mx, my, hy < my ? qx : hx, hy, p.x, p.y)) {
|
|
|
|
tan = Math.abs(hy - p.y) / (hx - p.x); // tangential
|
|
|
|
if (locallyInside(p, hole) &&
|
|
(tan < tanMin || (tan === tanMin && (p.x > m.x || (p.x === m.x && sectorContainsSector(m, p)))))) {
|
|
m = p;
|
|
tanMin = tan;
|
|
}
|
|
}
|
|
|
|
p = p.next;
|
|
} while (p !== stop);
|
|
|
|
return m;
|
|
}
|
|
|
|
// whether sector in vertex m contains sector in vertex p in the same coordinates
|
|
function sectorContainsSector(m, p) {
|
|
return area(m.prev, m, p.prev) < 0 && area(p.next, m, m.next) < 0;
|
|
}
|
|
|
|
// interlink polygon nodes in z-order
|
|
function indexCurve(start, minX, minY, invSize) {
|
|
var p = start;
|
|
do {
|
|
if (p.z === 0) p.z = zOrder(p.x, p.y, minX, minY, invSize);
|
|
p.prevZ = p.prev;
|
|
p.nextZ = p.next;
|
|
p = p.next;
|
|
} while (p !== start);
|
|
|
|
p.prevZ.nextZ = null;
|
|
p.prevZ = null;
|
|
|
|
sortLinked(p);
|
|
}
|
|
|
|
// Simon Tatham's linked list merge sort algorithm
|
|
// http://www.chiark.greenend.org.uk/~sgtatham/algorithms/listsort.html
|
|
function sortLinked(list) {
|
|
var i, p, q, e, tail, numMerges, pSize, qSize,
|
|
inSize = 1;
|
|
|
|
do {
|
|
p = list;
|
|
list = null;
|
|
tail = null;
|
|
numMerges = 0;
|
|
|
|
while (p) {
|
|
numMerges++;
|
|
q = p;
|
|
pSize = 0;
|
|
for (i = 0; i < inSize; i++) {
|
|
pSize++;
|
|
q = q.nextZ;
|
|
if (!q) break;
|
|
}
|
|
qSize = inSize;
|
|
|
|
while (pSize > 0 || (qSize > 0 && q)) {
|
|
|
|
if (pSize !== 0 && (qSize === 0 || !q || p.z <= q.z)) {
|
|
e = p;
|
|
p = p.nextZ;
|
|
pSize--;
|
|
} else {
|
|
e = q;
|
|
q = q.nextZ;
|
|
qSize--;
|
|
}
|
|
|
|
if (tail) tail.nextZ = e;
|
|
else list = e;
|
|
|
|
e.prevZ = tail;
|
|
tail = e;
|
|
}
|
|
|
|
p = q;
|
|
}
|
|
|
|
tail.nextZ = null;
|
|
inSize *= 2;
|
|
|
|
} while (numMerges > 1);
|
|
|
|
return list;
|
|
}
|
|
|
|
// z-order of a point given coords and inverse of the longer side of data bbox
|
|
function zOrder(x, y, minX, minY, invSize) {
|
|
// coords are transformed into non-negative 15-bit integer range
|
|
x = (x - minX) * invSize | 0;
|
|
y = (y - minY) * invSize | 0;
|
|
|
|
x = (x | (x << 8)) & 0x00FF00FF;
|
|
x = (x | (x << 4)) & 0x0F0F0F0F;
|
|
x = (x | (x << 2)) & 0x33333333;
|
|
x = (x | (x << 1)) & 0x55555555;
|
|
|
|
y = (y | (y << 8)) & 0x00FF00FF;
|
|
y = (y | (y << 4)) & 0x0F0F0F0F;
|
|
y = (y | (y << 2)) & 0x33333333;
|
|
y = (y | (y << 1)) & 0x55555555;
|
|
|
|
return x | (y << 1);
|
|
}
|
|
|
|
// find the leftmost node of a polygon ring
|
|
function getLeftmost(start) {
|
|
var p = start,
|
|
leftmost = start;
|
|
do {
|
|
if (p.x < leftmost.x || (p.x === leftmost.x && p.y < leftmost.y)) leftmost = p;
|
|
p = p.next;
|
|
} while (p !== start);
|
|
|
|
return leftmost;
|
|
}
|
|
|
|
// check if a point lies within a convex triangle
|
|
function pointInTriangle$1(ax, ay, bx, by, cx, cy, px, py) {
|
|
return (cx - px) * (ay - py) >= (ax - px) * (cy - py) &&
|
|
(ax - px) * (by - py) >= (bx - px) * (ay - py) &&
|
|
(bx - px) * (cy - py) >= (cx - px) * (by - py);
|
|
}
|
|
|
|
// check if a diagonal between two polygon nodes is valid (lies in polygon interior)
|
|
function isValidDiagonal(a, b) {
|
|
return a.next.i !== b.i && a.prev.i !== b.i && !intersectsPolygon(a, b) && // dones't intersect other edges
|
|
(locallyInside(a, b) && locallyInside(b, a) && middleInside(a, b) && // locally visible
|
|
(area(a.prev, a, b.prev) || area(a, b.prev, b)) || // does not create opposite-facing sectors
|
|
equals(a, b) && area(a.prev, a, a.next) > 0 && area(b.prev, b, b.next) > 0); // special zero-length case
|
|
}
|
|
|
|
// signed area of a triangle
|
|
function area(p, q, r) {
|
|
return (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y);
|
|
}
|
|
|
|
// check if two points are equal
|
|
function equals(p1, p2) {
|
|
return p1.x === p2.x && p1.y === p2.y;
|
|
}
|
|
|
|
// check if two segments intersect
|
|
function intersects(p1, q1, p2, q2) {
|
|
var o1 = sign(area(p1, q1, p2));
|
|
var o2 = sign(area(p1, q1, q2));
|
|
var o3 = sign(area(p2, q2, p1));
|
|
var o4 = sign(area(p2, q2, q1));
|
|
|
|
if (o1 !== o2 && o3 !== o4) return true; // general case
|
|
|
|
if (o1 === 0 && onSegment(p1, p2, q1)) return true; // p1, q1 and p2 are collinear and p2 lies on p1q1
|
|
if (o2 === 0 && onSegment(p1, q2, q1)) return true; // p1, q1 and q2 are collinear and q2 lies on p1q1
|
|
if (o3 === 0 && onSegment(p2, p1, q2)) return true; // p2, q2 and p1 are collinear and p1 lies on p2q2
|
|
if (o4 === 0 && onSegment(p2, q1, q2)) return true; // p2, q2 and q1 are collinear and q1 lies on p2q2
|
|
|
|
return false;
|
|
}
|
|
|
|
// for collinear points p, q, r, check if point q lies on segment pr
|
|
function onSegment(p, q, r) {
|
|
return q.x <= Math.max(p.x, r.x) && q.x >= Math.min(p.x, r.x) && q.y <= Math.max(p.y, r.y) && q.y >= Math.min(p.y, r.y);
|
|
}
|
|
|
|
function sign(num) {
|
|
return num > 0 ? 1 : num < 0 ? -1 : 0;
|
|
}
|
|
|
|
// check if a polygon diagonal intersects any polygon segments
|
|
function intersectsPolygon(a, b) {
|
|
var p = a;
|
|
do {
|
|
if (p.i !== a.i && p.next.i !== a.i && p.i !== b.i && p.next.i !== b.i &&
|
|
intersects(p, p.next, a, b)) return true;
|
|
p = p.next;
|
|
} while (p !== a);
|
|
|
|
return false;
|
|
}
|
|
|
|
// check if a polygon diagonal is locally inside the polygon
|
|
function locallyInside(a, b) {
|
|
return area(a.prev, a, a.next) < 0 ?
|
|
area(a, b, a.next) >= 0 && area(a, a.prev, b) >= 0 :
|
|
area(a, b, a.prev) < 0 || area(a, a.next, b) < 0;
|
|
}
|
|
|
|
// check if the middle point of a polygon diagonal is inside the polygon
|
|
function middleInside(a, b) {
|
|
var p = a,
|
|
inside = false,
|
|
px = (a.x + b.x) / 2,
|
|
py = (a.y + b.y) / 2;
|
|
do {
|
|
if (((p.y > py) !== (p.next.y > py)) && p.next.y !== p.y &&
|
|
(px < (p.next.x - p.x) * (py - p.y) / (p.next.y - p.y) + p.x))
|
|
inside = !inside;
|
|
p = p.next;
|
|
} while (p !== a);
|
|
|
|
return inside;
|
|
}
|
|
|
|
// link two polygon vertices with a bridge; if the vertices belong to the same ring, it splits polygon into two;
|
|
// if one belongs to the outer ring and another to a hole, it merges it into a single ring
|
|
function splitPolygon(a, b) {
|
|
var a2 = new Node(a.i, a.x, a.y),
|
|
b2 = new Node(b.i, b.x, b.y),
|
|
an = a.next,
|
|
bp = b.prev;
|
|
|
|
a.next = b;
|
|
b.prev = a;
|
|
|
|
a2.next = an;
|
|
an.prev = a2;
|
|
|
|
b2.next = a2;
|
|
a2.prev = b2;
|
|
|
|
bp.next = b2;
|
|
b2.prev = bp;
|
|
|
|
return b2;
|
|
}
|
|
|
|
// create a node and optionally link it with previous one (in a circular doubly linked list)
|
|
function insertNode(i, x, y, last) {
|
|
var p = new Node(i, x, y);
|
|
|
|
if (!last) {
|
|
p.prev = p;
|
|
p.next = p;
|
|
|
|
} else {
|
|
p.next = last.next;
|
|
p.prev = last;
|
|
last.next.prev = p;
|
|
last.next = p;
|
|
}
|
|
return p;
|
|
}
|
|
|
|
function removeNode(p) {
|
|
p.next.prev = p.prev;
|
|
p.prev.next = p.next;
|
|
|
|
if (p.prevZ) p.prevZ.nextZ = p.nextZ;
|
|
if (p.nextZ) p.nextZ.prevZ = p.prevZ;
|
|
}
|
|
|
|
function Node(i, x, y) {
|
|
// vertex index in coordinates array
|
|
this.i = i;
|
|
|
|
// vertex coordinates
|
|
this.x = x;
|
|
this.y = y;
|
|
|
|
// previous and next vertex nodes in a polygon ring
|
|
this.prev = null;
|
|
this.next = null;
|
|
|
|
// z-order curve value
|
|
this.z = 0;
|
|
|
|
// previous and next nodes in z-order
|
|
this.prevZ = null;
|
|
this.nextZ = null;
|
|
|
|
// indicates whether this is a steiner point
|
|
this.steiner = false;
|
|
}
|
|
|
|
// return a percentage difference between the polygon area and its triangulation area;
|
|
// used to verify correctness of triangulation
|
|
earcut.deviation = function (data, holeIndices, dim, triangles) {
|
|
var hasHoles = holeIndices && holeIndices.length;
|
|
var outerLen = hasHoles ? holeIndices[0] * dim : data.length;
|
|
|
|
var polygonArea = Math.abs(signedArea(data, 0, outerLen, dim));
|
|
if (hasHoles) {
|
|
for (var i = 0, len = holeIndices.length; i < len; i++) {
|
|
var start = holeIndices[i] * dim;
|
|
var end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
|
|
polygonArea -= Math.abs(signedArea(data, start, end, dim));
|
|
}
|
|
}
|
|
|
|
var trianglesArea = 0;
|
|
for (i = 0; i < triangles.length; i += 3) {
|
|
var a = triangles[i] * dim;
|
|
var b = triangles[i + 1] * dim;
|
|
var c = triangles[i + 2] * dim;
|
|
trianglesArea += Math.abs(
|
|
(data[a] - data[c]) * (data[b + 1] - data[a + 1]) -
|
|
(data[a] - data[b]) * (data[c + 1] - data[a + 1]));
|
|
}
|
|
|
|
return polygonArea === 0 && trianglesArea === 0 ? 0 :
|
|
Math.abs((trianglesArea - polygonArea) / polygonArea);
|
|
};
|
|
|
|
function signedArea(data, start, end, dim) {
|
|
var sum = 0;
|
|
for (var i = start, j = end - dim; i < end; i += dim) {
|
|
sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]);
|
|
j = i;
|
|
}
|
|
return sum;
|
|
}
|
|
|
|
// turn a polygon in a multi-dimensional array form (e.g. as in GeoJSON) into a form Earcut accepts
|
|
earcut.flatten = function (data) {
|
|
var dim = data[0][0].length,
|
|
result = {vertices: [], holes: [], dimensions: dim},
|
|
holeIndex = 0;
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
for (var j = 0; j < data[i].length; j++) {
|
|
for (var d = 0; d < dim; d++) result.vertices.push(data[i][j][d]);
|
|
}
|
|
if (i > 0) {
|
|
holeIndex += data[i - 1].length;
|
|
result.holes.push(holeIndex);
|
|
}
|
|
}
|
|
return result;
|
|
};
|
|
|
|
var earcutExports = earcut$2.exports;
|
|
var earcut$1 = /*@__PURE__*/getDefaultExportFromCjs(earcutExports);
|
|
|
|
"use strict";
|
|
function triangulateWithHoles(points, holes, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
|
|
const triangles = earcut$1(points, holes, 2);
|
|
if (!triangles) {
|
|
return;
|
|
}
|
|
for (let i = 0; i < triangles.length; i += 3) {
|
|
indices[indicesOffset++] = triangles[i] + verticesOffset;
|
|
indices[indicesOffset++] = triangles[i + 1] + verticesOffset;
|
|
indices[indicesOffset++] = triangles[i + 2] + verticesOffset;
|
|
}
|
|
let index = verticesOffset * verticesStride;
|
|
for (let i = 0; i < points.length; i += 2) {
|
|
vertices[index] = points[i];
|
|
vertices[index + 1] = points[i + 1];
|
|
index += verticesStride;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const emptyArray = [];
|
|
const buildPolygon = {
|
|
extension: {
|
|
type: ExtensionType.ShapeBuilder,
|
|
name: "polygon"
|
|
},
|
|
build(shape, points) {
|
|
for (let i = 0; i < shape.points.length; i++) {
|
|
points[i] = shape.points[i];
|
|
}
|
|
return points;
|
|
},
|
|
triangulate(points, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
|
|
triangulateWithHoles(points, emptyArray, vertices, verticesStride, verticesOffset, indices, indicesOffset);
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const buildRectangle = {
|
|
extension: {
|
|
type: ExtensionType.ShapeBuilder,
|
|
name: "rectangle"
|
|
},
|
|
build(shape, points) {
|
|
const rectData = shape;
|
|
const x = rectData.x;
|
|
const y = rectData.y;
|
|
const width = rectData.width;
|
|
const height = rectData.height;
|
|
if (!(width >= 0 && height >= 0)) {
|
|
return points;
|
|
}
|
|
points[0] = x;
|
|
points[1] = y;
|
|
points[2] = x + width;
|
|
points[3] = y;
|
|
points[4] = x + width;
|
|
points[5] = y + height;
|
|
points[6] = x;
|
|
points[7] = y + height;
|
|
return points;
|
|
},
|
|
triangulate(points, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
|
|
let count = 0;
|
|
verticesOffset *= verticesStride;
|
|
vertices[verticesOffset + count] = points[0];
|
|
vertices[verticesOffset + count + 1] = points[1];
|
|
count += verticesStride;
|
|
vertices[verticesOffset + count] = points[2];
|
|
vertices[verticesOffset + count + 1] = points[3];
|
|
count += verticesStride;
|
|
vertices[verticesOffset + count] = points[6];
|
|
vertices[verticesOffset + count + 1] = points[7];
|
|
count += verticesStride;
|
|
vertices[verticesOffset + count] = points[4];
|
|
vertices[verticesOffset + count + 1] = points[5];
|
|
count += verticesStride;
|
|
const verticesIndex = verticesOffset / verticesStride;
|
|
indices[indicesOffset++] = verticesIndex;
|
|
indices[indicesOffset++] = verticesIndex + 1;
|
|
indices[indicesOffset++] = verticesIndex + 2;
|
|
indices[indicesOffset++] = verticesIndex + 1;
|
|
indices[indicesOffset++] = verticesIndex + 3;
|
|
indices[indicesOffset++] = verticesIndex + 2;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const buildTriangle = {
|
|
extension: {
|
|
type: ExtensionType.ShapeBuilder,
|
|
name: "triangle"
|
|
},
|
|
build(shape, points) {
|
|
points[0] = shape.x;
|
|
points[1] = shape.y;
|
|
points[2] = shape.x2;
|
|
points[3] = shape.y2;
|
|
points[4] = shape.x3;
|
|
points[5] = shape.y3;
|
|
return points;
|
|
},
|
|
triangulate(points, vertices, verticesStride, verticesOffset, indices, indicesOffset) {
|
|
let count = 0;
|
|
verticesOffset *= verticesStride;
|
|
vertices[verticesOffset + count] = points[0];
|
|
vertices[verticesOffset + count + 1] = points[1];
|
|
count += verticesStride;
|
|
vertices[verticesOffset + count] = points[2];
|
|
vertices[verticesOffset + count + 1] = points[3];
|
|
count += verticesStride;
|
|
vertices[verticesOffset + count] = points[4];
|
|
vertices[verticesOffset + count + 1] = points[5];
|
|
const verticesIndex = verticesOffset / verticesStride;
|
|
indices[indicesOffset++] = verticesIndex;
|
|
indices[indicesOffset++] = verticesIndex + 1;
|
|
indices[indicesOffset++] = verticesIndex + 2;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const shapeBuilders = {};
|
|
extensions.handleByMap(ExtensionType.ShapeBuilder, shapeBuilders);
|
|
extensions.add(buildRectangle, buildPolygon, buildTriangle, buildCircle, buildEllipse, buildRoundedRectangle);
|
|
const tempRect$1 = new Rectangle();
|
|
function buildContextBatches(context, gpuContext) {
|
|
const { geometryData, batches } = gpuContext;
|
|
batches.length = 0;
|
|
geometryData.indices.length = 0;
|
|
geometryData.vertices.length = 0;
|
|
geometryData.uvs.length = 0;
|
|
for (let i = 0; i < context.instructions.length; i++) {
|
|
const instruction = context.instructions[i];
|
|
if (instruction.action === "texture") {
|
|
addTextureToGeometryData(instruction.data, batches, geometryData);
|
|
} else if (instruction.action === "fill" || instruction.action === "stroke") {
|
|
const isStroke = instruction.action === "stroke";
|
|
const shapePath = instruction.data.path.shapePath;
|
|
const style = instruction.data.style;
|
|
const hole = instruction.data.hole;
|
|
if (isStroke && hole) {
|
|
addShapePathToGeometryData(hole.shapePath, style, null, true, batches, geometryData);
|
|
}
|
|
addShapePathToGeometryData(shapePath, style, hole, isStroke, batches, geometryData);
|
|
}
|
|
}
|
|
}
|
|
function addTextureToGeometryData(data, batches, geometryData) {
|
|
const { vertices, uvs, indices } = geometryData;
|
|
const indexOffset = indices.length;
|
|
const vertOffset = vertices.length / 2;
|
|
const points = [];
|
|
const build = shapeBuilders.rectangle;
|
|
const rect = tempRect$1;
|
|
const texture = data.image;
|
|
rect.x = data.dx;
|
|
rect.y = data.dy;
|
|
rect.width = data.dw;
|
|
rect.height = data.dh;
|
|
const matrix = data.transform;
|
|
build.build(rect, points);
|
|
if (matrix) {
|
|
transformVertices(points, matrix);
|
|
}
|
|
build.triangulate(points, vertices, 2, vertOffset, indices, indexOffset);
|
|
const textureUvs = texture.uvs;
|
|
uvs.push(
|
|
textureUvs.x0,
|
|
textureUvs.y0,
|
|
textureUvs.x1,
|
|
textureUvs.y1,
|
|
textureUvs.x3,
|
|
textureUvs.y3,
|
|
textureUvs.x2,
|
|
textureUvs.y2
|
|
);
|
|
const graphicsBatch = BigPool.get(BatchableGraphics);
|
|
graphicsBatch.indexOffset = indexOffset;
|
|
graphicsBatch.indexSize = indices.length - indexOffset;
|
|
graphicsBatch.attributeOffset = vertOffset;
|
|
graphicsBatch.attributeSize = vertices.length / 2 - vertOffset;
|
|
graphicsBatch.baseColor = data.style;
|
|
graphicsBatch.alpha = data.alpha;
|
|
graphicsBatch.texture = texture;
|
|
graphicsBatch.geometryData = geometryData;
|
|
batches.push(graphicsBatch);
|
|
}
|
|
function addShapePathToGeometryData(shapePath, style, hole, isStroke, batches, geometryData) {
|
|
const { vertices, uvs, indices } = geometryData;
|
|
const lastIndex = shapePath.shapePrimitives.length - 1;
|
|
shapePath.shapePrimitives.forEach(({ shape, transform: matrix }, i) => {
|
|
var _a;
|
|
const indexOffset = indices.length;
|
|
const vertOffset = vertices.length / 2;
|
|
const points = [];
|
|
const build = shapeBuilders[shape.type];
|
|
build.build(shape, points);
|
|
if (matrix) {
|
|
transformVertices(points, matrix);
|
|
}
|
|
if (!isStroke) {
|
|
if (hole && lastIndex === i) {
|
|
if (lastIndex !== 0) {
|
|
console.warn("[Pixi Graphics] only the last shape have be cut out");
|
|
}
|
|
const holeIndices = [];
|
|
const otherPoints = points.slice();
|
|
const holeArrays = getHoleArrays(hole.shapePath);
|
|
holeArrays.forEach((holePoints) => {
|
|
holeIndices.push(otherPoints.length / 2);
|
|
otherPoints.push(...holePoints);
|
|
});
|
|
triangulateWithHoles(otherPoints, holeIndices, vertices, 2, vertOffset, indices, indexOffset);
|
|
} else {
|
|
build.triangulate(points, vertices, 2, vertOffset, indices, indexOffset);
|
|
}
|
|
} else {
|
|
const close = (_a = shape.closePath) != null ? _a : true;
|
|
const lineStyle = style;
|
|
buildLine(points, lineStyle, false, close, vertices, 2, vertOffset, indices, indexOffset);
|
|
}
|
|
const uvsOffset = uvs.length / 2;
|
|
const texture = style.texture;
|
|
if (texture !== Texture.WHITE) {
|
|
const textureMatrix = style.matrix;
|
|
if (textureMatrix) {
|
|
if (matrix) {
|
|
textureMatrix.append(matrix.clone().invert());
|
|
}
|
|
buildUvs(vertices, 2, vertOffset, uvs, uvsOffset, 2, vertices.length / 2 - vertOffset, textureMatrix);
|
|
}
|
|
} else {
|
|
buildSimpleUvs(uvs, uvsOffset, 2, vertices.length / 2 - vertOffset);
|
|
}
|
|
const graphicsBatch = BigPool.get(BatchableGraphics);
|
|
graphicsBatch.indexOffset = indexOffset;
|
|
graphicsBatch.indexSize = indices.length - indexOffset;
|
|
graphicsBatch.attributeOffset = vertOffset;
|
|
graphicsBatch.attributeSize = vertices.length / 2 - vertOffset;
|
|
graphicsBatch.baseColor = style.color;
|
|
graphicsBatch.alpha = style.alpha;
|
|
graphicsBatch.texture = texture;
|
|
graphicsBatch.geometryData = geometryData;
|
|
batches.push(graphicsBatch);
|
|
});
|
|
}
|
|
function getHoleArrays(shape) {
|
|
if (!shape)
|
|
return [];
|
|
const holePrimitives = shape.shapePrimitives;
|
|
const holeArrays = [];
|
|
for (let k = 0; k < holePrimitives.length; k++) {
|
|
const holePrimitive = holePrimitives[k].shape;
|
|
const holePoints = [];
|
|
const holeBuilder = shapeBuilders[holePrimitive.type];
|
|
holeBuilder.build(holePrimitive, holePoints);
|
|
holeArrays.push(holePoints);
|
|
}
|
|
return holeArrays;
|
|
}
|
|
|
|
"use strict";
|
|
class GpuGraphicsContext {
|
|
constructor() {
|
|
this.batches = [];
|
|
this.geometryData = {
|
|
vertices: [],
|
|
uvs: [],
|
|
indices: []
|
|
};
|
|
}
|
|
}
|
|
class GraphicsContextRenderData {
|
|
constructor() {
|
|
this.batcher = new DefaultBatcher();
|
|
this.instructions = new InstructionSet();
|
|
}
|
|
init() {
|
|
this.instructions.reset();
|
|
}
|
|
/**
|
|
* @deprecated since version 8.0.0
|
|
* Use `batcher.geometry` instead.
|
|
* @see {Batcher#geometry}
|
|
*/
|
|
get geometry() {
|
|
deprecation(v8_3_4, "GraphicsContextRenderData#geometry is deprecated, please use batcher.geometry instead.");
|
|
return this.batcher.geometry;
|
|
}
|
|
}
|
|
const _GraphicsContextSystem = class _GraphicsContextSystem {
|
|
constructor() {
|
|
// the root context batches, used to either make a batch or geometry
|
|
// all graphics use this as a base
|
|
this._gpuContextHash = {};
|
|
// used for non-batchable graphics
|
|
this._graphicsDataContextHash = /* @__PURE__ */ Object.create(null);
|
|
}
|
|
/**
|
|
* Runner init called, update the default options
|
|
* @ignore
|
|
*/
|
|
init(options) {
|
|
var _a;
|
|
_GraphicsContextSystem.defaultOptions.bezierSmoothness = (_a = options == null ? void 0 : options.bezierSmoothness) != null ? _a : _GraphicsContextSystem.defaultOptions.bezierSmoothness;
|
|
}
|
|
getContextRenderData(context) {
|
|
return this._graphicsDataContextHash[context.uid] || this._initContextRenderData(context);
|
|
}
|
|
// Context management functions
|
|
updateGpuContext(context) {
|
|
let gpuContext = this._gpuContextHash[context.uid] || this._initContext(context);
|
|
if (context.dirty) {
|
|
if (gpuContext) {
|
|
this._cleanGraphicsContextData(context);
|
|
} else {
|
|
gpuContext = this._initContext(context);
|
|
}
|
|
buildContextBatches(context, gpuContext);
|
|
const batchMode = context.batchMode;
|
|
if (context.customShader || batchMode === "no-batch") {
|
|
gpuContext.isBatchable = false;
|
|
} else if (batchMode === "auto") {
|
|
gpuContext.isBatchable = gpuContext.geometryData.vertices.length < 400;
|
|
}
|
|
context.dirty = false;
|
|
}
|
|
return gpuContext;
|
|
}
|
|
getGpuContext(context) {
|
|
return this._gpuContextHash[context.uid] || this._initContext(context);
|
|
}
|
|
_initContextRenderData(context) {
|
|
const graphicsData = BigPool.get(GraphicsContextRenderData);
|
|
const { batches, geometryData } = this._gpuContextHash[context.uid];
|
|
const vertexSize = geometryData.vertices.length;
|
|
const indexSize = geometryData.indices.length;
|
|
for (let i = 0; i < batches.length; i++) {
|
|
batches[i].applyTransform = false;
|
|
}
|
|
const batcher = graphicsData.batcher;
|
|
batcher.ensureAttributeBuffer(vertexSize);
|
|
batcher.ensureIndexBuffer(indexSize);
|
|
batcher.begin();
|
|
for (let i = 0; i < batches.length; i++) {
|
|
const batch = batches[i];
|
|
batcher.add(batch);
|
|
}
|
|
batcher.finish(graphicsData.instructions);
|
|
const geometry = batcher.geometry;
|
|
geometry.indexBuffer.setDataWithSize(batcher.indexBuffer, batcher.indexSize, true);
|
|
geometry.buffers[0].setDataWithSize(batcher.attributeBuffer.float32View, batcher.attributeSize, true);
|
|
const drawBatches = batcher.batches;
|
|
for (let i = 0; i < drawBatches.length; i++) {
|
|
const batch = drawBatches[i];
|
|
batch.bindGroup = getTextureBatchBindGroup(batch.textures.textures, batch.textures.count);
|
|
}
|
|
this._graphicsDataContextHash[context.uid] = graphicsData;
|
|
return graphicsData;
|
|
}
|
|
_initContext(context) {
|
|
const gpuContext = new GpuGraphicsContext();
|
|
gpuContext.context = context;
|
|
this._gpuContextHash[context.uid] = gpuContext;
|
|
context.on("destroy", this.onGraphicsContextDestroy, this);
|
|
return this._gpuContextHash[context.uid];
|
|
}
|
|
onGraphicsContextDestroy(context) {
|
|
this._cleanGraphicsContextData(context);
|
|
context.off("destroy", this.onGraphicsContextDestroy, this);
|
|
this._gpuContextHash[context.uid] = null;
|
|
}
|
|
_cleanGraphicsContextData(context) {
|
|
const gpuContext = this._gpuContextHash[context.uid];
|
|
if (!gpuContext.isBatchable) {
|
|
if (this._graphicsDataContextHash[context.uid]) {
|
|
BigPool.return(this.getContextRenderData(context));
|
|
this._graphicsDataContextHash[context.uid] = null;
|
|
}
|
|
}
|
|
if (gpuContext.batches) {
|
|
gpuContext.batches.forEach((batch) => {
|
|
BigPool.return(batch);
|
|
});
|
|
}
|
|
}
|
|
destroy() {
|
|
for (const i in this._gpuContextHash) {
|
|
if (this._gpuContextHash[i]) {
|
|
this.onGraphicsContextDestroy(this._gpuContextHash[i].context);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_GraphicsContextSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem,
|
|
ExtensionType.CanvasSystem
|
|
],
|
|
name: "graphicsContext"
|
|
};
|
|
/** The default options for the GraphicsContextSystem. */
|
|
_GraphicsContextSystem.defaultOptions = {
|
|
/**
|
|
* A value from 0 to 1 that controls the smoothness of bezier curves (the higher the smoother)
|
|
* @default 0.5
|
|
*/
|
|
bezierSmoothness: 0.5
|
|
};
|
|
let GraphicsContextSystem = _GraphicsContextSystem;
|
|
|
|
"use strict";
|
|
const blendModeIds = {
|
|
normal: 0,
|
|
add: 1,
|
|
multiply: 2,
|
|
screen: 3,
|
|
overlay: 4,
|
|
erase: 5,
|
|
"normal-npm": 6,
|
|
"add-npm": 7,
|
|
"screen-npm": 8,
|
|
min: 9,
|
|
max: 10
|
|
};
|
|
const BLEND$1 = 0;
|
|
const OFFSET$1 = 1;
|
|
const CULLING$1 = 2;
|
|
const DEPTH_TEST$1 = 3;
|
|
const WINDING$1 = 4;
|
|
const DEPTH_MASK$1 = 5;
|
|
const _State = class _State {
|
|
constructor() {
|
|
this.data = 0;
|
|
this.blendMode = "normal";
|
|
this.polygonOffset = 0;
|
|
this.blend = true;
|
|
this.depthMask = true;
|
|
}
|
|
/**
|
|
* Activates blending of the computed fragment color values.
|
|
* @default true
|
|
*/
|
|
get blend() {
|
|
return !!(this.data & 1 << BLEND$1);
|
|
}
|
|
set blend(value) {
|
|
if (!!(this.data & 1 << BLEND$1) !== value) {
|
|
this.data ^= 1 << BLEND$1;
|
|
}
|
|
}
|
|
/**
|
|
* Activates adding an offset to depth values of polygon's fragments
|
|
* @default false
|
|
*/
|
|
get offsets() {
|
|
return !!(this.data & 1 << OFFSET$1);
|
|
}
|
|
set offsets(value) {
|
|
if (!!(this.data & 1 << OFFSET$1) !== value) {
|
|
this.data ^= 1 << OFFSET$1;
|
|
}
|
|
}
|
|
/** The culling settings for this state none - No culling back - Back face culling front - Front face culling */
|
|
set cullMode(value) {
|
|
if (value === "none") {
|
|
this.culling = false;
|
|
return;
|
|
}
|
|
this.culling = true;
|
|
this.clockwiseFrontFace = value === "front";
|
|
}
|
|
get cullMode() {
|
|
if (!this.culling) {
|
|
return "none";
|
|
}
|
|
return this.clockwiseFrontFace ? "front" : "back";
|
|
}
|
|
/**
|
|
* Activates culling of polygons.
|
|
* @default false
|
|
*/
|
|
get culling() {
|
|
return !!(this.data & 1 << CULLING$1);
|
|
}
|
|
set culling(value) {
|
|
if (!!(this.data & 1 << CULLING$1) !== value) {
|
|
this.data ^= 1 << CULLING$1;
|
|
}
|
|
}
|
|
/**
|
|
* Activates depth comparisons and updates to the depth buffer.
|
|
* @default false
|
|
*/
|
|
get depthTest() {
|
|
return !!(this.data & 1 << DEPTH_TEST$1);
|
|
}
|
|
set depthTest(value) {
|
|
if (!!(this.data & 1 << DEPTH_TEST$1) !== value) {
|
|
this.data ^= 1 << DEPTH_TEST$1;
|
|
}
|
|
}
|
|
/**
|
|
* Enables or disables writing to the depth buffer.
|
|
* @default true
|
|
*/
|
|
get depthMask() {
|
|
return !!(this.data & 1 << DEPTH_MASK$1);
|
|
}
|
|
set depthMask(value) {
|
|
if (!!(this.data & 1 << DEPTH_MASK$1) !== value) {
|
|
this.data ^= 1 << DEPTH_MASK$1;
|
|
}
|
|
}
|
|
/**
|
|
* Specifies whether or not front or back-facing polygons can be culled.
|
|
* @default false
|
|
*/
|
|
get clockwiseFrontFace() {
|
|
return !!(this.data & 1 << WINDING$1);
|
|
}
|
|
set clockwiseFrontFace(value) {
|
|
if (!!(this.data & 1 << WINDING$1) !== value) {
|
|
this.data ^= 1 << WINDING$1;
|
|
}
|
|
}
|
|
/**
|
|
* The blend mode to be applied when this state is set. Apply a value of `normal` to reset the blend mode.
|
|
* Setting this mode to anything other than NO_BLEND will automatically switch blending on.
|
|
* @default 'normal'
|
|
*/
|
|
get blendMode() {
|
|
return this._blendMode;
|
|
}
|
|
set blendMode(value) {
|
|
this.blend = value !== "none";
|
|
this._blendMode = value;
|
|
this._blendModeId = blendModeIds[value] || 0;
|
|
}
|
|
/**
|
|
* The polygon offset. Setting this property to anything other than 0 will automatically enable polygon offset fill.
|
|
* @default 0
|
|
*/
|
|
get polygonOffset() {
|
|
return this._polygonOffset;
|
|
}
|
|
set polygonOffset(value) {
|
|
this.offsets = !!value;
|
|
this._polygonOffset = value;
|
|
}
|
|
toString() {
|
|
return `[pixi.js/core:State blendMode=${this.blendMode} clockwiseFrontFace=${this.clockwiseFrontFace} culling=${this.culling} depthMask=${this.depthMask} polygonOffset=${this.polygonOffset}]`;
|
|
}
|
|
/**
|
|
* A quickly getting an instance of a State that is configured for 2d rendering.
|
|
* @returns a new State with values set for 2d rendering
|
|
*/
|
|
static for2d() {
|
|
const state = new _State();
|
|
state.depthTest = false;
|
|
state.blend = true;
|
|
return state;
|
|
}
|
|
};
|
|
_State.default2d = _State.for2d();
|
|
let State = _State;
|
|
|
|
"use strict";
|
|
function colorToUniform(rgb, alpha, out, offset) {
|
|
out[offset++] = (rgb >> 16 & 255) / 255;
|
|
out[offset++] = (rgb >> 8 & 255) / 255;
|
|
out[offset++] = (rgb & 255) / 255;
|
|
out[offset++] = alpha;
|
|
}
|
|
function color32BitToUniform(abgr, out, offset) {
|
|
const alpha = (abgr >> 24 & 255) / 255;
|
|
out[offset++] = (abgr & 255) / 255 * alpha;
|
|
out[offset++] = (abgr >> 8 & 255) / 255 * alpha;
|
|
out[offset++] = (abgr >> 16 & 255) / 255 * alpha;
|
|
out[offset++] = alpha;
|
|
}
|
|
|
|
"use strict";
|
|
class GraphicsPipe {
|
|
constructor(renderer, adaptor) {
|
|
this.state = State.for2d();
|
|
// batchable graphics list, used to render batches
|
|
this._graphicsBatchesHash = /* @__PURE__ */ Object.create(null);
|
|
this._destroyRenderableBound = this.destroyRenderable.bind(this);
|
|
this.renderer = renderer;
|
|
this._adaptor = adaptor;
|
|
this._adaptor.init();
|
|
}
|
|
validateRenderable(graphics) {
|
|
const context = graphics.context;
|
|
const wasBatched = !!this._graphicsBatchesHash[graphics.uid];
|
|
const gpuContext = this.renderer.graphicsContext.updateGpuContext(context);
|
|
if (gpuContext.isBatchable || wasBatched !== gpuContext.isBatchable) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
addRenderable(graphics, instructionSet) {
|
|
const gpuContext = this.renderer.graphicsContext.updateGpuContext(graphics.context);
|
|
if (graphics._didGraphicsUpdate) {
|
|
graphics._didGraphicsUpdate = false;
|
|
this._rebuild(graphics);
|
|
}
|
|
if (gpuContext.isBatchable) {
|
|
this._addToBatcher(graphics, instructionSet);
|
|
} else {
|
|
this.renderer.renderPipes.batch.break(instructionSet);
|
|
instructionSet.add(graphics);
|
|
}
|
|
}
|
|
updateRenderable(graphics) {
|
|
const batches = this._graphicsBatchesHash[graphics.uid];
|
|
if (batches) {
|
|
for (let i = 0; i < batches.length; i++) {
|
|
const batch = batches[i];
|
|
batch._batcher.updateElement(batch);
|
|
}
|
|
}
|
|
}
|
|
destroyRenderable(graphics) {
|
|
if (this._graphicsBatchesHash[graphics.uid]) {
|
|
this._removeBatchForRenderable(graphics.uid);
|
|
}
|
|
graphics.off("destroyed", this._destroyRenderableBound);
|
|
}
|
|
execute(graphics) {
|
|
if (!graphics.isRenderable)
|
|
return;
|
|
const renderer = this.renderer;
|
|
const context = graphics.context;
|
|
const contextSystem = renderer.graphicsContext;
|
|
if (!contextSystem.getGpuContext(context).batches.length) {
|
|
return;
|
|
}
|
|
const shader = context.customShader || this._adaptor.shader;
|
|
this.state.blendMode = graphics.groupBlendMode;
|
|
const localUniforms = shader.resources.localUniforms.uniforms;
|
|
localUniforms.uTransformMatrix = graphics.groupTransform;
|
|
localUniforms.uRound = renderer._roundPixels | graphics._roundPixels;
|
|
color32BitToUniform(
|
|
graphics.groupColorAlpha,
|
|
localUniforms.uColor,
|
|
0
|
|
);
|
|
this._adaptor.execute(this, graphics);
|
|
}
|
|
_rebuild(graphics) {
|
|
const wasBatched = !!this._graphicsBatchesHash[graphics.uid];
|
|
const gpuContext = this.renderer.graphicsContext.updateGpuContext(graphics.context);
|
|
if (wasBatched) {
|
|
this._removeBatchForRenderable(graphics.uid);
|
|
}
|
|
if (gpuContext.isBatchable) {
|
|
this._initBatchesForRenderable(graphics);
|
|
}
|
|
graphics.batched = gpuContext.isBatchable;
|
|
}
|
|
_addToBatcher(graphics, instructionSet) {
|
|
const batchPipe = this.renderer.renderPipes.batch;
|
|
const batches = this._getBatchesForRenderable(graphics);
|
|
for (let i = 0; i < batches.length; i++) {
|
|
const batch = batches[i];
|
|
batchPipe.addToBatch(batch, instructionSet);
|
|
}
|
|
}
|
|
_getBatchesForRenderable(graphics) {
|
|
return this._graphicsBatchesHash[graphics.uid] || this._initBatchesForRenderable(graphics);
|
|
}
|
|
_initBatchesForRenderable(graphics) {
|
|
const context = graphics.context;
|
|
const gpuContext = this.renderer.graphicsContext.getGpuContext(context);
|
|
const roundPixels = this.renderer._roundPixels | graphics._roundPixels;
|
|
const batches = gpuContext.batches.map((batch) => {
|
|
const batchClone = BigPool.get(BatchableGraphics);
|
|
batch.copyTo(batchClone);
|
|
batchClone.renderable = graphics;
|
|
batchClone.roundPixels = roundPixels;
|
|
return batchClone;
|
|
});
|
|
if (this._graphicsBatchesHash[graphics.uid] === void 0) {
|
|
graphics.on("destroyed", this._destroyRenderableBound);
|
|
}
|
|
this._graphicsBatchesHash[graphics.uid] = batches;
|
|
return batches;
|
|
}
|
|
_removeBatchForRenderable(graphicsUid) {
|
|
this._graphicsBatchesHash[graphicsUid].forEach((batch) => {
|
|
BigPool.return(batch);
|
|
});
|
|
this._graphicsBatchesHash[graphicsUid] = null;
|
|
}
|
|
destroy() {
|
|
this.renderer = null;
|
|
this._adaptor.destroy();
|
|
this._adaptor = null;
|
|
this.state = null;
|
|
for (const i in this._graphicsBatchesHash) {
|
|
this._removeBatchForRenderable(i);
|
|
}
|
|
this._graphicsBatchesHash = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GraphicsPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "graphics"
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(GraphicsPipe);
|
|
extensions.add(GraphicsContextSystem);
|
|
|
|
"use strict";
|
|
class BatchableMesh {
|
|
constructor() {
|
|
this.batcherName = "default";
|
|
this.packAsQuad = false;
|
|
this.indexOffset = 0;
|
|
this.attributeOffset = 0;
|
|
this.roundPixels = 0;
|
|
this._batcher = null;
|
|
this._batch = null;
|
|
this._uvUpdateId = -1;
|
|
this._textureMatrixUpdateId = -1;
|
|
}
|
|
get blendMode() {
|
|
return this.renderable.groupBlendMode;
|
|
}
|
|
reset() {
|
|
this.renderable = null;
|
|
this.texture = null;
|
|
this._batcher = null;
|
|
this._batch = null;
|
|
this.geometry = null;
|
|
this._uvUpdateId = -1;
|
|
this._textureMatrixUpdateId = -1;
|
|
}
|
|
get uvs() {
|
|
const geometry = this.geometry;
|
|
const uvBuffer = geometry.getBuffer("aUV");
|
|
const uvs = uvBuffer.data;
|
|
let transformedUvs = uvs;
|
|
const textureMatrix = this.texture.textureMatrix;
|
|
if (!textureMatrix.isSimple) {
|
|
transformedUvs = this._transformedUvs;
|
|
if (this._textureMatrixUpdateId !== textureMatrix._updateID || this._uvUpdateId !== uvBuffer._updateID) {
|
|
if (!transformedUvs || transformedUvs.length < uvs.length) {
|
|
transformedUvs = this._transformedUvs = new Float32Array(uvs.length);
|
|
}
|
|
this._textureMatrixUpdateId = textureMatrix._updateID;
|
|
this._uvUpdateId = uvBuffer._updateID;
|
|
textureMatrix.multiplyUvs(uvs, transformedUvs);
|
|
}
|
|
}
|
|
return transformedUvs;
|
|
}
|
|
get positions() {
|
|
return this.geometry.positions;
|
|
}
|
|
get indices() {
|
|
return this.geometry.indices;
|
|
}
|
|
get color() {
|
|
return this.renderable.groupColorAlpha;
|
|
}
|
|
get groupTransform() {
|
|
return this.renderable.groupTransform;
|
|
}
|
|
get attributeSize() {
|
|
return this.geometry.positions.length / 2;
|
|
}
|
|
get indexSize() {
|
|
return this.geometry.indices.length;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class MeshPipe {
|
|
constructor(renderer, adaptor) {
|
|
this.localUniforms = new UniformGroup({
|
|
uTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
|
|
uRound: { value: 0, type: "f32" }
|
|
});
|
|
this.localUniformsBindGroup = new BindGroup({
|
|
0: this.localUniforms
|
|
});
|
|
this._meshDataHash = /* @__PURE__ */ Object.create(null);
|
|
this._gpuBatchableMeshHash = /* @__PURE__ */ Object.create(null);
|
|
this._destroyRenderableBound = this.destroyRenderable.bind(this);
|
|
this.renderer = renderer;
|
|
this._adaptor = adaptor;
|
|
this._adaptor.init();
|
|
}
|
|
validateRenderable(mesh) {
|
|
const meshData = this._getMeshData(mesh);
|
|
const wasBatched = meshData.batched;
|
|
const isBatched = mesh.batched;
|
|
meshData.batched = isBatched;
|
|
if (wasBatched !== isBatched) {
|
|
return true;
|
|
} else if (isBatched) {
|
|
const geometry = mesh._geometry;
|
|
if (geometry.indices.length !== meshData.indexSize || geometry.positions.length !== meshData.vertexSize) {
|
|
meshData.indexSize = geometry.indices.length;
|
|
meshData.vertexSize = geometry.positions.length;
|
|
return true;
|
|
}
|
|
const batchableMesh = this._getBatchableMesh(mesh);
|
|
const texture = mesh.texture;
|
|
if (batchableMesh.texture._source !== texture._source) {
|
|
if (batchableMesh.texture._source !== texture._source) {
|
|
return !batchableMesh._batcher.checkAndUpdateTexture(batchableMesh, texture);
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
addRenderable(mesh, instructionSet) {
|
|
const batcher = this.renderer.renderPipes.batch;
|
|
const { batched } = this._getMeshData(mesh);
|
|
if (batched) {
|
|
const gpuBatchableMesh = this._getBatchableMesh(mesh);
|
|
gpuBatchableMesh.texture = mesh._texture;
|
|
gpuBatchableMesh.geometry = mesh._geometry;
|
|
batcher.addToBatch(gpuBatchableMesh, instructionSet);
|
|
} else {
|
|
batcher.break(instructionSet);
|
|
instructionSet.add(mesh);
|
|
}
|
|
}
|
|
updateRenderable(mesh) {
|
|
if (mesh.batched) {
|
|
const gpuBatchableMesh = this._gpuBatchableMeshHash[mesh.uid];
|
|
gpuBatchableMesh.texture = mesh._texture;
|
|
gpuBatchableMesh.geometry = mesh._geometry;
|
|
gpuBatchableMesh._batcher.updateElement(gpuBatchableMesh);
|
|
}
|
|
}
|
|
destroyRenderable(mesh) {
|
|
this._meshDataHash[mesh.uid] = null;
|
|
const gpuMesh = this._gpuBatchableMeshHash[mesh.uid];
|
|
if (gpuMesh) {
|
|
BigPool.return(gpuMesh);
|
|
this._gpuBatchableMeshHash[mesh.uid] = null;
|
|
}
|
|
mesh.off("destroyed", this._destroyRenderableBound);
|
|
}
|
|
execute(mesh) {
|
|
if (!mesh.isRenderable)
|
|
return;
|
|
mesh.state.blendMode = getAdjustedBlendModeBlend(mesh.groupBlendMode, mesh.texture._source);
|
|
const localUniforms = this.localUniforms;
|
|
localUniforms.uniforms.uTransformMatrix = mesh.groupTransform;
|
|
localUniforms.uniforms.uRound = this.renderer._roundPixels | mesh._roundPixels;
|
|
localUniforms.update();
|
|
color32BitToUniform(
|
|
mesh.groupColorAlpha,
|
|
localUniforms.uniforms.uColor,
|
|
0
|
|
);
|
|
this._adaptor.execute(this, mesh);
|
|
}
|
|
_getMeshData(mesh) {
|
|
return this._meshDataHash[mesh.uid] || this._initMeshData(mesh);
|
|
}
|
|
_initMeshData(mesh) {
|
|
var _a, _b;
|
|
this._meshDataHash[mesh.uid] = {
|
|
batched: mesh.batched,
|
|
indexSize: (_a = mesh._geometry.indices) == null ? void 0 : _a.length,
|
|
vertexSize: (_b = mesh._geometry.positions) == null ? void 0 : _b.length
|
|
};
|
|
mesh.on("destroyed", this._destroyRenderableBound);
|
|
return this._meshDataHash[mesh.uid];
|
|
}
|
|
_getBatchableMesh(mesh) {
|
|
return this._gpuBatchableMeshHash[mesh.uid] || this._initBatchableMesh(mesh);
|
|
}
|
|
_initBatchableMesh(mesh) {
|
|
const gpuMesh = BigPool.get(BatchableMesh);
|
|
gpuMesh.renderable = mesh;
|
|
gpuMesh.texture = mesh._texture;
|
|
gpuMesh.transform = mesh.groupTransform;
|
|
gpuMesh.roundPixels = this.renderer._roundPixels | mesh._roundPixels;
|
|
this._gpuBatchableMeshHash[mesh.uid] = gpuMesh;
|
|
return gpuMesh;
|
|
}
|
|
destroy() {
|
|
for (const i in this._gpuBatchableMeshHash) {
|
|
if (this._gpuBatchableMeshHash[i]) {
|
|
BigPool.return(this._gpuBatchableMeshHash[i]);
|
|
}
|
|
}
|
|
this._gpuBatchableMeshHash = null;
|
|
this._meshDataHash = null;
|
|
this.localUniforms = null;
|
|
this.localUniformsBindGroup = null;
|
|
this._adaptor.destroy();
|
|
this._adaptor = null;
|
|
this.renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
MeshPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "mesh"
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(MeshPipe);
|
|
|
|
"use strict";
|
|
class BatchableSprite {
|
|
constructor() {
|
|
this.batcherName = "default";
|
|
// batch specific..
|
|
this.attributeSize = 4;
|
|
this.indexSize = 6;
|
|
this.packAsQuad = true;
|
|
this.roundPixels = 0;
|
|
this._attributeStart = 0;
|
|
// location in the buffer
|
|
this._batcher = null;
|
|
this._batch = null;
|
|
}
|
|
get blendMode() {
|
|
return this.renderable.groupBlendMode;
|
|
}
|
|
get color() {
|
|
return this.renderable.groupColorAlpha;
|
|
}
|
|
reset() {
|
|
this.renderable = null;
|
|
this.texture = null;
|
|
this._batcher = null;
|
|
this._batch = null;
|
|
this.bounds = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class CanvasTextPipe {
|
|
constructor(renderer) {
|
|
this._gpuText = /* @__PURE__ */ Object.create(null);
|
|
this._destroyRenderableBound = this.destroyRenderable.bind(this);
|
|
this._renderer = renderer;
|
|
this._renderer.runners.resolutionChange.add(this);
|
|
}
|
|
resolutionChange() {
|
|
for (const i in this._gpuText) {
|
|
const gpuText = this._gpuText[i];
|
|
if (!gpuText)
|
|
continue;
|
|
const text = gpuText.batchableSprite.renderable;
|
|
if (text._autoResolution) {
|
|
text._resolution = this._renderer.resolution;
|
|
text.onViewUpdate();
|
|
}
|
|
}
|
|
}
|
|
validateRenderable(text) {
|
|
const gpuText = this._getGpuText(text);
|
|
const newKey = text._getKey();
|
|
if (gpuText.currentKey !== newKey) {
|
|
const { width, height } = this._renderer.canvasText.getTextureSize(
|
|
text.text,
|
|
text.resolution,
|
|
text._style
|
|
);
|
|
if (
|
|
// is only being used by this text:
|
|
this._renderer.canvasText.getReferenceCount(gpuText.currentKey) === 1 && width === gpuText.texture._source.width && height === gpuText.texture._source.height
|
|
) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
addRenderable(text, instructionSet) {
|
|
const gpuText = this._getGpuText(text);
|
|
const batchableSprite = gpuText.batchableSprite;
|
|
if (text._didTextUpdate) {
|
|
this._updateText(text);
|
|
}
|
|
this._renderer.renderPipes.batch.addToBatch(batchableSprite, instructionSet);
|
|
}
|
|
updateRenderable(text) {
|
|
const gpuText = this._getGpuText(text);
|
|
const batchableSprite = gpuText.batchableSprite;
|
|
if (text._didTextUpdate) {
|
|
this._updateText(text);
|
|
}
|
|
batchableSprite._batcher.updateElement(batchableSprite);
|
|
}
|
|
destroyRenderable(text) {
|
|
text.off("destroyed", this._destroyRenderableBound);
|
|
this._destroyRenderableById(text.uid);
|
|
}
|
|
_destroyRenderableById(textUid) {
|
|
const gpuText = this._gpuText[textUid];
|
|
this._renderer.canvasText.decreaseReferenceCount(gpuText.currentKey);
|
|
BigPool.return(gpuText.batchableSprite);
|
|
this._gpuText[textUid] = null;
|
|
}
|
|
_updateText(text) {
|
|
const newKey = text._getKey();
|
|
const gpuText = this._getGpuText(text);
|
|
const batchableSprite = gpuText.batchableSprite;
|
|
if (gpuText.currentKey !== newKey) {
|
|
this._updateGpuText(text);
|
|
}
|
|
text._didTextUpdate = false;
|
|
const padding = text._style.padding;
|
|
updateQuadBounds(batchableSprite.bounds, text._anchor, batchableSprite.texture, padding);
|
|
}
|
|
_updateGpuText(text) {
|
|
const gpuText = this._getGpuText(text);
|
|
const batchableSprite = gpuText.batchableSprite;
|
|
if (gpuText.texture) {
|
|
this._renderer.canvasText.decreaseReferenceCount(gpuText.currentKey);
|
|
}
|
|
gpuText.texture = batchableSprite.texture = this._renderer.canvasText.getManagedTexture(text);
|
|
gpuText.currentKey = text._getKey();
|
|
batchableSprite.texture = gpuText.texture;
|
|
}
|
|
_getGpuText(text) {
|
|
return this._gpuText[text.uid] || this.initGpuText(text);
|
|
}
|
|
initGpuText(text) {
|
|
const gpuTextData = {
|
|
texture: null,
|
|
currentKey: "--",
|
|
batchableSprite: BigPool.get(BatchableSprite)
|
|
};
|
|
gpuTextData.batchableSprite.renderable = text;
|
|
gpuTextData.batchableSprite.transform = text.groupTransform;
|
|
gpuTextData.batchableSprite.bounds = { minX: 0, maxX: 1, minY: 0, maxY: 0 };
|
|
gpuTextData.batchableSprite.roundPixels = this._renderer._roundPixels | text._roundPixels;
|
|
this._gpuText[text.uid] = gpuTextData;
|
|
text._resolution = text._autoResolution ? this._renderer.resolution : text.resolution;
|
|
this._updateText(text);
|
|
text.on("destroyed", this._destroyRenderableBound);
|
|
return gpuTextData;
|
|
}
|
|
destroy() {
|
|
for (const i in this._gpuText) {
|
|
this._destroyRenderableById(i);
|
|
}
|
|
this._gpuText = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
CanvasTextPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "text"
|
|
};
|
|
|
|
"use strict";
|
|
class CanvasPoolClass {
|
|
constructor(canvasOptions) {
|
|
this._canvasPool = /* @__PURE__ */ Object.create(null);
|
|
this.canvasOptions = canvasOptions || {};
|
|
this.enableFullScreen = false;
|
|
}
|
|
/**
|
|
* Creates texture with params that were specified in pool constructor.
|
|
* @param pixelWidth - Width of texture in pixels.
|
|
* @param pixelHeight - Height of texture in pixels.
|
|
*/
|
|
_createCanvasAndContext(pixelWidth, pixelHeight) {
|
|
const canvas = DOMAdapter.get().createCanvas();
|
|
canvas.width = pixelWidth;
|
|
canvas.height = pixelHeight;
|
|
const context = canvas.getContext("2d");
|
|
return { canvas, context };
|
|
}
|
|
/**
|
|
* Gets a Power-of-Two render texture or fullScreen texture
|
|
* @param minWidth - The minimum width of the render texture.
|
|
* @param minHeight - The minimum height of the render texture.
|
|
* @param resolution - The resolution of the render texture.
|
|
* @returns The new render texture.
|
|
*/
|
|
getOptimalCanvasAndContext(minWidth, minHeight, resolution = 1) {
|
|
minWidth = Math.ceil(minWidth * resolution - 1e-6);
|
|
minHeight = Math.ceil(minHeight * resolution - 1e-6);
|
|
minWidth = nextPow2(minWidth);
|
|
minHeight = nextPow2(minHeight);
|
|
const key = (minWidth << 17) + (minHeight << 1);
|
|
if (!this._canvasPool[key]) {
|
|
this._canvasPool[key] = [];
|
|
}
|
|
let canvasAndContext = this._canvasPool[key].pop();
|
|
if (!canvasAndContext) {
|
|
canvasAndContext = this._createCanvasAndContext(minWidth, minHeight);
|
|
}
|
|
return canvasAndContext;
|
|
}
|
|
/**
|
|
* Place a render texture back into the pool.
|
|
* @param canvasAndContext
|
|
*/
|
|
returnCanvasAndContext(canvasAndContext) {
|
|
const canvas = canvasAndContext.canvas;
|
|
const { width, height } = canvas;
|
|
const key = (width << 17) + (height << 1);
|
|
this._canvasPool[key].push(canvasAndContext);
|
|
}
|
|
clear() {
|
|
this._canvasPool = {};
|
|
}
|
|
}
|
|
const CanvasPool = new CanvasPoolClass();
|
|
|
|
"use strict";
|
|
var __defProp$T = Object.defineProperty;
|
|
var __defProps$m = Object.defineProperties;
|
|
var __getOwnPropDescs$m = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$T = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$T = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$T = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$T = (obj, key, value) => key in obj ? __defProp$T(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$T = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$T.call(b, prop))
|
|
__defNormalProp$T(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$T)
|
|
for (var prop of __getOwnPropSymbols$T(b)) {
|
|
if (__propIsEnum$T.call(b, prop))
|
|
__defNormalProp$T(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$m = (a, b) => __defProps$m(a, __getOwnPropDescs$m(b));
|
|
let count = 0;
|
|
class TexturePoolClass {
|
|
/**
|
|
* @param textureOptions - options that will be passed to BaseRenderTexture constructor
|
|
* @param {SCALE_MODE} [textureOptions.scaleMode] - See {@link SCALE_MODE} for possible values.
|
|
*/
|
|
constructor(textureOptions) {
|
|
this._poolKeyHash = /* @__PURE__ */ Object.create(null);
|
|
this._texturePool = {};
|
|
this.textureOptions = textureOptions || {};
|
|
this.enableFullScreen = false;
|
|
}
|
|
/**
|
|
* Creates texture with params that were specified in pool constructor.
|
|
* @param pixelWidth - Width of texture in pixels.
|
|
* @param pixelHeight - Height of texture in pixels.
|
|
* @param antialias
|
|
*/
|
|
createTexture(pixelWidth, pixelHeight, antialias) {
|
|
const textureSource = new TextureSource(__spreadProps$m(__spreadValues$T({}, this.textureOptions), {
|
|
width: pixelWidth,
|
|
height: pixelHeight,
|
|
resolution: 1,
|
|
antialias,
|
|
autoGarbageCollect: true
|
|
}));
|
|
return new Texture({
|
|
source: textureSource,
|
|
label: `texturePool_${count++}`
|
|
});
|
|
}
|
|
/**
|
|
* Gets a Power-of-Two render texture or fullScreen texture
|
|
* @param frameWidth - The minimum width of the render texture.
|
|
* @param frameHeight - The minimum height of the render texture.
|
|
* @param resolution - The resolution of the render texture.
|
|
* @param antialias
|
|
* @returns The new render texture.
|
|
*/
|
|
getOptimalTexture(frameWidth, frameHeight, resolution = 1, antialias) {
|
|
let po2Width = Math.ceil(frameWidth * resolution - 1e-6);
|
|
let po2Height = Math.ceil(frameHeight * resolution - 1e-6);
|
|
po2Width = nextPow2(po2Width);
|
|
po2Height = nextPow2(po2Height);
|
|
const key = (po2Width << 17) + (po2Height << 1) + (antialias ? 1 : 0);
|
|
if (!this._texturePool[key]) {
|
|
this._texturePool[key] = [];
|
|
}
|
|
let texture = this._texturePool[key].pop();
|
|
if (!texture) {
|
|
texture = this.createTexture(po2Width, po2Height, antialias);
|
|
}
|
|
texture.source._resolution = resolution;
|
|
texture.source.width = po2Width / resolution;
|
|
texture.source.height = po2Height / resolution;
|
|
texture.source.pixelWidth = po2Width;
|
|
texture.source.pixelHeight = po2Height;
|
|
texture.frame.x = 0;
|
|
texture.frame.y = 0;
|
|
texture.frame.width = frameWidth;
|
|
texture.frame.height = frameHeight;
|
|
texture.updateUvs();
|
|
this._poolKeyHash[texture.uid] = key;
|
|
return texture;
|
|
}
|
|
/**
|
|
* Gets extra texture of the same size as input renderTexture
|
|
* @param texture - The texture to check what size it is.
|
|
* @param antialias - Whether to use antialias.
|
|
* @returns A texture that is a power of two
|
|
*/
|
|
getSameSizeTexture(texture, antialias = false) {
|
|
const source = texture.source;
|
|
return this.getOptimalTexture(texture.width, texture.height, source._resolution, antialias);
|
|
}
|
|
/**
|
|
* Place a render texture back into the pool.
|
|
* @param renderTexture - The renderTexture to free
|
|
*/
|
|
returnTexture(renderTexture) {
|
|
const key = this._poolKeyHash[renderTexture.uid];
|
|
this._texturePool[key].push(renderTexture);
|
|
}
|
|
/**
|
|
* Clears the pool.
|
|
* @param destroyTextures - Destroy all stored textures.
|
|
*/
|
|
clear(destroyTextures) {
|
|
destroyTextures = destroyTextures !== false;
|
|
if (destroyTextures) {
|
|
for (const i in this._texturePool) {
|
|
const textures = this._texturePool[i];
|
|
if (textures) {
|
|
for (let j = 0; j < textures.length; j++) {
|
|
textures[j].destroy(true);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this._texturePool = {};
|
|
}
|
|
}
|
|
const TexturePool = new TexturePoolClass();
|
|
|
|
"use strict";
|
|
function checkRow(data, width, y) {
|
|
for (let x = 0, index = 4 * y * width; x < width; ++x, index += 4) {
|
|
if (data[index + 3] !== 0)
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
function checkColumn(data, width, x, top, bottom) {
|
|
const stride = 4 * width;
|
|
for (let y = top, index = top * stride + 4 * x; y <= bottom; ++y, index += stride) {
|
|
if (data[index + 3] !== 0)
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
function getCanvasBoundingBox(canvas, resolution = 1) {
|
|
const { width, height } = canvas;
|
|
const context = canvas.getContext("2d", {
|
|
willReadFrequently: true
|
|
});
|
|
if (context === null) {
|
|
throw new TypeError("Failed to get canvas 2D context");
|
|
}
|
|
const imageData = context.getImageData(0, 0, width, height);
|
|
const data = imageData.data;
|
|
let left = 0;
|
|
let top = 0;
|
|
let right = width - 1;
|
|
let bottom = height - 1;
|
|
while (top < height && checkRow(data, width, top))
|
|
++top;
|
|
if (top === height)
|
|
return Rectangle.EMPTY;
|
|
while (checkRow(data, width, bottom))
|
|
--bottom;
|
|
while (checkColumn(data, width, left, top, bottom))
|
|
++left;
|
|
while (checkColumn(data, width, right, top, bottom))
|
|
--right;
|
|
++right;
|
|
++bottom;
|
|
return new Rectangle(left / resolution, top / resolution, (right - left) / resolution, (bottom - top) / resolution);
|
|
}
|
|
|
|
"use strict";
|
|
const _FillGradient = class _FillGradient {
|
|
constructor(x0, y0, x1, y1) {
|
|
/** unique id for this fill gradient */
|
|
this.uid = uid$1("fillGradient");
|
|
this.type = "linear";
|
|
this.gradientStops = [];
|
|
this._styleKey = null;
|
|
this.x0 = x0;
|
|
this.y0 = y0;
|
|
this.x1 = x1;
|
|
this.y1 = y1;
|
|
}
|
|
addColorStop(offset, color) {
|
|
this.gradientStops.push({ offset, color: Color.shared.setValue(color).toHexa() });
|
|
this._styleKey = null;
|
|
return this;
|
|
}
|
|
// TODO move to the system!
|
|
buildLinearGradient() {
|
|
const defaultSize = _FillGradient.defaultTextureSize;
|
|
const { gradientStops } = this;
|
|
const canvas = DOMAdapter.get().createCanvas();
|
|
canvas.width = defaultSize;
|
|
canvas.height = defaultSize;
|
|
const ctx = canvas.getContext("2d");
|
|
const gradient = ctx.createLinearGradient(0, 0, _FillGradient.defaultTextureSize, 1);
|
|
for (let i = 0; i < gradientStops.length; i++) {
|
|
const stop = gradientStops[i];
|
|
gradient.addColorStop(stop.offset, stop.color);
|
|
}
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(0, 0, defaultSize, defaultSize);
|
|
this.texture = new Texture({
|
|
source: new ImageSource({
|
|
resource: canvas,
|
|
addressModeU: "clamp-to-edge",
|
|
addressModeV: "repeat"
|
|
})
|
|
});
|
|
const { x0, y0, x1, y1 } = this;
|
|
const m = new Matrix();
|
|
const dx = x1 - x0;
|
|
const dy = y1 - y0;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
const angle = Math.atan2(dy, dx);
|
|
m.translate(-x0, -y0);
|
|
m.scale(1 / defaultSize, 1 / defaultSize);
|
|
m.rotate(-angle);
|
|
m.scale(256 / dist, 1);
|
|
this.transform = m;
|
|
this._styleKey = null;
|
|
}
|
|
get styleKey() {
|
|
if (this._styleKey) {
|
|
return this._styleKey;
|
|
}
|
|
const stops = this.gradientStops.map((stop) => `${stop.offset}-${stop.color}`).join("-");
|
|
const texture = this.texture.uid;
|
|
const transform = this.transform.toArray().join("-");
|
|
return `fill-gradient-${this.uid}-${stops}-${texture}-${transform}-${this.x0}-${this.y0}-${this.x1}-${this.y1}`;
|
|
}
|
|
};
|
|
_FillGradient.defaultTextureSize = 256;
|
|
let FillGradient = _FillGradient;
|
|
|
|
"use strict";
|
|
const repetitionMap = {
|
|
repeat: {
|
|
addressModeU: "repeat",
|
|
addressModeV: "repeat"
|
|
},
|
|
"repeat-x": {
|
|
addressModeU: "repeat",
|
|
addressModeV: "clamp-to-edge"
|
|
},
|
|
"repeat-y": {
|
|
addressModeU: "clamp-to-edge",
|
|
addressModeV: "repeat"
|
|
},
|
|
"no-repeat": {
|
|
addressModeU: "clamp-to-edge",
|
|
addressModeV: "clamp-to-edge"
|
|
}
|
|
};
|
|
class FillPattern {
|
|
constructor(texture, repetition) {
|
|
/** unique id for this fill pattern */
|
|
this.uid = uid$1("fillPattern");
|
|
this.transform = new Matrix();
|
|
this._styleKey = null;
|
|
this.texture = texture;
|
|
this.transform.scale(
|
|
1 / texture.frame.width,
|
|
1 / texture.frame.height
|
|
);
|
|
if (repetition) {
|
|
texture.source.style.addressModeU = repetitionMap[repetition].addressModeU;
|
|
texture.source.style.addressModeV = repetitionMap[repetition].addressModeV;
|
|
}
|
|
}
|
|
setTransform(transform) {
|
|
const texture = this.texture;
|
|
this.transform.copyFrom(transform);
|
|
this.transform.invert();
|
|
this.transform.scale(
|
|
1 / texture.frame.width,
|
|
1 / texture.frame.height
|
|
);
|
|
this._styleKey = null;
|
|
}
|
|
get styleKey() {
|
|
if (this._styleKey)
|
|
return this._styleKey;
|
|
this._styleKey = `fill-pattern-${this.uid}-${this.texture.uid}-${this.transform.toArray().join("-")}`;
|
|
return this._styleKey;
|
|
}
|
|
}
|
|
|
|
var parseSvgPath = parse;
|
|
|
|
/**
|
|
* expected argument lengths
|
|
* @type {Object}
|
|
*/
|
|
|
|
var length = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0};
|
|
|
|
/**
|
|
* segment pattern
|
|
* @type {RegExp}
|
|
*/
|
|
|
|
var segment = /([astvzqmhlc])([^astvzqmhlc]*)/ig;
|
|
|
|
/**
|
|
* parse an svg path data string. Generates an Array
|
|
* of commands where each command is an Array of the
|
|
* form `[command, arg1, arg2, ...]`
|
|
*
|
|
* @param {String} path
|
|
* @return {Array}
|
|
*/
|
|
|
|
function parse(path) {
|
|
var data = [];
|
|
path.replace(segment, function(_, command, args){
|
|
var type = command.toLowerCase();
|
|
args = parseValues(args);
|
|
|
|
// overloaded moveTo
|
|
if (type == 'm' && args.length > 2) {
|
|
data.push([command].concat(args.splice(0, 2)));
|
|
type = 'l';
|
|
command = command == 'm' ? 'l' : 'L';
|
|
}
|
|
|
|
while (true) {
|
|
if (args.length == length[type]) {
|
|
args.unshift(command);
|
|
return data.push(args)
|
|
}
|
|
if (args.length < length[type]) throw new Error('malformed path data')
|
|
data.push([command].concat(args.splice(0, length[type])));
|
|
}
|
|
});
|
|
return data
|
|
}
|
|
|
|
var number = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/ig;
|
|
|
|
function parseValues(args) {
|
|
var numbers = args.match(number);
|
|
return numbers ? numbers.map(Number) : []
|
|
}
|
|
|
|
var parse$1 = /*@__PURE__*/getDefaultExportFromCjs(parseSvgPath);
|
|
|
|
"use strict";
|
|
function SVGToGraphicsPath(svgPath, path) {
|
|
const commands = parse$1(svgPath);
|
|
const subpaths = [];
|
|
let currentSubPath = null;
|
|
let lastX = 0;
|
|
let lastY = 0;
|
|
for (let i = 0; i < commands.length; i++) {
|
|
const command = commands[i];
|
|
const type = command[0];
|
|
const data = command;
|
|
switch (type) {
|
|
case "M":
|
|
lastX = data[1];
|
|
lastY = data[2];
|
|
path.moveTo(lastX, lastY);
|
|
break;
|
|
case "m":
|
|
lastX += data[1];
|
|
lastY += data[2];
|
|
path.moveTo(lastX, lastY);
|
|
break;
|
|
case "H":
|
|
lastX = data[1];
|
|
path.lineTo(lastX, lastY);
|
|
break;
|
|
case "h":
|
|
lastX += data[1];
|
|
path.lineTo(lastX, lastY);
|
|
break;
|
|
case "V":
|
|
lastY = data[1];
|
|
path.lineTo(lastX, lastY);
|
|
break;
|
|
case "v":
|
|
lastY += data[1];
|
|
path.lineTo(lastX, lastY);
|
|
break;
|
|
case "L":
|
|
lastX = data[1];
|
|
lastY = data[2];
|
|
path.lineTo(lastX, lastY);
|
|
break;
|
|
case "l":
|
|
lastX += data[1];
|
|
lastY += data[2];
|
|
path.lineTo(lastX, lastY);
|
|
break;
|
|
case "C":
|
|
lastX = data[5];
|
|
lastY = data[6];
|
|
path.bezierCurveTo(
|
|
data[1],
|
|
data[2],
|
|
data[3],
|
|
data[4],
|
|
lastX,
|
|
lastY
|
|
);
|
|
break;
|
|
case "c":
|
|
path.bezierCurveTo(
|
|
lastX + data[1],
|
|
lastY + data[2],
|
|
lastX + data[3],
|
|
lastY + data[4],
|
|
lastX + data[5],
|
|
lastY + data[6]
|
|
);
|
|
lastX += data[5];
|
|
lastY += data[6];
|
|
break;
|
|
case "S":
|
|
lastX = data[3];
|
|
lastY = data[4];
|
|
path.bezierCurveToShort(
|
|
data[1],
|
|
data[2],
|
|
lastX,
|
|
lastY
|
|
);
|
|
break;
|
|
case "s":
|
|
path.bezierCurveToShort(
|
|
lastX + data[1],
|
|
lastY + data[2],
|
|
lastX + data[3],
|
|
lastY + data[4]
|
|
);
|
|
lastX += data[3];
|
|
lastY += data[4];
|
|
break;
|
|
case "Q":
|
|
lastX = data[3];
|
|
lastY = data[4];
|
|
path.quadraticCurveTo(
|
|
data[1],
|
|
data[2],
|
|
lastX,
|
|
lastY
|
|
);
|
|
break;
|
|
case "q":
|
|
path.quadraticCurveTo(
|
|
lastX + data[1],
|
|
lastY + data[2],
|
|
lastX + data[3],
|
|
lastY + data[4]
|
|
);
|
|
lastX += data[3];
|
|
lastY += data[4];
|
|
break;
|
|
case "T":
|
|
lastX = data[1];
|
|
lastY = data[2];
|
|
path.quadraticCurveToShort(
|
|
lastX,
|
|
lastY
|
|
);
|
|
break;
|
|
case "t":
|
|
lastX += data[1];
|
|
lastY += data[2];
|
|
path.quadraticCurveToShort(
|
|
lastX,
|
|
lastY
|
|
);
|
|
break;
|
|
case "A":
|
|
lastX = data[6];
|
|
lastY = data[7];
|
|
path.arcToSvg(
|
|
data[1],
|
|
data[2],
|
|
data[3],
|
|
data[4],
|
|
data[5],
|
|
lastX,
|
|
lastY
|
|
);
|
|
break;
|
|
case "a":
|
|
lastX += data[6];
|
|
lastY += data[7];
|
|
path.arcToSvg(
|
|
data[1],
|
|
data[2],
|
|
data[3],
|
|
data[4],
|
|
data[5],
|
|
lastX,
|
|
lastY
|
|
);
|
|
break;
|
|
case "Z":
|
|
case "z":
|
|
path.closePath();
|
|
if (subpaths.length > 0) {
|
|
currentSubPath = subpaths.pop();
|
|
if (currentSubPath) {
|
|
lastX = currentSubPath.startX;
|
|
lastY = currentSubPath.startY;
|
|
} else {
|
|
lastX = 0;
|
|
lastY = 0;
|
|
}
|
|
}
|
|
currentSubPath = null;
|
|
break;
|
|
default:
|
|
warn(`Unknown SVG path command: ${type}`);
|
|
}
|
|
if (type !== "Z" && type !== "z") {
|
|
if (currentSubPath === null) {
|
|
currentSubPath = { startX: lastX, startY: lastY };
|
|
subpaths.push(currentSubPath);
|
|
}
|
|
}
|
|
}
|
|
return path;
|
|
}
|
|
|
|
"use strict";
|
|
class Circle {
|
|
/**
|
|
* @param x - The X coordinate of the center of this circle
|
|
* @param y - The Y coordinate of the center of this circle
|
|
* @param radius - The radius of the circle
|
|
*/
|
|
constructor(x = 0, y = 0, radius = 0) {
|
|
/**
|
|
* The type of the object, mainly used to avoid `instanceof` checks
|
|
* @default 'circle'
|
|
*/
|
|
this.type = "circle";
|
|
this.x = x;
|
|
this.y = y;
|
|
this.radius = radius;
|
|
}
|
|
/**
|
|
* Creates a clone of this Circle instance
|
|
* @returns A copy of the Circle
|
|
*/
|
|
clone() {
|
|
return new Circle(this.x, this.y, this.radius);
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this circle
|
|
* @param x - The X coordinate of the point to test
|
|
* @param y - The Y coordinate of the point to test
|
|
* @returns Whether the x/y coordinates are within this Circle
|
|
*/
|
|
contains(x, y) {
|
|
if (this.radius <= 0)
|
|
return false;
|
|
const r2 = this.radius * this.radius;
|
|
let dx = this.x - x;
|
|
let dy = this.y - y;
|
|
dx *= dx;
|
|
dy *= dy;
|
|
return dx + dy <= r2;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this circle including the stroke.
|
|
* @param x - The X coordinate of the point to test
|
|
* @param y - The Y coordinate of the point to test
|
|
* @param width - The width of the line to check
|
|
* @returns Whether the x/y coordinates are within this Circle
|
|
*/
|
|
strokeContains(x, y, width) {
|
|
if (this.radius === 0)
|
|
return false;
|
|
const dx = this.x - x;
|
|
const dy = this.y - y;
|
|
const r = this.radius;
|
|
const w2 = width / 2;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
return distance < r + w2 && distance > r - w2;
|
|
}
|
|
/**
|
|
* Returns the framing rectangle of the circle as a Rectangle object
|
|
* @param out
|
|
* @returns The framing rectangle
|
|
*/
|
|
getBounds(out) {
|
|
out = out || new Rectangle();
|
|
out.x = this.x - this.radius;
|
|
out.y = this.y - this.radius;
|
|
out.width = this.radius * 2;
|
|
out.height = this.radius * 2;
|
|
return out;
|
|
}
|
|
/**
|
|
* Copies another circle to this one.
|
|
* @param circle - The circle to copy from.
|
|
* @returns Returns itself.
|
|
*/
|
|
copyFrom(circle) {
|
|
this.x = circle.x;
|
|
this.y = circle.y;
|
|
this.radius = circle.radius;
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies this circle to another one.
|
|
* @param circle - The circle to copy to.
|
|
* @returns Returns given parameter.
|
|
*/
|
|
copyTo(circle) {
|
|
circle.copyFrom(this);
|
|
return circle;
|
|
}
|
|
toString() {
|
|
return `[pixi.js/math:Circle x=${this.x} y=${this.y} radius=${this.radius}]`;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class Ellipse {
|
|
/**
|
|
* @param x - The X coordinate of the center of this ellipse
|
|
* @param y - The Y coordinate of the center of this ellipse
|
|
* @param halfWidth - The half width of this ellipse
|
|
* @param halfHeight - The half height of this ellipse
|
|
*/
|
|
constructor(x = 0, y = 0, halfWidth = 0, halfHeight = 0) {
|
|
/**
|
|
* The type of the object, mainly used to avoid `instanceof` checks
|
|
* @default 'ellipse'
|
|
*/
|
|
this.type = "ellipse";
|
|
this.x = x;
|
|
this.y = y;
|
|
this.halfWidth = halfWidth;
|
|
this.halfHeight = halfHeight;
|
|
}
|
|
/**
|
|
* Creates a clone of this Ellipse instance
|
|
* @returns {Ellipse} A copy of the ellipse
|
|
*/
|
|
clone() {
|
|
return new Ellipse(this.x, this.y, this.halfWidth, this.halfHeight);
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this ellipse
|
|
* @param x - The X coordinate of the point to test
|
|
* @param y - The Y coordinate of the point to test
|
|
* @returns Whether the x/y coords are within this ellipse
|
|
*/
|
|
contains(x, y) {
|
|
if (this.halfWidth <= 0 || this.halfHeight <= 0) {
|
|
return false;
|
|
}
|
|
let normx = (x - this.x) / this.halfWidth;
|
|
let normy = (y - this.y) / this.halfHeight;
|
|
normx *= normx;
|
|
normy *= normy;
|
|
return normx + normy <= 1;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this ellipse including stroke
|
|
* @param x - The X coordinate of the point to test
|
|
* @param y - The Y coordinate of the point to test
|
|
* @param width
|
|
* @returns Whether the x/y coords are within this ellipse
|
|
*/
|
|
strokeContains(x, y, width) {
|
|
const { halfWidth, halfHeight } = this;
|
|
if (halfWidth <= 0 || halfHeight <= 0) {
|
|
return false;
|
|
}
|
|
const halfStrokeWidth = width / 2;
|
|
const innerA = halfWidth - halfStrokeWidth;
|
|
const innerB = halfHeight - halfStrokeWidth;
|
|
const outerA = halfWidth + halfStrokeWidth;
|
|
const outerB = halfHeight + halfStrokeWidth;
|
|
const normalizedX = x - this.x;
|
|
const normalizedY = y - this.y;
|
|
const innerEllipse = normalizedX * normalizedX / (innerA * innerA) + normalizedY * normalizedY / (innerB * innerB);
|
|
const outerEllipse = normalizedX * normalizedX / (outerA * outerA) + normalizedY * normalizedY / (outerB * outerB);
|
|
return innerEllipse > 1 && outerEllipse <= 1;
|
|
}
|
|
/**
|
|
* Returns the framing rectangle of the ellipse as a Rectangle object
|
|
* @param out
|
|
* @returns The framing rectangle
|
|
*/
|
|
getBounds(out) {
|
|
out = out || new Rectangle();
|
|
out.x = this.x - this.halfWidth;
|
|
out.y = this.y - this.halfHeight;
|
|
out.width = this.halfWidth * 2;
|
|
out.height = this.halfHeight * 2;
|
|
return out;
|
|
}
|
|
/**
|
|
* Copies another ellipse to this one.
|
|
* @param ellipse - The ellipse to copy from.
|
|
* @returns Returns itself.
|
|
*/
|
|
copyFrom(ellipse) {
|
|
this.x = ellipse.x;
|
|
this.y = ellipse.y;
|
|
this.halfWidth = ellipse.halfWidth;
|
|
this.halfHeight = ellipse.halfHeight;
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies this ellipse to another one.
|
|
* @param ellipse - The ellipse to copy to.
|
|
* @returns Returns given parameter.
|
|
*/
|
|
copyTo(ellipse) {
|
|
ellipse.copyFrom(this);
|
|
return ellipse;
|
|
}
|
|
toString() {
|
|
return `[pixi.js/math:Ellipse x=${this.x} y=${this.y} halfWidth=${this.halfWidth} halfHeight=${this.halfHeight}]`;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function squaredDistanceToLineSegment(x, y, x1, y1, x2, y2) {
|
|
const a = x - x1;
|
|
const b = y - y1;
|
|
const c = x2 - x1;
|
|
const d = y2 - y1;
|
|
const dot = a * c + b * d;
|
|
const lenSq = c * c + d * d;
|
|
let param = -1;
|
|
if (lenSq !== 0) {
|
|
param = dot / lenSq;
|
|
}
|
|
let xx;
|
|
let yy;
|
|
if (param < 0) {
|
|
xx = x1;
|
|
yy = y1;
|
|
} else if (param > 1) {
|
|
xx = x2;
|
|
yy = y2;
|
|
} else {
|
|
xx = x1 + param * c;
|
|
yy = y1 + param * d;
|
|
}
|
|
const dx = x - xx;
|
|
const dy = y - yy;
|
|
return dx * dx + dy * dy;
|
|
}
|
|
|
|
"use strict";
|
|
class Polygon {
|
|
/**
|
|
* @param points - This can be an array of Points
|
|
* that form the polygon, a flat array of numbers that will be interpreted as [x,y, x,y, ...], or
|
|
* the arguments passed can be all the points of the polygon e.g.
|
|
* `new Polygon(new Point(), new Point(), ...)`, or the arguments passed can be flat
|
|
* x,y values e.g. `new Polygon(x,y, x,y, x,y, ...)` where `x` and `y` are Numbers.
|
|
*/
|
|
constructor(...points) {
|
|
/**
|
|
* The type of the object, mainly used to avoid `instanceof` checks
|
|
* @default 'polygon'
|
|
*/
|
|
this.type = "polygon";
|
|
let flat = Array.isArray(points[0]) ? points[0] : points;
|
|
if (typeof flat[0] !== "number") {
|
|
const p = [];
|
|
for (let i = 0, il = flat.length; i < il; i++) {
|
|
p.push(flat[i].x, flat[i].y);
|
|
}
|
|
flat = p;
|
|
}
|
|
this.points = flat;
|
|
this.closePath = true;
|
|
}
|
|
/**
|
|
* Creates a clone of this polygon.
|
|
* @returns - A copy of the polygon.
|
|
*/
|
|
clone() {
|
|
const points = this.points.slice();
|
|
const polygon = new Polygon(points);
|
|
polygon.closePath = this.closePath;
|
|
return polygon;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates passed to this function are contained within this polygon.
|
|
* @param x - The X coordinate of the point to test.
|
|
* @param y - The Y coordinate of the point to test.
|
|
* @returns - Whether the x/y coordinates are within this polygon.
|
|
*/
|
|
contains(x, y) {
|
|
let inside = false;
|
|
const length = this.points.length / 2;
|
|
for (let i = 0, j = length - 1; i < length; j = i++) {
|
|
const xi = this.points[i * 2];
|
|
const yi = this.points[i * 2 + 1];
|
|
const xj = this.points[j * 2];
|
|
const yj = this.points[j * 2 + 1];
|
|
const intersect = yi > y !== yj > y && x < (xj - xi) * ((y - yi) / (yj - yi)) + xi;
|
|
if (intersect) {
|
|
inside = !inside;
|
|
}
|
|
}
|
|
return inside;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this polygon including the stroke.
|
|
* @param x - The X coordinate of the point to test
|
|
* @param y - The Y coordinate of the point to test
|
|
* @param strokeWidth - The width of the line to check
|
|
* @returns Whether the x/y coordinates are within this polygon
|
|
*/
|
|
strokeContains(x, y, strokeWidth) {
|
|
const halfStrokeWidth = strokeWidth / 2;
|
|
const halfStrokeWidthSqrd = halfStrokeWidth * halfStrokeWidth;
|
|
const { points } = this;
|
|
const iterationLength = points.length - (this.closePath ? 0 : 2);
|
|
for (let i = 0; i < iterationLength; i += 2) {
|
|
const x1 = points[i];
|
|
const y1 = points[i + 1];
|
|
const x2 = points[(i + 2) % points.length];
|
|
const y2 = points[(i + 3) % points.length];
|
|
const distanceSqrd = squaredDistanceToLineSegment(x, y, x1, y1, x2, y2);
|
|
if (distanceSqrd <= halfStrokeWidthSqrd) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* Returns the framing rectangle of the polygon as a Rectangle object
|
|
* @param out - optional rectangle to store the result
|
|
* @returns The framing rectangle
|
|
*/
|
|
getBounds(out) {
|
|
out = out || new Rectangle();
|
|
const points = this.points;
|
|
let minX = Infinity;
|
|
let maxX = -Infinity;
|
|
let minY = Infinity;
|
|
let maxY = -Infinity;
|
|
for (let i = 0, n = points.length; i < n; i += 2) {
|
|
const x = points[i];
|
|
const y = points[i + 1];
|
|
minX = x < minX ? x : minX;
|
|
maxX = x > maxX ? x : maxX;
|
|
minY = y < minY ? y : minY;
|
|
maxY = y > maxY ? y : maxY;
|
|
}
|
|
out.x = minX;
|
|
out.width = maxX - minX;
|
|
out.y = minY;
|
|
out.height = maxY - minY;
|
|
return out;
|
|
}
|
|
/**
|
|
* Copies another polygon to this one.
|
|
* @param polygon - The polygon to copy from.
|
|
* @returns Returns itself.
|
|
*/
|
|
copyFrom(polygon) {
|
|
this.points = polygon.points.slice();
|
|
this.closePath = polygon.closePath;
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies this polygon to another one.
|
|
* @param polygon - The polygon to copy to.
|
|
* @returns Returns given parameter.
|
|
*/
|
|
copyTo(polygon) {
|
|
polygon.copyFrom(this);
|
|
return polygon;
|
|
}
|
|
toString() {
|
|
return `[pixi.js/math:PolygoncloseStroke=${this.closePath}points=${this.points.reduce((pointsDesc, currentPoint) => `${pointsDesc}, ${currentPoint}`, "")}]`;
|
|
}
|
|
/**
|
|
* Get the last X coordinate of the polygon
|
|
* @readonly
|
|
*/
|
|
get lastX() {
|
|
return this.points[this.points.length - 2];
|
|
}
|
|
/**
|
|
* Get the last Y coordinate of the polygon
|
|
* @readonly
|
|
*/
|
|
get lastY() {
|
|
return this.points[this.points.length - 1];
|
|
}
|
|
/**
|
|
* Get the first X coordinate of the polygon
|
|
* @readonly
|
|
*/
|
|
get x() {
|
|
return this.points[this.points.length - 2];
|
|
}
|
|
/**
|
|
* Get the first Y coordinate of the polygon
|
|
* @readonly
|
|
*/
|
|
get y() {
|
|
return this.points[this.points.length - 1];
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const isCornerWithinStroke = (pX, pY, cornerX, cornerY, radius, halfStrokeWidth) => {
|
|
const dx = pX - cornerX;
|
|
const dy = pY - cornerY;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
return distance >= radius - halfStrokeWidth && distance <= radius + halfStrokeWidth;
|
|
};
|
|
class RoundedRectangle {
|
|
/**
|
|
* @param x - The X coordinate of the upper-left corner of the rounded rectangle
|
|
* @param y - The Y coordinate of the upper-left corner of the rounded rectangle
|
|
* @param width - The overall width of this rounded rectangle
|
|
* @param height - The overall height of this rounded rectangle
|
|
* @param radius - Controls the radius of the rounded corners
|
|
*/
|
|
constructor(x = 0, y = 0, width = 0, height = 0, radius = 20) {
|
|
/**
|
|
* The type of the object, mainly used to avoid `instanceof` checks
|
|
* @default 'roundedRectangle'
|
|
*/
|
|
this.type = "roundedRectangle";
|
|
this.x = x;
|
|
this.y = y;
|
|
this.width = width;
|
|
this.height = height;
|
|
this.radius = radius;
|
|
}
|
|
/**
|
|
* Returns the framing rectangle of the rounded rectangle as a Rectangle object
|
|
* @param out - optional rectangle to store the result
|
|
* @returns The framing rectangle
|
|
*/
|
|
getBounds(out) {
|
|
out = out || new Rectangle();
|
|
out.x = this.x;
|
|
out.y = this.y;
|
|
out.width = this.width;
|
|
out.height = this.height;
|
|
return out;
|
|
}
|
|
/**
|
|
* Creates a clone of this Rounded Rectangle.
|
|
* @returns - A copy of the rounded rectangle.
|
|
*/
|
|
clone() {
|
|
return new RoundedRectangle(this.x, this.y, this.width, this.height, this.radius);
|
|
}
|
|
/**
|
|
* Copies another rectangle to this one.
|
|
* @param rectangle - The rectangle to copy from.
|
|
* @returns Returns itself.
|
|
*/
|
|
copyFrom(rectangle) {
|
|
this.x = rectangle.x;
|
|
this.y = rectangle.y;
|
|
this.width = rectangle.width;
|
|
this.height = rectangle.height;
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies this rectangle to another one.
|
|
* @param rectangle - The rectangle to copy to.
|
|
* @returns Returns given parameter.
|
|
*/
|
|
copyTo(rectangle) {
|
|
rectangle.copyFrom(this);
|
|
return rectangle;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this Rounded Rectangle
|
|
* @param x - The X coordinate of the point to test.
|
|
* @param y - The Y coordinate of the point to test.
|
|
* @returns - Whether the x/y coordinates are within this Rounded Rectangle.
|
|
*/
|
|
contains(x, y) {
|
|
if (this.width <= 0 || this.height <= 0) {
|
|
return false;
|
|
}
|
|
if (x >= this.x && x <= this.x + this.width) {
|
|
if (y >= this.y && y <= this.y + this.height) {
|
|
const radius = Math.max(0, Math.min(this.radius, Math.min(this.width, this.height) / 2));
|
|
if (y >= this.y + radius && y <= this.y + this.height - radius || x >= this.x + radius && x <= this.x + this.width - radius) {
|
|
return true;
|
|
}
|
|
let dx = x - (this.x + radius);
|
|
let dy = y - (this.y + radius);
|
|
const radius2 = radius * radius;
|
|
if (dx * dx + dy * dy <= radius2) {
|
|
return true;
|
|
}
|
|
dx = x - (this.x + this.width - radius);
|
|
if (dx * dx + dy * dy <= radius2) {
|
|
return true;
|
|
}
|
|
dy = y - (this.y + this.height - radius);
|
|
if (dx * dx + dy * dy <= radius2) {
|
|
return true;
|
|
}
|
|
dx = x - (this.x + radius);
|
|
if (dx * dx + dy * dy <= radius2) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this rectangle including the stroke.
|
|
* @param pX - The X coordinate of the point to test
|
|
* @param pY - The Y coordinate of the point to test
|
|
* @param strokeWidth - The width of the line to check
|
|
* @returns Whether the x/y coordinates are within this rectangle
|
|
*/
|
|
strokeContains(pX, pY, strokeWidth) {
|
|
const { x, y, width, height, radius } = this;
|
|
const halfStrokeWidth = strokeWidth / 2;
|
|
const innerX = x + radius;
|
|
const innerY = y + radius;
|
|
const innerWidth = width - radius * 2;
|
|
const innerHeight = height - radius * 2;
|
|
const rightBound = x + width;
|
|
const bottomBound = y + height;
|
|
if ((pX >= x - halfStrokeWidth && pX <= x + halfStrokeWidth || pX >= rightBound - halfStrokeWidth && pX <= rightBound + halfStrokeWidth) && pY >= innerY && pY <= innerY + innerHeight) {
|
|
return true;
|
|
}
|
|
if ((pY >= y - halfStrokeWidth && pY <= y + halfStrokeWidth || pY >= bottomBound - halfStrokeWidth && pY <= bottomBound + halfStrokeWidth) && pX >= innerX && pX <= innerX + innerWidth) {
|
|
return true;
|
|
}
|
|
return (
|
|
// Top-left
|
|
pX < innerX && pY < innerY && isCornerWithinStroke(pX, pY, innerX, innerY, radius, halfStrokeWidth) || pX > rightBound - radius && pY < innerY && isCornerWithinStroke(pX, pY, rightBound - radius, innerY, radius, halfStrokeWidth) || pX > rightBound - radius && pY > bottomBound - radius && isCornerWithinStroke(pX, pY, rightBound - radius, bottomBound - radius, radius, halfStrokeWidth) || pX < innerX && pY > bottomBound - radius && isCornerWithinStroke(pX, pY, innerX, bottomBound - radius, radius, halfStrokeWidth)
|
|
);
|
|
}
|
|
toString() {
|
|
return `[pixi.js/math:RoundedRectangle x=${this.x} y=${this.y}width=${this.width} height=${this.height} radius=${this.radius}]`;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const RECURSION_LIMIT$1 = 8;
|
|
const FLT_EPSILON$1 = 11920929e-14;
|
|
const PATH_DISTANCE_EPSILON$1 = 1;
|
|
const curveAngleToleranceEpsilon$1 = 0.01;
|
|
const mAngleTolerance$1 = 0;
|
|
const mCuspLimit = 0;
|
|
function buildAdaptiveBezier(points, sX, sY, cp1x, cp1y, cp2x, cp2y, eX, eY, smoothness) {
|
|
const scale = 1;
|
|
const smoothing = Math.min(
|
|
0.99,
|
|
// a value of 1.0 actually inverts smoothing, so we cap it at 0.99
|
|
Math.max(0, smoothness != null ? smoothness : GraphicsContextSystem.defaultOptions.bezierSmoothness)
|
|
);
|
|
let distanceTolerance = (PATH_DISTANCE_EPSILON$1 - smoothing) / scale;
|
|
distanceTolerance *= distanceTolerance;
|
|
begin$1(sX, sY, cp1x, cp1y, cp2x, cp2y, eX, eY, points, distanceTolerance);
|
|
return points;
|
|
}
|
|
function begin$1(sX, sY, cp1x, cp1y, cp2x, cp2y, eX, eY, points, distanceTolerance) {
|
|
recursive$1(sX, sY, cp1x, cp1y, cp2x, cp2y, eX, eY, points, distanceTolerance, 0);
|
|
points.push(eX, eY);
|
|
}
|
|
function recursive$1(x1, y1, x2, y2, x3, y3, x4, y4, points, distanceTolerance, level) {
|
|
if (level > RECURSION_LIMIT$1) {
|
|
return;
|
|
}
|
|
const pi = Math.PI;
|
|
const x12 = (x1 + x2) / 2;
|
|
const y12 = (y1 + y2) / 2;
|
|
const x23 = (x2 + x3) / 2;
|
|
const y23 = (y2 + y3) / 2;
|
|
const x34 = (x3 + x4) / 2;
|
|
const y34 = (y3 + y4) / 2;
|
|
const x123 = (x12 + x23) / 2;
|
|
const y123 = (y12 + y23) / 2;
|
|
const x234 = (x23 + x34) / 2;
|
|
const y234 = (y23 + y34) / 2;
|
|
const x1234 = (x123 + x234) / 2;
|
|
const y1234 = (y123 + y234) / 2;
|
|
if (level > 0) {
|
|
let dx = x4 - x1;
|
|
let dy = y4 - y1;
|
|
const d2 = Math.abs((x2 - x4) * dy - (y2 - y4) * dx);
|
|
const d3 = Math.abs((x3 - x4) * dy - (y3 - y4) * dx);
|
|
let da1;
|
|
let da2;
|
|
if (d2 > FLT_EPSILON$1 && d3 > FLT_EPSILON$1) {
|
|
if ((d2 + d3) * (d2 + d3) <= distanceTolerance * (dx * dx + dy * dy)) {
|
|
if (mAngleTolerance$1 < curveAngleToleranceEpsilon$1) {
|
|
points.push(x1234, y1234);
|
|
return;
|
|
}
|
|
const a23 = Math.atan2(y3 - y2, x3 - x2);
|
|
da1 = Math.abs(a23 - Math.atan2(y2 - y1, x2 - x1));
|
|
da2 = Math.abs(Math.atan2(y4 - y3, x4 - x3) - a23);
|
|
if (da1 >= pi)
|
|
da1 = 2 * pi - da1;
|
|
if (da2 >= pi)
|
|
da2 = 2 * pi - da2;
|
|
if (da1 + da2 < mAngleTolerance$1) {
|
|
points.push(x1234, y1234);
|
|
return;
|
|
}
|
|
if (mCuspLimit !== 0) {
|
|
if (da1 > mCuspLimit) {
|
|
points.push(x2, y2);
|
|
return;
|
|
}
|
|
if (da2 > mCuspLimit) {
|
|
points.push(x3, y3);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
} else if (d2 > FLT_EPSILON$1) {
|
|
if (d2 * d2 <= distanceTolerance * (dx * dx + dy * dy)) {
|
|
if (mAngleTolerance$1 < curveAngleToleranceEpsilon$1) {
|
|
points.push(x1234, y1234);
|
|
return;
|
|
}
|
|
da1 = Math.abs(Math.atan2(y3 - y2, x3 - x2) - Math.atan2(y2 - y1, x2 - x1));
|
|
if (da1 >= pi)
|
|
da1 = 2 * pi - da1;
|
|
if (da1 < mAngleTolerance$1) {
|
|
points.push(x2, y2);
|
|
points.push(x3, y3);
|
|
return;
|
|
}
|
|
if (mCuspLimit !== 0) {
|
|
if (da1 > mCuspLimit) {
|
|
points.push(x2, y2);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
} else if (d3 > FLT_EPSILON$1) {
|
|
if (d3 * d3 <= distanceTolerance * (dx * dx + dy * dy)) {
|
|
if (mAngleTolerance$1 < curveAngleToleranceEpsilon$1) {
|
|
points.push(x1234, y1234);
|
|
return;
|
|
}
|
|
da1 = Math.abs(Math.atan2(y4 - y3, x4 - x3) - Math.atan2(y3 - y2, x3 - x2));
|
|
if (da1 >= pi)
|
|
da1 = 2 * pi - da1;
|
|
if (da1 < mAngleTolerance$1) {
|
|
points.push(x2, y2);
|
|
points.push(x3, y3);
|
|
return;
|
|
}
|
|
if (mCuspLimit !== 0) {
|
|
if (da1 > mCuspLimit) {
|
|
points.push(x3, y3);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
dx = x1234 - (x1 + x4) / 2;
|
|
dy = y1234 - (y1 + y4) / 2;
|
|
if (dx * dx + dy * dy <= distanceTolerance) {
|
|
points.push(x1234, y1234);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
recursive$1(x1, y1, x12, y12, x123, y123, x1234, y1234, points, distanceTolerance, level + 1);
|
|
recursive$1(x1234, y1234, x234, y234, x34, y34, x4, y4, points, distanceTolerance, level + 1);
|
|
}
|
|
|
|
"use strict";
|
|
const RECURSION_LIMIT = 8;
|
|
const FLT_EPSILON = 11920929e-14;
|
|
const PATH_DISTANCE_EPSILON = 1;
|
|
const curveAngleToleranceEpsilon = 0.01;
|
|
const mAngleTolerance = 0;
|
|
function buildAdaptiveQuadratic(points, sX, sY, cp1x, cp1y, eX, eY, smoothness) {
|
|
const scale = 1;
|
|
const smoothing = Math.min(
|
|
0.99,
|
|
// a value of 1.0 actually inverts smoothing, so we cap it at 0.99
|
|
Math.max(0, smoothness != null ? smoothness : GraphicsContextSystem.defaultOptions.bezierSmoothness)
|
|
);
|
|
let distanceTolerance = (PATH_DISTANCE_EPSILON - smoothing) / scale;
|
|
distanceTolerance *= distanceTolerance;
|
|
begin(sX, sY, cp1x, cp1y, eX, eY, points, distanceTolerance);
|
|
return points;
|
|
}
|
|
function begin(sX, sY, cp1x, cp1y, eX, eY, points, distanceTolerance) {
|
|
recursive(points, sX, sY, cp1x, cp1y, eX, eY, distanceTolerance, 0);
|
|
points.push(eX, eY);
|
|
}
|
|
function recursive(points, x1, y1, x2, y2, x3, y3, distanceTolerance, level) {
|
|
if (level > RECURSION_LIMIT) {
|
|
return;
|
|
}
|
|
const pi = Math.PI;
|
|
const x12 = (x1 + x2) / 2;
|
|
const y12 = (y1 + y2) / 2;
|
|
const x23 = (x2 + x3) / 2;
|
|
const y23 = (y2 + y3) / 2;
|
|
const x123 = (x12 + x23) / 2;
|
|
const y123 = (y12 + y23) / 2;
|
|
let dx = x3 - x1;
|
|
let dy = y3 - y1;
|
|
const d = Math.abs((x2 - x3) * dy - (y2 - y3) * dx);
|
|
if (d > FLT_EPSILON) {
|
|
if (d * d <= distanceTolerance * (dx * dx + dy * dy)) {
|
|
if (mAngleTolerance < curveAngleToleranceEpsilon) {
|
|
points.push(x123, y123);
|
|
return;
|
|
}
|
|
let da = Math.abs(Math.atan2(y3 - y2, x3 - x2) - Math.atan2(y2 - y1, x2 - x1));
|
|
if (da >= pi)
|
|
da = 2 * pi - da;
|
|
if (da < mAngleTolerance) {
|
|
points.push(x123, y123);
|
|
return;
|
|
}
|
|
}
|
|
} else {
|
|
dx = x123 - (x1 + x3) / 2;
|
|
dy = y123 - (y1 + y3) / 2;
|
|
if (dx * dx + dy * dy <= distanceTolerance) {
|
|
points.push(x123, y123);
|
|
return;
|
|
}
|
|
}
|
|
recursive(points, x1, y1, x12, y12, x123, y123, distanceTolerance, level + 1);
|
|
recursive(points, x123, y123, x23, y23, x3, y3, distanceTolerance, level + 1);
|
|
}
|
|
|
|
"use strict";
|
|
function buildArc(points, x, y, radius, start, end, clockwise, steps) {
|
|
let dist = Math.abs(start - end);
|
|
if (!clockwise && start > end) {
|
|
dist = 2 * Math.PI - dist;
|
|
} else if (clockwise && end > start) {
|
|
dist = 2 * Math.PI - dist;
|
|
}
|
|
steps = steps || Math.max(6, Math.floor(6 * Math.pow(radius, 1 / 3) * (dist / Math.PI)));
|
|
steps = Math.max(steps, 3);
|
|
let f = dist / steps;
|
|
let t = start;
|
|
f *= clockwise ? -1 : 1;
|
|
for (let i = 0; i < steps + 1; i++) {
|
|
const cs = Math.cos(t);
|
|
const sn = Math.sin(t);
|
|
const nx = x + cs * radius;
|
|
const ny = y + sn * radius;
|
|
points.push(nx, ny);
|
|
t += f;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function buildArcTo(points, x1, y1, x2, y2, radius) {
|
|
const fromX = points[points.length - 2];
|
|
const fromY = points[points.length - 1];
|
|
const a1 = fromY - y1;
|
|
const b1 = fromX - x1;
|
|
const a2 = y2 - y1;
|
|
const b2 = x2 - x1;
|
|
const mm = Math.abs(a1 * b2 - b1 * a2);
|
|
if (mm < 1e-8 || radius === 0) {
|
|
if (points[points.length - 2] !== x1 || points[points.length - 1] !== y1) {
|
|
points.push(x1, y1);
|
|
}
|
|
return;
|
|
}
|
|
const dd = a1 * a1 + b1 * b1;
|
|
const cc = a2 * a2 + b2 * b2;
|
|
const tt = a1 * a2 + b1 * b2;
|
|
const k1 = radius * Math.sqrt(dd) / mm;
|
|
const k2 = radius * Math.sqrt(cc) / mm;
|
|
const j1 = k1 * tt / dd;
|
|
const j2 = k2 * tt / cc;
|
|
const cx = k1 * b2 + k2 * b1;
|
|
const cy = k1 * a2 + k2 * a1;
|
|
const px = b1 * (k2 + j1);
|
|
const py = a1 * (k2 + j1);
|
|
const qx = b2 * (k1 + j2);
|
|
const qy = a2 * (k1 + j2);
|
|
const startAngle = Math.atan2(py - cy, px - cx);
|
|
const endAngle = Math.atan2(qy - cy, qx - cx);
|
|
buildArc(
|
|
points,
|
|
cx + x1,
|
|
cy + y1,
|
|
radius,
|
|
startAngle,
|
|
endAngle,
|
|
b1 * a2 > b2 * a1
|
|
);
|
|
}
|
|
|
|
"use strict";
|
|
const TAU = Math.PI * 2;
|
|
const out = {
|
|
centerX: 0,
|
|
centerY: 0,
|
|
ang1: 0,
|
|
ang2: 0
|
|
};
|
|
const mapToEllipse = ({ x, y }, rx, ry, cosPhi, sinPhi, centerX, centerY, out2) => {
|
|
x *= rx;
|
|
y *= ry;
|
|
const xp = cosPhi * x - sinPhi * y;
|
|
const yp = sinPhi * x + cosPhi * y;
|
|
out2.x = xp + centerX;
|
|
out2.y = yp + centerY;
|
|
return out2;
|
|
};
|
|
function approxUnitArc(ang1, ang2) {
|
|
const a1 = ang2 === -1.5707963267948966 ? -0.551915024494 : 4 / 3 * Math.tan(ang2 / 4);
|
|
const a = ang2 === 1.5707963267948966 ? 0.551915024494 : a1;
|
|
const x1 = Math.cos(ang1);
|
|
const y1 = Math.sin(ang1);
|
|
const x2 = Math.cos(ang1 + ang2);
|
|
const y2 = Math.sin(ang1 + ang2);
|
|
return [
|
|
{
|
|
x: x1 - y1 * a,
|
|
y: y1 + x1 * a
|
|
},
|
|
{
|
|
x: x2 + y2 * a,
|
|
y: y2 - x2 * a
|
|
},
|
|
{
|
|
x: x2,
|
|
y: y2
|
|
}
|
|
];
|
|
}
|
|
const vectorAngle = (ux, uy, vx, vy) => {
|
|
const sign = ux * vy - uy * vx < 0 ? -1 : 1;
|
|
let dot = ux * vx + uy * vy;
|
|
if (dot > 1) {
|
|
dot = 1;
|
|
}
|
|
if (dot < -1) {
|
|
dot = -1;
|
|
}
|
|
return sign * Math.acos(dot);
|
|
};
|
|
const getArcCenter = (px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinPhi, cosPhi, pxp, pyp, out2) => {
|
|
const rxSq = Math.pow(rx, 2);
|
|
const rySq = Math.pow(ry, 2);
|
|
const pxpSq = Math.pow(pxp, 2);
|
|
const pypSq = Math.pow(pyp, 2);
|
|
let radicant = rxSq * rySq - rxSq * pypSq - rySq * pxpSq;
|
|
if (radicant < 0) {
|
|
radicant = 0;
|
|
}
|
|
radicant /= rxSq * pypSq + rySq * pxpSq;
|
|
radicant = Math.sqrt(radicant) * (largeArcFlag === sweepFlag ? -1 : 1);
|
|
const centerXp = radicant * rx / ry * pyp;
|
|
const centerYp = radicant * -ry / rx * pxp;
|
|
const centerX = cosPhi * centerXp - sinPhi * centerYp + (px + cx) / 2;
|
|
const centerY = sinPhi * centerXp + cosPhi * centerYp + (py + cy) / 2;
|
|
const vx1 = (pxp - centerXp) / rx;
|
|
const vy1 = (pyp - centerYp) / ry;
|
|
const vx2 = (-pxp - centerXp) / rx;
|
|
const vy2 = (-pyp - centerYp) / ry;
|
|
const ang1 = vectorAngle(1, 0, vx1, vy1);
|
|
let ang2 = vectorAngle(vx1, vy1, vx2, vy2);
|
|
if (sweepFlag === 0 && ang2 > 0) {
|
|
ang2 -= TAU;
|
|
}
|
|
if (sweepFlag === 1 && ang2 < 0) {
|
|
ang2 += TAU;
|
|
}
|
|
out2.centerX = centerX;
|
|
out2.centerY = centerY;
|
|
out2.ang1 = ang1;
|
|
out2.ang2 = ang2;
|
|
};
|
|
function buildArcToSvg(points, px, py, cx, cy, rx, ry, xAxisRotation = 0, largeArcFlag = 0, sweepFlag = 0) {
|
|
if (rx === 0 || ry === 0) {
|
|
return;
|
|
}
|
|
const sinPhi = Math.sin(xAxisRotation * TAU / 360);
|
|
const cosPhi = Math.cos(xAxisRotation * TAU / 360);
|
|
const pxp = cosPhi * (px - cx) / 2 + sinPhi * (py - cy) / 2;
|
|
const pyp = -sinPhi * (px - cx) / 2 + cosPhi * (py - cy) / 2;
|
|
if (pxp === 0 && pyp === 0) {
|
|
return;
|
|
}
|
|
rx = Math.abs(rx);
|
|
ry = Math.abs(ry);
|
|
const lambda = Math.pow(pxp, 2) / Math.pow(rx, 2) + Math.pow(pyp, 2) / Math.pow(ry, 2);
|
|
if (lambda > 1) {
|
|
rx *= Math.sqrt(lambda);
|
|
ry *= Math.sqrt(lambda);
|
|
}
|
|
getArcCenter(
|
|
px,
|
|
py,
|
|
cx,
|
|
cy,
|
|
rx,
|
|
ry,
|
|
largeArcFlag,
|
|
sweepFlag,
|
|
sinPhi,
|
|
cosPhi,
|
|
pxp,
|
|
pyp,
|
|
out
|
|
);
|
|
let { ang1, ang2 } = out;
|
|
const { centerX, centerY } = out;
|
|
let ratio = Math.abs(ang2) / (TAU / 4);
|
|
if (Math.abs(1 - ratio) < 1e-7) {
|
|
ratio = 1;
|
|
}
|
|
const segments = Math.max(Math.ceil(ratio), 1);
|
|
ang2 /= segments;
|
|
let lastX = points[points.length - 2];
|
|
let lastY = points[points.length - 1];
|
|
const outCurvePoint = { x: 0, y: 0 };
|
|
for (let i = 0; i < segments; i++) {
|
|
const curve = approxUnitArc(ang1, ang2);
|
|
const { x: x1, y: y1 } = mapToEllipse(curve[0], rx, ry, cosPhi, sinPhi, centerX, centerY, outCurvePoint);
|
|
const { x: x2, y: y2 } = mapToEllipse(curve[1], rx, ry, cosPhi, sinPhi, centerX, centerY, outCurvePoint);
|
|
const { x, y } = mapToEllipse(curve[2], rx, ry, cosPhi, sinPhi, centerX, centerY, outCurvePoint);
|
|
buildAdaptiveBezier(
|
|
points,
|
|
lastX,
|
|
lastY,
|
|
x1,
|
|
y1,
|
|
x2,
|
|
y2,
|
|
x,
|
|
y
|
|
);
|
|
lastX = x;
|
|
lastY = y;
|
|
ang1 += ang2;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function roundedShapeArc(g, points, radius) {
|
|
var _a;
|
|
const vecFrom = (p, pp) => {
|
|
const x = pp.x - p.x;
|
|
const y = pp.y - p.y;
|
|
const len = Math.sqrt(x * x + y * y);
|
|
const nx = x / len;
|
|
const ny = y / len;
|
|
return { len, nx, ny };
|
|
};
|
|
const sharpCorner = (i, p) => {
|
|
if (i === 0) {
|
|
g.moveTo(p.x, p.y);
|
|
} else {
|
|
g.lineTo(p.x, p.y);
|
|
}
|
|
};
|
|
let p1 = points[points.length - 1];
|
|
for (let i = 0; i < points.length; i++) {
|
|
const p2 = points[i % points.length];
|
|
const pRadius = (_a = p2.radius) != null ? _a : radius;
|
|
if (pRadius <= 0) {
|
|
sharpCorner(i, p2);
|
|
p1 = p2;
|
|
continue;
|
|
}
|
|
const p3 = points[(i + 1) % points.length];
|
|
const v1 = vecFrom(p2, p1);
|
|
const v2 = vecFrom(p2, p3);
|
|
if (v1.len < 1e-4 || v2.len < 1e-4) {
|
|
sharpCorner(i, p2);
|
|
p1 = p2;
|
|
continue;
|
|
}
|
|
let angle = Math.asin(v1.nx * v2.ny - v1.ny * v2.nx);
|
|
let radDirection = 1;
|
|
let drawDirection = false;
|
|
if (v1.nx * v2.nx - v1.ny * -v2.ny < 0) {
|
|
if (angle < 0) {
|
|
angle = Math.PI + angle;
|
|
} else {
|
|
angle = Math.PI - angle;
|
|
radDirection = -1;
|
|
drawDirection = true;
|
|
}
|
|
} else if (angle > 0) {
|
|
radDirection = -1;
|
|
drawDirection = true;
|
|
}
|
|
const halfAngle = angle / 2;
|
|
let cRadius;
|
|
let lenOut = Math.abs(
|
|
Math.cos(halfAngle) * pRadius / Math.sin(halfAngle)
|
|
);
|
|
if (lenOut > Math.min(v1.len / 2, v2.len / 2)) {
|
|
lenOut = Math.min(v1.len / 2, v2.len / 2);
|
|
cRadius = Math.abs(lenOut * Math.sin(halfAngle) / Math.cos(halfAngle));
|
|
} else {
|
|
cRadius = pRadius;
|
|
}
|
|
const cX = p2.x + v2.nx * lenOut + -v2.ny * cRadius * radDirection;
|
|
const cY = p2.y + v2.ny * lenOut + v2.nx * cRadius * radDirection;
|
|
const startAngle = Math.atan2(v1.ny, v1.nx) + Math.PI / 2 * radDirection;
|
|
const endAngle = Math.atan2(v2.ny, v2.nx) - Math.PI / 2 * radDirection;
|
|
if (i === 0) {
|
|
g.moveTo(
|
|
cX + Math.cos(startAngle) * cRadius,
|
|
cY + Math.sin(startAngle) * cRadius
|
|
);
|
|
}
|
|
g.arc(cX, cY, cRadius, startAngle, endAngle, drawDirection);
|
|
p1 = p2;
|
|
}
|
|
}
|
|
function roundedShapeQuadraticCurve(g, points, radius, smoothness) {
|
|
var _a;
|
|
const distance = (p1, p2) => Math.sqrt((p1.x - p2.x) ** 2 + (p1.y - p2.y) ** 2);
|
|
const pointLerp = (p1, p2, t) => ({
|
|
x: p1.x + (p2.x - p1.x) * t,
|
|
y: p1.y + (p2.y - p1.y) * t
|
|
});
|
|
const numPoints = points.length;
|
|
for (let i = 0; i < numPoints; i++) {
|
|
const thisPoint = points[(i + 1) % numPoints];
|
|
const pRadius = (_a = thisPoint.radius) != null ? _a : radius;
|
|
if (pRadius <= 0) {
|
|
if (i === 0) {
|
|
g.moveTo(thisPoint.x, thisPoint.y);
|
|
} else {
|
|
g.lineTo(thisPoint.x, thisPoint.y);
|
|
}
|
|
continue;
|
|
}
|
|
const lastPoint = points[i];
|
|
const nextPoint = points[(i + 2) % numPoints];
|
|
const lastEdgeLength = distance(lastPoint, thisPoint);
|
|
let start;
|
|
if (lastEdgeLength < 1e-4) {
|
|
start = thisPoint;
|
|
} else {
|
|
const lastOffsetDistance = Math.min(lastEdgeLength / 2, pRadius);
|
|
start = pointLerp(
|
|
thisPoint,
|
|
lastPoint,
|
|
lastOffsetDistance / lastEdgeLength
|
|
);
|
|
}
|
|
const nextEdgeLength = distance(nextPoint, thisPoint);
|
|
let end;
|
|
if (nextEdgeLength < 1e-4) {
|
|
end = thisPoint;
|
|
} else {
|
|
const nextOffsetDistance = Math.min(nextEdgeLength / 2, pRadius);
|
|
end = pointLerp(
|
|
thisPoint,
|
|
nextPoint,
|
|
nextOffsetDistance / nextEdgeLength
|
|
);
|
|
}
|
|
if (i === 0) {
|
|
g.moveTo(start.x, start.y);
|
|
} else {
|
|
g.lineTo(start.x, start.y);
|
|
}
|
|
g.quadraticCurveTo(thisPoint.x, thisPoint.y, end.x, end.y, smoothness);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const tempRectangle = new Rectangle();
|
|
class ShapePath {
|
|
constructor(graphicsPath2D) {
|
|
/** The list of shape primitives that make up the path. */
|
|
this.shapePrimitives = [];
|
|
this._currentPoly = null;
|
|
this._bounds = new Bounds();
|
|
this._graphicsPath2D = graphicsPath2D;
|
|
}
|
|
/**
|
|
* Sets the starting point for a new sub-path. Any subsequent drawing commands are considered part of this path.
|
|
* @param x - The x-coordinate for the starting point.
|
|
* @param y - The y-coordinate for the starting point.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
moveTo(x, y) {
|
|
this.startPoly(x, y);
|
|
return this;
|
|
}
|
|
/**
|
|
* Connects the current point to a new point with a straight line. This method updates the current path.
|
|
* @param x - The x-coordinate of the new point to connect to.
|
|
* @param y - The y-coordinate of the new point to connect to.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
lineTo(x, y) {
|
|
this._ensurePoly();
|
|
const points = this._currentPoly.points;
|
|
const fromX = points[points.length - 2];
|
|
const fromY = points[points.length - 1];
|
|
if (fromX !== x || fromY !== y) {
|
|
points.push(x, y);
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds an arc to the path. The arc is centered at (x, y)
|
|
* position with radius `radius` starting at `startAngle` and ending at `endAngle`.
|
|
* @param x - The x-coordinate of the arc's center.
|
|
* @param y - The y-coordinate of the arc's center.
|
|
* @param radius - The radius of the arc.
|
|
* @param startAngle - The starting angle of the arc, in radians.
|
|
* @param endAngle - The ending angle of the arc, in radians.
|
|
* @param counterclockwise - Specifies whether the arc should be drawn in the anticlockwise direction. False by default.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
arc(x, y, radius, startAngle, endAngle, counterclockwise) {
|
|
this._ensurePoly(false);
|
|
const points = this._currentPoly.points;
|
|
buildArc(points, x, y, radius, startAngle, endAngle, counterclockwise);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds an arc to the path with the arc tangent to the line joining two specified points.
|
|
* The arc radius is specified by `radius`.
|
|
* @param x1 - The x-coordinate of the first point.
|
|
* @param y1 - The y-coordinate of the first point.
|
|
* @param x2 - The x-coordinate of the second point.
|
|
* @param y2 - The y-coordinate of the second point.
|
|
* @param radius - The radius of the arc.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
arcTo(x1, y1, x2, y2, radius) {
|
|
this._ensurePoly();
|
|
const points = this._currentPoly.points;
|
|
buildArcTo(points, x1, y1, x2, y2, radius);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds an SVG-style arc to the path, allowing for elliptical arcs based on the SVG spec.
|
|
* @param rx - The x-radius of the ellipse.
|
|
* @param ry - The y-radius of the ellipse.
|
|
* @param xAxisRotation - The rotation of the ellipse's x-axis relative
|
|
* to the x-axis of the coordinate system, in degrees.
|
|
* @param largeArcFlag - Determines if the arc should be greater than or less than 180 degrees.
|
|
* @param sweepFlag - Determines if the arc should be swept in a positive angle direction.
|
|
* @param x - The x-coordinate of the arc's end point.
|
|
* @param y - The y-coordinate of the arc's end point.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
arcToSvg(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y) {
|
|
const points = this._currentPoly.points;
|
|
buildArcToSvg(
|
|
points,
|
|
this._currentPoly.lastX,
|
|
this._currentPoly.lastY,
|
|
x,
|
|
y,
|
|
rx,
|
|
ry,
|
|
xAxisRotation,
|
|
largeArcFlag,
|
|
sweepFlag
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds a cubic Bezier curve to the path.
|
|
* It requires three points: the first two are control points and the third one is the end point.
|
|
* The starting point is the last point in the current path.
|
|
* @param cp1x - The x-coordinate of the first control point.
|
|
* @param cp1y - The y-coordinate of the first control point.
|
|
* @param cp2x - The x-coordinate of the second control point.
|
|
* @param cp2y - The y-coordinate of the second control point.
|
|
* @param x - The x-coordinate of the end point.
|
|
* @param y - The y-coordinate of the end point.
|
|
* @param smoothness - Optional parameter to adjust the smoothness of the curve.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, smoothness) {
|
|
this._ensurePoly();
|
|
const currentPoly = this._currentPoly;
|
|
buildAdaptiveBezier(
|
|
this._currentPoly.points,
|
|
currentPoly.lastX,
|
|
currentPoly.lastY,
|
|
cp1x,
|
|
cp1y,
|
|
cp2x,
|
|
cp2y,
|
|
x,
|
|
y,
|
|
smoothness
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds a quadratic curve to the path. It requires two points: the control point and the end point.
|
|
* The starting point is the last point in the current path.
|
|
* @param cp1x - The x-coordinate of the control point.
|
|
* @param cp1y - The y-coordinate of the control point.
|
|
* @param x - The x-coordinate of the end point.
|
|
* @param y - The y-coordinate of the end point.
|
|
* @param smoothing - Optional parameter to adjust the smoothness of the curve.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
quadraticCurveTo(cp1x, cp1y, x, y, smoothing) {
|
|
this._ensurePoly();
|
|
const currentPoly = this._currentPoly;
|
|
buildAdaptiveQuadratic(
|
|
this._currentPoly.points,
|
|
currentPoly.lastX,
|
|
currentPoly.lastY,
|
|
cp1x,
|
|
cp1y,
|
|
x,
|
|
y,
|
|
smoothing
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Closes the current path by drawing a straight line back to the start.
|
|
* If the shape is already closed or there are no points in the path, this method does nothing.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
closePath() {
|
|
this.endPoly(true);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds another path to the current path. This method allows for the combination of multiple paths into one.
|
|
* @param path - The `GraphicsPath` object representing the path to add.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the path before adding it.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
addPath(path, transform) {
|
|
this.endPoly();
|
|
if (transform && !transform.isIdentity()) {
|
|
path = path.clone(true);
|
|
path.transform(transform);
|
|
}
|
|
for (let i = 0; i < path.instructions.length; i++) {
|
|
const instruction = path.instructions[i];
|
|
this[instruction.action](...instruction.data);
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Finalizes the drawing of the current path. Optionally, it can close the path.
|
|
* @param closePath - A boolean indicating whether to close the path after finishing. False by default.
|
|
*/
|
|
finish(closePath = false) {
|
|
this.endPoly(closePath);
|
|
}
|
|
/**
|
|
* Draws a rectangle shape. This method adds a new rectangle path to the current drawing.
|
|
* @param x - The x-coordinate of the top-left corner of the rectangle.
|
|
* @param y - The y-coordinate of the top-left corner of the rectangle.
|
|
* @param w - The width of the rectangle.
|
|
* @param h - The height of the rectangle.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
rect(x, y, w, h, transform) {
|
|
this.drawShape(new Rectangle(x, y, w, h), transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a circle shape. This method adds a new circle path to the current drawing.
|
|
* @param x - The x-coordinate of the center of the circle.
|
|
* @param y - The y-coordinate of the center of the circle.
|
|
* @param radius - The radius of the circle.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the circle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
circle(x, y, radius, transform) {
|
|
this.drawShape(new Circle(x, y, radius), transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a polygon shape. This method allows for the creation of complex polygons by specifying a sequence of points.
|
|
* @param points - An array of numbers, or or an array of PointData objects eg [{x,y}, {x,y}, {x,y}]
|
|
* representing the x and y coordinates of the polygon's vertices, in sequence.
|
|
* @param close - A boolean indicating whether to close the polygon path. True by default.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the polygon.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
poly(points, close, transform) {
|
|
const polygon = new Polygon(points);
|
|
polygon.closePath = close;
|
|
this.drawShape(polygon, transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a regular polygon with a specified number of sides. All sides and angles are equal.
|
|
* @param x - The x-coordinate of the center of the polygon.
|
|
* @param y - The y-coordinate of the center of the polygon.
|
|
* @param radius - The radius of the circumscribed circle of the polygon.
|
|
* @param sides - The number of sides of the polygon. Must be 3 or more.
|
|
* @param rotation - The rotation angle of the polygon, in radians. Zero by default.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the polygon.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
regularPoly(x, y, radius, sides, rotation = 0, transform) {
|
|
sides = Math.max(sides | 0, 3);
|
|
const startAngle = -1 * Math.PI / 2 + rotation;
|
|
const delta = Math.PI * 2 / sides;
|
|
const polygon = [];
|
|
for (let i = 0; i < sides; i++) {
|
|
const angle = i * delta + startAngle;
|
|
polygon.push(
|
|
x + radius * Math.cos(angle),
|
|
y + radius * Math.sin(angle)
|
|
);
|
|
}
|
|
this.poly(polygon, true, transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a polygon with rounded corners.
|
|
* Similar to `regularPoly` but with the ability to round the corners of the polygon.
|
|
* @param x - The x-coordinate of the center of the polygon.
|
|
* @param y - The y-coordinate of the center of the polygon.
|
|
* @param radius - The radius of the circumscribed circle of the polygon.
|
|
* @param sides - The number of sides of the polygon. Must be 3 or more.
|
|
* @param corner - The radius of the rounding of the corners.
|
|
* @param rotation - The rotation angle of the polygon, in radians. Zero by default.
|
|
* @param smoothness - Optional parameter to adjust the smoothness of the rounding.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
roundPoly(x, y, radius, sides, corner, rotation = 0, smoothness) {
|
|
sides = Math.max(sides | 0, 3);
|
|
if (corner <= 0) {
|
|
return this.regularPoly(x, y, radius, sides, rotation);
|
|
}
|
|
const sideLength = radius * Math.sin(Math.PI / sides) - 1e-3;
|
|
corner = Math.min(corner, sideLength);
|
|
const startAngle = -1 * Math.PI / 2 + rotation;
|
|
const delta = Math.PI * 2 / sides;
|
|
const internalAngle = (sides - 2) * Math.PI / sides / 2;
|
|
for (let i = 0; i < sides; i++) {
|
|
const angle = i * delta + startAngle;
|
|
const x0 = x + radius * Math.cos(angle);
|
|
const y0 = y + radius * Math.sin(angle);
|
|
const a1 = angle + Math.PI + internalAngle;
|
|
const a2 = angle - Math.PI - internalAngle;
|
|
const x1 = x0 + corner * Math.cos(a1);
|
|
const y1 = y0 + corner * Math.sin(a1);
|
|
const x3 = x0 + corner * Math.cos(a2);
|
|
const y3 = y0 + corner * Math.sin(a2);
|
|
if (i === 0) {
|
|
this.moveTo(x1, y1);
|
|
} else {
|
|
this.lineTo(x1, y1);
|
|
}
|
|
this.quadraticCurveTo(x0, y0, x3, y3, smoothness);
|
|
}
|
|
return this.closePath();
|
|
}
|
|
/**
|
|
* Draws a shape with rounded corners. This function supports custom radius for each corner of the shape.
|
|
* Optionally, corners can be rounded using a quadratic curve instead of an arc, providing a different aesthetic.
|
|
* @param points - An array of `RoundedPoint` representing the corners of the shape to draw.
|
|
* A minimum of 3 points is required.
|
|
* @param radius - The default radius for the corners.
|
|
* This radius is applied to all corners unless overridden in `points`.
|
|
* @param useQuadratic - If set to true, rounded corners are drawn using a quadraticCurve
|
|
* method instead of an arc method. Defaults to false.
|
|
* @param smoothness - Specifies the smoothness of the curve when `useQuadratic` is true.
|
|
* Higher values make the curve smoother.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
roundShape(points, radius, useQuadratic = false, smoothness) {
|
|
if (points.length < 3) {
|
|
return this;
|
|
}
|
|
if (useQuadratic) {
|
|
roundedShapeQuadraticCurve(this, points, radius, smoothness);
|
|
} else {
|
|
roundedShapeArc(this, points, radius);
|
|
}
|
|
return this.closePath();
|
|
}
|
|
/**
|
|
* Draw Rectangle with fillet corners. This is much like rounded rectangle
|
|
* however it support negative numbers as well for the corner radius.
|
|
* @param x - Upper left corner of rect
|
|
* @param y - Upper right corner of rect
|
|
* @param width - Width of rect
|
|
* @param height - Height of rect
|
|
* @param fillet - accept negative or positive values
|
|
*/
|
|
filletRect(x, y, width, height, fillet) {
|
|
if (fillet === 0) {
|
|
return this.rect(x, y, width, height);
|
|
}
|
|
const maxFillet = Math.min(width, height) / 2;
|
|
const inset = Math.min(maxFillet, Math.max(-maxFillet, fillet));
|
|
const right = x + width;
|
|
const bottom = y + height;
|
|
const dir = inset < 0 ? -inset : 0;
|
|
const size = Math.abs(inset);
|
|
return this.moveTo(x, y + size).arcTo(x + dir, y + dir, x + size, y, size).lineTo(right - size, y).arcTo(right - dir, y + dir, right, y + size, size).lineTo(right, bottom - size).arcTo(right - dir, bottom - dir, x + width - size, bottom, size).lineTo(x + size, bottom).arcTo(x + dir, bottom - dir, x, bottom - size, size).closePath();
|
|
}
|
|
/**
|
|
* Draw Rectangle with chamfer corners. These are angled corners.
|
|
* @param x - Upper left corner of rect
|
|
* @param y - Upper right corner of rect
|
|
* @param width - Width of rect
|
|
* @param height - Height of rect
|
|
* @param chamfer - non-zero real number, size of corner cutout
|
|
* @param transform
|
|
*/
|
|
chamferRect(x, y, width, height, chamfer, transform) {
|
|
if (chamfer <= 0) {
|
|
return this.rect(x, y, width, height);
|
|
}
|
|
const inset = Math.min(chamfer, Math.min(width, height) / 2);
|
|
const right = x + width;
|
|
const bottom = y + height;
|
|
const points = [
|
|
x + inset,
|
|
y,
|
|
right - inset,
|
|
y,
|
|
right,
|
|
y + inset,
|
|
right,
|
|
bottom - inset,
|
|
right - inset,
|
|
bottom,
|
|
x + inset,
|
|
bottom,
|
|
x,
|
|
bottom - inset,
|
|
x,
|
|
y + inset
|
|
];
|
|
for (let i = points.length - 1; i >= 2; i -= 2) {
|
|
if (points[i] === points[i - 2] && points[i - 1] === points[i - 3]) {
|
|
points.splice(i - 1, 2);
|
|
}
|
|
}
|
|
return this.poly(points, true, transform);
|
|
}
|
|
/**
|
|
* Draws an ellipse at the specified location and with the given x and y radii.
|
|
* An optional transformation can be applied, allowing for rotation, scaling, and translation.
|
|
* @param x - The x-coordinate of the center of the ellipse.
|
|
* @param y - The y-coordinate of the center of the ellipse.
|
|
* @param radiusX - The horizontal radius of the ellipse.
|
|
* @param radiusY - The vertical radius of the ellipse.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the ellipse. This can include rotations.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
ellipse(x, y, radiusX, radiusY, transform) {
|
|
this.drawShape(new Ellipse(x, y, radiusX, radiusY), transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a rectangle with rounded corners.
|
|
* The corner radius can be specified to determine how rounded the corners should be.
|
|
* An optional transformation can be applied, which allows for rotation, scaling, and translation of the rectangle.
|
|
* @param x - The x-coordinate of the top-left corner of the rectangle.
|
|
* @param y - The y-coordinate of the top-left corner of the rectangle.
|
|
* @param w - The width of the rectangle.
|
|
* @param h - The height of the rectangle.
|
|
* @param radius - The radius of the rectangle's corners. If not specified, corners will be sharp.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
roundRect(x, y, w, h, radius, transform) {
|
|
this.drawShape(new RoundedRectangle(x, y, w, h, radius), transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a given shape on the canvas.
|
|
* This is a generic method that can draw any type of shape specified by the `ShapePrimitive` parameter.
|
|
* An optional transformation matrix can be applied to the shape, allowing for complex transformations.
|
|
* @param shape - The shape to draw, defined as a `ShapePrimitive` object.
|
|
* @param matrix - An optional `Matrix` for transforming the shape. This can include rotations,
|
|
* scaling, and translations.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
drawShape(shape, matrix) {
|
|
this.endPoly();
|
|
this.shapePrimitives.push({ shape, transform: matrix });
|
|
return this;
|
|
}
|
|
/**
|
|
* Starts a new polygon path from the specified starting point.
|
|
* This method initializes a new polygon or ends the current one if it exists.
|
|
* @param x - The x-coordinate of the starting point of the new polygon.
|
|
* @param y - The y-coordinate of the starting point of the new polygon.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
startPoly(x, y) {
|
|
let currentPoly = this._currentPoly;
|
|
if (currentPoly) {
|
|
this.endPoly();
|
|
}
|
|
currentPoly = new Polygon();
|
|
currentPoly.points.push(x, y);
|
|
this._currentPoly = currentPoly;
|
|
return this;
|
|
}
|
|
/**
|
|
* Ends the current polygon path. If `closePath` is set to true,
|
|
* the path is closed by connecting the last point to the first one.
|
|
* This method finalizes the current polygon and prepares it for drawing or adding to the shape primitives.
|
|
* @param closePath - A boolean indicating whether to close the polygon by connecting the last point
|
|
* back to the starting point. False by default.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
endPoly(closePath = false) {
|
|
const shape = this._currentPoly;
|
|
if (shape && shape.points.length > 2) {
|
|
shape.closePath = closePath;
|
|
this.shapePrimitives.push({ shape });
|
|
}
|
|
this._currentPoly = null;
|
|
return this;
|
|
}
|
|
_ensurePoly(start = true) {
|
|
if (this._currentPoly)
|
|
return;
|
|
this._currentPoly = new Polygon();
|
|
if (start) {
|
|
const lastShape = this.shapePrimitives[this.shapePrimitives.length - 1];
|
|
if (lastShape) {
|
|
let lx = lastShape.shape.x;
|
|
let ly = lastShape.shape.y;
|
|
if (lastShape.transform && !lastShape.transform.isIdentity()) {
|
|
const t = lastShape.transform;
|
|
const tempX = lx;
|
|
lx = t.a * lx + t.c * ly + t.tx;
|
|
ly = t.b * tempX + t.d * ly + t.ty;
|
|
}
|
|
this._currentPoly.points.push(lx, ly);
|
|
} else {
|
|
this._currentPoly.points.push(0, 0);
|
|
}
|
|
}
|
|
}
|
|
/** Builds the path. */
|
|
buildPath() {
|
|
const path = this._graphicsPath2D;
|
|
this.shapePrimitives.length = 0;
|
|
this._currentPoly = null;
|
|
for (let i = 0; i < path.instructions.length; i++) {
|
|
const instruction = path.instructions[i];
|
|
this[instruction.action](...instruction.data);
|
|
}
|
|
this.finish();
|
|
}
|
|
/** Gets the bounds of the path. */
|
|
get bounds() {
|
|
const bounds = this._bounds;
|
|
bounds.clear();
|
|
const shapePrimitives = this.shapePrimitives;
|
|
for (let i = 0; i < shapePrimitives.length; i++) {
|
|
const shapePrimitive = shapePrimitives[i];
|
|
const boundsRect = shapePrimitive.shape.getBounds(tempRectangle);
|
|
if (shapePrimitive.transform) {
|
|
bounds.addRect(boundsRect, shapePrimitive.transform);
|
|
} else {
|
|
bounds.addRect(boundsRect);
|
|
}
|
|
}
|
|
return bounds;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class GraphicsPath {
|
|
/**
|
|
* Creates a `GraphicsPath` instance optionally from an SVG path string or an array of `PathInstruction`.
|
|
* @param instructions - An SVG path string or an array of `PathInstruction` objects.
|
|
*/
|
|
constructor(instructions) {
|
|
this.instructions = [];
|
|
/** unique id for this graphics path */
|
|
this.uid = uid$1("graphicsPath");
|
|
this._dirty = true;
|
|
var _a;
|
|
if (typeof instructions === "string") {
|
|
SVGToGraphicsPath(instructions, this);
|
|
} else {
|
|
this.instructions = (_a = instructions == null ? void 0 : instructions.slice()) != null ? _a : [];
|
|
}
|
|
}
|
|
/**
|
|
* Provides access to the internal shape path, ensuring it is up-to-date with the current instructions.
|
|
* @returns The `ShapePath` instance associated with this `GraphicsPath`.
|
|
*/
|
|
get shapePath() {
|
|
if (!this._shapePath) {
|
|
this._shapePath = new ShapePath(this);
|
|
}
|
|
if (this._dirty) {
|
|
this._dirty = false;
|
|
this._shapePath.buildPath();
|
|
}
|
|
return this._shapePath;
|
|
}
|
|
/**
|
|
* Adds another `GraphicsPath` to this path, optionally applying a transformation.
|
|
* @param path - The `GraphicsPath` to add.
|
|
* @param transform - An optional transformation to apply to the added path.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
addPath(path, transform) {
|
|
path = path.clone();
|
|
this.instructions.push({ action: "addPath", data: [path, transform] });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
arc(...args) {
|
|
this.instructions.push({ action: "arc", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
arcTo(...args) {
|
|
this.instructions.push({ action: "arcTo", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
arcToSvg(...args) {
|
|
this.instructions.push({ action: "arcToSvg", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
bezierCurveTo(...args) {
|
|
this.instructions.push({ action: "bezierCurveTo", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds a cubic Bezier curve to the path.
|
|
* It requires two points: the second control point and the end point. The first control point is assumed to be
|
|
* The starting point is the last point in the current path.
|
|
* @param cp2x - The x-coordinate of the second control point.
|
|
* @param cp2y - The y-coordinate of the second control point.
|
|
* @param x - The x-coordinate of the end point.
|
|
* @param y - The y-coordinate of the end point.
|
|
* @param smoothness - Optional parameter to adjust the smoothness of the curve.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
bezierCurveToShort(cp2x, cp2y, x, y, smoothness) {
|
|
const last = this.instructions[this.instructions.length - 1];
|
|
const lastPoint = this.getLastPoint(Point.shared);
|
|
let cp1x = 0;
|
|
let cp1y = 0;
|
|
if (!last || last.action !== "bezierCurveTo") {
|
|
cp1x = lastPoint.x;
|
|
cp1y = lastPoint.y;
|
|
} else {
|
|
cp1x = last.data[2];
|
|
cp1y = last.data[3];
|
|
const currentX = lastPoint.x;
|
|
const currentY = lastPoint.y;
|
|
cp1x = currentX + (currentX - cp1x);
|
|
cp1y = currentY + (currentY - cp1y);
|
|
}
|
|
this.instructions.push({ action: "bezierCurveTo", data: [cp1x, cp1y, cp2x, cp2y, x, y, smoothness] });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
/**
|
|
* Closes the current path by drawing a straight line back to the start.
|
|
* If the shape is already closed or there are no points in the path, this method does nothing.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
closePath() {
|
|
this.instructions.push({ action: "closePath", data: [] });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
ellipse(...args) {
|
|
this.instructions.push({ action: "ellipse", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
lineTo(...args) {
|
|
this.instructions.push({ action: "lineTo", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
moveTo(...args) {
|
|
this.instructions.push({ action: "moveTo", data: args });
|
|
return this;
|
|
}
|
|
quadraticCurveTo(...args) {
|
|
this.instructions.push({ action: "quadraticCurveTo", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds a quadratic curve to the path. It uses the previous point as the control point.
|
|
* @param x - The x-coordinate of the end point.
|
|
* @param y - The y-coordinate of the end point.
|
|
* @param smoothness - Optional parameter to adjust the smoothness of the curve.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
quadraticCurveToShort(x, y, smoothness) {
|
|
const last = this.instructions[this.instructions.length - 1];
|
|
const lastPoint = this.getLastPoint(Point.shared);
|
|
let cpx1 = 0;
|
|
let cpy1 = 0;
|
|
if (!last || last.action !== "quadraticCurveTo") {
|
|
cpx1 = lastPoint.x;
|
|
cpy1 = lastPoint.y;
|
|
} else {
|
|
cpx1 = last.data[0];
|
|
cpy1 = last.data[1];
|
|
const currentX = lastPoint.x;
|
|
const currentY = lastPoint.y;
|
|
cpx1 = currentX + (currentX - cpx1);
|
|
cpy1 = currentY + (currentY - cpy1);
|
|
}
|
|
this.instructions.push({ action: "quadraticCurveTo", data: [cpx1, cpy1, x, y, smoothness] });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a rectangle shape. This method adds a new rectangle path to the current drawing.
|
|
* @param x - The x-coordinate of the top-left corner of the rectangle.
|
|
* @param y - The y-coordinate of the top-left corner of the rectangle.
|
|
* @param w - The width of the rectangle.
|
|
* @param h - The height of the rectangle.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
rect(x, y, w, h, transform) {
|
|
this.instructions.push({ action: "rect", data: [x, y, w, h, transform] });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a circle shape. This method adds a new circle path to the current drawing.
|
|
* @param x - The x-coordinate of the center of the circle.
|
|
* @param y - The y-coordinate of the center of the circle.
|
|
* @param radius - The radius of the circle.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the circle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
circle(x, y, radius, transform) {
|
|
this.instructions.push({ action: "circle", data: [x, y, radius, transform] });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
roundRect(...args) {
|
|
this.instructions.push({ action: "roundRect", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
poly(...args) {
|
|
this.instructions.push({ action: "poly", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
regularPoly(...args) {
|
|
this.instructions.push({ action: "regularPoly", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
roundPoly(...args) {
|
|
this.instructions.push({ action: "roundPoly", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
roundShape(...args) {
|
|
this.instructions.push({ action: "roundShape", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
filletRect(...args) {
|
|
this.instructions.push({ action: "filletRect", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
chamferRect(...args) {
|
|
this.instructions.push({ action: "chamferRect", data: args });
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a star shape centered at a specified location. This method allows for the creation
|
|
* of stars with a variable number of points, outer radius, optional inner radius, and rotation.
|
|
* The star is drawn as a closed polygon with alternating outer and inner vertices to create the star's points.
|
|
* An optional transformation can be applied to scale, rotate, or translate the star as needed.
|
|
* @param x - The x-coordinate of the center of the star.
|
|
* @param y - The y-coordinate of the center of the star.
|
|
* @param points - The number of points of the star.
|
|
* @param radius - The outer radius of the star (distance from the center to the outer points).
|
|
* @param innerRadius - Optional. The inner radius of the star
|
|
* (distance from the center to the inner points between the outer points).
|
|
* If not provided, defaults to half of the `radius`.
|
|
* @param rotation - Optional. The rotation of the star in radians, where 0 is aligned with the y-axis.
|
|
* Defaults to 0, meaning one point is directly upward.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the star.
|
|
* This can include rotations, scaling, and translations.
|
|
* @returns The instance of the current object for chaining further drawing commands.
|
|
*/
|
|
// eslint-disable-next-line max-len
|
|
star(x, y, points, radius, innerRadius, rotation, transform) {
|
|
innerRadius = innerRadius || radius / 2;
|
|
const startAngle = -1 * Math.PI / 2 + rotation;
|
|
const len = points * 2;
|
|
const delta = Math.PI * 2 / len;
|
|
const polygon = [];
|
|
for (let i = 0; i < len; i++) {
|
|
const r = i % 2 ? innerRadius : radius;
|
|
const angle = i * delta + startAngle;
|
|
polygon.push(
|
|
x + r * Math.cos(angle),
|
|
y + r * Math.sin(angle)
|
|
);
|
|
}
|
|
this.poly(polygon, true, transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Creates a copy of the current `GraphicsPath` instance. This method supports both shallow and deep cloning.
|
|
* A shallow clone copies the reference of the instructions array, while a deep clone creates a new array and
|
|
* copies each instruction individually, ensuring that modifications to the instructions of the cloned `GraphicsPath`
|
|
* do not affect the original `GraphicsPath` and vice versa.
|
|
* @param deep - A boolean flag indicating whether the clone should be deep.
|
|
* @returns A new `GraphicsPath` instance that is a clone of the current instance.
|
|
*/
|
|
clone(deep = false) {
|
|
const newGraphicsPath2D = new GraphicsPath();
|
|
if (!deep) {
|
|
newGraphicsPath2D.instructions = this.instructions.slice();
|
|
} else {
|
|
for (let i = 0; i < this.instructions.length; i++) {
|
|
const instruction = this.instructions[i];
|
|
newGraphicsPath2D.instructions.push({ action: instruction.action, data: instruction.data.slice() });
|
|
}
|
|
}
|
|
return newGraphicsPath2D;
|
|
}
|
|
clear() {
|
|
this.instructions.length = 0;
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
/**
|
|
* Applies a transformation matrix to all drawing instructions within the `GraphicsPath`.
|
|
* This method enables the modification of the path's geometry according to the provided
|
|
* transformation matrix, which can include translations, rotations, scaling, and skewing.
|
|
*
|
|
* Each drawing instruction in the path is updated to reflect the transformation,
|
|
* ensuring the visual representation of the path is consistent with the applied matrix.
|
|
*
|
|
* Note: The transformation is applied directly to the coordinates and control points of the drawing instructions,
|
|
* not to the path as a whole. This means the transformation's effects are baked into the individual instructions,
|
|
* allowing for fine-grained control over the path's appearance.
|
|
* @param matrix - A `Matrix` object representing the transformation to apply.
|
|
* @returns The instance of the current object for chaining further operations.
|
|
*/
|
|
transform(matrix) {
|
|
if (matrix.isIdentity())
|
|
return this;
|
|
const a = matrix.a;
|
|
const b = matrix.b;
|
|
const c = matrix.c;
|
|
const d = matrix.d;
|
|
const tx = matrix.tx;
|
|
const ty = matrix.ty;
|
|
let x = 0;
|
|
let y = 0;
|
|
let cpx1 = 0;
|
|
let cpy1 = 0;
|
|
let cpx2 = 0;
|
|
let cpy2 = 0;
|
|
let rx = 0;
|
|
let ry = 0;
|
|
for (let i = 0; i < this.instructions.length; i++) {
|
|
const instruction = this.instructions[i];
|
|
const data = instruction.data;
|
|
switch (instruction.action) {
|
|
case "moveTo":
|
|
case "lineTo":
|
|
x = data[0];
|
|
y = data[1];
|
|
data[0] = a * x + c * y + tx;
|
|
data[1] = b * x + d * y + ty;
|
|
break;
|
|
case "bezierCurveTo":
|
|
cpx1 = data[0];
|
|
cpy1 = data[1];
|
|
cpx2 = data[2];
|
|
cpy2 = data[3];
|
|
x = data[4];
|
|
y = data[5];
|
|
data[0] = a * cpx1 + c * cpy1 + tx;
|
|
data[1] = b * cpx1 + d * cpy1 + ty;
|
|
data[2] = a * cpx2 + c * cpy2 + tx;
|
|
data[3] = b * cpx2 + d * cpy2 + ty;
|
|
data[4] = a * x + c * y + tx;
|
|
data[5] = b * x + d * y + ty;
|
|
break;
|
|
case "quadraticCurveTo":
|
|
cpx1 = data[0];
|
|
cpy1 = data[1];
|
|
x = data[2];
|
|
y = data[3];
|
|
data[0] = a * cpx1 + c * cpy1 + tx;
|
|
data[1] = b * cpx1 + d * cpy1 + ty;
|
|
data[2] = a * x + c * y + tx;
|
|
data[3] = b * x + d * y + ty;
|
|
break;
|
|
case "arcToSvg":
|
|
x = data[5];
|
|
y = data[6];
|
|
rx = data[0];
|
|
ry = data[1];
|
|
data[0] = a * rx + c * ry;
|
|
data[1] = b * rx + d * ry;
|
|
data[5] = a * x + c * y + tx;
|
|
data[6] = b * x + d * y + ty;
|
|
break;
|
|
case "circle":
|
|
data[4] = adjustTransform(data[3], matrix);
|
|
break;
|
|
case "rect":
|
|
data[4] = adjustTransform(data[4], matrix);
|
|
break;
|
|
case "ellipse":
|
|
data[8] = adjustTransform(data[8], matrix);
|
|
break;
|
|
case "roundRect":
|
|
data[5] = adjustTransform(data[5], matrix);
|
|
break;
|
|
case "addPath":
|
|
data[0].transform(matrix);
|
|
break;
|
|
case "poly":
|
|
data[2] = adjustTransform(data[2], matrix);
|
|
break;
|
|
default:
|
|
warn("unknown transform action", instruction.action);
|
|
break;
|
|
}
|
|
}
|
|
this._dirty = true;
|
|
return this;
|
|
}
|
|
get bounds() {
|
|
return this.shapePath.bounds;
|
|
}
|
|
/**
|
|
* Retrieves the last point from the current drawing instructions in the `GraphicsPath`.
|
|
* This method is useful for operations that depend on the path's current endpoint,
|
|
* such as connecting subsequent shapes or paths. It supports various drawing instructions,
|
|
* ensuring the last point's position is accurately determined regardless of the path's complexity.
|
|
*
|
|
* If the last instruction is a `closePath`, the method iterates backward through the instructions
|
|
* until it finds an actionable instruction that defines a point (e.g., `moveTo`, `lineTo`,
|
|
* `quadraticCurveTo`, etc.). For compound paths added via `addPath`, it recursively retrieves
|
|
* the last point from the nested path.
|
|
* @param out - A `Point` object where the last point's coordinates will be stored.
|
|
* This object is modified directly to contain the result.
|
|
* @returns The `Point` object containing the last point's coordinates.
|
|
*/
|
|
getLastPoint(out) {
|
|
let index = this.instructions.length - 1;
|
|
let lastInstruction = this.instructions[index];
|
|
if (!lastInstruction) {
|
|
out.x = 0;
|
|
out.y = 0;
|
|
return out;
|
|
}
|
|
while (lastInstruction.action === "closePath") {
|
|
index--;
|
|
if (index < 0) {
|
|
out.x = 0;
|
|
out.y = 0;
|
|
return out;
|
|
}
|
|
lastInstruction = this.instructions[index];
|
|
}
|
|
switch (lastInstruction.action) {
|
|
case "moveTo":
|
|
case "lineTo":
|
|
out.x = lastInstruction.data[0];
|
|
out.y = lastInstruction.data[1];
|
|
break;
|
|
case "quadraticCurveTo":
|
|
out.x = lastInstruction.data[2];
|
|
out.y = lastInstruction.data[3];
|
|
break;
|
|
case "bezierCurveTo":
|
|
out.x = lastInstruction.data[4];
|
|
out.y = lastInstruction.data[5];
|
|
break;
|
|
case "arc":
|
|
case "arcToSvg":
|
|
out.x = lastInstruction.data[5];
|
|
out.y = lastInstruction.data[6];
|
|
break;
|
|
case "addPath":
|
|
lastInstruction.data[0].getLastPoint(out);
|
|
break;
|
|
}
|
|
return out;
|
|
}
|
|
}
|
|
function adjustTransform(currentMatrix, transform) {
|
|
if (currentMatrix) {
|
|
return currentMatrix.prepend(transform);
|
|
}
|
|
return transform.clone();
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$S = Object.defineProperty;
|
|
var __getOwnPropSymbols$S = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$S = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$S = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$S = (obj, key, value) => key in obj ? __defProp$S(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$S = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$S.call(b, prop))
|
|
__defNormalProp$S(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$S)
|
|
for (var prop of __getOwnPropSymbols$S(b)) {
|
|
if (__propIsEnum$S.call(b, prop))
|
|
__defNormalProp$S(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
function SVGParser(svg, graphicsContext) {
|
|
if (typeof svg === "string") {
|
|
const div = document.createElement("div");
|
|
div.innerHTML = svg.trim();
|
|
svg = div.querySelector("svg");
|
|
}
|
|
const session = {
|
|
context: graphicsContext,
|
|
path: new GraphicsPath()
|
|
};
|
|
renderChildren(svg, session, null, null);
|
|
return graphicsContext;
|
|
}
|
|
function renderChildren(svg, session, fillStyle, strokeStyle) {
|
|
const children = svg.children;
|
|
const { fillStyle: f1, strokeStyle: s1 } = parseStyle(svg);
|
|
if (f1 && fillStyle) {
|
|
fillStyle = __spreadValues$S(__spreadValues$S({}, fillStyle), f1);
|
|
} else if (f1) {
|
|
fillStyle = f1;
|
|
}
|
|
if (s1 && strokeStyle) {
|
|
strokeStyle = __spreadValues$S(__spreadValues$S({}, strokeStyle), s1);
|
|
} else if (s1) {
|
|
strokeStyle = s1;
|
|
}
|
|
session.context.fillStyle = fillStyle;
|
|
session.context.strokeStyle = strokeStyle;
|
|
let x;
|
|
let y;
|
|
let x1;
|
|
let y1;
|
|
let x2;
|
|
let y2;
|
|
let cx;
|
|
let cy;
|
|
let r;
|
|
let rx;
|
|
let ry;
|
|
let points;
|
|
let pointsString;
|
|
let d;
|
|
let graphicsPath;
|
|
let width;
|
|
let height;
|
|
switch (svg.nodeName.toLowerCase()) {
|
|
case "path":
|
|
d = svg.getAttribute("d");
|
|
graphicsPath = new GraphicsPath(d);
|
|
session.context.path(graphicsPath);
|
|
if (fillStyle)
|
|
session.context.fill();
|
|
if (strokeStyle)
|
|
session.context.stroke();
|
|
break;
|
|
case "circle":
|
|
cx = parseFloatAttribute(svg, "cx", 0);
|
|
cy = parseFloatAttribute(svg, "cy", 0);
|
|
r = parseFloatAttribute(svg, "r", 0);
|
|
session.context.ellipse(cx, cy, r, r);
|
|
if (fillStyle)
|
|
session.context.fill();
|
|
if (strokeStyle)
|
|
session.context.stroke();
|
|
break;
|
|
case "rect":
|
|
x = parseFloatAttribute(svg, "x", 0);
|
|
y = parseFloatAttribute(svg, "y", 0);
|
|
width = parseFloatAttribute(svg, "width", 0);
|
|
height = parseFloatAttribute(svg, "height", 0);
|
|
rx = parseFloatAttribute(svg, "rx", 0);
|
|
ry = parseFloatAttribute(svg, "ry", 0);
|
|
if (rx || ry) {
|
|
session.context.roundRect(x, y, width, height, rx || ry);
|
|
} else {
|
|
session.context.rect(x, y, width, height);
|
|
}
|
|
if (fillStyle)
|
|
session.context.fill();
|
|
if (strokeStyle)
|
|
session.context.stroke();
|
|
break;
|
|
case "ellipse":
|
|
cx = parseFloatAttribute(svg, "cx", 0);
|
|
cy = parseFloatAttribute(svg, "cy", 0);
|
|
rx = parseFloatAttribute(svg, "rx", 0);
|
|
ry = parseFloatAttribute(svg, "ry", 0);
|
|
session.context.beginPath();
|
|
session.context.ellipse(cx, cy, rx, ry);
|
|
if (fillStyle)
|
|
session.context.fill();
|
|
if (strokeStyle)
|
|
session.context.stroke();
|
|
break;
|
|
case "line":
|
|
x1 = parseFloatAttribute(svg, "x1", 0);
|
|
y1 = parseFloatAttribute(svg, "y1", 0);
|
|
x2 = parseFloatAttribute(svg, "x2", 0);
|
|
y2 = parseFloatAttribute(svg, "y2", 0);
|
|
session.context.beginPath();
|
|
session.context.moveTo(x1, y1);
|
|
session.context.lineTo(x2, y2);
|
|
if (strokeStyle)
|
|
session.context.stroke();
|
|
break;
|
|
case "polygon":
|
|
pointsString = svg.getAttribute("points");
|
|
points = pointsString.match(/\d+/g).map((n) => parseInt(n, 10));
|
|
session.context.poly(points, true);
|
|
if (fillStyle)
|
|
session.context.fill();
|
|
if (strokeStyle)
|
|
session.context.stroke();
|
|
break;
|
|
case "polyline":
|
|
pointsString = svg.getAttribute("points");
|
|
points = pointsString.match(/\d+/g).map((n) => parseInt(n, 10));
|
|
session.context.poly(points, false);
|
|
if (strokeStyle)
|
|
session.context.stroke();
|
|
break;
|
|
case "g":
|
|
case "svg":
|
|
break;
|
|
default: {
|
|
console.info(`[SVG parser] <${svg.nodeName}> elements unsupported`);
|
|
break;
|
|
}
|
|
}
|
|
for (let i = 0; i < children.length; i++) {
|
|
renderChildren(children[i], session, fillStyle, strokeStyle);
|
|
}
|
|
}
|
|
function parseFloatAttribute(svg, id, defaultValue) {
|
|
const value = svg.getAttribute(id);
|
|
return value ? Number(value) : defaultValue;
|
|
}
|
|
function parseStyle(svg) {
|
|
const style = svg.getAttribute("style");
|
|
const strokeStyle = {};
|
|
const fillStyle = {};
|
|
let useFill = false;
|
|
let useStroke = false;
|
|
if (style) {
|
|
const styleParts = style.split(";");
|
|
for (let i = 0; i < styleParts.length; i++) {
|
|
const stylePart = styleParts[i];
|
|
const [key, value] = stylePart.split(":");
|
|
switch (key) {
|
|
case "stroke":
|
|
if (value !== "none") {
|
|
strokeStyle.color = Color.shared.setValue(value).toNumber();
|
|
useStroke = true;
|
|
}
|
|
break;
|
|
case "stroke-width":
|
|
strokeStyle.width = Number(value);
|
|
break;
|
|
case "fill":
|
|
if (value !== "none") {
|
|
useFill = true;
|
|
fillStyle.color = Color.shared.setValue(value).toNumber();
|
|
}
|
|
break;
|
|
case "fill-opacity":
|
|
fillStyle.alpha = Number(value);
|
|
break;
|
|
case "stroke-opacity":
|
|
strokeStyle.alpha = Number(value);
|
|
break;
|
|
case "opacity":
|
|
fillStyle.alpha = Number(value);
|
|
strokeStyle.alpha = Number(value);
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
const stroke = svg.getAttribute("stroke");
|
|
if (stroke && stroke !== "none") {
|
|
useStroke = true;
|
|
strokeStyle.color = Color.shared.setValue(stroke).toNumber();
|
|
strokeStyle.width = parseFloatAttribute(svg, "stroke-width", 1);
|
|
}
|
|
const fill = svg.getAttribute("fill");
|
|
if (fill && fill !== "none") {
|
|
useFill = true;
|
|
fillStyle.color = Color.shared.setValue(fill).toNumber();
|
|
}
|
|
}
|
|
return {
|
|
strokeStyle: useStroke ? strokeStyle : null,
|
|
fillStyle: useFill ? fillStyle : null
|
|
};
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$R = Object.defineProperty;
|
|
var __getOwnPropSymbols$R = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$R = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$R = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$R = (obj, key, value) => key in obj ? __defProp$R(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$R = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$R.call(b, prop))
|
|
__defNormalProp$R(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$R)
|
|
for (var prop of __getOwnPropSymbols$R(b)) {
|
|
if (__propIsEnum$R.call(b, prop))
|
|
__defNormalProp$R(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$i = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$R.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$R)
|
|
for (var prop of __getOwnPropSymbols$R(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$R.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
function isColorLike(value) {
|
|
return Color.isColorLike(value);
|
|
}
|
|
function isFillPattern(value) {
|
|
return value instanceof FillPattern;
|
|
}
|
|
function isFillGradient(value) {
|
|
return value instanceof FillGradient;
|
|
}
|
|
function handleColorLike(fill, value, defaultStyle) {
|
|
const temp = Color.shared.setValue(value != null ? value : 0);
|
|
fill.color = temp.toNumber();
|
|
fill.alpha = temp.alpha === 1 ? defaultStyle.alpha : temp.alpha;
|
|
fill.texture = Texture.WHITE;
|
|
return __spreadValues$R(__spreadValues$R({}, defaultStyle), fill);
|
|
}
|
|
function handleFillPattern(fill, value, defaultStyle) {
|
|
fill.fill = value;
|
|
fill.color = 16777215;
|
|
fill.texture = value.texture;
|
|
fill.matrix = value.transform;
|
|
return __spreadValues$R(__spreadValues$R({}, defaultStyle), fill);
|
|
}
|
|
function handleFillGradient(fill, value, defaultStyle) {
|
|
value.buildLinearGradient();
|
|
fill.fill = value;
|
|
fill.color = 16777215;
|
|
fill.texture = value.texture;
|
|
fill.matrix = value.transform;
|
|
return __spreadValues$R(__spreadValues$R({}, defaultStyle), fill);
|
|
}
|
|
function handleFillObject(value, defaultStyle) {
|
|
var _a;
|
|
const style = __spreadValues$R(__spreadValues$R({}, defaultStyle), value);
|
|
if (style.texture) {
|
|
if (style.texture !== Texture.WHITE) {
|
|
const m = ((_a = style.matrix) == null ? void 0 : _a.invert()) || new Matrix();
|
|
m.translate(style.texture.frame.x, style.texture.frame.y);
|
|
m.scale(1 / style.texture.source.width, 1 / style.texture.source.height);
|
|
style.matrix = m;
|
|
}
|
|
const sourceStyle = style.texture.source.style;
|
|
if (sourceStyle.addressMode === "clamp-to-edge") {
|
|
sourceStyle.addressMode = "repeat";
|
|
sourceStyle.update();
|
|
}
|
|
}
|
|
const color = Color.shared.setValue(style.color);
|
|
style.alpha *= color.alpha;
|
|
style.color = color.toNumber();
|
|
style.matrix = style.matrix ? style.matrix.clone() : null;
|
|
return style;
|
|
}
|
|
function toFillStyle(value, defaultStyle) {
|
|
if (value === void 0 || value === null) {
|
|
return null;
|
|
}
|
|
const fill = {};
|
|
const objectStyle = value;
|
|
if (isColorLike(value)) {
|
|
return handleColorLike(fill, value, defaultStyle);
|
|
} else if (isFillPattern(value)) {
|
|
return handleFillPattern(fill, value, defaultStyle);
|
|
} else if (isFillGradient(value)) {
|
|
return handleFillGradient(fill, value, defaultStyle);
|
|
} else if (objectStyle.fill && isFillPattern(objectStyle.fill)) {
|
|
return handleFillPattern(objectStyle, objectStyle.fill, defaultStyle);
|
|
} else if (objectStyle.fill && isFillGradient(objectStyle.fill)) {
|
|
return handleFillGradient(objectStyle, objectStyle.fill, defaultStyle);
|
|
}
|
|
return handleFillObject(objectStyle, defaultStyle);
|
|
}
|
|
function toStrokeStyle(value, defaultStyle) {
|
|
const _a = defaultStyle, { width, alignment, miterLimit, cap, join } = _a, rest = __objRest$i(_a, ["width", "alignment", "miterLimit", "cap", "join"]);
|
|
const fill = toFillStyle(value, rest);
|
|
if (!fill) {
|
|
return null;
|
|
}
|
|
return __spreadValues$R({
|
|
width,
|
|
alignment,
|
|
miterLimit,
|
|
cap,
|
|
join
|
|
}, fill);
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$Q = Object.defineProperty;
|
|
var __getOwnPropSymbols$Q = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$Q = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$Q = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$Q = (obj, key, value) => key in obj ? __defProp$Q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$Q = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$Q.call(b, prop))
|
|
__defNormalProp$Q(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$Q)
|
|
for (var prop of __getOwnPropSymbols$Q(b)) {
|
|
if (__propIsEnum$Q.call(b, prop))
|
|
__defNormalProp$Q(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const tmpPoint = new Point();
|
|
const tempMatrix$3 = new Matrix();
|
|
const _GraphicsContext = class _GraphicsContext extends EventEmitter {
|
|
constructor() {
|
|
super(...arguments);
|
|
/** unique id for this graphics context */
|
|
this.uid = uid$1("graphicsContext");
|
|
this.dirty = true;
|
|
this.batchMode = "auto";
|
|
this.instructions = [];
|
|
this._activePath = new GraphicsPath();
|
|
this._transform = new Matrix();
|
|
this._fillStyle = __spreadValues$Q({}, _GraphicsContext.defaultFillStyle);
|
|
this._strokeStyle = __spreadValues$Q({}, _GraphicsContext.defaultStrokeStyle);
|
|
this._stateStack = [];
|
|
this._tick = 0;
|
|
this._bounds = new Bounds();
|
|
this._boundsDirty = true;
|
|
}
|
|
/**
|
|
* Creates a new GraphicsContext object that is a clone of this instance, copying all properties,
|
|
* including the current drawing state, transformations, styles, and instructions.
|
|
* @returns A new GraphicsContext instance with the same properties and state as this one.
|
|
*/
|
|
clone() {
|
|
const clone = new _GraphicsContext();
|
|
clone.batchMode = this.batchMode;
|
|
clone.instructions = this.instructions.slice();
|
|
clone._activePath = this._activePath.clone();
|
|
clone._transform = this._transform.clone();
|
|
clone._fillStyle = __spreadValues$Q({}, this._fillStyle);
|
|
clone._strokeStyle = __spreadValues$Q({}, this._strokeStyle);
|
|
clone._stateStack = this._stateStack.slice();
|
|
clone._bounds = this._bounds.clone();
|
|
clone._boundsDirty = true;
|
|
return clone;
|
|
}
|
|
/**
|
|
* The current fill style of the graphics context. This can be a color, gradient, pattern, or a more complex style defined by a FillStyle object.
|
|
*/
|
|
get fillStyle() {
|
|
return this._fillStyle;
|
|
}
|
|
set fillStyle(value) {
|
|
this._fillStyle = toFillStyle(value, _GraphicsContext.defaultFillStyle);
|
|
}
|
|
/**
|
|
* The current stroke style of the graphics context. Similar to fill styles, stroke styles can encompass colors, gradients, patterns, or more detailed configurations via a StrokeStyle object.
|
|
*/
|
|
get strokeStyle() {
|
|
return this._strokeStyle;
|
|
}
|
|
set strokeStyle(value) {
|
|
this._strokeStyle = toStrokeStyle(value, _GraphicsContext.defaultStrokeStyle);
|
|
}
|
|
/**
|
|
* Sets the current fill style of the graphics context. The fill style can be a color, gradient,
|
|
* pattern, or a more complex style defined by a FillStyle object.
|
|
* @param style - The fill style to apply. This can be a simple color, a gradient or pattern object,
|
|
* or a FillStyle or ConvertedFillStyle object.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
setFillStyle(style) {
|
|
this._fillStyle = toFillStyle(style, _GraphicsContext.defaultFillStyle);
|
|
return this;
|
|
}
|
|
/**
|
|
* Sets the current stroke style of the graphics context. Similar to fill styles, stroke styles can
|
|
* encompass colors, gradients, patterns, or more detailed configurations via a StrokeStyle object.
|
|
* @param style - The stroke style to apply. Can be defined as a color, a gradient or pattern,
|
|
* or a StrokeStyle or ConvertedStrokeStyle object.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
setStrokeStyle(style) {
|
|
this._strokeStyle = toFillStyle(style, _GraphicsContext.defaultStrokeStyle);
|
|
return this;
|
|
}
|
|
texture(texture, tint, dx, dy, dw, dh) {
|
|
this.instructions.push({
|
|
action: "texture",
|
|
data: {
|
|
image: texture,
|
|
dx: dx || 0,
|
|
dy: dy || 0,
|
|
dw: dw || texture.frame.width,
|
|
dh: dh || texture.frame.height,
|
|
transform: this._transform.clone(),
|
|
alpha: this._fillStyle.alpha,
|
|
style: tint ? Color.shared.setValue(tint).toNumber() : 16777215
|
|
}
|
|
});
|
|
this.onUpdate();
|
|
return this;
|
|
}
|
|
/**
|
|
* Resets the current path. Any previous path and its commands are discarded and a new path is
|
|
* started. This is typically called before beginning a new shape or series of drawing commands.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
beginPath() {
|
|
this._activePath = new GraphicsPath();
|
|
return this;
|
|
}
|
|
fill(style, alpha) {
|
|
let path;
|
|
const lastInstruction = this.instructions[this.instructions.length - 1];
|
|
if (this._tick === 0 && lastInstruction && lastInstruction.action === "stroke") {
|
|
path = lastInstruction.data.path;
|
|
} else {
|
|
path = this._activePath.clone();
|
|
}
|
|
if (!path)
|
|
return this;
|
|
if (style != null) {
|
|
if (alpha !== void 0 && typeof style === "number") {
|
|
deprecation(v8_0_0, "GraphicsContext.fill(color, alpha) is deprecated, use GraphicsContext.fill({ color, alpha }) instead");
|
|
style = { color: style, alpha };
|
|
}
|
|
this._fillStyle = toFillStyle(style, _GraphicsContext.defaultFillStyle);
|
|
}
|
|
this.instructions.push({
|
|
action: "fill",
|
|
// TODO copy fill style!
|
|
data: { style: this.fillStyle, path }
|
|
});
|
|
this.onUpdate();
|
|
this._initNextPathLocation();
|
|
this._tick = 0;
|
|
return this;
|
|
}
|
|
_initNextPathLocation() {
|
|
const { x, y } = this._activePath.getLastPoint(Point.shared);
|
|
this._activePath.clear();
|
|
this._activePath.moveTo(x, y);
|
|
}
|
|
/**
|
|
* Strokes the current path with the current stroke style. This method can take an optional
|
|
* FillInput parameter to define the stroke's appearance, including its color, width, and other properties.
|
|
* @param style - (Optional) The stroke style to apply. Can be defined as a simple color or a more complex style object. If omitted, uses the current stroke style.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
stroke(style) {
|
|
let path;
|
|
const lastInstruction = this.instructions[this.instructions.length - 1];
|
|
if (this._tick === 0 && lastInstruction && lastInstruction.action === "fill") {
|
|
path = lastInstruction.data.path;
|
|
} else {
|
|
path = this._activePath.clone();
|
|
}
|
|
if (!path)
|
|
return this;
|
|
if (style != null) {
|
|
this._strokeStyle = toStrokeStyle(style, _GraphicsContext.defaultStrokeStyle);
|
|
}
|
|
this.instructions.push({
|
|
action: "stroke",
|
|
// TODO copy fill style!
|
|
data: { style: this.strokeStyle, path }
|
|
});
|
|
this.onUpdate();
|
|
this._initNextPathLocation();
|
|
this._tick = 0;
|
|
return this;
|
|
}
|
|
/**
|
|
* Applies a cutout to the last drawn shape. This is used to create holes or complex shapes by
|
|
* subtracting a path from the previously drawn path. If a hole is not completely in a shape, it will
|
|
* fail to cut correctly!
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
cut() {
|
|
for (let i = 0; i < 2; i++) {
|
|
const lastInstruction = this.instructions[this.instructions.length - 1 - i];
|
|
const holePath = this._activePath.clone();
|
|
if (lastInstruction) {
|
|
if (lastInstruction.action === "stroke" || lastInstruction.action === "fill") {
|
|
if (lastInstruction.data.hole) {
|
|
lastInstruction.data.hole.addPath(holePath);
|
|
} else {
|
|
lastInstruction.data.hole = holePath;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
this._initNextPathLocation();
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds an arc to the current path, which is centered at (x, y) with the specified radius,
|
|
* starting and ending angles, and direction.
|
|
* @param x - The x-coordinate of the arc's center.
|
|
* @param y - The y-coordinate of the arc's center.
|
|
* @param radius - The arc's radius.
|
|
* @param startAngle - The starting angle, in radians.
|
|
* @param endAngle - The ending angle, in radians.
|
|
* @param counterclockwise - (Optional) Specifies whether the arc is drawn counterclockwise (true) or clockwise (false). Defaults to false.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
arc(x, y, radius, startAngle, endAngle, counterclockwise) {
|
|
this._tick++;
|
|
const t = this._transform;
|
|
this._activePath.arc(
|
|
t.a * x + t.c * y + t.tx,
|
|
t.b * x + t.d * y + t.ty,
|
|
radius,
|
|
startAngle,
|
|
endAngle,
|
|
counterclockwise
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds an arc to the current path with the given control points and radius, connected to the previous point
|
|
* by a straight line if necessary.
|
|
* @param x1 - The x-coordinate of the first control point.
|
|
* @param y1 - The y-coordinate of the first control point.
|
|
* @param x2 - The x-coordinate of the second control point.
|
|
* @param y2 - The y-coordinate of the second control point.
|
|
* @param radius - The arc's radius.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
arcTo(x1, y1, x2, y2, radius) {
|
|
this._tick++;
|
|
const t = this._transform;
|
|
this._activePath.arcTo(
|
|
t.a * x1 + t.c * y1 + t.tx,
|
|
t.b * x1 + t.d * y1 + t.ty,
|
|
t.a * x2 + t.c * y2 + t.tx,
|
|
t.b * x2 + t.d * y2 + t.ty,
|
|
radius
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds an SVG-style arc to the path, allowing for elliptical arcs based on the SVG spec.
|
|
* @param rx - The x-radius of the ellipse.
|
|
* @param ry - The y-radius of the ellipse.
|
|
* @param xAxisRotation - The rotation of the ellipse's x-axis relative
|
|
* to the x-axis of the coordinate system, in degrees.
|
|
* @param largeArcFlag - Determines if the arc should be greater than or less than 180 degrees.
|
|
* @param sweepFlag - Determines if the arc should be swept in a positive angle direction.
|
|
* @param x - The x-coordinate of the arc's end point.
|
|
* @param y - The y-coordinate of the arc's end point.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
arcToSvg(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y) {
|
|
this._tick++;
|
|
const t = this._transform;
|
|
this._activePath.arcToSvg(
|
|
rx,
|
|
ry,
|
|
xAxisRotation,
|
|
// should we rotate this with transform??
|
|
largeArcFlag,
|
|
sweepFlag,
|
|
t.a * x + t.c * y + t.tx,
|
|
t.b * x + t.d * y + t.ty
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds a cubic Bezier curve to the path.
|
|
* It requires three points: the first two are control points and the third one is the end point.
|
|
* The starting point is the last point in the current path.
|
|
* @param cp1x - The x-coordinate of the first control point.
|
|
* @param cp1y - The y-coordinate of the first control point.
|
|
* @param cp2x - The x-coordinate of the second control point.
|
|
* @param cp2y - The y-coordinate of the second control point.
|
|
* @param x - The x-coordinate of the end point.
|
|
* @param y - The y-coordinate of the end point.
|
|
* @param smoothness - Optional parameter to adjust the smoothness of the curve.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y, smoothness) {
|
|
this._tick++;
|
|
const t = this._transform;
|
|
this._activePath.bezierCurveTo(
|
|
t.a * cp1x + t.c * cp1y + t.tx,
|
|
t.b * cp1x + t.d * cp1y + t.ty,
|
|
t.a * cp2x + t.c * cp2y + t.tx,
|
|
t.b * cp2x + t.d * cp2y + t.ty,
|
|
t.a * x + t.c * y + t.tx,
|
|
t.b * x + t.d * y + t.ty,
|
|
smoothness
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Closes the current path by drawing a straight line back to the start.
|
|
* If the shape is already closed or there are no points in the path, this method does nothing.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
closePath() {
|
|
var _a;
|
|
this._tick++;
|
|
(_a = this._activePath) == null ? void 0 : _a.closePath();
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws an ellipse at the specified location and with the given x and y radii.
|
|
* An optional transformation can be applied, allowing for rotation, scaling, and translation.
|
|
* @param x - The x-coordinate of the center of the ellipse.
|
|
* @param y - The y-coordinate of the center of the ellipse.
|
|
* @param radiusX - The horizontal radius of the ellipse.
|
|
* @param radiusY - The vertical radius of the ellipse.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
ellipse(x, y, radiusX, radiusY) {
|
|
this._tick++;
|
|
this._activePath.ellipse(x, y, radiusX, radiusY, this._transform.clone());
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a circle shape. This method adds a new circle path to the current drawing.
|
|
* @param x - The x-coordinate of the center of the circle.
|
|
* @param y - The y-coordinate of the center of the circle.
|
|
* @param radius - The radius of the circle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
circle(x, y, radius) {
|
|
this._tick++;
|
|
this._activePath.circle(x, y, radius, this._transform.clone());
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds another `GraphicsPath` to this path, optionally applying a transformation.
|
|
* @param path - The `GraphicsPath` to add.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
path(path) {
|
|
this._tick++;
|
|
this._activePath.addPath(path, this._transform.clone());
|
|
return this;
|
|
}
|
|
/**
|
|
* Connects the current point to a new point with a straight line. This method updates the current path.
|
|
* @param x - The x-coordinate of the new point to connect to.
|
|
* @param y - The y-coordinate of the new point to connect to.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
lineTo(x, y) {
|
|
this._tick++;
|
|
const t = this._transform;
|
|
this._activePath.lineTo(
|
|
t.a * x + t.c * y + t.tx,
|
|
t.b * x + t.d * y + t.ty
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Sets the starting point for a new sub-path. Any subsequent drawing commands are considered part of this path.
|
|
* @param x - The x-coordinate for the starting point.
|
|
* @param y - The y-coordinate for the starting point.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
moveTo(x, y) {
|
|
this._tick++;
|
|
const t = this._transform;
|
|
const instructions = this._activePath.instructions;
|
|
const transformedX = t.a * x + t.c * y + t.tx;
|
|
const transformedY = t.b * x + t.d * y + t.ty;
|
|
if (instructions.length === 1 && instructions[0].action === "moveTo") {
|
|
instructions[0].data[0] = transformedX;
|
|
instructions[0].data[1] = transformedY;
|
|
return this;
|
|
}
|
|
this._activePath.moveTo(
|
|
transformedX,
|
|
transformedY
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Adds a quadratic curve to the path. It requires two points: the control point and the end point.
|
|
* The starting point is the last point in the current path.
|
|
* @param cpx - The x-coordinate of the control point.
|
|
* @param cpy - The y-coordinate of the control point.
|
|
* @param x - The x-coordinate of the end point.
|
|
* @param y - The y-coordinate of the end point.
|
|
* @param smoothness - Optional parameter to adjust the smoothness of the curve.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
quadraticCurveTo(cpx, cpy, x, y, smoothness) {
|
|
this._tick++;
|
|
const t = this._transform;
|
|
this._activePath.quadraticCurveTo(
|
|
t.a * cpx + t.c * cpy + t.tx,
|
|
t.b * cpx + t.d * cpy + t.ty,
|
|
t.a * x + t.c * y + t.tx,
|
|
t.b * x + t.d * y + t.ty,
|
|
smoothness
|
|
);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a rectangle shape. This method adds a new rectangle path to the current drawing.
|
|
* @param x - The x-coordinate of the top-left corner of the rectangle.
|
|
* @param y - The y-coordinate of the top-left corner of the rectangle.
|
|
* @param w - The width of the rectangle.
|
|
* @param h - The height of the rectangle.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
rect(x, y, w, h) {
|
|
this._tick++;
|
|
this._activePath.rect(x, y, w, h, this._transform.clone());
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a rectangle with rounded corners.
|
|
* The corner radius can be specified to determine how rounded the corners should be.
|
|
* An optional transformation can be applied, which allows for rotation, scaling, and translation of the rectangle.
|
|
* @param x - The x-coordinate of the top-left corner of the rectangle.
|
|
* @param y - The y-coordinate of the top-left corner of the rectangle.
|
|
* @param w - The width of the rectangle.
|
|
* @param h - The height of the rectangle.
|
|
* @param radius - The radius of the rectangle's corners. If not specified, corners will be sharp.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
roundRect(x, y, w, h, radius) {
|
|
this._tick++;
|
|
this._activePath.roundRect(x, y, w, h, radius, this._transform.clone());
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a polygon shape by specifying a sequence of points. This method allows for the creation of complex polygons,
|
|
* which can be both open and closed. An optional transformation can be applied, enabling the polygon to be scaled,
|
|
* rotated, or translated as needed.
|
|
* @param points - An array of numbers, or an array of PointData objects eg [{x,y}, {x,y}, {x,y}]
|
|
* representing the x and y coordinates, of the polygon's vertices, in sequence.
|
|
* @param close - A boolean indicating whether to close the polygon path. True by default.
|
|
*/
|
|
poly(points, close) {
|
|
this._tick++;
|
|
this._activePath.poly(points, close, this._transform.clone());
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a regular polygon with a specified number of sides. All sides and angles are equal.
|
|
* @param x - The x-coordinate of the center of the polygon.
|
|
* @param y - The y-coordinate of the center of the polygon.
|
|
* @param radius - The radius of the circumscribed circle of the polygon.
|
|
* @param sides - The number of sides of the polygon. Must be 3 or more.
|
|
* @param rotation - The rotation angle of the polygon, in radians. Zero by default.
|
|
* @param transform - An optional `Matrix` object to apply a transformation to the polygon.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
regularPoly(x, y, radius, sides, rotation = 0, transform) {
|
|
this._tick++;
|
|
this._activePath.regularPoly(x, y, radius, sides, rotation, transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a polygon with rounded corners.
|
|
* Similar to `regularPoly` but with the ability to round the corners of the polygon.
|
|
* @param x - The x-coordinate of the center of the polygon.
|
|
* @param y - The y-coordinate of the center of the polygon.
|
|
* @param radius - The radius of the circumscribed circle of the polygon.
|
|
* @param sides - The number of sides of the polygon. Must be 3 or more.
|
|
* @param corner - The radius of the rounding of the corners.
|
|
* @param rotation - The rotation angle of the polygon, in radians. Zero by default.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
roundPoly(x, y, radius, sides, corner, rotation) {
|
|
this._tick++;
|
|
this._activePath.roundPoly(x, y, radius, sides, corner, rotation);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a shape with rounded corners. This function supports custom radius for each corner of the shape.
|
|
* Optionally, corners can be rounded using a quadratic curve instead of an arc, providing a different aesthetic.
|
|
* @param points - An array of `RoundedPoint` representing the corners of the shape to draw.
|
|
* A minimum of 3 points is required.
|
|
* @param radius - The default radius for the corners.
|
|
* This radius is applied to all corners unless overridden in `points`.
|
|
* @param useQuadratic - If set to true, rounded corners are drawn using a quadraticCurve
|
|
* method instead of an arc method. Defaults to false.
|
|
* @param smoothness - Specifies the smoothness of the curve when `useQuadratic` is true.
|
|
* Higher values make the curve smoother.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
roundShape(points, radius, useQuadratic, smoothness) {
|
|
this._tick++;
|
|
this._activePath.roundShape(points, radius, useQuadratic, smoothness);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draw Rectangle with fillet corners. This is much like rounded rectangle
|
|
* however it support negative numbers as well for the corner radius.
|
|
* @param x - Upper left corner of rect
|
|
* @param y - Upper right corner of rect
|
|
* @param width - Width of rect
|
|
* @param height - Height of rect
|
|
* @param fillet - accept negative or positive values
|
|
*/
|
|
filletRect(x, y, width, height, fillet) {
|
|
this._tick++;
|
|
this._activePath.filletRect(x, y, width, height, fillet);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draw Rectangle with chamfer corners. These are angled corners.
|
|
* @param x - Upper left corner of rect
|
|
* @param y - Upper right corner of rect
|
|
* @param width - Width of rect
|
|
* @param height - Height of rect
|
|
* @param chamfer - non-zero real number, size of corner cutout
|
|
* @param transform
|
|
*/
|
|
chamferRect(x, y, width, height, chamfer, transform) {
|
|
this._tick++;
|
|
this._activePath.chamferRect(x, y, width, height, chamfer, transform);
|
|
return this;
|
|
}
|
|
/**
|
|
* Draws a star shape centered at a specified location. This method allows for the creation
|
|
* of stars with a variable number of points, outer radius, optional inner radius, and rotation.
|
|
* The star is drawn as a closed polygon with alternating outer and inner vertices to create the star's points.
|
|
* An optional transformation can be applied to scale, rotate, or translate the star as needed.
|
|
* @param x - The x-coordinate of the center of the star.
|
|
* @param y - The y-coordinate of the center of the star.
|
|
* @param points - The number of points of the star.
|
|
* @param radius - The outer radius of the star (distance from the center to the outer points).
|
|
* @param innerRadius - Optional. The inner radius of the star
|
|
* (distance from the center to the inner points between the outer points).
|
|
* If not provided, defaults to half of the `radius`.
|
|
* @param rotation - Optional. The rotation of the star in radians, where 0 is aligned with the y-axis.
|
|
* Defaults to 0, meaning one point is directly upward.
|
|
* @returns The instance of the current object for chaining further drawing commands.
|
|
*/
|
|
star(x, y, points, radius, innerRadius = 0, rotation = 0) {
|
|
this._tick++;
|
|
this._activePath.star(x, y, points, radius, innerRadius, rotation, this._transform.clone());
|
|
return this;
|
|
}
|
|
/**
|
|
* Parses and renders an SVG string into the graphics context. This allows for complex shapes and paths
|
|
* defined in SVG format to be drawn within the graphics context.
|
|
* @param svg - The SVG string to be parsed and rendered.
|
|
*/
|
|
svg(svg) {
|
|
this._tick++;
|
|
SVGParser(svg, this);
|
|
return this;
|
|
}
|
|
/**
|
|
* Restores the most recently saved graphics state by popping the top of the graphics state stack.
|
|
* This includes transformations, fill styles, and stroke styles.
|
|
*/
|
|
restore() {
|
|
const state = this._stateStack.pop();
|
|
if (state) {
|
|
this._transform = state.transform;
|
|
this._fillStyle = state.fillStyle;
|
|
this._strokeStyle = state.strokeStyle;
|
|
}
|
|
return this;
|
|
}
|
|
/** Saves the current graphics state, including transformations, fill styles, and stroke styles, onto a stack. */
|
|
save() {
|
|
this._stateStack.push({
|
|
transform: this._transform.clone(),
|
|
fillStyle: __spreadValues$Q({}, this._fillStyle),
|
|
strokeStyle: __spreadValues$Q({}, this._strokeStyle)
|
|
});
|
|
return this;
|
|
}
|
|
/**
|
|
* Returns the current transformation matrix of the graphics context.
|
|
* @returns The current transformation matrix.
|
|
*/
|
|
getTransform() {
|
|
return this._transform;
|
|
}
|
|
/**
|
|
* Resets the current transformation matrix to the identity matrix, effectively removing any transformations (rotation, scaling, translation) previously applied.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
resetTransform() {
|
|
this._transform.identity();
|
|
return this;
|
|
}
|
|
/**
|
|
* Applies a rotation transformation to the graphics context around the current origin.
|
|
* @param angle - The angle of rotation in radians.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
rotate(angle) {
|
|
this._transform.rotate(angle);
|
|
return this;
|
|
}
|
|
/**
|
|
* Applies a scaling transformation to the graphics context, scaling drawings by x horizontally and by y vertically.
|
|
* @param x - The scale factor in the horizontal direction.
|
|
* @param y - (Optional) The scale factor in the vertical direction. If not specified, the x value is used for both directions.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
scale(x, y = x) {
|
|
this._transform.scale(x, y);
|
|
return this;
|
|
}
|
|
setTransform(a, b, c, d, dx, dy) {
|
|
if (a instanceof Matrix) {
|
|
this._transform.set(a.a, a.b, a.c, a.d, a.tx, a.ty);
|
|
return this;
|
|
}
|
|
this._transform.set(a, b, c, d, dx, dy);
|
|
return this;
|
|
}
|
|
transform(a, b, c, d, dx, dy) {
|
|
if (a instanceof Matrix) {
|
|
this._transform.append(a);
|
|
return this;
|
|
}
|
|
tempMatrix$3.set(a, b, c, d, dx, dy);
|
|
this._transform.append(tempMatrix$3);
|
|
return this;
|
|
}
|
|
/**
|
|
* Applies a translation transformation to the graphics context, moving the origin by the specified amounts.
|
|
* @param x - The amount to translate in the horizontal direction.
|
|
* @param y - (Optional) The amount to translate in the vertical direction. If not specified, the x value is used for both directions.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
translate(x, y = x) {
|
|
this._transform.translate(x, y);
|
|
return this;
|
|
}
|
|
/**
|
|
* Clears all drawing commands from the graphics context, effectively resetting it. This includes clearing the path,
|
|
* and optionally resetting transformations to the identity matrix.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
clear() {
|
|
this._activePath.clear();
|
|
this.instructions.length = 0;
|
|
this.resetTransform();
|
|
this.onUpdate();
|
|
return this;
|
|
}
|
|
onUpdate() {
|
|
if (this.dirty)
|
|
return;
|
|
this.emit("update", this, 16);
|
|
this.dirty = true;
|
|
this._boundsDirty = true;
|
|
}
|
|
/** The bounds of the graphic shape. */
|
|
get bounds() {
|
|
if (!this._boundsDirty)
|
|
return this._bounds;
|
|
const bounds = this._bounds;
|
|
bounds.clear();
|
|
for (let i = 0; i < this.instructions.length; i++) {
|
|
const instruction = this.instructions[i];
|
|
const action = instruction.action;
|
|
if (action === "fill") {
|
|
const data = instruction.data;
|
|
bounds.addBounds(data.path.bounds);
|
|
} else if (action === "texture") {
|
|
const data = instruction.data;
|
|
bounds.addFrame(data.dx, data.dy, data.dx + data.dw, data.dy + data.dh, data.transform);
|
|
}
|
|
if (action === "stroke") {
|
|
const data = instruction.data;
|
|
const padding = data.style.width / 2;
|
|
const _bounds = data.path.bounds;
|
|
bounds.addFrame(
|
|
_bounds.minX - padding,
|
|
_bounds.minY - padding,
|
|
_bounds.maxX + padding,
|
|
_bounds.maxY + padding
|
|
);
|
|
}
|
|
}
|
|
return bounds;
|
|
}
|
|
/**
|
|
* Check to see if a point is contained within this geometry.
|
|
* @param point - Point to check if it's contained.
|
|
* @returns {boolean} `true` if the point is contained within geometry.
|
|
*/
|
|
containsPoint(point) {
|
|
var _a;
|
|
if (!this.bounds.containsPoint(point.x, point.y))
|
|
return false;
|
|
const instructions = this.instructions;
|
|
let hasHit = false;
|
|
for (let k = 0; k < instructions.length; k++) {
|
|
const instruction = instructions[k];
|
|
const data = instruction.data;
|
|
const path = data.path;
|
|
if (!instruction.action || !path)
|
|
continue;
|
|
const style = data.style;
|
|
const shapes = path.shapePath.shapePrimitives;
|
|
for (let i = 0; i < shapes.length; i++) {
|
|
const shape = shapes[i].shape;
|
|
if (!style || !shape)
|
|
continue;
|
|
const transform = shapes[i].transform;
|
|
const transformedPoint = transform ? transform.applyInverse(point, tmpPoint) : point;
|
|
if (instruction.action === "fill") {
|
|
hasHit = shape.contains(transformedPoint.x, transformedPoint.y);
|
|
} else {
|
|
hasHit = shape.strokeContains(transformedPoint.x, transformedPoint.y, style.width);
|
|
}
|
|
const holes = data.hole;
|
|
if (holes) {
|
|
const holeShapes = (_a = holes.shapePath) == null ? void 0 : _a.shapePrimitives;
|
|
if (holeShapes) {
|
|
for (let j = 0; j < holeShapes.length; j++) {
|
|
if (holeShapes[j].shape.contains(transformedPoint.x, transformedPoint.y)) {
|
|
hasHit = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (hasHit) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return hasHit;
|
|
}
|
|
/**
|
|
* Destroys the GraphicsData object.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
* have been set to that value
|
|
* @param {boolean} [options.texture=false] - Should it destroy the current texture of the fill/stroke style?
|
|
* @param {boolean} [options.textureSource=false] - Should it destroy the texture source of the fill/stroke style?
|
|
*/
|
|
destroy(options = false) {
|
|
this._stateStack.length = 0;
|
|
this._transform = null;
|
|
this.emit("destroy", this);
|
|
this.removeAllListeners();
|
|
const destroyTexture = typeof options === "boolean" ? options : options == null ? void 0 : options.texture;
|
|
if (destroyTexture) {
|
|
const destroyTextureSource = typeof options === "boolean" ? options : options == null ? void 0 : options.textureSource;
|
|
if (this._fillStyle.texture) {
|
|
this._fillStyle.texture.destroy(destroyTextureSource);
|
|
}
|
|
if (this._strokeStyle.texture) {
|
|
this._strokeStyle.texture.destroy(destroyTextureSource);
|
|
}
|
|
}
|
|
this._fillStyle = null;
|
|
this._strokeStyle = null;
|
|
this.instructions = null;
|
|
this._activePath = null;
|
|
this._bounds = null;
|
|
this._stateStack = null;
|
|
this.customShader = null;
|
|
this._transform = null;
|
|
}
|
|
};
|
|
/** The default fill style to use when none is provided. */
|
|
_GraphicsContext.defaultFillStyle = {
|
|
/** The color to use for the fill. */
|
|
color: 16777215,
|
|
/** The alpha value to use for the fill. */
|
|
alpha: 1,
|
|
/** The texture to use for the fill. */
|
|
texture: Texture.WHITE,
|
|
/** The matrix to apply. */
|
|
matrix: null,
|
|
/** The fill pattern to use. */
|
|
fill: null
|
|
};
|
|
/** The default stroke style to use when none is provided. */
|
|
_GraphicsContext.defaultStrokeStyle = {
|
|
/** The width of the stroke. */
|
|
width: 1,
|
|
/** The color to use for the stroke. */
|
|
color: 16777215,
|
|
/** The alpha value to use for the stroke. */
|
|
alpha: 1,
|
|
/** The alignment of the stroke. */
|
|
alignment: 0.5,
|
|
/** The miter limit to use. */
|
|
miterLimit: 10,
|
|
/** The line cap style to use. */
|
|
cap: "butt",
|
|
/** The line join style to use. */
|
|
join: "miter",
|
|
/** The texture to use for the fill. */
|
|
texture: Texture.WHITE,
|
|
/** The matrix to apply. */
|
|
matrix: null,
|
|
/** The fill pattern to use. */
|
|
fill: null
|
|
};
|
|
let GraphicsContext = _GraphicsContext;
|
|
|
|
"use strict";
|
|
const valuesToIterateForKeys = [
|
|
"align",
|
|
"breakWords",
|
|
"cssOverrides",
|
|
"fontVariant",
|
|
"fontWeight",
|
|
"leading",
|
|
"letterSpacing",
|
|
"lineHeight",
|
|
"padding",
|
|
"textBaseline",
|
|
"trim",
|
|
"whiteSpace",
|
|
"wordWrap",
|
|
"wordWrapWidth",
|
|
"fontFamily",
|
|
"fontStyle",
|
|
"fontSize"
|
|
];
|
|
function generateTextStyleKey(style) {
|
|
const key = [];
|
|
let index = 0;
|
|
for (let i = 0; i < valuesToIterateForKeys.length; i++) {
|
|
const prop = `_${valuesToIterateForKeys[i]}`;
|
|
key[index++] = style[prop];
|
|
}
|
|
index = addFillStyleKey(style._fill, key, index);
|
|
index = addStokeStyleKey(style._stroke, key, index);
|
|
index = addDropShadowKey(style.dropShadow, key, index);
|
|
return key.join("-");
|
|
}
|
|
function addFillStyleKey(fillStyle, key, index) {
|
|
var _a;
|
|
if (!fillStyle)
|
|
return index;
|
|
key[index++] = fillStyle.color;
|
|
key[index++] = fillStyle.alpha;
|
|
key[index++] = (_a = fillStyle.fill) == null ? void 0 : _a.styleKey;
|
|
return index;
|
|
}
|
|
function addStokeStyleKey(strokeStyle, key, index) {
|
|
if (!strokeStyle)
|
|
return index;
|
|
index = addFillStyleKey(strokeStyle, key, index);
|
|
key[index++] = strokeStyle.width;
|
|
key[index++] = strokeStyle.alignment;
|
|
key[index++] = strokeStyle.cap;
|
|
key[index++] = strokeStyle.join;
|
|
key[index++] = strokeStyle.miterLimit;
|
|
return index;
|
|
}
|
|
function addDropShadowKey(dropShadow, key, index) {
|
|
if (!dropShadow)
|
|
return index;
|
|
key[index++] = dropShadow.alpha;
|
|
key[index++] = dropShadow.angle;
|
|
key[index++] = dropShadow.blur;
|
|
key[index++] = dropShadow.distance;
|
|
key[index++] = Color.shared.setValue(dropShadow.color).toNumber();
|
|
return index;
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$P = Object.defineProperty;
|
|
var __defProps$l = Object.defineProperties;
|
|
var __getOwnPropDescs$l = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$P = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$P = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$P = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$P = (obj, key, value) => key in obj ? __defProp$P(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$P = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$P.call(b, prop))
|
|
__defNormalProp$P(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$P)
|
|
for (var prop of __getOwnPropSymbols$P(b)) {
|
|
if (__propIsEnum$P.call(b, prop))
|
|
__defNormalProp$P(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$l = (a, b) => __defProps$l(a, __getOwnPropDescs$l(b));
|
|
const _TextStyle = class _TextStyle extends EventEmitter {
|
|
constructor(style = {}) {
|
|
super();
|
|
convertV7Tov8Style(style);
|
|
const fullStyle = __spreadValues$P(__spreadValues$P({}, _TextStyle.defaultTextStyle), style);
|
|
for (const key in fullStyle) {
|
|
const thisKey = key;
|
|
this[thisKey] = fullStyle[key];
|
|
}
|
|
this.update();
|
|
}
|
|
/**
|
|
* Alignment for multiline text, does not affect single line text.
|
|
* @member {'left'|'center'|'right'|'justify'}
|
|
*/
|
|
get align() {
|
|
return this._align;
|
|
}
|
|
set align(value) {
|
|
this._align = value;
|
|
this.update();
|
|
}
|
|
/** Indicates if lines can be wrapped within words, it needs wordWrap to be set to true. */
|
|
get breakWords() {
|
|
return this._breakWords;
|
|
}
|
|
set breakWords(value) {
|
|
this._breakWords = value;
|
|
this.update();
|
|
}
|
|
/** Set a drop shadow for the text. */
|
|
get dropShadow() {
|
|
return this._dropShadow;
|
|
}
|
|
set dropShadow(value) {
|
|
if (value !== null && typeof value === "object") {
|
|
this._dropShadow = this._createProxy(__spreadValues$P(__spreadValues$P({}, _TextStyle.defaultDropShadow), value));
|
|
} else {
|
|
this._dropShadow = value ? this._createProxy(__spreadValues$P({}, _TextStyle.defaultDropShadow)) : null;
|
|
}
|
|
this.update();
|
|
}
|
|
/** The font family, can be a single font name, or a list of names where the first is the preferred font. */
|
|
get fontFamily() {
|
|
return this._fontFamily;
|
|
}
|
|
set fontFamily(value) {
|
|
this._fontFamily = value;
|
|
this.update();
|
|
}
|
|
/** The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em') */
|
|
get fontSize() {
|
|
return this._fontSize;
|
|
}
|
|
set fontSize(value) {
|
|
if (typeof value === "string") {
|
|
this._fontSize = parseInt(value, 10);
|
|
} else {
|
|
this._fontSize = value;
|
|
}
|
|
this.update();
|
|
}
|
|
/**
|
|
* The font style.
|
|
* @member {'normal'|'italic'|'oblique'}
|
|
*/
|
|
get fontStyle() {
|
|
return this._fontStyle;
|
|
}
|
|
set fontStyle(value) {
|
|
this._fontStyle = value;
|
|
this.update();
|
|
}
|
|
/**
|
|
* The font variant.
|
|
* @member {'normal'|'small-caps'}
|
|
*/
|
|
get fontVariant() {
|
|
return this._fontVariant;
|
|
}
|
|
set fontVariant(value) {
|
|
this._fontVariant = value;
|
|
this.update();
|
|
}
|
|
/**
|
|
* The font weight.
|
|
* @member {'normal'|'bold'|'bolder'|'lighter'|'100'|'200'|'300'|'400'|'500'|'600'|'700'|'800'|'900'}
|
|
*/
|
|
get fontWeight() {
|
|
return this._fontWeight;
|
|
}
|
|
set fontWeight(value) {
|
|
this._fontWeight = value;
|
|
this.update();
|
|
}
|
|
/** The space between lines. */
|
|
get leading() {
|
|
return this._leading;
|
|
}
|
|
set leading(value) {
|
|
this._leading = value;
|
|
this.update();
|
|
}
|
|
/** The amount of spacing between letters, default is 0. */
|
|
get letterSpacing() {
|
|
return this._letterSpacing;
|
|
}
|
|
set letterSpacing(value) {
|
|
this._letterSpacing = value;
|
|
this.update();
|
|
}
|
|
/** The line height, a number that represents the vertical space that a letter uses. */
|
|
get lineHeight() {
|
|
return this._lineHeight;
|
|
}
|
|
set lineHeight(value) {
|
|
this._lineHeight = value;
|
|
this.update();
|
|
}
|
|
/**
|
|
* Occasionally some fonts are cropped. Adding some padding will prevent this from happening
|
|
* by adding padding to all sides of the text.
|
|
*/
|
|
get padding() {
|
|
return this._padding;
|
|
}
|
|
set padding(value) {
|
|
this._padding = value;
|
|
this.update();
|
|
}
|
|
/** Trim transparent borders. This is an expensive operation so only use this if you have to! */
|
|
get trim() {
|
|
return this._trim;
|
|
}
|
|
set trim(value) {
|
|
this._trim = value;
|
|
this.update();
|
|
}
|
|
/**
|
|
* The baseline of the text that is rendered.
|
|
* @member {'alphabetic'|'top'|'hanging'|'middle'|'ideographic'|'bottom'}
|
|
*/
|
|
get textBaseline() {
|
|
return this._textBaseline;
|
|
}
|
|
set textBaseline(value) {
|
|
this._textBaseline = value;
|
|
this.update();
|
|
}
|
|
/**
|
|
* How newlines and spaces should be handled.
|
|
* Default is 'pre' (preserve, preserve).
|
|
*
|
|
* value | New lines | Spaces
|
|
* --- | --- | ---
|
|
* 'normal' | Collapse | Collapse
|
|
* 'pre' | Preserve | Preserve
|
|
* 'pre-line' | Preserve | Collapse
|
|
* @member {'normal'|'pre'|'pre-line'}
|
|
*/
|
|
get whiteSpace() {
|
|
return this._whiteSpace;
|
|
}
|
|
set whiteSpace(value) {
|
|
this._whiteSpace = value;
|
|
this.update();
|
|
}
|
|
/** Indicates if word wrap should be used. */
|
|
get wordWrap() {
|
|
return this._wordWrap;
|
|
}
|
|
set wordWrap(value) {
|
|
this._wordWrap = value;
|
|
this.update();
|
|
}
|
|
/** The width at which text will wrap, it needs wordWrap to be set to true. */
|
|
get wordWrapWidth() {
|
|
return this._wordWrapWidth;
|
|
}
|
|
set wordWrapWidth(value) {
|
|
this._wordWrapWidth = value;
|
|
this.update();
|
|
}
|
|
/** A fillstyle that will be used on the text e.g., 'red', '#00FF00'. */
|
|
get fill() {
|
|
return this._originalFill;
|
|
}
|
|
set fill(value) {
|
|
if (value === this._originalFill)
|
|
return;
|
|
this._originalFill = value;
|
|
if (this._isFillStyle(value)) {
|
|
this._originalFill = this._createProxy(__spreadValues$P(__spreadValues$P({}, GraphicsContext.defaultFillStyle), value), () => {
|
|
this._fill = toFillStyle(
|
|
__spreadValues$P({}, this._originalFill),
|
|
GraphicsContext.defaultFillStyle
|
|
);
|
|
});
|
|
}
|
|
this._fill = toFillStyle(
|
|
value === 0 ? "black" : value,
|
|
GraphicsContext.defaultFillStyle
|
|
);
|
|
this.update();
|
|
}
|
|
/** A fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'. */
|
|
get stroke() {
|
|
return this._originalStroke;
|
|
}
|
|
set stroke(value) {
|
|
if (value === this._originalStroke)
|
|
return;
|
|
this._originalStroke = value;
|
|
if (this._isFillStyle(value)) {
|
|
this._originalStroke = this._createProxy(__spreadValues$P(__spreadValues$P({}, GraphicsContext.defaultStrokeStyle), value), () => {
|
|
this._stroke = toStrokeStyle(
|
|
__spreadValues$P({}, this._originalStroke),
|
|
GraphicsContext.defaultStrokeStyle
|
|
);
|
|
});
|
|
}
|
|
this._stroke = toStrokeStyle(value, GraphicsContext.defaultStrokeStyle);
|
|
this.update();
|
|
}
|
|
_generateKey() {
|
|
this._styleKey = generateTextStyleKey(this);
|
|
return this._styleKey;
|
|
}
|
|
update() {
|
|
this._styleKey = null;
|
|
this.emit("update", this);
|
|
}
|
|
/** Resets all properties to the default values */
|
|
reset() {
|
|
const defaultStyle = _TextStyle.defaultTextStyle;
|
|
for (const key in defaultStyle) {
|
|
this[key] = defaultStyle[key];
|
|
}
|
|
}
|
|
get styleKey() {
|
|
return this._styleKey || this._generateKey();
|
|
}
|
|
/**
|
|
* Creates a new TextStyle object with the same values as this one.
|
|
* @returns New cloned TextStyle object
|
|
*/
|
|
clone() {
|
|
return new _TextStyle({
|
|
align: this.align,
|
|
breakWords: this.breakWords,
|
|
dropShadow: this._dropShadow ? __spreadValues$P({}, this._dropShadow) : null,
|
|
fill: this._fill,
|
|
fontFamily: this.fontFamily,
|
|
fontSize: this.fontSize,
|
|
fontStyle: this.fontStyle,
|
|
fontVariant: this.fontVariant,
|
|
fontWeight: this.fontWeight,
|
|
leading: this.leading,
|
|
letterSpacing: this.letterSpacing,
|
|
lineHeight: this.lineHeight,
|
|
padding: this.padding,
|
|
stroke: this._stroke,
|
|
textBaseline: this.textBaseline,
|
|
whiteSpace: this.whiteSpace,
|
|
wordWrap: this.wordWrap,
|
|
wordWrapWidth: this.wordWrapWidth
|
|
});
|
|
}
|
|
/**
|
|
* Destroys this text style.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
* have been set to that value
|
|
* @param {boolean} [options.texture=false] - Should it destroy the texture of the this style
|
|
* @param {boolean} [options.textureSource=false] - Should it destroy the textureSource of the this style
|
|
*/
|
|
destroy(options = false) {
|
|
var _a, _b, _c, _d;
|
|
this.removeAllListeners();
|
|
const destroyTexture = typeof options === "boolean" ? options : options == null ? void 0 : options.texture;
|
|
if (destroyTexture) {
|
|
const destroyTextureSource = typeof options === "boolean" ? options : options == null ? void 0 : options.textureSource;
|
|
if ((_a = this._fill) == null ? void 0 : _a.texture) {
|
|
this._fill.texture.destroy(destroyTextureSource);
|
|
}
|
|
if ((_b = this._originalFill) == null ? void 0 : _b.texture) {
|
|
this._originalFill.texture.destroy(destroyTextureSource);
|
|
}
|
|
if ((_c = this._stroke) == null ? void 0 : _c.texture) {
|
|
this._stroke.texture.destroy(destroyTextureSource);
|
|
}
|
|
if ((_d = this._originalStroke) == null ? void 0 : _d.texture) {
|
|
this._originalStroke.texture.destroy(destroyTextureSource);
|
|
}
|
|
}
|
|
this._fill = null;
|
|
this._stroke = null;
|
|
this.dropShadow = null;
|
|
this._originalStroke = null;
|
|
this._originalFill = null;
|
|
}
|
|
_createProxy(value, cb) {
|
|
return new Proxy(value, {
|
|
set: (target, property, newValue) => {
|
|
target[property] = newValue;
|
|
cb == null ? void 0 : cb(property, newValue);
|
|
this.update();
|
|
return true;
|
|
}
|
|
});
|
|
}
|
|
_isFillStyle(value) {
|
|
return (value != null ? value : null) !== null && !(Color.isColorLike(value) || value instanceof FillGradient || value instanceof FillPattern);
|
|
}
|
|
};
|
|
/** The default drop shadow settings */
|
|
_TextStyle.defaultDropShadow = {
|
|
/** Set alpha for the drop shadow */
|
|
alpha: 1,
|
|
/** Set a angle of the drop shadow */
|
|
angle: Math.PI / 6,
|
|
/** Set a shadow blur radius */
|
|
blur: 0,
|
|
/** A fill style to be used on the e.g., 'red', '#00FF00' */
|
|
color: "black",
|
|
/** Set a distance of the drop shadow */
|
|
distance: 5
|
|
};
|
|
/** The default text style settings */
|
|
_TextStyle.defaultTextStyle = {
|
|
/**
|
|
* See {@link TextStyle.align}
|
|
* @type {'left'|'center'|'right'|'justify'}
|
|
*/
|
|
align: "left",
|
|
/** See {@link TextStyle.breakWords} */
|
|
breakWords: false,
|
|
/** See {@link TextStyle.dropShadow} */
|
|
dropShadow: null,
|
|
/**
|
|
* See {@link TextStyle.fill}
|
|
* @type {string|string[]|number|number[]|CanvasGradient|CanvasPattern}
|
|
*/
|
|
fill: "black",
|
|
/**
|
|
* See {@link TextStyle.fontFamily}
|
|
* @type {string|string[]}
|
|
*/
|
|
fontFamily: "Arial",
|
|
/**
|
|
* See {@link TextStyle.fontSize}
|
|
* @type {number|string}
|
|
*/
|
|
fontSize: 26,
|
|
/**
|
|
* See {@link TextStyle.fontStyle}
|
|
* @type {'normal'|'italic'|'oblique'}
|
|
*/
|
|
fontStyle: "normal",
|
|
/**
|
|
* See {@link TextStyle.fontVariant}
|
|
* @type {'normal'|'small-caps'}
|
|
*/
|
|
fontVariant: "normal",
|
|
/**
|
|
* See {@link TextStyle.fontWeight}
|
|
* @type {'normal'|'bold'|'bolder'|'lighter'|'100'|'200'|'300'|'400'|'500'|'600'|'700'|'800'|'900'}
|
|
*/
|
|
fontWeight: "normal",
|
|
/** See {@link TextStyle.leading} */
|
|
leading: 0,
|
|
/** See {@link TextStyle.letterSpacing} */
|
|
letterSpacing: 0,
|
|
/** See {@link TextStyle.lineHeight} */
|
|
lineHeight: 0,
|
|
/** See {@link TextStyle.padding} */
|
|
padding: 0,
|
|
/**
|
|
* See {@link TextStyle.stroke}
|
|
* @type {string|number}
|
|
*/
|
|
stroke: null,
|
|
/**
|
|
* See {@link TextStyle.textBaseline}
|
|
* @type {'alphabetic'|'top'|'hanging'|'middle'|'ideographic'|'bottom'}
|
|
*/
|
|
textBaseline: "alphabetic",
|
|
/** See {@link TextStyle.trim} */
|
|
trim: false,
|
|
/**
|
|
* See {@link TextStyle.whiteSpace}
|
|
* @type {'normal'|'pre'|'pre-line'}
|
|
*/
|
|
whiteSpace: "pre",
|
|
/** See {@link TextStyle.wordWrap} */
|
|
wordWrap: false,
|
|
/** See {@link TextStyle.wordWrapWidth} */
|
|
wordWrapWidth: 100
|
|
};
|
|
let TextStyle = _TextStyle;
|
|
function convertV7Tov8Style(style) {
|
|
var _a, _b, _c, _d, _e;
|
|
const oldStyle = style;
|
|
if (typeof oldStyle.dropShadow === "boolean" && oldStyle.dropShadow) {
|
|
const defaults = TextStyle.defaultDropShadow;
|
|
style.dropShadow = {
|
|
alpha: (_a = oldStyle.dropShadowAlpha) != null ? _a : defaults.alpha,
|
|
angle: (_b = oldStyle.dropShadowAngle) != null ? _b : defaults.angle,
|
|
blur: (_c = oldStyle.dropShadowBlur) != null ? _c : defaults.blur,
|
|
color: (_d = oldStyle.dropShadowColor) != null ? _d : defaults.color,
|
|
distance: (_e = oldStyle.dropShadowDistance) != null ? _e : defaults.distance
|
|
};
|
|
}
|
|
if (oldStyle.strokeThickness !== void 0) {
|
|
deprecation(v8_0_0, "strokeThickness is now a part of stroke");
|
|
const color = oldStyle.stroke;
|
|
let obj = {};
|
|
if (Color.isColorLike(color)) {
|
|
obj.color = color;
|
|
} else if (color instanceof FillGradient || color instanceof FillPattern) {
|
|
obj.fill = color;
|
|
} else if (Object.hasOwnProperty.call(color, "color") || Object.hasOwnProperty.call(color, "fill")) {
|
|
obj = color;
|
|
} else {
|
|
throw new Error("Invalid stroke value.");
|
|
}
|
|
style.stroke = __spreadProps$l(__spreadValues$P({}, obj), {
|
|
width: oldStyle.strokeThickness
|
|
});
|
|
}
|
|
if (Array.isArray(oldStyle.fillGradientStops)) {
|
|
deprecation(v8_0_0, "gradient fill is now a fill pattern: `new FillGradient(...)`");
|
|
let fontSize;
|
|
if (style.fontSize == null) {
|
|
style.fontSize = TextStyle.defaultTextStyle.fontSize;
|
|
} else if (typeof style.fontSize === "string") {
|
|
fontSize = parseInt(style.fontSize, 10);
|
|
} else {
|
|
fontSize = style.fontSize;
|
|
}
|
|
const gradientFill = new FillGradient(0, 0, 0, fontSize * 1.7);
|
|
const fills = oldStyle.fillGradientStops.map((color) => Color.shared.setValue(color).toNumber());
|
|
fills.forEach((number, index) => {
|
|
const ratio = index / (fills.length - 1);
|
|
gradientFill.addColorStop(ratio, number);
|
|
});
|
|
style.fill = {
|
|
fill: gradientFill
|
|
};
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const tempBounds$3 = new Bounds();
|
|
function getPo2TextureFromSource(image, width, height, resolution) {
|
|
const bounds = tempBounds$3;
|
|
bounds.minX = 0;
|
|
bounds.minY = 0;
|
|
bounds.maxX = image.width / resolution | 0;
|
|
bounds.maxY = image.height / resolution | 0;
|
|
const texture = TexturePool.getOptimalTexture(
|
|
bounds.width,
|
|
bounds.height,
|
|
resolution,
|
|
false
|
|
);
|
|
texture.source.uploadMethodId = "image";
|
|
texture.source.resource = image;
|
|
texture.source.alphaMode = "premultiply-alpha-on-upload";
|
|
texture.frame.width = width / resolution;
|
|
texture.frame.height = height / resolution;
|
|
texture.source.emit("update", texture.source);
|
|
texture.updateUvs();
|
|
return texture;
|
|
}
|
|
|
|
"use strict";
|
|
const genericFontFamilies = [
|
|
"serif",
|
|
"sans-serif",
|
|
"monospace",
|
|
"cursive",
|
|
"fantasy",
|
|
"system-ui"
|
|
];
|
|
function fontStringFromTextStyle(style) {
|
|
const fontSizeString = typeof style.fontSize === "number" ? `${style.fontSize}px` : style.fontSize;
|
|
let fontFamilies = style.fontFamily;
|
|
if (!Array.isArray(style.fontFamily)) {
|
|
fontFamilies = style.fontFamily.split(",");
|
|
}
|
|
for (let i = fontFamilies.length - 1; i >= 0; i--) {
|
|
let fontFamily = fontFamilies[i].trim();
|
|
if (!/([\"\'])[^\'\"]+\1/.test(fontFamily) && !genericFontFamilies.includes(fontFamily)) {
|
|
fontFamily = `"${fontFamily}"`;
|
|
}
|
|
fontFamilies[i] = fontFamily;
|
|
}
|
|
return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${fontFamilies.join(",")}`;
|
|
}
|
|
|
|
"use strict";
|
|
const contextSettings = {
|
|
// TextMetrics requires getImageData readback for measuring fonts.
|
|
willReadFrequently: true
|
|
};
|
|
const _CanvasTextMetrics = class _CanvasTextMetrics {
|
|
/**
|
|
* Checking that we can use modern canvas 2D API.
|
|
*
|
|
* Note: This is an unstable API, Chrome < 94 use `textLetterSpacing`, later versions use `letterSpacing`.
|
|
* @see TextMetrics.experimentalLetterSpacing
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/ICanvasRenderingContext2D/letterSpacing
|
|
* @see https://developer.chrome.com/origintrials/#/view_trial/3585991203293757441
|
|
*/
|
|
static get experimentalLetterSpacingSupported() {
|
|
let result = _CanvasTextMetrics._experimentalLetterSpacingSupported;
|
|
if (result !== void 0) {
|
|
const proto = DOMAdapter.get().getCanvasRenderingContext2D().prototype;
|
|
result = _CanvasTextMetrics._experimentalLetterSpacingSupported = "letterSpacing" in proto || "textLetterSpacing" in proto;
|
|
}
|
|
return result;
|
|
}
|
|
/**
|
|
* @param text - the text that was measured
|
|
* @param style - the style that was measured
|
|
* @param width - the measured width of the text
|
|
* @param height - the measured height of the text
|
|
* @param lines - an array of the lines of text broken by new lines and wrapping if specified in style
|
|
* @param lineWidths - an array of the line widths for each line matched to `lines`
|
|
* @param lineHeight - the measured line height for this style
|
|
* @param maxLineWidth - the maximum line width for all measured lines
|
|
* @param {FontMetrics} fontProperties - the font properties object from TextMetrics.measureFont
|
|
*/
|
|
constructor(text, style, width, height, lines, lineWidths, lineHeight, maxLineWidth, fontProperties) {
|
|
this.text = text;
|
|
this.style = style;
|
|
this.width = width;
|
|
this.height = height;
|
|
this.lines = lines;
|
|
this.lineWidths = lineWidths;
|
|
this.lineHeight = lineHeight;
|
|
this.maxLineWidth = maxLineWidth;
|
|
this.fontProperties = fontProperties;
|
|
}
|
|
/**
|
|
* Measures the supplied string of text and returns a Rectangle.
|
|
* @param text - The text to measure.
|
|
* @param style - The text style to use for measuring
|
|
* @param canvas - optional specification of the canvas to use for measuring.
|
|
* @param wordWrap
|
|
* @returns Measured width and height of the text.
|
|
*/
|
|
static measureText(text = " ", style, canvas = _CanvasTextMetrics._canvas, wordWrap = style.wordWrap) {
|
|
var _a;
|
|
const textKey = `${text}:${style.styleKey}`;
|
|
if (_CanvasTextMetrics._measurementCache[textKey])
|
|
return _CanvasTextMetrics._measurementCache[textKey];
|
|
const font = fontStringFromTextStyle(style);
|
|
const fontProperties = _CanvasTextMetrics.measureFont(font);
|
|
if (fontProperties.fontSize === 0) {
|
|
fontProperties.fontSize = style.fontSize;
|
|
fontProperties.ascent = style.fontSize;
|
|
}
|
|
const context = _CanvasTextMetrics.__context;
|
|
context.font = font;
|
|
const outputText = wordWrap ? _CanvasTextMetrics._wordWrap(text, style, canvas) : text;
|
|
const lines = outputText.split(/(?:\r\n|\r|\n)/);
|
|
const lineWidths = new Array(lines.length);
|
|
let maxLineWidth = 0;
|
|
for (let i = 0; i < lines.length; i++) {
|
|
const lineWidth = _CanvasTextMetrics._measureText(lines[i], style.letterSpacing, context);
|
|
lineWidths[i] = lineWidth;
|
|
maxLineWidth = Math.max(maxLineWidth, lineWidth);
|
|
}
|
|
const strokeWidth = ((_a = style._stroke) == null ? void 0 : _a.width) || 0;
|
|
let width = maxLineWidth + strokeWidth;
|
|
if (style.dropShadow) {
|
|
width += style.dropShadow.distance;
|
|
}
|
|
const lineHeight = style.lineHeight || fontProperties.fontSize;
|
|
let height = Math.max(lineHeight, fontProperties.fontSize + strokeWidth) + (lines.length - 1) * (lineHeight + style.leading);
|
|
if (style.dropShadow) {
|
|
height += style.dropShadow.distance;
|
|
}
|
|
const measurements = new _CanvasTextMetrics(
|
|
text,
|
|
style,
|
|
width,
|
|
height,
|
|
lines,
|
|
lineWidths,
|
|
lineHeight + style.leading,
|
|
maxLineWidth,
|
|
fontProperties
|
|
);
|
|
return measurements;
|
|
}
|
|
static _measureText(text, letterSpacing, context) {
|
|
let useExperimentalLetterSpacing = false;
|
|
if (_CanvasTextMetrics.experimentalLetterSpacingSupported) {
|
|
if (_CanvasTextMetrics.experimentalLetterSpacing) {
|
|
context.letterSpacing = `${letterSpacing}px`;
|
|
context.textLetterSpacing = `${letterSpacing}px`;
|
|
useExperimentalLetterSpacing = true;
|
|
} else {
|
|
context.letterSpacing = "0px";
|
|
context.textLetterSpacing = "0px";
|
|
}
|
|
}
|
|
let width = context.measureText(text).width;
|
|
if (width > 0) {
|
|
if (useExperimentalLetterSpacing) {
|
|
width -= letterSpacing;
|
|
} else {
|
|
width += (_CanvasTextMetrics.graphemeSegmenter(text).length - 1) * letterSpacing;
|
|
}
|
|
}
|
|
return width;
|
|
}
|
|
/**
|
|
* Applies newlines to a string to have it optimally fit into the horizontal
|
|
* bounds set by the Text object's wordWrapWidth property.
|
|
* @param text - String to apply word wrapping to
|
|
* @param style - the style to use when wrapping
|
|
* @param canvas - optional specification of the canvas to use for measuring.
|
|
* @returns New string with new lines applied where required
|
|
*/
|
|
static _wordWrap(text, style, canvas = _CanvasTextMetrics._canvas) {
|
|
const context = canvas.getContext("2d", contextSettings);
|
|
let width = 0;
|
|
let line = "";
|
|
let lines = "";
|
|
const cache = /* @__PURE__ */ Object.create(null);
|
|
const { letterSpacing, whiteSpace } = style;
|
|
const collapseSpaces = _CanvasTextMetrics._collapseSpaces(whiteSpace);
|
|
const collapseNewlines = _CanvasTextMetrics._collapseNewlines(whiteSpace);
|
|
let canPrependSpaces = !collapseSpaces;
|
|
const wordWrapWidth = style.wordWrapWidth + letterSpacing;
|
|
const tokens = _CanvasTextMetrics._tokenize(text);
|
|
for (let i = 0; i < tokens.length; i++) {
|
|
let token = tokens[i];
|
|
if (_CanvasTextMetrics._isNewline(token)) {
|
|
if (!collapseNewlines) {
|
|
lines += _CanvasTextMetrics._addLine(line);
|
|
canPrependSpaces = !collapseSpaces;
|
|
line = "";
|
|
width = 0;
|
|
continue;
|
|
}
|
|
token = " ";
|
|
}
|
|
if (collapseSpaces) {
|
|
const currIsBreakingSpace = _CanvasTextMetrics.isBreakingSpace(token);
|
|
const lastIsBreakingSpace = _CanvasTextMetrics.isBreakingSpace(line[line.length - 1]);
|
|
if (currIsBreakingSpace && lastIsBreakingSpace) {
|
|
continue;
|
|
}
|
|
}
|
|
const tokenWidth = _CanvasTextMetrics._getFromCache(token, letterSpacing, cache, context);
|
|
if (tokenWidth > wordWrapWidth) {
|
|
if (line !== "") {
|
|
lines += _CanvasTextMetrics._addLine(line);
|
|
line = "";
|
|
width = 0;
|
|
}
|
|
if (_CanvasTextMetrics.canBreakWords(token, style.breakWords)) {
|
|
const characters = _CanvasTextMetrics.wordWrapSplit(token);
|
|
for (let j = 0; j < characters.length; j++) {
|
|
let char = characters[j];
|
|
let lastChar = char;
|
|
let k = 1;
|
|
while (characters[j + k]) {
|
|
const nextChar = characters[j + k];
|
|
if (!_CanvasTextMetrics.canBreakChars(lastChar, nextChar, token, j, style.breakWords)) {
|
|
char += nextChar;
|
|
} else {
|
|
break;
|
|
}
|
|
lastChar = nextChar;
|
|
k++;
|
|
}
|
|
j += k - 1;
|
|
const characterWidth = _CanvasTextMetrics._getFromCache(char, letterSpacing, cache, context);
|
|
if (characterWidth + width > wordWrapWidth) {
|
|
lines += _CanvasTextMetrics._addLine(line);
|
|
canPrependSpaces = false;
|
|
line = "";
|
|
width = 0;
|
|
}
|
|
line += char;
|
|
width += characterWidth;
|
|
}
|
|
} else {
|
|
if (line.length > 0) {
|
|
lines += _CanvasTextMetrics._addLine(line);
|
|
line = "";
|
|
width = 0;
|
|
}
|
|
const isLastToken = i === tokens.length - 1;
|
|
lines += _CanvasTextMetrics._addLine(token, !isLastToken);
|
|
canPrependSpaces = false;
|
|
line = "";
|
|
width = 0;
|
|
}
|
|
} else {
|
|
if (tokenWidth + width > wordWrapWidth) {
|
|
canPrependSpaces = false;
|
|
lines += _CanvasTextMetrics._addLine(line);
|
|
line = "";
|
|
width = 0;
|
|
}
|
|
if (line.length > 0 || !_CanvasTextMetrics.isBreakingSpace(token) || canPrependSpaces) {
|
|
line += token;
|
|
width += tokenWidth;
|
|
}
|
|
}
|
|
}
|
|
lines += _CanvasTextMetrics._addLine(line, false);
|
|
return lines;
|
|
}
|
|
/**
|
|
* Convenience function for logging each line added during the wordWrap method.
|
|
* @param line - The line of text to add
|
|
* @param newLine - Add new line character to end
|
|
* @returns A formatted line
|
|
*/
|
|
static _addLine(line, newLine = true) {
|
|
line = _CanvasTextMetrics._trimRight(line);
|
|
line = newLine ? `${line}
|
|
` : line;
|
|
return line;
|
|
}
|
|
/**
|
|
* Gets & sets the widths of calculated characters in a cache object
|
|
* @param key - The key
|
|
* @param letterSpacing - The letter spacing
|
|
* @param cache - The cache
|
|
* @param context - The canvas context
|
|
* @returns The from cache.
|
|
*/
|
|
static _getFromCache(key, letterSpacing, cache, context) {
|
|
let width = cache[key];
|
|
if (typeof width !== "number") {
|
|
width = _CanvasTextMetrics._measureText(key, letterSpacing, context) + letterSpacing;
|
|
cache[key] = width;
|
|
}
|
|
return width;
|
|
}
|
|
/**
|
|
* Determines whether we should collapse breaking spaces.
|
|
* @param whiteSpace - The TextStyle property whiteSpace
|
|
* @returns Should collapse
|
|
*/
|
|
static _collapseSpaces(whiteSpace) {
|
|
return whiteSpace === "normal" || whiteSpace === "pre-line";
|
|
}
|
|
/**
|
|
* Determines whether we should collapse newLine chars.
|
|
* @param whiteSpace - The white space
|
|
* @returns should collapse
|
|
*/
|
|
static _collapseNewlines(whiteSpace) {
|
|
return whiteSpace === "normal";
|
|
}
|
|
/**
|
|
* Trims breaking whitespaces from string.
|
|
* @param text - The text
|
|
* @returns Trimmed string
|
|
*/
|
|
static _trimRight(text) {
|
|
if (typeof text !== "string") {
|
|
return "";
|
|
}
|
|
for (let i = text.length - 1; i >= 0; i--) {
|
|
const char = text[i];
|
|
if (!_CanvasTextMetrics.isBreakingSpace(char)) {
|
|
break;
|
|
}
|
|
text = text.slice(0, -1);
|
|
}
|
|
return text;
|
|
}
|
|
/**
|
|
* Determines if char is a newline.
|
|
* @param char - The character
|
|
* @returns True if newline, False otherwise.
|
|
*/
|
|
static _isNewline(char) {
|
|
if (typeof char !== "string") {
|
|
return false;
|
|
}
|
|
return _CanvasTextMetrics._newlines.includes(char.charCodeAt(0));
|
|
}
|
|
/**
|
|
* Determines if char is a breaking whitespace.
|
|
*
|
|
* It allows one to determine whether char should be a breaking whitespace
|
|
* For example certain characters in CJK langs or numbers.
|
|
* It must return a boolean.
|
|
* @param char - The character
|
|
* @param [_nextChar] - The next character
|
|
* @returns True if whitespace, False otherwise.
|
|
*/
|
|
static isBreakingSpace(char, _nextChar) {
|
|
if (typeof char !== "string") {
|
|
return false;
|
|
}
|
|
return _CanvasTextMetrics._breakingSpaces.includes(char.charCodeAt(0));
|
|
}
|
|
/**
|
|
* Splits a string into words, breaking-spaces and newLine characters
|
|
* @param text - The text
|
|
* @returns A tokenized array
|
|
*/
|
|
static _tokenize(text) {
|
|
const tokens = [];
|
|
let token = "";
|
|
if (typeof text !== "string") {
|
|
return tokens;
|
|
}
|
|
for (let i = 0; i < text.length; i++) {
|
|
const char = text[i];
|
|
const nextChar = text[i + 1];
|
|
if (_CanvasTextMetrics.isBreakingSpace(char, nextChar) || _CanvasTextMetrics._isNewline(char)) {
|
|
if (token !== "") {
|
|
tokens.push(token);
|
|
token = "";
|
|
}
|
|
tokens.push(char);
|
|
continue;
|
|
}
|
|
token += char;
|
|
}
|
|
if (token !== "") {
|
|
tokens.push(token);
|
|
}
|
|
return tokens;
|
|
}
|
|
/**
|
|
* Overridable helper method used internally by TextMetrics, exposed to allow customizing the class's behavior.
|
|
*
|
|
* It allows one to customise which words should break
|
|
* Examples are if the token is CJK or numbers.
|
|
* It must return a boolean.
|
|
* @param _token - The token
|
|
* @param breakWords - The style attr break words
|
|
* @returns Whether to break word or not
|
|
*/
|
|
static canBreakWords(_token, breakWords) {
|
|
return breakWords;
|
|
}
|
|
/**
|
|
* Overridable helper method used internally by TextMetrics, exposed to allow customizing the class's behavior.
|
|
*
|
|
* It allows one to determine whether a pair of characters
|
|
* should be broken by newlines
|
|
* For example certain characters in CJK langs or numbers.
|
|
* It must return a boolean.
|
|
* @param _char - The character
|
|
* @param _nextChar - The next character
|
|
* @param _token - The token/word the characters are from
|
|
* @param _index - The index in the token of the char
|
|
* @param _breakWords - The style attr break words
|
|
* @returns whether to break word or not
|
|
*/
|
|
static canBreakChars(_char, _nextChar, _token, _index, _breakWords) {
|
|
return true;
|
|
}
|
|
/**
|
|
* Overridable helper method used internally by TextMetrics, exposed to allow customizing the class's behavior.
|
|
*
|
|
* It is called when a token (usually a word) has to be split into separate pieces
|
|
* in order to determine the point to break a word.
|
|
* It must return an array of characters.
|
|
* @param token - The token to split
|
|
* @returns The characters of the token
|
|
* @see CanvasTextMetrics.graphemeSegmenter
|
|
*/
|
|
static wordWrapSplit(token) {
|
|
return _CanvasTextMetrics.graphemeSegmenter(token);
|
|
}
|
|
/**
|
|
* Calculates the ascent, descent and fontSize of a given font-style
|
|
* @param font - String representing the style of the font
|
|
* @returns Font properties object
|
|
*/
|
|
static measureFont(font) {
|
|
if (_CanvasTextMetrics._fonts[font]) {
|
|
return _CanvasTextMetrics._fonts[font];
|
|
}
|
|
const context = _CanvasTextMetrics._context;
|
|
context.font = font;
|
|
const metrics = context.measureText(_CanvasTextMetrics.METRICS_STRING + _CanvasTextMetrics.BASELINE_SYMBOL);
|
|
const properties = {
|
|
ascent: metrics.actualBoundingBoxAscent,
|
|
descent: metrics.actualBoundingBoxDescent,
|
|
fontSize: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
|
|
};
|
|
_CanvasTextMetrics._fonts[font] = properties;
|
|
return properties;
|
|
}
|
|
/**
|
|
* Clear font metrics in metrics cache.
|
|
* @param {string} [font] - font name. If font name not set then clear cache for all fonts.
|
|
*/
|
|
static clearMetrics(font = "") {
|
|
if (font) {
|
|
delete _CanvasTextMetrics._fonts[font];
|
|
} else {
|
|
_CanvasTextMetrics._fonts = {};
|
|
}
|
|
}
|
|
/**
|
|
* Cached canvas element for measuring text
|
|
* TODO: this should be private, but isn't because of backward compat, will fix later.
|
|
* @ignore
|
|
*/
|
|
static get _canvas() {
|
|
if (!_CanvasTextMetrics.__canvas) {
|
|
let canvas;
|
|
try {
|
|
const c = new OffscreenCanvas(0, 0);
|
|
const context = c.getContext("2d", contextSettings);
|
|
if (context == null ? void 0 : context.measureText) {
|
|
_CanvasTextMetrics.__canvas = c;
|
|
return c;
|
|
}
|
|
canvas = DOMAdapter.get().createCanvas();
|
|
} catch (ex) {
|
|
canvas = DOMAdapter.get().createCanvas();
|
|
}
|
|
canvas.width = canvas.height = 10;
|
|
_CanvasTextMetrics.__canvas = canvas;
|
|
}
|
|
return _CanvasTextMetrics.__canvas;
|
|
}
|
|
/**
|
|
* TODO: this should be private, but isn't because of backward compat, will fix later.
|
|
* @ignore
|
|
*/
|
|
static get _context() {
|
|
if (!_CanvasTextMetrics.__context) {
|
|
_CanvasTextMetrics.__context = _CanvasTextMetrics._canvas.getContext("2d", contextSettings);
|
|
}
|
|
return _CanvasTextMetrics.__context;
|
|
}
|
|
};
|
|
/**
|
|
* String used for calculate font metrics.
|
|
* These characters are all tall to help calculate the height required for text.
|
|
*/
|
|
_CanvasTextMetrics.METRICS_STRING = "|\xC9q\xC5";
|
|
/** Baseline symbol for calculate font metrics. */
|
|
_CanvasTextMetrics.BASELINE_SYMBOL = "M";
|
|
/** Baseline multiplier for calculate font metrics. */
|
|
_CanvasTextMetrics.BASELINE_MULTIPLIER = 1.4;
|
|
/** Height multiplier for setting height of canvas to calculate font metrics. */
|
|
_CanvasTextMetrics.HEIGHT_MULTIPLIER = 2;
|
|
/**
|
|
* A Unicode "character", or "grapheme cluster", can be composed of multiple Unicode code points,
|
|
* such as letters with diacritical marks (e.g. `'\u0065\u0301'`, letter e with acute)
|
|
* or emojis with modifiers (e.g. `'\uD83E\uDDD1\u200D\uD83D\uDCBB'`, technologist).
|
|
* The new `Intl.Segmenter` API in ES2022 can split the string into grapheme clusters correctly. If it is not available,
|
|
* PixiJS will fallback to use the iterator of String, which can only spilt the string into code points.
|
|
* If you want to get full functionality in environments that don't support `Intl.Segmenter` (such as Firefox),
|
|
* you can use other libraries such as [grapheme-splitter]{@link https://www.npmjs.com/package/grapheme-splitter}
|
|
* or [graphemer]{@link https://www.npmjs.com/package/graphemer} to create a polyfill. Since these libraries can be
|
|
* relatively large in size to handle various Unicode grapheme clusters properly, PixiJS won't use them directly.
|
|
*/
|
|
_CanvasTextMetrics.graphemeSegmenter = (() => {
|
|
if (typeof (Intl == null ? void 0 : Intl.Segmenter) === "function") {
|
|
const segmenter = new Intl.Segmenter();
|
|
return (s) => [...segmenter.segment(s)].map((x) => x.segment);
|
|
}
|
|
return (s) => [...s];
|
|
})();
|
|
/**
|
|
* New rendering behavior for letter-spacing which uses Chrome's new native API. This will
|
|
* lead to more accurate letter-spacing results because it does not try to manually draw
|
|
* each character. However, this Chrome API is experimental and may not serve all cases yet.
|
|
* @see TextMetrics.experimentalLetterSpacingSupported
|
|
*/
|
|
_CanvasTextMetrics.experimentalLetterSpacing = false;
|
|
/** Cache of {@see TextMetrics.FontMetrics} objects. */
|
|
_CanvasTextMetrics._fonts = {};
|
|
/** Cache of new line chars. */
|
|
_CanvasTextMetrics._newlines = [
|
|
10,
|
|
// line feed
|
|
13
|
|
// carriage return
|
|
];
|
|
/** Cache of breaking spaces. */
|
|
_CanvasTextMetrics._breakingSpaces = [
|
|
9,
|
|
// character tabulation
|
|
32,
|
|
// space
|
|
8192,
|
|
// en quad
|
|
8193,
|
|
// em quad
|
|
8194,
|
|
// en space
|
|
8195,
|
|
// em space
|
|
8196,
|
|
// three-per-em space
|
|
8197,
|
|
// four-per-em space
|
|
8198,
|
|
// six-per-em space
|
|
8200,
|
|
// punctuation space
|
|
8201,
|
|
// thin space
|
|
8202,
|
|
// hair space
|
|
8287,
|
|
// medium mathematical space
|
|
12288
|
|
// ideographic space
|
|
];
|
|
_CanvasTextMetrics._measurementCache = {};
|
|
let CanvasTextMetrics = _CanvasTextMetrics;
|
|
|
|
"use strict";
|
|
function getCanvasFillStyle(fillStyle, context) {
|
|
var _a;
|
|
if (fillStyle.texture === Texture.WHITE && !fillStyle.fill) {
|
|
return Color.shared.setValue(fillStyle.color).setAlpha((_a = fillStyle.alpha) != null ? _a : 1).toHexa();
|
|
} else if (!fillStyle.fill) {
|
|
const pattern = context.createPattern(fillStyle.texture.source.resource, "repeat");
|
|
const tempMatrix = fillStyle.matrix.copyTo(Matrix.shared);
|
|
tempMatrix.scale(fillStyle.texture.frame.width, fillStyle.texture.frame.height);
|
|
pattern.setTransform(tempMatrix);
|
|
return pattern;
|
|
} else if (fillStyle.fill instanceof FillPattern) {
|
|
const fillPattern = fillStyle.fill;
|
|
const pattern = context.createPattern(fillPattern.texture.source.resource, "repeat");
|
|
const tempMatrix = fillPattern.transform.copyTo(Matrix.shared);
|
|
tempMatrix.scale(
|
|
fillPattern.texture.frame.width,
|
|
fillPattern.texture.frame.height
|
|
);
|
|
pattern.setTransform(tempMatrix);
|
|
return pattern;
|
|
} else if (fillStyle.fill instanceof FillGradient) {
|
|
const fillGradient = fillStyle.fill;
|
|
if (fillGradient.type === "linear") {
|
|
const gradient = context.createLinearGradient(
|
|
fillGradient.x0,
|
|
fillGradient.y0,
|
|
fillGradient.x1,
|
|
fillGradient.y1
|
|
);
|
|
fillGradient.gradientStops.forEach((stop) => {
|
|
gradient.addColorStop(stop.offset, Color.shared.setValue(stop.color).toHex());
|
|
});
|
|
return gradient;
|
|
}
|
|
}
|
|
warn("FillStyle not recognised", fillStyle);
|
|
return "red";
|
|
}
|
|
|
|
"use strict";
|
|
class CanvasTextSystem {
|
|
constructor(_renderer) {
|
|
this._activeTextures = {};
|
|
this._renderer = _renderer;
|
|
}
|
|
getTextureSize(text, resolution, style) {
|
|
const measured = CanvasTextMetrics.measureText(text || " ", style);
|
|
let width = Math.ceil(Math.ceil(Math.max(1, measured.width) + style.padding * 2) * resolution);
|
|
let height = Math.ceil(Math.ceil(Math.max(1, measured.height) + style.padding * 2) * resolution);
|
|
width = Math.ceil(width - 1e-6);
|
|
height = Math.ceil(height - 1e-6);
|
|
width = nextPow2(width);
|
|
height = nextPow2(height);
|
|
return { width, height };
|
|
}
|
|
getTexture(options, resolution, style, _textKey) {
|
|
if (typeof options === "string") {
|
|
deprecation("8.0.0", "CanvasTextSystem.getTexture: Use object TextOptions instead of separate arguments");
|
|
options = {
|
|
text: options,
|
|
style,
|
|
resolution
|
|
};
|
|
}
|
|
if (!(options.style instanceof TextStyle)) {
|
|
options.style = new TextStyle(options.style);
|
|
}
|
|
const { texture, canvasAndContext } = this.createTextureAndCanvas(
|
|
options
|
|
);
|
|
this._renderer.texture.initSource(texture._source);
|
|
CanvasPool.returnCanvasAndContext(canvasAndContext);
|
|
return texture;
|
|
}
|
|
createTextureAndCanvas(options) {
|
|
var _a;
|
|
const { text, style } = options;
|
|
const resolution = (_a = options.resolution) != null ? _a : this._renderer.resolution;
|
|
const measured = CanvasTextMetrics.measureText(text || " ", style);
|
|
const width = Math.ceil(Math.ceil(Math.max(1, measured.width) + style.padding * 2) * resolution);
|
|
const height = Math.ceil(Math.ceil(Math.max(1, measured.height) + style.padding * 2) * resolution);
|
|
const canvasAndContext = CanvasPool.getOptimalCanvasAndContext(width, height);
|
|
const { canvas } = canvasAndContext;
|
|
this.renderTextToCanvas(text, style, resolution, canvasAndContext);
|
|
const texture = getPo2TextureFromSource(canvas, width, height, resolution);
|
|
if (style.trim) {
|
|
const trimmed = getCanvasBoundingBox(canvas, resolution);
|
|
texture.frame.copyFrom(trimmed);
|
|
texture.updateUvs();
|
|
}
|
|
return { texture, canvasAndContext };
|
|
}
|
|
getManagedTexture(text) {
|
|
text._resolution = text._autoResolution ? this._renderer.resolution : text.resolution;
|
|
const textKey = text._getKey();
|
|
if (this._activeTextures[textKey]) {
|
|
this._increaseReferenceCount(textKey);
|
|
return this._activeTextures[textKey].texture;
|
|
}
|
|
const { texture, canvasAndContext } = this.createTextureAndCanvas(text);
|
|
this._activeTextures[textKey] = {
|
|
canvasAndContext,
|
|
texture,
|
|
usageCount: 1
|
|
};
|
|
return texture;
|
|
}
|
|
_increaseReferenceCount(textKey) {
|
|
this._activeTextures[textKey].usageCount++;
|
|
}
|
|
decreaseReferenceCount(textKey) {
|
|
const activeTexture = this._activeTextures[textKey];
|
|
activeTexture.usageCount--;
|
|
if (activeTexture.usageCount === 0) {
|
|
CanvasPool.returnCanvasAndContext(activeTexture.canvasAndContext);
|
|
TexturePool.returnTexture(activeTexture.texture);
|
|
const source = activeTexture.texture.source;
|
|
source.resource = null;
|
|
source.uploadMethodId = "unknown";
|
|
source.alphaMode = "no-premultiply-alpha";
|
|
this._activeTextures[textKey] = null;
|
|
}
|
|
}
|
|
getReferenceCount(textKey) {
|
|
return this._activeTextures[textKey].usageCount;
|
|
}
|
|
/**
|
|
* Renders text to its canvas, and updates its texture.
|
|
*
|
|
* By default this is used internally to ensure the texture is correct before rendering,
|
|
* but it can be used called externally, for example from this class to 'pre-generate' the texture from a piece of text,
|
|
* and then shared across multiple Sprites.
|
|
* @param text
|
|
* @param style
|
|
* @param resolution
|
|
* @param canvasAndContext
|
|
*/
|
|
renderTextToCanvas(text, style, resolution, canvasAndContext) {
|
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
const { canvas, context } = canvasAndContext;
|
|
const font = fontStringFromTextStyle(style);
|
|
const measured = CanvasTextMetrics.measureText(text || " ", style);
|
|
const lines = measured.lines;
|
|
const lineHeight = measured.lineHeight;
|
|
const lineWidths = measured.lineWidths;
|
|
const maxLineWidth = measured.maxLineWidth;
|
|
const fontProperties = measured.fontProperties;
|
|
const height = canvas.height;
|
|
context.resetTransform();
|
|
context.scale(resolution, resolution);
|
|
const padding = style.padding * 2;
|
|
context.clearRect(0, 0, measured.width + 4 + padding, measured.height + 4 + padding);
|
|
if ((_a = style._stroke) == null ? void 0 : _a.width) {
|
|
const strokeStyle = style._stroke;
|
|
context.lineWidth = strokeStyle.width;
|
|
context.miterLimit = strokeStyle.miterLimit;
|
|
context.lineJoin = strokeStyle.join;
|
|
context.lineCap = strokeStyle.cap;
|
|
}
|
|
context.font = font;
|
|
let linePositionX;
|
|
let linePositionY;
|
|
const passesCount = style.dropShadow ? 2 : 1;
|
|
for (let i = 0; i < passesCount; ++i) {
|
|
const isShadowPass = style.dropShadow && i === 0;
|
|
const dsOffsetText = isShadowPass ? Math.ceil(Math.max(1, height) + style.padding * 2) : 0;
|
|
const dsOffsetShadow = dsOffsetText * resolution;
|
|
if (isShadowPass) {
|
|
context.fillStyle = "black";
|
|
context.strokeStyle = "black";
|
|
const shadowOptions = style.dropShadow;
|
|
const dropShadowColor = shadowOptions.color;
|
|
const dropShadowAlpha = shadowOptions.alpha;
|
|
context.shadowColor = Color.shared.setValue(dropShadowColor).setAlpha(dropShadowAlpha).toRgbaString();
|
|
const dropShadowBlur = shadowOptions.blur * resolution;
|
|
const dropShadowDistance = shadowOptions.distance * resolution;
|
|
context.shadowBlur = dropShadowBlur;
|
|
context.shadowOffsetX = Math.cos(shadowOptions.angle) * dropShadowDistance;
|
|
context.shadowOffsetY = Math.sin(shadowOptions.angle) * dropShadowDistance + dsOffsetShadow;
|
|
} else {
|
|
context.globalAlpha = (_c = (_b = style._fill) == null ? void 0 : _b.alpha) != null ? _c : 1;
|
|
context.fillStyle = style._fill ? getCanvasFillStyle(style._fill, context) : null;
|
|
if ((_d = style._stroke) == null ? void 0 : _d.width) {
|
|
context.strokeStyle = getCanvasFillStyle(style._stroke, context);
|
|
}
|
|
context.shadowColor = "black";
|
|
}
|
|
let linePositionYShift = (lineHeight - fontProperties.fontSize) / 2;
|
|
if (lineHeight - fontProperties.fontSize < 0) {
|
|
linePositionYShift = 0;
|
|
}
|
|
const strokeWidth = (_f = (_e = style._stroke) == null ? void 0 : _e.width) != null ? _f : 0;
|
|
for (let i2 = 0; i2 < lines.length; i2++) {
|
|
linePositionX = strokeWidth / 2;
|
|
linePositionY = strokeWidth / 2 + i2 * lineHeight + fontProperties.ascent + linePositionYShift;
|
|
if (style.align === "right") {
|
|
linePositionX += maxLineWidth - lineWidths[i2];
|
|
} else if (style.align === "center") {
|
|
linePositionX += (maxLineWidth - lineWidths[i2]) / 2;
|
|
}
|
|
if ((_g = style._stroke) == null ? void 0 : _g.width) {
|
|
this._drawLetterSpacing(
|
|
lines[i2],
|
|
style,
|
|
canvasAndContext,
|
|
linePositionX + style.padding,
|
|
linePositionY + style.padding - dsOffsetText,
|
|
true
|
|
);
|
|
}
|
|
if (style._fill !== void 0) {
|
|
this._drawLetterSpacing(
|
|
lines[i2],
|
|
style,
|
|
canvasAndContext,
|
|
linePositionX + style.padding,
|
|
linePositionY + style.padding - dsOffsetText
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Render the text with letter-spacing.
|
|
* @param text - The text to draw
|
|
* @param style
|
|
* @param canvasAndContext
|
|
* @param x - Horizontal position to draw the text
|
|
* @param y - Vertical position to draw the text
|
|
* @param isStroke - Is this drawing for the outside stroke of the
|
|
* text? If not, it's for the inside fill
|
|
*/
|
|
_drawLetterSpacing(text, style, canvasAndContext, x, y, isStroke = false) {
|
|
const { context } = canvasAndContext;
|
|
const letterSpacing = style.letterSpacing;
|
|
let useExperimentalLetterSpacing = false;
|
|
if (CanvasTextMetrics.experimentalLetterSpacingSupported) {
|
|
if (CanvasTextMetrics.experimentalLetterSpacing) {
|
|
context.letterSpacing = `${letterSpacing}px`;
|
|
context.textLetterSpacing = `${letterSpacing}px`;
|
|
useExperimentalLetterSpacing = true;
|
|
} else {
|
|
context.letterSpacing = "0px";
|
|
context.textLetterSpacing = "0px";
|
|
}
|
|
}
|
|
if (letterSpacing === 0 || useExperimentalLetterSpacing) {
|
|
if (isStroke) {
|
|
context.strokeText(text, x, y);
|
|
} else {
|
|
context.fillText(text, x, y);
|
|
}
|
|
return;
|
|
}
|
|
let currentPosition = x;
|
|
const stringArray = CanvasTextMetrics.graphemeSegmenter(text);
|
|
let previousWidth = context.measureText(text).width;
|
|
let currentWidth = 0;
|
|
for (let i = 0; i < stringArray.length; ++i) {
|
|
const currentChar = stringArray[i];
|
|
if (isStroke) {
|
|
context.strokeText(currentChar, currentPosition, y);
|
|
} else {
|
|
context.fillText(currentChar, currentPosition, y);
|
|
}
|
|
let textStr = "";
|
|
for (let j = i + 1; j < stringArray.length; ++j) {
|
|
textStr += stringArray[j];
|
|
}
|
|
currentWidth = context.measureText(textStr).width;
|
|
currentPosition += previousWidth - currentWidth + letterSpacing;
|
|
previousWidth = currentWidth;
|
|
}
|
|
}
|
|
destroy() {
|
|
this._activeTextures = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
CanvasTextSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem,
|
|
ExtensionType.CanvasSystem
|
|
],
|
|
name: "canvasText"
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(CanvasTextSystem);
|
|
extensions.add(CanvasTextPipe);
|
|
|
|
"use strict";
|
|
var __defProp$O = Object.defineProperty;
|
|
var __getOwnPropSymbols$O = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$O = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$O = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$O = (obj, key, value) => key in obj ? __defProp$O(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$O = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$O.call(b, prop))
|
|
__defNormalProp$O(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$O)
|
|
for (var prop of __getOwnPropSymbols$O(b)) {
|
|
if (__propIsEnum$O.call(b, prop))
|
|
__defNormalProp$O(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$h = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$O.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$O)
|
|
for (var prop of __getOwnPropSymbols$O(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$O.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class Graphics extends ViewContainer {
|
|
/**
|
|
* @param options - Options for the Graphics.
|
|
*/
|
|
constructor(options) {
|
|
if (options instanceof GraphicsContext) {
|
|
options = { context: options };
|
|
}
|
|
const _a = options || {}, { context, roundPixels } = _a, rest = __objRest$h(_a, ["context", "roundPixels"]);
|
|
super(__spreadValues$O({
|
|
label: "Graphics"
|
|
}, rest));
|
|
this.renderPipeId = "graphics";
|
|
if (!context) {
|
|
this._context = this._ownedContext = new GraphicsContext();
|
|
} else {
|
|
this._context = context;
|
|
}
|
|
this._context.on("update", this.onViewUpdate, this);
|
|
this.allowChildren = false;
|
|
this.roundPixels = roundPixels != null ? roundPixels : false;
|
|
}
|
|
set context(context) {
|
|
if (context === this._context)
|
|
return;
|
|
this._context.off("update", this.onViewUpdate, this);
|
|
this._context = context;
|
|
this._context.on("update", this.onViewUpdate, this);
|
|
this.onViewUpdate();
|
|
}
|
|
get context() {
|
|
return this._context;
|
|
}
|
|
/**
|
|
* The local bounds of the graphic.
|
|
* @type {rendering.Bounds}
|
|
*/
|
|
get bounds() {
|
|
return this._context.bounds;
|
|
}
|
|
/**
|
|
* Adds the bounds of this object to the bounds object.
|
|
* @param bounds - The output bounds object.
|
|
*/
|
|
addBounds(bounds) {
|
|
bounds.addBounds(this._context.bounds);
|
|
}
|
|
/**
|
|
* Checks if the object contains the given point.
|
|
* @param point - The point to check
|
|
*/
|
|
containsPoint(point) {
|
|
return this._context.containsPoint(point);
|
|
}
|
|
onViewUpdate() {
|
|
this._didViewChangeTick++;
|
|
this._didGraphicsUpdate = true;
|
|
if (this.didViewUpdate)
|
|
return;
|
|
this.didViewUpdate = true;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.onChildViewUpdate(this);
|
|
}
|
|
}
|
|
/**
|
|
* Destroys this graphics renderable and optionally its context.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
*
|
|
* If the context was created by this graphics and `destroy(false)` or `destroy()` is called
|
|
* then the context will still be destroyed.
|
|
*
|
|
* If you want to explicitly not destroy this context that this graphics created,
|
|
* then you should pass destroy({ context: false })
|
|
*
|
|
* If the context was passed in as an argument to the constructor then it will not be destroyed
|
|
* @param {boolean} [options.texture=false] - Should destroy the texture of the graphics context
|
|
* @param {boolean} [options.textureSource=false] - Should destroy the texture source of the graphics context
|
|
* @param {boolean} [options.context=false] - Should destroy the context
|
|
*/
|
|
destroy(options) {
|
|
if (this._ownedContext && !options) {
|
|
this._ownedContext.destroy(options);
|
|
} else if (options === true || (options == null ? void 0 : options.context) === true) {
|
|
this._context.destroy(options);
|
|
}
|
|
this._ownedContext = null;
|
|
this._context = null;
|
|
super.destroy(options);
|
|
}
|
|
_callContextMethod(method, args) {
|
|
this.context[method](...args);
|
|
return this;
|
|
}
|
|
// --------------------------------------- GraphicsContext methods ---------------------------------------
|
|
/**
|
|
* Sets the current fill style of the graphics context. The fill style can be a color, gradient,
|
|
* pattern, or a more complex style defined by a FillStyle object.
|
|
* @param {FillInput} args - The fill style to apply. This can be a simple color, a gradient or
|
|
* pattern object, or a FillStyle or ConvertedFillStyle object.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
setFillStyle(...args) {
|
|
return this._callContextMethod("setFillStyle", args);
|
|
}
|
|
/**
|
|
* Sets the current stroke style of the graphics context. Similar to fill styles, stroke styles can
|
|
* encompass colors, gradients, patterns, or more detailed configurations via a StrokeStyle object.
|
|
* @param {StrokeInput} args - The stroke style to apply. Can be defined as a color, a gradient or pattern,
|
|
* or a StrokeStyle or ConvertedStrokeStyle object.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
setStrokeStyle(...args) {
|
|
return this._callContextMethod("setStrokeStyle", args);
|
|
}
|
|
fill(...args) {
|
|
return this._callContextMethod("fill", args);
|
|
}
|
|
/**
|
|
* Strokes the current path with the current stroke style. This method can take an optional
|
|
* FillStyle parameter to define the stroke's appearance, including its color, width, and other properties.
|
|
* @param {FillStyle} args - (Optional) The stroke style to apply. Can be defined as a simple color or a more
|
|
* complex style object. If omitted, uses the current stroke style.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
stroke(...args) {
|
|
return this._callContextMethod("stroke", args);
|
|
}
|
|
texture(...args) {
|
|
return this._callContextMethod("texture", args);
|
|
}
|
|
/**
|
|
* Resets the current path. Any previous path and its commands are discarded and a new path is
|
|
* started. This is typically called before beginning a new shape or series of drawing commands.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
beginPath() {
|
|
return this._callContextMethod("beginPath", []);
|
|
}
|
|
/**
|
|
* Applies a cutout to the last drawn shape. This is used to create holes or complex shapes by
|
|
* subtracting a path from the previously drawn path. If a hole is not completely in a shape, it will
|
|
* fail to cut correctly!
|
|
*/
|
|
cut() {
|
|
return this._callContextMethod("cut", []);
|
|
}
|
|
arc(...args) {
|
|
return this._callContextMethod("arc", args);
|
|
}
|
|
arcTo(...args) {
|
|
return this._callContextMethod("arcTo", args);
|
|
}
|
|
arcToSvg(...args) {
|
|
return this._callContextMethod("arcToSvg", args);
|
|
}
|
|
bezierCurveTo(...args) {
|
|
return this._callContextMethod("bezierCurveTo", args);
|
|
}
|
|
/**
|
|
* Closes the current path by drawing a straight line back to the start.
|
|
* If the shape is already closed or there are no points in the path, this method does nothing.
|
|
* @returns The instance of the current object for chaining.
|
|
*/
|
|
closePath() {
|
|
return this._callContextMethod("closePath", []);
|
|
}
|
|
ellipse(...args) {
|
|
return this._callContextMethod("ellipse", args);
|
|
}
|
|
circle(...args) {
|
|
return this._callContextMethod("circle", args);
|
|
}
|
|
path(...args) {
|
|
return this._callContextMethod("path", args);
|
|
}
|
|
lineTo(...args) {
|
|
return this._callContextMethod("lineTo", args);
|
|
}
|
|
moveTo(...args) {
|
|
return this._callContextMethod("moveTo", args);
|
|
}
|
|
quadraticCurveTo(...args) {
|
|
return this._callContextMethod("quadraticCurveTo", args);
|
|
}
|
|
rect(...args) {
|
|
return this._callContextMethod("rect", args);
|
|
}
|
|
roundRect(...args) {
|
|
return this._callContextMethod("roundRect", args);
|
|
}
|
|
poly(...args) {
|
|
return this._callContextMethod("poly", args);
|
|
}
|
|
regularPoly(...args) {
|
|
return this._callContextMethod("regularPoly", args);
|
|
}
|
|
roundPoly(...args) {
|
|
return this._callContextMethod("roundPoly", args);
|
|
}
|
|
roundShape(...args) {
|
|
return this._callContextMethod("roundShape", args);
|
|
}
|
|
filletRect(...args) {
|
|
return this._callContextMethod("filletRect", args);
|
|
}
|
|
chamferRect(...args) {
|
|
return this._callContextMethod("chamferRect", args);
|
|
}
|
|
star(...args) {
|
|
return this._callContextMethod("star", args);
|
|
}
|
|
svg(...args) {
|
|
return this._callContextMethod("svg", args);
|
|
}
|
|
restore(...args) {
|
|
return this._callContextMethod("restore", args);
|
|
}
|
|
/** Saves the current graphics state, including transformations, fill styles, and stroke styles, onto a stack. */
|
|
save() {
|
|
return this._callContextMethod("save", []);
|
|
}
|
|
/**
|
|
* Returns the current transformation matrix of the graphics context.
|
|
* @returns The current transformation matrix.
|
|
*/
|
|
getTransform() {
|
|
return this.context.getTransform();
|
|
}
|
|
/**
|
|
* Resets the current transformation matrix to the identity matrix, effectively removing
|
|
* any transformations (rotation, scaling, translation) previously applied.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
resetTransform() {
|
|
return this._callContextMethod("resetTransform", []);
|
|
}
|
|
rotateTransform(...args) {
|
|
return this._callContextMethod("rotate", args);
|
|
}
|
|
scaleTransform(...args) {
|
|
return this._callContextMethod("scale", args);
|
|
}
|
|
setTransform(...args) {
|
|
return this._callContextMethod("setTransform", args);
|
|
}
|
|
transform(...args) {
|
|
return this._callContextMethod("transform", args);
|
|
}
|
|
translateTransform(...args) {
|
|
return this._callContextMethod("translate", args);
|
|
}
|
|
/**
|
|
* Clears all drawing commands from the graphics context, effectively resetting it. This includes clearing the path,
|
|
* and optionally resetting transformations to the identity matrix.
|
|
* @returns The instance of the current GraphicsContext for method chaining.
|
|
*/
|
|
clear() {
|
|
return this._callContextMethod("clear", []);
|
|
}
|
|
/**
|
|
* The fill style to use.
|
|
* @type {ConvertedFillStyle}
|
|
*/
|
|
get fillStyle() {
|
|
return this._context.fillStyle;
|
|
}
|
|
set fillStyle(value) {
|
|
this._context.fillStyle = value;
|
|
}
|
|
/**
|
|
* The stroke style to use.
|
|
* @type {ConvertedStrokeStyle}
|
|
*/
|
|
get strokeStyle() {
|
|
return this._context.strokeStyle;
|
|
}
|
|
set strokeStyle(value) {
|
|
this._context.strokeStyle = value;
|
|
}
|
|
/**
|
|
* Creates a new Graphics object.
|
|
* Note that only the context of the object is cloned, not its transform (position,scale,etc)
|
|
* @param deep - Whether to create a deep clone of the graphics object. If false, the context
|
|
* will be shared between the two objects (default false). If true, the context will be
|
|
* cloned (recommended if you need to modify the context in any way).
|
|
* @returns - A clone of the graphics object
|
|
*/
|
|
clone(deep = false) {
|
|
if (deep) {
|
|
return new Graphics(this._context.clone());
|
|
}
|
|
this._ownedContext = null;
|
|
const clone = new Graphics(this._context);
|
|
return clone;
|
|
}
|
|
// -------- v7 deprecations ---------
|
|
/**
|
|
* @param width
|
|
* @param color
|
|
* @param alpha
|
|
* @deprecated since 8.0.0 Use {@link Graphics#setStrokeStyle} instead
|
|
*/
|
|
lineStyle(width, color, alpha) {
|
|
deprecation(v8_0_0, "Graphics#lineStyle is no longer needed. Use Graphics#setStrokeStyle to set the stroke style.");
|
|
const strokeStyle = {};
|
|
width && (strokeStyle.width = width);
|
|
color && (strokeStyle.color = color);
|
|
alpha && (strokeStyle.alpha = alpha);
|
|
this.context.strokeStyle = strokeStyle;
|
|
return this;
|
|
}
|
|
/**
|
|
* @param color
|
|
* @param alpha
|
|
* @deprecated since 8.0.0 Use {@link Graphics#fill} instead
|
|
*/
|
|
beginFill(color, alpha) {
|
|
deprecation(v8_0_0, "Graphics#beginFill is no longer needed. Use Graphics#fill to fill the shape with the desired style.");
|
|
const fillStyle = {};
|
|
color && (fillStyle.color = color);
|
|
alpha && (fillStyle.alpha = alpha);
|
|
this.context.fillStyle = fillStyle;
|
|
return this;
|
|
}
|
|
/**
|
|
* @deprecated since 8.0.0 Use {@link Graphics#fill} instead
|
|
*/
|
|
endFill() {
|
|
deprecation(v8_0_0, "Graphics#endFill is no longer needed. Use Graphics#fill to fill the shape with the desired style.");
|
|
this.context.fill();
|
|
const strokeStyle = this.context.strokeStyle;
|
|
if (strokeStyle.width !== GraphicsContext.defaultStrokeStyle.width || strokeStyle.color !== GraphicsContext.defaultStrokeStyle.color || strokeStyle.alpha !== GraphicsContext.defaultStrokeStyle.alpha) {
|
|
this.context.stroke();
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#circle} instead
|
|
*/
|
|
drawCircle(...args) {
|
|
deprecation(v8_0_0, "Graphics#drawCircle has been renamed to Graphics#circle");
|
|
return this._callContextMethod("circle", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#ellipse} instead
|
|
*/
|
|
drawEllipse(...args) {
|
|
deprecation(v8_0_0, "Graphics#drawEllipse has been renamed to Graphics#ellipse");
|
|
return this._callContextMethod("ellipse", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#poly} instead
|
|
*/
|
|
drawPolygon(...args) {
|
|
deprecation(v8_0_0, "Graphics#drawPolygon has been renamed to Graphics#poly");
|
|
return this._callContextMethod("poly", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#rect} instead
|
|
*/
|
|
drawRect(...args) {
|
|
deprecation(v8_0_0, "Graphics#drawRect has been renamed to Graphics#rect");
|
|
return this._callContextMethod("rect", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#roundRect} instead
|
|
*/
|
|
drawRoundedRect(...args) {
|
|
deprecation(v8_0_0, "Graphics#drawRoundedRect has been renamed to Graphics#roundRect");
|
|
return this._callContextMethod("roundRect", args);
|
|
}
|
|
/**
|
|
* @param {...any} args
|
|
* @deprecated since 8.0.0 Use {@link Graphics#star} instead
|
|
*/
|
|
drawStar(...args) {
|
|
deprecation(v8_0_0, "Graphics#drawStar has been renamed to Graphics#star");
|
|
return this._callContextMethod("star", args);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const localUniformMSDFBit = {
|
|
name: "local-uniform-msdf-bit",
|
|
vertex: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
struct LocalUniforms {
|
|
uColor:vec4<f32>,
|
|
uTransformMatrix:mat3x3<f32>,
|
|
uDistance: f32,
|
|
uRound:f32,
|
|
}
|
|
|
|
@group(2) @binding(0) var<uniform> localUniforms : LocalUniforms;
|
|
`
|
|
),
|
|
main: (
|
|
/* wgsl */
|
|
`
|
|
vColor *= localUniforms.uColor;
|
|
modelMatrix *= localUniforms.uTransformMatrix;
|
|
`
|
|
),
|
|
end: (
|
|
/* wgsl */
|
|
`
|
|
if(localUniforms.uRound == 1)
|
|
{
|
|
vPosition = vec4(roundPixels(vPosition.xy, globalUniforms.uResolution), vPosition.zw);
|
|
}
|
|
`
|
|
)
|
|
},
|
|
fragment: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
struct LocalUniforms {
|
|
uColor:vec4<f32>,
|
|
uTransformMatrix:mat3x3<f32>,
|
|
uDistance: f32
|
|
}
|
|
|
|
@group(2) @binding(0) var<uniform> localUniforms : LocalUniforms;
|
|
`
|
|
),
|
|
main: (
|
|
/* wgsl */
|
|
`
|
|
outColor = vec4<f32>(calculateMSDFAlpha(outColor, localUniforms.uColor, localUniforms.uDistance));
|
|
`
|
|
)
|
|
}
|
|
};
|
|
const localUniformMSDFBitGl = {
|
|
name: "local-uniform-msdf-bit",
|
|
vertex: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
uniform mat3 uTransformMatrix;
|
|
uniform vec4 uColor;
|
|
uniform float uRound;
|
|
`
|
|
),
|
|
main: (
|
|
/* glsl */
|
|
`
|
|
vColor *= uColor;
|
|
modelMatrix *= uTransformMatrix;
|
|
`
|
|
),
|
|
end: (
|
|
/* glsl */
|
|
`
|
|
if(uRound == 1.)
|
|
{
|
|
gl_Position.xy = roundPixels(gl_Position.xy, uResolution);
|
|
}
|
|
`
|
|
)
|
|
},
|
|
fragment: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
uniform float uDistance;
|
|
`
|
|
),
|
|
main: (
|
|
/* glsl */
|
|
`
|
|
outColor = vec4(calculateMSDFAlpha(outColor, vColor, uDistance));
|
|
`
|
|
)
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const mSDFBit = {
|
|
name: "msdf-bit",
|
|
fragment: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
fn calculateMSDFAlpha(msdfColor:vec4<f32>, shapeColor:vec4<f32>, distance:f32) -> f32 {
|
|
|
|
// MSDF
|
|
var median = msdfColor.r + msdfColor.g + msdfColor.b -
|
|
min(msdfColor.r, min(msdfColor.g, msdfColor.b)) -
|
|
max(msdfColor.r, max(msdfColor.g, msdfColor.b));
|
|
|
|
// SDF
|
|
median = min(median, msdfColor.a);
|
|
|
|
var screenPxDistance = distance * (median - 0.5);
|
|
var alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);
|
|
if (median < 0.01) {
|
|
alpha = 0.0;
|
|
} else if (median > 0.99) {
|
|
alpha = 1.0;
|
|
}
|
|
|
|
// Gamma correction for coverage-like alpha
|
|
var luma: f32 = dot(shapeColor.rgb, vec3<f32>(0.299, 0.587, 0.114));
|
|
var gamma: f32 = mix(1.0, 1.0 / 2.2, luma);
|
|
var coverage: f32 = pow(shapeColor.a * alpha, gamma);
|
|
|
|
return coverage;
|
|
|
|
}
|
|
`
|
|
)
|
|
}
|
|
};
|
|
const mSDFBitGl = {
|
|
name: "msdf-bit",
|
|
fragment: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
float calculateMSDFAlpha(vec4 msdfColor, vec4 shapeColor, float distance) {
|
|
|
|
// MSDF
|
|
float median = msdfColor.r + msdfColor.g + msdfColor.b -
|
|
min(msdfColor.r, min(msdfColor.g, msdfColor.b)) -
|
|
max(msdfColor.r, max(msdfColor.g, msdfColor.b));
|
|
|
|
// SDF
|
|
median = min(median, msdfColor.a);
|
|
|
|
float screenPxDistance = distance * (median - 0.5);
|
|
float alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);
|
|
|
|
if (median < 0.01) {
|
|
alpha = 0.0;
|
|
} else if (median > 0.99) {
|
|
alpha = 1.0;
|
|
}
|
|
|
|
// Gamma correction for coverage-like alpha
|
|
float luma = dot(shapeColor.rgb, vec3(0.299, 0.587, 0.114));
|
|
float gamma = mix(1.0, 1.0 / 2.2, luma);
|
|
float coverage = pow(shapeColor.a * alpha, gamma);
|
|
|
|
return coverage;
|
|
}
|
|
`
|
|
)
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
let gpuProgram$1;
|
|
let glProgram$1;
|
|
class SdfShader extends Shader {
|
|
constructor() {
|
|
const uniforms = new UniformGroup({
|
|
uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
|
|
uTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uDistance: { value: 4, type: "f32" },
|
|
uRound: { value: 0, type: "f32" }
|
|
});
|
|
const maxTextures = getMaxTexturesPerBatch();
|
|
gpuProgram$1 != null ? gpuProgram$1 : gpuProgram$1 = compileHighShaderGpuProgram({
|
|
name: "sdf-shader",
|
|
bits: [
|
|
colorBit,
|
|
generateTextureBatchBit(maxTextures),
|
|
localUniformMSDFBit,
|
|
mSDFBit,
|
|
roundPixelsBit
|
|
]
|
|
});
|
|
glProgram$1 != null ? glProgram$1 : glProgram$1 = compileHighShaderGlProgram({
|
|
name: "sdf-shader",
|
|
bits: [
|
|
colorBitGl,
|
|
generateTextureBatchBitGl(maxTextures),
|
|
localUniformMSDFBitGl,
|
|
mSDFBitGl,
|
|
roundPixelsBitGl
|
|
]
|
|
});
|
|
super({
|
|
glProgram: glProgram$1,
|
|
gpuProgram: gpuProgram$1,
|
|
resources: {
|
|
localUniforms: uniforms,
|
|
batchSamplers: getBatchSamplersUniformGroup(maxTextures)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class AbstractBitmapFont extends EventEmitter {
|
|
constructor() {
|
|
super(...arguments);
|
|
/** The map of characters by character code. */
|
|
this.chars = /* @__PURE__ */ Object.create(null);
|
|
/**
|
|
* The line-height of the font face in pixels.
|
|
* @type {number}
|
|
*/
|
|
this.lineHeight = 0;
|
|
/**
|
|
* The name of the font face
|
|
* @type {string}
|
|
*/
|
|
this.fontFamily = "";
|
|
/** The metrics of the font face. */
|
|
this.fontMetrics = { fontSize: 0, ascent: 0, descent: 0 };
|
|
/**
|
|
* The offset of the font face from the baseline.
|
|
* @type {number}
|
|
*/
|
|
this.baseLineOffset = 0;
|
|
/** The range and type of the distance field for this font. */
|
|
this.distanceField = { type: "none", range: 0 };
|
|
/** The map of base page textures (i.e., sheets of glyphs). */
|
|
this.pages = [];
|
|
/** should the fill for this font be applied as a tint to the text. */
|
|
this.applyFillAsTint = true;
|
|
/** The size of the font face in pixels. */
|
|
this.baseMeasurementFontSize = 100;
|
|
this.baseRenderedFontSize = 100;
|
|
}
|
|
/**
|
|
* The name of the font face.
|
|
* @deprecated since 8.0.0 Use `fontFamily` instead.
|
|
*/
|
|
get font() {
|
|
deprecation(v8_0_0, "BitmapFont.font is deprecated, please use BitmapFont.fontFamily instead.");
|
|
return this.fontFamily;
|
|
}
|
|
/**
|
|
* The map of base page textures (i.e., sheets of glyphs).
|
|
* @deprecated since 8.0.0 Use `pages` instead.
|
|
*/
|
|
get pageTextures() {
|
|
deprecation(v8_0_0, "BitmapFont.pageTextures is deprecated, please use BitmapFont.pages instead.");
|
|
return this.pages;
|
|
}
|
|
/**
|
|
* The size of the font face in pixels.
|
|
* @deprecated since 8.0.0 Use `fontMetrics.fontSize` instead.
|
|
*/
|
|
get size() {
|
|
deprecation(v8_0_0, "BitmapFont.size is deprecated, please use BitmapFont.fontMetrics.fontSize instead.");
|
|
return this.fontMetrics.fontSize;
|
|
}
|
|
/**
|
|
* The kind of distance field for this font or "none".
|
|
* @deprecated since 8.0.0 Use `distanceField.type` instead.
|
|
*/
|
|
get distanceFieldRange() {
|
|
deprecation(v8_0_0, "BitmapFont.distanceFieldRange is deprecated, please use BitmapFont.distanceField.range instead.");
|
|
return this.distanceField.range;
|
|
}
|
|
/**
|
|
* The range of the distance field in pixels.
|
|
* @deprecated since 8.0.0 Use `distanceField.range` instead.
|
|
*/
|
|
get distanceFieldType() {
|
|
deprecation(v8_0_0, "BitmapFont.distanceFieldType is deprecated, please use BitmapFont.distanceField.type instead.");
|
|
return this.distanceField.type;
|
|
}
|
|
destroy(destroyTextures = false) {
|
|
var _a;
|
|
this.emit("destroy", this);
|
|
this.removeAllListeners();
|
|
for (const i in this.chars) {
|
|
(_a = this.chars[i].texture) == null ? void 0 : _a.destroy();
|
|
}
|
|
this.chars = null;
|
|
if (destroyTextures) {
|
|
this.pages.forEach((page) => page.texture.destroy(true));
|
|
this.pages = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function resolveCharacters(chars) {
|
|
if (chars === "") {
|
|
return [];
|
|
}
|
|
if (typeof chars === "string") {
|
|
chars = [chars];
|
|
}
|
|
const result = [];
|
|
for (let i = 0, j = chars.length; i < j; i++) {
|
|
const item = chars[i];
|
|
if (Array.isArray(item)) {
|
|
if (item.length !== 2) {
|
|
throw new Error(`[BitmapFont]: Invalid character range length, expecting 2 got ${item.length}.`);
|
|
}
|
|
if (item[0].length === 0 || item[1].length === 0) {
|
|
throw new Error("[BitmapFont]: Invalid character delimiter.");
|
|
}
|
|
const startCode = item[0].charCodeAt(0);
|
|
const endCode = item[1].charCodeAt(0);
|
|
if (endCode < startCode) {
|
|
throw new Error("[BitmapFont]: Invalid character range.");
|
|
}
|
|
for (let i2 = startCode, j2 = endCode; i2 <= j2; i2++) {
|
|
result.push(String.fromCharCode(i2));
|
|
}
|
|
} else {
|
|
result.push(...Array.from(item));
|
|
}
|
|
}
|
|
if (result.length === 0) {
|
|
throw new Error("[BitmapFont]: Empty set when resolving characters.");
|
|
}
|
|
return result;
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$N = Object.defineProperty;
|
|
var __getOwnPropSymbols$N = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$N = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$N = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$N = (obj, key, value) => key in obj ? __defProp$N(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$N = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$N.call(b, prop))
|
|
__defNormalProp$N(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$N)
|
|
for (var prop of __getOwnPropSymbols$N(b)) {
|
|
if (__propIsEnum$N.call(b, prop))
|
|
__defNormalProp$N(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _DynamicBitmapFont = class _DynamicBitmapFont extends AbstractBitmapFont {
|
|
/**
|
|
* @param options - The options for the dynamic bitmap font.
|
|
*/
|
|
constructor(options) {
|
|
var _a, _b, _c;
|
|
super();
|
|
/**
|
|
* this is a resolution modifier for the font size..
|
|
* texture resolution will also be used to scale texture according to its font size also
|
|
*/
|
|
this.resolution = 1;
|
|
/** The pages of the font. */
|
|
this.pages = [];
|
|
this._padding = 0;
|
|
this._measureCache = /* @__PURE__ */ Object.create(null);
|
|
this._currentChars = [];
|
|
this._currentX = 0;
|
|
this._currentY = 0;
|
|
this._currentPageIndex = -1;
|
|
this._skipKerning = false;
|
|
const dynamicOptions = __spreadValues$N(__spreadValues$N({}, _DynamicBitmapFont.defaultOptions), options);
|
|
this._textureSize = dynamicOptions.textureSize;
|
|
this._mipmap = dynamicOptions.mipmap;
|
|
const style = dynamicOptions.style.clone();
|
|
if (dynamicOptions.overrideFill) {
|
|
style._fill.color = 16777215;
|
|
style._fill.alpha = 1;
|
|
style._fill.texture = Texture.WHITE;
|
|
style._fill.fill = null;
|
|
}
|
|
this.applyFillAsTint = dynamicOptions.overrideFill;
|
|
const requestedFontSize = style.fontSize;
|
|
style.fontSize = this.baseMeasurementFontSize;
|
|
const font = fontStringFromTextStyle(style);
|
|
if (dynamicOptions.overrideSize) {
|
|
if (style._stroke) {
|
|
style._stroke.width *= this.baseRenderedFontSize / requestedFontSize;
|
|
}
|
|
} else {
|
|
style.fontSize = this.baseRenderedFontSize = requestedFontSize;
|
|
}
|
|
this._style = style;
|
|
this._skipKerning = (_a = dynamicOptions.skipKerning) != null ? _a : false;
|
|
this.resolution = (_b = dynamicOptions.resolution) != null ? _b : 1;
|
|
this._padding = (_c = dynamicOptions.padding) != null ? _c : 4;
|
|
this.fontMetrics = CanvasTextMetrics.measureFont(font);
|
|
this.lineHeight = style.lineHeight || this.fontMetrics.fontSize || style.fontSize;
|
|
}
|
|
ensureCharacters(chars) {
|
|
var _a, _b, _c, _d;
|
|
const charList = resolveCharacters(chars).filter((char) => !this._currentChars.includes(char)).filter((char, index, self) => self.indexOf(char) === index);
|
|
if (!charList.length)
|
|
return;
|
|
this._currentChars = [...this._currentChars, ...charList];
|
|
let pageData;
|
|
if (this._currentPageIndex === -1) {
|
|
pageData = this._nextPage();
|
|
} else {
|
|
pageData = this.pages[this._currentPageIndex];
|
|
}
|
|
let { canvas, context } = pageData.canvasAndContext;
|
|
let textureSource = pageData.texture.source;
|
|
const style = this._style;
|
|
let currentX = this._currentX;
|
|
let currentY = this._currentY;
|
|
const fontScale = this.baseRenderedFontSize / this.baseMeasurementFontSize;
|
|
const padding = this._padding * fontScale;
|
|
const widthScale = style.fontStyle === "italic" ? 2 : 1;
|
|
let maxCharHeight = 0;
|
|
let skipTexture = false;
|
|
for (let i = 0; i < charList.length; i++) {
|
|
const char = charList[i];
|
|
const metrics = CanvasTextMetrics.measureText(char, style, canvas, false);
|
|
metrics.lineHeight = metrics.height;
|
|
const width = widthScale * metrics.width * fontScale;
|
|
const height = metrics.height * fontScale;
|
|
const paddedWidth = width + padding * 2;
|
|
const paddedHeight = height + padding * 2;
|
|
skipTexture = false;
|
|
if (char !== "\n" && char !== "\r" && char !== " " && char !== " ") {
|
|
skipTexture = true;
|
|
maxCharHeight = Math.ceil(Math.max(paddedHeight, maxCharHeight));
|
|
}
|
|
if (currentX + paddedWidth > this._textureSize) {
|
|
currentY += maxCharHeight;
|
|
maxCharHeight = paddedHeight;
|
|
currentX = 0;
|
|
if (currentY + maxCharHeight > this._textureSize) {
|
|
textureSource.update();
|
|
const pageData2 = this._nextPage();
|
|
canvas = pageData2.canvasAndContext.canvas;
|
|
context = pageData2.canvasAndContext.context;
|
|
textureSource = pageData2.texture.source;
|
|
currentY = 0;
|
|
}
|
|
}
|
|
const xAdvance = width / fontScale - ((_b = (_a = style.dropShadow) == null ? void 0 : _a.distance) != null ? _b : 0) - ((_d = (_c = style._stroke) == null ? void 0 : _c.width) != null ? _d : 0);
|
|
this.chars[char] = {
|
|
id: char.codePointAt(0),
|
|
xOffset: -this._padding,
|
|
yOffset: -this._padding,
|
|
xAdvance,
|
|
kerning: {}
|
|
};
|
|
if (skipTexture) {
|
|
this._drawGlyph(
|
|
context,
|
|
metrics,
|
|
currentX + padding,
|
|
currentY + padding,
|
|
fontScale,
|
|
style
|
|
);
|
|
const px = textureSource.width * fontScale;
|
|
const py = textureSource.height * fontScale;
|
|
const frame = new Rectangle(
|
|
currentX / px * textureSource.width,
|
|
currentY / py * textureSource.height,
|
|
paddedWidth / px * textureSource.width,
|
|
paddedHeight / py * textureSource.height
|
|
);
|
|
this.chars[char].texture = new Texture({
|
|
source: textureSource,
|
|
frame
|
|
});
|
|
currentX += Math.ceil(paddedWidth);
|
|
}
|
|
}
|
|
textureSource.update();
|
|
this._currentX = currentX;
|
|
this._currentY = currentY;
|
|
this._skipKerning && this._applyKerning(charList, context);
|
|
}
|
|
/**
|
|
* @deprecated since 8.0.0
|
|
* The map of base page textures (i.e., sheets of glyphs).
|
|
*/
|
|
get pageTextures() {
|
|
deprecation(v8_0_0, "BitmapFont.pageTextures is deprecated, please use BitmapFont.pages instead.");
|
|
return this.pages;
|
|
}
|
|
_applyKerning(newChars, context) {
|
|
const measureCache = this._measureCache;
|
|
for (let i = 0; i < newChars.length; i++) {
|
|
const first = newChars[i];
|
|
for (let j = 0; j < this._currentChars.length; j++) {
|
|
const second = this._currentChars[j];
|
|
let c1 = measureCache[first];
|
|
if (!c1)
|
|
c1 = measureCache[first] = context.measureText(first).width;
|
|
let c2 = measureCache[second];
|
|
if (!c2)
|
|
c2 = measureCache[second] = context.measureText(second).width;
|
|
let total = context.measureText(first + second).width;
|
|
let amount = total - (c1 + c2);
|
|
if (amount) {
|
|
this.chars[first].kerning[second] = amount;
|
|
}
|
|
total = context.measureText(first + second).width;
|
|
amount = total - (c1 + c2);
|
|
if (amount) {
|
|
this.chars[second].kerning[first] = amount;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
_nextPage() {
|
|
this._currentPageIndex++;
|
|
const textureResolution = this.resolution;
|
|
const canvasAndContext = CanvasPool.getOptimalCanvasAndContext(
|
|
this._textureSize,
|
|
this._textureSize,
|
|
textureResolution
|
|
);
|
|
this._setupContext(canvasAndContext.context, this._style, textureResolution);
|
|
const resolution = textureResolution * (this.baseRenderedFontSize / this.baseMeasurementFontSize);
|
|
const texture = new Texture({
|
|
source: new ImageSource({
|
|
resource: canvasAndContext.canvas,
|
|
resolution,
|
|
alphaMode: "premultiply-alpha-on-upload",
|
|
autoGenerateMipmaps: this._mipmap
|
|
})
|
|
});
|
|
const pageData = {
|
|
canvasAndContext,
|
|
texture
|
|
};
|
|
this.pages[this._currentPageIndex] = pageData;
|
|
return pageData;
|
|
}
|
|
// canvas style!
|
|
_setupContext(context, style, resolution) {
|
|
var _a;
|
|
style.fontSize = this.baseRenderedFontSize;
|
|
context.scale(resolution, resolution);
|
|
context.font = fontStringFromTextStyle(style);
|
|
style.fontSize = this.baseMeasurementFontSize;
|
|
context.textBaseline = style.textBaseline;
|
|
const stroke = style._stroke;
|
|
const strokeThickness = (_a = stroke == null ? void 0 : stroke.width) != null ? _a : 0;
|
|
if (stroke) {
|
|
context.lineWidth = strokeThickness;
|
|
context.lineJoin = stroke.join;
|
|
context.miterLimit = stroke.miterLimit;
|
|
context.strokeStyle = getCanvasFillStyle(stroke, context);
|
|
}
|
|
if (style._fill) {
|
|
context.fillStyle = getCanvasFillStyle(style._fill, context);
|
|
}
|
|
if (style.dropShadow) {
|
|
const shadowOptions = style.dropShadow;
|
|
const rgb = Color.shared.setValue(shadowOptions.color).toArray();
|
|
const dropShadowBlur = shadowOptions.blur * resolution;
|
|
const dropShadowDistance = shadowOptions.distance * resolution;
|
|
context.shadowColor = `rgba(${rgb[0] * 255},${rgb[1] * 255},${rgb[2] * 255},${shadowOptions.alpha})`;
|
|
context.shadowBlur = dropShadowBlur;
|
|
context.shadowOffsetX = Math.cos(shadowOptions.angle) * dropShadowDistance;
|
|
context.shadowOffsetY = Math.sin(shadowOptions.angle) * dropShadowDistance;
|
|
} else {
|
|
context.shadowColor = "black";
|
|
context.shadowBlur = 0;
|
|
context.shadowOffsetX = 0;
|
|
context.shadowOffsetY = 0;
|
|
}
|
|
}
|
|
_drawGlyph(context, metrics, x, y, fontScale, style) {
|
|
var _a;
|
|
const char = metrics.text;
|
|
const fontProperties = metrics.fontProperties;
|
|
const stroke = style._stroke;
|
|
const strokeThickness = ((_a = stroke == null ? void 0 : stroke.width) != null ? _a : 0) * fontScale;
|
|
const tx = x + strokeThickness / 2;
|
|
const ty = y - strokeThickness / 2;
|
|
const descent = fontProperties.descent * fontScale;
|
|
const lineHeight = metrics.lineHeight * fontScale;
|
|
if (style.stroke && strokeThickness) {
|
|
context.strokeText(char, tx, ty + lineHeight - descent);
|
|
}
|
|
if (style._fill) {
|
|
context.fillText(char, tx, ty + lineHeight - descent);
|
|
}
|
|
}
|
|
destroy() {
|
|
super.destroy();
|
|
for (let i = 0; i < this.pages.length; i++) {
|
|
const { canvasAndContext, texture } = this.pages[i];
|
|
canvasAndContext.canvas.width = canvasAndContext.canvas.width;
|
|
CanvasPool.returnCanvasAndContext(canvasAndContext);
|
|
texture.destroy(true);
|
|
}
|
|
this.pages = null;
|
|
}
|
|
};
|
|
_DynamicBitmapFont.defaultOptions = {
|
|
textureSize: 512,
|
|
style: new TextStyle(),
|
|
mipmap: true
|
|
};
|
|
let DynamicBitmapFont = _DynamicBitmapFont;
|
|
|
|
"use strict";
|
|
function getBitmapTextLayout(chars, style, font, trimEnd) {
|
|
const layoutData = {
|
|
width: 0,
|
|
height: 0,
|
|
offsetY: 0,
|
|
scale: style.fontSize / font.baseMeasurementFontSize,
|
|
lines: [{
|
|
width: 0,
|
|
charPositions: [],
|
|
spaceWidth: 0,
|
|
spacesIndex: [],
|
|
chars: []
|
|
}]
|
|
};
|
|
layoutData.offsetY = font.baseLineOffset;
|
|
let currentLine = layoutData.lines[0];
|
|
let previousChar = null;
|
|
let firstWord = true;
|
|
const currentWord = {
|
|
spaceWord: false,
|
|
width: 0,
|
|
start: 0,
|
|
index: 0,
|
|
// use index to not modify the array as we use it a lot!
|
|
positions: [],
|
|
chars: []
|
|
};
|
|
const nextWord = (word) => {
|
|
const start = currentLine.width;
|
|
for (let j = 0; j < currentWord.index; j++) {
|
|
const position = word.positions[j];
|
|
currentLine.chars.push(word.chars[j]);
|
|
currentLine.charPositions.push(position + start);
|
|
}
|
|
currentLine.width += word.width;
|
|
firstWord = false;
|
|
currentWord.width = 0;
|
|
currentWord.index = 0;
|
|
currentWord.chars.length = 0;
|
|
};
|
|
const nextLine = () => {
|
|
let index = currentLine.chars.length - 1;
|
|
if (trimEnd) {
|
|
let lastChar = currentLine.chars[index];
|
|
while (lastChar === " ") {
|
|
currentLine.width -= font.chars[lastChar].xAdvance;
|
|
lastChar = currentLine.chars[--index];
|
|
}
|
|
}
|
|
layoutData.width = Math.max(layoutData.width, currentLine.width);
|
|
currentLine = {
|
|
width: 0,
|
|
charPositions: [],
|
|
chars: [],
|
|
spaceWidth: 0,
|
|
spacesIndex: []
|
|
};
|
|
firstWord = true;
|
|
layoutData.lines.push(currentLine);
|
|
layoutData.height += font.lineHeight;
|
|
};
|
|
const scale = font.baseMeasurementFontSize / style.fontSize;
|
|
const adjustedLetterSpacing = style.letterSpacing * scale;
|
|
const adjustedWordWrapWidth = style.wordWrapWidth * scale;
|
|
for (let i = 0; i < chars.length + 1; i++) {
|
|
let char;
|
|
const isEnd = i === chars.length;
|
|
if (!isEnd) {
|
|
char = chars[i];
|
|
}
|
|
const charData = font.chars[char] || font.chars[" "];
|
|
const isSpace = /(?:\s)/.test(char);
|
|
const isWordBreak = isSpace || char === "\r" || char === "\n" || isEnd;
|
|
if (isWordBreak) {
|
|
const addWordToNextLine = !firstWord && style.wordWrap && currentLine.width + currentWord.width - adjustedLetterSpacing > adjustedWordWrapWidth;
|
|
if (addWordToNextLine) {
|
|
nextLine();
|
|
nextWord(currentWord);
|
|
if (!isEnd) {
|
|
currentLine.charPositions.push(0);
|
|
}
|
|
} else {
|
|
currentWord.start = currentLine.width;
|
|
nextWord(currentWord);
|
|
if (!isEnd) {
|
|
currentLine.charPositions.push(0);
|
|
}
|
|
}
|
|
if (char === "\r" || char === "\n") {
|
|
if (currentLine.width !== 0) {
|
|
nextLine();
|
|
}
|
|
} else if (!isEnd) {
|
|
const spaceWidth = charData.xAdvance + (charData.kerning[previousChar] || 0) + adjustedLetterSpacing;
|
|
currentLine.width += spaceWidth;
|
|
currentLine.spaceWidth = spaceWidth;
|
|
currentLine.spacesIndex.push(currentLine.charPositions.length);
|
|
currentLine.chars.push(char);
|
|
}
|
|
} else {
|
|
const kerning = charData.kerning[previousChar] || 0;
|
|
const nextCharWidth = charData.xAdvance + kerning + adjustedLetterSpacing;
|
|
currentWord.positions[currentWord.index++] = currentWord.width + kerning;
|
|
currentWord.chars.push(char);
|
|
currentWord.width += nextCharWidth;
|
|
}
|
|
previousChar = char;
|
|
}
|
|
nextLine();
|
|
if (style.align === "center") {
|
|
alignCenter(layoutData);
|
|
} else if (style.align === "right") {
|
|
alignRight(layoutData);
|
|
} else if (style.align === "justify") {
|
|
alignJustify(layoutData);
|
|
}
|
|
return layoutData;
|
|
}
|
|
function alignCenter(measurementData) {
|
|
for (let i = 0; i < measurementData.lines.length; i++) {
|
|
const line = measurementData.lines[i];
|
|
const offset = measurementData.width / 2 - line.width / 2;
|
|
for (let j = 0; j < line.charPositions.length; j++) {
|
|
line.charPositions[j] += offset;
|
|
}
|
|
}
|
|
}
|
|
function alignRight(measurementData) {
|
|
for (let i = 0; i < measurementData.lines.length; i++) {
|
|
const line = measurementData.lines[i];
|
|
const offset = measurementData.width - line.width;
|
|
for (let j = 0; j < line.charPositions.length; j++) {
|
|
line.charPositions[j] += offset;
|
|
}
|
|
}
|
|
}
|
|
function alignJustify(measurementData) {
|
|
const width = measurementData.width;
|
|
for (let i = 0; i < measurementData.lines.length; i++) {
|
|
const line = measurementData.lines[i];
|
|
let indy = 0;
|
|
let spaceIndex = line.spacesIndex[indy++];
|
|
let offset = 0;
|
|
const totalSpaces = line.spacesIndex.length;
|
|
const newSpaceWidth = (width - line.width) / totalSpaces;
|
|
const spaceWidth = newSpaceWidth;
|
|
for (let j = 0; j < line.charPositions.length; j++) {
|
|
if (j === spaceIndex) {
|
|
spaceIndex = line.spacesIndex[indy++];
|
|
offset += spaceWidth;
|
|
}
|
|
line.charPositions[j] += offset;
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$M = Object.defineProperty;
|
|
var __getOwnPropSymbols$M = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$M = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$M = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$M = (obj, key, value) => key in obj ? __defProp$M(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$M = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$M.call(b, prop))
|
|
__defNormalProp$M(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$M)
|
|
for (var prop of __getOwnPropSymbols$M(b)) {
|
|
if (__propIsEnum$M.call(b, prop))
|
|
__defNormalProp$M(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
let fontCount = 0;
|
|
class BitmapFontManagerClass {
|
|
constructor() {
|
|
/**
|
|
* This character set includes all the letters in the alphabet (both lower- and upper- case).
|
|
* @type {string[][]}
|
|
* @example
|
|
* BitmapFont.from('ExampleFont', style, { chars: BitmapFont.ALPHA })
|
|
*/
|
|
this.ALPHA = [["a", "z"], ["A", "Z"], " "];
|
|
/**
|
|
* This character set includes all decimal digits (from 0 to 9).
|
|
* @type {string[][]}
|
|
* @example
|
|
* BitmapFont.from('ExampleFont', style, { chars: BitmapFont.NUMERIC })
|
|
*/
|
|
this.NUMERIC = [["0", "9"]];
|
|
/**
|
|
* This character set is the union of `BitmapFont.ALPHA` and `BitmapFont.NUMERIC`.
|
|
* @type {string[][]}
|
|
*/
|
|
this.ALPHANUMERIC = [["a", "z"], ["A", "Z"], ["0", "9"], " "];
|
|
/**
|
|
* This character set consists of all the ASCII table.
|
|
* @member {string[][]}
|
|
* @see http://www.asciitable.com/
|
|
*/
|
|
this.ASCII = [[" ", "~"]];
|
|
/** Default options for installing a new BitmapFont. */
|
|
this.defaultOptions = {
|
|
chars: this.ALPHANUMERIC,
|
|
resolution: 1,
|
|
padding: 4,
|
|
skipKerning: false
|
|
};
|
|
}
|
|
/**
|
|
* Get a font for the specified text and style.
|
|
* @param text - The text to get the font for
|
|
* @param style - The style to use
|
|
*/
|
|
getFont(text, style) {
|
|
var _a;
|
|
let fontFamilyKey = `${style.fontFamily}-bitmap`;
|
|
let overrideFill = true;
|
|
if (style._fill.fill && !style._stroke) {
|
|
fontFamilyKey += style._fill.fill.styleKey;
|
|
overrideFill = false;
|
|
} else if (style._stroke || style.dropShadow) {
|
|
let key = style.styleKey;
|
|
key = key.substring(0, key.lastIndexOf("-"));
|
|
fontFamilyKey = `${key}-bitmap`;
|
|
overrideFill = false;
|
|
}
|
|
if (!Cache.has(fontFamilyKey)) {
|
|
const fnt = new DynamicBitmapFont(__spreadValues$M({
|
|
style,
|
|
overrideFill,
|
|
overrideSize: true
|
|
}, this.defaultOptions));
|
|
fontCount++;
|
|
if (fontCount > 50) {
|
|
warn("BitmapText", `You have dynamically created ${fontCount} bitmap fonts, this can be inefficient. Try pre installing your font styles using \`BitmapFont.install({name:"style1", style})\``);
|
|
}
|
|
fnt.once("destroy", () => {
|
|
fontCount--;
|
|
Cache.remove(fontFamilyKey);
|
|
});
|
|
Cache.set(
|
|
fontFamilyKey,
|
|
fnt
|
|
);
|
|
}
|
|
const dynamicFont = Cache.get(fontFamilyKey);
|
|
(_a = dynamicFont.ensureCharacters) == null ? void 0 : _a.call(dynamicFont, text);
|
|
return dynamicFont;
|
|
}
|
|
/**
|
|
* Get the layout of a text for the specified style.
|
|
* @param text - The text to get the layout for
|
|
* @param style - The style to use
|
|
* @param trimEnd - Whether to ignore whitespaces at the end of each line
|
|
*/
|
|
getLayout(text, style, trimEnd = true) {
|
|
const bitmapFont = this.getFont(text, style);
|
|
return getBitmapTextLayout([...text], style, bitmapFont, trimEnd);
|
|
}
|
|
/**
|
|
* Measure the text using the specified style.
|
|
* @param text - The text to measure
|
|
* @param style - The style to use
|
|
* @param trimEnd - Whether to ignore whitespaces at the end of each line
|
|
*/
|
|
measureText(text, style, trimEnd = true) {
|
|
return this.getLayout(text, style, trimEnd);
|
|
}
|
|
// eslint-disable-next-line max-len
|
|
install(...args) {
|
|
var _a, _b, _c, _d;
|
|
let options = args[0];
|
|
if (typeof options === "string") {
|
|
options = {
|
|
name: options,
|
|
style: args[1],
|
|
chars: (_a = args[2]) == null ? void 0 : _a.chars,
|
|
resolution: (_b = args[2]) == null ? void 0 : _b.resolution,
|
|
padding: (_c = args[2]) == null ? void 0 : _c.padding,
|
|
skipKerning: (_d = args[2]) == null ? void 0 : _d.skipKerning
|
|
};
|
|
deprecation(v8_0_0, "BitmapFontManager.install(name, style, options) is deprecated, use BitmapFontManager.install({name, style, ...options})");
|
|
}
|
|
const name = options == null ? void 0 : options.name;
|
|
if (!name) {
|
|
throw new Error("[BitmapFontManager] Property `name` is required.");
|
|
}
|
|
options = __spreadValues$M(__spreadValues$M({}, this.defaultOptions), options);
|
|
const textStyle = options.style;
|
|
const style = textStyle instanceof TextStyle ? textStyle : new TextStyle(textStyle);
|
|
const overrideFill = style._fill.fill !== null && style._fill.fill !== void 0;
|
|
const font = new DynamicBitmapFont({
|
|
style,
|
|
overrideFill,
|
|
skipKerning: options.skipKerning,
|
|
padding: options.padding,
|
|
resolution: options.resolution,
|
|
overrideSize: false
|
|
});
|
|
const flatChars = resolveCharacters(options.chars);
|
|
font.ensureCharacters(flatChars.join(""));
|
|
Cache.set(`${name}-bitmap`, font);
|
|
font.once("destroy", () => Cache.remove(`${name}-bitmap`));
|
|
return font;
|
|
}
|
|
/**
|
|
* Uninstalls a bitmap font from the cache.
|
|
* @param {string} name - The name of the bitmap font to uninstall.
|
|
*/
|
|
uninstall(name) {
|
|
const cacheKey = `${name}-bitmap`;
|
|
const font = Cache.get(cacheKey);
|
|
if (font) {
|
|
Cache.remove(cacheKey);
|
|
font.destroy();
|
|
}
|
|
}
|
|
}
|
|
const BitmapFontManager = new BitmapFontManagerClass();
|
|
|
|
"use strict";
|
|
class BitmapTextPipe {
|
|
constructor(renderer) {
|
|
this._gpuBitmapText = {};
|
|
this._destroyRenderableBound = this.destroyRenderable.bind(this);
|
|
this._renderer = renderer;
|
|
}
|
|
validateRenderable(bitmapText) {
|
|
const graphicsRenderable = this._getGpuBitmapText(bitmapText);
|
|
if (bitmapText._didTextUpdate) {
|
|
bitmapText._didTextUpdate = false;
|
|
this._updateContext(bitmapText, graphicsRenderable);
|
|
}
|
|
return this._renderer.renderPipes.graphics.validateRenderable(graphicsRenderable);
|
|
}
|
|
addRenderable(bitmapText, instructionSet) {
|
|
const graphicsRenderable = this._getGpuBitmapText(bitmapText);
|
|
syncWithProxy(bitmapText, graphicsRenderable);
|
|
if (bitmapText._didTextUpdate) {
|
|
bitmapText._didTextUpdate = false;
|
|
this._updateContext(bitmapText, graphicsRenderable);
|
|
}
|
|
this._renderer.renderPipes.graphics.addRenderable(graphicsRenderable, instructionSet);
|
|
if (graphicsRenderable.context.customShader) {
|
|
this._updateDistanceField(bitmapText);
|
|
}
|
|
}
|
|
destroyRenderable(bitmapText) {
|
|
bitmapText.off("destroyed", this._destroyRenderableBound);
|
|
this._destroyRenderableByUid(bitmapText.uid);
|
|
}
|
|
_destroyRenderableByUid(renderableUid) {
|
|
const context = this._gpuBitmapText[renderableUid].context;
|
|
if (context.customShader) {
|
|
BigPool.return(context.customShader);
|
|
context.customShader = null;
|
|
}
|
|
BigPool.return(this._gpuBitmapText[renderableUid]);
|
|
this._gpuBitmapText[renderableUid] = null;
|
|
}
|
|
updateRenderable(bitmapText) {
|
|
const graphicsRenderable = this._getGpuBitmapText(bitmapText);
|
|
syncWithProxy(bitmapText, graphicsRenderable);
|
|
this._renderer.renderPipes.graphics.updateRenderable(graphicsRenderable);
|
|
if (graphicsRenderable.context.customShader) {
|
|
this._updateDistanceField(bitmapText);
|
|
}
|
|
}
|
|
_updateContext(bitmapText, proxyGraphics) {
|
|
const { context } = proxyGraphics;
|
|
const bitmapFont = BitmapFontManager.getFont(bitmapText.text, bitmapText._style);
|
|
context.clear();
|
|
if (bitmapFont.distanceField.type !== "none") {
|
|
if (!context.customShader) {
|
|
context.customShader = BigPool.get(SdfShader);
|
|
}
|
|
}
|
|
const chars = Array.from(bitmapText.text);
|
|
const style = bitmapText._style;
|
|
let currentY = bitmapFont.baseLineOffset;
|
|
const bitmapTextLayout = getBitmapTextLayout(chars, style, bitmapFont, true);
|
|
let index = 0;
|
|
const padding = style.padding;
|
|
const scale = bitmapTextLayout.scale;
|
|
let tx = bitmapTextLayout.width;
|
|
let ty = bitmapTextLayout.height + bitmapTextLayout.offsetY;
|
|
if (style._stroke) {
|
|
tx += style._stroke.width / scale;
|
|
ty += style._stroke.width / scale;
|
|
}
|
|
context.translate(-bitmapText._anchor._x * tx - padding, -bitmapText._anchor._y * ty - padding).scale(scale, scale);
|
|
const tint = bitmapFont.applyFillAsTint ? style._fill.color : 16777215;
|
|
for (let i = 0; i < bitmapTextLayout.lines.length; i++) {
|
|
const line = bitmapTextLayout.lines[i];
|
|
for (let j = 0; j < line.charPositions.length; j++) {
|
|
const char = chars[index++];
|
|
const charData = bitmapFont.chars[char];
|
|
if (charData == null ? void 0 : charData.texture) {
|
|
context.texture(
|
|
charData.texture,
|
|
tint ? tint : "black",
|
|
Math.round(line.charPositions[j] + charData.xOffset),
|
|
Math.round(currentY + charData.yOffset)
|
|
);
|
|
}
|
|
}
|
|
currentY += bitmapFont.lineHeight;
|
|
}
|
|
}
|
|
_getGpuBitmapText(bitmapText) {
|
|
return this._gpuBitmapText[bitmapText.uid] || this.initGpuText(bitmapText);
|
|
}
|
|
initGpuText(bitmapText) {
|
|
const proxyRenderable = BigPool.get(Graphics);
|
|
this._gpuBitmapText[bitmapText.uid] = proxyRenderable;
|
|
this._updateContext(bitmapText, proxyRenderable);
|
|
bitmapText.on("destroyed", this._destroyRenderableBound);
|
|
return this._gpuBitmapText[bitmapText.uid];
|
|
}
|
|
_updateDistanceField(bitmapText) {
|
|
const context = this._getGpuBitmapText(bitmapText).context;
|
|
const fontFamily = bitmapText._style.fontFamily;
|
|
const dynamicFont = Cache.get(`${fontFamily}-bitmap`);
|
|
const { a, b, c, d } = bitmapText.groupTransform;
|
|
const dx = Math.sqrt(a * a + b * b);
|
|
const dy = Math.sqrt(c * c + d * d);
|
|
const worldScale = (Math.abs(dx) + Math.abs(dy)) / 2;
|
|
const fontScale = dynamicFont.baseRenderedFontSize / bitmapText._style.fontSize;
|
|
const distance = worldScale * dynamicFont.distanceField.range * (1 / fontScale);
|
|
context.customShader.resources.localUniforms.uniforms.uDistance = distance;
|
|
}
|
|
destroy() {
|
|
for (const uid in this._gpuBitmapText) {
|
|
this._destroyRenderableByUid(uid);
|
|
}
|
|
this._gpuBitmapText = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
BitmapTextPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "bitmapText"
|
|
};
|
|
function syncWithProxy(container, proxy) {
|
|
proxy.groupTransform = container.groupTransform;
|
|
proxy.groupColorAlpha = container.groupColorAlpha;
|
|
proxy.groupColor = container.groupColor;
|
|
proxy.groupBlendMode = container.groupBlendMode;
|
|
proxy.globalDisplayStatus = container.globalDisplayStatus;
|
|
proxy.groupTransform = container.groupTransform;
|
|
proxy.localDisplayStatus = container.localDisplayStatus;
|
|
proxy.groupAlpha = container.groupAlpha;
|
|
proxy._roundPixels = container._roundPixels;
|
|
}
|
|
|
|
"use strict";
|
|
extensions.add(BitmapTextPipe);
|
|
|
|
"use strict";
|
|
class HTMLTextPipe {
|
|
constructor(renderer) {
|
|
this._gpuText = /* @__PURE__ */ Object.create(null);
|
|
this._destroyRenderableBound = this.destroyRenderable.bind(this);
|
|
this._renderer = renderer;
|
|
this._renderer.runners.resolutionChange.add(this);
|
|
}
|
|
resolutionChange() {
|
|
for (const i in this._gpuText) {
|
|
const gpuText = this._gpuText[i];
|
|
if (!gpuText)
|
|
continue;
|
|
const text = gpuText.batchableSprite.renderable;
|
|
if (text._autoResolution) {
|
|
text._resolution = this._renderer.resolution;
|
|
text.onViewUpdate();
|
|
}
|
|
}
|
|
}
|
|
validateRenderable(htmlText) {
|
|
const gpuText = this._getGpuText(htmlText);
|
|
const newKey = htmlText._getKey();
|
|
if (gpuText.textureNeedsUploading) {
|
|
gpuText.textureNeedsUploading = false;
|
|
return true;
|
|
}
|
|
if (gpuText.currentKey !== newKey) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
addRenderable(htmlText, instructionSet) {
|
|
const gpuText = this._getGpuText(htmlText);
|
|
const batchableSprite = gpuText.batchableSprite;
|
|
if (htmlText._didTextUpdate) {
|
|
this._updateText(htmlText);
|
|
}
|
|
this._renderer.renderPipes.batch.addToBatch(batchableSprite, instructionSet);
|
|
}
|
|
updateRenderable(htmlText) {
|
|
const gpuText = this._getGpuText(htmlText);
|
|
const batchableSprite = gpuText.batchableSprite;
|
|
if (htmlText._didTextUpdate) {
|
|
this._updateText(htmlText);
|
|
}
|
|
batchableSprite._batcher.updateElement(batchableSprite);
|
|
}
|
|
destroyRenderable(htmlText) {
|
|
htmlText.off("destroyed", this._destroyRenderableBound);
|
|
this._destroyRenderableById(htmlText.uid);
|
|
}
|
|
_destroyRenderableById(htmlTextUid) {
|
|
const gpuText = this._gpuText[htmlTextUid];
|
|
this._renderer.htmlText.decreaseReferenceCount(gpuText.currentKey);
|
|
BigPool.return(gpuText.batchableSprite);
|
|
this._gpuText[htmlTextUid] = null;
|
|
}
|
|
_updateText(htmlText) {
|
|
const newKey = htmlText._getKey();
|
|
const gpuText = this._getGpuText(htmlText);
|
|
const batchableSprite = gpuText.batchableSprite;
|
|
if (gpuText.currentKey !== newKey) {
|
|
this._updateGpuText(htmlText).catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
htmlText._didTextUpdate = false;
|
|
const padding = htmlText._style.padding;
|
|
updateQuadBounds(batchableSprite.bounds, htmlText._anchor, batchableSprite.texture, padding);
|
|
}
|
|
async _updateGpuText(htmlText) {
|
|
var _a;
|
|
htmlText._didTextUpdate = false;
|
|
const gpuText = this._getGpuText(htmlText);
|
|
if (gpuText.generatingTexture)
|
|
return;
|
|
const newKey = htmlText._getKey();
|
|
this._renderer.htmlText.decreaseReferenceCount(gpuText.currentKey);
|
|
gpuText.generatingTexture = true;
|
|
gpuText.currentKey = newKey;
|
|
const resolution = (_a = htmlText.resolution) != null ? _a : this._renderer.resolution;
|
|
const texture = await this._renderer.htmlText.getManagedTexture(
|
|
htmlText.text,
|
|
resolution,
|
|
htmlText._style,
|
|
htmlText._getKey()
|
|
);
|
|
const batchableSprite = gpuText.batchableSprite;
|
|
batchableSprite.texture = gpuText.texture = texture;
|
|
gpuText.generatingTexture = false;
|
|
gpuText.textureNeedsUploading = true;
|
|
htmlText.onViewUpdate();
|
|
const padding = htmlText._style.padding;
|
|
updateQuadBounds(batchableSprite.bounds, htmlText._anchor, batchableSprite.texture, padding);
|
|
}
|
|
_getGpuText(htmlText) {
|
|
return this._gpuText[htmlText.uid] || this.initGpuText(htmlText);
|
|
}
|
|
initGpuText(htmlText) {
|
|
const gpuTextData = {
|
|
texture: Texture.EMPTY,
|
|
currentKey: "--",
|
|
batchableSprite: BigPool.get(BatchableSprite),
|
|
textureNeedsUploading: false,
|
|
generatingTexture: false
|
|
};
|
|
const batchableSprite = gpuTextData.batchableSprite;
|
|
batchableSprite.renderable = htmlText;
|
|
batchableSprite.transform = htmlText.groupTransform;
|
|
batchableSprite.texture = Texture.EMPTY;
|
|
batchableSprite.bounds = { minX: 0, maxX: 1, minY: 0, maxY: 0 };
|
|
batchableSprite.roundPixels = this._renderer._roundPixels | htmlText._roundPixels;
|
|
htmlText._resolution = htmlText._autoResolution ? this._renderer.resolution : htmlText.resolution;
|
|
this._gpuText[htmlText.uid] = gpuTextData;
|
|
htmlText.on("destroyed", this._destroyRenderableBound);
|
|
return gpuTextData;
|
|
}
|
|
destroy() {
|
|
for (const i in this._gpuText) {
|
|
this._destroyRenderableById(i);
|
|
}
|
|
this._gpuText = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
HTMLTextPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "htmlText"
|
|
};
|
|
|
|
"use strict";
|
|
function isSafari() {
|
|
const { userAgent } = DOMAdapter.get().getNavigator();
|
|
return /^((?!chrome|android).)*safari/i.test(userAgent);
|
|
}
|
|
|
|
"use strict";
|
|
const nssvg = "http://www.w3.org/2000/svg";
|
|
const nsxhtml = "http://www.w3.org/1999/xhtml";
|
|
class HTMLTextRenderData {
|
|
constructor() {
|
|
this.svgRoot = document.createElementNS(nssvg, "svg");
|
|
this.foreignObject = document.createElementNS(nssvg, "foreignObject");
|
|
this.domElement = document.createElementNS(nsxhtml, "div");
|
|
this.styleElement = document.createElementNS(nsxhtml, "style");
|
|
this.image = new Image();
|
|
const { foreignObject, svgRoot, styleElement, domElement } = this;
|
|
foreignObject.setAttribute("width", "10000");
|
|
foreignObject.setAttribute("height", "10000");
|
|
foreignObject.style.overflow = "hidden";
|
|
svgRoot.appendChild(foreignObject);
|
|
foreignObject.appendChild(styleElement);
|
|
foreignObject.appendChild(domElement);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function textStyleToCSS(style) {
|
|
const stroke = style._stroke;
|
|
const fill = style._fill;
|
|
const cssStyleString = [
|
|
`color: ${Color.shared.setValue(fill.color).toHex()}`,
|
|
`font-size: ${style.fontSize}px`,
|
|
`font-family: ${style.fontFamily}`,
|
|
`font-weight: ${style.fontWeight}`,
|
|
`font-style: ${style.fontStyle}`,
|
|
`font-variant: ${style.fontVariant}`,
|
|
`letter-spacing: ${style.letterSpacing}px`,
|
|
`text-align: ${style.align}`,
|
|
`padding: ${style.padding}px`,
|
|
`white-space: ${style.whiteSpace === "pre" && style.wordWrap ? "pre-wrap" : style.whiteSpace}`,
|
|
...style.lineHeight ? [`line-height: ${style.lineHeight}px`] : [],
|
|
...style.wordWrap ? [
|
|
`word-wrap: ${style.breakWords ? "break-all" : "break-word"}`,
|
|
`max-width: ${style.wordWrapWidth}px`
|
|
] : [],
|
|
...stroke ? [strokeToCSS(stroke)] : [],
|
|
...style.dropShadow ? [dropShadowToCSS(style.dropShadow)] : [],
|
|
...style.cssOverrides
|
|
].join(";");
|
|
const cssStyles = [`div { ${cssStyleString} }`];
|
|
tagStyleToCSS(style.tagStyles, cssStyles);
|
|
return cssStyles.join(" ");
|
|
}
|
|
function dropShadowToCSS(dropShadowStyle) {
|
|
const color = Color.shared.setValue(dropShadowStyle.color).setAlpha(dropShadowStyle.alpha).toHexa();
|
|
const x = Math.round(Math.cos(dropShadowStyle.angle) * dropShadowStyle.distance);
|
|
const y = Math.round(Math.sin(dropShadowStyle.angle) * dropShadowStyle.distance);
|
|
const position = `${x}px ${y}px`;
|
|
if (dropShadowStyle.blur > 0) {
|
|
return `text-shadow: ${position} ${dropShadowStyle.blur}px ${color}`;
|
|
}
|
|
return `text-shadow: ${position} ${color}`;
|
|
}
|
|
function strokeToCSS(stroke) {
|
|
return [
|
|
`-webkit-text-stroke-width: ${stroke.width}px`,
|
|
`-webkit-text-stroke-color: ${Color.shared.setValue(stroke.color).toHex()}`,
|
|
`text-stroke-width: ${stroke.width}px`,
|
|
`text-stroke-color: ${Color.shared.setValue(stroke.color).toHex()}`,
|
|
"paint-order: stroke"
|
|
].join(";");
|
|
}
|
|
const templates = {
|
|
fontSize: `font-size: {{VALUE}}px`,
|
|
fontFamily: `font-family: {{VALUE}}`,
|
|
fontWeight: `font-weight: {{VALUE}}`,
|
|
fontStyle: `font-style: {{VALUE}}`,
|
|
fontVariant: `font-variant: {{VALUE}}`,
|
|
letterSpacing: `letter-spacing: {{VALUE}}px`,
|
|
align: `text-align: {{VALUE}}`,
|
|
padding: `padding: {{VALUE}}px`,
|
|
whiteSpace: `white-space: {{VALUE}}`,
|
|
lineHeight: `line-height: {{VALUE}}px`,
|
|
wordWrapWidth: `max-width: {{VALUE}}px`
|
|
};
|
|
const transform = {
|
|
fill: (value) => `color: ${Color.shared.setValue(value).toHex()}`,
|
|
breakWords: (value) => `word-wrap: ${value ? "break-all" : "break-word"}`,
|
|
stroke: strokeToCSS,
|
|
dropShadow: dropShadowToCSS
|
|
};
|
|
function tagStyleToCSS(tagStyles, out) {
|
|
for (const i in tagStyles) {
|
|
const tagStyle = tagStyles[i];
|
|
const cssTagStyle = [];
|
|
for (const j in tagStyle) {
|
|
if (transform[j]) {
|
|
cssTagStyle.push(transform[j](tagStyle[j]));
|
|
} else if (templates[j]) {
|
|
cssTagStyle.push(templates[j].replace("{{VALUE}}", tagStyle[j]));
|
|
}
|
|
}
|
|
out.push(`${i} { ${cssTagStyle.join(";")} }`);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$L = Object.defineProperty;
|
|
var __getOwnPropSymbols$L = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$L = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$L = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$L = (obj, key, value) => key in obj ? __defProp$L(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$L = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$L.call(b, prop))
|
|
__defNormalProp$L(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$L)
|
|
for (var prop of __getOwnPropSymbols$L(b)) {
|
|
if (__propIsEnum$L.call(b, prop))
|
|
__defNormalProp$L(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
class HTMLTextStyle extends TextStyle {
|
|
constructor(options = {}) {
|
|
var _a, _b;
|
|
super(options);
|
|
this._cssOverrides = [];
|
|
(_a = this.cssOverrides) != null ? _a : this.cssOverrides = options.cssOverrides;
|
|
this.tagStyles = (_b = options.tagStyles) != null ? _b : {};
|
|
}
|
|
/** List of style overrides that will be applied to the HTML text. */
|
|
set cssOverrides(value) {
|
|
this._cssOverrides = value instanceof Array ? value : [value];
|
|
this.update();
|
|
}
|
|
get cssOverrides() {
|
|
return this._cssOverrides;
|
|
}
|
|
_generateKey() {
|
|
this._styleKey = generateTextStyleKey(this) + this._cssOverrides.join("-");
|
|
return this._styleKey;
|
|
}
|
|
update() {
|
|
this._cssStyle = null;
|
|
super.update();
|
|
}
|
|
/**
|
|
* Creates a new HTMLTextStyle object with the same values as this one.
|
|
* @returns New cloned HTMLTextStyle object
|
|
*/
|
|
clone() {
|
|
return new HTMLTextStyle({
|
|
align: this.align,
|
|
breakWords: this.breakWords,
|
|
dropShadow: this.dropShadow ? __spreadValues$L({}, this.dropShadow) : null,
|
|
fill: this._fill,
|
|
fontFamily: this.fontFamily,
|
|
fontSize: this.fontSize,
|
|
fontStyle: this.fontStyle,
|
|
fontVariant: this.fontVariant,
|
|
fontWeight: this.fontWeight,
|
|
letterSpacing: this.letterSpacing,
|
|
lineHeight: this.lineHeight,
|
|
padding: this.padding,
|
|
stroke: this._stroke,
|
|
whiteSpace: this.whiteSpace,
|
|
wordWrap: this.wordWrap,
|
|
wordWrapWidth: this.wordWrapWidth,
|
|
cssOverrides: this.cssOverrides
|
|
});
|
|
}
|
|
get cssStyle() {
|
|
if (!this._cssStyle) {
|
|
this._cssStyle = textStyleToCSS(this);
|
|
}
|
|
return this._cssStyle;
|
|
}
|
|
/**
|
|
* Add a style override, this can be any CSS property
|
|
* it will override any built-in style. This is the
|
|
* property and the value as a string (e.g., `color: red`).
|
|
* This will override any other internal style.
|
|
* @param {string} value - CSS style(s) to add.
|
|
* @example
|
|
* style.addOverride('background-color: red');
|
|
*/
|
|
addOverride(...value) {
|
|
const toAdd = value.filter((v) => !this.cssOverrides.includes(v));
|
|
if (toAdd.length > 0) {
|
|
this.cssOverrides.push(...toAdd);
|
|
this.update();
|
|
}
|
|
}
|
|
/**
|
|
* Remove any overrides that match the value.
|
|
* @param {string} value - CSS style to remove.
|
|
* @example
|
|
* style.removeOverride('background-color: red');
|
|
*/
|
|
removeOverride(...value) {
|
|
const toRemove = value.filter((v) => this.cssOverrides.includes(v));
|
|
if (toRemove.length > 0) {
|
|
this.cssOverrides = this.cssOverrides.filter((v) => !toRemove.includes(v));
|
|
this.update();
|
|
}
|
|
}
|
|
set fill(value) {
|
|
if (typeof value !== "string" && typeof value !== "number") {
|
|
warn("[HTMLTextStyle] only color fill is not supported by HTMLText");
|
|
}
|
|
super.fill = value;
|
|
}
|
|
set stroke(value) {
|
|
if (value && typeof value !== "string" && typeof value !== "number") {
|
|
warn("[HTMLTextStyle] only color stroke is not supported by HTMLText");
|
|
}
|
|
super.stroke = value;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function extractFontFamilies(text, style) {
|
|
const fontFamily = style.fontFamily;
|
|
const fontFamilies = [];
|
|
const dedupe = {};
|
|
const regex = /font-family:([^;"\s]+)/g;
|
|
const matches = text.match(regex);
|
|
function addFontFamily(fontFamily2) {
|
|
if (!dedupe[fontFamily2]) {
|
|
fontFamilies.push(fontFamily2);
|
|
dedupe[fontFamily2] = true;
|
|
}
|
|
}
|
|
if (Array.isArray(fontFamily)) {
|
|
for (let i = 0; i < fontFamily.length; i++) {
|
|
addFontFamily(fontFamily[i]);
|
|
}
|
|
} else {
|
|
addFontFamily(fontFamily);
|
|
}
|
|
if (matches) {
|
|
matches.forEach((match) => {
|
|
const fontFamily2 = match.split(":")[1].trim();
|
|
addFontFamily(fontFamily2);
|
|
});
|
|
}
|
|
for (const i in style.tagStyles) {
|
|
const fontFamily2 = style.tagStyles[i].fontFamily;
|
|
addFontFamily(fontFamily2);
|
|
}
|
|
return fontFamilies;
|
|
}
|
|
|
|
"use strict";
|
|
async function loadFontAsBase64(url) {
|
|
const response = await DOMAdapter.get().fetch(url);
|
|
const blob = await response.blob();
|
|
const reader = new FileReader();
|
|
const dataSrc = await new Promise((resolve, reject) => {
|
|
reader.onloadend = () => resolve(reader.result);
|
|
reader.onerror = reject;
|
|
reader.readAsDataURL(blob);
|
|
});
|
|
return dataSrc;
|
|
}
|
|
|
|
"use strict";
|
|
async function loadFontCSS(style, url) {
|
|
const dataSrc = await loadFontAsBase64(url);
|
|
return `@font-face {
|
|
font-family: "${style.fontFamily}";
|
|
src: url('${dataSrc}');
|
|
font-weight: ${style.fontWeight};
|
|
font-style: ${style.fontStyle};
|
|
}`;
|
|
}
|
|
|
|
"use strict";
|
|
const FontStylePromiseCache = /* @__PURE__ */ new Map();
|
|
async function getFontCss(fontFamilies, style, defaultOptions) {
|
|
const fontPromises = fontFamilies.filter((fontFamily) => Cache.has(`${fontFamily}-and-url`)).map((fontFamily, i) => {
|
|
if (!FontStylePromiseCache.has(fontFamily)) {
|
|
const { url } = Cache.get(`${fontFamily}-and-url`);
|
|
if (i === 0) {
|
|
FontStylePromiseCache.set(fontFamily, loadFontCSS({
|
|
fontWeight: style.fontWeight,
|
|
fontStyle: style.fontStyle,
|
|
fontFamily
|
|
}, url));
|
|
} else {
|
|
FontStylePromiseCache.set(fontFamily, loadFontCSS({
|
|
fontWeight: defaultOptions.fontWeight,
|
|
fontStyle: defaultOptions.fontStyle,
|
|
fontFamily
|
|
}, url));
|
|
}
|
|
}
|
|
return FontStylePromiseCache.get(fontFamily);
|
|
});
|
|
return (await Promise.all(fontPromises)).join("\n");
|
|
}
|
|
|
|
"use strict";
|
|
function getSVGUrl(text, style, resolution, fontCSS, htmlTextData) {
|
|
const { domElement, styleElement, svgRoot } = htmlTextData;
|
|
domElement.innerHTML = `<style>${style.cssStyle}</style><div style='padding:0;'>${text}</div>`;
|
|
domElement.setAttribute("style", `transform: scale(${resolution});transform-origin: top left; display: inline-block`);
|
|
styleElement.textContent = fontCSS;
|
|
const { width, height } = htmlTextData.image;
|
|
svgRoot.setAttribute("width", width.toString());
|
|
svgRoot.setAttribute("height", height.toString());
|
|
return new XMLSerializer().serializeToString(svgRoot);
|
|
}
|
|
|
|
"use strict";
|
|
function getTemporaryCanvasFromImage(image, resolution) {
|
|
const canvasAndContext = CanvasPool.getOptimalCanvasAndContext(
|
|
image.width,
|
|
image.height,
|
|
resolution
|
|
);
|
|
const { context } = canvasAndContext;
|
|
context.clearRect(0, 0, image.width, image.height);
|
|
context.drawImage(image, 0, 0);
|
|
CanvasPool.returnCanvasAndContext(canvasAndContext);
|
|
return canvasAndContext.canvas;
|
|
}
|
|
|
|
"use strict";
|
|
function loadSVGImage(image, url, delay) {
|
|
return new Promise(async (resolve) => {
|
|
if (delay) {
|
|
await new Promise((resolve2) => setTimeout(resolve2, 100));
|
|
}
|
|
image.onload = () => {
|
|
resolve();
|
|
};
|
|
image.src = `data:image/svg+xml;charset=utf8,${encodeURIComponent(url)}`;
|
|
image.crossOrigin = "anonymous";
|
|
});
|
|
}
|
|
|
|
"use strict";
|
|
let tempHTMLTextRenderData;
|
|
function measureHtmlText(text, style, fontStyleCSS, htmlTextRenderData) {
|
|
htmlTextRenderData = htmlTextRenderData || tempHTMLTextRenderData || (tempHTMLTextRenderData = new HTMLTextRenderData());
|
|
const { domElement, styleElement, svgRoot } = htmlTextRenderData;
|
|
domElement.innerHTML = `<style>${style.cssStyle};</style><div style='padding:0'>${text}</div>`;
|
|
domElement.setAttribute("style", "transform-origin: top left; display: inline-block");
|
|
if (fontStyleCSS) {
|
|
styleElement.textContent = fontStyleCSS;
|
|
}
|
|
document.body.appendChild(svgRoot);
|
|
const contentBounds = domElement.getBoundingClientRect();
|
|
svgRoot.remove();
|
|
const descenderPadding = CanvasTextMetrics.measureFont(style.fontStyle).descent;
|
|
const doublePadding = style.padding * 2;
|
|
return {
|
|
width: contentBounds.width - doublePadding,
|
|
height: contentBounds.height + descenderPadding - doublePadding
|
|
};
|
|
}
|
|
|
|
"use strict";
|
|
class HTMLTextSystem {
|
|
constructor(renderer) {
|
|
this._activeTextures = {};
|
|
this._renderer = renderer;
|
|
this._createCanvas = renderer.type === RendererType.WEBGPU;
|
|
}
|
|
getTexture(options) {
|
|
return this._buildTexturePromise(
|
|
options.text,
|
|
options.resolution,
|
|
options.style
|
|
);
|
|
}
|
|
getManagedTexture(text, resolution, style, textKey) {
|
|
if (this._activeTextures[textKey]) {
|
|
this._increaseReferenceCount(textKey);
|
|
return this._activeTextures[textKey].promise;
|
|
}
|
|
const promise = this._buildTexturePromise(text, resolution, style).then((texture) => {
|
|
this._activeTextures[textKey].texture = texture;
|
|
return texture;
|
|
});
|
|
this._activeTextures[textKey] = {
|
|
texture: null,
|
|
promise,
|
|
usageCount: 1
|
|
};
|
|
return promise;
|
|
}
|
|
async _buildTexturePromise(text, resolution, style) {
|
|
const htmlTextData = BigPool.get(HTMLTextRenderData);
|
|
const fontFamilies = extractFontFamilies(text, style);
|
|
const fontCSS = await getFontCss(
|
|
fontFamilies,
|
|
style,
|
|
HTMLTextStyle.defaultTextStyle
|
|
);
|
|
const measured = measureHtmlText(text, style, fontCSS, htmlTextData);
|
|
const width = Math.ceil(Math.ceil(Math.max(1, measured.width) + style.padding * 2) * resolution);
|
|
const height = Math.ceil(Math.ceil(Math.max(1, measured.height) + style.padding * 2) * resolution);
|
|
const image = htmlTextData.image;
|
|
const uvSafeOffset = 2;
|
|
image.width = (width | 0) + uvSafeOffset;
|
|
image.height = (height | 0) + uvSafeOffset;
|
|
const svgURL = getSVGUrl(text, style, resolution, fontCSS, htmlTextData);
|
|
await loadSVGImage(image, svgURL, isSafari() && fontFamilies.length > 0);
|
|
let resource = image;
|
|
if (this._createCanvas) {
|
|
resource = getTemporaryCanvasFromImage(image, resolution);
|
|
}
|
|
const texture = getPo2TextureFromSource(
|
|
resource,
|
|
image.width - uvSafeOffset,
|
|
image.height - uvSafeOffset,
|
|
resolution
|
|
);
|
|
if (this._createCanvas) {
|
|
this._renderer.texture.initSource(texture.source);
|
|
}
|
|
BigPool.return(htmlTextData);
|
|
return texture;
|
|
}
|
|
_increaseReferenceCount(textKey) {
|
|
this._activeTextures[textKey].usageCount++;
|
|
}
|
|
decreaseReferenceCount(textKey) {
|
|
const activeTexture = this._activeTextures[textKey];
|
|
if (!activeTexture)
|
|
return;
|
|
activeTexture.usageCount--;
|
|
if (activeTexture.usageCount === 0) {
|
|
if (activeTexture.texture) {
|
|
this._cleanUp(activeTexture);
|
|
} else {
|
|
activeTexture.promise.then((texture) => {
|
|
activeTexture.texture = texture;
|
|
this._cleanUp(activeTexture);
|
|
}).catch(() => {
|
|
warn("HTMLTextSystem: Failed to clean texture");
|
|
});
|
|
}
|
|
this._activeTextures[textKey] = null;
|
|
}
|
|
}
|
|
_cleanUp(activeTexture) {
|
|
TexturePool.returnTexture(activeTexture.texture);
|
|
activeTexture.texture.source.resource = null;
|
|
activeTexture.texture.source.uploadMethodId = "unknown";
|
|
}
|
|
getReferenceCount(textKey) {
|
|
return this._activeTextures[textKey].usageCount;
|
|
}
|
|
destroy() {
|
|
this._activeTextures = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
HTMLTextSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem,
|
|
ExtensionType.CanvasSystem
|
|
],
|
|
name: "htmlText"
|
|
};
|
|
HTMLTextSystem.defaultFontOptions = {
|
|
fontFamily: "Arial",
|
|
fontStyle: "normal",
|
|
fontWeight: "normal"
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(HTMLTextSystem);
|
|
extensions.add(HTMLTextPipe);
|
|
|
|
"use strict";
|
|
var __defProp$K = Object.defineProperty;
|
|
var __getOwnPropSymbols$K = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$K = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$K = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$K = (obj, key, value) => key in obj ? __defProp$K(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$K = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$K.call(b, prop))
|
|
__defNormalProp$K(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$K)
|
|
for (var prop of __getOwnPropSymbols$K(b)) {
|
|
if (__propIsEnum$K.call(b, prop))
|
|
__defNormalProp$K(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _MeshGeometry = class _MeshGeometry extends Geometry {
|
|
constructor(...args) {
|
|
var _a;
|
|
let options = (_a = args[0]) != null ? _a : {};
|
|
if (options instanceof Float32Array) {
|
|
deprecation(v8_0_0, "use new MeshGeometry({ positions, uvs, indices }) instead");
|
|
options = {
|
|
positions: options,
|
|
uvs: args[1],
|
|
indices: args[2]
|
|
};
|
|
}
|
|
options = __spreadValues$K(__spreadValues$K({}, _MeshGeometry.defaultOptions), options);
|
|
const positions = options.positions || new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
|
|
const uvs = options.uvs || new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
|
|
const indices = options.indices || new Uint32Array([0, 1, 2, 0, 2, 3]);
|
|
const shrinkToFit = options.shrinkBuffersToFit;
|
|
const positionBuffer = new Buffer({
|
|
data: positions,
|
|
label: "attribute-mesh-positions",
|
|
shrinkToFit,
|
|
usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
|
|
});
|
|
const uvBuffer = new Buffer({
|
|
data: uvs,
|
|
label: "attribute-mesh-uvs",
|
|
shrinkToFit,
|
|
usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
|
|
});
|
|
const indexBuffer = new Buffer({
|
|
data: indices,
|
|
label: "index-mesh-buffer",
|
|
shrinkToFit,
|
|
usage: BufferUsage.INDEX | BufferUsage.COPY_DST
|
|
});
|
|
super({
|
|
attributes: {
|
|
aPosition: {
|
|
buffer: positionBuffer,
|
|
format: "float32x2",
|
|
stride: 2 * 4,
|
|
offset: 0
|
|
},
|
|
aUV: {
|
|
buffer: uvBuffer,
|
|
format: "float32x2",
|
|
stride: 2 * 4,
|
|
offset: 0
|
|
}
|
|
},
|
|
indexBuffer,
|
|
topology: options.topology
|
|
});
|
|
this.batchMode = "auto";
|
|
}
|
|
/** The positions of the mesh. */
|
|
get positions() {
|
|
return this.attributes.aPosition.buffer.data;
|
|
}
|
|
set positions(value) {
|
|
this.attributes.aPosition.buffer.data = value;
|
|
}
|
|
/** The UVs of the mesh. */
|
|
get uvs() {
|
|
return this.attributes.aUV.buffer.data;
|
|
}
|
|
set uvs(value) {
|
|
this.attributes.aUV.buffer.data = value;
|
|
}
|
|
/** The indices of the mesh. */
|
|
get indices() {
|
|
return this.indexBuffer.data;
|
|
}
|
|
set indices(value) {
|
|
this.indexBuffer.data = value;
|
|
}
|
|
};
|
|
_MeshGeometry.defaultOptions = {
|
|
topology: "triangle-list",
|
|
shrinkBuffersToFit: false
|
|
};
|
|
let MeshGeometry = _MeshGeometry;
|
|
|
|
"use strict";
|
|
var __defProp$J = Object.defineProperty;
|
|
var __defProps$k = Object.defineProperties;
|
|
var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$J = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$J = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$J = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$J = (obj, key, value) => key in obj ? __defProp$J(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$J = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$J.call(b, prop))
|
|
__defNormalProp$J(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$J)
|
|
for (var prop of __getOwnPropSymbols$J(b)) {
|
|
if (__propIsEnum$J.call(b, prop))
|
|
__defNormalProp$J(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
|
|
const localUniformBit = {
|
|
name: "local-uniform-bit",
|
|
vertex: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
|
|
struct LocalUniforms {
|
|
uTransformMatrix:mat3x3<f32>,
|
|
uColor:vec4<f32>,
|
|
uRound:f32,
|
|
}
|
|
|
|
@group(1) @binding(0) var<uniform> localUniforms : LocalUniforms;
|
|
`
|
|
),
|
|
main: (
|
|
/* wgsl */
|
|
`
|
|
vColor *= localUniforms.uColor;
|
|
modelMatrix *= localUniforms.uTransformMatrix;
|
|
`
|
|
),
|
|
end: (
|
|
/* wgsl */
|
|
`
|
|
if(localUniforms.uRound == 1)
|
|
{
|
|
vPosition = vec4(roundPixels(vPosition.xy, globalUniforms.uResolution), vPosition.zw);
|
|
}
|
|
`
|
|
)
|
|
}
|
|
};
|
|
const localUniformBitGroup2 = __spreadProps$k(__spreadValues$J({}, localUniformBit), {
|
|
vertex: __spreadProps$k(__spreadValues$J({}, localUniformBit.vertex), {
|
|
// replace the group!
|
|
header: localUniformBit.vertex.header.replace("group(1)", "group(2)")
|
|
})
|
|
});
|
|
const localUniformBitGl = {
|
|
name: "local-uniform-bit",
|
|
vertex: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
|
|
uniform mat3 uTransformMatrix;
|
|
uniform vec4 uColor;
|
|
uniform float uRound;
|
|
`
|
|
),
|
|
main: (
|
|
/* glsl */
|
|
`
|
|
vColor *= uColor;
|
|
modelMatrix = uTransformMatrix;
|
|
`
|
|
),
|
|
end: (
|
|
/* glsl */
|
|
`
|
|
if(uRound == 1.)
|
|
{
|
|
gl_Position.xy = roundPixels(gl_Position.xy, uResolution);
|
|
}
|
|
`
|
|
)
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const tilingBit = {
|
|
name: "tiling-bit",
|
|
vertex: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
struct TilingUniforms {
|
|
uMapCoord:mat3x3<f32>,
|
|
uClampFrame:vec4<f32>,
|
|
uClampOffset:vec2<f32>,
|
|
uTextureTransform:mat3x3<f32>,
|
|
uSizeAnchor:vec4<f32>
|
|
};
|
|
|
|
@group(2) @binding(0) var<uniform> tilingUniforms: TilingUniforms;
|
|
@group(2) @binding(1) var uTexture: texture_2d<f32>;
|
|
@group(2) @binding(2) var uSampler: sampler;
|
|
`
|
|
),
|
|
main: (
|
|
/* wgsl */
|
|
`
|
|
uv = (tilingUniforms.uTextureTransform * vec3(uv, 1.0)).xy;
|
|
|
|
position = (position - tilingUniforms.uSizeAnchor.zw) * tilingUniforms.uSizeAnchor.xy;
|
|
`
|
|
)
|
|
},
|
|
fragment: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
struct TilingUniforms {
|
|
uMapCoord:mat3x3<f32>,
|
|
uClampFrame:vec4<f32>,
|
|
uClampOffset:vec2<f32>,
|
|
uTextureTransform:mat3x3<f32>,
|
|
uSizeAnchor:vec4<f32>
|
|
};
|
|
|
|
@group(2) @binding(0) var<uniform> tilingUniforms: TilingUniforms;
|
|
@group(2) @binding(1) var uTexture: texture_2d<f32>;
|
|
@group(2) @binding(2) var uSampler: sampler;
|
|
`
|
|
),
|
|
main: (
|
|
/* wgsl */
|
|
`
|
|
|
|
var coord = vUV + ceil(tilingUniforms.uClampOffset - vUV);
|
|
coord = (tilingUniforms.uMapCoord * vec3(coord, 1.0)).xy;
|
|
var unclamped = coord;
|
|
coord = clamp(coord, tilingUniforms.uClampFrame.xy, tilingUniforms.uClampFrame.zw);
|
|
|
|
var bias = 0.;
|
|
|
|
if(unclamped.x == coord.x && unclamped.y == coord.y)
|
|
{
|
|
bias = -32.;
|
|
}
|
|
|
|
outColor = textureSampleBias(uTexture, uSampler, coord, bias);
|
|
`
|
|
)
|
|
}
|
|
};
|
|
const tilingBitGl = {
|
|
name: "tiling-bit",
|
|
vertex: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
uniform mat3 uTextureTransform;
|
|
uniform vec4 uSizeAnchor;
|
|
|
|
`
|
|
),
|
|
main: (
|
|
/* glsl */
|
|
`
|
|
uv = (uTextureTransform * vec3(aUV, 1.0)).xy;
|
|
|
|
position = (position - uSizeAnchor.zw) * uSizeAnchor.xy;
|
|
`
|
|
)
|
|
},
|
|
fragment: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
uniform sampler2D uTexture;
|
|
uniform mat3 uMapCoord;
|
|
uniform vec4 uClampFrame;
|
|
uniform vec2 uClampOffset;
|
|
`
|
|
),
|
|
main: (
|
|
/* glsl */
|
|
`
|
|
|
|
vec2 coord = vUV + ceil(uClampOffset - vUV);
|
|
coord = (uMapCoord * vec3(coord, 1.0)).xy;
|
|
vec2 unclamped = coord;
|
|
coord = clamp(coord, uClampFrame.xy, uClampFrame.zw);
|
|
|
|
outColor = texture(uTexture, coord, unclamped == coord ? 0.0 : -32.0);// lod-bias very negative to force lod 0
|
|
|
|
`
|
|
)
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
let gpuProgram;
|
|
let glProgram;
|
|
class TilingSpriteShader extends Shader {
|
|
constructor() {
|
|
gpuProgram != null ? gpuProgram : gpuProgram = compileHighShaderGpuProgram({
|
|
name: "tiling-sprite-shader",
|
|
bits: [
|
|
localUniformBit,
|
|
tilingBit,
|
|
roundPixelsBit
|
|
]
|
|
});
|
|
glProgram != null ? glProgram : glProgram = compileHighShaderGlProgram({
|
|
name: "tiling-sprite-shader",
|
|
bits: [
|
|
localUniformBitGl,
|
|
tilingBitGl,
|
|
roundPixelsBitGl
|
|
]
|
|
});
|
|
const tilingUniforms = new UniformGroup({
|
|
uMapCoord: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uClampFrame: { value: new Float32Array([0, 0, 1, 1]), type: "vec4<f32>" },
|
|
uClampOffset: { value: new Float32Array([0, 0]), type: "vec2<f32>" },
|
|
uTextureTransform: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uSizeAnchor: { value: new Float32Array([100, 100, 0.5, 0.5]), type: "vec4<f32>" }
|
|
});
|
|
super({
|
|
glProgram,
|
|
gpuProgram,
|
|
resources: {
|
|
localUniforms: new UniformGroup({
|
|
uTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
|
|
uRound: { value: 0, type: "f32" }
|
|
}),
|
|
tilingUniforms,
|
|
uTexture: Texture.EMPTY.source,
|
|
uSampler: Texture.EMPTY.source.style
|
|
}
|
|
});
|
|
}
|
|
updateUniforms(width, height, matrix, anchorX, anchorY, texture) {
|
|
const tilingUniforms = this.resources.tilingUniforms;
|
|
const textureWidth = texture.width;
|
|
const textureHeight = texture.height;
|
|
const textureMatrix = texture.textureMatrix;
|
|
const uTextureTransform = tilingUniforms.uniforms.uTextureTransform;
|
|
uTextureTransform.set(
|
|
matrix.a * textureWidth / width,
|
|
matrix.b * textureWidth / height,
|
|
matrix.c * textureHeight / width,
|
|
matrix.d * textureHeight / height,
|
|
matrix.tx / width,
|
|
matrix.ty / height
|
|
);
|
|
uTextureTransform.invert();
|
|
tilingUniforms.uniforms.uMapCoord = textureMatrix.mapCoord;
|
|
tilingUniforms.uniforms.uClampFrame = textureMatrix.uClampFrame;
|
|
tilingUniforms.uniforms.uClampOffset = textureMatrix.uClampOffset;
|
|
tilingUniforms.uniforms.uTextureTransform = uTextureTransform;
|
|
tilingUniforms.uniforms.uSizeAnchor[0] = width;
|
|
tilingUniforms.uniforms.uSizeAnchor[1] = height;
|
|
tilingUniforms.uniforms.uSizeAnchor[2] = anchorX;
|
|
tilingUniforms.uniforms.uSizeAnchor[3] = anchorY;
|
|
if (texture) {
|
|
this.resources.uTexture = texture.source;
|
|
this.resources.uSampler = texture.source.style;
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class QuadGeometry extends MeshGeometry {
|
|
constructor() {
|
|
super({
|
|
positions: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
|
|
uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
|
|
indices: new Uint32Array([0, 1, 2, 0, 2, 3])
|
|
});
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function setPositions(tilingSprite, positions) {
|
|
const anchorX = tilingSprite.anchor.x;
|
|
const anchorY = tilingSprite.anchor.y;
|
|
positions[0] = -anchorX * tilingSprite.width;
|
|
positions[1] = -anchorY * tilingSprite.height;
|
|
positions[2] = (1 - anchorX) * tilingSprite.width;
|
|
positions[3] = -anchorY * tilingSprite.height;
|
|
positions[4] = (1 - anchorX) * tilingSprite.width;
|
|
positions[5] = (1 - anchorY) * tilingSprite.height;
|
|
positions[6] = -anchorX * tilingSprite.width;
|
|
positions[7] = (1 - anchorY) * tilingSprite.height;
|
|
}
|
|
|
|
"use strict";
|
|
function applyMatrix(array, stride, offset, matrix) {
|
|
let index = 0;
|
|
const size = array.length / (stride || 2);
|
|
const a = matrix.a;
|
|
const b = matrix.b;
|
|
const c = matrix.c;
|
|
const d = matrix.d;
|
|
const tx = matrix.tx;
|
|
const ty = matrix.ty;
|
|
offset *= stride;
|
|
while (index < size) {
|
|
const x = array[offset];
|
|
const y = array[offset + 1];
|
|
array[offset] = a * x + c * y + tx;
|
|
array[offset + 1] = b * x + d * y + ty;
|
|
offset += stride;
|
|
index++;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function setUvs(tilingSprite, uvs) {
|
|
const texture = tilingSprite.texture;
|
|
const width = texture.frame.width;
|
|
const height = texture.frame.height;
|
|
let anchorX = 0;
|
|
let anchorY = 0;
|
|
if (tilingSprite._applyAnchorToTexture) {
|
|
anchorX = tilingSprite.anchor.x;
|
|
anchorY = tilingSprite.anchor.y;
|
|
}
|
|
uvs[0] = uvs[6] = -anchorX;
|
|
uvs[2] = uvs[4] = 1 - anchorX;
|
|
uvs[1] = uvs[3] = -anchorY;
|
|
uvs[5] = uvs[7] = 1 - anchorY;
|
|
const textureMatrix = Matrix.shared;
|
|
textureMatrix.copyFrom(tilingSprite._tileTransform.matrix);
|
|
textureMatrix.tx /= tilingSprite.width;
|
|
textureMatrix.ty /= tilingSprite.height;
|
|
textureMatrix.invert();
|
|
textureMatrix.scale(tilingSprite.width / width, tilingSprite.height / height);
|
|
applyMatrix(uvs, 2, 0, textureMatrix);
|
|
}
|
|
|
|
"use strict";
|
|
const sharedQuad = new QuadGeometry();
|
|
class TilingSpritePipe {
|
|
constructor(renderer) {
|
|
this._state = State.default2d;
|
|
this._tilingSpriteDataHash = /* @__PURE__ */ Object.create(null);
|
|
this._destroyRenderableBound = this.destroyRenderable.bind(this);
|
|
this._renderer = renderer;
|
|
}
|
|
validateRenderable(renderable) {
|
|
const tilingSpriteData = this._getTilingSpriteData(renderable);
|
|
const couldBatch = tilingSpriteData.canBatch;
|
|
this._updateCanBatch(renderable);
|
|
const canBatch = tilingSpriteData.canBatch;
|
|
if (canBatch && canBatch === couldBatch) {
|
|
const { batchableMesh } = tilingSpriteData;
|
|
if (batchableMesh && batchableMesh.texture._source !== renderable.texture._source) {
|
|
return !batchableMesh._batcher.checkAndUpdateTexture(batchableMesh, renderable.texture);
|
|
}
|
|
}
|
|
return couldBatch !== canBatch;
|
|
}
|
|
addRenderable(tilingSprite, instructionSet) {
|
|
const batcher = this._renderer.renderPipes.batch;
|
|
this._updateCanBatch(tilingSprite);
|
|
const tilingSpriteData = this._getTilingSpriteData(tilingSprite);
|
|
const { geometry, canBatch } = tilingSpriteData;
|
|
if (canBatch) {
|
|
tilingSpriteData.batchableMesh || (tilingSpriteData.batchableMesh = new BatchableMesh());
|
|
const batchableMesh = tilingSpriteData.batchableMesh;
|
|
if (tilingSprite._didTilingSpriteUpdate) {
|
|
tilingSprite._didTilingSpriteUpdate = false;
|
|
this._updateBatchableMesh(tilingSprite);
|
|
batchableMesh.geometry = geometry;
|
|
batchableMesh.renderable = tilingSprite;
|
|
batchableMesh.transform = tilingSprite.groupTransform;
|
|
batchableMesh.texture = tilingSprite._texture;
|
|
}
|
|
batchableMesh.roundPixels = this._renderer._roundPixels | tilingSprite._roundPixels;
|
|
batcher.addToBatch(batchableMesh, instructionSet);
|
|
} else {
|
|
batcher.break(instructionSet);
|
|
tilingSpriteData.shader || (tilingSpriteData.shader = new TilingSpriteShader());
|
|
this.updateRenderable(tilingSprite);
|
|
instructionSet.add(tilingSprite);
|
|
}
|
|
}
|
|
execute(tilingSprite) {
|
|
const { shader } = this._tilingSpriteDataHash[tilingSprite.uid];
|
|
shader.groups[0] = this._renderer.globalUniforms.bindGroup;
|
|
const localUniforms = shader.resources.localUniforms.uniforms;
|
|
localUniforms.uTransformMatrix = tilingSprite.groupTransform;
|
|
localUniforms.uRound = this._renderer._roundPixels | tilingSprite._roundPixels;
|
|
color32BitToUniform(
|
|
tilingSprite.groupColorAlpha,
|
|
localUniforms.uColor,
|
|
0
|
|
);
|
|
this._state.blendMode = getAdjustedBlendModeBlend(tilingSprite.groupBlendMode, tilingSprite.texture._source);
|
|
this._renderer.encoder.draw({
|
|
geometry: sharedQuad,
|
|
shader,
|
|
state: this._state
|
|
});
|
|
}
|
|
updateRenderable(tilingSprite) {
|
|
const tilingSpriteData = this._getTilingSpriteData(tilingSprite);
|
|
const { canBatch } = tilingSpriteData;
|
|
if (canBatch) {
|
|
const { batchableMesh } = tilingSpriteData;
|
|
if (tilingSprite._didTilingSpriteUpdate)
|
|
this._updateBatchableMesh(tilingSprite);
|
|
batchableMesh._batcher.updateElement(batchableMesh);
|
|
} else if (tilingSprite._didTilingSpriteUpdate) {
|
|
const { shader } = tilingSpriteData;
|
|
shader.updateUniforms(
|
|
tilingSprite.width,
|
|
tilingSprite.height,
|
|
tilingSprite._tileTransform.matrix,
|
|
tilingSprite.anchor.x,
|
|
tilingSprite.anchor.y,
|
|
tilingSprite.texture
|
|
);
|
|
}
|
|
tilingSprite._didTilingSpriteUpdate = false;
|
|
}
|
|
destroyRenderable(tilingSprite) {
|
|
var _a;
|
|
const tilingSpriteData = this._getTilingSpriteData(tilingSprite);
|
|
tilingSpriteData.batchableMesh = null;
|
|
(_a = tilingSpriteData.shader) == null ? void 0 : _a.destroy();
|
|
this._tilingSpriteDataHash[tilingSprite.uid] = null;
|
|
tilingSprite.off("destroyed", this._destroyRenderableBound);
|
|
}
|
|
_getTilingSpriteData(renderable) {
|
|
return this._tilingSpriteDataHash[renderable.uid] || this._initTilingSpriteData(renderable);
|
|
}
|
|
_initTilingSpriteData(tilingSprite) {
|
|
const geometry = new MeshGeometry({
|
|
indices: sharedQuad.indices,
|
|
positions: sharedQuad.positions.slice(),
|
|
uvs: sharedQuad.uvs.slice()
|
|
});
|
|
this._tilingSpriteDataHash[tilingSprite.uid] = {
|
|
canBatch: true,
|
|
renderable: tilingSprite,
|
|
geometry
|
|
};
|
|
tilingSprite.on("destroyed", this._destroyRenderableBound);
|
|
return this._tilingSpriteDataHash[tilingSprite.uid];
|
|
}
|
|
_updateBatchableMesh(tilingSprite) {
|
|
const renderableData = this._getTilingSpriteData(tilingSprite);
|
|
const { geometry } = renderableData;
|
|
const style = tilingSprite.texture.source.style;
|
|
if (style.addressMode !== "repeat") {
|
|
style.addressMode = "repeat";
|
|
style.update();
|
|
}
|
|
setUvs(tilingSprite, geometry.uvs);
|
|
setPositions(tilingSprite, geometry.positions);
|
|
}
|
|
destroy() {
|
|
for (const i in this._tilingSpriteDataHash) {
|
|
this.destroyRenderable(this._tilingSpriteDataHash[i].renderable);
|
|
}
|
|
this._tilingSpriteDataHash = null;
|
|
this._renderer = null;
|
|
}
|
|
_updateCanBatch(tilingSprite) {
|
|
const renderableData = this._getTilingSpriteData(tilingSprite);
|
|
const texture = tilingSprite.texture;
|
|
let _nonPowOf2wrapping = true;
|
|
if (this._renderer.type === RendererType.WEBGL) {
|
|
_nonPowOf2wrapping = this._renderer.context.supports.nonPowOf2wrapping;
|
|
}
|
|
renderableData.canBatch = texture.textureMatrix.isSimple && (_nonPowOf2wrapping || texture.source.isPowerOfTwo);
|
|
return renderableData.canBatch;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
TilingSpritePipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "tilingSprite"
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(TilingSpritePipe);
|
|
|
|
"use strict";
|
|
var __defProp$I = Object.defineProperty;
|
|
var __getOwnPropSymbols$I = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$I = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$I = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$I = (obj, key, value) => key in obj ? __defProp$I(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$I = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$I.call(b, prop))
|
|
__defNormalProp$I(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$I)
|
|
for (var prop of __getOwnPropSymbols$I(b)) {
|
|
if (__propIsEnum$I.call(b, prop))
|
|
__defNormalProp$I(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _PlaneGeometry = class _PlaneGeometry extends MeshGeometry {
|
|
constructor(...args) {
|
|
var _a;
|
|
super({});
|
|
let options = (_a = args[0]) != null ? _a : {};
|
|
if (typeof options === "number") {
|
|
deprecation(v8_0_0, "PlaneGeometry constructor changed please use { width, height, verticesX, verticesY } instead");
|
|
options = {
|
|
width: options,
|
|
height: args[1],
|
|
verticesX: args[2],
|
|
verticesY: args[3]
|
|
};
|
|
}
|
|
this.build(options);
|
|
}
|
|
/**
|
|
* Refreshes plane coordinates
|
|
* @param options - Options to be applied to plane geometry
|
|
*/
|
|
build(options) {
|
|
var _a, _b, _c, _d;
|
|
options = __spreadValues$I(__spreadValues$I({}, _PlaneGeometry.defaultOptions), options);
|
|
this.verticesX = (_a = this.verticesX) != null ? _a : options.verticesX;
|
|
this.verticesY = (_b = this.verticesY) != null ? _b : options.verticesY;
|
|
this.width = (_c = this.width) != null ? _c : options.width;
|
|
this.height = (_d = this.height) != null ? _d : options.height;
|
|
const total = this.verticesX * this.verticesY;
|
|
const verts = [];
|
|
const uvs = [];
|
|
const indices = [];
|
|
const verticesX = this.verticesX - 1;
|
|
const verticesY = this.verticesY - 1;
|
|
const sizeX = this.width / verticesX;
|
|
const sizeY = this.height / verticesY;
|
|
for (let i = 0; i < total; i++) {
|
|
const x = i % this.verticesX;
|
|
const y = i / this.verticesX | 0;
|
|
verts.push(x * sizeX, y * sizeY);
|
|
uvs.push(x / verticesX, y / verticesY);
|
|
}
|
|
const totalSub = verticesX * verticesY;
|
|
for (let i = 0; i < totalSub; i++) {
|
|
const xpos = i % verticesX;
|
|
const ypos = i / verticesX | 0;
|
|
const value = ypos * this.verticesX + xpos;
|
|
const value2 = ypos * this.verticesX + xpos + 1;
|
|
const value3 = (ypos + 1) * this.verticesX + xpos;
|
|
const value4 = (ypos + 1) * this.verticesX + xpos + 1;
|
|
indices.push(
|
|
value,
|
|
value2,
|
|
value3,
|
|
value2,
|
|
value4,
|
|
value3
|
|
);
|
|
}
|
|
this.buffers[0].data = new Float32Array(verts);
|
|
this.buffers[1].data = new Float32Array(uvs);
|
|
this.indexBuffer.data = new Uint32Array(indices);
|
|
this.buffers[0].update();
|
|
this.buffers[1].update();
|
|
this.indexBuffer.update();
|
|
}
|
|
};
|
|
_PlaneGeometry.defaultOptions = {
|
|
width: 100,
|
|
height: 100,
|
|
verticesX: 10,
|
|
verticesY: 10
|
|
};
|
|
let PlaneGeometry = _PlaneGeometry;
|
|
|
|
"use strict";
|
|
var __defProp$H = Object.defineProperty;
|
|
var __getOwnPropSymbols$H = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$H = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$H = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$H = (obj, key, value) => key in obj ? __defProp$H(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$H = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$H.call(b, prop))
|
|
__defNormalProp$H(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$H)
|
|
for (var prop of __getOwnPropSymbols$H(b)) {
|
|
if (__propIsEnum$H.call(b, prop))
|
|
__defNormalProp$H(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _NineSliceGeometry = class _NineSliceGeometry extends PlaneGeometry {
|
|
constructor(options = {}) {
|
|
options = __spreadValues$H(__spreadValues$H({}, _NineSliceGeometry.defaultOptions), options);
|
|
super({
|
|
width: options.width,
|
|
height: options.height,
|
|
verticesX: 4,
|
|
verticesY: 4
|
|
});
|
|
this.update(options);
|
|
}
|
|
/**
|
|
* Updates the NineSliceGeometry with the options.
|
|
* @param options - The options of the NineSliceGeometry.
|
|
*/
|
|
update(options) {
|
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
this.width = (_a = options.width) != null ? _a : this.width;
|
|
this.height = (_b = options.height) != null ? _b : this.height;
|
|
this._originalWidth = (_c = options.originalWidth) != null ? _c : this._originalWidth;
|
|
this._originalHeight = (_d = options.originalHeight) != null ? _d : this._originalHeight;
|
|
this._leftWidth = (_e = options.leftWidth) != null ? _e : this._leftWidth;
|
|
this._rightWidth = (_f = options.rightWidth) != null ? _f : this._rightWidth;
|
|
this._topHeight = (_g = options.topHeight) != null ? _g : this._topHeight;
|
|
this._bottomHeight = (_h = options.bottomHeight) != null ? _h : this._bottomHeight;
|
|
this.updateUvs();
|
|
this.updatePositions();
|
|
}
|
|
/** Updates the positions of the vertices. */
|
|
updatePositions() {
|
|
const positions = this.positions;
|
|
const w = this._leftWidth + this._rightWidth;
|
|
const scaleW = this.width > w ? 1 : this.width / w;
|
|
const h = this._topHeight + this._bottomHeight;
|
|
const scaleH = this.height > h ? 1 : this.height / h;
|
|
const scale = Math.min(scaleW, scaleH);
|
|
positions[9] = positions[11] = positions[13] = positions[15] = this._topHeight * scale;
|
|
positions[17] = positions[19] = positions[21] = positions[23] = this.height - this._bottomHeight * scale;
|
|
positions[25] = positions[27] = positions[29] = positions[31] = this.height;
|
|
positions[2] = positions[10] = positions[18] = positions[26] = this._leftWidth * scale;
|
|
positions[4] = positions[12] = positions[20] = positions[28] = this.width - this._rightWidth * scale;
|
|
positions[6] = positions[14] = positions[22] = positions[30] = this.width;
|
|
this.getBuffer("aPosition").update();
|
|
}
|
|
/** Updates the UVs of the vertices. */
|
|
updateUvs() {
|
|
const uvs = this.uvs;
|
|
uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0;
|
|
uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0;
|
|
uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1;
|
|
uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1;
|
|
const _uvw = 1 / this._originalWidth;
|
|
const _uvh = 1 / this._originalHeight;
|
|
uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth;
|
|
uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight;
|
|
uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - _uvw * this._rightWidth;
|
|
uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - _uvh * this._bottomHeight;
|
|
this.getBuffer("aUV").update();
|
|
}
|
|
};
|
|
/** The default options for the NineSliceGeometry. */
|
|
_NineSliceGeometry.defaultOptions = {
|
|
/** The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
|
|
width: 100,
|
|
/** The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
|
|
height: 100,
|
|
/** The width of the left column. */
|
|
leftWidth: 10,
|
|
/** The height of the top row. */
|
|
topHeight: 10,
|
|
/** The width of the right column. */
|
|
rightWidth: 10,
|
|
/** The height of the bottom row. */
|
|
bottomHeight: 10,
|
|
/** The original width of the texture */
|
|
originalWidth: 100,
|
|
/** The original height of the texture */
|
|
originalHeight: 100
|
|
};
|
|
let NineSliceGeometry = _NineSliceGeometry;
|
|
|
|
"use strict";
|
|
class NineSliceSpritePipe {
|
|
constructor(renderer) {
|
|
this._gpuSpriteHash = /* @__PURE__ */ Object.create(null);
|
|
this._destroyRenderableBound = this.destroyRenderable.bind(this);
|
|
this._renderer = renderer;
|
|
}
|
|
addRenderable(sprite, instructionSet) {
|
|
const gpuSprite = this._getGpuSprite(sprite);
|
|
if (sprite._didSpriteUpdate)
|
|
this._updateBatchableSprite(sprite, gpuSprite);
|
|
this._renderer.renderPipes.batch.addToBatch(gpuSprite, instructionSet);
|
|
}
|
|
updateRenderable(sprite) {
|
|
const gpuSprite = this._gpuSpriteHash[sprite.uid];
|
|
if (sprite._didSpriteUpdate)
|
|
this._updateBatchableSprite(sprite, gpuSprite);
|
|
gpuSprite._batcher.updateElement(gpuSprite);
|
|
}
|
|
validateRenderable(sprite) {
|
|
const texture = sprite._texture;
|
|
const gpuSprite = this._getGpuSprite(sprite);
|
|
if (gpuSprite.texture._source !== texture._source) {
|
|
return !gpuSprite._batcher.checkAndUpdateTexture(gpuSprite, texture);
|
|
}
|
|
return false;
|
|
}
|
|
destroyRenderable(sprite) {
|
|
const batchableMesh = this._gpuSpriteHash[sprite.uid];
|
|
BigPool.return(batchableMesh.geometry);
|
|
BigPool.return(batchableMesh);
|
|
this._gpuSpriteHash[sprite.uid] = null;
|
|
sprite.off("destroyed", this._destroyRenderableBound);
|
|
}
|
|
_updateBatchableSprite(sprite, batchableSprite) {
|
|
sprite._didSpriteUpdate = false;
|
|
batchableSprite.geometry.update(sprite);
|
|
batchableSprite.texture = sprite._texture;
|
|
}
|
|
_getGpuSprite(sprite) {
|
|
return this._gpuSpriteHash[sprite.uid] || this._initGPUSprite(sprite);
|
|
}
|
|
_initGPUSprite(sprite) {
|
|
const batchableMesh = BigPool.get(BatchableMesh);
|
|
batchableMesh.geometry = BigPool.get(NineSliceGeometry);
|
|
batchableMesh.renderable = sprite;
|
|
batchableMesh.transform = sprite.groupTransform;
|
|
batchableMesh.texture = sprite._texture;
|
|
batchableMesh.roundPixels = this._renderer._roundPixels | sprite._roundPixels;
|
|
sprite._didSpriteUpdate = true;
|
|
this._gpuSpriteHash[sprite.uid] = batchableMesh;
|
|
sprite.on("destroyed", this._destroyRenderableBound);
|
|
return batchableMesh;
|
|
}
|
|
destroy() {
|
|
for (const i in this._gpuSpriteHash) {
|
|
const batchableMesh = this._gpuSpriteHash[i];
|
|
batchableMesh.geometry.destroy();
|
|
}
|
|
this._gpuSpriteHash = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
NineSliceSpritePipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "nineSliceSprite"
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(NineSliceSpritePipe);
|
|
|
|
"use strict";
|
|
class FilterPipe {
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
}
|
|
push(filterEffect, container, instructionSet) {
|
|
const renderPipes = this._renderer.renderPipes;
|
|
renderPipes.batch.break(instructionSet);
|
|
instructionSet.add({
|
|
renderPipeId: "filter",
|
|
canBundle: false,
|
|
action: "pushFilter",
|
|
container,
|
|
filterEffect
|
|
});
|
|
}
|
|
pop(_filterEffect, _container, instructionSet) {
|
|
this._renderer.renderPipes.batch.break(instructionSet);
|
|
instructionSet.add({
|
|
renderPipeId: "filter",
|
|
action: "popFilter",
|
|
canBundle: false
|
|
});
|
|
}
|
|
execute(instruction) {
|
|
if (instruction.action === "pushFilter") {
|
|
this._renderer.filter.push(instruction);
|
|
} else if (instruction.action === "popFilter") {
|
|
this._renderer.filter.pop();
|
|
}
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
FilterPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "filter"
|
|
};
|
|
|
|
"use strict";
|
|
const tempMatrix$2 = new Matrix();
|
|
function getFastGlobalBounds(target, bounds) {
|
|
bounds.clear();
|
|
_getGlobalBoundsRecursive(target, bounds);
|
|
if (!bounds.isValid) {
|
|
bounds.set(0, 0, 0, 0);
|
|
}
|
|
if (!target.renderGroup) {
|
|
bounds.applyMatrix(target.parentRenderGroup.worldTransform);
|
|
} else {
|
|
bounds.applyMatrix(target.renderGroup.localTransform);
|
|
}
|
|
return bounds;
|
|
}
|
|
function _getGlobalBoundsRecursive(target, bounds) {
|
|
if (target.localDisplayStatus !== 7 || !target.measurable) {
|
|
return;
|
|
}
|
|
const manageEffects = !!target.effects.length;
|
|
let localBounds = bounds;
|
|
if (target.renderGroup || manageEffects) {
|
|
localBounds = boundsPool.get().clear();
|
|
}
|
|
if (target.boundsArea) {
|
|
bounds.addRect(target.boundsArea, target.worldTransform);
|
|
} else {
|
|
if (target.renderPipeId) {
|
|
const viewBounds = target.bounds;
|
|
localBounds.addFrame(
|
|
viewBounds.minX,
|
|
viewBounds.minY,
|
|
viewBounds.maxX,
|
|
viewBounds.maxY,
|
|
target.groupTransform
|
|
);
|
|
}
|
|
const children = target.children;
|
|
for (let i = 0; i < children.length; i++) {
|
|
_getGlobalBoundsRecursive(children[i], localBounds);
|
|
}
|
|
}
|
|
if (manageEffects) {
|
|
let advanced = false;
|
|
for (let i = 0; i < target.effects.length; i++) {
|
|
if (target.effects[i].addBounds) {
|
|
if (!advanced) {
|
|
advanced = true;
|
|
localBounds.applyMatrix(target.parentRenderGroup.worldTransform);
|
|
}
|
|
target.effects[i].addBounds(localBounds, true);
|
|
}
|
|
}
|
|
if (advanced) {
|
|
localBounds.applyMatrix(target.parentRenderGroup.worldTransform.copyTo(tempMatrix$2).invert());
|
|
bounds.addBounds(localBounds, target.relativeGroupTransform);
|
|
}
|
|
bounds.addBounds(localBounds);
|
|
boundsPool.return(localBounds);
|
|
} else if (target.renderGroup) {
|
|
bounds.addBounds(localBounds, target.relativeGroupTransform);
|
|
boundsPool.return(localBounds);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function getGlobalRenderableBounds(renderables, bounds) {
|
|
bounds.clear();
|
|
const tempMatrix = bounds.matrix;
|
|
for (let i = 0; i < renderables.length; i++) {
|
|
const renderable = renderables[i];
|
|
if (renderable.globalDisplayStatus < 7) {
|
|
continue;
|
|
}
|
|
bounds.matrix = renderable.worldTransform;
|
|
renderable.addBounds(bounds);
|
|
}
|
|
bounds.matrix = tempMatrix;
|
|
return bounds;
|
|
}
|
|
|
|
"use strict";
|
|
const quadGeometry = new Geometry({
|
|
attributes: {
|
|
aPosition: {
|
|
buffer: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
|
|
format: "float32x2",
|
|
stride: 2 * 4,
|
|
offset: 0
|
|
}
|
|
},
|
|
indexBuffer: new Uint32Array([0, 1, 2, 0, 2, 3])
|
|
});
|
|
class FilterSystem {
|
|
constructor(renderer) {
|
|
this._filterStackIndex = 0;
|
|
this._filterStack = [];
|
|
this._filterGlobalUniforms = new UniformGroup({
|
|
uInputSize: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
uInputPixel: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
uInputClamp: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
uOutputFrame: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
uGlobalFrame: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
uOutputTexture: { value: new Float32Array(4), type: "vec4<f32>" }
|
|
});
|
|
this._globalFilterBindGroup = new BindGroup({});
|
|
this.renderer = renderer;
|
|
}
|
|
/**
|
|
* The back texture of the currently active filter. Requires the filter to have `blendRequired` set to true.
|
|
* @readonly
|
|
*/
|
|
get activeBackTexture() {
|
|
var _a;
|
|
return (_a = this._activeFilterData) == null ? void 0 : _a.backTexture;
|
|
}
|
|
push(instruction) {
|
|
var _a, _b;
|
|
const renderer = this.renderer;
|
|
const filters = instruction.filterEffect.filters;
|
|
if (!this._filterStack[this._filterStackIndex]) {
|
|
this._filterStack[this._filterStackIndex] = this._getFilterData();
|
|
}
|
|
const filterData = this._filterStack[this._filterStackIndex];
|
|
this._filterStackIndex++;
|
|
if (filters.length === 0) {
|
|
filterData.skip = true;
|
|
return;
|
|
}
|
|
const bounds = filterData.bounds;
|
|
if (instruction.renderables) {
|
|
getGlobalRenderableBounds(instruction.renderables, bounds);
|
|
} else if (instruction.filterEffect.filterArea) {
|
|
bounds.clear();
|
|
bounds.addRect(instruction.filterEffect.filterArea);
|
|
bounds.applyMatrix(instruction.container.worldTransform);
|
|
} else {
|
|
getFastGlobalBounds(instruction.container, bounds);
|
|
}
|
|
const colorTextureSource = renderer.renderTarget.renderTarget.colorTexture.source;
|
|
let resolution = Infinity;
|
|
let padding = 0;
|
|
let antialias = true;
|
|
let blendRequired = false;
|
|
let enabled = false;
|
|
for (let i = 0; i < filters.length; i++) {
|
|
const filter = filters[i];
|
|
resolution = Math.min(resolution, filter.resolution === "inherit" ? colorTextureSource._resolution : filter.resolution);
|
|
padding += filter.padding;
|
|
if (filter.antialias === "off") {
|
|
antialias = false;
|
|
} else if (filter.antialias === "inherit") {
|
|
antialias && (antialias = colorTextureSource.antialias);
|
|
}
|
|
const isCompatible = !!(filter.compatibleRenderers & renderer.type);
|
|
if (!isCompatible) {
|
|
enabled = false;
|
|
break;
|
|
}
|
|
if (filter.blendRequired && !((_b = (_a = renderer.backBuffer) == null ? void 0 : _a.useBackBuffer) != null ? _b : true)) {
|
|
warn("Blend filter requires backBuffer on WebGL renderer to be enabled. Set `useBackBuffer: true` in the renderer options.");
|
|
enabled = false;
|
|
break;
|
|
}
|
|
enabled = filter.enabled || enabled;
|
|
blendRequired = blendRequired || filter.blendRequired;
|
|
}
|
|
if (!enabled) {
|
|
filterData.skip = true;
|
|
return;
|
|
}
|
|
const viewPort = renderer.renderTarget.rootViewPort;
|
|
bounds.scale(resolution).fitBounds(0, viewPort.width, 0, viewPort.height).ceil().scale(1 / resolution).pad(padding | 0);
|
|
if (!bounds.isPositive) {
|
|
filterData.skip = true;
|
|
return;
|
|
}
|
|
filterData.skip = false;
|
|
filterData.bounds = bounds;
|
|
filterData.blendRequired = blendRequired;
|
|
filterData.container = instruction.container;
|
|
filterData.filterEffect = instruction.filterEffect;
|
|
filterData.previousRenderSurface = renderer.renderTarget.renderSurface;
|
|
filterData.inputTexture = TexturePool.getOptimalTexture(
|
|
bounds.width,
|
|
bounds.height,
|
|
resolution,
|
|
antialias
|
|
);
|
|
renderer.renderTarget.bind(filterData.inputTexture, true);
|
|
renderer.globalUniforms.push({
|
|
offset: bounds
|
|
});
|
|
}
|
|
pop() {
|
|
const renderer = this.renderer;
|
|
this._filterStackIndex--;
|
|
const filterData = this._filterStack[this._filterStackIndex];
|
|
if (filterData.skip) {
|
|
return;
|
|
}
|
|
this._activeFilterData = filterData;
|
|
const inputTexture = filterData.inputTexture;
|
|
const bounds = filterData.bounds;
|
|
let backTexture = Texture.EMPTY;
|
|
renderer.renderTarget.finishRenderPass();
|
|
if (filterData.blendRequired) {
|
|
const previousBounds = this._filterStackIndex > 0 ? this._filterStack[this._filterStackIndex - 1].bounds : null;
|
|
const renderTarget = renderer.renderTarget.getRenderTarget(filterData.previousRenderSurface);
|
|
backTexture = this.getBackTexture(renderTarget, bounds, previousBounds);
|
|
}
|
|
filterData.backTexture = backTexture;
|
|
const filters = filterData.filterEffect.filters;
|
|
this._globalFilterBindGroup.setResource(inputTexture.source.style, 2);
|
|
this._globalFilterBindGroup.setResource(backTexture.source, 3);
|
|
renderer.globalUniforms.pop();
|
|
if (filters.length === 1) {
|
|
filters[0].apply(this, inputTexture, filterData.previousRenderSurface, false);
|
|
TexturePool.returnTexture(inputTexture);
|
|
} else {
|
|
let flip = filterData.inputTexture;
|
|
let flop = TexturePool.getOptimalTexture(
|
|
bounds.width,
|
|
bounds.height,
|
|
flip.source._resolution,
|
|
false
|
|
);
|
|
let i = 0;
|
|
for (i = 0; i < filters.length - 1; ++i) {
|
|
const filter = filters[i];
|
|
filter.apply(this, flip, flop, true);
|
|
const t = flip;
|
|
flip = flop;
|
|
flop = t;
|
|
}
|
|
filters[i].apply(this, flip, filterData.previousRenderSurface, false);
|
|
TexturePool.returnTexture(flip);
|
|
TexturePool.returnTexture(flop);
|
|
}
|
|
if (filterData.blendRequired) {
|
|
TexturePool.returnTexture(backTexture);
|
|
}
|
|
}
|
|
getBackTexture(lastRenderSurface, bounds, previousBounds) {
|
|
const backgroundResolution = lastRenderSurface.colorTexture.source._resolution;
|
|
const backTexture = TexturePool.getOptimalTexture(
|
|
bounds.width,
|
|
bounds.height,
|
|
backgroundResolution,
|
|
false
|
|
);
|
|
let x = bounds.minX;
|
|
let y = bounds.minY;
|
|
if (previousBounds) {
|
|
x -= previousBounds.minX;
|
|
y -= previousBounds.minY;
|
|
}
|
|
x = Math.floor(x * backgroundResolution);
|
|
y = Math.floor(y * backgroundResolution);
|
|
const width = Math.ceil(bounds.width * backgroundResolution);
|
|
const height = Math.ceil(bounds.height * backgroundResolution);
|
|
this.renderer.renderTarget.copyToTexture(
|
|
lastRenderSurface,
|
|
backTexture,
|
|
{ x, y },
|
|
{ width, height },
|
|
{ x: 0, y: 0 }
|
|
);
|
|
return backTexture;
|
|
}
|
|
applyFilter(filter, input, output, clear) {
|
|
const renderer = this.renderer;
|
|
const filterData = this._filterStack[this._filterStackIndex];
|
|
const bounds = filterData.bounds;
|
|
const offset = Point.shared;
|
|
const previousRenderSurface = filterData.previousRenderSurface;
|
|
const isFinalTarget = previousRenderSurface === output;
|
|
let resolution = this.renderer.renderTarget.rootRenderTarget.colorTexture.source._resolution;
|
|
let currentIndex = this._filterStackIndex - 1;
|
|
while (currentIndex > 0 && this._filterStack[currentIndex].skip) {
|
|
--currentIndex;
|
|
}
|
|
if (currentIndex > 0) {
|
|
resolution = this._filterStack[currentIndex].inputTexture.source._resolution;
|
|
}
|
|
const filterUniforms = this._filterGlobalUniforms;
|
|
const uniforms = filterUniforms.uniforms;
|
|
const outputFrame = uniforms.uOutputFrame;
|
|
const inputSize = uniforms.uInputSize;
|
|
const inputPixel = uniforms.uInputPixel;
|
|
const inputClamp = uniforms.uInputClamp;
|
|
const globalFrame = uniforms.uGlobalFrame;
|
|
const outputTexture = uniforms.uOutputTexture;
|
|
if (isFinalTarget) {
|
|
let lastIndex = this._filterStackIndex;
|
|
while (lastIndex > 0) {
|
|
lastIndex--;
|
|
const filterData2 = this._filterStack[this._filterStackIndex - 1];
|
|
if (!filterData2.skip) {
|
|
offset.x = filterData2.bounds.minX;
|
|
offset.y = filterData2.bounds.minY;
|
|
break;
|
|
}
|
|
}
|
|
outputFrame[0] = bounds.minX - offset.x;
|
|
outputFrame[1] = bounds.minY - offset.y;
|
|
} else {
|
|
outputFrame[0] = 0;
|
|
outputFrame[1] = 0;
|
|
}
|
|
outputFrame[2] = input.frame.width;
|
|
outputFrame[3] = input.frame.height;
|
|
inputSize[0] = input.source.width;
|
|
inputSize[1] = input.source.height;
|
|
inputSize[2] = 1 / inputSize[0];
|
|
inputSize[3] = 1 / inputSize[1];
|
|
inputPixel[0] = input.source.pixelWidth;
|
|
inputPixel[1] = input.source.pixelHeight;
|
|
inputPixel[2] = 1 / inputPixel[0];
|
|
inputPixel[3] = 1 / inputPixel[1];
|
|
inputClamp[0] = 0.5 * inputPixel[2];
|
|
inputClamp[1] = 0.5 * inputPixel[3];
|
|
inputClamp[2] = input.frame.width * inputSize[2] - 0.5 * inputPixel[2];
|
|
inputClamp[3] = input.frame.height * inputSize[3] - 0.5 * inputPixel[3];
|
|
const rootTexture = this.renderer.renderTarget.rootRenderTarget.colorTexture;
|
|
globalFrame[0] = offset.x * resolution;
|
|
globalFrame[1] = offset.y * resolution;
|
|
globalFrame[2] = rootTexture.source.width * resolution;
|
|
globalFrame[3] = rootTexture.source.height * resolution;
|
|
const renderTarget = this.renderer.renderTarget.getRenderTarget(output);
|
|
renderer.renderTarget.bind(output, !!clear);
|
|
if (output instanceof Texture) {
|
|
outputTexture[0] = output.frame.width;
|
|
outputTexture[1] = output.frame.height;
|
|
} else {
|
|
outputTexture[0] = renderTarget.width;
|
|
outputTexture[1] = renderTarget.height;
|
|
}
|
|
outputTexture[2] = renderTarget.isRoot ? -1 : 1;
|
|
filterUniforms.update();
|
|
if (renderer.renderPipes.uniformBatch) {
|
|
const batchUniforms = renderer.renderPipes.uniformBatch.getUboResource(filterUniforms);
|
|
this._globalFilterBindGroup.setResource(batchUniforms, 0);
|
|
} else {
|
|
this._globalFilterBindGroup.setResource(filterUniforms, 0);
|
|
}
|
|
this._globalFilterBindGroup.setResource(input.source, 1);
|
|
this._globalFilterBindGroup.setResource(input.source.style, 2);
|
|
filter.groups[0] = this._globalFilterBindGroup;
|
|
renderer.encoder.draw({
|
|
geometry: quadGeometry,
|
|
shader: filter,
|
|
state: filter._state,
|
|
topology: "triangle-list"
|
|
});
|
|
if (renderer.type === RendererType.WEBGL) {
|
|
renderer.renderTarget.finishRenderPass();
|
|
}
|
|
}
|
|
_getFilterData() {
|
|
return {
|
|
skip: false,
|
|
inputTexture: null,
|
|
bounds: new Bounds(),
|
|
container: null,
|
|
filterEffect: null,
|
|
blendRequired: false,
|
|
previousRenderSurface: null
|
|
};
|
|
}
|
|
/**
|
|
* Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_.
|
|
*
|
|
* Use `outputMatrix * vTextureCoord` in the shader.
|
|
* @param outputMatrix - The matrix to output to.
|
|
* @param {Sprite} sprite - The sprite to map to.
|
|
* @returns The mapped matrix.
|
|
*/
|
|
calculateSpriteMatrix(outputMatrix, sprite) {
|
|
const data = this._activeFilterData;
|
|
const mappedMatrix = outputMatrix.set(
|
|
data.inputTexture._source.width,
|
|
0,
|
|
0,
|
|
data.inputTexture._source.height,
|
|
data.bounds.minX,
|
|
data.bounds.minY
|
|
);
|
|
const worldTransform = sprite.worldTransform.copyTo(Matrix.shared);
|
|
worldTransform.invert();
|
|
mappedMatrix.prepend(worldTransform);
|
|
mappedMatrix.scale(
|
|
1 / sprite.texture.frame.width,
|
|
1 / sprite.texture.frame.height
|
|
);
|
|
mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y);
|
|
return mappedMatrix;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
FilterSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "filter"
|
|
};
|
|
|
|
"use strict";
|
|
extensions.add(FilterSystem);
|
|
extensions.add(FilterPipe);
|
|
|
|
"use strict";
|
|
|
|
var browserAll = {
|
|
__proto__: null
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
const environments = [];
|
|
extensions.handleByNamedList(ExtensionType.Environment, environments);
|
|
async function loadEnvironmentExtensions(skip) {
|
|
if (skip)
|
|
return;
|
|
for (let i = 0; i < environments.length; i++) {
|
|
const env = environments[i];
|
|
if (env.value.test()) {
|
|
await env.value.load();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
async function autoDetectEnvironment(add) {
|
|
return loadEnvironmentExtensions(!add);
|
|
}
|
|
|
|
"use strict";
|
|
let unsafeEval;
|
|
function unsafeEvalSupported() {
|
|
if (typeof unsafeEval === "boolean") {
|
|
return unsafeEval;
|
|
}
|
|
try {
|
|
const func = new Function("param1", "param2", "param3", "return param1[param2] === param3;");
|
|
unsafeEval = func({ a: "b" }, "a", "b") === true;
|
|
} catch (e) {
|
|
unsafeEval = false;
|
|
}
|
|
return unsafeEval;
|
|
}
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
var CLEAR = /* @__PURE__ */ ((CLEAR2) => {
|
|
CLEAR2[CLEAR2["NONE"] = 0] = "NONE";
|
|
CLEAR2[CLEAR2["COLOR"] = 16384] = "COLOR";
|
|
CLEAR2[CLEAR2["STENCIL"] = 1024] = "STENCIL";
|
|
CLEAR2[CLEAR2["DEPTH"] = 256] = "DEPTH";
|
|
CLEAR2[CLEAR2["COLOR_DEPTH"] = 16640] = "COLOR_DEPTH";
|
|
CLEAR2[CLEAR2["COLOR_STENCIL"] = 17408] = "COLOR_STENCIL";
|
|
CLEAR2[CLEAR2["DEPTH_STENCIL"] = 1280] = "DEPTH_STENCIL";
|
|
CLEAR2[CLEAR2["ALL"] = 17664] = "ALL";
|
|
return CLEAR2;
|
|
})(CLEAR || {});
|
|
|
|
"use strict";
|
|
class SystemRunner {
|
|
/**
|
|
* @param name - The function name that will be executed on the listeners added to this Runner.
|
|
*/
|
|
constructor(name) {
|
|
this.items = [];
|
|
this._name = name;
|
|
}
|
|
/* eslint-disable jsdoc/require-param, jsdoc/check-param-names */
|
|
/**
|
|
* Dispatch/Broadcast Runner to all listeners added to the queue.
|
|
* @param {...any} params - (optional) parameters to pass to each listener
|
|
*/
|
|
/* eslint-enable jsdoc/require-param, jsdoc/check-param-names */
|
|
emit(a0, a1, a2, a3, a4, a5, a6, a7) {
|
|
const { name, items } = this;
|
|
for (let i = 0, len = items.length; i < len; i++) {
|
|
items[i][name](a0, a1, a2, a3, a4, a5, a6, a7);
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Add a listener to the Runner
|
|
*
|
|
* Runners do not need to have scope or functions passed to them.
|
|
* All that is required is to pass the listening object and ensure that it has contains a function that has the same name
|
|
* as the name provided to the Runner when it was created.
|
|
*
|
|
* Eg A listener passed to this Runner will require a 'complete' function.
|
|
*
|
|
* ```
|
|
* import { Runner } from 'pixi.js';
|
|
*
|
|
* const complete = new Runner('complete');
|
|
* ```
|
|
*
|
|
* The scope used will be the object itself.
|
|
* @param {any} item - The object that will be listening.
|
|
*/
|
|
add(item) {
|
|
if (item[this._name]) {
|
|
this.remove(item);
|
|
this.items.push(item);
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Remove a single listener from the dispatch queue.
|
|
* @param {any} item - The listener that you would like to remove.
|
|
*/
|
|
remove(item) {
|
|
const index = this.items.indexOf(item);
|
|
if (index !== -1) {
|
|
this.items.splice(index, 1);
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Check to see if the listener is already in the Runner
|
|
* @param {any} item - The listener that you would like to check.
|
|
*/
|
|
contains(item) {
|
|
return this.items.indexOf(item) !== -1;
|
|
}
|
|
/** Remove all listeners from the Runner */
|
|
removeAll() {
|
|
this.items.length = 0;
|
|
return this;
|
|
}
|
|
/** Remove all references, don't use after this. */
|
|
destroy() {
|
|
this.removeAll();
|
|
this.items = null;
|
|
this._name = null;
|
|
}
|
|
/**
|
|
* `true` if there are no this Runner contains no listeners
|
|
* @readonly
|
|
*/
|
|
get empty() {
|
|
return this.items.length === 0;
|
|
}
|
|
/**
|
|
* The name of the runner.
|
|
* @readonly
|
|
*/
|
|
get name() {
|
|
return this._name;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$G = Object.defineProperty;
|
|
var __getOwnPropSymbols$G = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$G = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$G = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$G = (obj, key, value) => key in obj ? __defProp$G(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$G = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$G.call(b, prop))
|
|
__defNormalProp$G(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$G)
|
|
for (var prop of __getOwnPropSymbols$G(b)) {
|
|
if (__propIsEnum$G.call(b, prop))
|
|
__defNormalProp$G(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const defaultRunners = [
|
|
"init",
|
|
"destroy",
|
|
"contextChange",
|
|
"resolutionChange",
|
|
"reset",
|
|
"renderEnd",
|
|
"renderStart",
|
|
"render",
|
|
"update",
|
|
"postrender",
|
|
"prerender"
|
|
];
|
|
const _AbstractRenderer = class _AbstractRenderer extends EventEmitter {
|
|
/**
|
|
* Set up a system with a collection of SystemClasses and runners.
|
|
* Systems are attached dynamically to this class when added.
|
|
* @param config - the config for the system manager
|
|
*/
|
|
constructor(config) {
|
|
var _a;
|
|
super();
|
|
this.runners = /* @__PURE__ */ Object.create(null);
|
|
this.renderPipes = /* @__PURE__ */ Object.create(null);
|
|
this._initOptions = {};
|
|
this._systemsHash = /* @__PURE__ */ Object.create(null);
|
|
this.type = config.type;
|
|
this.name = config.name;
|
|
this.config = config;
|
|
const combinedRunners = [...defaultRunners, ...(_a = this.config.runners) != null ? _a : []];
|
|
this._addRunners(...combinedRunners);
|
|
this._unsafeEvalCheck();
|
|
}
|
|
/**
|
|
* Initialize the renderer.
|
|
* @param options - The options to use to create the renderer.
|
|
*/
|
|
async init(options = {}) {
|
|
const skip = options.skipExtensionImports === true ? true : options.manageImports === false;
|
|
await loadEnvironmentExtensions(skip);
|
|
this._addSystems(this.config.systems);
|
|
this._addPipes(this.config.renderPipes, this.config.renderPipeAdaptors);
|
|
for (const systemName in this._systemsHash) {
|
|
const system = this._systemsHash[systemName];
|
|
const defaultSystemOptions = system.constructor.defaultOptions;
|
|
options = __spreadValues$G(__spreadValues$G({}, defaultSystemOptions), options);
|
|
}
|
|
options = __spreadValues$G(__spreadValues$G({}, _AbstractRenderer.defaultOptions), options);
|
|
this._roundPixels = options.roundPixels ? 1 : 0;
|
|
for (let i = 0; i < this.runners.init.items.length; i++) {
|
|
await this.runners.init.items[i].init(options);
|
|
}
|
|
this._initOptions = options;
|
|
}
|
|
render(args, deprecated) {
|
|
let options = args;
|
|
if (options instanceof Container) {
|
|
options = { container: options };
|
|
if (deprecated) {
|
|
deprecation(v8_0_0, "passing a second argument is deprecated, please use render options instead");
|
|
options.target = deprecated.renderTexture;
|
|
}
|
|
}
|
|
options.target || (options.target = this.view.renderTarget);
|
|
if (options.target === this.view.renderTarget) {
|
|
this._lastObjectRendered = options.container;
|
|
options.clearColor = this.background.colorRgba;
|
|
}
|
|
if (options.clearColor) {
|
|
const isRGBAArray = Array.isArray(options.clearColor) && options.clearColor.length === 4;
|
|
options.clearColor = isRGBAArray ? options.clearColor : Color.shared.setValue(options.clearColor).toArray();
|
|
}
|
|
if (!options.transform) {
|
|
options.container.updateLocalTransform();
|
|
options.transform = options.container.localTransform;
|
|
}
|
|
this.runners.prerender.emit(options);
|
|
this.runners.renderStart.emit(options);
|
|
this.runners.render.emit(options);
|
|
this.runners.renderEnd.emit(options);
|
|
this.runners.postrender.emit(options);
|
|
}
|
|
/**
|
|
* Resizes the WebGL view to the specified width and height.
|
|
* @param desiredScreenWidth - The desired width of the screen.
|
|
* @param desiredScreenHeight - The desired height of the screen.
|
|
* @param resolution - The resolution / device pixel ratio of the renderer.
|
|
*/
|
|
resize(desiredScreenWidth, desiredScreenHeight, resolution) {
|
|
const previousResolution = this.view.resolution;
|
|
this.view.resize(desiredScreenWidth, desiredScreenHeight, resolution);
|
|
this.emit("resize", this.view.screen.width, this.view.screen.height, this.view.resolution);
|
|
if (resolution !== void 0 && resolution !== previousResolution) {
|
|
this.runners.resolutionChange.emit(resolution);
|
|
}
|
|
}
|
|
clear(options = {}) {
|
|
var _a;
|
|
const renderer = this;
|
|
options.target || (options.target = renderer.renderTarget.renderTarget);
|
|
options.clearColor || (options.clearColor = this.background.colorRgba);
|
|
(_a = options.clear) != null ? _a : options.clear = CLEAR.ALL;
|
|
const { clear, clearColor, target } = options;
|
|
Color.shared.setValue(clearColor != null ? clearColor : this.background.colorRgba);
|
|
renderer.renderTarget.clear(target, clear, Color.shared.toArray());
|
|
}
|
|
/** The resolution / device pixel ratio of the renderer. */
|
|
get resolution() {
|
|
return this.view.resolution;
|
|
}
|
|
set resolution(value) {
|
|
this.view.resolution = value;
|
|
this.runners.resolutionChange.emit(value);
|
|
}
|
|
/**
|
|
* Same as view.width, actual number of pixels in the canvas by horizontal.
|
|
* @member {number}
|
|
* @readonly
|
|
* @default 800
|
|
*/
|
|
get width() {
|
|
return this.view.texture.frame.width;
|
|
}
|
|
/**
|
|
* Same as view.height, actual number of pixels in the canvas by vertical.
|
|
* @default 600
|
|
*/
|
|
get height() {
|
|
return this.view.texture.frame.height;
|
|
}
|
|
// NOTE: this was `view` in v7
|
|
/**
|
|
* The canvas element that everything is drawn to.
|
|
* @type {environment.ICanvas}
|
|
*/
|
|
get canvas() {
|
|
return this.view.canvas;
|
|
}
|
|
/**
|
|
* the last object rendered by the renderer. Useful for other plugins like interaction managers
|
|
* @readonly
|
|
*/
|
|
get lastObjectRendered() {
|
|
return this._lastObjectRendered;
|
|
}
|
|
/**
|
|
* Flag if we are rendering to the screen vs renderTexture
|
|
* @readonly
|
|
* @default true
|
|
*/
|
|
get renderingToScreen() {
|
|
const renderer = this;
|
|
return renderer.renderTarget.renderingToScreen;
|
|
}
|
|
/**
|
|
* Measurements of the screen. (0, 0, screenWidth, screenHeight).
|
|
*
|
|
* Its safe to use as filterArea or hitArea for the whole stage.
|
|
*/
|
|
get screen() {
|
|
return this.view.screen;
|
|
}
|
|
/**
|
|
* Create a bunch of runners based of a collection of ids
|
|
* @param runnerIds - the runner ids to add
|
|
*/
|
|
_addRunners(...runnerIds) {
|
|
runnerIds.forEach((runnerId) => {
|
|
this.runners[runnerId] = new SystemRunner(runnerId);
|
|
});
|
|
}
|
|
_addSystems(systems) {
|
|
let i;
|
|
for (i in systems) {
|
|
const val = systems[i];
|
|
this._addSystem(val.value, val.name);
|
|
}
|
|
}
|
|
/**
|
|
* Add a new system to the renderer.
|
|
* @param ClassRef - Class reference
|
|
* @param name - Property name for system, if not specified
|
|
* will use a static `name` property on the class itself. This
|
|
* name will be assigned as s property on the Renderer so make
|
|
* sure it doesn't collide with properties on Renderer.
|
|
* @returns Return instance of renderer
|
|
*/
|
|
_addSystem(ClassRef, name) {
|
|
const system = new ClassRef(this);
|
|
if (this[name]) {
|
|
throw new Error(`Whoops! The name "${name}" is already in use`);
|
|
}
|
|
this[name] = system;
|
|
this._systemsHash[name] = system;
|
|
for (const i in this.runners) {
|
|
this.runners[i].add(system);
|
|
}
|
|
return this;
|
|
}
|
|
_addPipes(pipes, pipeAdaptors) {
|
|
const adaptors = pipeAdaptors.reduce((acc, adaptor) => {
|
|
acc[adaptor.name] = adaptor.value;
|
|
return acc;
|
|
}, {});
|
|
pipes.forEach((pipe) => {
|
|
const PipeClass = pipe.value;
|
|
const name = pipe.name;
|
|
const Adaptor = adaptors[name];
|
|
this.renderPipes[name] = new PipeClass(
|
|
this,
|
|
Adaptor ? new Adaptor() : null
|
|
);
|
|
});
|
|
}
|
|
destroy(options = false) {
|
|
this.runners.destroy.items.reverse();
|
|
this.runners.destroy.emit(options);
|
|
Object.values(this.runners).forEach((runner) => {
|
|
runner.destroy();
|
|
});
|
|
this._systemsHash = null;
|
|
this.renderPipes = null;
|
|
}
|
|
/**
|
|
* Generate a texture from a container.
|
|
* @param options - options or container target to use when generating the texture
|
|
* @returns a texture
|
|
*/
|
|
generateTexture(options) {
|
|
return this.textureGenerator.generateTexture(options);
|
|
}
|
|
/**
|
|
* Whether the renderer will round coordinates to whole pixels when rendering.
|
|
* Can be overridden on a per scene item basis.
|
|
*/
|
|
get roundPixels() {
|
|
return !!this._roundPixels;
|
|
}
|
|
/**
|
|
* Overridable function by `pixi.js/unsafe-eval` to silence
|
|
* throwing an error if platform doesn't support unsafe-evals.
|
|
* @private
|
|
* @ignore
|
|
*/
|
|
_unsafeEvalCheck() {
|
|
if (!unsafeEvalSupported()) {
|
|
throw new Error("Current environment does not allow unsafe-eval, please use pixi.js/unsafe-eval module to enable support.");
|
|
}
|
|
}
|
|
};
|
|
/** The default options for the renderer. */
|
|
_AbstractRenderer.defaultOptions = {
|
|
/**
|
|
* Default resolution / device pixel ratio of the renderer.
|
|
* @default 1
|
|
*/
|
|
resolution: 1,
|
|
/**
|
|
* Should the `failIfMajorPerformanceCaveat` flag be enabled as a context option used in the `isWebGLSupported`
|
|
* function. If set to true, a WebGL renderer can fail to be created if the browser thinks there could be
|
|
* performance issues when using WebGL.
|
|
*
|
|
* In PixiJS v6 this has changed from true to false by default, to allow WebGL to work in as many
|
|
* scenarios as possible. However, some users may have a poor experience, for example, if a user has a gpu or
|
|
* driver version blacklisted by the
|
|
* browser.
|
|
*
|
|
* If your application requires high performance rendering, you may wish to set this to false.
|
|
* We recommend one of two options if you decide to set this flag to false:
|
|
*
|
|
* 1: Use the Canvas renderer as a fallback in case high performance WebGL is
|
|
* not supported.
|
|
*
|
|
* 2: Call `isWebGLSupported` (which if found in the utils package) in your code before attempting to create a
|
|
* PixiJS renderer, and show an error message to the user if the function returns false, explaining that their
|
|
* device & browser combination does not support high performance WebGL.
|
|
* This is a much better strategy than trying to create a PixiJS renderer and finding it then fails.
|
|
* @default false
|
|
*/
|
|
failIfMajorPerformanceCaveat: false,
|
|
/**
|
|
* Should round pixels be forced when rendering?
|
|
* @default false
|
|
*/
|
|
roundPixels: false
|
|
};
|
|
let AbstractRenderer = _AbstractRenderer;
|
|
|
|
"use strict";
|
|
let _isWebGLSupported;
|
|
function isWebGLSupported(failIfMajorPerformanceCaveat) {
|
|
if (_isWebGLSupported !== void 0)
|
|
return _isWebGLSupported;
|
|
_isWebGLSupported = (() => {
|
|
var _a;
|
|
const contextOptions = {
|
|
stencil: true,
|
|
failIfMajorPerformanceCaveat: failIfMajorPerformanceCaveat != null ? failIfMajorPerformanceCaveat : AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
|
|
};
|
|
try {
|
|
if (!DOMAdapter.get().getWebGLRenderingContext()) {
|
|
return false;
|
|
}
|
|
const canvas = DOMAdapter.get().createCanvas();
|
|
let gl = canvas.getContext("webgl", contextOptions);
|
|
const success = !!((_a = gl == null ? void 0 : gl.getContextAttributes()) == null ? void 0 : _a.stencil);
|
|
if (gl) {
|
|
const loseContext = gl.getExtension("WEBGL_lose_context");
|
|
if (loseContext) {
|
|
loseContext.loseContext();
|
|
}
|
|
}
|
|
gl = null;
|
|
return success;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
})();
|
|
return _isWebGLSupported;
|
|
}
|
|
|
|
"use strict";
|
|
let _isWebGPUSupported;
|
|
async function isWebGPUSupported(options = {}) {
|
|
if (_isWebGPUSupported !== void 0)
|
|
return _isWebGPUSupported;
|
|
_isWebGPUSupported = await (async () => {
|
|
const gpu = DOMAdapter.get().getNavigator().gpu;
|
|
if (!gpu) {
|
|
return false;
|
|
}
|
|
try {
|
|
const adapter = await gpu.requestAdapter(options);
|
|
await adapter.requestDevice();
|
|
return true;
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
})();
|
|
return _isWebGPUSupported;
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$F = Object.defineProperty;
|
|
var __getOwnPropSymbols$F = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$F = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$F = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$F = (obj, key, value) => key in obj ? __defProp$F(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$F = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$F.call(b, prop))
|
|
__defNormalProp$F(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$F)
|
|
for (var prop of __getOwnPropSymbols$F(b)) {
|
|
if (__propIsEnum$F.call(b, prop))
|
|
__defNormalProp$F(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const renderPriority = ["webgl", "webgpu", "canvas"];
|
|
async function autoDetectRenderer(options) {
|
|
var _a;
|
|
let preferredOrder = [];
|
|
if (options.preference) {
|
|
preferredOrder.push(options.preference);
|
|
renderPriority.forEach((item) => {
|
|
if (item !== options.preference) {
|
|
preferredOrder.push(item);
|
|
}
|
|
});
|
|
} else {
|
|
preferredOrder = renderPriority.slice();
|
|
}
|
|
let RendererClass;
|
|
let finalOptions = {};
|
|
for (let i = 0; i < preferredOrder.length; i++) {
|
|
const rendererType = preferredOrder[i];
|
|
if (rendererType === "webgpu" && await isWebGPUSupported()) {
|
|
const { WebGPURenderer } = await Promise.resolve().then(function () { return WebGPURenderer$1; });
|
|
RendererClass = WebGPURenderer;
|
|
finalOptions = __spreadValues$F(__spreadValues$F({}, options), options.webgpu);
|
|
break;
|
|
} else if (rendererType === "webgl" && isWebGLSupported(
|
|
(_a = options.failIfMajorPerformanceCaveat) != null ? _a : AbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat
|
|
)) {
|
|
const { WebGLRenderer } = await Promise.resolve().then(function () { return WebGLRenderer$1; });
|
|
RendererClass = WebGLRenderer;
|
|
finalOptions = __spreadValues$F(__spreadValues$F({}, options), options.webgl);
|
|
break;
|
|
} else if (rendererType === "canvas") {
|
|
finalOptions = __spreadValues$F({}, options);
|
|
throw new Error("CanvasRenderer is not yet implemented");
|
|
}
|
|
}
|
|
delete finalOptions.webgpu;
|
|
delete finalOptions.webgl;
|
|
if (!RendererClass) {
|
|
throw new Error("No available renderer for the current environment");
|
|
}
|
|
const renderer = new RendererClass();
|
|
await renderer.init(finalOptions);
|
|
return renderer;
|
|
}
|
|
|
|
"use strict";
|
|
const DATA_URI = /^\s*data:(?:([\w-]+)\/([\w+.-]+))?(?:;charset=([\w-]+))?(?:;(base64))?,(.*)/i;
|
|
const VERSION = "8.4.1";
|
|
|
|
"use strict";
|
|
class ApplicationInitHook {
|
|
static init() {
|
|
var _a;
|
|
(_a = globalThis.__PIXI_APP_INIT__) == null ? void 0 : _a.call(globalThis, this, VERSION);
|
|
}
|
|
static destroy() {
|
|
}
|
|
}
|
|
/** @ignore */
|
|
ApplicationInitHook.extension = ExtensionType.Application;
|
|
class RendererInitHook {
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
}
|
|
init() {
|
|
var _a;
|
|
(_a = globalThis.__PIXI_RENDERER_INIT__) == null ? void 0 : _a.call(globalThis, this._renderer, VERSION);
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
RendererInitHook.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "initHook",
|
|
priority: -10
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$E = Object.defineProperty;
|
|
var __getOwnPropSymbols$E = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$E = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$E = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$E = (obj, key, value) => key in obj ? __defProp$E(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$E = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$E.call(b, prop))
|
|
__defNormalProp$E(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$E)
|
|
for (var prop of __getOwnPropSymbols$E(b)) {
|
|
if (__propIsEnum$E.call(b, prop))
|
|
__defNormalProp$E(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _Application = class _Application {
|
|
/** @ignore */
|
|
constructor(...args) {
|
|
/** The root display container that's rendered. */
|
|
this.stage = new Container();
|
|
if (args[0] !== void 0) {
|
|
deprecation(v8_0_0, "Application constructor options are deprecated, please use Application.init() instead.");
|
|
}
|
|
}
|
|
/**
|
|
* @param options - The optional application and renderer parameters.
|
|
*/
|
|
async init(options) {
|
|
options = __spreadValues$E({}, options);
|
|
this.renderer = await autoDetectRenderer(options);
|
|
_Application._plugins.forEach((plugin) => {
|
|
plugin.init.call(this, options);
|
|
});
|
|
}
|
|
/** Render the current stage. */
|
|
render() {
|
|
this.renderer.render({ container: this.stage });
|
|
}
|
|
/**
|
|
* Reference to the renderer's canvas element.
|
|
* @readonly
|
|
* @member {HTMLCanvasElement}
|
|
*/
|
|
get canvas() {
|
|
return this.renderer.canvas;
|
|
}
|
|
/**
|
|
* Reference to the renderer's canvas element.
|
|
* @member {HTMLCanvasElement}
|
|
* @deprecated since 8.0.0
|
|
*/
|
|
get view() {
|
|
deprecation(v8_0_0, "Application.view is deprecated, please use Application.canvas instead.");
|
|
return this.renderer.canvas;
|
|
}
|
|
/**
|
|
* Reference to the renderer's screen rectangle. Its safe to use as `filterArea` or `hitArea` for the whole screen.
|
|
* @readonly
|
|
*/
|
|
get screen() {
|
|
return this.renderer.screen;
|
|
}
|
|
/**
|
|
* Destroys the application and all of its resources.
|
|
* @param {object|boolean}[rendererDestroyOptions=false] - The options for destroying the renderer.
|
|
* @param {boolean}[rendererDestroyOptions.removeView=false] - Removes the Canvas element from the DOM.
|
|
* @param {object|boolean} [options=false] - The options for destroying the stage.
|
|
* @param {boolean} [options.children=false] - If set to true, all the children will have their destroy method
|
|
* called as well. `options` will be passed on to those calls.
|
|
* @param {boolean} [options.texture=false] - Only used for children with textures e.g. Sprites.
|
|
* If options.children is set to true,
|
|
* it should destroy the texture of the child sprite.
|
|
* @param {boolean} [options.textureSource=false] - Only used for children with textures e.g. Sprites.
|
|
* If options.children is set to true,
|
|
* it should destroy the texture source of the child sprite.
|
|
* @param {boolean} [options.context=false] - Only used for children with graphicsContexts e.g. Graphics.
|
|
* If options.children is set to true,
|
|
* it should destroy the context of the child graphics.
|
|
*/
|
|
destroy(rendererDestroyOptions = false, options = false) {
|
|
const plugins = _Application._plugins.slice(0);
|
|
plugins.reverse();
|
|
plugins.forEach((plugin) => {
|
|
plugin.destroy.call(this);
|
|
});
|
|
this.stage.destroy(options);
|
|
this.stage = null;
|
|
this.renderer.destroy(rendererDestroyOptions);
|
|
this.renderer = null;
|
|
}
|
|
};
|
|
/**
|
|
* Collection of installed plugins.
|
|
* @alias _plugins
|
|
*/
|
|
_Application._plugins = [];
|
|
let Application = _Application;
|
|
extensions.handleByList(ExtensionType.Application, Application._plugins);
|
|
extensions.add(ApplicationInitHook);
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
class BitmapFont extends AbstractBitmapFont {
|
|
constructor(options, url) {
|
|
var _a;
|
|
super();
|
|
const { textures, data } = options;
|
|
Object.keys(data.pages).forEach((key) => {
|
|
const pageData = data.pages[parseInt(key, 10)];
|
|
const texture = textures[pageData.id];
|
|
this.pages.push({ texture });
|
|
});
|
|
Object.keys(data.chars).forEach((key) => {
|
|
var _a2;
|
|
const charData = data.chars[key];
|
|
const {
|
|
frame: textureFrame,
|
|
source: textureSource
|
|
} = textures[charData.page];
|
|
const frameReal = new Rectangle(
|
|
charData.x + textureFrame.x,
|
|
charData.y + textureFrame.y,
|
|
charData.width,
|
|
charData.height
|
|
);
|
|
const texture = new Texture({
|
|
source: textureSource,
|
|
frame: frameReal
|
|
});
|
|
this.chars[key] = {
|
|
id: key.codePointAt(0),
|
|
xOffset: charData.xOffset,
|
|
yOffset: charData.yOffset,
|
|
xAdvance: charData.xAdvance,
|
|
kerning: (_a2 = charData.kerning) != null ? _a2 : {},
|
|
texture
|
|
};
|
|
});
|
|
this.baseRenderedFontSize = data.fontSize;
|
|
this.baseMeasurementFontSize = data.fontSize;
|
|
this.fontMetrics = {
|
|
ascent: 0,
|
|
descent: 0,
|
|
fontSize: data.fontSize
|
|
};
|
|
this.baseLineOffset = data.baseLineOffset;
|
|
this.lineHeight = data.lineHeight;
|
|
this.fontFamily = data.fontFamily;
|
|
this.distanceField = (_a = data.distanceField) != null ? _a : {
|
|
type: "none",
|
|
range: 0
|
|
};
|
|
this.url = url;
|
|
}
|
|
/** Destroys the BitmapFont object. */
|
|
destroy() {
|
|
super.destroy();
|
|
for (let i = 0; i < this.pages.length; i++) {
|
|
const { texture } = this.pages[i];
|
|
texture.destroy(true);
|
|
}
|
|
this.pages = null;
|
|
}
|
|
/**
|
|
* Generates a bitmap-font for the given style and character set
|
|
* @param options - Setup options for font generation.
|
|
* @returns Font generated by style options.
|
|
* @example
|
|
* import { BitmapFont, BitmapText } from 'pixi.js';
|
|
*
|
|
* BitmapFont.install('TitleFont', {
|
|
* fontFamily: 'Arial',
|
|
* fontSize: 12,
|
|
* strokeThickness: 2,
|
|
* fill: 'purple',
|
|
* });
|
|
*
|
|
* const title = new BitmapText({ text: 'This is the title', fontFamily: 'TitleFont' });
|
|
*/
|
|
static install(options) {
|
|
BitmapFontManager.install(options);
|
|
}
|
|
/**
|
|
* Uninstalls a bitmap font from the cache.
|
|
* @param {string} name - The name of the bitmap font to uninstall.
|
|
*/
|
|
static uninstall(name) {
|
|
BitmapFontManager.uninstall(name);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const bitmapFontTextParser = {
|
|
test(data) {
|
|
return typeof data === "string" && data.startsWith("info face=");
|
|
},
|
|
parse(txt) {
|
|
var _a, _b, _c;
|
|
const items = txt.match(/^[a-z]+\s+.+$/gm);
|
|
const rawData = {
|
|
info: [],
|
|
common: [],
|
|
page: [],
|
|
char: [],
|
|
chars: [],
|
|
kerning: [],
|
|
kernings: [],
|
|
distanceField: []
|
|
};
|
|
for (const i in items) {
|
|
const name = items[i].match(/^[a-z]+/gm)[0];
|
|
const attributeList = items[i].match(/[a-zA-Z]+=([^\s"']+|"([^"]*)")/gm);
|
|
const itemData = {};
|
|
for (const i2 in attributeList) {
|
|
const split = attributeList[i2].split("=");
|
|
const key = split[0];
|
|
const strValue = split[1].replace(/"/gm, "");
|
|
const floatValue = parseFloat(strValue);
|
|
const value = isNaN(floatValue) ? strValue : floatValue;
|
|
itemData[key] = value;
|
|
}
|
|
rawData[name].push(itemData);
|
|
}
|
|
const font = {
|
|
chars: {},
|
|
pages: [],
|
|
lineHeight: 0,
|
|
fontSize: 0,
|
|
fontFamily: "",
|
|
distanceField: null,
|
|
baseLineOffset: 0
|
|
};
|
|
const [info] = rawData.info;
|
|
const [common] = rawData.common;
|
|
const [distanceField] = (_a = rawData.distanceField) != null ? _a : [];
|
|
if (distanceField) {
|
|
font.distanceField = {
|
|
range: parseInt(distanceField.distanceRange, 10),
|
|
type: distanceField.fieldType
|
|
};
|
|
}
|
|
font.fontSize = parseInt(info.size, 10);
|
|
font.fontFamily = info.face;
|
|
font.lineHeight = parseInt(common.lineHeight, 10);
|
|
const page = rawData.page;
|
|
for (let i = 0; i < page.length; i++) {
|
|
font.pages.push({
|
|
id: parseInt(page[i].id, 10) || 0,
|
|
file: page[i].file
|
|
});
|
|
}
|
|
const map = {};
|
|
font.baseLineOffset = font.lineHeight - parseInt(common.base, 10);
|
|
const char = rawData.char;
|
|
for (let i = 0; i < char.length; i++) {
|
|
const charNode = char[i];
|
|
const id = parseInt(charNode.id, 10);
|
|
let letter = (_c = (_b = charNode.letter) != null ? _b : charNode.char) != null ? _c : String.fromCharCode(id);
|
|
if (letter === "space")
|
|
letter = " ";
|
|
map[id] = letter;
|
|
font.chars[letter] = {
|
|
id,
|
|
// texture deets..
|
|
page: parseInt(charNode.page, 10) || 0,
|
|
x: parseInt(charNode.x, 10),
|
|
y: parseInt(charNode.y, 10),
|
|
width: parseInt(charNode.width, 10),
|
|
height: parseInt(charNode.height, 10),
|
|
xOffset: parseInt(charNode.xoffset, 10),
|
|
yOffset: parseInt(charNode.yoffset, 10),
|
|
xAdvance: parseInt(charNode.xadvance, 10),
|
|
kerning: {}
|
|
};
|
|
}
|
|
const kerning = rawData.kerning || [];
|
|
for (let i = 0; i < kerning.length; i++) {
|
|
const first = parseInt(kerning[i].first, 10);
|
|
const second = parseInt(kerning[i].second, 10);
|
|
const amount = parseInt(kerning[i].amount, 10);
|
|
font.chars[map[second]].kerning[map[first]] = amount;
|
|
}
|
|
return font;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const bitmapFontXMLParser = {
|
|
test(data) {
|
|
const xml = data;
|
|
return typeof xml !== "string" && "getElementsByTagName" in xml && xml.getElementsByTagName("page").length && xml.getElementsByTagName("info")[0].getAttribute("face") !== null;
|
|
},
|
|
parse(xml) {
|
|
var _a, _b;
|
|
const data = {
|
|
chars: {},
|
|
pages: [],
|
|
lineHeight: 0,
|
|
fontSize: 0,
|
|
fontFamily: "",
|
|
distanceField: null,
|
|
baseLineOffset: 0
|
|
};
|
|
const info = xml.getElementsByTagName("info")[0];
|
|
const common = xml.getElementsByTagName("common")[0];
|
|
const distanceField = xml.getElementsByTagName("distanceField")[0];
|
|
if (distanceField) {
|
|
data.distanceField = {
|
|
type: distanceField.getAttribute("fieldType"),
|
|
range: parseInt(distanceField.getAttribute("distanceRange"), 10)
|
|
};
|
|
}
|
|
const page = xml.getElementsByTagName("page");
|
|
const char = xml.getElementsByTagName("char");
|
|
const kerning = xml.getElementsByTagName("kerning");
|
|
data.fontSize = parseInt(info.getAttribute("size"), 10);
|
|
data.fontFamily = info.getAttribute("face");
|
|
data.lineHeight = parseInt(common.getAttribute("lineHeight"), 10);
|
|
for (let i = 0; i < page.length; i++) {
|
|
data.pages.push({
|
|
id: parseInt(page[i].getAttribute("id"), 10) || 0,
|
|
file: page[i].getAttribute("file")
|
|
});
|
|
}
|
|
const map = {};
|
|
data.baseLineOffset = data.lineHeight - parseInt(common.getAttribute("base"), 10);
|
|
for (let i = 0; i < char.length; i++) {
|
|
const charNode = char[i];
|
|
const id = parseInt(charNode.getAttribute("id"), 10);
|
|
let letter = (_b = (_a = charNode.getAttribute("letter")) != null ? _a : charNode.getAttribute("char")) != null ? _b : String.fromCharCode(id);
|
|
if (letter === "space")
|
|
letter = " ";
|
|
map[id] = letter;
|
|
data.chars[letter] = {
|
|
id,
|
|
// texture deets..
|
|
page: parseInt(charNode.getAttribute("page"), 10) || 0,
|
|
x: parseInt(charNode.getAttribute("x"), 10),
|
|
y: parseInt(charNode.getAttribute("y"), 10),
|
|
width: parseInt(charNode.getAttribute("width"), 10),
|
|
height: parseInt(charNode.getAttribute("height"), 10),
|
|
// render deets..
|
|
xOffset: parseInt(charNode.getAttribute("xoffset"), 10),
|
|
yOffset: parseInt(charNode.getAttribute("yoffset"), 10),
|
|
// + baseLineOffset,
|
|
xAdvance: parseInt(charNode.getAttribute("xadvance"), 10),
|
|
kerning: {}
|
|
};
|
|
}
|
|
for (let i = 0; i < kerning.length; i++) {
|
|
const first = parseInt(kerning[i].getAttribute("first"), 10);
|
|
const second = parseInt(kerning[i].getAttribute("second"), 10);
|
|
const amount = parseInt(kerning[i].getAttribute("amount"), 10);
|
|
data.chars[map[second]].kerning[map[first]] = amount;
|
|
}
|
|
return data;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const bitmapFontXMLStringParser = {
|
|
test(data) {
|
|
if (typeof data === "string" && data.includes("<font>")) {
|
|
return bitmapFontXMLParser.test(DOMAdapter.get().parseXML(data));
|
|
}
|
|
return false;
|
|
},
|
|
parse(data) {
|
|
return bitmapFontXMLParser.parse(DOMAdapter.get().parseXML(data));
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const validExtensions = [".xml", ".fnt"];
|
|
const bitmapFontCachePlugin = {
|
|
extension: {
|
|
type: ExtensionType.CacheParser,
|
|
name: "cacheBitmapFont"
|
|
},
|
|
test: (asset) => asset instanceof BitmapFont,
|
|
getCacheableAssets(keys, asset) {
|
|
const out = {};
|
|
keys.forEach((key) => {
|
|
out[key] = asset;
|
|
out[`${key}-bitmap`] = asset;
|
|
});
|
|
out[`${asset.fontFamily}-bitmap`] = asset;
|
|
return out;
|
|
}
|
|
};
|
|
const loadBitmapFont = {
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.Normal
|
|
},
|
|
name: "loadBitmapFont",
|
|
test(url) {
|
|
return validExtensions.includes(path.extname(url).toLowerCase());
|
|
},
|
|
async testParse(data) {
|
|
return bitmapFontTextParser.test(data) || bitmapFontXMLStringParser.test(data);
|
|
},
|
|
async parse(asset, data, loader) {
|
|
const bitmapFontData = bitmapFontTextParser.test(asset) ? bitmapFontTextParser.parse(asset) : bitmapFontXMLStringParser.parse(asset);
|
|
const { src } = data;
|
|
const { pages } = bitmapFontData;
|
|
const textureUrls = [];
|
|
const textureOptions = bitmapFontData.distanceField ? {
|
|
scaleMode: "linear",
|
|
alphaMode: "premultiply-alpha-on-upload",
|
|
autoGenerateMipmaps: false,
|
|
resolution: 1
|
|
} : {};
|
|
for (let i = 0; i < pages.length; ++i) {
|
|
const pageFile = pages[i].file;
|
|
let imagePath = path.join(path.dirname(src), pageFile);
|
|
imagePath = copySearchParams(imagePath, src);
|
|
textureUrls.push({
|
|
src: imagePath,
|
|
data: textureOptions
|
|
});
|
|
}
|
|
const loadedTextures = await loader.load(textureUrls);
|
|
const textures = textureUrls.map((url) => loadedTextures[url.src]);
|
|
const bitmapFont = new BitmapFont({
|
|
data: bitmapFontData,
|
|
textures
|
|
}, src);
|
|
return bitmapFont;
|
|
},
|
|
async load(url, _options) {
|
|
const response = await DOMAdapter.get().fetch(url);
|
|
return await response.text();
|
|
},
|
|
async unload(bitmapFont, _resolvedAsset, loader) {
|
|
await Promise.all(bitmapFont.pages.map((page) => loader.unload(page.texture.source._sourceOrigin)));
|
|
bitmapFont.destroy();
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
class BackgroundLoader {
|
|
/**
|
|
* @param loader
|
|
* @param verbose - should the loader log to the console
|
|
*/
|
|
constructor(loader, verbose = false) {
|
|
this._loader = loader;
|
|
this._assetList = [];
|
|
this._isLoading = false;
|
|
this._maxConcurrent = 1;
|
|
this.verbose = verbose;
|
|
}
|
|
/**
|
|
* Adds an array of assets to load.
|
|
* @param assetUrls - assets to load
|
|
*/
|
|
add(assetUrls) {
|
|
assetUrls.forEach((a) => {
|
|
this._assetList.push(a);
|
|
});
|
|
if (this.verbose) {
|
|
console.log("[BackgroundLoader] assets: ", this._assetList);
|
|
}
|
|
if (this._isActive && !this._isLoading) {
|
|
void this._next();
|
|
}
|
|
}
|
|
/**
|
|
* Loads the next set of assets. Will try to load as many assets as it can at the same time.
|
|
*
|
|
* The max assets it will try to load at one time will be 4.
|
|
*/
|
|
async _next() {
|
|
if (this._assetList.length && this._isActive) {
|
|
this._isLoading = true;
|
|
const toLoad = [];
|
|
const toLoadAmount = Math.min(this._assetList.length, this._maxConcurrent);
|
|
for (let i = 0; i < toLoadAmount; i++) {
|
|
toLoad.push(this._assetList.pop());
|
|
}
|
|
await this._loader.load(toLoad);
|
|
this._isLoading = false;
|
|
void this._next();
|
|
}
|
|
}
|
|
/**
|
|
* Activate/Deactivate the loading. If set to true then it will immediately continue to load the next asset.
|
|
* @returns whether the class is active
|
|
*/
|
|
get active() {
|
|
return this._isActive;
|
|
}
|
|
set active(value) {
|
|
if (this._isActive === value)
|
|
return;
|
|
this._isActive = value;
|
|
if (value && !this._isLoading) {
|
|
void this._next();
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const cacheTextureArray = {
|
|
extension: {
|
|
type: ExtensionType.CacheParser,
|
|
name: "cacheTextureArray"
|
|
},
|
|
test: (asset) => Array.isArray(asset) && asset.every((t) => t instanceof Texture),
|
|
getCacheableAssets: (keys, asset) => {
|
|
const out = {};
|
|
keys.forEach((key) => {
|
|
asset.forEach((item, i) => {
|
|
out[key + (i === 0 ? "" : i + 1)] = item;
|
|
});
|
|
});
|
|
return out;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
async function testImageFormat(imageData) {
|
|
if ("Image" in globalThis) {
|
|
return new Promise((resolve) => {
|
|
const image = new Image();
|
|
image.onload = () => {
|
|
resolve(true);
|
|
};
|
|
image.onerror = () => {
|
|
resolve(false);
|
|
};
|
|
image.src = imageData;
|
|
});
|
|
}
|
|
if ("createImageBitmap" in globalThis && "fetch" in globalThis) {
|
|
try {
|
|
const blob = await (await fetch(imageData)).blob();
|
|
await createImageBitmap(blob);
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
"use strict";
|
|
const detectAvif = {
|
|
extension: {
|
|
type: ExtensionType.DetectionParser,
|
|
priority: 1
|
|
},
|
|
test: async () => testImageFormat(
|
|
// eslint-disable-next-line max-len
|
|
"data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A="
|
|
),
|
|
add: async (formats) => [...formats, "avif"],
|
|
remove: async (formats) => formats.filter((f) => f !== "avif")
|
|
};
|
|
|
|
"use strict";
|
|
const imageFormats = ["png", "jpg", "jpeg"];
|
|
const detectDefaults = {
|
|
extension: {
|
|
type: ExtensionType.DetectionParser,
|
|
priority: -1
|
|
},
|
|
test: () => Promise.resolve(true),
|
|
add: async (formats) => [...formats, ...imageFormats],
|
|
remove: async (formats) => formats.filter((f) => !imageFormats.includes(f))
|
|
};
|
|
|
|
"use strict";
|
|
const inWorker = "WorkerGlobalScope" in globalThis && globalThis instanceof globalThis.WorkerGlobalScope;
|
|
function testVideoFormat(mimeType) {
|
|
if (inWorker) {
|
|
return false;
|
|
}
|
|
const video = document.createElement("video");
|
|
return video.canPlayType(mimeType) !== "";
|
|
}
|
|
|
|
"use strict";
|
|
const detectMp4 = {
|
|
extension: {
|
|
type: ExtensionType.DetectionParser,
|
|
priority: 0
|
|
},
|
|
test: async () => testVideoFormat("video/mp4"),
|
|
add: async (formats) => [...formats, "mp4", "m4v"],
|
|
remove: async (formats) => formats.filter((f) => f !== "mp4" && f !== "m4v")
|
|
};
|
|
|
|
"use strict";
|
|
const detectOgv = {
|
|
extension: {
|
|
type: ExtensionType.DetectionParser,
|
|
priority: 0
|
|
},
|
|
test: async () => testVideoFormat("video/ogg"),
|
|
add: async (formats) => [...formats, "ogv"],
|
|
remove: async (formats) => formats.filter((f) => f !== "ogv")
|
|
};
|
|
|
|
"use strict";
|
|
const detectWebm = {
|
|
extension: {
|
|
type: ExtensionType.DetectionParser,
|
|
priority: 0
|
|
},
|
|
test: async () => testVideoFormat("video/webm"),
|
|
add: async (formats) => [...formats, "webm"],
|
|
remove: async (formats) => formats.filter((f) => f !== "webm")
|
|
};
|
|
|
|
"use strict";
|
|
const detectWebp = {
|
|
extension: {
|
|
type: ExtensionType.DetectionParser,
|
|
priority: 0
|
|
},
|
|
test: async () => testImageFormat(
|
|
"data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA="
|
|
),
|
|
add: async (formats) => [...formats, "webp"],
|
|
remove: async (formats) => formats.filter((f) => f !== "webp")
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$D = Object.defineProperty;
|
|
var __defProps$j = Object.defineProperties;
|
|
var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$D = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$D = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$D = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$D = (obj, key, value) => key in obj ? __defProp$D(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$D = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$D.call(b, prop))
|
|
__defNormalProp$D(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$D)
|
|
for (var prop of __getOwnPropSymbols$D(b)) {
|
|
if (__propIsEnum$D.call(b, prop))
|
|
__defNormalProp$D(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
|
|
class Loader {
|
|
constructor() {
|
|
this._parsers = [];
|
|
this._parsersValidated = false;
|
|
/**
|
|
* All loader parsers registered
|
|
* @type {assets.LoaderParser[]}
|
|
*/
|
|
this.parsers = new Proxy(this._parsers, {
|
|
set: (target, key, value) => {
|
|
this._parsersValidated = false;
|
|
target[key] = value;
|
|
return true;
|
|
}
|
|
});
|
|
/** Cache loading promises that ae currently active */
|
|
this.promiseCache = {};
|
|
}
|
|
/** function used for testing */
|
|
reset() {
|
|
this._parsersValidated = false;
|
|
this.promiseCache = {};
|
|
}
|
|
/**
|
|
* Used internally to generate a promise for the asset to be loaded.
|
|
* @param url - The URL to be loaded
|
|
* @param data - any custom additional information relevant to the asset being loaded
|
|
* @returns - a promise that will resolve to an Asset for example a Texture of a JSON object
|
|
*/
|
|
_getLoadPromiseAndParser(url, data) {
|
|
const result = {
|
|
promise: null,
|
|
parser: null
|
|
};
|
|
result.promise = (async () => {
|
|
var _a, _b;
|
|
let asset = null;
|
|
let parser = null;
|
|
if (data.loadParser) {
|
|
parser = this._parserHash[data.loadParser];
|
|
if (!parser) {
|
|
warn(`[Assets] specified load parser "${data.loadParser}" not found while loading ${url}`);
|
|
}
|
|
}
|
|
if (!parser) {
|
|
for (let i = 0; i < this.parsers.length; i++) {
|
|
const parserX = this.parsers[i];
|
|
if (parserX.load && ((_a = parserX.test) == null ? void 0 : _a.call(parserX, url, data, this))) {
|
|
parser = parserX;
|
|
break;
|
|
}
|
|
}
|
|
if (!parser) {
|
|
warn(`[Assets] ${url} could not be loaded as we don't know how to parse it, ensure the correct parser has been added`);
|
|
return null;
|
|
}
|
|
}
|
|
asset = await parser.load(url, data, this);
|
|
result.parser = parser;
|
|
for (let i = 0; i < this.parsers.length; i++) {
|
|
const parser2 = this.parsers[i];
|
|
if (parser2.parse) {
|
|
if (parser2.parse && await ((_b = parser2.testParse) == null ? void 0 : _b.call(parser2, asset, data, this))) {
|
|
asset = await parser2.parse(asset, data, this) || asset;
|
|
result.parser = parser2;
|
|
}
|
|
}
|
|
}
|
|
return asset;
|
|
})();
|
|
return result;
|
|
}
|
|
async load(assetsToLoadIn, onProgress) {
|
|
if (!this._parsersValidated) {
|
|
this._validateParsers();
|
|
}
|
|
let count = 0;
|
|
const assets = {};
|
|
const singleAsset = isSingleItem(assetsToLoadIn);
|
|
const assetsToLoad = convertToList(assetsToLoadIn, (item) => ({
|
|
alias: [item],
|
|
src: item,
|
|
data: {}
|
|
}));
|
|
const total = assetsToLoad.length;
|
|
const promises = assetsToLoad.map(async (asset) => {
|
|
const url = path.toAbsolute(asset.src);
|
|
if (!assets[asset.src]) {
|
|
try {
|
|
if (!this.promiseCache[url]) {
|
|
this.promiseCache[url] = this._getLoadPromiseAndParser(url, asset);
|
|
}
|
|
assets[asset.src] = await this.promiseCache[url].promise;
|
|
if (onProgress)
|
|
onProgress(++count / total);
|
|
} catch (e) {
|
|
delete this.promiseCache[url];
|
|
delete assets[asset.src];
|
|
throw new Error(`[Loader.load] Failed to load ${url}.
|
|
${e}`);
|
|
}
|
|
}
|
|
});
|
|
await Promise.all(promises);
|
|
return singleAsset ? assets[assetsToLoad[0].src] : assets;
|
|
}
|
|
/**
|
|
* Unloads one or more assets. Any unloaded assets will be destroyed, freeing up memory for your app.
|
|
* The parser that created the asset, will be the one that unloads it.
|
|
* @example
|
|
* // Single asset:
|
|
* const asset = await Loader.load('cool.png');
|
|
*
|
|
* await Loader.unload('cool.png');
|
|
*
|
|
* console.log(asset.destroyed); // true
|
|
* @param assetsToUnloadIn - urls that you want to unload, or a single one!
|
|
*/
|
|
async unload(assetsToUnloadIn) {
|
|
const assetsToUnload = convertToList(assetsToUnloadIn, (item) => ({
|
|
alias: [item],
|
|
src: item
|
|
}));
|
|
const promises = assetsToUnload.map(async (asset) => {
|
|
var _a, _b;
|
|
const url = path.toAbsolute(asset.src);
|
|
const loadPromise = this.promiseCache[url];
|
|
if (loadPromise) {
|
|
const loadedAsset = await loadPromise.promise;
|
|
delete this.promiseCache[url];
|
|
await ((_b = (_a = loadPromise.parser) == null ? void 0 : _a.unload) == null ? void 0 : _b.call(_a, loadedAsset, asset, this));
|
|
}
|
|
});
|
|
await Promise.all(promises);
|
|
}
|
|
/** validates our parsers, right now it only checks for name conflicts but we can add more here as required! */
|
|
_validateParsers() {
|
|
this._parsersValidated = true;
|
|
this._parserHash = this._parsers.filter((parser) => parser.name).reduce((hash, parser) => {
|
|
if (!parser.name) {
|
|
warn(`[Assets] loadParser should have a name`);
|
|
} else if (hash[parser.name]) {
|
|
warn(`[Assets] loadParser name conflict "${parser.name}"`);
|
|
}
|
|
return __spreadProps$j(__spreadValues$D({}, hash), { [parser.name]: parser });
|
|
}, {});
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function checkDataUrl(url, mimes) {
|
|
if (Array.isArray(mimes)) {
|
|
for (const mime of mimes) {
|
|
if (url.startsWith(`data:${mime}`))
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
return url.startsWith(`data:${mimes}`);
|
|
}
|
|
|
|
"use strict";
|
|
function checkExtension(url, extension) {
|
|
const tempURL = url.split("?")[0];
|
|
const ext = path.extname(tempURL).toLowerCase();
|
|
if (Array.isArray(extension)) {
|
|
return extension.includes(ext);
|
|
}
|
|
return ext === extension;
|
|
}
|
|
|
|
"use strict";
|
|
const validJSONExtension = ".json";
|
|
const validJSONMIME = "application/json";
|
|
const loadJson = {
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.Low
|
|
},
|
|
name: "loadJson",
|
|
test(url) {
|
|
return checkDataUrl(url, validJSONMIME) || checkExtension(url, validJSONExtension);
|
|
},
|
|
async load(url) {
|
|
const response = await DOMAdapter.get().fetch(url);
|
|
const json = await response.json();
|
|
return json;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const validTXTExtension = ".txt";
|
|
const validTXTMIME = "text/plain";
|
|
const loadTxt = {
|
|
name: "loadTxt",
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.Low,
|
|
name: "loadTxt"
|
|
},
|
|
test(url) {
|
|
return checkDataUrl(url, validTXTMIME) || checkExtension(url, validTXTExtension);
|
|
},
|
|
async load(url) {
|
|
const response = await DOMAdapter.get().fetch(url);
|
|
const txt = await response.text();
|
|
return txt;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$C = Object.defineProperty;
|
|
var __defProps$i = Object.defineProperties;
|
|
var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$C = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$C = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$C = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$C = (obj, key, value) => key in obj ? __defProp$C(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$C = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$C.call(b, prop))
|
|
__defNormalProp$C(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$C)
|
|
for (var prop of __getOwnPropSymbols$C(b)) {
|
|
if (__propIsEnum$C.call(b, prop))
|
|
__defNormalProp$C(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
|
|
const validWeights = [
|
|
"normal",
|
|
"bold",
|
|
"100",
|
|
"200",
|
|
"300",
|
|
"400",
|
|
"500",
|
|
"600",
|
|
"700",
|
|
"800",
|
|
"900"
|
|
];
|
|
const validFontExtensions = [".ttf", ".otf", ".woff", ".woff2"];
|
|
const validFontMIMEs = [
|
|
"font/ttf",
|
|
"font/otf",
|
|
"font/woff",
|
|
"font/woff2"
|
|
];
|
|
const CSS_IDENT_TOKEN_REGEX = /^(--|-?[A-Z_])[0-9A-Z_-]*$/i;
|
|
function getFontFamilyName(url) {
|
|
const ext = path.extname(url);
|
|
const name = path.basename(url, ext);
|
|
const nameWithSpaces = name.replace(/(-|_)/g, " ");
|
|
const nameTokens = nameWithSpaces.toLowerCase().split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1));
|
|
let valid = nameTokens.length > 0;
|
|
for (const token of nameTokens) {
|
|
if (!token.match(CSS_IDENT_TOKEN_REGEX)) {
|
|
valid = false;
|
|
break;
|
|
}
|
|
}
|
|
let fontFamilyName = nameTokens.join(" ");
|
|
if (!valid) {
|
|
fontFamilyName = `"${fontFamilyName.replace(/[\\"]/g, "\\$&")}"`;
|
|
}
|
|
return fontFamilyName;
|
|
}
|
|
const validURICharactersRegex = /^[0-9A-Za-z%:/?#\[\]@!\$&'()\*\+,;=\-._~]*$/;
|
|
function encodeURIWhenNeeded(uri) {
|
|
if (validURICharactersRegex.test(uri)) {
|
|
return uri;
|
|
}
|
|
return encodeURI(uri);
|
|
}
|
|
const loadWebFont = {
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.Low
|
|
},
|
|
name: "loadWebFont",
|
|
test(url) {
|
|
return checkDataUrl(url, validFontMIMEs) || checkExtension(url, validFontExtensions);
|
|
},
|
|
async load(url, options) {
|
|
var _a, _b, _c, _d, _e, _f;
|
|
const fonts = DOMAdapter.get().getFontFaceSet();
|
|
if (fonts) {
|
|
const fontFaces = [];
|
|
const name = (_b = (_a = options.data) == null ? void 0 : _a.family) != null ? _b : getFontFamilyName(url);
|
|
const weights = (_e = (_d = (_c = options.data) == null ? void 0 : _c.weights) == null ? void 0 : _d.filter((weight) => validWeights.includes(weight))) != null ? _e : ["normal"];
|
|
const data = (_f = options.data) != null ? _f : {};
|
|
for (let i = 0; i < weights.length; i++) {
|
|
const weight = weights[i];
|
|
const font = new FontFace(name, `url(${encodeURIWhenNeeded(url)})`, __spreadProps$i(__spreadValues$C({}, data), {
|
|
weight
|
|
}));
|
|
await font.load();
|
|
fonts.add(font);
|
|
fontFaces.push(font);
|
|
}
|
|
Cache.set(`${name}-and-url`, {
|
|
url,
|
|
fontFaces
|
|
});
|
|
return fontFaces.length === 1 ? fontFaces[0] : fontFaces;
|
|
}
|
|
warn("[loadWebFont] FontFace API is not supported. Skipping loading font");
|
|
return null;
|
|
},
|
|
unload(font) {
|
|
(Array.isArray(font) ? font : [font]).forEach((t) => {
|
|
Cache.remove(t.family);
|
|
DOMAdapter.get().getFontFaceSet().delete(t);
|
|
});
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
function getResolutionOfUrl(url, defaultValue = 1) {
|
|
var _a;
|
|
const resolution = (_a = Resolver.RETINA_PREFIX) == null ? void 0 : _a.exec(url);
|
|
if (resolution) {
|
|
return parseFloat(resolution[1]);
|
|
}
|
|
return defaultValue;
|
|
}
|
|
|
|
"use strict";
|
|
function createTexture(source, loader, url) {
|
|
source.label = url;
|
|
source._sourceOrigin = url;
|
|
const texture = new Texture({
|
|
source,
|
|
label: url
|
|
});
|
|
const unload = () => {
|
|
delete loader.promiseCache[url];
|
|
if (Cache.has(url)) {
|
|
Cache.remove(url);
|
|
}
|
|
};
|
|
texture.source.once("destroy", () => {
|
|
if (loader.promiseCache[url]) {
|
|
warn("[Assets] A TextureSource managed by Assets was destroyed instead of unloaded! Use Assets.unload() instead of destroying the TextureSource.");
|
|
unload();
|
|
}
|
|
});
|
|
texture.once("destroy", () => {
|
|
if (!source.destroyed) {
|
|
warn("[Assets] A Texture managed by Assets was destroyed instead of unloaded! Use Assets.unload() instead of destroying the Texture.");
|
|
unload();
|
|
}
|
|
});
|
|
return texture;
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$B = Object.defineProperty;
|
|
var __getOwnPropSymbols$B = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$B = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$B = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$B = (obj, key, value) => key in obj ? __defProp$B(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$B = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$B.call(b, prop))
|
|
__defNormalProp$B(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$B)
|
|
for (var prop of __getOwnPropSymbols$B(b)) {
|
|
if (__propIsEnum$B.call(b, prop))
|
|
__defNormalProp$B(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$g = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$B.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$B)
|
|
for (var prop of __getOwnPropSymbols$B(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$B.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
const validSVGExtension = ".svg";
|
|
const validSVGMIME = "image/svg+xml";
|
|
const loadSvg = {
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.Low,
|
|
name: "loadSVG"
|
|
},
|
|
name: "loadSVG",
|
|
config: {
|
|
crossOrigin: "anonymous",
|
|
parseAsGraphicsContext: false
|
|
},
|
|
test(url) {
|
|
return checkDataUrl(url, validSVGMIME) || checkExtension(url, validSVGExtension);
|
|
},
|
|
async load(url, asset, loader) {
|
|
var _a;
|
|
if ((_a = asset.data.parseAsGraphicsContext) != null ? _a : this.config.parseAsGraphicsContext) {
|
|
return loadAsGraphics(url);
|
|
}
|
|
return loadAsTexture(url, asset, loader, this.config.crossOrigin);
|
|
},
|
|
unload(asset) {
|
|
asset.destroy(true);
|
|
}
|
|
};
|
|
async function loadAsTexture(url, asset, loader, crossOrigin) {
|
|
var _a, _b, _c, _d, _e;
|
|
const response = await DOMAdapter.get().fetch(url);
|
|
const blob = await response.blob();
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
const image = new Image();
|
|
image.src = blobUrl;
|
|
image.crossOrigin = crossOrigin;
|
|
await image.decode();
|
|
URL.revokeObjectURL(blobUrl);
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("2d");
|
|
const resolution = ((_a = asset.data) == null ? void 0 : _a.resolution) || getResolutionOfUrl(url);
|
|
const width = (_c = (_b = asset.data) == null ? void 0 : _b.width) != null ? _c : image.width;
|
|
const height = (_e = (_d = asset.data) == null ? void 0 : _d.height) != null ? _e : image.height;
|
|
canvas.width = width * resolution;
|
|
canvas.height = height * resolution;
|
|
context.drawImage(image, 0, 0, width * resolution, height * resolution);
|
|
const _f = asset.data, { parseAsGraphicsContext: _p } = _f, rest = __objRest$g(_f, ["parseAsGraphicsContext"]);
|
|
const base = new ImageSource(__spreadValues$B({
|
|
resource: canvas,
|
|
alphaMode: "premultiply-alpha-on-upload",
|
|
resolution
|
|
}, rest));
|
|
return createTexture(base, loader, url);
|
|
}
|
|
async function loadAsGraphics(url) {
|
|
const response = await DOMAdapter.get().fetch(url);
|
|
const svgSource = await response.text();
|
|
const context = new GraphicsContext();
|
|
context.svg(svgSource);
|
|
return context;
|
|
}
|
|
|
|
const WORKER_CODE$3 = "(function () {\n 'use strict';\n\n const WHITE_PNG = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=\";\n async function checkImageBitmap() {\n try {\n if (typeof createImageBitmap !== \"function\")\n return false;\n const response = await fetch(WHITE_PNG);\n const imageBlob = await response.blob();\n const imageBitmap = await createImageBitmap(imageBlob);\n return imageBitmap.width === 1 && imageBitmap.height === 1;\n } catch (e) {\n return false;\n }\n }\n void checkImageBitmap().then((result) => {\n self.postMessage(result);\n });\n\n})();\n";
|
|
let WORKER_URL$3 = null;
|
|
let WorkerInstance$3 = class WorkerInstance
|
|
{
|
|
constructor()
|
|
{
|
|
if (!WORKER_URL$3)
|
|
{
|
|
WORKER_URL$3 = URL.createObjectURL(new Blob([WORKER_CODE$3], { type: 'application/javascript' }));
|
|
}
|
|
this.worker = new Worker(WORKER_URL$3);
|
|
}
|
|
};
|
|
WorkerInstance$3.revokeObjectURL = function revokeObjectURL()
|
|
{
|
|
if (WORKER_URL$3)
|
|
{
|
|
URL.revokeObjectURL(WORKER_URL$3);
|
|
WORKER_URL$3 = null;
|
|
}
|
|
};
|
|
|
|
const WORKER_CODE$2 = "(function () {\n 'use strict';\n\n async function loadImageBitmap(url, alphaMode) {\n const response = await fetch(url);\n if (!response.ok) {\n throw new Error(`[WorkerManager.loadImageBitmap] Failed to fetch ${url}: ${response.status} ${response.statusText}`);\n }\n const imageBlob = await response.blob();\n return alphaMode === \"premultiplied-alpha\" ? createImageBitmap(imageBlob, { premultiplyAlpha: \"none\" }) : createImageBitmap(imageBlob);\n }\n self.onmessage = async (event) => {\n try {\n const imageBitmap = await loadImageBitmap(event.data.data[0], event.data.data[1]);\n self.postMessage({\n data: imageBitmap,\n uuid: event.data.uuid,\n id: event.data.id\n }, [imageBitmap]);\n } catch (e) {\n self.postMessage({\n error: e,\n uuid: event.data.uuid,\n id: event.data.id\n });\n }\n };\n\n})();\n";
|
|
let WORKER_URL$2 = null;
|
|
let WorkerInstance$2 = class WorkerInstance
|
|
{
|
|
constructor()
|
|
{
|
|
if (!WORKER_URL$2)
|
|
{
|
|
WORKER_URL$2 = URL.createObjectURL(new Blob([WORKER_CODE$2], { type: 'application/javascript' }));
|
|
}
|
|
this.worker = new Worker(WORKER_URL$2);
|
|
}
|
|
};
|
|
WorkerInstance$2.revokeObjectURL = function revokeObjectURL()
|
|
{
|
|
if (WORKER_URL$2)
|
|
{
|
|
URL.revokeObjectURL(WORKER_URL$2);
|
|
WORKER_URL$2 = null;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
let UUID = 0;
|
|
let MAX_WORKERS;
|
|
class WorkerManagerClass {
|
|
constructor() {
|
|
this._initialized = false;
|
|
this._createdWorkers = 0;
|
|
this._workerPool = [];
|
|
this._queue = [];
|
|
this._resolveHash = {};
|
|
}
|
|
isImageBitmapSupported() {
|
|
if (this._isImageBitmapSupported !== void 0)
|
|
return this._isImageBitmapSupported;
|
|
this._isImageBitmapSupported = new Promise((resolve) => {
|
|
const { worker } = new WorkerInstance$3();
|
|
worker.addEventListener("message", (event) => {
|
|
worker.terminate();
|
|
WorkerInstance$3.revokeObjectURL();
|
|
resolve(event.data);
|
|
});
|
|
});
|
|
return this._isImageBitmapSupported;
|
|
}
|
|
loadImageBitmap(src, asset) {
|
|
var _a;
|
|
return this._run("loadImageBitmap", [src, (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.alphaMode]);
|
|
}
|
|
async _initWorkers() {
|
|
if (this._initialized)
|
|
return;
|
|
this._initialized = true;
|
|
}
|
|
_getWorker() {
|
|
if (MAX_WORKERS === void 0) {
|
|
MAX_WORKERS = navigator.hardwareConcurrency || 4;
|
|
}
|
|
let worker = this._workerPool.pop();
|
|
if (!worker && this._createdWorkers < MAX_WORKERS) {
|
|
this._createdWorkers++;
|
|
worker = new WorkerInstance$2().worker;
|
|
worker.addEventListener("message", (event) => {
|
|
this._complete(event.data);
|
|
this._returnWorker(event.target);
|
|
this._next();
|
|
});
|
|
}
|
|
return worker;
|
|
}
|
|
_returnWorker(worker) {
|
|
this._workerPool.push(worker);
|
|
}
|
|
_complete(data) {
|
|
if (data.error !== void 0) {
|
|
this._resolveHash[data.uuid].reject(data.error);
|
|
} else {
|
|
this._resolveHash[data.uuid].resolve(data.data);
|
|
}
|
|
this._resolveHash[data.uuid] = null;
|
|
}
|
|
async _run(id, args) {
|
|
await this._initWorkers();
|
|
const promise = new Promise((resolve, reject) => {
|
|
this._queue.push({ id, arguments: args, resolve, reject });
|
|
});
|
|
this._next();
|
|
return promise;
|
|
}
|
|
_next() {
|
|
if (!this._queue.length)
|
|
return;
|
|
const worker = this._getWorker();
|
|
if (!worker) {
|
|
return;
|
|
}
|
|
const toDo = this._queue.pop();
|
|
const id = toDo.id;
|
|
this._resolveHash[UUID] = { resolve: toDo.resolve, reject: toDo.reject };
|
|
worker.postMessage({
|
|
data: toDo.arguments,
|
|
uuid: UUID++,
|
|
id
|
|
});
|
|
}
|
|
}
|
|
const WorkerManager = new WorkerManagerClass();
|
|
|
|
"use strict";
|
|
var __defProp$A = Object.defineProperty;
|
|
var __getOwnPropSymbols$A = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$A = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$A = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$A = (obj, key, value) => key in obj ? __defProp$A(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$A = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$A.call(b, prop))
|
|
__defNormalProp$A(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$A)
|
|
for (var prop of __getOwnPropSymbols$A(b)) {
|
|
if (__propIsEnum$A.call(b, prop))
|
|
__defNormalProp$A(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const validImageExtensions = [".jpeg", ".jpg", ".png", ".webp", ".avif"];
|
|
const validImageMIMEs = [
|
|
"image/jpeg",
|
|
"image/png",
|
|
"image/webp",
|
|
"image/avif"
|
|
];
|
|
async function loadImageBitmap(url, asset) {
|
|
var _a;
|
|
const response = await DOMAdapter.get().fetch(url);
|
|
if (!response.ok) {
|
|
throw new Error(`[loadImageBitmap] Failed to fetch ${url}: ${response.status} ${response.statusText}`);
|
|
}
|
|
const imageBlob = await response.blob();
|
|
return ((_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.alphaMode) === "premultiplied-alpha" ? createImageBitmap(imageBlob, { premultiplyAlpha: "none" }) : createImageBitmap(imageBlob);
|
|
}
|
|
const loadTextures = {
|
|
name: "loadTextures",
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.High,
|
|
name: "loadTextures"
|
|
},
|
|
config: {
|
|
preferWorkers: true,
|
|
preferCreateImageBitmap: true,
|
|
crossOrigin: "anonymous"
|
|
},
|
|
test(url) {
|
|
return checkDataUrl(url, validImageMIMEs) || checkExtension(url, validImageExtensions);
|
|
},
|
|
async load(url, asset, loader) {
|
|
var _a;
|
|
let src = null;
|
|
if (globalThis.createImageBitmap && this.config.preferCreateImageBitmap) {
|
|
if (this.config.preferWorkers && await WorkerManager.isImageBitmapSupported()) {
|
|
src = await WorkerManager.loadImageBitmap(url, asset);
|
|
} else {
|
|
src = await loadImageBitmap(url, asset);
|
|
}
|
|
} else {
|
|
src = await new Promise((resolve) => {
|
|
src = new Image();
|
|
src.crossOrigin = this.config.crossOrigin;
|
|
src.src = url;
|
|
if (src.complete) {
|
|
resolve(src);
|
|
} else {
|
|
src.onload = () => {
|
|
resolve(src);
|
|
};
|
|
}
|
|
});
|
|
}
|
|
const base = new ImageSource(__spreadValues$A({
|
|
resource: src,
|
|
alphaMode: "premultiply-alpha-on-upload",
|
|
resolution: ((_a = asset.data) == null ? void 0 : _a.resolution) || getResolutionOfUrl(url)
|
|
}, asset.data));
|
|
return createTexture(base, loader, url);
|
|
},
|
|
unload(texture) {
|
|
texture.destroy(true);
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$z = Object.defineProperty;
|
|
var __defProps$h = Object.defineProperties;
|
|
var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$z = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$z = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$z = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$z = (obj, key, value) => key in obj ? __defProp$z(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$z = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$z.call(b, prop))
|
|
__defNormalProp$z(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$z)
|
|
for (var prop of __getOwnPropSymbols$z(b)) {
|
|
if (__propIsEnum$z.call(b, prop))
|
|
__defNormalProp$z(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
|
|
const validVideoExtensions = [".mp4", ".m4v", ".webm", ".ogg", ".ogv", ".h264", ".avi", ".mov"];
|
|
const validVideoMIMEs = validVideoExtensions.map((ext) => `video/${ext.substring(1)}`);
|
|
function crossOrigin(element, url, crossorigin) {
|
|
if (crossorigin === void 0 && !url.startsWith("data:")) {
|
|
element.crossOrigin = determineCrossOrigin(url);
|
|
} else if (crossorigin !== false) {
|
|
element.crossOrigin = typeof crossorigin === "string" ? crossorigin : "anonymous";
|
|
}
|
|
}
|
|
function preloadVideo(element) {
|
|
return new Promise((resolve, reject) => {
|
|
element.addEventListener("canplaythrough", loaded);
|
|
element.addEventListener("error", error);
|
|
element.load();
|
|
function loaded() {
|
|
cleanup();
|
|
resolve();
|
|
}
|
|
function error(err) {
|
|
cleanup();
|
|
reject(err);
|
|
}
|
|
function cleanup() {
|
|
element.removeEventListener("canplaythrough", loaded);
|
|
element.removeEventListener("error", error);
|
|
}
|
|
});
|
|
}
|
|
function determineCrossOrigin(url, loc = globalThis.location) {
|
|
if (url.startsWith("data:")) {
|
|
return "";
|
|
}
|
|
loc = loc || globalThis.location;
|
|
const parsedUrl = new URL(url, document.baseURI);
|
|
if (parsedUrl.hostname !== loc.hostname || parsedUrl.port !== loc.port || parsedUrl.protocol !== loc.protocol) {
|
|
return "anonymous";
|
|
}
|
|
return "";
|
|
}
|
|
const loadVideoTextures = {
|
|
name: "loadVideo",
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
name: "loadVideo"
|
|
},
|
|
test(url) {
|
|
const isValidDataUrl = checkDataUrl(url, validVideoMIMEs);
|
|
const isValidExtension = checkExtension(url, validVideoExtensions);
|
|
return isValidDataUrl || isValidExtension;
|
|
},
|
|
async load(url, asset, loader) {
|
|
var _a, _b;
|
|
const options = __spreadValues$z(__spreadProps$h(__spreadValues$z({}, VideoSource.defaultOptions), {
|
|
resolution: ((_a = asset.data) == null ? void 0 : _a.resolution) || getResolutionOfUrl(url),
|
|
alphaMode: ((_b = asset.data) == null ? void 0 : _b.alphaMode) || await detectVideoAlphaMode()
|
|
}), asset.data);
|
|
const videoElement = document.createElement("video");
|
|
const attributeMap = {
|
|
preload: options.autoLoad !== false ? "auto" : void 0,
|
|
"webkit-playsinline": options.playsinline !== false ? "" : void 0,
|
|
playsinline: options.playsinline !== false ? "" : void 0,
|
|
muted: options.muted === true ? "" : void 0,
|
|
loop: options.loop === true ? "" : void 0,
|
|
autoplay: options.autoPlay !== false ? "" : void 0
|
|
};
|
|
Object.keys(attributeMap).forEach((key) => {
|
|
const value = attributeMap[key];
|
|
if (value !== void 0)
|
|
videoElement.setAttribute(key, value);
|
|
});
|
|
if (options.muted === true) {
|
|
videoElement.muted = true;
|
|
}
|
|
crossOrigin(videoElement, url, options.crossorigin);
|
|
const sourceElement = document.createElement("source");
|
|
let mime;
|
|
if (url.startsWith("data:")) {
|
|
mime = url.slice(5, url.indexOf(";"));
|
|
} else if (!url.startsWith("blob:")) {
|
|
const ext = url.split("?")[0].slice(url.lastIndexOf(".") + 1).toLowerCase();
|
|
mime = VideoSource.MIME_TYPES[ext] || `video/${ext}`;
|
|
}
|
|
sourceElement.src = url;
|
|
if (mime) {
|
|
sourceElement.type = mime;
|
|
}
|
|
return new Promise((resolve) => {
|
|
const onCanPlay = async () => {
|
|
const base = new VideoSource(__spreadProps$h(__spreadValues$z({}, options), { resource: videoElement }));
|
|
videoElement.removeEventListener("canplay", onCanPlay);
|
|
if (asset.data.preload) {
|
|
await preloadVideo(videoElement);
|
|
}
|
|
resolve(createTexture(base, loader, url));
|
|
};
|
|
videoElement.addEventListener("canplay", onCanPlay);
|
|
videoElement.appendChild(sourceElement);
|
|
});
|
|
},
|
|
unload(texture) {
|
|
texture.destroy(true);
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const resolveTextureUrl = {
|
|
extension: {
|
|
type: ExtensionType.ResolveParser,
|
|
name: "resolveTexture"
|
|
},
|
|
test: loadTextures.test,
|
|
parse: (value) => {
|
|
var _a, _b;
|
|
return {
|
|
resolution: parseFloat((_b = (_a = Resolver.RETINA_PREFIX.exec(value)) == null ? void 0 : _a[1]) != null ? _b : "1"),
|
|
format: value.split(".").pop(),
|
|
src: value
|
|
};
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const resolveJsonUrl = {
|
|
extension: {
|
|
type: ExtensionType.ResolveParser,
|
|
priority: -2,
|
|
name: "resolveJson"
|
|
},
|
|
test: (value) => Resolver.RETINA_PREFIX.test(value) && value.endsWith(".json"),
|
|
parse: resolveTextureUrl.parse
|
|
};
|
|
|
|
"use strict";
|
|
class AssetsClass {
|
|
constructor() {
|
|
this._detections = [];
|
|
this._initialized = false;
|
|
this.resolver = new Resolver();
|
|
this.loader = new Loader();
|
|
this.cache = Cache;
|
|
this._backgroundLoader = new BackgroundLoader(this.loader);
|
|
this._backgroundLoader.active = true;
|
|
this.reset();
|
|
}
|
|
/**
|
|
* Best practice is to call this function before any loading commences
|
|
* Initiating is the best time to add any customization to the way things are loaded.
|
|
*
|
|
* you do not need to call this for the Assets class to work, only if you want to set any initial properties
|
|
* @param options - options to initialize the Assets manager with
|
|
*/
|
|
async init(options = {}) {
|
|
var _a, _b, _c;
|
|
if (this._initialized) {
|
|
warn("[Assets]AssetManager already initialized, did you load before calling this Assets.init()?");
|
|
return;
|
|
}
|
|
this._initialized = true;
|
|
if (options.defaultSearchParams) {
|
|
this.resolver.setDefaultSearchParams(options.defaultSearchParams);
|
|
}
|
|
if (options.basePath) {
|
|
this.resolver.basePath = options.basePath;
|
|
}
|
|
if (options.bundleIdentifier) {
|
|
this.resolver.setBundleIdentifier(options.bundleIdentifier);
|
|
}
|
|
if (options.manifest) {
|
|
let manifest = options.manifest;
|
|
if (typeof manifest === "string") {
|
|
manifest = await this.load(manifest);
|
|
}
|
|
this.resolver.addManifest(manifest);
|
|
}
|
|
const resolutionPref = (_b = (_a = options.texturePreference) == null ? void 0 : _a.resolution) != null ? _b : 1;
|
|
const resolution = typeof resolutionPref === "number" ? [resolutionPref] : resolutionPref;
|
|
const formats = await this._detectFormats({
|
|
preferredFormats: (_c = options.texturePreference) == null ? void 0 : _c.format,
|
|
skipDetections: options.skipDetections,
|
|
detections: this._detections
|
|
});
|
|
this.resolver.prefer({
|
|
params: {
|
|
format: formats,
|
|
resolution
|
|
}
|
|
});
|
|
if (options.preferences) {
|
|
this.setPreferences(options.preferences);
|
|
}
|
|
}
|
|
/**
|
|
* Allows you to specify how to resolve any assets load requests.
|
|
* There are a few ways to add things here as shown below:
|
|
* @example
|
|
* import { Assets } from 'pixi.js';
|
|
*
|
|
* // Simple
|
|
* Assets.add({alias: 'bunnyBooBoo', src: 'bunny.png'});
|
|
* const bunny = await Assets.load('bunnyBooBoo');
|
|
*
|
|
* // Multiple keys:
|
|
* Assets.add({alias: ['burger', 'chicken'], src: 'bunny.png'});
|
|
*
|
|
* const bunny = await Assets.load('burger');
|
|
* const bunny2 = await Assets.load('chicken');
|
|
*
|
|
* // passing options to to the object
|
|
* Assets.add({
|
|
* alias: 'bunnyBooBooSmooth',
|
|
* src: 'bunny{png,webp}',
|
|
* data: { scaleMode: SCALE_MODES.NEAREST }, // Base texture options
|
|
* });
|
|
*
|
|
* // Multiple assets
|
|
*
|
|
* // The following all do the same thing:
|
|
*
|
|
* Assets.add({alias: 'bunnyBooBoo', src: 'bunny{png,webp}'});
|
|
*
|
|
* Assets.add({
|
|
* alias: 'bunnyBooBoo',
|
|
* src: [
|
|
* 'bunny.png',
|
|
* 'bunny.webp',
|
|
* ],
|
|
* });
|
|
*
|
|
* const bunny = await Assets.load('bunnyBooBoo'); // Will try to load WebP if available
|
|
* @param assets - the unresolved assets to add to the resolver
|
|
*/
|
|
add(assets) {
|
|
this.resolver.add(assets);
|
|
}
|
|
async load(urls, onProgress) {
|
|
if (!this._initialized) {
|
|
await this.init();
|
|
}
|
|
const singleAsset = isSingleItem(urls);
|
|
const urlArray = convertToList(urls).map((url) => {
|
|
if (typeof url !== "string") {
|
|
const aliases = this.resolver.getAlias(url);
|
|
if (aliases.some((alias) => !this.resolver.hasKey(alias))) {
|
|
this.add(url);
|
|
}
|
|
return Array.isArray(aliases) ? aliases[0] : aliases;
|
|
}
|
|
if (!this.resolver.hasKey(url))
|
|
this.add({ alias: url, src: url });
|
|
return url;
|
|
});
|
|
const resolveResults = this.resolver.resolve(urlArray);
|
|
const out = await this._mapLoadToResolve(resolveResults, onProgress);
|
|
return singleAsset ? out[urlArray[0]] : out;
|
|
}
|
|
/**
|
|
* This adds a bundle of assets in one go so that you can load them as a group.
|
|
* For example you could add a bundle for each screen in you pixi app
|
|
* @example
|
|
* import { Assets } from 'pixi.js';
|
|
*
|
|
* Assets.addBundle('animals', [
|
|
* { alias: 'bunny', src: 'bunny.png' },
|
|
* { alias: 'chicken', src: 'chicken.png' },
|
|
* { alias: 'thumper', src: 'thumper.png' },
|
|
* ]);
|
|
* // or
|
|
* Assets.addBundle('animals', {
|
|
* bunny: 'bunny.png',
|
|
* chicken: 'chicken.png',
|
|
* thumper: 'thumper.png',
|
|
* });
|
|
*
|
|
* const assets = await Assets.loadBundle('animals');
|
|
* @param bundleId - the id of the bundle to add
|
|
* @param assets - a record of the asset or assets that will be chosen from when loading via the specified key
|
|
*/
|
|
addBundle(bundleId, assets) {
|
|
this.resolver.addBundle(bundleId, assets);
|
|
}
|
|
/**
|
|
* Bundles are a way to load multiple assets at once.
|
|
* If a manifest has been provided to the init function then you can load a bundle, or bundles.
|
|
* you can also add bundles via `addBundle`
|
|
* @example
|
|
* import { Assets } from 'pixi.js';
|
|
*
|
|
* // Manifest Example
|
|
* const manifest = {
|
|
* bundles: [
|
|
* {
|
|
* name: 'load-screen',
|
|
* assets: [
|
|
* {
|
|
* alias: 'background',
|
|
* src: 'sunset.png',
|
|
* },
|
|
* {
|
|
* alias: 'bar',
|
|
* src: 'load-bar.{png,webp}',
|
|
* },
|
|
* ],
|
|
* },
|
|
* {
|
|
* name: 'game-screen',
|
|
* assets: [
|
|
* {
|
|
* alias: 'character',
|
|
* src: 'robot.png',
|
|
* },
|
|
* {
|
|
* alias: 'enemy',
|
|
* src: 'bad-guy.png',
|
|
* },
|
|
* ],
|
|
* },
|
|
* ]
|
|
* };
|
|
*
|
|
* await Assets.init({ manifest });
|
|
*
|
|
* // Load a bundle...
|
|
* loadScreenAssets = await Assets.loadBundle('load-screen');
|
|
* // Load another bundle...
|
|
* gameScreenAssets = await Assets.loadBundle('game-screen');
|
|
* @param bundleIds - the bundle id or ids to load
|
|
* @param onProgress - Optional function that is called when progress on asset loading is made.
|
|
* The function is passed a single parameter, `progress`, which represents the percentage (0.0 - 1.0)
|
|
* of the assets loaded. Do not use this function to detect when assets are complete and available,
|
|
* instead use the Promise returned by this function.
|
|
* @returns all the bundles assets or a hash of assets for each bundle specified
|
|
*/
|
|
async loadBundle(bundleIds, onProgress) {
|
|
if (!this._initialized) {
|
|
await this.init();
|
|
}
|
|
let singleAsset = false;
|
|
if (typeof bundleIds === "string") {
|
|
singleAsset = true;
|
|
bundleIds = [bundleIds];
|
|
}
|
|
const resolveResults = this.resolver.resolveBundle(bundleIds);
|
|
const out = {};
|
|
const keys = Object.keys(resolveResults);
|
|
let count = 0;
|
|
let total = 0;
|
|
const _onProgress = () => {
|
|
onProgress == null ? void 0 : onProgress(++count / total);
|
|
};
|
|
const promises = keys.map((bundleId) => {
|
|
const resolveResult = resolveResults[bundleId];
|
|
total += Object.keys(resolveResult).length;
|
|
return this._mapLoadToResolve(resolveResult, _onProgress).then((resolveResult2) => {
|
|
out[bundleId] = resolveResult2;
|
|
});
|
|
});
|
|
await Promise.all(promises);
|
|
return singleAsset ? out[bundleIds[0]] : out;
|
|
}
|
|
/**
|
|
* Initiate a background load of some assets. It will passively begin to load these assets in the background.
|
|
* So when you actually come to loading them you will get a promise that resolves to the loaded assets immediately
|
|
*
|
|
* An example of this might be that you would background load game assets after your initial load.
|
|
* then when you got to actually load your game screen assets when a player goes to the game - the loading
|
|
* would already have stared or may even be complete, saving you having to show an interim load bar.
|
|
* @example
|
|
* import { Assets } from 'pixi.js';
|
|
*
|
|
* Assets.backgroundLoad('bunny.png');
|
|
*
|
|
* // later on in your app...
|
|
* await Assets.loadBundle('bunny.png'); // Will resolve quicker as loading may have completed!
|
|
* @param urls - the url / urls you want to background load
|
|
*/
|
|
async backgroundLoad(urls) {
|
|
if (!this._initialized) {
|
|
await this.init();
|
|
}
|
|
if (typeof urls === "string") {
|
|
urls = [urls];
|
|
}
|
|
const resolveResults = this.resolver.resolve(urls);
|
|
this._backgroundLoader.add(Object.values(resolveResults));
|
|
}
|
|
/**
|
|
* Initiate a background of a bundle, works exactly like backgroundLoad but for bundles.
|
|
* this can only be used if the loader has been initiated with a manifest
|
|
* @example
|
|
* import { Assets } from 'pixi.js';
|
|
*
|
|
* await Assets.init({
|
|
* manifest: {
|
|
* bundles: [
|
|
* {
|
|
* name: 'load-screen',
|
|
* assets: [...],
|
|
* },
|
|
* ...
|
|
* ],
|
|
* },
|
|
* });
|
|
*
|
|
* Assets.backgroundLoadBundle('load-screen');
|
|
*
|
|
* // Later on in your app...
|
|
* await Assets.loadBundle('load-screen'); // Will resolve quicker as loading may have completed!
|
|
* @param bundleIds - the bundleId / bundleIds you want to background load
|
|
*/
|
|
async backgroundLoadBundle(bundleIds) {
|
|
if (!this._initialized) {
|
|
await this.init();
|
|
}
|
|
if (typeof bundleIds === "string") {
|
|
bundleIds = [bundleIds];
|
|
}
|
|
const resolveResults = this.resolver.resolveBundle(bundleIds);
|
|
Object.values(resolveResults).forEach((resolveResult) => {
|
|
this._backgroundLoader.add(Object.values(resolveResult));
|
|
});
|
|
}
|
|
/**
|
|
* Only intended for development purposes.
|
|
* This will wipe the resolver and caches.
|
|
* You will need to reinitialize the Asset
|
|
*/
|
|
reset() {
|
|
this.resolver.reset();
|
|
this.loader.reset();
|
|
this.cache.reset();
|
|
this._initialized = false;
|
|
}
|
|
get(keys) {
|
|
if (typeof keys === "string") {
|
|
return Cache.get(keys);
|
|
}
|
|
const assets = {};
|
|
for (let i = 0; i < keys.length; i++) {
|
|
assets[i] = Cache.get(keys[i]);
|
|
}
|
|
return assets;
|
|
}
|
|
/**
|
|
* helper function to map resolved assets back to loaded assets
|
|
* @param resolveResults - the resolve results from the resolver
|
|
* @param onProgress - the progress callback
|
|
*/
|
|
async _mapLoadToResolve(resolveResults, onProgress) {
|
|
const resolveArray = [...new Set(Object.values(resolveResults))];
|
|
this._backgroundLoader.active = false;
|
|
const loadedAssets = await this.loader.load(resolveArray, onProgress);
|
|
this._backgroundLoader.active = true;
|
|
const out = {};
|
|
resolveArray.forEach((resolveResult) => {
|
|
const asset = loadedAssets[resolveResult.src];
|
|
const keys = [resolveResult.src];
|
|
if (resolveResult.alias) {
|
|
keys.push(...resolveResult.alias);
|
|
}
|
|
keys.forEach((key) => {
|
|
out[key] = asset;
|
|
});
|
|
Cache.set(keys, asset);
|
|
});
|
|
return out;
|
|
}
|
|
/**
|
|
* Unload an asset or assets. As the Assets class is responsible for creating the assets via the `load` function
|
|
* this will make sure to destroy any assets and release them from memory.
|
|
* Once unloaded, you will need to load the asset again.
|
|
*
|
|
* Use this to help manage assets if you find that you have a large app and you want to free up memory.
|
|
*
|
|
* - it's up to you as the developer to make sure that textures are not actively being used when you unload them,
|
|
* Pixi won't break but you will end up with missing assets. Not a good look for the user!
|
|
* @example
|
|
* import { Assets } from 'pixi.js';
|
|
*
|
|
* // Load a URL:
|
|
* const myImageTexture = await Assets.load('http://some.url.com/image.png'); // => returns a texture
|
|
*
|
|
* await Assets.unload('http://some.url.com/image.png')
|
|
*
|
|
* // myImageTexture will be destroyed now.
|
|
*
|
|
* // Unload multiple assets:
|
|
* const textures = await Assets.unload(['thumper', 'chicko']);
|
|
* @param urls - the urls to unload
|
|
*/
|
|
async unload(urls) {
|
|
if (!this._initialized) {
|
|
await this.init();
|
|
}
|
|
const urlArray = convertToList(urls).map((url) => typeof url !== "string" ? url.src : url);
|
|
const resolveResults = this.resolver.resolve(urlArray);
|
|
await this._unloadFromResolved(resolveResults);
|
|
}
|
|
/**
|
|
* Bundles are a way to manage multiple assets at once.
|
|
* this will unload all files in a bundle.
|
|
*
|
|
* once a bundle has been unloaded, you need to load it again to have access to the assets.
|
|
* @example
|
|
* import { Assets } from 'pixi.js';
|
|
*
|
|
* Assets.addBundle({
|
|
* 'thumper': 'http://some.url.com/thumper.png',
|
|
* })
|
|
*
|
|
* const assets = await Assets.loadBundle('thumper');
|
|
*
|
|
* // Now to unload...
|
|
*
|
|
* await Assets.unloadBundle('thumper');
|
|
*
|
|
* // All assets in the assets object will now have been destroyed and purged from the cache
|
|
* @param bundleIds - the bundle id or ids to unload
|
|
*/
|
|
async unloadBundle(bundleIds) {
|
|
if (!this._initialized) {
|
|
await this.init();
|
|
}
|
|
bundleIds = convertToList(bundleIds);
|
|
const resolveResults = this.resolver.resolveBundle(bundleIds);
|
|
const promises = Object.keys(resolveResults).map((bundleId) => this._unloadFromResolved(resolveResults[bundleId]));
|
|
await Promise.all(promises);
|
|
}
|
|
async _unloadFromResolved(resolveResult) {
|
|
const resolveArray = Object.values(resolveResult);
|
|
resolveArray.forEach((resolveResult2) => {
|
|
Cache.remove(resolveResult2.src);
|
|
});
|
|
await this.loader.unload(resolveArray);
|
|
}
|
|
/**
|
|
* Detects the supported formats for the browser, and returns an array of supported formats, respecting
|
|
* the users preferred formats order.
|
|
* @param options - the options to use when detecting formats
|
|
* @param options.preferredFormats - the preferred formats to use
|
|
* @param options.skipDetections - if we should skip the detections altogether
|
|
* @param options.detections - the detections to use
|
|
* @returns - the detected formats
|
|
*/
|
|
async _detectFormats(options) {
|
|
let formats = [];
|
|
if (options.preferredFormats) {
|
|
formats = Array.isArray(options.preferredFormats) ? options.preferredFormats : [options.preferredFormats];
|
|
}
|
|
for (const detection of options.detections) {
|
|
if (options.skipDetections || await detection.test()) {
|
|
formats = await detection.add(formats);
|
|
} else if (!options.skipDetections) {
|
|
formats = await detection.remove(formats);
|
|
}
|
|
}
|
|
formats = formats.filter((format, index) => formats.indexOf(format) === index);
|
|
return formats;
|
|
}
|
|
/** All the detection parsers currently added to the Assets class. */
|
|
get detections() {
|
|
return this._detections;
|
|
}
|
|
/**
|
|
* General setter for preferences. This is a helper function to set preferences on all parsers.
|
|
* @param preferences - the preferences to set
|
|
*/
|
|
setPreferences(preferences) {
|
|
this.loader.parsers.forEach((parser) => {
|
|
if (!parser.config)
|
|
return;
|
|
Object.keys(parser.config).filter((key) => key in preferences).forEach((key) => {
|
|
parser.config[key] = preferences[key];
|
|
});
|
|
});
|
|
}
|
|
}
|
|
const Assets = new AssetsClass();
|
|
extensions.handleByList(ExtensionType.LoadParser, Assets.loader.parsers).handleByList(ExtensionType.ResolveParser, Assets.resolver.parsers).handleByList(ExtensionType.CacheParser, Assets.cache.parsers).handleByList(ExtensionType.DetectionParser, Assets.detections);
|
|
extensions.add(
|
|
cacheTextureArray,
|
|
detectDefaults,
|
|
detectAvif,
|
|
detectWebp,
|
|
detectMp4,
|
|
detectOgv,
|
|
detectWebm,
|
|
loadJson,
|
|
loadTxt,
|
|
loadWebFont,
|
|
loadSvg,
|
|
loadTextures,
|
|
loadVideoTextures,
|
|
loadBitmapFont,
|
|
bitmapFontCachePlugin,
|
|
resolveTextureUrl,
|
|
resolveJsonUrl
|
|
);
|
|
const assetKeyMap = {
|
|
loader: ExtensionType.LoadParser,
|
|
resolver: ExtensionType.ResolveParser,
|
|
cache: ExtensionType.CacheParser,
|
|
detection: ExtensionType.DetectionParser
|
|
};
|
|
extensions.handle(ExtensionType.Asset, (extension) => {
|
|
const ref = extension.ref;
|
|
Object.entries(assetKeyMap).filter(([key]) => !!ref[key]).forEach(([key, type]) => {
|
|
var _a;
|
|
return extensions.add(Object.assign(
|
|
ref[key],
|
|
// Allow the function to optionally define it's own
|
|
// ExtensionMetadata, the use cases here is priority for LoaderParsers
|
|
{ extension: (_a = ref[key].extension) != null ? _a : type }
|
|
));
|
|
});
|
|
}, (extension) => {
|
|
const ref = extension.ref;
|
|
Object.keys(assetKeyMap).filter((key) => !!ref[key]).forEach((key) => extensions.remove(ref[key]));
|
|
});
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
const detectBasis = {
|
|
extension: {
|
|
type: ExtensionType.DetectionParser,
|
|
priority: 3
|
|
},
|
|
test: async () => {
|
|
if (await isWebGPUSupported())
|
|
return true;
|
|
if (isWebGLSupported())
|
|
return true;
|
|
return false;
|
|
},
|
|
add: async (formats) => [...formats, "basis"],
|
|
remove: async (formats) => formats.filter((f) => f !== "basis")
|
|
};
|
|
|
|
"use strict";
|
|
class CompressedSource extends TextureSource {
|
|
constructor(options) {
|
|
super(options);
|
|
this.uploadMethodId = "compressed";
|
|
this.resource = options.resource;
|
|
this.mipLevelCount = this.resource.length;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
let supportedGLCompressedTextureFormats;
|
|
function getSupportedGlCompressedTextureFormats() {
|
|
if (supportedGLCompressedTextureFormats)
|
|
return supportedGLCompressedTextureFormats;
|
|
const canvas = document.createElement("canvas");
|
|
const gl = canvas.getContext("webgl");
|
|
if (!gl) {
|
|
return [];
|
|
}
|
|
supportedGLCompressedTextureFormats = [
|
|
// BC compressed formats usable if "texture-compression-bc" is both
|
|
// supported by the device/user agent and enabled in requestDevice.
|
|
// 'bc6h-rgb-ufloat'
|
|
// 'bc6h-rgb-float'
|
|
// 'bc7-rgba-unorm',
|
|
// 'bc7-rgba-unorm-srgb',
|
|
...gl.getExtension("EXT_texture_compression_bptc") ? [
|
|
"bc6h-rgb-ufloat",
|
|
"bc6h-rgb-float",
|
|
"bc7-rgba-unorm",
|
|
"bc7-rgba-unorm-srgb"
|
|
] : [],
|
|
// BC compressed formats usable if "texture-compression-bc" is both
|
|
// supported by the device/user agent and enabled in requestDevice.
|
|
// 'bc1-rgba-unorm',
|
|
// 'bc1-rgba-unorm-srgb',
|
|
// 'bc4-r-unorm'
|
|
// 'bc4-r-snorm'
|
|
// 'bc5-rg-unorm'
|
|
// 'bc5-rg-snorm'
|
|
...gl.getExtension("WEBGL_compressed_texture_s3tc") ? [
|
|
"bc1-rgba-unorm",
|
|
"bc2-rgba-unorm",
|
|
"bc3-rgba-unorm"
|
|
] : [],
|
|
...gl.getExtension("WEBGL_compressed_texture_s3tc_srgb") ? [
|
|
"bc1-rgba-unorm-srgb",
|
|
"bc2-rgba-unorm-srgb",
|
|
"bc3-rgba-unorm-srgb"
|
|
] : [],
|
|
...gl.getExtension("EXT_texture_compression_rgtc") ? [
|
|
"bc4-r-unorm",
|
|
"bc4-r-snorm",
|
|
"bc5-rg-unorm",
|
|
"bc5-rg-snorm"
|
|
] : [],
|
|
// ETC2 compressed formats usable if "texture-compression-etc2" is both
|
|
// supported by the device/user agent and enabled in requestDevice.
|
|
...gl.getExtension("WEBGL_compressed_texture_etc") ? [
|
|
"etc2-rgb8unorm",
|
|
"etc2-rgb8unorm-srgb",
|
|
"etc2-rgba8unorm",
|
|
"etc2-rgba8unorm-srgb",
|
|
"etc2-rgb8a1unorm",
|
|
"etc2-rgb8a1unorm-srgb",
|
|
"eac-r11unorm",
|
|
"eac-rg11unorm"
|
|
] : [],
|
|
// 'eac-r11snorm',
|
|
// 'eac-rg11snorm',
|
|
// ASTC compressed formats usable if "texture-compression-astc" is both
|
|
// supported by the device/user agent and enabled in requestDevice.
|
|
...gl.getExtension("WEBGL_compressed_texture_astc") ? [
|
|
"astc-4x4-unorm",
|
|
"astc-4x4-unorm-srgb",
|
|
"astc-5x4-unorm",
|
|
"astc-5x4-unorm-srgb",
|
|
"astc-5x5-unorm",
|
|
"astc-5x5-unorm-srgb",
|
|
"astc-6x5-unorm",
|
|
"astc-6x5-unorm-srgb",
|
|
"astc-6x6-unorm",
|
|
"astc-6x6-unorm-srgb",
|
|
"astc-8x5-unorm",
|
|
"astc-8x5-unorm-srgb",
|
|
"astc-8x6-unorm",
|
|
"astc-8x6-unorm-srgb",
|
|
"astc-8x8-unorm",
|
|
"astc-8x8-unorm-srgb",
|
|
"astc-10x5-unorm",
|
|
"astc-10x5-unorm-srgb",
|
|
"astc-10x6-unorm",
|
|
"astc-10x6-unorm-srgb",
|
|
"astc-10x8-unorm",
|
|
"astc-10x8-unorm-srgb",
|
|
"astc-10x10-unorm",
|
|
"astc-10x10-unorm-srgb",
|
|
"astc-12x10-unorm",
|
|
"astc-12x10-unorm-srgb",
|
|
"astc-12x12-unorm",
|
|
"astc-12x12-unorm-srgb"
|
|
] : []
|
|
];
|
|
return supportedGLCompressedTextureFormats;
|
|
}
|
|
|
|
"use strict";
|
|
let supportedGPUCompressedTextureFormats;
|
|
async function getSupportedGPUCompressedTextureFormats() {
|
|
if (supportedGPUCompressedTextureFormats)
|
|
return supportedGPUCompressedTextureFormats;
|
|
const adapter = await DOMAdapter.get().getNavigator().gpu.requestAdapter();
|
|
supportedGPUCompressedTextureFormats = [
|
|
...adapter.features.has("texture-compression-bc") ? [
|
|
// BC compressed formats usable if "texture-compression-bc" is both
|
|
// supported by the device/user agent and enabled in requestDevice.
|
|
"bc1-rgba-unorm",
|
|
"bc1-rgba-unorm-srgb",
|
|
"bc2-rgba-unorm",
|
|
"bc2-rgba-unorm-srgb",
|
|
"bc3-rgba-unorm",
|
|
"bc3-rgba-unorm-srgb",
|
|
"bc4-r-unorm",
|
|
"bc4-r-snorm",
|
|
"bc5-rg-unorm",
|
|
"bc5-rg-snorm",
|
|
"bc6h-rgb-ufloat",
|
|
"bc6h-rgb-float",
|
|
"bc7-rgba-unorm",
|
|
"bc7-rgba-unorm-srgb"
|
|
] : [],
|
|
...adapter.features.has("texture-compression-etc2") ? [
|
|
// ETC2 compressed formats usable if "texture-compression-etc2" is both
|
|
// supported by the device/user agent and enabled in requestDevice.
|
|
"etc2-rgb8unorm",
|
|
"etc2-rgb8unorm-srgb",
|
|
"etc2-rgb8a1unorm",
|
|
"etc2-rgb8a1unorm-srgb",
|
|
"etc2-rgba8unorm",
|
|
"etc2-rgba8unorm-srgb",
|
|
"eac-r11unorm",
|
|
"eac-r11snorm",
|
|
"eac-rg11unorm",
|
|
"eac-rg11snorm"
|
|
] : [],
|
|
...adapter.features.has("texture-compression-astc") ? [
|
|
// ASTC compressed formats usable if "texture-compression-astc" is both
|
|
// supported by the device/user agent and enabled in requestDevice.
|
|
"astc-4x4-unorm",
|
|
"astc-4x4-unorm-srgb",
|
|
"astc-5x4-unorm",
|
|
"astc-5x4-unorm-srgb",
|
|
"astc-5x5-unorm",
|
|
"astc-5x5-unorm-srgb",
|
|
"astc-6x5-unorm",
|
|
"astc-6x5-unorm-srgb",
|
|
"astc-6x6-unorm",
|
|
"astc-6x6-unorm-srgb",
|
|
"astc-8x5-unorm",
|
|
"astc-8x5-unorm-srgb",
|
|
"astc-8x6-unorm",
|
|
"astc-8x6-unorm-srgb",
|
|
"astc-8x8-unorm",
|
|
"astc-8x8-unorm-srgb",
|
|
"astc-10x5-unorm",
|
|
"astc-10x5-unorm-srgb",
|
|
"astc-10x6-unorm",
|
|
"astc-10x6-unorm-srgb",
|
|
"astc-10x8-unorm",
|
|
"astc-10x8-unorm-srgb",
|
|
"astc-10x10-unorm",
|
|
"astc-10x10-unorm-srgb",
|
|
"astc-12x10-unorm",
|
|
"astc-12x10-unorm-srgb",
|
|
"astc-12x12-unorm",
|
|
"astc-12x12-unorm-srgb"
|
|
] : []
|
|
];
|
|
return supportedGPUCompressedTextureFormats;
|
|
}
|
|
|
|
"use strict";
|
|
let supportedCompressedTextureFormats;
|
|
async function getSupportedCompressedTextureFormats() {
|
|
if (supportedCompressedTextureFormats !== void 0)
|
|
return supportedCompressedTextureFormats;
|
|
supportedCompressedTextureFormats = await (async () => {
|
|
const _isWebGPUSupported = await isWebGPUSupported();
|
|
const _isWebGLSupported = isWebGLSupported();
|
|
if (_isWebGPUSupported && _isWebGLSupported) {
|
|
const gpuTextureFormats = await getSupportedGPUCompressedTextureFormats();
|
|
const glTextureFormats = getSupportedGlCompressedTextureFormats();
|
|
return gpuTextureFormats.filter((format) => glTextureFormats.includes(format));
|
|
} else if (_isWebGPUSupported) {
|
|
return await getSupportedGPUCompressedTextureFormats();
|
|
} else if (_isWebGLSupported) {
|
|
return getSupportedGlCompressedTextureFormats();
|
|
}
|
|
return [];
|
|
})();
|
|
return supportedCompressedTextureFormats;
|
|
}
|
|
|
|
"use strict";
|
|
const nonCompressedFormats = [
|
|
// 8-bit formats
|
|
"r8unorm",
|
|
"r8snorm",
|
|
"r8uint",
|
|
"r8sint",
|
|
// 16-bit formats
|
|
"r16uint",
|
|
"r16sint",
|
|
"r16float",
|
|
"rg8unorm",
|
|
"rg8snorm",
|
|
"rg8uint",
|
|
"rg8sint",
|
|
// 32-bit formats
|
|
"r32uint",
|
|
"r32sint",
|
|
"r32float",
|
|
"rg16uint",
|
|
"rg16sint",
|
|
"rg16float",
|
|
"rgba8unorm",
|
|
"rgba8unorm-srgb",
|
|
"rgba8snorm",
|
|
"rgba8uint",
|
|
"rgba8sint",
|
|
"bgra8unorm",
|
|
"bgra8unorm-srgb",
|
|
// Packed 32-bit formats
|
|
"rgb9e5ufloat",
|
|
"rgb10a2unorm",
|
|
"rg11b10ufloat",
|
|
// 64-bit formats
|
|
"rg32uint",
|
|
"rg32sint",
|
|
"rg32float",
|
|
"rgba16uint",
|
|
"rgba16sint",
|
|
"rgba16float",
|
|
// 128-bit formats
|
|
"rgba32uint",
|
|
"rgba32sint",
|
|
"rgba32float",
|
|
// Depth/stencil formats
|
|
"stencil8",
|
|
"depth16unorm",
|
|
"depth24plus",
|
|
"depth24plus-stencil8",
|
|
"depth32float",
|
|
// "depth32float-stencil8" feature
|
|
"depth32float-stencil8"
|
|
];
|
|
let supportedTextureFormats;
|
|
async function getSupportedTextureFormats() {
|
|
if (supportedTextureFormats !== void 0)
|
|
return supportedTextureFormats;
|
|
const compressedTextureFormats = await getSupportedCompressedTextureFormats();
|
|
supportedTextureFormats = [
|
|
...nonCompressedFormats,
|
|
...compressedTextureFormats
|
|
];
|
|
return supportedTextureFormats;
|
|
}
|
|
|
|
const WORKER_CODE$1 = "(function () {\n 'use strict';\n\n function createLevelBuffers(basisTexture, basisTranscoderFormat) {\n const images = basisTexture.getNumImages();\n const levels = basisTexture.getNumLevels(0);\n const success = basisTexture.startTranscoding();\n if (!success) {\n throw new Error(\"startTranscoding failed\");\n }\n const levelBuffers = [];\n for (let levelIndex = 0; levelIndex < levels; ++levelIndex) {\n for (let sliceIndex = 0; sliceIndex < images; ++sliceIndex) {\n const transcodeSize = basisTexture.getImageTranscodedSizeInBytes(sliceIndex, levelIndex, basisTranscoderFormat);\n const levelBuffer = new Uint8Array(transcodeSize);\n const success2 = basisTexture.transcodeImage(levelBuffer, sliceIndex, levelIndex, basisTranscoderFormat, 1, 0);\n if (!success2) {\n throw new Error(\"transcodeImage failed\");\n }\n levelBuffers.push(levelBuffer);\n }\n }\n return levelBuffers;\n }\n\n const gpuFormatToBasisTranscoderFormatMap = {\n \"bc3-rgba-unorm\": 3,\n // cTFBC3_RGBA\n \"bc7-rgba-unorm\": 6,\n // cTFBC7_RGBA,\n \"etc2-rgba8unorm\": 1,\n // cTFETC2_RGBA,\n \"astc-4x4-unorm\": 10,\n // cTFASTC_4x4_RGBA,\n // Uncompressed\n rgba8unorm: 13,\n // cTFRGBA32,\n rgba4unorm: 16\n // cTFRGBA4444,\n };\n function gpuFormatToBasisTranscoderFormat(transcoderFormat) {\n const format = gpuFormatToBasisTranscoderFormatMap[transcoderFormat];\n if (format) {\n return format;\n }\n throw new Error(`Unsupported transcoderFormat: ${transcoderFormat}`);\n }\n\n const settings = {\n jsUrl: \"basis/basis_transcoder.js\",\n wasmUrl: \"basis/basis_transcoder.wasm\"\n };\n let basisTranscoderFormat;\n let basisTranscodedTextureFormat;\n let basisPromise;\n async function getBasis() {\n if (!basisPromise) {\n const absoluteJsUrl = new URL(settings.jsUrl, location.origin).href;\n const absoluteWasmUrl = new URL(settings.wasmUrl, location.origin).href;\n importScripts(absoluteJsUrl);\n basisPromise = new Promise((resolve) => {\n BASIS({\n locateFile: (_file) => absoluteWasmUrl\n }).then((module) => {\n module.initializeBasis();\n resolve(module.BasisFile);\n });\n });\n }\n return basisPromise;\n }\n async function fetchBasisTexture(url, BasisTexture) {\n const basisResponse = await fetch(url);\n if (basisResponse.ok) {\n const basisArrayBuffer = await basisResponse.arrayBuffer();\n return new BasisTexture(new Uint8Array(basisArrayBuffer));\n }\n throw new Error(`Failed to load Basis texture: ${url}`);\n }\n const preferredTranscodedFormat = [\n \"bc7-rgba-unorm\",\n \"astc-4x4-unorm\",\n \"etc2-rgba8unorm\",\n \"bc3-rgba-unorm\",\n \"rgba8unorm\"\n ];\n async function load(url) {\n const BasisTexture = await getBasis();\n const basisTexture = await fetchBasisTexture(url, BasisTexture);\n const levelBuffers = createLevelBuffers(basisTexture, basisTranscoderFormat);\n return {\n width: basisTexture.getImageWidth(0, 0),\n height: basisTexture.getImageHeight(0, 0),\n format: basisTranscodedTextureFormat,\n resource: levelBuffers,\n alphaMode: \"no-premultiply-alpha\"\n };\n }\n async function init(jsUrl, wasmUrl, supportedTextures) {\n if (jsUrl)\n settings.jsUrl = jsUrl;\n if (wasmUrl)\n settings.wasmUrl = wasmUrl;\n basisTranscodedTextureFormat = preferredTranscodedFormat.filter((format) => supportedTextures.includes(format))[0];\n basisTranscoderFormat = gpuFormatToBasisTranscoderFormat(basisTranscodedTextureFormat);\n await getBasis();\n }\n const messageHandlers = {\n init: async (data) => {\n const { jsUrl, wasmUrl, supportedTextures } = data;\n await init(jsUrl, wasmUrl, supportedTextures);\n },\n load: async (data) => {\n var _a;\n try {\n const textureOptions = await load(data.url);\n return {\n type: \"load\",\n url: data.url,\n success: true,\n textureOptions,\n transferables: (_a = textureOptions.resource) == null ? void 0 : _a.map((arr) => arr.buffer)\n };\n } catch (e) {\n throw e;\n }\n }\n };\n self.onmessage = async (messageEvent) => {\n const message = messageEvent.data;\n const response = await messageHandlers[message.type](message);\n if (response) {\n self.postMessage(response, response.transferables);\n }\n };\n\n})();\n";
|
|
let WORKER_URL$1 = null;
|
|
let WorkerInstance$1 = class WorkerInstance
|
|
{
|
|
constructor()
|
|
{
|
|
if (!WORKER_URL$1)
|
|
{
|
|
WORKER_URL$1 = URL.createObjectURL(new Blob([WORKER_CODE$1], { type: 'application/javascript' }));
|
|
}
|
|
this.worker = new Worker(WORKER_URL$1);
|
|
}
|
|
};
|
|
WorkerInstance$1.revokeObjectURL = function revokeObjectURL()
|
|
{
|
|
if (WORKER_URL$1)
|
|
{
|
|
URL.revokeObjectURL(WORKER_URL$1);
|
|
WORKER_URL$1 = null;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const basisTranscoderUrls = {
|
|
jsUrl: "https://files.pixijs.download/transcoders/basis/basis_transcoder.js",
|
|
wasmUrl: "https://files.pixijs.download/transcoders/basis/basis_transcoder.wasm"
|
|
};
|
|
function setBasisTranscoderPath(config) {
|
|
Object.assign(basisTranscoderUrls, config);
|
|
}
|
|
|
|
"use strict";
|
|
let basisWorker;
|
|
const urlHash$1 = {};
|
|
function getBasisWorker(supportedTextures) {
|
|
if (!basisWorker) {
|
|
basisWorker = new WorkerInstance$1().worker;
|
|
basisWorker.onmessage = (messageEvent) => {
|
|
const { success, url, textureOptions } = messageEvent.data;
|
|
if (!success) {
|
|
console.warn("Failed to load Basis texture", url);
|
|
}
|
|
urlHash$1[url](textureOptions);
|
|
};
|
|
basisWorker.postMessage({
|
|
type: "init",
|
|
jsUrl: basisTranscoderUrls.jsUrl,
|
|
wasmUrl: basisTranscoderUrls.wasmUrl,
|
|
supportedTextures
|
|
});
|
|
}
|
|
return basisWorker;
|
|
}
|
|
function loadBasisOnWorker(url, supportedTextures) {
|
|
const ktxWorker = getBasisWorker(supportedTextures);
|
|
return new Promise((resolve) => {
|
|
urlHash$1[url] = resolve;
|
|
ktxWorker.postMessage({ type: "load", url });
|
|
});
|
|
}
|
|
|
|
"use strict";
|
|
const loadBasis = {
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.High,
|
|
name: "loadBasis"
|
|
},
|
|
name: "loadBasis",
|
|
test(url) {
|
|
return checkExtension(url, [".basis"]);
|
|
},
|
|
async load(url, _asset, loader) {
|
|
const supportedTextures = await getSupportedTextureFormats();
|
|
const textureOptions = await loadBasisOnWorker(url, supportedTextures);
|
|
const compressedTextureSource = new CompressedSource(textureOptions);
|
|
return createTexture(compressedTextureSource, loader, url);
|
|
},
|
|
unload(texture) {
|
|
if (Array.isArray(texture)) {
|
|
texture.forEach((t) => t.destroy(true));
|
|
} else {
|
|
texture.destroy(true);
|
|
}
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
function createLevelBuffers(basisTexture, basisTranscoderFormat) {
|
|
const images = basisTexture.getNumImages();
|
|
const levels = basisTexture.getNumLevels(0);
|
|
const success = basisTexture.startTranscoding();
|
|
if (!success) {
|
|
throw new Error("startTranscoding failed");
|
|
}
|
|
const levelBuffers = [];
|
|
for (let levelIndex = 0; levelIndex < levels; ++levelIndex) {
|
|
for (let sliceIndex = 0; sliceIndex < images; ++sliceIndex) {
|
|
const transcodeSize = basisTexture.getImageTranscodedSizeInBytes(sliceIndex, levelIndex, basisTranscoderFormat);
|
|
const levelBuffer = new Uint8Array(transcodeSize);
|
|
const success2 = basisTexture.transcodeImage(levelBuffer, sliceIndex, levelIndex, basisTranscoderFormat, 1, 0);
|
|
if (!success2) {
|
|
throw new Error("transcodeImage failed");
|
|
}
|
|
levelBuffers.push(levelBuffer);
|
|
}
|
|
}
|
|
return levelBuffers;
|
|
}
|
|
|
|
"use strict";
|
|
const gpuFormatToBasisTranscoderFormatMap$1 = {
|
|
"bc3-rgba-unorm": 3,
|
|
// cTFBC3_RGBA
|
|
"bc7-rgba-unorm": 6,
|
|
// cTFBC7_RGBA,
|
|
"etc2-rgba8unorm": 1,
|
|
// cTFETC2_RGBA,
|
|
"astc-4x4-unorm": 10,
|
|
// cTFASTC_4x4_RGBA,
|
|
// Uncompressed
|
|
rgba8unorm: 13,
|
|
// cTFRGBA32,
|
|
rgba4unorm: 16
|
|
// cTFRGBA4444,
|
|
};
|
|
function gpuFormatToBasisTranscoderFormat(transcoderFormat) {
|
|
const format = gpuFormatToBasisTranscoderFormatMap$1[transcoderFormat];
|
|
if (format) {
|
|
return format;
|
|
}
|
|
throw new Error(`Unsupported transcoderFormat: ${transcoderFormat}`);
|
|
}
|
|
|
|
"use strict";
|
|
const DDS_HEADER_FIELDS = {
|
|
MAGIC: 0,
|
|
SIZE: 1,
|
|
FLAGS: 2,
|
|
HEIGHT: 3,
|
|
WIDTH: 4,
|
|
MIPMAP_COUNT: 7,
|
|
PIXEL_FORMAT: 19,
|
|
PF_FLAGS: 20,
|
|
FOURCC: 21,
|
|
RGB_BITCOUNT: 22,
|
|
R_BIT_MASK: 23,
|
|
G_BIT_MASK: 24,
|
|
B_BIT_MASK: 25,
|
|
A_BIT_MASK: 26
|
|
};
|
|
const DDS_DX10_FIELDS = {
|
|
DXGI_FORMAT: 0,
|
|
RESOURCE_DIMENSION: 1,
|
|
MISC_FLAG: 2,
|
|
ARRAY_SIZE: 3,
|
|
MISC_FLAGS2: 4
|
|
};
|
|
var DXGI_FORMAT = /* @__PURE__ */ ((DXGI_FORMAT2) => {
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_UNKNOWN"] = 0] = "DXGI_FORMAT_UNKNOWN";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32B32A32_TYPELESS"] = 1] = "DXGI_FORMAT_R32G32B32A32_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32B32A32_FLOAT"] = 2] = "DXGI_FORMAT_R32G32B32A32_FLOAT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32B32A32_UINT"] = 3] = "DXGI_FORMAT_R32G32B32A32_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32B32A32_SINT"] = 4] = "DXGI_FORMAT_R32G32B32A32_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32B32_TYPELESS"] = 5] = "DXGI_FORMAT_R32G32B32_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32B32_FLOAT"] = 6] = "DXGI_FORMAT_R32G32B32_FLOAT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32B32_UINT"] = 7] = "DXGI_FORMAT_R32G32B32_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32B32_SINT"] = 8] = "DXGI_FORMAT_R32G32B32_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16B16A16_TYPELESS"] = 9] = "DXGI_FORMAT_R16G16B16A16_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16B16A16_FLOAT"] = 10] = "DXGI_FORMAT_R16G16B16A16_FLOAT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16B16A16_UNORM"] = 11] = "DXGI_FORMAT_R16G16B16A16_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16B16A16_UINT"] = 12] = "DXGI_FORMAT_R16G16B16A16_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16B16A16_SNORM"] = 13] = "DXGI_FORMAT_R16G16B16A16_SNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16B16A16_SINT"] = 14] = "DXGI_FORMAT_R16G16B16A16_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32_TYPELESS"] = 15] = "DXGI_FORMAT_R32G32_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32_FLOAT"] = 16] = "DXGI_FORMAT_R32G32_FLOAT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32_UINT"] = 17] = "DXGI_FORMAT_R32G32_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G32_SINT"] = 18] = "DXGI_FORMAT_R32G32_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32G8X24_TYPELESS"] = 19] = "DXGI_FORMAT_R32G8X24_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_D32_FLOAT_S8X24_UINT"] = 20] = "DXGI_FORMAT_D32_FLOAT_S8X24_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32_FLOAT_X8X24_TYPELESS"] = 21] = "DXGI_FORMAT_R32_FLOAT_X8X24_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_X32_TYPELESS_G8X24_UINT"] = 22] = "DXGI_FORMAT_X32_TYPELESS_G8X24_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R10G10B10A2_TYPELESS"] = 23] = "DXGI_FORMAT_R10G10B10A2_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R10G10B10A2_UNORM"] = 24] = "DXGI_FORMAT_R10G10B10A2_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R10G10B10A2_UINT"] = 25] = "DXGI_FORMAT_R10G10B10A2_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R11G11B10_FLOAT"] = 26] = "DXGI_FORMAT_R11G11B10_FLOAT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8B8A8_TYPELESS"] = 27] = "DXGI_FORMAT_R8G8B8A8_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8B8A8_UNORM"] = 28] = "DXGI_FORMAT_R8G8B8A8_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8B8A8_UNORM_SRGB"] = 29] = "DXGI_FORMAT_R8G8B8A8_UNORM_SRGB";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8B8A8_UINT"] = 30] = "DXGI_FORMAT_R8G8B8A8_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8B8A8_SNORM"] = 31] = "DXGI_FORMAT_R8G8B8A8_SNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8B8A8_SINT"] = 32] = "DXGI_FORMAT_R8G8B8A8_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16_TYPELESS"] = 33] = "DXGI_FORMAT_R16G16_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16_FLOAT"] = 34] = "DXGI_FORMAT_R16G16_FLOAT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16_UNORM"] = 35] = "DXGI_FORMAT_R16G16_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16_UINT"] = 36] = "DXGI_FORMAT_R16G16_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16_SNORM"] = 37] = "DXGI_FORMAT_R16G16_SNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16G16_SINT"] = 38] = "DXGI_FORMAT_R16G16_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32_TYPELESS"] = 39] = "DXGI_FORMAT_R32_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_D32_FLOAT"] = 40] = "DXGI_FORMAT_D32_FLOAT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32_FLOAT"] = 41] = "DXGI_FORMAT_R32_FLOAT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32_UINT"] = 42] = "DXGI_FORMAT_R32_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R32_SINT"] = 43] = "DXGI_FORMAT_R32_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R24G8_TYPELESS"] = 44] = "DXGI_FORMAT_R24G8_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_D24_UNORM_S8_UINT"] = 45] = "DXGI_FORMAT_D24_UNORM_S8_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R24_UNORM_X8_TYPELESS"] = 46] = "DXGI_FORMAT_R24_UNORM_X8_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_X24_TYPELESS_G8_UINT"] = 47] = "DXGI_FORMAT_X24_TYPELESS_G8_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8_TYPELESS"] = 48] = "DXGI_FORMAT_R8G8_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8_UNORM"] = 49] = "DXGI_FORMAT_R8G8_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8_UINT"] = 50] = "DXGI_FORMAT_R8G8_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8_SNORM"] = 51] = "DXGI_FORMAT_R8G8_SNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8_SINT"] = 52] = "DXGI_FORMAT_R8G8_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16_TYPELESS"] = 53] = "DXGI_FORMAT_R16_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16_FLOAT"] = 54] = "DXGI_FORMAT_R16_FLOAT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_D16_UNORM"] = 55] = "DXGI_FORMAT_D16_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16_UNORM"] = 56] = "DXGI_FORMAT_R16_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16_UINT"] = 57] = "DXGI_FORMAT_R16_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16_SNORM"] = 58] = "DXGI_FORMAT_R16_SNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R16_SINT"] = 59] = "DXGI_FORMAT_R16_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8_TYPELESS"] = 60] = "DXGI_FORMAT_R8_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8_UNORM"] = 61] = "DXGI_FORMAT_R8_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8_UINT"] = 62] = "DXGI_FORMAT_R8_UINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8_SNORM"] = 63] = "DXGI_FORMAT_R8_SNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8_SINT"] = 64] = "DXGI_FORMAT_R8_SINT";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_A8_UNORM"] = 65] = "DXGI_FORMAT_A8_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R1_UNORM"] = 66] = "DXGI_FORMAT_R1_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R9G9B9E5_SHAREDEXP"] = 67] = "DXGI_FORMAT_R9G9B9E5_SHAREDEXP";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R8G8_B8G8_UNORM"] = 68] = "DXGI_FORMAT_R8G8_B8G8_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_G8R8_G8B8_UNORM"] = 69] = "DXGI_FORMAT_G8R8_G8B8_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC1_TYPELESS"] = 70] = "DXGI_FORMAT_BC1_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC1_UNORM"] = 71] = "DXGI_FORMAT_BC1_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC1_UNORM_SRGB"] = 72] = "DXGI_FORMAT_BC1_UNORM_SRGB";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC2_TYPELESS"] = 73] = "DXGI_FORMAT_BC2_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC2_UNORM"] = 74] = "DXGI_FORMAT_BC2_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC2_UNORM_SRGB"] = 75] = "DXGI_FORMAT_BC2_UNORM_SRGB";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC3_TYPELESS"] = 76] = "DXGI_FORMAT_BC3_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC3_UNORM"] = 77] = "DXGI_FORMAT_BC3_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC3_UNORM_SRGB"] = 78] = "DXGI_FORMAT_BC3_UNORM_SRGB";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC4_TYPELESS"] = 79] = "DXGI_FORMAT_BC4_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC4_UNORM"] = 80] = "DXGI_FORMAT_BC4_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC4_SNORM"] = 81] = "DXGI_FORMAT_BC4_SNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC5_TYPELESS"] = 82] = "DXGI_FORMAT_BC5_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC5_UNORM"] = 83] = "DXGI_FORMAT_BC5_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC5_SNORM"] = 84] = "DXGI_FORMAT_BC5_SNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_B5G6R5_UNORM"] = 85] = "DXGI_FORMAT_B5G6R5_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_B5G5R5A1_UNORM"] = 86] = "DXGI_FORMAT_B5G5R5A1_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_B8G8R8A8_UNORM"] = 87] = "DXGI_FORMAT_B8G8R8A8_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_B8G8R8X8_UNORM"] = 88] = "DXGI_FORMAT_B8G8R8X8_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_R10G10B10_XR_BIAS_A2_UNORM"] = 89] = "DXGI_FORMAT_R10G10B10_XR_BIAS_A2_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_B8G8R8A8_TYPELESS"] = 90] = "DXGI_FORMAT_B8G8R8A8_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_B8G8R8A8_UNORM_SRGB"] = 91] = "DXGI_FORMAT_B8G8R8A8_UNORM_SRGB";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_B8G8R8X8_TYPELESS"] = 92] = "DXGI_FORMAT_B8G8R8X8_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_B8G8R8X8_UNORM_SRGB"] = 93] = "DXGI_FORMAT_B8G8R8X8_UNORM_SRGB";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC6H_TYPELESS"] = 94] = "DXGI_FORMAT_BC6H_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC6H_UF16"] = 95] = "DXGI_FORMAT_BC6H_UF16";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC6H_SF16"] = 96] = "DXGI_FORMAT_BC6H_SF16";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC7_TYPELESS"] = 97] = "DXGI_FORMAT_BC7_TYPELESS";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC7_UNORM"] = 98] = "DXGI_FORMAT_BC7_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_BC7_UNORM_SRGB"] = 99] = "DXGI_FORMAT_BC7_UNORM_SRGB";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_AYUV"] = 100] = "DXGI_FORMAT_AYUV";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_Y410"] = 101] = "DXGI_FORMAT_Y410";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_Y416"] = 102] = "DXGI_FORMAT_Y416";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_NV12"] = 103] = "DXGI_FORMAT_NV12";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_P010"] = 104] = "DXGI_FORMAT_P010";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_P016"] = 105] = "DXGI_FORMAT_P016";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_420_OPAQUE"] = 106] = "DXGI_FORMAT_420_OPAQUE";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_YUY2"] = 107] = "DXGI_FORMAT_YUY2";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_Y210"] = 108] = "DXGI_FORMAT_Y210";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_Y216"] = 109] = "DXGI_FORMAT_Y216";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_NV11"] = 110] = "DXGI_FORMAT_NV11";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_AI44"] = 111] = "DXGI_FORMAT_AI44";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_IA44"] = 112] = "DXGI_FORMAT_IA44";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_P8"] = 113] = "DXGI_FORMAT_P8";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_A8P8"] = 114] = "DXGI_FORMAT_A8P8";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_B4G4R4A4_UNORM"] = 115] = "DXGI_FORMAT_B4G4R4A4_UNORM";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_P208"] = 116] = "DXGI_FORMAT_P208";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_V208"] = 117] = "DXGI_FORMAT_V208";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_V408"] = 118] = "DXGI_FORMAT_V408";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_SAMPLER_FEEDBACK_MIN_MIP_OPAQUE"] = 119] = "DXGI_FORMAT_SAMPLER_FEEDBACK_MIN_MIP_OPAQUE";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_SAMPLER_FEEDBACK_MIP_REGION_USED_OPAQUE"] = 120] = "DXGI_FORMAT_SAMPLER_FEEDBACK_MIP_REGION_USED_OPAQUE";
|
|
DXGI_FORMAT2[DXGI_FORMAT2["DXGI_FORMAT_FORCE_UINT"] = 121] = "DXGI_FORMAT_FORCE_UINT";
|
|
return DXGI_FORMAT2;
|
|
})(DXGI_FORMAT || {});
|
|
var D3D10_RESOURCE_DIMENSION = /* @__PURE__ */ ((D3D10_RESOURCE_DIMENSION2) => {
|
|
D3D10_RESOURCE_DIMENSION2[D3D10_RESOURCE_DIMENSION2["DDS_DIMENSION_TEXTURE1D"] = 2] = "DDS_DIMENSION_TEXTURE1D";
|
|
D3D10_RESOURCE_DIMENSION2[D3D10_RESOURCE_DIMENSION2["DDS_DIMENSION_TEXTURE2D"] = 3] = "DDS_DIMENSION_TEXTURE2D";
|
|
D3D10_RESOURCE_DIMENSION2[D3D10_RESOURCE_DIMENSION2["DDS_DIMENSION_TEXTURE3D"] = 6] = "DDS_DIMENSION_TEXTURE3D";
|
|
return D3D10_RESOURCE_DIMENSION2;
|
|
})(D3D10_RESOURCE_DIMENSION || {});
|
|
function fourCCToInt32(value) {
|
|
return value.charCodeAt(0) + (value.charCodeAt(1) << 8) + (value.charCodeAt(2) << 16) + (value.charCodeAt(3) << 24);
|
|
}
|
|
var D3DFMT = ((D3DFMT2) => {
|
|
D3DFMT2[D3DFMT2["UNKNOWN"] = 0] = "UNKNOWN";
|
|
D3DFMT2[D3DFMT2["R8G8B8"] = 20] = "R8G8B8";
|
|
D3DFMT2[D3DFMT2["A8R8G8B8"] = 21] = "A8R8G8B8";
|
|
D3DFMT2[D3DFMT2["X8R8G8B8"] = 22] = "X8R8G8B8";
|
|
D3DFMT2[D3DFMT2["R5G6B5"] = 23] = "R5G6B5";
|
|
D3DFMT2[D3DFMT2["X1R5G5B5"] = 24] = "X1R5G5B5";
|
|
D3DFMT2[D3DFMT2["A1R5G5B5"] = 25] = "A1R5G5B5";
|
|
D3DFMT2[D3DFMT2["A4R4G4B4"] = 26] = "A4R4G4B4";
|
|
D3DFMT2[D3DFMT2["R3G3B2"] = 27] = "R3G3B2";
|
|
D3DFMT2[D3DFMT2["A8"] = 28] = "A8";
|
|
D3DFMT2[D3DFMT2["A8R3G3B2"] = 29] = "A8R3G3B2";
|
|
D3DFMT2[D3DFMT2["X4R4G4B4"] = 30] = "X4R4G4B4";
|
|
D3DFMT2[D3DFMT2["A2B10G10R10"] = 31] = "A2B10G10R10";
|
|
D3DFMT2[D3DFMT2["A8B8G8R8"] = 32] = "A8B8G8R8";
|
|
D3DFMT2[D3DFMT2["X8B8G8R8"] = 33] = "X8B8G8R8";
|
|
D3DFMT2[D3DFMT2["G16R16"] = 34] = "G16R16";
|
|
D3DFMT2[D3DFMT2["A2R10G10B10"] = 35] = "A2R10G10B10";
|
|
D3DFMT2[D3DFMT2["A16B16G16R16"] = 36] = "A16B16G16R16";
|
|
D3DFMT2[D3DFMT2["A8P8"] = 40] = "A8P8";
|
|
D3DFMT2[D3DFMT2["P8"] = 41] = "P8";
|
|
D3DFMT2[D3DFMT2["L8"] = 50] = "L8";
|
|
D3DFMT2[D3DFMT2["A8L8"] = 51] = "A8L8";
|
|
D3DFMT2[D3DFMT2["A4L4"] = 52] = "A4L4";
|
|
D3DFMT2[D3DFMT2["V8U8"] = 60] = "V8U8";
|
|
D3DFMT2[D3DFMT2["L6V5U5"] = 61] = "L6V5U5";
|
|
D3DFMT2[D3DFMT2["X8L8V8U8"] = 62] = "X8L8V8U8";
|
|
D3DFMT2[D3DFMT2["Q8W8V8U8"] = 63] = "Q8W8V8U8";
|
|
D3DFMT2[D3DFMT2["V16U16"] = 64] = "V16U16";
|
|
D3DFMT2[D3DFMT2["A2W10V10U10"] = 67] = "A2W10V10U10";
|
|
D3DFMT2[D3DFMT2["Q16W16V16U16"] = 110] = "Q16W16V16U16";
|
|
D3DFMT2[D3DFMT2["R16F"] = 111] = "R16F";
|
|
D3DFMT2[D3DFMT2["G16R16F"] = 112] = "G16R16F";
|
|
D3DFMT2[D3DFMT2["A16B16G16R16F"] = 113] = "A16B16G16R16F";
|
|
D3DFMT2[D3DFMT2["R32F"] = 114] = "R32F";
|
|
D3DFMT2[D3DFMT2["G32R32F"] = 115] = "G32R32F";
|
|
D3DFMT2[D3DFMT2["A32B32G32R32F"] = 116] = "A32B32G32R32F";
|
|
D3DFMT2[D3DFMT2["UYVY"] = fourCCToInt32("UYVY")] = "UYVY";
|
|
D3DFMT2[D3DFMT2["R8G8_B8G8"] = fourCCToInt32("RGBG")] = "R8G8_B8G8";
|
|
D3DFMT2[D3DFMT2["YUY2"] = fourCCToInt32("YUY2")] = "YUY2";
|
|
D3DFMT2[D3DFMT2["D3DFMT_G8R8_G8B8"] = fourCCToInt32("GRGB")] = "D3DFMT_G8R8_G8B8";
|
|
D3DFMT2[D3DFMT2["DXT1"] = fourCCToInt32("DXT1")] = "DXT1";
|
|
D3DFMT2[D3DFMT2["DXT2"] = fourCCToInt32("DXT2")] = "DXT2";
|
|
D3DFMT2[D3DFMT2["DXT3"] = fourCCToInt32("DXT3")] = "DXT3";
|
|
D3DFMT2[D3DFMT2["DXT4"] = fourCCToInt32("DXT4")] = "DXT4";
|
|
D3DFMT2[D3DFMT2["DXT5"] = fourCCToInt32("DXT5")] = "DXT5";
|
|
D3DFMT2[D3DFMT2["ATI1"] = fourCCToInt32("ATI1")] = "ATI1";
|
|
D3DFMT2[D3DFMT2["AT1N"] = fourCCToInt32("AT1N")] = "AT1N";
|
|
D3DFMT2[D3DFMT2["ATI2"] = fourCCToInt32("ATI2")] = "ATI2";
|
|
D3DFMT2[D3DFMT2["AT2N"] = fourCCToInt32("AT2N")] = "AT2N";
|
|
D3DFMT2[D3DFMT2["BC4U"] = fourCCToInt32("BC4U")] = "BC4U";
|
|
D3DFMT2[D3DFMT2["BC4S"] = fourCCToInt32("BC4S")] = "BC4S";
|
|
D3DFMT2[D3DFMT2["BC5U"] = fourCCToInt32("BC5U")] = "BC5U";
|
|
D3DFMT2[D3DFMT2["BC5S"] = fourCCToInt32("BC5S")] = "BC5S";
|
|
D3DFMT2[D3DFMT2["DX10"] = fourCCToInt32("DX10")] = "DX10";
|
|
return D3DFMT2;
|
|
})(D3DFMT || {});
|
|
const FOURCC_TO_TEXTURE_FORMAT = {
|
|
[D3DFMT.DXT1]: "bc1-rgba-unorm",
|
|
[D3DFMT.DXT2]: "bc2-rgba-unorm",
|
|
[D3DFMT.DXT3]: "bc2-rgba-unorm",
|
|
[D3DFMT.DXT4]: "bc3-rgba-unorm",
|
|
[D3DFMT.DXT5]: "bc3-rgba-unorm",
|
|
[D3DFMT.ATI1]: "bc4-r-unorm",
|
|
[D3DFMT.BC4U]: "bc4-r-unorm",
|
|
[D3DFMT.BC4S]: "bc4-r-snorm",
|
|
[D3DFMT.ATI2]: "bc5-rg-unorm",
|
|
[D3DFMT.BC5U]: "bc5-rg-unorm",
|
|
[D3DFMT.BC5S]: "bc5-rg-snorm",
|
|
[36 /* A16B16G16R16 */]: "rgba16uint",
|
|
[110 /* Q16W16V16U16 */]: "rgba16sint",
|
|
[111 /* R16F */]: "r16float",
|
|
[112 /* G16R16F */]: "rg16float",
|
|
[113 /* A16B16G16R16F */]: "rgba16float",
|
|
[114 /* R32F */]: "r32float",
|
|
[115 /* G32R32F */]: "rg32float",
|
|
[116 /* A32B32G32R32F */]: "rgba32float"
|
|
};
|
|
const DXGI_TO_TEXTURE_FORMAT = {
|
|
[70 /* DXGI_FORMAT_BC1_TYPELESS */]: "bc1-rgba-unorm",
|
|
[71 /* DXGI_FORMAT_BC1_UNORM */]: "bc1-rgba-unorm",
|
|
[72 /* DXGI_FORMAT_BC1_UNORM_SRGB */]: "bc1-rgba-unorm-srgb",
|
|
[73 /* DXGI_FORMAT_BC2_TYPELESS */]: "bc2-rgba-unorm",
|
|
[74 /* DXGI_FORMAT_BC2_UNORM */]: "bc2-rgba-unorm",
|
|
[75 /* DXGI_FORMAT_BC2_UNORM_SRGB */]: "bc2-rgba-unorm-srgb",
|
|
[76 /* DXGI_FORMAT_BC3_TYPELESS */]: "bc3-rgba-unorm",
|
|
[77 /* DXGI_FORMAT_BC3_UNORM */]: "bc3-rgba-unorm",
|
|
[78 /* DXGI_FORMAT_BC3_UNORM_SRGB */]: "bc3-rgba-unorm-srgb",
|
|
[79 /* DXGI_FORMAT_BC4_TYPELESS */]: "bc4-r-unorm",
|
|
[80 /* DXGI_FORMAT_BC4_UNORM */]: "bc4-r-unorm",
|
|
[81 /* DXGI_FORMAT_BC4_SNORM */]: "bc4-r-snorm",
|
|
[82 /* DXGI_FORMAT_BC5_TYPELESS */]: "bc5-rg-unorm",
|
|
[83 /* DXGI_FORMAT_BC5_UNORM */]: "bc5-rg-unorm",
|
|
[84 /* DXGI_FORMAT_BC5_SNORM */]: "bc5-rg-snorm",
|
|
[94 /* DXGI_FORMAT_BC6H_TYPELESS */]: "bc6h-rgb-ufloat",
|
|
[95 /* DXGI_FORMAT_BC6H_UF16 */]: "bc6h-rgb-ufloat",
|
|
[96 /* DXGI_FORMAT_BC6H_SF16 */]: "bc6h-rgb-float",
|
|
[97 /* DXGI_FORMAT_BC7_TYPELESS */]: "bc7-rgba-unorm",
|
|
[98 /* DXGI_FORMAT_BC7_UNORM */]: "bc7-rgba-unorm",
|
|
[99 /* DXGI_FORMAT_BC7_UNORM_SRGB */]: "bc7-rgba-unorm-srgb",
|
|
[28 /* DXGI_FORMAT_R8G8B8A8_UNORM */]: "rgba8unorm",
|
|
[29 /* DXGI_FORMAT_R8G8B8A8_UNORM_SRGB */]: "rgba8unorm-srgb",
|
|
[87 /* DXGI_FORMAT_B8G8R8A8_UNORM */]: "bgra8unorm",
|
|
[91 /* DXGI_FORMAT_B8G8R8A8_UNORM_SRGB */]: "bgra8unorm-srgb",
|
|
[41 /* DXGI_FORMAT_R32_FLOAT */]: "r32float",
|
|
[49 /* DXGI_FORMAT_R8G8_UNORM */]: "rg8unorm",
|
|
[56 /* DXGI_FORMAT_R16_UNORM */]: "r16uint",
|
|
[61 /* DXGI_FORMAT_R8_UNORM */]: "r8unorm",
|
|
[24 /* DXGI_FORMAT_R10G10B10A2_UNORM */]: "rgb10a2unorm",
|
|
[11 /* DXGI_FORMAT_R16G16B16A16_UNORM */]: "rgba16uint",
|
|
[13 /* DXGI_FORMAT_R16G16B16A16_SNORM */]: "rgba16sint",
|
|
[10 /* DXGI_FORMAT_R16G16B16A16_FLOAT */]: "rgba16float",
|
|
[54 /* DXGI_FORMAT_R16_FLOAT */]: "r16float",
|
|
[34 /* DXGI_FORMAT_R16G16_FLOAT */]: "rg16float",
|
|
[16 /* DXGI_FORMAT_R32G32_FLOAT */]: "rg32float",
|
|
[2 /* DXGI_FORMAT_R32G32B32A32_FLOAT */]: "rgba32float"
|
|
};
|
|
const DDS = {
|
|
MAGIC_VALUE: 542327876,
|
|
MAGIC_SIZE: 4,
|
|
HEADER_SIZE: 124,
|
|
HEADER_DX10_SIZE: 20,
|
|
PIXEL_FORMAT_FLAGS: {
|
|
// PIXEL_FORMAT flags
|
|
// https://github.com/Microsoft/DirectXTex/blob/main/DirectXTex/DDS.h
|
|
// https://learn.microsoft.com/en-us/windows/win32/direct3ddds/dds-pixelformat
|
|
ALPHAPIXELS: 1,
|
|
ALPHA: 2,
|
|
FOURCC: 4,
|
|
RGB: 64,
|
|
RGBA: 65,
|
|
YUV: 512,
|
|
LUMINANCE: 131072,
|
|
LUMINANCEA: 131073
|
|
},
|
|
RESOURCE_MISC_TEXTURECUBE: 4,
|
|
HEADER_FIELDS: DDS_HEADER_FIELDS,
|
|
HEADER_DX10_FIELDS: DDS_DX10_FIELDS,
|
|
DXGI_FORMAT,
|
|
D3D10_RESOURCE_DIMENSION,
|
|
D3DFMT
|
|
};
|
|
const TEXTURE_FORMAT_BLOCK_SIZE = {
|
|
"bc1-rgba-unorm": 8,
|
|
"bc1-rgba-unorm-srgb": 8,
|
|
"bc2-rgba-unorm": 16,
|
|
"bc2-rgba-unorm-srgb": 16,
|
|
"bc3-rgba-unorm": 16,
|
|
"bc3-rgba-unorm-srgb": 16,
|
|
"bc4-r-unorm": 8,
|
|
"bc4-r-snorm": 8,
|
|
"bc5-rg-unorm": 16,
|
|
"bc5-rg-snorm": 16,
|
|
"bc6h-rgb-ufloat": 16,
|
|
"bc6h-rgb-float": 16,
|
|
"bc7-rgba-unorm": 16,
|
|
"bc7-rgba-unorm-srgb": 16
|
|
};
|
|
|
|
"use strict";
|
|
function parseDDS(arrayBuffer, supportedFormats) {
|
|
const {
|
|
format,
|
|
fourCC,
|
|
width,
|
|
height,
|
|
dataOffset,
|
|
mipmapCount
|
|
} = parseDDSHeader(arrayBuffer);
|
|
if (!supportedFormats.includes(format)) {
|
|
throw new Error(`Unsupported texture format: ${fourCC} ${format}, supported: ${supportedFormats}`);
|
|
}
|
|
if (mipmapCount <= 1) {
|
|
return {
|
|
format,
|
|
width,
|
|
height,
|
|
resource: [new Uint8Array(arrayBuffer, dataOffset)],
|
|
alphaMode: "no-premultiply-alpha"
|
|
};
|
|
}
|
|
const levelBuffers = getMipmapLevelBuffers(format, width, height, dataOffset, mipmapCount, arrayBuffer);
|
|
const textureOptions = {
|
|
format,
|
|
width,
|
|
height,
|
|
resource: levelBuffers,
|
|
alphaMode: "no-premultiply-alpha"
|
|
};
|
|
return textureOptions;
|
|
}
|
|
function getMipmapLevelBuffers(format, width, height, dataOffset, mipmapCount, arrayBuffer) {
|
|
const levelBuffers = [];
|
|
const blockBytes = TEXTURE_FORMAT_BLOCK_SIZE[format];
|
|
let mipWidth = width;
|
|
let mipHeight = height;
|
|
let offset = dataOffset;
|
|
for (let level = 0; level < mipmapCount; ++level) {
|
|
const byteLength = blockBytes ? Math.max(4, mipWidth) / 4 * Math.max(4, mipHeight) / 4 * blockBytes : mipWidth * mipHeight * 4;
|
|
const levelBuffer = new Uint8Array(arrayBuffer, offset, byteLength);
|
|
levelBuffers.push(levelBuffer);
|
|
offset += byteLength;
|
|
mipWidth = Math.max(mipWidth >> 1, 1);
|
|
mipHeight = Math.max(mipHeight >> 1, 1);
|
|
}
|
|
return levelBuffers;
|
|
}
|
|
function parseDDSHeader(buffer) {
|
|
const header = new Uint32Array(buffer, 0, DDS.HEADER_SIZE / Uint32Array.BYTES_PER_ELEMENT);
|
|
if (header[DDS.HEADER_FIELDS.MAGIC] !== DDS.MAGIC_VALUE) {
|
|
throw new Error("Invalid magic number in DDS header");
|
|
}
|
|
const height = header[DDS.HEADER_FIELDS.HEIGHT];
|
|
const width = header[DDS.HEADER_FIELDS.WIDTH];
|
|
const mipmapCount = Math.max(1, header[DDS.HEADER_FIELDS.MIPMAP_COUNT]);
|
|
const flags = header[DDS.HEADER_FIELDS.PF_FLAGS];
|
|
const fourCC = header[DDS.HEADER_FIELDS.FOURCC];
|
|
const format = getTextureFormat(header, flags, fourCC, buffer);
|
|
const dataOffset = DDS.MAGIC_SIZE + DDS.HEADER_SIZE + (fourCC === DDS.D3DFMT.DX10 ? DDS.HEADER_DX10_SIZE : 0);
|
|
return {
|
|
format,
|
|
fourCC,
|
|
width,
|
|
height,
|
|
dataOffset,
|
|
mipmapCount
|
|
};
|
|
}
|
|
function getTextureFormat(header, flags, fourCC, buffer) {
|
|
if (flags & DDS.PIXEL_FORMAT_FLAGS.FOURCC) {
|
|
if (fourCC === DDS.D3DFMT.DX10) {
|
|
const dx10Header = new Uint32Array(
|
|
buffer,
|
|
DDS.MAGIC_SIZE + DDS.HEADER_SIZE,
|
|
// there is a 20-byte DDS_HEADER_DX10 after DDS_HEADER
|
|
DDS.HEADER_DX10_SIZE / Uint32Array.BYTES_PER_ELEMENT
|
|
);
|
|
const miscFlag = dx10Header[DDS.HEADER_DX10_FIELDS.MISC_FLAG];
|
|
if (miscFlag === DDS.RESOURCE_MISC_TEXTURECUBE) {
|
|
throw new Error("DDSParser does not support cubemap textures");
|
|
}
|
|
const resourceDimension = dx10Header[DDS.HEADER_DX10_FIELDS.RESOURCE_DIMENSION];
|
|
if (resourceDimension === DDS.D3D10_RESOURCE_DIMENSION.DDS_DIMENSION_TEXTURE3D) {
|
|
throw new Error("DDSParser does not supported 3D texture data");
|
|
}
|
|
const dxgiFormat = dx10Header[DDS.HEADER_DX10_FIELDS.DXGI_FORMAT];
|
|
if (dxgiFormat in DXGI_TO_TEXTURE_FORMAT) {
|
|
return DXGI_TO_TEXTURE_FORMAT[dxgiFormat];
|
|
}
|
|
throw new Error(`DDSParser cannot parse texture data with DXGI format ${dxgiFormat}`);
|
|
}
|
|
if (fourCC in FOURCC_TO_TEXTURE_FORMAT) {
|
|
return FOURCC_TO_TEXTURE_FORMAT[fourCC];
|
|
}
|
|
throw new Error(`DDSParser cannot parse texture data with fourCC format ${fourCC}`);
|
|
}
|
|
if (flags & DDS.PIXEL_FORMAT_FLAGS.RGB || flags & DDS.PIXEL_FORMAT_FLAGS.RGBA) {
|
|
return getUncompressedTextureFormat(header);
|
|
}
|
|
if (flags & DDS.PIXEL_FORMAT_FLAGS.YUV) {
|
|
throw new Error("DDSParser does not supported YUV uncompressed texture data.");
|
|
}
|
|
if (flags & DDS.PIXEL_FORMAT_FLAGS.LUMINANCE || flags & DDS.PIXEL_FORMAT_FLAGS.LUMINANCEA) {
|
|
throw new Error("DDSParser does not support single-channel (lumninance) texture data!");
|
|
}
|
|
if (flags & DDS.PIXEL_FORMAT_FLAGS.ALPHA || flags & DDS.PIXEL_FORMAT_FLAGS.ALPHAPIXELS) {
|
|
throw new Error("DDSParser does not support single-channel (alpha) texture data!");
|
|
}
|
|
throw new Error("DDSParser failed to load a texture file due to an unknown reason!");
|
|
}
|
|
function getUncompressedTextureFormat(header) {
|
|
const bitCount = header[DDS.HEADER_FIELDS.RGB_BITCOUNT];
|
|
const rBitMask = header[DDS.HEADER_FIELDS.R_BIT_MASK];
|
|
const gBitMask = header[DDS.HEADER_FIELDS.G_BIT_MASK];
|
|
const bBitMask = header[DDS.HEADER_FIELDS.B_BIT_MASK];
|
|
const aBitMask = header[DDS.HEADER_FIELDS.A_BIT_MASK];
|
|
switch (bitCount) {
|
|
case 32:
|
|
if (rBitMask === 255 && gBitMask === 65280 && bBitMask === 16711680 && aBitMask === 4278190080) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_R8G8B8A8_UNORM];
|
|
}
|
|
if (rBitMask === 16711680 && gBitMask === 65280 && bBitMask === 255 && aBitMask === 4278190080) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_B8G8R8A8_UNORM];
|
|
}
|
|
if (rBitMask === 1072693248 && gBitMask === 1047552 && bBitMask === 1023 && aBitMask === 3221225472) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_R10G10B10A2_UNORM];
|
|
}
|
|
if (rBitMask === 65535 && gBitMask === 4294901760 && bBitMask === 0 && aBitMask === 0) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_R16G16_UNORM];
|
|
}
|
|
if (rBitMask === 4294967295 && gBitMask === 0 && bBitMask === 0 && aBitMask === 0) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_R32_FLOAT];
|
|
}
|
|
break;
|
|
case 24:
|
|
if (rBitMask === 16711680 && gBitMask === 65280 && bBitMask === 255 && aBitMask === 32768) {
|
|
}
|
|
break;
|
|
case 16:
|
|
if (rBitMask === 31744 && gBitMask === 992 && bBitMask === 31 && aBitMask === 32768) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_B5G5R5A1_UNORM];
|
|
}
|
|
if (rBitMask === 63488 && gBitMask === 2016 && bBitMask === 31 && aBitMask === 0) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_B5G6R5_UNORM];
|
|
}
|
|
if (rBitMask === 3840 && gBitMask === 240 && bBitMask === 15 && aBitMask === 61440) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_B4G4R4A4_UNORM];
|
|
}
|
|
if (rBitMask === 255 && gBitMask === 0 && bBitMask === 0 && aBitMask === 65280) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_R8G8_UNORM];
|
|
}
|
|
if (rBitMask === 65535 && gBitMask === 0 && bBitMask === 0 && aBitMask === 0) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_R16_UNORM];
|
|
}
|
|
break;
|
|
case 8:
|
|
if (rBitMask === 255 && gBitMask === 0 && bBitMask === 0 && aBitMask === 0) {
|
|
return DXGI_TO_TEXTURE_FORMAT[DDS.DXGI_FORMAT.DXGI_FORMAT_R8_UNORM];
|
|
}
|
|
break;
|
|
}
|
|
throw new Error(`DDSParser does not support uncompressed texture with configuration:
|
|
bitCount = ${bitCount}, rBitMask = ${rBitMask}, gBitMask = ${gBitMask}, aBitMask = ${aBitMask}`);
|
|
}
|
|
|
|
"use strict";
|
|
const loadDDS = {
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.High,
|
|
name: "loadDDS"
|
|
},
|
|
name: "loadDDS",
|
|
test(url) {
|
|
return checkExtension(url, [".dds"]);
|
|
},
|
|
async load(url, _asset, loader) {
|
|
const supportedTextures = await getSupportedTextureFormats();
|
|
const ddsResponse = await fetch(url);
|
|
const ddsArrayBuffer = await ddsResponse.arrayBuffer();
|
|
const textureOptions = parseDDS(ddsArrayBuffer, supportedTextures);
|
|
const compressedTextureSource = new CompressedSource(textureOptions);
|
|
return createTexture(compressedTextureSource, loader, url);
|
|
},
|
|
unload(texture) {
|
|
if (Array.isArray(texture)) {
|
|
texture.forEach((t) => t.destroy(true));
|
|
} else {
|
|
texture.destroy(true);
|
|
}
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
var GL_INTERNAL_FORMAT = /* @__PURE__ */ ((GL_INTERNAL_FORMAT2) => {
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["RGBA8_SNORM"] = 36759] = "RGBA8_SNORM";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["RGBA"] = 6408] = "RGBA";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["RGBA8UI"] = 36220] = "RGBA8UI";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["SRGB8_ALPHA8"] = 35907] = "SRGB8_ALPHA8";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["RGBA8I"] = 36238] = "RGBA8I";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["RGBA8"] = 32856] = "RGBA8";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGB_S3TC_DXT1_EXT"] = 33776] = "COMPRESSED_RGB_S3TC_DXT1_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_S3TC_DXT1_EXT"] = 33777] = "COMPRESSED_RGBA_S3TC_DXT1_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_S3TC_DXT3_EXT"] = 33778] = "COMPRESSED_RGBA_S3TC_DXT3_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_S3TC_DXT5_EXT"] = 33779] = "COMPRESSED_RGBA_S3TC_DXT5_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT"] = 35917] = "COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT"] = 35918] = "COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT"] = 35919] = "COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB_S3TC_DXT1_EXT"] = 35916] = "COMPRESSED_SRGB_S3TC_DXT1_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RED_RGTC1_EXT"] = 36283] = "COMPRESSED_RED_RGTC1_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SIGNED_RED_RGTC1_EXT"] = 36284] = "COMPRESSED_SIGNED_RED_RGTC1_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RED_GREEN_RGTC2_EXT"] = 36285] = "COMPRESSED_RED_GREEN_RGTC2_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT"] = 36286] = "COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_R11_EAC"] = 37488] = "COMPRESSED_R11_EAC";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SIGNED_R11_EAC"] = 37489] = "COMPRESSED_SIGNED_R11_EAC";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RG11_EAC"] = 37490] = "COMPRESSED_RG11_EAC";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SIGNED_RG11_EAC"] = 37491] = "COMPRESSED_SIGNED_RG11_EAC";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGB8_ETC2"] = 37492] = "COMPRESSED_RGB8_ETC2";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA8_ETC2_EAC"] = 37496] = "COMPRESSED_RGBA8_ETC2_EAC";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ETC2"] = 37493] = "COMPRESSED_SRGB8_ETC2";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ETC2_EAC"] = 37497] = "COMPRESSED_SRGB8_ALPHA8_ETC2_EAC";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2"] = 37494] = "COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2"] = 37495] = "COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_4x4_KHR"] = 37808] = "COMPRESSED_RGBA_ASTC_4x4_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_5x4_KHR"] = 37809] = "COMPRESSED_RGBA_ASTC_5x4_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_5x5_KHR"] = 37810] = "COMPRESSED_RGBA_ASTC_5x5_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_6x5_KHR"] = 37811] = "COMPRESSED_RGBA_ASTC_6x5_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_6x6_KHR"] = 37812] = "COMPRESSED_RGBA_ASTC_6x6_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_8x5_KHR"] = 37813] = "COMPRESSED_RGBA_ASTC_8x5_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_8x6_KHR"] = 37814] = "COMPRESSED_RGBA_ASTC_8x6_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_8x8_KHR"] = 37815] = "COMPRESSED_RGBA_ASTC_8x8_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_10x5_KHR"] = 37816] = "COMPRESSED_RGBA_ASTC_10x5_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_10x6_KHR"] = 37817] = "COMPRESSED_RGBA_ASTC_10x6_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_10x8_KHR"] = 37818] = "COMPRESSED_RGBA_ASTC_10x8_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_10x10_KHR"] = 37819] = "COMPRESSED_RGBA_ASTC_10x10_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_12x10_KHR"] = 37820] = "COMPRESSED_RGBA_ASTC_12x10_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_ASTC_12x12_KHR"] = 37821] = "COMPRESSED_RGBA_ASTC_12x12_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR"] = 37840] = "COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR"] = 37841] = "COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR"] = 37842] = "COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR"] = 37843] = "COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR"] = 37844] = "COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR"] = 37845] = "COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR"] = 37846] = "COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR"] = 37847] = "COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR"] = 37848] = "COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR"] = 37849] = "COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR"] = 37850] = "COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR"] = 37851] = "COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR"] = 37852] = "COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR"] = 37853] = "COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGBA_BPTC_UNORM_EXT"] = 36492] = "COMPRESSED_RGBA_BPTC_UNORM_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT"] = 36493] = "COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT"] = 36494] = "COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT";
|
|
GL_INTERNAL_FORMAT2[GL_INTERNAL_FORMAT2["COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT"] = 36495] = "COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT";
|
|
return GL_INTERNAL_FORMAT2;
|
|
})(GL_INTERNAL_FORMAT || {});
|
|
var GL_FORMATS$1 = /* @__PURE__ */ ((GL_FORMATS2) => {
|
|
GL_FORMATS2[GL_FORMATS2["RGBA"] = 6408] = "RGBA";
|
|
GL_FORMATS2[GL_FORMATS2["RGB"] = 6407] = "RGB";
|
|
GL_FORMATS2[GL_FORMATS2["RG"] = 33319] = "RG";
|
|
GL_FORMATS2[GL_FORMATS2["RED"] = 6403] = "RED";
|
|
GL_FORMATS2[GL_FORMATS2["RGBA_INTEGER"] = 36249] = "RGBA_INTEGER";
|
|
GL_FORMATS2[GL_FORMATS2["RGB_INTEGER"] = 36248] = "RGB_INTEGER";
|
|
GL_FORMATS2[GL_FORMATS2["RG_INTEGER"] = 33320] = "RG_INTEGER";
|
|
GL_FORMATS2[GL_FORMATS2["RED_INTEGER"] = 36244] = "RED_INTEGER";
|
|
GL_FORMATS2[GL_FORMATS2["ALPHA"] = 6406] = "ALPHA";
|
|
GL_FORMATS2[GL_FORMATS2["LUMINANCE"] = 6409] = "LUMINANCE";
|
|
GL_FORMATS2[GL_FORMATS2["LUMINANCE_ALPHA"] = 6410] = "LUMINANCE_ALPHA";
|
|
GL_FORMATS2[GL_FORMATS2["DEPTH_COMPONENT"] = 6402] = "DEPTH_COMPONENT";
|
|
GL_FORMATS2[GL_FORMATS2["DEPTH_STENCIL"] = 34041] = "DEPTH_STENCIL";
|
|
return GL_FORMATS2;
|
|
})(GL_FORMATS$1 || {});
|
|
var GL_TYPES$1 = /* @__PURE__ */ ((GL_TYPES2) => {
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_BYTE"] = 5121] = "UNSIGNED_BYTE";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_SHORT"] = 5123] = "UNSIGNED_SHORT";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_SHORT_5_6_5"] = 33635] = "UNSIGNED_SHORT_5_6_5";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_SHORT_4_4_4_4"] = 32819] = "UNSIGNED_SHORT_4_4_4_4";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_SHORT_5_5_5_1"] = 32820] = "UNSIGNED_SHORT_5_5_5_1";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT"] = 5125] = "UNSIGNED_INT";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT_10F_11F_11F_REV"] = 35899] = "UNSIGNED_INT_10F_11F_11F_REV";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT_2_10_10_10_REV"] = 33640] = "UNSIGNED_INT_2_10_10_10_REV";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT_24_8"] = 34042] = "UNSIGNED_INT_24_8";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT_5_9_9_9_REV"] = 35902] = "UNSIGNED_INT_5_9_9_9_REV";
|
|
GL_TYPES2[GL_TYPES2["BYTE"] = 5120] = "BYTE";
|
|
GL_TYPES2[GL_TYPES2["SHORT"] = 5122] = "SHORT";
|
|
GL_TYPES2[GL_TYPES2["INT"] = 5124] = "INT";
|
|
GL_TYPES2[GL_TYPES2["FLOAT"] = 5126] = "FLOAT";
|
|
GL_TYPES2[GL_TYPES2["FLOAT_32_UNSIGNED_INT_24_8_REV"] = 36269] = "FLOAT_32_UNSIGNED_INT_24_8_REV";
|
|
GL_TYPES2[GL_TYPES2["HALF_FLOAT"] = 36193] = "HALF_FLOAT";
|
|
return GL_TYPES2;
|
|
})(GL_TYPES$1 || {});
|
|
const INTERNAL_FORMAT_TO_TEXTURE_FORMATS = {
|
|
[33776 /* COMPRESSED_RGB_S3TC_DXT1_EXT */]: "bc1-rgba-unorm",
|
|
// TODO: ???
|
|
[33777 /* COMPRESSED_RGBA_S3TC_DXT1_EXT */]: "bc1-rgba-unorm",
|
|
[33778 /* COMPRESSED_RGBA_S3TC_DXT3_EXT */]: "bc2-rgba-unorm",
|
|
[33779 /* COMPRESSED_RGBA_S3TC_DXT5_EXT */]: "bc3-rgba-unorm",
|
|
[35916 /* COMPRESSED_SRGB_S3TC_DXT1_EXT */]: "bc1-rgba-unorm-srgb",
|
|
// TODO: ???
|
|
[35917 /* COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT */]: "bc1-rgba-unorm-srgb",
|
|
[35918 /* COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT */]: "bc2-rgba-unorm-srgb",
|
|
[35919 /* COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT */]: "bc3-rgba-unorm-srgb",
|
|
[36283 /* COMPRESSED_RED_RGTC1_EXT */]: "bc4-r-unorm",
|
|
[36284 /* COMPRESSED_SIGNED_RED_RGTC1_EXT */]: "bc4-r-snorm",
|
|
[36285 /* COMPRESSED_RED_GREEN_RGTC2_EXT */]: "bc5-rg-unorm",
|
|
[36286 /* COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT */]: "bc5-rg-snorm",
|
|
[37488 /* COMPRESSED_R11_EAC */]: "eac-r11unorm",
|
|
// [GL_INTERNAL_FORMAT.COMPRESSED_SIGNED_R11_EAC]: 'eac-r11snorm',
|
|
[37490 /* COMPRESSED_RG11_EAC */]: "eac-rg11snorm",
|
|
// [GL_INTERNAL_FORMAT.COMPRESSED_SIGNED_RG11_EAC]: 'eac-rg11unorm',
|
|
[37492 /* COMPRESSED_RGB8_ETC2 */]: "etc2-rgb8unorm",
|
|
[37496 /* COMPRESSED_RGBA8_ETC2_EAC */]: "etc2-rgba8unorm",
|
|
[37493 /* COMPRESSED_SRGB8_ETC2 */]: "etc2-rgb8unorm-srgb",
|
|
[37497 /* COMPRESSED_SRGB8_ALPHA8_ETC2_EAC */]: "etc2-rgba8unorm-srgb",
|
|
[37494 /* COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2 */]: "etc2-rgb8a1unorm",
|
|
[37495 /* COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2 */]: "etc2-rgb8a1unorm-srgb",
|
|
[37808 /* COMPRESSED_RGBA_ASTC_4x4_KHR */]: "astc-4x4-unorm",
|
|
[37840 /* COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR */]: "astc-4x4-unorm-srgb",
|
|
[37809 /* COMPRESSED_RGBA_ASTC_5x4_KHR */]: "astc-5x4-unorm",
|
|
[37841 /* COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR */]: "astc-5x4-unorm-srgb",
|
|
[37810 /* COMPRESSED_RGBA_ASTC_5x5_KHR */]: "astc-5x5-unorm",
|
|
[37842 /* COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR */]: "astc-5x5-unorm-srgb",
|
|
[37811 /* COMPRESSED_RGBA_ASTC_6x5_KHR */]: "astc-6x5-unorm",
|
|
[37843 /* COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR */]: "astc-6x5-unorm-srgb",
|
|
[37812 /* COMPRESSED_RGBA_ASTC_6x6_KHR */]: "astc-6x6-unorm",
|
|
[37844 /* COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR */]: "astc-6x6-unorm-srgb",
|
|
[37813 /* COMPRESSED_RGBA_ASTC_8x5_KHR */]: "astc-8x5-unorm",
|
|
[37845 /* COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR */]: "astc-8x5-unorm-srgb",
|
|
[37814 /* COMPRESSED_RGBA_ASTC_8x6_KHR */]: "astc-8x6-unorm",
|
|
[37846 /* COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR */]: "astc-8x6-unorm-srgb",
|
|
[37815 /* COMPRESSED_RGBA_ASTC_8x8_KHR */]: "astc-8x8-unorm",
|
|
[37847 /* COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR */]: "astc-8x8-unorm-srgb",
|
|
[37816 /* COMPRESSED_RGBA_ASTC_10x5_KHR */]: "astc-10x5-unorm",
|
|
[37848 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR */]: "astc-10x5-unorm-srgb",
|
|
[37817 /* COMPRESSED_RGBA_ASTC_10x6_KHR */]: "astc-10x6-unorm",
|
|
[37849 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR */]: "astc-10x6-unorm-srgb",
|
|
[37818 /* COMPRESSED_RGBA_ASTC_10x8_KHR */]: "astc-10x8-unorm",
|
|
[37850 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR */]: "astc-10x8-unorm-srgb",
|
|
[37819 /* COMPRESSED_RGBA_ASTC_10x10_KHR */]: "astc-10x10-unorm",
|
|
[37851 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR */]: "astc-10x10-unorm-srgb",
|
|
[37820 /* COMPRESSED_RGBA_ASTC_12x10_KHR */]: "astc-12x10-unorm",
|
|
[37852 /* COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR */]: "astc-12x10-unorm-srgb",
|
|
[37821 /* COMPRESSED_RGBA_ASTC_12x12_KHR */]: "astc-12x12-unorm",
|
|
[37853 /* COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR */]: "astc-12x12-unorm-srgb",
|
|
[36492 /* COMPRESSED_RGBA_BPTC_UNORM_EXT */]: "bc7-rgba-unorm",
|
|
[36493 /* COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT */]: "bc7-rgba-unorm-srgb",
|
|
[36494 /* COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT */]: "bc6h-rgb-float",
|
|
[36495 /* COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT */]: "bc6h-rgb-ufloat",
|
|
[35907 /* SRGB8_ALPHA8 */]: "rgba8unorm-srgb",
|
|
[36759 /* RGBA8_SNORM */]: "rgba8snorm",
|
|
[36220 /* RGBA8UI */]: "rgba8uint",
|
|
[36238 /* RGBA8I */]: "rgba8sint",
|
|
[6408 /* RGBA */]: "rgba8unorm"
|
|
// [GL_INTERNAL_FORMAT.RGBA8]: 'bgra8unorm'
|
|
};
|
|
const FILE_IDENTIFIER = [171, 75, 84, 88, 32, 49, 49, 187, 13, 10, 26, 10];
|
|
const FIELDS = {
|
|
FILE_IDENTIFIER: 0,
|
|
ENDIANNESS: 12,
|
|
GL_TYPE: 16,
|
|
GL_TYPE_SIZE: 20,
|
|
GL_FORMAT: 24,
|
|
GL_INTERNAL_FORMAT: 28,
|
|
GL_BASE_INTERNAL_FORMAT: 32,
|
|
PIXEL_WIDTH: 36,
|
|
PIXEL_HEIGHT: 40,
|
|
PIXEL_DEPTH: 44,
|
|
NUMBER_OF_ARRAY_ELEMENTS: 48,
|
|
NUMBER_OF_FACES: 52,
|
|
NUMBER_OF_MIPMAP_LEVELS: 56,
|
|
BYTES_OF_KEY_VALUE_DATA: 60
|
|
};
|
|
const FILE_HEADER_SIZE = 64;
|
|
const ENDIANNESS = 67305985;
|
|
const TYPES_TO_BYTES_PER_COMPONENT = {
|
|
[5121 /* UNSIGNED_BYTE */]: 1,
|
|
[5123 /* UNSIGNED_SHORT */]: 2,
|
|
[5124 /* INT */]: 4,
|
|
[5125 /* UNSIGNED_INT */]: 4,
|
|
[5126 /* FLOAT */]: 4,
|
|
[36193 /* HALF_FLOAT */]: 8
|
|
};
|
|
const FORMATS_TO_COMPONENTS = {
|
|
[6408 /* RGBA */]: 4,
|
|
[6407 /* RGB */]: 3,
|
|
[33319 /* RG */]: 2,
|
|
[6403 /* RED */]: 1,
|
|
[6409 /* LUMINANCE */]: 1,
|
|
[6410 /* LUMINANCE_ALPHA */]: 2,
|
|
[6406 /* ALPHA */]: 1
|
|
};
|
|
const TYPES_TO_BYTES_PER_PIXEL = {
|
|
[32819 /* UNSIGNED_SHORT_4_4_4_4 */]: 2,
|
|
[32820 /* UNSIGNED_SHORT_5_5_5_1 */]: 2,
|
|
[33635 /* UNSIGNED_SHORT_5_6_5 */]: 2
|
|
};
|
|
const INTERNAL_FORMAT_TO_BYTES_PER_PIXEL = {
|
|
[33776 /* COMPRESSED_RGB_S3TC_DXT1_EXT */]: 0.5,
|
|
[33777 /* COMPRESSED_RGBA_S3TC_DXT1_EXT */]: 0.5,
|
|
[33778 /* COMPRESSED_RGBA_S3TC_DXT3_EXT */]: 1,
|
|
[33779 /* COMPRESSED_RGBA_S3TC_DXT5_EXT */]: 1,
|
|
[35916 /* COMPRESSED_SRGB_S3TC_DXT1_EXT */]: 0.5,
|
|
[35917 /* COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT */]: 0.5,
|
|
[35918 /* COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT */]: 1,
|
|
[35919 /* COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT */]: 1,
|
|
[36283 /* COMPRESSED_RED_RGTC1_EXT */]: 0.5,
|
|
[36284 /* COMPRESSED_SIGNED_RED_RGTC1_EXT */]: 0.5,
|
|
[36285 /* COMPRESSED_RED_GREEN_RGTC2_EXT */]: 1,
|
|
[36286 /* COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT */]: 1,
|
|
[37488 /* COMPRESSED_R11_EAC */]: 0.5,
|
|
[37489 /* COMPRESSED_SIGNED_R11_EAC */]: 0.5,
|
|
[37490 /* COMPRESSED_RG11_EAC */]: 1,
|
|
[37491 /* COMPRESSED_SIGNED_RG11_EAC */]: 1,
|
|
[37492 /* COMPRESSED_RGB8_ETC2 */]: 0.5,
|
|
[37496 /* COMPRESSED_RGBA8_ETC2_EAC */]: 1,
|
|
[37493 /* COMPRESSED_SRGB8_ETC2 */]: 0.5,
|
|
[37497 /* COMPRESSED_SRGB8_ALPHA8_ETC2_EAC */]: 1,
|
|
[37494 /* COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2 */]: 0.5,
|
|
[37495 /* COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2 */]: 0.5,
|
|
[37808 /* COMPRESSED_RGBA_ASTC_4x4_KHR */]: 1,
|
|
[37840 /* COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR */]: 1,
|
|
[37809 /* COMPRESSED_RGBA_ASTC_5x4_KHR */]: 0.8,
|
|
[37841 /* COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR */]: 0.8,
|
|
[37810 /* COMPRESSED_RGBA_ASTC_5x5_KHR */]: 0.64,
|
|
[37842 /* COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR */]: 0.64,
|
|
[37811 /* COMPRESSED_RGBA_ASTC_6x5_KHR */]: 0.53375,
|
|
[37843 /* COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR */]: 0.53375,
|
|
[37812 /* COMPRESSED_RGBA_ASTC_6x6_KHR */]: 0.445,
|
|
[37844 /* COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR */]: 0.445,
|
|
[37813 /* COMPRESSED_RGBA_ASTC_8x5_KHR */]: 0.4,
|
|
[37845 /* COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR */]: 0.4,
|
|
[37814 /* COMPRESSED_RGBA_ASTC_8x6_KHR */]: 0.33375,
|
|
[37846 /* COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR */]: 0.33375,
|
|
[37815 /* COMPRESSED_RGBA_ASTC_8x8_KHR */]: 0.25,
|
|
[37847 /* COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR */]: 0.25,
|
|
[37816 /* COMPRESSED_RGBA_ASTC_10x5_KHR */]: 0.32,
|
|
[37848 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR */]: 0.32,
|
|
[37817 /* COMPRESSED_RGBA_ASTC_10x6_KHR */]: 0.26625,
|
|
[37849 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR */]: 0.26625,
|
|
[37818 /* COMPRESSED_RGBA_ASTC_10x8_KHR */]: 0.2,
|
|
[37850 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR */]: 0.2,
|
|
[37819 /* COMPRESSED_RGBA_ASTC_10x10_KHR */]: 0.16,
|
|
[37851 /* COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR */]: 0.16,
|
|
[37820 /* COMPRESSED_RGBA_ASTC_12x10_KHR */]: 0.13375,
|
|
[37852 /* COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR */]: 0.13375,
|
|
[37821 /* COMPRESSED_RGBA_ASTC_12x12_KHR */]: 0.11125,
|
|
[37853 /* COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR */]: 0.11125,
|
|
[36492 /* COMPRESSED_RGBA_BPTC_UNORM_EXT */]: 1,
|
|
[36493 /* COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT */]: 1,
|
|
[36494 /* COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT */]: 1,
|
|
[36495 /* COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT */]: 1
|
|
};
|
|
const KTX = {
|
|
FILE_HEADER_SIZE,
|
|
FILE_IDENTIFIER,
|
|
FORMATS_TO_COMPONENTS,
|
|
INTERNAL_FORMAT_TO_BYTES_PER_PIXEL,
|
|
INTERNAL_FORMAT_TO_TEXTURE_FORMATS,
|
|
FIELDS,
|
|
TYPES_TO_BYTES_PER_COMPONENT,
|
|
TYPES_TO_BYTES_PER_PIXEL,
|
|
ENDIANNESS
|
|
};
|
|
|
|
"use strict";
|
|
function parseKTX(arrayBuffer, supportedFormats) {
|
|
const dataView = new DataView(arrayBuffer);
|
|
if (!validate(dataView)) {
|
|
throw new Error("Invalid KTX identifier in header");
|
|
}
|
|
const {
|
|
littleEndian,
|
|
glType,
|
|
glFormat,
|
|
glInternalFormat,
|
|
pixelWidth,
|
|
pixelHeight,
|
|
numberOfMipmapLevels,
|
|
offset
|
|
} = parseKTXHeader(dataView);
|
|
const textureFormat = KTX.INTERNAL_FORMAT_TO_TEXTURE_FORMATS[glInternalFormat];
|
|
if (!textureFormat) {
|
|
throw new Error(`Unknown texture format ${glInternalFormat}`);
|
|
}
|
|
if (!supportedFormats.includes(textureFormat)) {
|
|
throw new Error(`Unsupported texture format: ${textureFormat}, supportedFormats: ${supportedFormats}`);
|
|
}
|
|
const imagePixelByteSize = getImagePixelByteSize(glType, glFormat, glInternalFormat);
|
|
const imageBuffers = getImageBuffers(
|
|
dataView,
|
|
glType,
|
|
imagePixelByteSize,
|
|
pixelWidth,
|
|
pixelHeight,
|
|
offset,
|
|
numberOfMipmapLevels,
|
|
littleEndian
|
|
);
|
|
return {
|
|
format: textureFormat,
|
|
width: pixelWidth,
|
|
height: pixelHeight,
|
|
resource: imageBuffers,
|
|
alphaMode: "no-premultiply-alpha"
|
|
};
|
|
}
|
|
function getImageBuffers(dataView, glType, imagePixelByteSize, pixelWidth, pixelHeight, offset, numberOfMipmapLevels, littleEndian) {
|
|
const alignedWidth = pixelWidth + 3 & ~3;
|
|
const alignedHeight = pixelHeight + 3 & ~3;
|
|
let imagePixels = pixelWidth * pixelHeight;
|
|
if (glType === 0) {
|
|
imagePixels = alignedWidth * alignedHeight;
|
|
}
|
|
let mipByteSize = imagePixels * imagePixelByteSize;
|
|
let mipWidth = pixelWidth;
|
|
let mipHeight = pixelHeight;
|
|
let alignedMipWidth = alignedWidth;
|
|
let alignedMipHeight = alignedHeight;
|
|
let imageOffset = offset;
|
|
const imageBuffers = new Array(numberOfMipmapLevels);
|
|
for (let mipmapLevel = 0; mipmapLevel < numberOfMipmapLevels; mipmapLevel++) {
|
|
const imageSize = dataView.getUint32(imageOffset, littleEndian);
|
|
let elementOffset = imageOffset + 4;
|
|
imageBuffers[mipmapLevel] = new Uint8Array(dataView.buffer, elementOffset, mipByteSize);
|
|
elementOffset += mipByteSize;
|
|
imageOffset += imageSize + 4;
|
|
imageOffset = imageOffset % 4 !== 0 ? imageOffset + 4 - imageOffset % 4 : imageOffset;
|
|
mipWidth = mipWidth >> 1 || 1;
|
|
mipHeight = mipHeight >> 1 || 1;
|
|
alignedMipWidth = mipWidth + 4 - 1 & ~(4 - 1);
|
|
alignedMipHeight = mipHeight + 4 - 1 & ~(4 - 1);
|
|
mipByteSize = alignedMipWidth * alignedMipHeight * imagePixelByteSize;
|
|
}
|
|
return imageBuffers;
|
|
}
|
|
function getImagePixelByteSize(glType, glFormat, glInternalFormat) {
|
|
let imagePixelByteSize = KTX.INTERNAL_FORMAT_TO_BYTES_PER_PIXEL[glInternalFormat];
|
|
if (glType !== 0) {
|
|
if (KTX.TYPES_TO_BYTES_PER_COMPONENT[glType]) {
|
|
imagePixelByteSize = KTX.TYPES_TO_BYTES_PER_COMPONENT[glType] * KTX.FORMATS_TO_COMPONENTS[glFormat];
|
|
} else {
|
|
imagePixelByteSize = KTX.TYPES_TO_BYTES_PER_PIXEL[glType];
|
|
}
|
|
}
|
|
if (imagePixelByteSize === void 0) {
|
|
throw new Error("Unable to resolve the pixel format stored in the *.ktx file!");
|
|
}
|
|
return imagePixelByteSize;
|
|
}
|
|
function parseKTXHeader(dataView) {
|
|
const littleEndian = dataView.getUint32(KTX.FIELDS.ENDIANNESS, true) === KTX.ENDIANNESS;
|
|
const glType = dataView.getUint32(KTX.FIELDS.GL_TYPE, littleEndian);
|
|
const glFormat = dataView.getUint32(KTX.FIELDS.GL_FORMAT, littleEndian);
|
|
const glInternalFormat = dataView.getUint32(KTX.FIELDS.GL_INTERNAL_FORMAT, littleEndian);
|
|
const pixelWidth = dataView.getUint32(KTX.FIELDS.PIXEL_WIDTH, littleEndian);
|
|
const pixelHeight = dataView.getUint32(KTX.FIELDS.PIXEL_HEIGHT, littleEndian) || 1;
|
|
const pixelDepth = dataView.getUint32(KTX.FIELDS.PIXEL_DEPTH, littleEndian) || 1;
|
|
const numberOfArrayElements = dataView.getUint32(KTX.FIELDS.NUMBER_OF_ARRAY_ELEMENTS, littleEndian) || 1;
|
|
const numberOfFaces = dataView.getUint32(KTX.FIELDS.NUMBER_OF_FACES, littleEndian);
|
|
const numberOfMipmapLevels = dataView.getUint32(KTX.FIELDS.NUMBER_OF_MIPMAP_LEVELS, littleEndian);
|
|
const bytesOfKeyValueData = dataView.getUint32(KTX.FIELDS.BYTES_OF_KEY_VALUE_DATA, littleEndian);
|
|
if (pixelHeight === 0 || pixelDepth !== 1) {
|
|
throw new Error("Only 2D textures are supported");
|
|
}
|
|
if (numberOfFaces !== 1) {
|
|
throw new Error("CubeTextures are not supported by KTXLoader yet!");
|
|
}
|
|
if (numberOfArrayElements !== 1) {
|
|
throw new Error("WebGL does not support array textures");
|
|
}
|
|
return {
|
|
littleEndian,
|
|
glType,
|
|
glFormat,
|
|
glInternalFormat,
|
|
pixelWidth,
|
|
pixelHeight,
|
|
numberOfMipmapLevels,
|
|
offset: KTX.FILE_HEADER_SIZE + bytesOfKeyValueData
|
|
};
|
|
}
|
|
function validate(dataView) {
|
|
for (let i = 0; i < KTX.FILE_IDENTIFIER.length; i++) {
|
|
if (dataView.getUint8(i) !== KTX.FILE_IDENTIFIER[i]) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
"use strict";
|
|
const loadKTX = {
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.High,
|
|
name: "loadKTX"
|
|
},
|
|
name: "loadKTX",
|
|
test(url) {
|
|
return checkExtension(url, ".ktx");
|
|
},
|
|
async load(url, _asset, loader) {
|
|
const supportedTextures = await getSupportedTextureFormats();
|
|
const ktxResponse = await fetch(url);
|
|
const ktxArrayBuffer = await ktxResponse.arrayBuffer();
|
|
const textureOptions = parseKTX(ktxArrayBuffer, supportedTextures);
|
|
const compressedTextureSource = new CompressedSource(textureOptions);
|
|
return createTexture(compressedTextureSource, loader, url);
|
|
},
|
|
unload(texture) {
|
|
if (Array.isArray(texture)) {
|
|
texture.forEach((t) => t.destroy(true));
|
|
} else {
|
|
texture.destroy(true);
|
|
}
|
|
}
|
|
};
|
|
|
|
const WORKER_CODE = "(function () {\n 'use strict';\n\n const converters = {\n rgb8unorm: {\n convertedFormat: \"rgba8unorm\",\n convertFunction: convertRGBtoRGBA\n },\n \"rgb8unorm-srgb\": {\n convertedFormat: \"rgba8unorm-srgb\",\n convertFunction: convertRGBtoRGBA\n }\n };\n function convertFormatIfRequired(textureOptions) {\n const format = textureOptions.format;\n if (converters[format]) {\n const convertFunction = converters[format].convertFunction;\n const levelBuffers = textureOptions.resource;\n for (let i = 0; i < levelBuffers.length; i++) {\n levelBuffers[i] = convertFunction(levelBuffers[i]);\n }\n textureOptions.format = converters[format].convertedFormat;\n }\n }\n function convertRGBtoRGBA(levelBuffer) {\n const pixelCount = levelBuffer.byteLength / 3;\n const levelBufferWithAlpha = new Uint32Array(pixelCount);\n for (let i = 0; i < pixelCount; ++i) {\n levelBufferWithAlpha[i] = levelBuffer[i * 3] + (levelBuffer[i * 3 + 1] << 8) + (levelBuffer[i * 3 + 2] << 16) + 4278190080;\n }\n return new Uint8Array(levelBufferWithAlpha.buffer);\n }\n\n function createLevelBuffersFromKTX(ktxTexture) {\n const levelBuffers = [];\n for (let i = 0; i < ktxTexture.numLevels; i++) {\n const imageData = ktxTexture.getImageData(i, 0, 0);\n const levelBuffer = new Uint8Array(imageData.byteLength);\n levelBuffer.set(imageData);\n levelBuffers.push(levelBuffer);\n }\n return levelBuffers;\n }\n\n const glFormatToGPUFormatMap = {\n 6408: \"rgba8unorm\",\n 32856: \"bgra8unorm\",\n //\n 32857: \"rgb10a2unorm\",\n 33189: \"depth16unorm\",\n 33190: \"depth24plus\",\n 33321: \"r8unorm\",\n 33323: \"rg8unorm\",\n 33325: \"r16float\",\n 33326: \"r32float\",\n 33327: \"rg16float\",\n 33328: \"rg32float\",\n 33329: \"r8sint\",\n 33330: \"r8uint\",\n 33331: \"r16sint\",\n 33332: \"r16uint\",\n 33333: \"r32sint\",\n 33334: \"r32uint\",\n 33335: \"rg8sint\",\n 33336: \"rg8uint\",\n 33337: \"rg16sint\",\n 33338: \"rg16uint\",\n 33339: \"rg32sint\",\n 33340: \"rg32uint\",\n 33778: \"bc2-rgba-unorm\",\n 33779: \"bc3-rgba-unorm\",\n 34836: \"rgba32float\",\n 34842: \"rgba16float\",\n 35056: \"depth24plus-stencil8\",\n 35898: \"rg11b10ufloat\",\n 35901: \"rgb9e5ufloat\",\n 35907: \"rgba8unorm-srgb\",\n // bgra8unorm-srgb\n 36012: \"depth32float\",\n 36013: \"depth32float-stencil8\",\n 36168: \"stencil8\",\n 36208: \"rgba32uint\",\n 36214: \"rgba16uint\",\n 36220: \"rgba8uint\",\n 36226: \"rgba32sint\",\n 36232: \"rgba16sint\",\n 36238: \"rgba8sint\",\n 36492: \"bc7-rgba-unorm\",\n 36756: \"r8snorm\",\n 36757: \"rg8snorm\",\n 36759: \"rgba8snorm\",\n 37496: \"etc2-rgba8unorm\",\n 37808: \"astc-4x4-unorm\"\n };\n function glFormatToGPUFormat(glInternalFormat) {\n const format = glFormatToGPUFormatMap[glInternalFormat];\n if (format) {\n return format;\n }\n throw new Error(`Unsupported glInternalFormat: ${glInternalFormat}`);\n }\n\n const vkFormatToGPUFormatMap = {\n 23: \"rgb8unorm\",\n // VK_FORMAT_R8G8B8_UNORM\n 37: \"rgba8unorm\",\n // VK_FORMAT_R8G8B8A8_UNORM\n 43: \"rgba8unorm-srgb\"\n // VK_FORMAT_R8G8B8A8_SRGB\n // TODO add more!\n };\n function vkFormatToGPUFormat(vkFormat) {\n const format = vkFormatToGPUFormatMap[vkFormat];\n if (format) {\n return format;\n }\n throw new Error(`Unsupported VkFormat: ${vkFormat}`);\n }\n\n function getTextureFormatFromKTXTexture(ktxTexture) {\n if (ktxTexture.classId === 2) {\n return vkFormatToGPUFormat(ktxTexture.vkFormat);\n }\n return glFormatToGPUFormat(ktxTexture.glInternalformat);\n }\n\n const gpuFormatToBasisTranscoderFormatMap = {\n \"bc3-rgba-unorm\": \"BC3_RGBA\",\n \"bc7-rgba-unorm\": \"BC7_M5_RGBA\",\n \"etc2-rgba8unorm\": \"ETC2_RGBA\",\n \"astc-4x4-unorm\": \"ASTC_4x4_RGBA\",\n // Uncompressed\n rgba8unorm: \"RGBA32\",\n rg11b10ufloat: \"R11F_G11F_B10F\"\n };\n function gpuFormatToKTXBasisTranscoderFormat(transcoderFormat) {\n const format = gpuFormatToBasisTranscoderFormatMap[transcoderFormat];\n if (format) {\n return format;\n }\n throw new Error(`Unsupported transcoderFormat: ${transcoderFormat}`);\n }\n\n const settings = {\n jsUrl: \"\",\n wasmUrl: \"\"\n };\n let basisTranscoderFormat;\n let basisTranscodedTextureFormat;\n let ktxPromise;\n async function getKTX() {\n if (!ktxPromise) {\n const absoluteJsUrl = new URL(settings.jsUrl, location.origin).href;\n const absoluteWasmUrl = new URL(settings.wasmUrl, location.origin).href;\n importScripts(absoluteJsUrl);\n ktxPromise = new Promise((resolve) => {\n LIBKTX({\n locateFile: (_file) => absoluteWasmUrl\n }).then((libktx) => {\n resolve(libktx);\n });\n });\n }\n return ktxPromise;\n }\n async function fetchKTXTexture(url, ktx) {\n const ktx2Response = await fetch(url);\n if (ktx2Response.ok) {\n const ktx2ArrayBuffer = await ktx2Response.arrayBuffer();\n return new ktx.ktxTexture(new Uint8Array(ktx2ArrayBuffer));\n }\n throw new Error(`Failed to load KTX(2) texture: ${url}`);\n }\n const preferredTranscodedFormat = [\n \"bc7-rgba-unorm\",\n \"astc-4x4-unorm\",\n \"etc2-rgba8unorm\",\n \"bc3-rgba-unorm\",\n \"rgba8unorm\"\n ];\n async function load(url) {\n const ktx = await getKTX();\n const ktxTexture = await fetchKTXTexture(url, ktx);\n let format;\n if (ktxTexture.needsTranscoding) {\n format = basisTranscodedTextureFormat;\n const transcodeFormat = ktx.TranscodeTarget[basisTranscoderFormat];\n const result = ktxTexture.transcodeBasis(transcodeFormat, 0);\n if (result !== ktx.ErrorCode.SUCCESS) {\n throw new Error(\"Unable to transcode basis texture.\");\n }\n } else {\n format = getTextureFormatFromKTXTexture(ktxTexture);\n }\n const levelBuffers = createLevelBuffersFromKTX(ktxTexture);\n const textureOptions = {\n width: ktxTexture.baseWidth,\n height: ktxTexture.baseHeight,\n format,\n mipLevelCount: ktxTexture.numLevels,\n resource: levelBuffers,\n alphaMode: \"no-premultiply-alpha\"\n };\n convertFormatIfRequired(textureOptions);\n return textureOptions;\n }\n async function init(jsUrl, wasmUrl, supportedTextures) {\n if (jsUrl)\n settings.jsUrl = jsUrl;\n if (wasmUrl)\n settings.wasmUrl = wasmUrl;\n basisTranscodedTextureFormat = preferredTranscodedFormat.filter((format) => supportedTextures.includes(format))[0];\n basisTranscoderFormat = gpuFormatToKTXBasisTranscoderFormat(basisTranscodedTextureFormat);\n await getKTX();\n }\n const messageHandlers = {\n init: async (data) => {\n const { jsUrl, wasmUrl, supportedTextures } = data;\n await init(jsUrl, wasmUrl, supportedTextures);\n },\n load: async (data) => {\n var _a;\n try {\n const textureOptions = await load(data.url);\n return {\n type: \"load\",\n url: data.url,\n success: true,\n textureOptions,\n transferables: (_a = textureOptions.resource) == null ? void 0 : _a.map((arr) => arr.buffer)\n };\n } catch (e) {\n throw e;\n }\n }\n };\n self.onmessage = async (messageEvent) => {\n var _a;\n const message = messageEvent.data;\n const response = await ((_a = messageHandlers[message.type]) == null ? void 0 : _a.call(messageHandlers, message));\n if (response) {\n self.postMessage(response, response.transferables);\n }\n };\n\n})();\n";
|
|
let WORKER_URL = null;
|
|
class WorkerInstance
|
|
{
|
|
constructor()
|
|
{
|
|
if (!WORKER_URL)
|
|
{
|
|
WORKER_URL = URL.createObjectURL(new Blob([WORKER_CODE], { type: 'application/javascript' }));
|
|
}
|
|
this.worker = new Worker(WORKER_URL);
|
|
}
|
|
}
|
|
WorkerInstance.revokeObjectURL = function revokeObjectURL()
|
|
{
|
|
if (WORKER_URL)
|
|
{
|
|
URL.revokeObjectURL(WORKER_URL);
|
|
WORKER_URL = null;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const ktxTranscoderUrls = {
|
|
jsUrl: "https://files.pixijs.download/transcoders/ktx/libktx.js",
|
|
wasmUrl: "https://files.pixijs.download/transcoders/ktx/libktx.wasm"
|
|
};
|
|
function setKTXTranscoderPath(config) {
|
|
Object.assign(ktxTranscoderUrls, config);
|
|
}
|
|
|
|
"use strict";
|
|
let ktxWorker;
|
|
const urlHash = {};
|
|
function getKTX2Worker(supportedTextures) {
|
|
if (!ktxWorker) {
|
|
ktxWorker = new WorkerInstance().worker;
|
|
ktxWorker.onmessage = (messageEvent) => {
|
|
const { success, url, textureOptions } = messageEvent.data;
|
|
if (!success) {
|
|
console.warn("Failed to load KTX texture", url);
|
|
}
|
|
urlHash[url](textureOptions);
|
|
};
|
|
ktxWorker.postMessage({
|
|
type: "init",
|
|
jsUrl: ktxTranscoderUrls.jsUrl,
|
|
wasmUrl: ktxTranscoderUrls.wasmUrl,
|
|
supportedTextures
|
|
});
|
|
}
|
|
return ktxWorker;
|
|
}
|
|
function loadKTX2onWorker(url, supportedTextures) {
|
|
const ktxWorker2 = getKTX2Worker(supportedTextures);
|
|
return new Promise((resolve) => {
|
|
urlHash[url] = resolve;
|
|
ktxWorker2.postMessage({ type: "load", url });
|
|
});
|
|
}
|
|
|
|
"use strict";
|
|
const loadKTX2 = {
|
|
extension: {
|
|
type: ExtensionType.LoadParser,
|
|
priority: LoaderParserPriority.High,
|
|
name: "loadKTX2"
|
|
},
|
|
name: "loadKTX2",
|
|
test(url) {
|
|
return checkExtension(url, ".ktx2");
|
|
},
|
|
async load(url, _asset, loader) {
|
|
const supportedTextures = await getSupportedTextureFormats();
|
|
const textureOptions = await loadKTX2onWorker(url, supportedTextures);
|
|
const compressedTextureSource = new CompressedSource(textureOptions);
|
|
return createTexture(compressedTextureSource, loader, url);
|
|
},
|
|
async unload(texture) {
|
|
if (Array.isArray(texture)) {
|
|
texture.forEach((t) => t.destroy(true));
|
|
} else {
|
|
texture.destroy(true);
|
|
}
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
const converters = {
|
|
rgb8unorm: {
|
|
convertedFormat: "rgba8unorm",
|
|
convertFunction: convertRGBtoRGBA
|
|
},
|
|
"rgb8unorm-srgb": {
|
|
convertedFormat: "rgba8unorm-srgb",
|
|
convertFunction: convertRGBtoRGBA
|
|
}
|
|
};
|
|
function convertFormatIfRequired(textureOptions) {
|
|
const format = textureOptions.format;
|
|
if (converters[format]) {
|
|
const convertFunction = converters[format].convertFunction;
|
|
const levelBuffers = textureOptions.resource;
|
|
for (let i = 0; i < levelBuffers.length; i++) {
|
|
levelBuffers[i] = convertFunction(levelBuffers[i]);
|
|
}
|
|
textureOptions.format = converters[format].convertedFormat;
|
|
}
|
|
}
|
|
function convertRGBtoRGBA(levelBuffer) {
|
|
const pixelCount = levelBuffer.byteLength / 3;
|
|
const levelBufferWithAlpha = new Uint32Array(pixelCount);
|
|
for (let i = 0; i < pixelCount; ++i) {
|
|
levelBufferWithAlpha[i] = levelBuffer[i * 3] + (levelBuffer[i * 3 + 1] << 8) + (levelBuffer[i * 3 + 2] << 16) + 4278190080;
|
|
}
|
|
return new Uint8Array(levelBufferWithAlpha.buffer);
|
|
}
|
|
|
|
"use strict";
|
|
function createLevelBuffersFromKTX(ktxTexture) {
|
|
const levelBuffers = [];
|
|
for (let i = 0; i < ktxTexture.numLevels; i++) {
|
|
const imageData = ktxTexture.getImageData(i, 0, 0);
|
|
const levelBuffer = new Uint8Array(imageData.byteLength);
|
|
levelBuffer.set(imageData);
|
|
levelBuffers.push(levelBuffer);
|
|
}
|
|
return levelBuffers;
|
|
}
|
|
|
|
"use strict";
|
|
const glFormatToGPUFormatMap = {
|
|
6408: "rgba8unorm",
|
|
32856: "bgra8unorm",
|
|
//
|
|
32857: "rgb10a2unorm",
|
|
33189: "depth16unorm",
|
|
33190: "depth24plus",
|
|
33321: "r8unorm",
|
|
33323: "rg8unorm",
|
|
33325: "r16float",
|
|
33326: "r32float",
|
|
33327: "rg16float",
|
|
33328: "rg32float",
|
|
33329: "r8sint",
|
|
33330: "r8uint",
|
|
33331: "r16sint",
|
|
33332: "r16uint",
|
|
33333: "r32sint",
|
|
33334: "r32uint",
|
|
33335: "rg8sint",
|
|
33336: "rg8uint",
|
|
33337: "rg16sint",
|
|
33338: "rg16uint",
|
|
33339: "rg32sint",
|
|
33340: "rg32uint",
|
|
33778: "bc2-rgba-unorm",
|
|
33779: "bc3-rgba-unorm",
|
|
34836: "rgba32float",
|
|
34842: "rgba16float",
|
|
35056: "depth24plus-stencil8",
|
|
35898: "rg11b10ufloat",
|
|
35901: "rgb9e5ufloat",
|
|
35907: "rgba8unorm-srgb",
|
|
// bgra8unorm-srgb
|
|
36012: "depth32float",
|
|
36013: "depth32float-stencil8",
|
|
36168: "stencil8",
|
|
36208: "rgba32uint",
|
|
36214: "rgba16uint",
|
|
36220: "rgba8uint",
|
|
36226: "rgba32sint",
|
|
36232: "rgba16sint",
|
|
36238: "rgba8sint",
|
|
36492: "bc7-rgba-unorm",
|
|
36756: "r8snorm",
|
|
36757: "rg8snorm",
|
|
36759: "rgba8snorm",
|
|
37496: "etc2-rgba8unorm",
|
|
37808: "astc-4x4-unorm"
|
|
};
|
|
function glFormatToGPUFormat(glInternalFormat) {
|
|
const format = glFormatToGPUFormatMap[glInternalFormat];
|
|
if (format) {
|
|
return format;
|
|
}
|
|
throw new Error(`Unsupported glInternalFormat: ${glInternalFormat}`);
|
|
}
|
|
|
|
"use strict";
|
|
const vkFormatToGPUFormatMap = {
|
|
23: "rgb8unorm",
|
|
// VK_FORMAT_R8G8B8_UNORM
|
|
37: "rgba8unorm",
|
|
// VK_FORMAT_R8G8B8A8_UNORM
|
|
43: "rgba8unorm-srgb"
|
|
// VK_FORMAT_R8G8B8A8_SRGB
|
|
// TODO add more!
|
|
};
|
|
function vkFormatToGPUFormat(vkFormat) {
|
|
const format = vkFormatToGPUFormatMap[vkFormat];
|
|
if (format) {
|
|
return format;
|
|
}
|
|
throw new Error(`Unsupported VkFormat: ${vkFormat}`);
|
|
}
|
|
|
|
"use strict";
|
|
function getTextureFormatFromKTXTexture(ktxTexture) {
|
|
if (ktxTexture.classId === 2) {
|
|
return vkFormatToGPUFormat(ktxTexture.vkFormat);
|
|
}
|
|
return glFormatToGPUFormat(ktxTexture.glInternalformat);
|
|
}
|
|
|
|
"use strict";
|
|
const gpuFormatToBasisTranscoderFormatMap = {
|
|
"bc3-rgba-unorm": "BC3_RGBA",
|
|
"bc7-rgba-unorm": "BC7_M5_RGBA",
|
|
"etc2-rgba8unorm": "ETC2_RGBA",
|
|
"astc-4x4-unorm": "ASTC_4x4_RGBA",
|
|
// Uncompressed
|
|
rgba8unorm: "RGBA32",
|
|
rg11b10ufloat: "R11F_G11F_B10F"
|
|
};
|
|
function gpuFormatToKTXBasisTranscoderFormat(transcoderFormat) {
|
|
const format = gpuFormatToBasisTranscoderFormatMap[transcoderFormat];
|
|
if (format) {
|
|
return format;
|
|
}
|
|
throw new Error(`Unsupported transcoderFormat: ${transcoderFormat}`);
|
|
}
|
|
|
|
"use strict";
|
|
const validFormats = ["basis", "bc7", "bc6h", "astc", "etc2", "bc5", "bc4", "bc3", "bc2", "bc1", "eac"];
|
|
const resolveCompressedTextureUrl = {
|
|
extension: ExtensionType.ResolveParser,
|
|
test: (value) => checkExtension(value, [".ktx", ".ktx2", ".dds"]),
|
|
parse: (value) => {
|
|
var _a, _b;
|
|
let format;
|
|
const splitValue = value.split(".");
|
|
if (splitValue.length > 2) {
|
|
const newFormat = splitValue[splitValue.length - 2];
|
|
if (validFormats.includes(newFormat)) {
|
|
format = newFormat;
|
|
}
|
|
} else {
|
|
format = splitValue[splitValue.length - 1];
|
|
}
|
|
return {
|
|
resolution: parseFloat((_b = (_a = Resolver.RETINA_PREFIX.exec(value)) == null ? void 0 : _a[1]) != null ? _b : "1"),
|
|
format,
|
|
src: value
|
|
};
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
let compressedTextureExtensions;
|
|
const detectCompressed = {
|
|
extension: {
|
|
type: ExtensionType.DetectionParser,
|
|
priority: 2
|
|
},
|
|
test: async () => {
|
|
if (await isWebGPUSupported())
|
|
return true;
|
|
if (isWebGLSupported())
|
|
return true;
|
|
return false;
|
|
},
|
|
add: async (formats) => {
|
|
const supportedCompressedTextureFormats = await getSupportedCompressedTextureFormats();
|
|
compressedTextureExtensions = extractExtensionsForCompressedTextureFormats(supportedCompressedTextureFormats);
|
|
return [...compressedTextureExtensions, ...formats];
|
|
},
|
|
remove: async (formats) => {
|
|
if (compressedTextureExtensions) {
|
|
return formats.filter((f) => !(f in compressedTextureExtensions));
|
|
}
|
|
return formats;
|
|
}
|
|
};
|
|
function extractExtensionsForCompressedTextureFormats(formats) {
|
|
const extensions = ["basis"];
|
|
const dupeMap = {};
|
|
formats.forEach((format) => {
|
|
const extension = format.split("-")[0];
|
|
if (extension && !dupeMap[extension]) {
|
|
dupeMap[extension] = true;
|
|
extensions.push(extension);
|
|
}
|
|
});
|
|
extensions.sort((a, b) => {
|
|
const aIndex = validFormats.indexOf(a);
|
|
const bIndex = validFormats.indexOf(b);
|
|
if (aIndex === -1) {
|
|
return 1;
|
|
}
|
|
if (bIndex === -1) {
|
|
return -1;
|
|
}
|
|
return aIndex - bIndex;
|
|
});
|
|
return extensions;
|
|
}
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
const tempBounds$2 = new Bounds();
|
|
const _Culler = class _Culler {
|
|
/**
|
|
* Culls the children of a specific container based on the given view. This will also cull items that are not
|
|
* being explicitly managed by the culler.
|
|
* @param container - The container to cull.
|
|
* @param view - The view rectangle.
|
|
* @param skipUpdateTransform - Whether to skip updating the transform.
|
|
*/
|
|
cull(container, view, skipUpdateTransform = true) {
|
|
this._cullRecursive(container, view, skipUpdateTransform);
|
|
}
|
|
_cullRecursive(container, view, skipUpdateTransform = true) {
|
|
var _a;
|
|
if (container.cullable && container.measurable && container.includeInBuild) {
|
|
const bounds = (_a = container.cullArea) != null ? _a : getGlobalBounds(container, skipUpdateTransform, tempBounds$2);
|
|
container.culled = bounds.x >= view.x + view.width || bounds.y >= view.y + view.height || bounds.x + bounds.width <= view.x || bounds.y + bounds.height <= view.y;
|
|
} else {
|
|
container.culled = false;
|
|
}
|
|
if (!container.cullableChildren || container.culled || !container.renderable || !container.measurable || !container.includeInBuild)
|
|
return;
|
|
for (let i = 0; i < container.children.length; i++) {
|
|
this._cullRecursive(container.children[i], view, skipUpdateTransform);
|
|
}
|
|
}
|
|
};
|
|
/** A shared instance of the Culler class. */
|
|
_Culler.shared = new _Culler();
|
|
let Culler = _Culler;
|
|
|
|
"use strict";
|
|
class CullerPlugin {
|
|
static init() {
|
|
this._renderRef = this.render.bind(this);
|
|
this.render = () => {
|
|
Culler.shared.cull(this.stage, this.renderer.screen);
|
|
this.renderer.render({ container: this.stage });
|
|
};
|
|
}
|
|
static destroy() {
|
|
this.render = this._renderRef;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
CullerPlugin.extension = {
|
|
priority: 10,
|
|
type: ExtensionType.Application,
|
|
name: "culler"
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
const browserExt = {
|
|
extension: {
|
|
type: ExtensionType.Environment,
|
|
name: "browser",
|
|
priority: -1
|
|
},
|
|
test: () => true,
|
|
load: async () => {
|
|
await Promise.resolve().then(function () { return browserAll; });
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
var __defProp$y = Object.defineProperty;
|
|
var __getOwnPropSymbols$y = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$y = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$y = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$y = (obj, key, value) => key in obj ? __defProp$y(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$y = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$y.call(b, prop))
|
|
__defNormalProp$y(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$y)
|
|
for (var prop of __getOwnPropSymbols$y(b)) {
|
|
if (__propIsEnum$y.call(b, prop))
|
|
__defNormalProp$y(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$f = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$y.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$y)
|
|
for (var prop of __getOwnPropSymbols$y(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$y.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
const _Filter = class _Filter extends Shader {
|
|
/**
|
|
* @param options - The optional parameters of this filter.
|
|
*/
|
|
constructor(options) {
|
|
options = __spreadValues$y(__spreadValues$y({}, _Filter.defaultOptions), options);
|
|
super(options);
|
|
/** If enabled is true the filter is applied, if false it will not. */
|
|
this.enabled = true;
|
|
/**
|
|
* The gpu state the filter requires to render.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._state = State.for2d();
|
|
this.blendMode = options.blendMode;
|
|
this.padding = options.padding;
|
|
if (typeof options.antialias === "boolean") {
|
|
this.antialias = options.antialias ? "on" : "off";
|
|
} else {
|
|
this.antialias = options.antialias;
|
|
}
|
|
this.resolution = options.resolution;
|
|
this.blendRequired = options.blendRequired;
|
|
this.addResource("uTexture", 0, 1);
|
|
}
|
|
/**
|
|
* Applies the filter
|
|
* @param filterManager - The renderer to retrieve the filter from
|
|
* @param input - The input render target.
|
|
* @param output - The target to output to.
|
|
* @param clearMode - Should the output be cleared before rendering to it
|
|
*/
|
|
apply(filterManager, input, output, clearMode) {
|
|
filterManager.applyFilter(this, input, output, clearMode);
|
|
}
|
|
/**
|
|
* Get the blend mode of the filter.
|
|
* @default "normal"
|
|
*/
|
|
get blendMode() {
|
|
return this._state.blendMode;
|
|
}
|
|
/** Sets the blend mode of the filter. */
|
|
set blendMode(value) {
|
|
this._state.blendMode = value;
|
|
}
|
|
/**
|
|
* A short hand function to create a filter based of a vertex and fragment shader src.
|
|
* @param options
|
|
* @returns A shiny new PixiJS filter!
|
|
*/
|
|
static from(options) {
|
|
const _a = options, { gpu, gl } = _a, rest = __objRest$f(_a, ["gpu", "gl"]);
|
|
let gpuProgram;
|
|
let glProgram;
|
|
if (gpu) {
|
|
gpuProgram = GpuProgram.from(gpu);
|
|
}
|
|
if (gl) {
|
|
glProgram = GlProgram.from(gl);
|
|
}
|
|
return new _Filter(__spreadValues$y({
|
|
gpuProgram,
|
|
glProgram
|
|
}, rest));
|
|
}
|
|
};
|
|
/**
|
|
* The default filter settings
|
|
* @static
|
|
*/
|
|
_Filter.defaultOptions = {
|
|
blendMode: "normal",
|
|
resolution: 1,
|
|
padding: 0,
|
|
antialias: "off",
|
|
blendRequired: false
|
|
};
|
|
let Filter = _Filter;
|
|
|
|
var blendTemplateFrag = "\nin vec2 vTextureCoord;\nin vec4 vColor;\n\nout vec4 finalColor;\n\nuniform float uBlend;\n\nuniform sampler2D uTexture;\nuniform sampler2D uBackTexture;\n\n{FUNCTIONS}\n\nvoid main()\n{ \n vec4 back = texture(uBackTexture, vTextureCoord);\n vec4 front = texture(uTexture, vTextureCoord);\n float blendedAlpha = front.a + back.a * (1.0 - front.a);\n \n {MAIN}\n}\n";
|
|
|
|
var blendTemplateVert = "in vec2 aPosition;\nout vec2 vTextureCoord;\nout vec2 backgroundUv;\n\nuniform vec4 uInputSize;\nuniform vec4 uOutputFrame;\nuniform vec4 uOutputTexture;\n\nvec4 filterVertexPosition( void )\n{\n vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n \n position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nvec2 filterTextureCoord( void )\n{\n return aPosition * (uOutputFrame.zw * uInputSize.zw);\n}\n\nvoid main(void)\n{\n gl_Position = filterVertexPosition();\n vTextureCoord = filterTextureCoord();\n}\n";
|
|
|
|
var blendTemplate = "\nstruct GlobalFilterUniforms {\n uInputSize:vec4<f32>,\n uInputPixel:vec4<f32>,\n uInputClamp:vec4<f32>,\n uOutputFrame:vec4<f32>,\n uGlobalFrame:vec4<f32>,\n uOutputTexture:vec4<f32>,\n};\n\nstruct BlendUniforms {\n uBlend:f32,\n};\n\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler : sampler;\n@group(0) @binding(3) var uBackTexture: texture_2d<f32>;\n\n@group(1) @binding(0) var<uniform> blendUniforms : BlendUniforms;\n\n\nstruct VSOutput {\n @builtin(position) position: vec4<f32>,\n @location(0) uv : vec2<f32>\n };\n\nfn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>\n{\n var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n\n position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nfn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);\n}\n\nfn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return (aPosition.xy / gfu.uGlobalFrame.zw) + (gfu.uGlobalFrame.xy / gfu.uGlobalFrame.zw); \n}\n \n@vertex\nfn mainVertex(\n @location(0) aPosition : vec2<f32>, \n) -> VSOutput {\n return VSOutput(\n filterVertexPosition(aPosition),\n filterTextureCoord(aPosition)\n );\n}\n\n{FUNCTIONS}\n\n@fragment\nfn mainFragment(\n @location(0) uv: vec2<f32>\n) -> @location(0) vec4<f32> {\n\n\n var back = textureSample(uBackTexture, uSampler, uv);\n var front = textureSample(uTexture, uSampler, uv);\n var blendedAlpha = front.a + back.a * (1.0 - front.a);\n \n var out = vec4<f32>(0.0,0.0,0.0,0.0);\n\n {MAIN}\n\n return out;\n}";
|
|
|
|
"use strict";
|
|
var __defProp$x = Object.defineProperty;
|
|
var __getOwnPropSymbols$x = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$x = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$x = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$x = (obj, key, value) => key in obj ? __defProp$x(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$x = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$x.call(b, prop))
|
|
__defNormalProp$x(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$x)
|
|
for (var prop of __getOwnPropSymbols$x(b)) {
|
|
if (__propIsEnum$x.call(b, prop))
|
|
__defNormalProp$x(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
class BlendModeFilter extends Filter {
|
|
constructor(options) {
|
|
const gpuOptions = options.gpu;
|
|
const gpuSource = compileBlendModeShader(__spreadValues$x({ source: blendTemplate }, gpuOptions));
|
|
const gpuProgram = GpuProgram.from({
|
|
vertex: {
|
|
source: gpuSource,
|
|
entryPoint: "mainVertex"
|
|
},
|
|
fragment: {
|
|
source: gpuSource,
|
|
entryPoint: "mainFragment"
|
|
}
|
|
});
|
|
const glOptions = options.gl;
|
|
const glSource = compileBlendModeShader(__spreadValues$x({ source: blendTemplateFrag }, glOptions));
|
|
const glProgram = GlProgram.from({
|
|
vertex: blendTemplateVert,
|
|
fragment: glSource
|
|
});
|
|
const uniformGroup = new UniformGroup({
|
|
uBlend: {
|
|
value: 1,
|
|
type: "f32"
|
|
}
|
|
});
|
|
super({
|
|
gpuProgram,
|
|
glProgram,
|
|
blendRequired: true,
|
|
resources: {
|
|
blendUniforms: uniformGroup,
|
|
uBackTexture: Texture.EMPTY
|
|
}
|
|
});
|
|
}
|
|
}
|
|
function compileBlendModeShader(options) {
|
|
const { source, functions, main } = options;
|
|
return source.replace("{FUNCTIONS}", functions).replace("{MAIN}", main);
|
|
}
|
|
|
|
"use strict";
|
|
const hslgl = `
|
|
float getLuminosity(vec3 c) {
|
|
return 0.3 * c.r + 0.59 * c.g + 0.11 * c.b;
|
|
}
|
|
|
|
vec3 setLuminosity(vec3 c, float lum) {
|
|
float modLum = lum - getLuminosity(c);
|
|
vec3 color = c.rgb + vec3(modLum);
|
|
|
|
// clip back into legal range
|
|
modLum = getLuminosity(color);
|
|
vec3 modLumVec = vec3(modLum);
|
|
|
|
float cMin = min(color.r, min(color.g, color.b));
|
|
float cMax = max(color.r, max(color.g, color.b));
|
|
|
|
if(cMin < 0.0) {
|
|
color = mix(modLumVec, color, modLum / (modLum - cMin));
|
|
}
|
|
|
|
if(cMax > 1.0) {
|
|
color = mix(modLumVec, color, (1.0 - modLum) / (cMax - modLum));
|
|
}
|
|
|
|
return color;
|
|
}
|
|
|
|
float getSaturation(vec3 c) {
|
|
return max(c.r, max(c.g, c.b)) - min(c.r, min(c.g, c.b));
|
|
}
|
|
|
|
vec3 setSaturationMinMidMax(vec3 cSorted, float s) {
|
|
vec3 colorSorted = cSorted;
|
|
|
|
if(colorSorted.z > colorSorted.x) {
|
|
colorSorted.y = (((colorSorted.y - colorSorted.x) * s) / (colorSorted.z - colorSorted.x));
|
|
colorSorted.z = s;
|
|
}
|
|
else {
|
|
colorSorted.y = 0.0;
|
|
colorSorted.z = 0.0;
|
|
}
|
|
|
|
colorSorted.x = 0.0;
|
|
|
|
return colorSorted;
|
|
}
|
|
|
|
vec3 setSaturation(vec3 c, float s) {
|
|
vec3 color = c;
|
|
|
|
if(color.r <= color.g && color.r <= color.b) {
|
|
if(color.g <= color.b) {
|
|
color = setSaturationMinMidMax(color.rgb, s).rgb;
|
|
}
|
|
else {
|
|
color = setSaturationMinMidMax(color.rbg, s).rbg;
|
|
}
|
|
}
|
|
else if(color.g <= color.r && color.g <= color.b) {
|
|
if(color.r <= color.b) {
|
|
color = setSaturationMinMidMax(color.grb, s).grb;
|
|
}
|
|
else {
|
|
color = setSaturationMinMidMax(color.gbr, s).gbr;
|
|
}
|
|
}
|
|
else {
|
|
// Using bgr for both fixes part of hue
|
|
if(color.r <= color.g) {
|
|
color = setSaturationMinMidMax(color.brg, s).brg;
|
|
}
|
|
else {
|
|
color = setSaturationMinMidMax(color.bgr, s).bgr;
|
|
}
|
|
}
|
|
|
|
return color;
|
|
}
|
|
`;
|
|
|
|
"use strict";
|
|
const hslgpu = `
|
|
fn getLuminosity(c: vec3<f32>) -> f32
|
|
{
|
|
return 0.3*c.r + 0.59*c.g + 0.11*c.b;
|
|
}
|
|
|
|
fn setLuminosity(c: vec3<f32>, lum: f32) -> vec3<f32>
|
|
{
|
|
var modLum: f32 = lum - getLuminosity(c);
|
|
var color: vec3<f32> = c.rgb + modLum;
|
|
|
|
// clip back into legal range
|
|
modLum = getLuminosity(color);
|
|
let modLumVec = vec3<f32>(modLum);
|
|
|
|
let cMin: f32 = min(color.r, min(color.g, color.b));
|
|
let cMax: f32 = max(color.r, max(color.g, color.b));
|
|
|
|
if(cMin < 0.0)
|
|
{
|
|
color = mix(modLumVec, color, modLum / (modLum - cMin));
|
|
}
|
|
|
|
if(cMax > 1.0)
|
|
{
|
|
color = mix(modLumVec, color, (1 - modLum) / (cMax - modLum));
|
|
}
|
|
|
|
return color;
|
|
}
|
|
|
|
fn getSaturation(c: vec3<f32>) -> f32
|
|
{
|
|
return max(c.r, max(c.g, c.b)) - min(c.r, min(c.g, c.b));
|
|
}
|
|
|
|
fn setSaturationMinMidMax(cSorted: vec3<f32>, s: f32) -> vec3<f32>
|
|
{
|
|
var colorSorted = cSorted;
|
|
|
|
if(colorSorted.z > colorSorted.x)
|
|
{
|
|
colorSorted.y = (((colorSorted.y - colorSorted.x) * s) / (colorSorted.z - colorSorted.x));
|
|
colorSorted.z = s;
|
|
}
|
|
else
|
|
{
|
|
colorSorted.y = 0;
|
|
colorSorted.z = 0;
|
|
}
|
|
|
|
colorSorted.x = 0;
|
|
|
|
return colorSorted;
|
|
}
|
|
|
|
fn setSaturation(c: vec3<f32>, s: f32) -> vec3<f32>
|
|
{
|
|
var color = c;
|
|
|
|
if (color.r <= color.g && color.r <= color.b)
|
|
{
|
|
if (color.g <= color.b)
|
|
{
|
|
color = vec3<f32>(setSaturationMinMidMax(color.rgb, s)).rgb;
|
|
}
|
|
else
|
|
{
|
|
color = vec3<f32>(setSaturationMinMidMax(color.rbg, s)).rbg;
|
|
}
|
|
}
|
|
else if (color.g <= color.r && color.g <= color.b)
|
|
{
|
|
if (color.r <= color.b)
|
|
{
|
|
color = vec3<f32>(setSaturationMinMidMax(color.grb, s)).grb;
|
|
}
|
|
else
|
|
{
|
|
color = vec3<f32>(setSaturationMinMidMax(color.gbr, s)).gbr;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
// Using bgr for both fixes part of hue
|
|
if (color.r <= color.g)
|
|
{
|
|
color = vec3<f32>(setSaturationMinMidMax(color.brg, s)).brg;
|
|
}
|
|
else
|
|
{
|
|
color = vec3<f32>(setSaturationMinMidMax(color.bgr, s)).bgr;
|
|
}
|
|
}
|
|
|
|
return color;
|
|
}
|
|
`;
|
|
|
|
var vertex$2 = "in vec2 aPosition;\nout vec2 vTextureCoord;\n\nuniform vec4 uInputSize;\nuniform vec4 uOutputFrame;\nuniform vec4 uOutputTexture;\n\nvec4 filterVertexPosition( void )\n{\n vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n \n position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nvec2 filterTextureCoord( void )\n{\n return aPosition * (uOutputFrame.zw * uInputSize.zw);\n}\n\nvoid main(void)\n{\n gl_Position = filterVertexPosition();\n vTextureCoord = filterTextureCoord();\n}\n";
|
|
|
|
var fragment$4 = "\nin vec2 vTextureCoord;\n\nout vec4 finalColor;\n\nuniform float uAlpha;\nuniform sampler2D uTexture;\n\nvoid main()\n{\n finalColor = texture(uTexture, vTextureCoord) * uAlpha;\n}\n";
|
|
|
|
var source$5 = "struct GlobalFilterUniforms {\n uInputSize:vec4<f32>,\n uInputPixel:vec4<f32>,\n uInputClamp:vec4<f32>,\n uOutputFrame:vec4<f32>,\n uGlobalFrame:vec4<f32>,\n uOutputTexture:vec4<f32>,\n};\n\nstruct AlphaUniforms {\n uAlpha:f32,\n};\n\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler : sampler;\n\n@group(1) @binding(0) var<uniform> alphaUniforms : AlphaUniforms;\n\nstruct VSOutput {\n @builtin(position) position: vec4<f32>,\n @location(0) uv : vec2<f32>\n };\n\nfn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>\n{\n var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n\n position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nfn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);\n}\n\nfn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return (aPosition.xy / gfu.uGlobalFrame.zw) + (gfu.uGlobalFrame.xy / gfu.uGlobalFrame.zw); \n}\n\nfn getSize() -> vec2<f32>\n{\n return gfu.uGlobalFrame.zw;\n}\n \n@vertex\nfn mainVertex(\n @location(0) aPosition : vec2<f32>, \n) -> VSOutput {\n return VSOutput(\n filterVertexPosition(aPosition),\n filterTextureCoord(aPosition)\n );\n}\n\n@fragment\nfn mainFragment(\n @location(0) uv: vec2<f32>,\n @builtin(position) position: vec4<f32>\n) -> @location(0) vec4<f32> {\n \n var sample = textureSample(uTexture, uSampler, uv);\n \n return sample * alphaUniforms.uAlpha;\n}";
|
|
|
|
"use strict";
|
|
var __defProp$w = Object.defineProperty;
|
|
var __defProps$g = Object.defineProperties;
|
|
var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$w = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$w = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$w = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$w = (obj, key, value) => key in obj ? __defProp$w(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$w = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$w.call(b, prop))
|
|
__defNormalProp$w(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$w)
|
|
for (var prop of __getOwnPropSymbols$w(b)) {
|
|
if (__propIsEnum$w.call(b, prop))
|
|
__defNormalProp$w(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
|
|
var __objRest$e = (source2, exclude) => {
|
|
var target = {};
|
|
for (var prop in source2)
|
|
if (__hasOwnProp$w.call(source2, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source2[prop];
|
|
if (source2 != null && __getOwnPropSymbols$w)
|
|
for (var prop of __getOwnPropSymbols$w(source2)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$w.call(source2, prop))
|
|
target[prop] = source2[prop];
|
|
}
|
|
return target;
|
|
};
|
|
const _AlphaFilter = class _AlphaFilter extends Filter {
|
|
constructor(options) {
|
|
options = __spreadValues$w(__spreadValues$w({}, _AlphaFilter.defaultOptions), options);
|
|
const gpuProgram = GpuProgram.from({
|
|
vertex: {
|
|
source: source$5,
|
|
entryPoint: "mainVertex"
|
|
},
|
|
fragment: {
|
|
source: source$5,
|
|
entryPoint: "mainFragment"
|
|
}
|
|
});
|
|
const glProgram = GlProgram.from({
|
|
vertex: vertex$2,
|
|
fragment: fragment$4,
|
|
name: "alpha-filter"
|
|
});
|
|
const _a = options, { alpha } = _a, rest = __objRest$e(_a, ["alpha"]);
|
|
const alphaUniforms = new UniformGroup({
|
|
uAlpha: { value: alpha, type: "f32" }
|
|
});
|
|
super(__spreadProps$g(__spreadValues$w({}, rest), {
|
|
gpuProgram,
|
|
glProgram,
|
|
resources: {
|
|
alphaUniforms
|
|
}
|
|
}));
|
|
}
|
|
/**
|
|
* Coefficient for alpha multiplication
|
|
* @default 1
|
|
*/
|
|
get alpha() {
|
|
return this.resources.alphaUniforms.uniforms.uAlpha;
|
|
}
|
|
set alpha(value) {
|
|
this.resources.alphaUniforms.uniforms.uAlpha = value;
|
|
}
|
|
};
|
|
/** Default filter options */
|
|
_AlphaFilter.defaultOptions = {
|
|
/** Amount of alpha from 0 to 1, where 0 is transparent */
|
|
alpha: 1
|
|
};
|
|
let AlphaFilter = _AlphaFilter;
|
|
|
|
"use strict";
|
|
const GAUSSIAN_VALUES = {
|
|
5: [0.153388, 0.221461, 0.250301],
|
|
7: [0.071303, 0.131514, 0.189879, 0.214607],
|
|
9: [0.028532, 0.067234, 0.124009, 0.179044, 0.20236],
|
|
11: [93e-4, 0.028002, 0.065984, 0.121703, 0.175713, 0.198596],
|
|
13: [2406e-6, 9255e-6, 0.027867, 0.065666, 0.121117, 0.174868, 0.197641],
|
|
15: [489e-6, 2403e-6, 9246e-6, 0.02784, 0.065602, 0.120999, 0.174697, 0.197448]
|
|
};
|
|
|
|
"use strict";
|
|
const fragTemplate = [
|
|
"in vec2 vBlurTexCoords[%size%];",
|
|
"uniform sampler2D uTexture;",
|
|
"out vec4 finalColor;",
|
|
"void main(void)",
|
|
"{",
|
|
" finalColor = vec4(0.0);",
|
|
" %blur%",
|
|
"}"
|
|
].join("\n");
|
|
function generateBlurFragSource(kernelSize) {
|
|
const kernel = GAUSSIAN_VALUES[kernelSize];
|
|
const halfLength = kernel.length;
|
|
let fragSource = fragTemplate;
|
|
let blurLoop = "";
|
|
const template = "finalColor += texture(uTexture, vBlurTexCoords[%index%]) * %value%;";
|
|
let value;
|
|
for (let i = 0; i < kernelSize; i++) {
|
|
let blur = template.replace("%index%", i.toString());
|
|
value = i;
|
|
if (i >= halfLength) {
|
|
value = kernelSize - i - 1;
|
|
}
|
|
blur = blur.replace("%value%", kernel[value].toString());
|
|
blurLoop += blur;
|
|
blurLoop += "\n";
|
|
}
|
|
fragSource = fragSource.replace("%blur%", blurLoop);
|
|
fragSource = fragSource.replace("%size%", kernelSize.toString());
|
|
return fragSource;
|
|
}
|
|
|
|
"use strict";
|
|
const vertTemplate = `
|
|
in vec2 aPosition;
|
|
|
|
uniform float uStrength;
|
|
|
|
out vec2 vBlurTexCoords[%size%];
|
|
|
|
uniform vec4 uInputSize;
|
|
uniform vec4 uOutputFrame;
|
|
uniform vec4 uOutputTexture;
|
|
|
|
vec4 filterVertexPosition( void )
|
|
{
|
|
vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
|
|
|
|
position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
|
|
position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
|
|
|
|
return vec4(position, 0.0, 1.0);
|
|
}
|
|
|
|
vec2 filterTextureCoord( void )
|
|
{
|
|
return aPosition * (uOutputFrame.zw * uInputSize.zw);
|
|
}
|
|
|
|
void main(void)
|
|
{
|
|
gl_Position = filterVertexPosition();
|
|
|
|
float pixelStrength = uInputSize.%dimension% * uStrength;
|
|
|
|
vec2 textureCoord = filterTextureCoord();
|
|
%blur%
|
|
}`;
|
|
function generateBlurVertSource(kernelSize, x) {
|
|
const halfLength = Math.ceil(kernelSize / 2);
|
|
let vertSource = vertTemplate;
|
|
let blurLoop = "";
|
|
let template;
|
|
if (x) {
|
|
template = "vBlurTexCoords[%index%] = textureCoord + vec2(%sampleIndex% * pixelStrength, 0.0);";
|
|
} else {
|
|
template = "vBlurTexCoords[%index%] = textureCoord + vec2(0.0, %sampleIndex% * pixelStrength);";
|
|
}
|
|
for (let i = 0; i < kernelSize; i++) {
|
|
let blur = template.replace("%index%", i.toString());
|
|
blur = blur.replace("%sampleIndex%", `${i - (halfLength - 1)}.0`);
|
|
blurLoop += blur;
|
|
blurLoop += "\n";
|
|
}
|
|
vertSource = vertSource.replace("%blur%", blurLoop);
|
|
vertSource = vertSource.replace("%size%", kernelSize.toString());
|
|
vertSource = vertSource.replace("%dimension%", x ? "z" : "w");
|
|
return vertSource;
|
|
}
|
|
|
|
"use strict";
|
|
function generateBlurGlProgram(horizontal, kernelSize) {
|
|
const vertex = generateBlurVertSource(kernelSize, horizontal);
|
|
const fragment = generateBlurFragSource(kernelSize);
|
|
return GlProgram.from({
|
|
vertex,
|
|
fragment,
|
|
name: `blur-${horizontal ? "horizontal" : "vertical"}-pass-filter`
|
|
});
|
|
}
|
|
|
|
var source$4 = "\n\nstruct GlobalFilterUniforms {\n uInputSize:vec4<f32>,\n uInputPixel:vec4<f32>,\n uInputClamp:vec4<f32>,\n uOutputFrame:vec4<f32>,\n uGlobalFrame:vec4<f32>,\n uOutputTexture:vec4<f32>,\n};\n\nstruct BlurUniforms {\n uStrength:f32,\n};\n\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler : sampler;\n\n@group(1) @binding(0) var<uniform> blurUniforms : BlurUniforms;\n\n\nstruct VSOutput {\n @builtin(position) position: vec4<f32>,\n %blur-struct%\n };\n\nfn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>\n{\n var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n\n position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nfn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);\n}\n\nfn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return (aPosition.xy / gfu.uGlobalFrame.zw) + (gfu.uGlobalFrame.xy / gfu.uGlobalFrame.zw); \n}\n\nfn getSize() -> vec2<f32>\n{\n return gfu.uGlobalFrame.zw;\n}\n\n\n@vertex\nfn mainVertex(\n @location(0) aPosition : vec2<f32>, \n) -> VSOutput {\n\n let filteredCord = filterTextureCoord(aPosition);\n\n let pixelStrength = gfu.uInputSize.%dimension% * blurUniforms.uStrength;\n\n return VSOutput(\n filterVertexPosition(aPosition),\n %blur-vertex-out%\n );\n}\n\n@fragment\nfn mainFragment(\n @builtin(position) position: vec4<f32>,\n %blur-fragment-in%\n) -> @location(0) vec4<f32> {\n\n var finalColor = vec4(0.0);\n\n %blur-sampling%\n\n return finalColor;\n}";
|
|
|
|
"use strict";
|
|
function generateBlurProgram(horizontal, kernelSize) {
|
|
const kernel = GAUSSIAN_VALUES[kernelSize];
|
|
const halfLength = kernel.length;
|
|
const blurStructSource = [];
|
|
const blurOutSource = [];
|
|
const blurSamplingSource = [];
|
|
for (let i = 0; i < kernelSize; i++) {
|
|
blurStructSource[i] = `@location(${i}) offset${i}: vec2<f32>,`;
|
|
if (horizontal) {
|
|
blurOutSource[i] = `filteredCord + vec2(${i - halfLength + 1} * pixelStrength, 0.0),`;
|
|
} else {
|
|
blurOutSource[i] = `filteredCord + vec2(0.0, ${i - halfLength + 1} * pixelStrength),`;
|
|
}
|
|
const kernelIndex = i < halfLength ? i : kernelSize - i - 1;
|
|
const kernelValue = kernel[kernelIndex].toString();
|
|
blurSamplingSource[i] = `finalColor += textureSample(uTexture, uSampler, offset${i}) * ${kernelValue};`;
|
|
}
|
|
const blurStruct = blurStructSource.join("\n");
|
|
const blurOut = blurOutSource.join("\n");
|
|
const blurSampling = blurSamplingSource.join("\n");
|
|
const finalSource = source$4.replace("%blur-struct%", blurStruct).replace("%blur-vertex-out%", blurOut).replace("%blur-fragment-in%", blurStruct).replace("%blur-sampling%", blurSampling).replace("%dimension%", horizontal ? "z" : "w");
|
|
return GpuProgram.from({
|
|
vertex: {
|
|
source: finalSource,
|
|
entryPoint: "mainVertex"
|
|
},
|
|
fragment: {
|
|
source: finalSource,
|
|
entryPoint: "mainFragment"
|
|
}
|
|
});
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$v = Object.defineProperty;
|
|
var __getOwnPropSymbols$v = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$v = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$v = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$v = (obj, key, value) => key in obj ? __defProp$v(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$v = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$v.call(b, prop))
|
|
__defNormalProp$v(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$v)
|
|
for (var prop of __getOwnPropSymbols$v(b)) {
|
|
if (__propIsEnum$v.call(b, prop))
|
|
__defNormalProp$v(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _BlurFilterPass = class _BlurFilterPass extends Filter {
|
|
/**
|
|
* @param options
|
|
* @param options.horizontal - Do pass along the x-axis (`true`) or y-axis (`false`).
|
|
* @param options.strength - The strength of the blur filter.
|
|
* @param options.quality - The quality of the blur filter.
|
|
* @param options.kernelSize - The kernelSize of the blur filter.Options: 5, 7, 9, 11, 13, 15.
|
|
*/
|
|
constructor(options) {
|
|
options = __spreadValues$v(__spreadValues$v({}, _BlurFilterPass.defaultOptions), options);
|
|
const glProgram = generateBlurGlProgram(options.horizontal, options.kernelSize);
|
|
const gpuProgram = generateBlurProgram(options.horizontal, options.kernelSize);
|
|
super(__spreadValues$v({
|
|
glProgram,
|
|
gpuProgram,
|
|
resources: {
|
|
blurUniforms: {
|
|
uStrength: { value: 0, type: "f32" }
|
|
}
|
|
}
|
|
}, options));
|
|
this.horizontal = options.horizontal;
|
|
this._quality = 0;
|
|
this.quality = options.quality;
|
|
this.blur = options.strength;
|
|
this._uniforms = this.resources.blurUniforms.uniforms;
|
|
}
|
|
/**
|
|
* Applies the filter.
|
|
* @param filterManager - The manager.
|
|
* @param input - The input target.
|
|
* @param output - The output target.
|
|
* @param clearMode - How to clear
|
|
*/
|
|
apply(filterManager, input, output, clearMode) {
|
|
this._uniforms.uStrength = this.strength / this.passes;
|
|
if (this.passes === 1) {
|
|
filterManager.applyFilter(this, input, output, clearMode);
|
|
} else {
|
|
const tempTexture = TexturePool.getSameSizeTexture(input);
|
|
let flip = input;
|
|
let flop = tempTexture;
|
|
this._state.blend = false;
|
|
const shouldClear = filterManager.renderer.type === RendererType.WEBGPU;
|
|
for (let i = 0; i < this.passes - 1; i++) {
|
|
filterManager.applyFilter(this, flip, flop, i === 0 ? true : shouldClear);
|
|
const temp = flop;
|
|
flop = flip;
|
|
flip = temp;
|
|
}
|
|
this._state.blend = true;
|
|
filterManager.applyFilter(this, flip, output, clearMode);
|
|
TexturePool.returnTexture(tempTexture);
|
|
}
|
|
}
|
|
/**
|
|
* Sets the strength of both the blur.
|
|
* @default 16
|
|
*/
|
|
get blur() {
|
|
return this.strength;
|
|
}
|
|
set blur(value) {
|
|
this.padding = 1 + Math.abs(value) * 2;
|
|
this.strength = value;
|
|
}
|
|
/**
|
|
* Sets the quality of the blur by modifying the number of passes. More passes means higher
|
|
* quality blurring but the lower the performance.
|
|
* @default 4
|
|
*/
|
|
get quality() {
|
|
return this._quality;
|
|
}
|
|
set quality(value) {
|
|
this._quality = value;
|
|
this.passes = value;
|
|
}
|
|
};
|
|
/** Default blur filter pass options */
|
|
_BlurFilterPass.defaultOptions = {
|
|
/** The strength of the blur filter. */
|
|
strength: 8,
|
|
/** The quality of the blur filter. */
|
|
quality: 4,
|
|
/** The kernelSize of the blur filter.Options: 5, 7, 9, 11, 13, 15. */
|
|
kernelSize: 5
|
|
};
|
|
let BlurFilterPass = _BlurFilterPass;
|
|
|
|
"use strict";
|
|
var __defProp$u = Object.defineProperty;
|
|
var __defProps$f = Object.defineProperties;
|
|
var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$u = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$u = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$u.call(b, prop))
|
|
__defNormalProp$u(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$u)
|
|
for (var prop of __getOwnPropSymbols$u(b)) {
|
|
if (__propIsEnum$u.call(b, prop))
|
|
__defNormalProp$u(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
|
|
var __objRest$d = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$u.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$u)
|
|
for (var prop of __getOwnPropSymbols$u(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$u.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class BlurFilter extends Filter {
|
|
constructor(...args) {
|
|
var _a;
|
|
let options = (_a = args[0]) != null ? _a : {};
|
|
if (typeof options === "number") {
|
|
deprecation(v8_0_0, "BlurFilter constructor params are now options object. See params: { strength, quality, resolution, kernelSize }");
|
|
options = { strength: options };
|
|
if (args[1] !== void 0)
|
|
options.quality = args[1];
|
|
if (args[2] !== void 0)
|
|
options.resolution = args[2] || "inherit";
|
|
if (args[3] !== void 0)
|
|
options.kernelSize = args[3];
|
|
}
|
|
options = __spreadValues$u(__spreadValues$u({}, BlurFilterPass.defaultOptions), options);
|
|
const _b = options, { strength, strengthX, strengthY, quality } = _b, rest = __objRest$d(_b, ["strength", "strengthX", "strengthY", "quality"]);
|
|
super(__spreadProps$f(__spreadValues$u({}, rest), {
|
|
compatibleRenderers: RendererType.BOTH,
|
|
resources: {}
|
|
}));
|
|
this._repeatEdgePixels = false;
|
|
this.blurXFilter = new BlurFilterPass(__spreadValues$u({ horizontal: true }, options));
|
|
this.blurYFilter = new BlurFilterPass(__spreadValues$u({ horizontal: false }, options));
|
|
this.quality = quality;
|
|
this.strengthX = strengthX != null ? strengthX : strength;
|
|
this.strengthY = strengthY != null ? strengthY : strength;
|
|
this.repeatEdgePixels = false;
|
|
}
|
|
/**
|
|
* Applies the filter.
|
|
* @param filterManager - The manager.
|
|
* @param input - The input target.
|
|
* @param output - The output target.
|
|
* @param clearMode - How to clear
|
|
*/
|
|
apply(filterManager, input, output, clearMode) {
|
|
const xStrength = Math.abs(this.blurXFilter.strength);
|
|
const yStrength = Math.abs(this.blurYFilter.strength);
|
|
if (xStrength && yStrength) {
|
|
const tempTexture = TexturePool.getSameSizeTexture(input);
|
|
this.blurXFilter.blendMode = "normal";
|
|
this.blurXFilter.apply(filterManager, input, tempTexture, true);
|
|
this.blurYFilter.blendMode = this.blendMode;
|
|
this.blurYFilter.apply(filterManager, tempTexture, output, clearMode);
|
|
TexturePool.returnTexture(tempTexture);
|
|
} else if (yStrength) {
|
|
this.blurYFilter.blendMode = this.blendMode;
|
|
this.blurYFilter.apply(filterManager, input, output, clearMode);
|
|
} else {
|
|
this.blurXFilter.blendMode = this.blendMode;
|
|
this.blurXFilter.apply(filterManager, input, output, clearMode);
|
|
}
|
|
}
|
|
updatePadding() {
|
|
if (this._repeatEdgePixels) {
|
|
this.padding = 0;
|
|
} else {
|
|
this.padding = Math.max(Math.abs(this.blurXFilter.blur), Math.abs(this.blurYFilter.blur)) * 2;
|
|
}
|
|
}
|
|
/**
|
|
* Sets the strength of both the blurX and blurY properties simultaneously
|
|
* @default 8
|
|
*/
|
|
get strength() {
|
|
if (this.strengthX !== this.strengthY) {
|
|
throw new Error("BlurFilter's strengthX and strengthY are different");
|
|
}
|
|
return this.strengthX;
|
|
}
|
|
set strength(value) {
|
|
this.blurXFilter.blur = this.blurYFilter.blur = value;
|
|
this.updatePadding();
|
|
}
|
|
/**
|
|
* Sets the number of passes for blur. More passes means higher quality bluring.
|
|
* @default 1
|
|
*/
|
|
get quality() {
|
|
return this.blurXFilter.quality;
|
|
}
|
|
set quality(value) {
|
|
this.blurXFilter.quality = this.blurYFilter.quality = value;
|
|
}
|
|
/**
|
|
* Sets the strength of horizontal blur
|
|
* @default 8
|
|
*/
|
|
get strengthX() {
|
|
return this.blurXFilter.blur;
|
|
}
|
|
set strengthX(value) {
|
|
this.blurXFilter.blur = value;
|
|
this.updatePadding();
|
|
}
|
|
/**
|
|
* Sets the strength of the vertical blur
|
|
* @default 8
|
|
*/
|
|
get strengthY() {
|
|
return this.blurYFilter.blur;
|
|
}
|
|
set strengthY(value) {
|
|
this.blurYFilter.blur = value;
|
|
this.updatePadding();
|
|
}
|
|
/**
|
|
* Sets the strength of both the blurX and blurY properties simultaneously
|
|
* @default 2
|
|
* @deprecated since 8.3.0
|
|
* @see BlurFilter.strength
|
|
*/
|
|
get blur() {
|
|
deprecation("8.3.0", "BlurFilter.blur is deprecated, please use BlurFilter.strength instead.");
|
|
return this.strength;
|
|
}
|
|
set blur(value) {
|
|
deprecation("8.3.0", "BlurFilter.blur is deprecated, please use BlurFilter.strength instead.");
|
|
this.strength = value;
|
|
}
|
|
/**
|
|
* Sets the strength of the blurX property
|
|
* @default 2
|
|
* @deprecated since 8.3.0
|
|
* @see BlurFilter.strengthX
|
|
*/
|
|
get blurX() {
|
|
deprecation("8.3.0", "BlurFilter.blurX is deprecated, please use BlurFilter.strengthX instead.");
|
|
return this.strengthX;
|
|
}
|
|
set blurX(value) {
|
|
deprecation("8.3.0", "BlurFilter.blurX is deprecated, please use BlurFilter.strengthX instead.");
|
|
this.strengthX = value;
|
|
}
|
|
/**
|
|
* Sets the strength of the blurY property
|
|
* @default 2
|
|
* @deprecated since 8.3.0
|
|
* @see BlurFilter.strengthY
|
|
*/
|
|
get blurY() {
|
|
deprecation("8.3.0", "BlurFilter.blurY is deprecated, please use BlurFilter.strengthY instead.");
|
|
return this.strengthY;
|
|
}
|
|
set blurY(value) {
|
|
deprecation("8.3.0", "BlurFilter.blurY is deprecated, please use BlurFilter.strengthY instead.");
|
|
this.strengthY = value;
|
|
}
|
|
/**
|
|
* If set to true the edge of the target will be clamped
|
|
* @default false
|
|
*/
|
|
get repeatEdgePixels() {
|
|
return this._repeatEdgePixels;
|
|
}
|
|
set repeatEdgePixels(value) {
|
|
this._repeatEdgePixels = value;
|
|
this.updatePadding();
|
|
}
|
|
}
|
|
/** Default blur filter options */
|
|
BlurFilter.defaultOptions = {
|
|
/** The strength of the blur filter. */
|
|
strength: 8,
|
|
/** The quality of the blur filter. */
|
|
quality: 4,
|
|
/** The kernelSize of the blur filter.Options: 5, 7, 9, 11, 13, 15. */
|
|
kernelSize: 5
|
|
};
|
|
|
|
var fragment$3 = "\nin vec2 vTextureCoord;\nin vec4 vColor;\n\nout vec4 finalColor;\n\nuniform float uColorMatrix[20];\nuniform float uAlpha;\n\nuniform sampler2D uTexture;\n\nfloat rand(vec2 co)\n{\n return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\nvoid main()\n{\n vec4 color = texture(uTexture, vTextureCoord);\n float randomValue = rand(gl_FragCoord.xy * 0.2);\n float diff = (randomValue - 0.5) * 0.5;\n\n if (uAlpha == 0.0) {\n finalColor = color;\n return;\n }\n\n if (color.a > 0.0) {\n color.rgb /= color.a;\n }\n\n vec4 result;\n\n result.r = (uColorMatrix[0] * color.r);\n result.r += (uColorMatrix[1] * color.g);\n result.r += (uColorMatrix[2] * color.b);\n result.r += (uColorMatrix[3] * color.a);\n result.r += uColorMatrix[4];\n\n result.g = (uColorMatrix[5] * color.r);\n result.g += (uColorMatrix[6] * color.g);\n result.g += (uColorMatrix[7] * color.b);\n result.g += (uColorMatrix[8] * color.a);\n result.g += uColorMatrix[9];\n\n result.b = (uColorMatrix[10] * color.r);\n result.b += (uColorMatrix[11] * color.g);\n result.b += (uColorMatrix[12] * color.b);\n result.b += (uColorMatrix[13] * color.a);\n result.b += uColorMatrix[14];\n\n result.a = (uColorMatrix[15] * color.r);\n result.a += (uColorMatrix[16] * color.g);\n result.a += (uColorMatrix[17] * color.b);\n result.a += (uColorMatrix[18] * color.a);\n result.a += uColorMatrix[19];\n\n vec3 rgb = mix(color.rgb, result.rgb, uAlpha);\n\n // Premultiply alpha again.\n rgb *= result.a;\n\n finalColor = vec4(rgb, result.a);\n}\n";
|
|
|
|
var source$3 = "struct GlobalFilterUniforms {\n uInputSize:vec4<f32>,\n uInputPixel:vec4<f32>,\n uInputClamp:vec4<f32>,\n uOutputFrame:vec4<f32>,\n uGlobalFrame:vec4<f32>,\n uOutputTexture:vec4<f32>,\n};\n\nstruct ColorMatrixUniforms {\n uColorMatrix:array<vec4<f32>, 5>,\n uAlpha:f32,\n};\n\n\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler : sampler;\n@group(1) @binding(0) var<uniform> colorMatrixUniforms : ColorMatrixUniforms;\n\n\nstruct VSOutput {\n @builtin(position) position: vec4<f32>,\n @location(0) uv : vec2<f32>,\n };\n \nfn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>\n{\n var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n\n position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nfn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);\n}\n\n@vertex\nfn mainVertex(\n @location(0) aPosition : vec2<f32>, \n) -> VSOutput {\n return VSOutput(\n filterVertexPosition(aPosition),\n filterTextureCoord(aPosition),\n );\n}\n\n\n@fragment\nfn mainFragment(\n @location(0) uv: vec2<f32>,\n) -> @location(0) vec4<f32> {\n\n\n var c = textureSample(uTexture, uSampler, uv);\n \n if (colorMatrixUniforms.uAlpha == 0.0) {\n return c;\n }\n\n \n // Un-premultiply alpha before applying the color matrix. See issue #3539.\n if (c.a > 0.0) {\n c.r /= c.a;\n c.g /= c.a;\n c.b /= c.a;\n }\n\n var cm = colorMatrixUniforms.uColorMatrix;\n\n\n var result = vec4<f32>(0.);\n\n result.r = (cm[0][0] * c.r);\n result.r += (cm[0][1] * c.g);\n result.r += (cm[0][2] * c.b);\n result.r += (cm[0][3] * c.a);\n result.r += cm[1][0];\n\n result.g = (cm[1][1] * c.r);\n result.g += (cm[1][2] * c.g);\n result.g += (cm[1][3] * c.b);\n result.g += (cm[2][0] * c.a);\n result.g += cm[2][1];\n\n result.b = (cm[2][2] * c.r);\n result.b += (cm[2][3] * c.g);\n result.b += (cm[3][0] * c.b);\n result.b += (cm[3][1] * c.a);\n result.b += cm[3][2];\n\n result.a = (cm[3][3] * c.r);\n result.a += (cm[4][0] * c.g);\n result.a += (cm[4][1] * c.b);\n result.a += (cm[4][2] * c.a);\n result.a += cm[4][3];\n\n var rgb = mix(c.rgb, result.rgb, colorMatrixUniforms.uAlpha);\n\n rgb.r *= result.a;\n rgb.g *= result.a;\n rgb.b *= result.a;\n\n return vec4(rgb, result.a);\n}";
|
|
|
|
"use strict";
|
|
var __defProp$t = Object.defineProperty;
|
|
var __defProps$e = Object.defineProperties;
|
|
var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$t = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$t = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$t.call(b, prop))
|
|
__defNormalProp$t(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$t)
|
|
for (var prop of __getOwnPropSymbols$t(b)) {
|
|
if (__propIsEnum$t.call(b, prop))
|
|
__defNormalProp$t(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
|
|
class ColorMatrixFilter extends Filter {
|
|
constructor(options = {}) {
|
|
const colorMatrixUniforms = new UniformGroup({
|
|
uColorMatrix: {
|
|
value: [
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
],
|
|
type: "f32",
|
|
size: 20
|
|
},
|
|
uAlpha: {
|
|
value: 1,
|
|
type: "f32"
|
|
}
|
|
});
|
|
const gpuProgram = GpuProgram.from({
|
|
vertex: {
|
|
source: source$3,
|
|
entryPoint: "mainVertex"
|
|
},
|
|
fragment: {
|
|
source: source$3,
|
|
entryPoint: "mainFragment"
|
|
}
|
|
});
|
|
const glProgram = GlProgram.from({
|
|
vertex: vertex$2,
|
|
fragment: fragment$3,
|
|
name: "color-matrix-filter"
|
|
});
|
|
super(__spreadProps$e(__spreadValues$t({}, options), {
|
|
gpuProgram,
|
|
glProgram,
|
|
resources: {
|
|
colorMatrixUniforms
|
|
}
|
|
}));
|
|
this.alpha = 1;
|
|
}
|
|
/**
|
|
* Transforms current matrix and set the new one
|
|
* @param {number[]} matrix - 5x4 matrix
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
_loadMatrix(matrix, multiply = false) {
|
|
let newMatrix = matrix;
|
|
if (multiply) {
|
|
this._multiply(newMatrix, this.matrix, matrix);
|
|
newMatrix = this._colorMatrix(newMatrix);
|
|
}
|
|
this.resources.colorMatrixUniforms.uniforms.uColorMatrix = newMatrix;
|
|
this.resources.colorMatrixUniforms.update();
|
|
}
|
|
/**
|
|
* Multiplies two mat5's
|
|
* @private
|
|
* @param out - 5x4 matrix the receiving matrix
|
|
* @param a - 5x4 matrix the first operand
|
|
* @param b - 5x4 matrix the second operand
|
|
* @returns {number[]} 5x4 matrix
|
|
*/
|
|
_multiply(out, a, b) {
|
|
out[0] = a[0] * b[0] + a[1] * b[5] + a[2] * b[10] + a[3] * b[15];
|
|
out[1] = a[0] * b[1] + a[1] * b[6] + a[2] * b[11] + a[3] * b[16];
|
|
out[2] = a[0] * b[2] + a[1] * b[7] + a[2] * b[12] + a[3] * b[17];
|
|
out[3] = a[0] * b[3] + a[1] * b[8] + a[2] * b[13] + a[3] * b[18];
|
|
out[4] = a[0] * b[4] + a[1] * b[9] + a[2] * b[14] + a[3] * b[19] + a[4];
|
|
out[5] = a[5] * b[0] + a[6] * b[5] + a[7] * b[10] + a[8] * b[15];
|
|
out[6] = a[5] * b[1] + a[6] * b[6] + a[7] * b[11] + a[8] * b[16];
|
|
out[7] = a[5] * b[2] + a[6] * b[7] + a[7] * b[12] + a[8] * b[17];
|
|
out[8] = a[5] * b[3] + a[6] * b[8] + a[7] * b[13] + a[8] * b[18];
|
|
out[9] = a[5] * b[4] + a[6] * b[9] + a[7] * b[14] + a[8] * b[19] + a[9];
|
|
out[10] = a[10] * b[0] + a[11] * b[5] + a[12] * b[10] + a[13] * b[15];
|
|
out[11] = a[10] * b[1] + a[11] * b[6] + a[12] * b[11] + a[13] * b[16];
|
|
out[12] = a[10] * b[2] + a[11] * b[7] + a[12] * b[12] + a[13] * b[17];
|
|
out[13] = a[10] * b[3] + a[11] * b[8] + a[12] * b[13] + a[13] * b[18];
|
|
out[14] = a[10] * b[4] + a[11] * b[9] + a[12] * b[14] + a[13] * b[19] + a[14];
|
|
out[15] = a[15] * b[0] + a[16] * b[5] + a[17] * b[10] + a[18] * b[15];
|
|
out[16] = a[15] * b[1] + a[16] * b[6] + a[17] * b[11] + a[18] * b[16];
|
|
out[17] = a[15] * b[2] + a[16] * b[7] + a[17] * b[12] + a[18] * b[17];
|
|
out[18] = a[15] * b[3] + a[16] * b[8] + a[17] * b[13] + a[18] * b[18];
|
|
out[19] = a[15] * b[4] + a[16] * b[9] + a[17] * b[14] + a[18] * b[19] + a[19];
|
|
return out;
|
|
}
|
|
/**
|
|
* Create a Float32 Array and normalize the offset component to 0-1
|
|
* @param {number[]} matrix - 5x4 matrix
|
|
* @returns {number[]} 5x4 matrix with all values between 0-1
|
|
*/
|
|
_colorMatrix(matrix) {
|
|
const m = new Float32Array(matrix);
|
|
m[4] /= 255;
|
|
m[9] /= 255;
|
|
m[14] /= 255;
|
|
m[19] /= 255;
|
|
return m;
|
|
}
|
|
/**
|
|
* Adjusts brightness
|
|
* @param b - value of the brightness (0-1, where 0 is black)
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
brightness(b, multiply) {
|
|
const matrix = [
|
|
b,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
b,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
b,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Sets each channel on the diagonal of the color matrix.
|
|
* This can be used to achieve a tinting effect on Containers similar to the tint field of some
|
|
* display objects like Sprite, Text, Graphics, and Mesh.
|
|
* @param color - Color of the tint. This is a hex value.
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
tint(color, multiply) {
|
|
const [r, g, b] = Color.shared.setValue(color).toArray();
|
|
const matrix = [
|
|
r,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
g,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
b,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Set the matrices in grey scales
|
|
* @param scale - value of the grey (0-1, where 0 is black)
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
greyscale(scale, multiply) {
|
|
const matrix = [
|
|
scale,
|
|
scale,
|
|
scale,
|
|
0,
|
|
0,
|
|
scale,
|
|
scale,
|
|
scale,
|
|
0,
|
|
0,
|
|
scale,
|
|
scale,
|
|
scale,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* for our american friends!
|
|
* @param scale
|
|
* @param multiply
|
|
*/
|
|
grayscale(scale, multiply) {
|
|
this.greyscale(scale, multiply);
|
|
}
|
|
/**
|
|
* Set the black and white matrice.
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
blackAndWhite(multiply) {
|
|
const matrix = [
|
|
0.3,
|
|
0.6,
|
|
0.1,
|
|
0,
|
|
0,
|
|
0.3,
|
|
0.6,
|
|
0.1,
|
|
0,
|
|
0,
|
|
0.3,
|
|
0.6,
|
|
0.1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Set the hue property of the color
|
|
* @param rotation - in degrees
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
hue(rotation, multiply) {
|
|
rotation = (rotation || 0) / 180 * Math.PI;
|
|
const cosR = Math.cos(rotation);
|
|
const sinR = Math.sin(rotation);
|
|
const sqrt = Math.sqrt;
|
|
const w = 1 / 3;
|
|
const sqrW = sqrt(w);
|
|
const a00 = cosR + (1 - cosR) * w;
|
|
const a01 = w * (1 - cosR) - sqrW * sinR;
|
|
const a02 = w * (1 - cosR) + sqrW * sinR;
|
|
const a10 = w * (1 - cosR) + sqrW * sinR;
|
|
const a11 = cosR + w * (1 - cosR);
|
|
const a12 = w * (1 - cosR) - sqrW * sinR;
|
|
const a20 = w * (1 - cosR) - sqrW * sinR;
|
|
const a21 = w * (1 - cosR) + sqrW * sinR;
|
|
const a22 = cosR + w * (1 - cosR);
|
|
const matrix = [
|
|
a00,
|
|
a01,
|
|
a02,
|
|
0,
|
|
0,
|
|
a10,
|
|
a11,
|
|
a12,
|
|
0,
|
|
0,
|
|
a20,
|
|
a21,
|
|
a22,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Set the contrast matrix, increase the separation between dark and bright
|
|
* Increase contrast : shadows darker and highlights brighter
|
|
* Decrease contrast : bring the shadows up and the highlights down
|
|
* @param amount - value of the contrast (0-1)
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
contrast(amount, multiply) {
|
|
const v = (amount || 0) + 1;
|
|
const o = -0.5 * (v - 1);
|
|
const matrix = [
|
|
v,
|
|
0,
|
|
0,
|
|
0,
|
|
o,
|
|
0,
|
|
v,
|
|
0,
|
|
0,
|
|
o,
|
|
0,
|
|
0,
|
|
v,
|
|
0,
|
|
o,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Set the saturation matrix, increase the separation between colors
|
|
* Increase saturation : increase contrast, brightness, and sharpness
|
|
* @param amount - The saturation amount (0-1)
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
saturate(amount = 0, multiply) {
|
|
const x = amount * 2 / 3 + 1;
|
|
const y = (x - 1) * -0.5;
|
|
const matrix = [
|
|
x,
|
|
y,
|
|
y,
|
|
0,
|
|
0,
|
|
y,
|
|
x,
|
|
y,
|
|
0,
|
|
0,
|
|
y,
|
|
y,
|
|
x,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/** Desaturate image (remove color) Call the saturate function */
|
|
desaturate() {
|
|
this.saturate(-1);
|
|
}
|
|
/**
|
|
* Negative image (inverse of classic rgb matrix)
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
negative(multiply) {
|
|
const matrix = [
|
|
-1,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
-1,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
-1,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Sepia image
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
sepia(multiply) {
|
|
const matrix = [
|
|
0.393,
|
|
0.7689999,
|
|
0.18899999,
|
|
0,
|
|
0,
|
|
0.349,
|
|
0.6859999,
|
|
0.16799999,
|
|
0,
|
|
0,
|
|
0.272,
|
|
0.5339999,
|
|
0.13099999,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Color motion picture process invented in 1916 (thanks Dominic Szablewski)
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
technicolor(multiply) {
|
|
const matrix = [
|
|
1.9125277891456083,
|
|
-0.8545344976951645,
|
|
-0.09155508482755585,
|
|
0,
|
|
11.793603434377337,
|
|
-0.3087833385928097,
|
|
1.7658908555458428,
|
|
-0.10601743074722245,
|
|
0,
|
|
-70.35205161461398,
|
|
-0.231103377548616,
|
|
-0.7501899197440212,
|
|
1.847597816108189,
|
|
0,
|
|
30.950940869491138,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Polaroid filter
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
polaroid(multiply) {
|
|
const matrix = [
|
|
1.438,
|
|
-0.062,
|
|
-0.062,
|
|
0,
|
|
0,
|
|
-0.122,
|
|
1.378,
|
|
-0.122,
|
|
0,
|
|
0,
|
|
-0.016,
|
|
-0.016,
|
|
1.483,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Filter who transforms : Red -> Blue and Blue -> Red
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
toBGR(multiply) {
|
|
const matrix = [
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Color reversal film introduced by Eastman Kodak in 1935. (thanks Dominic Szablewski)
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
kodachrome(multiply) {
|
|
const matrix = [
|
|
1.1285582396593525,
|
|
-0.3967382283601348,
|
|
-0.03992559172921793,
|
|
0,
|
|
63.72958762196502,
|
|
-0.16404339962244616,
|
|
1.0835251566291304,
|
|
-0.05498805115633132,
|
|
0,
|
|
24.732407896706203,
|
|
-0.16786010706155763,
|
|
-0.5603416277695248,
|
|
1.6014850761964943,
|
|
0,
|
|
35.62982807460946,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Brown delicious browni filter (thanks Dominic Szablewski)
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
browni(multiply) {
|
|
const matrix = [
|
|
0.5997023498159715,
|
|
0.34553243048391263,
|
|
-0.2708298674538042,
|
|
0,
|
|
47.43192855600873,
|
|
-0.037703249837783157,
|
|
0.8609577587992641,
|
|
0.15059552388459913,
|
|
0,
|
|
-36.96841498319127,
|
|
0.24113635128153335,
|
|
-0.07441037908422492,
|
|
0.44972182064877153,
|
|
0,
|
|
-7.562075277591283,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Vintage filter (thanks Dominic Szablewski)
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
vintage(multiply) {
|
|
const matrix = [
|
|
0.6279345635605994,
|
|
0.3202183420819367,
|
|
-0.03965408211312453,
|
|
0,
|
|
9.651285835294123,
|
|
0.02578397704808868,
|
|
0.6441188644374771,
|
|
0.03259127616149294,
|
|
0,
|
|
7.462829176470591,
|
|
0.0466055556782719,
|
|
-0.0851232987247891,
|
|
0.5241648018700465,
|
|
0,
|
|
5.159190588235296,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* We don't know exactly what it does, kind of gradient map, but funny to play with!
|
|
* @param desaturation - Tone values.
|
|
* @param toned - Tone values.
|
|
* @param lightColor - Tone values, example: `0xFFE580`
|
|
* @param darkColor - Tone values, example: `0xFFE580`
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
colorTone(desaturation, toned, lightColor, darkColor, multiply) {
|
|
desaturation = desaturation || 0.2;
|
|
toned = toned || 0.15;
|
|
lightColor = lightColor || 16770432;
|
|
darkColor = darkColor || 3375104;
|
|
const temp = Color.shared;
|
|
const [lR, lG, lB] = temp.setValue(lightColor).toArray();
|
|
const [dR, dG, dB] = temp.setValue(darkColor).toArray();
|
|
const matrix = [
|
|
0.3,
|
|
0.59,
|
|
0.11,
|
|
0,
|
|
0,
|
|
lR,
|
|
lG,
|
|
lB,
|
|
desaturation,
|
|
0,
|
|
dR,
|
|
dG,
|
|
dB,
|
|
toned,
|
|
0,
|
|
lR - dR,
|
|
lG - dG,
|
|
lB - dB,
|
|
0,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Night effect
|
|
* @param intensity - The intensity of the night effect.
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
night(intensity, multiply) {
|
|
intensity = intensity || 0.1;
|
|
const matrix = [
|
|
intensity * -2,
|
|
-intensity,
|
|
0,
|
|
0,
|
|
0,
|
|
-intensity,
|
|
0,
|
|
intensity,
|
|
0,
|
|
0,
|
|
0,
|
|
intensity,
|
|
intensity * 2,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* Predator effect
|
|
*
|
|
* Erase the current matrix by setting a new independent one
|
|
* @param amount - how much the predator feels his future victim
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
predator(amount, multiply) {
|
|
const matrix = [
|
|
// row 1
|
|
11.224130630493164 * amount,
|
|
-4.794486999511719 * amount,
|
|
-2.8746118545532227 * amount,
|
|
0 * amount,
|
|
0.40342438220977783 * amount,
|
|
// row 2
|
|
-3.6330697536468506 * amount,
|
|
9.193157196044922 * amount,
|
|
-2.951810836791992 * amount,
|
|
0 * amount,
|
|
-1.316135048866272 * amount,
|
|
// row 3
|
|
-3.2184197902679443 * amount,
|
|
-4.2375030517578125 * amount,
|
|
7.476448059082031 * amount,
|
|
0 * amount,
|
|
0.8044459223747253 * amount,
|
|
// row 4
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/**
|
|
* LSD effect
|
|
*
|
|
* Multiply the current matrix
|
|
* @param multiply - if true, current matrix and matrix are multiplied. If false,
|
|
* just set the current matrix with @param matrix
|
|
*/
|
|
lsd(multiply) {
|
|
const matrix = [
|
|
2,
|
|
-0.4,
|
|
0.5,
|
|
0,
|
|
0,
|
|
-0.5,
|
|
2,
|
|
-0.4,
|
|
0,
|
|
0,
|
|
-0.4,
|
|
-0.5,
|
|
3,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, multiply);
|
|
}
|
|
/** Erase the current matrix by setting the default one. */
|
|
reset() {
|
|
const matrix = [
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0
|
|
];
|
|
this._loadMatrix(matrix, false);
|
|
}
|
|
/**
|
|
* The matrix of the color matrix filter
|
|
* @member {number[]}
|
|
* @default [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0]
|
|
*/
|
|
get matrix() {
|
|
return this.resources.colorMatrixUniforms.uniforms.uColorMatrix;
|
|
}
|
|
set matrix(value) {
|
|
this.resources.colorMatrixUniforms.uniforms.uColorMatrix = value;
|
|
}
|
|
/**
|
|
* The opacity value to use when mixing the original and resultant colors.
|
|
*
|
|
* When the value is 0, the original color is used without modification.
|
|
* When the value is 1, the result color is used.
|
|
* When in the range (0, 1) the color is interpolated between the original and result by this amount.
|
|
* @default 1
|
|
*/
|
|
get alpha() {
|
|
return this.resources.colorMatrixUniforms.uniforms.uAlpha;
|
|
}
|
|
set alpha(value) {
|
|
this.resources.colorMatrixUniforms.uniforms.uAlpha = value;
|
|
}
|
|
}
|
|
|
|
var fragment$2 = "\nin vec2 vTextureCoord;\nin vec2 vFilterUv;\n\nout vec4 finalColor;\n\nuniform sampler2D uTexture;\nuniform sampler2D uMapTexture;\n\nuniform vec4 uInputClamp;\nuniform highp vec4 uInputSize;\nuniform mat2 uRotation;\nuniform vec2 uScale;\n\nvoid main()\n{\n vec4 map = texture(uMapTexture, vFilterUv);\n \n vec2 offset = uInputSize.zw * (uRotation * (map.xy - 0.5)) * uScale; \n\n finalColor = texture(uTexture, clamp(vTextureCoord + offset, uInputClamp.xy, uInputClamp.zw));\n}\n";
|
|
|
|
var vertex$1 = "in vec2 aPosition;\nout vec2 vTextureCoord;\nout vec2 vFilterUv;\n\n\nuniform vec4 uInputSize;\nuniform vec4 uOutputFrame;\nuniform vec4 uOutputTexture;\n\nuniform mat3 uFilterMatrix;\n\nvec4 filterVertexPosition( void )\n{\n vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n \n position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nvec2 filterTextureCoord( void )\n{\n return aPosition * (uOutputFrame.zw * uInputSize.zw);\n}\n\nvec2 getFilterCoord( void )\n{\n return ( uFilterMatrix * vec3( filterTextureCoord(), 1.0) ).xy;\n}\n\n\nvoid main(void)\n{\n gl_Position = filterVertexPosition();\n vTextureCoord = filterTextureCoord();\n vFilterUv = getFilterCoord();\n}\n";
|
|
|
|
var source$2 = "\nstruct GlobalFilterUniforms {\n uInputSize:vec4<f32>,\n uInputPixel:vec4<f32>,\n uInputClamp:vec4<f32>,\n uOutputFrame:vec4<f32>,\n uGlobalFrame:vec4<f32>,\n uOutputTexture:vec4<f32>,\n};\n\nstruct DisplacementUniforms {\n uFilterMatrix:mat3x3<f32>,\n uScale:vec2<f32>,\n uRotation:mat2x2<f32>\n};\n\n\n\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler : sampler;\n\n@group(1) @binding(0) var<uniform> filterUniforms : DisplacementUniforms;\n@group(1) @binding(1) var uMapTexture: texture_2d<f32>;\n@group(1) @binding(2) var uMapSampler : sampler;\n\nstruct VSOutput {\n @builtin(position) position: vec4<f32>,\n @location(0) uv : vec2<f32>,\n @location(1) filterUv : vec2<f32>,\n };\n\nfn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>\n{\n var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n\n position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nfn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);\n}\n\nfn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return (aPosition.xy / gfu.uGlobalFrame.zw) + (gfu.uGlobalFrame.xy / gfu.uGlobalFrame.zw); \n}\n\nfn getFilterCoord(aPosition:vec2<f32> ) -> vec2<f32>\n{\n return ( filterUniforms.uFilterMatrix * vec3( filterTextureCoord(aPosition), 1.0) ).xy;\n}\n\nfn getSize() -> vec2<f32>\n{\n\n \n return gfu.uGlobalFrame.zw;\n}\n \n@vertex\nfn mainVertex(\n @location(0) aPosition : vec2<f32>, \n) -> VSOutput {\n return VSOutput(\n filterVertexPosition(aPosition),\n filterTextureCoord(aPosition),\n getFilterCoord(aPosition)\n );\n}\n\n@fragment\nfn mainFragment(\n @location(0) uv: vec2<f32>,\n @location(1) filterUv: vec2<f32>,\n @builtin(position) position: vec4<f32>\n) -> @location(0) vec4<f32> {\n\n var map = textureSample(uMapTexture, uMapSampler, filterUv);\n\n var offset = gfu.uInputSize.zw * (filterUniforms.uRotation * (map.xy - 0.5)) * filterUniforms.uScale; \n \n return textureSample(uTexture, uSampler, clamp(uv + offset, gfu.uInputClamp.xy, gfu.uInputClamp.zw));\n}";
|
|
|
|
"use strict";
|
|
var __defProp$s = Object.defineProperty;
|
|
var __defProps$d = Object.defineProperties;
|
|
var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$s = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$s = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$s.call(b, prop))
|
|
__defNormalProp$s(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$s)
|
|
for (var prop of __getOwnPropSymbols$s(b)) {
|
|
if (__propIsEnum$s.call(b, prop))
|
|
__defNormalProp$s(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
|
|
var __objRest$c = (source2, exclude) => {
|
|
var target = {};
|
|
for (var prop in source2)
|
|
if (__hasOwnProp$s.call(source2, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source2[prop];
|
|
if (source2 != null && __getOwnPropSymbols$s)
|
|
for (var prop of __getOwnPropSymbols$s(source2)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source2, prop))
|
|
target[prop] = source2[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class DisplacementFilter extends Filter {
|
|
constructor(...args) {
|
|
let options = args[0];
|
|
if (options instanceof Sprite) {
|
|
if (args[1]) {
|
|
deprecation(v8_0_0, "DisplacementFilter now uses options object instead of params. {sprite, scale}");
|
|
}
|
|
options = { sprite: options, scale: args[1] };
|
|
}
|
|
const _a = options, { sprite, scale: scaleOption } = _a, rest = __objRest$c(_a, ["sprite", "scale"]);
|
|
let scale = scaleOption != null ? scaleOption : 20;
|
|
if (typeof scale === "number") {
|
|
scale = new Point(scale, scale);
|
|
}
|
|
const filterUniforms = new UniformGroup({
|
|
uFilterMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uScale: { value: scale, type: "vec2<f32>" },
|
|
uRotation: { value: new Float32Array([0, 0, 0, 0]), type: "mat2x2<f32>" }
|
|
});
|
|
const glProgram = GlProgram.from({
|
|
vertex: vertex$1,
|
|
fragment: fragment$2,
|
|
name: "displacement-filter"
|
|
});
|
|
const gpuProgram = GpuProgram.from({
|
|
vertex: {
|
|
source: source$2,
|
|
entryPoint: "mainVertex"
|
|
},
|
|
fragment: {
|
|
source: source$2,
|
|
entryPoint: "mainFragment"
|
|
}
|
|
});
|
|
const textureSource = sprite.texture.source;
|
|
super(__spreadProps$d(__spreadValues$s({}, rest), {
|
|
gpuProgram,
|
|
glProgram,
|
|
resources: {
|
|
filterUniforms,
|
|
uMapTexture: textureSource,
|
|
uMapSampler: textureSource.style
|
|
}
|
|
}));
|
|
this._sprite = options.sprite;
|
|
this._sprite.renderable = false;
|
|
}
|
|
/**
|
|
* Applies the filter.
|
|
* @param filterManager - The manager.
|
|
* @param input - The input target.
|
|
* @param output - The output target.
|
|
* @param clearMode - clearMode.
|
|
*/
|
|
apply(filterManager, input, output, clearMode) {
|
|
const uniforms = this.resources.filterUniforms.uniforms;
|
|
filterManager.calculateSpriteMatrix(
|
|
uniforms.uFilterMatrix,
|
|
this._sprite
|
|
);
|
|
const wt = this._sprite.worldTransform;
|
|
const lenX = Math.sqrt(wt.a * wt.a + wt.b * wt.b);
|
|
const lenY = Math.sqrt(wt.c * wt.c + wt.d * wt.d);
|
|
if (lenX !== 0 && lenY !== 0) {
|
|
uniforms.uRotation[0] = wt.a / lenX;
|
|
uniforms.uRotation[1] = wt.b / lenX;
|
|
uniforms.uRotation[2] = wt.c / lenY;
|
|
uniforms.uRotation[3] = wt.d / lenY;
|
|
}
|
|
this.resources.uMapTexture = this._sprite.texture.source;
|
|
filterManager.applyFilter(this, input, output, clearMode);
|
|
}
|
|
/** scaleX, scaleY for displacements */
|
|
get scale() {
|
|
return this.resources.filterUniforms.uniforms.uScale;
|
|
}
|
|
}
|
|
|
|
var fragment$1 = "\nin vec2 vTextureCoord;\nin vec4 vColor;\n\nout vec4 finalColor;\n\nuniform float uNoise;\nuniform float uSeed;\nuniform sampler2D uTexture;\n\nfloat rand(vec2 co)\n{\n return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\nvoid main()\n{\n vec4 color = texture(uTexture, vTextureCoord);\n float randomValue = rand(gl_FragCoord.xy * uSeed);\n float diff = (randomValue - 0.5) * uNoise;\n\n // Un-premultiply alpha before applying the color matrix. See issue #3539.\n if (color.a > 0.0) {\n color.rgb /= color.a;\n }\n\n color.r += diff;\n color.g += diff;\n color.b += diff;\n\n // Premultiply alpha again.\n color.rgb *= color.a;\n\n finalColor = color;\n}\n";
|
|
|
|
var source$1 = "\n\nstruct GlobalFilterUniforms {\n uInputSize:vec4<f32>,\n uInputPixel:vec4<f32>,\n uInputClamp:vec4<f32>,\n uOutputFrame:vec4<f32>,\n uGlobalFrame:vec4<f32>,\n uOutputTexture:vec4<f32>,\n};\n\nstruct NoiseUniforms {\n uNoise:f32,\n uSeed:f32,\n};\n\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler : sampler;\n\n@group(1) @binding(0) var<uniform> noiseUniforms : NoiseUniforms;\n\nstruct VSOutput {\n @builtin(position) position: vec4<f32>,\n @location(0) uv : vec2<f32>\n };\n\nfn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>\n{\n var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n\n position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nfn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);\n}\n\nfn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return (aPosition.xy / gfu.uGlobalFrame.zw) + (gfu.uGlobalFrame.xy / gfu.uGlobalFrame.zw); \n}\n\nfn getSize() -> vec2<f32>\n{\n return gfu.uGlobalFrame.zw;\n}\n \n@vertex\nfn mainVertex(\n @location(0) aPosition : vec2<f32>, \n) -> VSOutput {\n return VSOutput(\n filterVertexPosition(aPosition),\n filterTextureCoord(aPosition)\n );\n}\n\nfn rand(co:vec2<f32>) -> f32\n{\n return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);\n}\n\n\n\n@fragment\nfn mainFragment(\n @location(0) uv: vec2<f32>,\n @builtin(position) position: vec4<f32>\n) -> @location(0) vec4<f32> {\n\n var pixelPosition = globalTextureCoord(position.xy);// / (getSize());//- gfu.uOutputFrame.xy);\n \n \n var sample = textureSample(uTexture, uSampler, uv);\n var randomValue = rand(pixelPosition.xy * noiseUniforms.uSeed);\n var diff = (randomValue - 0.5) * noiseUniforms.uNoise;\n \n // Un-premultiply alpha before applying the color matrix. See issue #3539.\n if (sample.a > 0.0) {\n sample.r /= sample.a;\n sample.g /= sample.a;\n sample.b /= sample.a;\n }\n\n sample.r += diff;\n sample.g += diff;\n sample.b += diff;\n\n // Premultiply alpha again.\n sample.r *= sample.a;\n sample.g *= sample.a;\n sample.b *= sample.a;\n \n return sample;\n}";
|
|
|
|
"use strict";
|
|
var __defProp$r = Object.defineProperty;
|
|
var __defProps$c = Object.defineProperties;
|
|
var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$r = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$r = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$r.call(b, prop))
|
|
__defNormalProp$r(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$r)
|
|
for (var prop of __getOwnPropSymbols$r(b)) {
|
|
if (__propIsEnum$r.call(b, prop))
|
|
__defNormalProp$r(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
|
|
var __objRest$b = (source2, exclude) => {
|
|
var target = {};
|
|
for (var prop in source2)
|
|
if (__hasOwnProp$r.call(source2, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source2[prop];
|
|
if (source2 != null && __getOwnPropSymbols$r)
|
|
for (var prop of __getOwnPropSymbols$r(source2)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source2, prop))
|
|
target[prop] = source2[prop];
|
|
}
|
|
return target;
|
|
};
|
|
const _NoiseFilter = class _NoiseFilter extends Filter {
|
|
/**
|
|
* @param options - The options of the noise filter.
|
|
*/
|
|
constructor(options = {}) {
|
|
options = __spreadValues$r(__spreadValues$r({}, _NoiseFilter.defaultOptions), options);
|
|
const gpuProgram = GpuProgram.from({
|
|
vertex: {
|
|
source: source$1,
|
|
entryPoint: "mainVertex"
|
|
},
|
|
fragment: {
|
|
source: source$1,
|
|
entryPoint: "mainFragment"
|
|
}
|
|
});
|
|
const glProgram = GlProgram.from({
|
|
vertex: vertex$2,
|
|
fragment: fragment$1,
|
|
name: "noise-filter"
|
|
});
|
|
const _a = options, { noise, seed } = _a, rest = __objRest$b(_a, ["noise", "seed"]);
|
|
super(__spreadProps$c(__spreadValues$r({}, rest), {
|
|
gpuProgram,
|
|
glProgram,
|
|
resources: {
|
|
noiseUniforms: new UniformGroup({
|
|
uNoise: { value: 1, type: "f32" },
|
|
uSeed: { value: 1, type: "f32" }
|
|
})
|
|
}
|
|
}));
|
|
this.noise = noise;
|
|
this.seed = seed != null ? seed : Math.random();
|
|
}
|
|
/**
|
|
* The amount of noise to apply, this value should be in the range (0, 1].
|
|
* @default 0.5
|
|
*/
|
|
get noise() {
|
|
return this.resources.noiseUniforms.uniforms.uNoise;
|
|
}
|
|
set noise(value) {
|
|
this.resources.noiseUniforms.uniforms.uNoise = value;
|
|
}
|
|
/** A seed value to apply to the random noise generation. `Math.random()` is a good value to use. */
|
|
get seed() {
|
|
return this.resources.noiseUniforms.uniforms.uSeed;
|
|
}
|
|
set seed(value) {
|
|
this.resources.noiseUniforms.uniforms.uSeed = value;
|
|
}
|
|
};
|
|
_NoiseFilter.defaultOptions = {
|
|
noise: 0.5
|
|
};
|
|
let NoiseFilter = _NoiseFilter;
|
|
|
|
var fragment = "in vec2 vMaskCoord;\nin vec2 vTextureCoord;\n\nuniform sampler2D uTexture;\nuniform sampler2D uMaskTexture;\n\nuniform float uAlpha;\nuniform vec4 uMaskClamp;\n\nout vec4 finalColor;\n\nvoid main(void)\n{\n float clip = step(3.5,\n step(uMaskClamp.x, vMaskCoord.x) +\n step(uMaskClamp.y, vMaskCoord.y) +\n step(vMaskCoord.x, uMaskClamp.z) +\n step(vMaskCoord.y, uMaskClamp.w));\n\n // TODO look into why this is needed\n float npmAlpha = uAlpha; \n vec4 original = texture(uTexture, vTextureCoord);\n vec4 masky = texture(uMaskTexture, vMaskCoord);\n float alphaMul = 1.0 - npmAlpha * (1.0 - masky.a);\n\n original *= (alphaMul * masky.r * uAlpha * clip);\n\n finalColor = original;\n}\n";
|
|
|
|
var vertex = "in vec2 aPosition;\n\nout vec2 vTextureCoord;\nout vec2 vMaskCoord;\n\n\nuniform vec4 uInputSize;\nuniform vec4 uOutputFrame;\nuniform vec4 uOutputTexture;\nuniform mat3 uFilterMatrix;\n\nvec4 filterVertexPosition( vec2 aPosition )\n{\n vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n \n position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nvec2 filterTextureCoord( vec2 aPosition )\n{\n return aPosition * (uOutputFrame.zw * uInputSize.zw);\n}\n\nvec2 getFilterCoord( vec2 aPosition )\n{\n return ( uFilterMatrix * vec3( filterTextureCoord(aPosition), 1.0) ).xy;\n} \n\nvoid main(void)\n{\n gl_Position = filterVertexPosition(aPosition);\n vTextureCoord = filterTextureCoord(aPosition);\n vMaskCoord = getFilterCoord(aPosition);\n}\n";
|
|
|
|
var source = "struct GlobalFilterUniforms {\n uInputSize:vec4<f32>,\n uInputPixel:vec4<f32>,\n uInputClamp:vec4<f32>,\n uOutputFrame:vec4<f32>,\n uGlobalFrame:vec4<f32>,\n uOutputTexture:vec4<f32>, \n};\n\nstruct MaskUniforms {\n uFilterMatrix:mat3x3<f32>,\n uMaskClamp:vec4<f32>,\n uAlpha:f32,\n};\n\n\n@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler : sampler;\n\n@group(1) @binding(0) var<uniform> filterUniforms : MaskUniforms;\n@group(1) @binding(1) var uMaskTexture: texture_2d<f32>;\n\nstruct VSOutput {\n @builtin(position) position: vec4<f32>,\n @location(0) uv : vec2<f32>,\n @location(1) filterUv : vec2<f32>,\n };\n\nfn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>\n{\n var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n\n position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n\n return vec4(position, 0.0, 1.0);\n}\n\nfn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);\n}\n\nfn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>\n{\n return (aPosition.xy / gfu.uGlobalFrame.zw) + (gfu.uGlobalFrame.xy / gfu.uGlobalFrame.zw); \n}\n\nfn getFilterCoord(aPosition:vec2<f32> ) -> vec2<f32>\n{\n return ( filterUniforms.uFilterMatrix * vec3( filterTextureCoord(aPosition), 1.0) ).xy;\n}\n\nfn getSize() -> vec2<f32>\n{\n\n \n return gfu.uGlobalFrame.zw;\n}\n \n@vertex\nfn mainVertex(\n @location(0) aPosition : vec2<f32>, \n) -> VSOutput {\n return VSOutput(\n filterVertexPosition(aPosition),\n filterTextureCoord(aPosition),\n getFilterCoord(aPosition)\n );\n}\n\n@fragment\nfn mainFragment(\n @location(0) uv: vec2<f32>,\n @location(1) filterUv: vec2<f32>,\n @builtin(position) position: vec4<f32>\n) -> @location(0) vec4<f32> {\n\n var maskClamp = filterUniforms.uMaskClamp;\n\n var clip = step(3.5,\n step(maskClamp.x, filterUv.x) +\n step(maskClamp.y, filterUv.y) +\n step(filterUv.x, maskClamp.z) +\n step(filterUv.y, maskClamp.w));\n\n var mask = textureSample(uMaskTexture, uSampler, filterUv);\n var source = textureSample(uTexture, uSampler, uv);\n \n var npmAlpha = 0.0;\n\n var alphaMul = 1.0 - npmAlpha * (1.0 - mask.a);\n\n var a = (alphaMul * mask.r) * clip;\n\n return vec4(source.rgb, source.a) * a;\n}";
|
|
|
|
"use strict";
|
|
var __defProp$q = Object.defineProperty;
|
|
var __defProps$b = Object.defineProperties;
|
|
var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$q = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$q = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$q.call(b, prop))
|
|
__defNormalProp$q(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$q)
|
|
for (var prop of __getOwnPropSymbols$q(b)) {
|
|
if (__propIsEnum$q.call(b, prop))
|
|
__defNormalProp$q(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
|
|
var __objRest$a = (source2, exclude) => {
|
|
var target = {};
|
|
for (var prop in source2)
|
|
if (__hasOwnProp$q.call(source2, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source2[prop];
|
|
if (source2 != null && __getOwnPropSymbols$q)
|
|
for (var prop of __getOwnPropSymbols$q(source2)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source2, prop))
|
|
target[prop] = source2[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class MaskFilter extends Filter {
|
|
constructor(options) {
|
|
const _a = options, { sprite } = _a, rest = __objRest$a(_a, ["sprite"]);
|
|
const textureMatrix = new TextureMatrix(sprite.texture);
|
|
const filterUniforms = new UniformGroup({
|
|
uFilterMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uMaskClamp: { value: textureMatrix.uClampFrame, type: "vec4<f32>" },
|
|
uAlpha: { value: 1, type: "f32" }
|
|
});
|
|
const gpuProgram = GpuProgram.from({
|
|
vertex: {
|
|
source,
|
|
entryPoint: "mainVertex"
|
|
},
|
|
fragment: {
|
|
source,
|
|
entryPoint: "mainFragment"
|
|
}
|
|
});
|
|
const glProgram = GlProgram.from({
|
|
vertex,
|
|
fragment,
|
|
name: "mask-filter"
|
|
});
|
|
super(__spreadProps$b(__spreadValues$q({}, rest), {
|
|
gpuProgram,
|
|
glProgram,
|
|
resources: {
|
|
filterUniforms,
|
|
uMaskTexture: sprite.texture.source
|
|
}
|
|
}));
|
|
this.sprite = sprite;
|
|
this._textureMatrix = textureMatrix;
|
|
}
|
|
apply(filterManager, input, output, clearMode) {
|
|
this._textureMatrix.texture = this.sprite.texture;
|
|
filterManager.calculateSpriteMatrix(
|
|
this.resources.filterUniforms.uniforms.uFilterMatrix,
|
|
this.sprite
|
|
).prepend(this._textureMatrix.mapCoord);
|
|
this.resources.uMaskTexture = this.sprite.texture.source;
|
|
filterManager.applyFilter(this, input, output, clearMode);
|
|
}
|
|
}
|
|
|
|
var hsl = "fn getLuminosity(c: vec3<f32>) -> f32 {\n return 0.3 * c.r + 0.59 * c.g + 0.11 * c.b;\n}\n\nfn setLuminosity(c: vec3<f32>, lum: f32) -> vec3<f32> {\n let d: f32 = lum - getLuminosity(c);\n let newColor: vec3<f32> = c.rgb + vec3<f32>(d, d, d);\n\n // clip back into legal range\n let newLum: f32 = getLuminosity(newColor);\n let cMin: f32 = min(newColor.r, min(newColor.g, newColor.b));\n let cMax: f32 = max(newColor.r, max(newColor.g, newColor.b));\n\n let t1: f32 = newLum / (newLum - cMin);\n let t2: f32 = (1.0 - newLum) / (cMax - newLum);\n\n let finalColor = mix(vec3<f32>(newLum, newLum, newLum), newColor, select(select(1.0, t2, cMax > 1.0), t1, cMin < 0.0));\n\n return finalColor;\n}\n\nfn getSaturation(c: vec3<f32>) -> f32 {\n return max(c.r, max(c.g, c.b)) - min(c.r, min(c.g, c.b));\n}\n\n// Set saturation if color components are sorted in ascending order.\nfn setSaturationMinMidMax(cSorted: vec3<f32>, s: f32) -> vec3<f32> {\n var result: vec3<f32>;\n if (cSorted.z > cSorted.x) {\n let newY = (((cSorted.y - cSorted.x) * s) / (cSorted.z - cSorted.x));\n result = vec3<f32>(0.0, newY, s);\n } else {\n result = vec3<f32>(0.0, 0.0, 0.0);\n }\n return vec3<f32>(result.x, result.y, result.z);\n}\n\nfn setSaturation(c: vec3<f32>, s: f32) -> vec3<f32> {\n var result: vec3<f32> = c;\n\n if (c.r <= c.g && c.r <= c.b) {\n if (c.g <= c.b) {\n result = setSaturationMinMidMax(result, s);\n } else {\n var temp: vec3<f32> = vec3<f32>(result.r, result.b, result.g);\n temp = setSaturationMinMidMax(temp, s);\n result = vec3<f32>(temp.r, temp.b, temp.g);\n }\n } else if (c.g <= c.r && c.g <= c.b) {\n if (c.r <= c.b) {\n var temp: vec3<f32> = vec3<f32>(result.g, result.r, result.b);\n temp = setSaturationMinMidMax(temp, s);\n result = vec3<f32>(temp.g, temp.r, temp.b);\n } else {\n var temp: vec3<f32> = vec3<f32>(result.g, result.b, result.r);\n temp = setSaturationMinMidMax(temp, s);\n result = vec3<f32>(temp.g, temp.b, temp.r);\n }\n } else {\n if (c.r <= c.g) {\n var temp: vec3<f32> = vec3<f32>(result.b, result.r, result.g);\n temp = setSaturationMinMidMax(temp, s);\n result = vec3<f32>(temp.b, temp.r, temp.g);\n } else {\n var temp: vec3<f32> = vec3<f32>(result.b, result.g, result.r);\n temp = setSaturationMinMidMax(temp, s);\n result = vec3<f32>(temp.b, temp.g, temp.r);\n }\n }\n\n return result;\n}";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
function pointInTriangle(px, py, x1, y1, x2, y2, x3, y3) {
|
|
const v2x = x3 - x1;
|
|
const v2y = y3 - y1;
|
|
const v1x = x2 - x1;
|
|
const v1y = y2 - y1;
|
|
const v0x = px - x1;
|
|
const v0y = py - y1;
|
|
const dot00 = v2x * v2x + v2y * v2y;
|
|
const dot01 = v2x * v1x + v2y * v1y;
|
|
const dot02 = v2x * v0x + v2y * v0y;
|
|
const dot11 = v1x * v1x + v1y * v1y;
|
|
const dot12 = v1x * v0x + v1y * v0y;
|
|
const invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
|
|
const u = (dot11 * dot02 - dot01 * dot12) * invDenom;
|
|
const v = (dot00 * dot12 - dot01 * dot02) * invDenom;
|
|
return u >= 0 && v >= 0 && u + v < 1;
|
|
}
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
class Triangle {
|
|
/**
|
|
* @param x - The X coord of the first point.
|
|
* @param y - The Y coord of the first point.
|
|
* @param x2 - The X coord of the second point.
|
|
* @param y2 - The Y coord of the second point.
|
|
* @param x3 - The X coord of the third point.
|
|
* @param y3 - The Y coord of the third point.
|
|
*/
|
|
constructor(x = 0, y = 0, x2 = 0, y2 = 0, x3 = 0, y3 = 0) {
|
|
/**
|
|
* The type of the object, mainly used to avoid `instanceof` checks
|
|
* @default 'triangle'
|
|
*/
|
|
this.type = "triangle";
|
|
this.x = x;
|
|
this.y = y;
|
|
this.x2 = x2;
|
|
this.y2 = y2;
|
|
this.x3 = x3;
|
|
this.y3 = y3;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this triangle
|
|
* @param x - The X coordinate of the point to test
|
|
* @param y - The Y coordinate of the point to test
|
|
* @returns Whether the x/y coordinates are within this Triangle
|
|
*/
|
|
contains(x, y) {
|
|
const s = (this.x - this.x3) * (y - this.y3) - (this.y - this.y3) * (x - this.x3);
|
|
const t = (this.x2 - this.x) * (y - this.y) - (this.y2 - this.y) * (x - this.x);
|
|
if (s < 0 !== t < 0 && s !== 0 && t !== 0) {
|
|
return false;
|
|
}
|
|
const d = (this.x3 - this.x2) * (y - this.y2) - (this.y3 - this.y2) * (x - this.x2);
|
|
return d === 0 || d < 0 === s + t <= 0;
|
|
}
|
|
/**
|
|
* Checks whether the x and y coordinates given are contained within this triangle including the stroke.
|
|
* @param pointX - The X coordinate of the point to test
|
|
* @param pointY - The Y coordinate of the point to test
|
|
* @param strokeWidth - The width of the line to check
|
|
* @returns Whether the x/y coordinates are within this triangle
|
|
*/
|
|
strokeContains(pointX, pointY, strokeWidth) {
|
|
const halfStrokeWidth = strokeWidth / 2;
|
|
const halfStrokeWidthSquared = halfStrokeWidth * halfStrokeWidth;
|
|
const { x, x2, x3, y, y2, y3 } = this;
|
|
if (squaredDistanceToLineSegment(pointX, pointY, x, y, x2, y3) <= halfStrokeWidthSquared || squaredDistanceToLineSegment(pointX, pointY, x2, y2, x3, y3) <= halfStrokeWidthSquared || squaredDistanceToLineSegment(pointX, pointY, x3, y3, x, y) <= halfStrokeWidthSquared) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* Creates a clone of this Triangle
|
|
* @returns a copy of the triangle
|
|
*/
|
|
clone() {
|
|
const triangle = new Triangle(
|
|
this.x,
|
|
this.y,
|
|
this.x2,
|
|
this.y2,
|
|
this.x3,
|
|
this.y3
|
|
);
|
|
return triangle;
|
|
}
|
|
/**
|
|
* Copies another triangle to this one.
|
|
* @param triangle - The triangle to copy from.
|
|
* @returns Returns itself.
|
|
*/
|
|
copyFrom(triangle) {
|
|
this.x = triangle.x;
|
|
this.y = triangle.y;
|
|
this.x2 = triangle.x2;
|
|
this.y2 = triangle.y2;
|
|
this.x3 = triangle.x3;
|
|
this.y3 = triangle.y3;
|
|
return this;
|
|
}
|
|
/**
|
|
* Copies this triangle to another one.
|
|
* @param triangle - The triangle to copy to.
|
|
* @returns Returns given parameter.
|
|
*/
|
|
copyTo(triangle) {
|
|
triangle.copyFrom(this);
|
|
return triangle;
|
|
}
|
|
/**
|
|
* Returns the framing rectangle of the triangle as a Rectangle object
|
|
* @param out - optional rectangle to store the result
|
|
* @returns The framing rectangle
|
|
*/
|
|
getBounds(out) {
|
|
out = out || new Rectangle();
|
|
const minX = Math.min(this.x, this.x2, this.x3);
|
|
const maxX = Math.max(this.x, this.x2, this.x3);
|
|
const minY = Math.min(this.y, this.y2, this.y3);
|
|
const maxY = Math.max(this.y, this.y2, this.y3);
|
|
out.x = minX;
|
|
out.y = minY;
|
|
out.width = maxX - minX;
|
|
out.height = maxY - minY;
|
|
return out;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
const _PrepareBase = class _PrepareBase {
|
|
/**
|
|
* @param {rendering.Renderer} renderer - A reference to the current renderer
|
|
*/
|
|
constructor(renderer) {
|
|
/** called per frame by the ticker, defer processing to next tick */
|
|
this._tick = () => {
|
|
this.timeout = setTimeout(this._processQueue, 0);
|
|
};
|
|
/** process the queue up to max item limit per frame */
|
|
this._processQueue = () => {
|
|
const { queue } = this;
|
|
let itemsProcessed = 0;
|
|
while (queue.length && itemsProcessed < _PrepareBase.uploadsPerFrame) {
|
|
const queueItem = queue.shift();
|
|
this.uploadQueueItem(queueItem);
|
|
itemsProcessed++;
|
|
}
|
|
if (queue.length) {
|
|
Ticker.system.addOnce(this._tick, this, UPDATE_PRIORITY.UTILITY);
|
|
} else {
|
|
this._resolve();
|
|
}
|
|
};
|
|
this.renderer = renderer;
|
|
this.queue = [];
|
|
this.resolves = [];
|
|
}
|
|
/**
|
|
* Return a copy of the queue
|
|
* @returns {PrepareQueueItem[]} The queue
|
|
*/
|
|
getQueue() {
|
|
return [...this.queue];
|
|
}
|
|
/**
|
|
* Add a textures or graphics resource to the queue
|
|
* @param {PrepareSourceItem | PrepareSourceItem[]} resource
|
|
*/
|
|
add(resource) {
|
|
const resourceArray = Array.isArray(resource) ? resource : [resource];
|
|
for (const resourceItem of resourceArray) {
|
|
if (resourceItem instanceof Container) {
|
|
this._addContainer(resourceItem);
|
|
} else {
|
|
this.resolveQueueItem(resourceItem, this.queue);
|
|
}
|
|
}
|
|
return this;
|
|
}
|
|
/**
|
|
* Recursively add a container and its children to the queue
|
|
* @param {Container} container - The container to add to the queue
|
|
*/
|
|
_addContainer(container) {
|
|
this.resolveQueueItem(container, this.queue);
|
|
for (const child of container.children) {
|
|
this._addContainer(child);
|
|
}
|
|
}
|
|
/**
|
|
* Upload all the textures and graphics to the GPU (optionally add more resources to the queue first)
|
|
* @param {PrepareSourceItem | PrepareSourceItem[] | undefined} resource
|
|
*/
|
|
upload(resource) {
|
|
if (resource) {
|
|
this.add(resource);
|
|
}
|
|
return new Promise((resolve) => {
|
|
if (this.queue.length) {
|
|
this.resolves.push(resolve);
|
|
this.dedupeQueue();
|
|
Ticker.system.addOnce(this._tick, this, UPDATE_PRIORITY.UTILITY);
|
|
} else {
|
|
resolve();
|
|
}
|
|
});
|
|
}
|
|
/** eliminate duplicates before processing */
|
|
dedupeQueue() {
|
|
const hash = /* @__PURE__ */ Object.create(null);
|
|
let nextUnique = 0;
|
|
for (let i = 0; i < this.queue.length; i++) {
|
|
const current = this.queue[i];
|
|
if (!hash[current.uid]) {
|
|
hash[current.uid] = true;
|
|
this.queue[nextUnique++] = current;
|
|
}
|
|
}
|
|
this.queue.length = nextUnique;
|
|
}
|
|
/** Call all the resolve callbacks */
|
|
_resolve() {
|
|
const { resolves } = this;
|
|
const array = resolves.slice(0);
|
|
resolves.length = 0;
|
|
for (const resolve of array) {
|
|
resolve();
|
|
}
|
|
}
|
|
};
|
|
/** The number of uploads to process per frame */
|
|
_PrepareBase.uploadsPerFrame = 4;
|
|
let PrepareBase = _PrepareBase;
|
|
|
|
"use strict";
|
|
var __defProp$p = Object.defineProperty;
|
|
var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$p = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$p = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$p.call(b, prop))
|
|
__defNormalProp$p(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$p)
|
|
for (var prop of __getOwnPropSymbols$p(b)) {
|
|
if (__propIsEnum$p.call(b, prop))
|
|
__defNormalProp$p(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$9 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$p)
|
|
for (var prop of __getOwnPropSymbols$p(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class Mesh extends ViewContainer {
|
|
constructor(...args) {
|
|
var _b;
|
|
let options = args[0];
|
|
if (options instanceof Geometry) {
|
|
deprecation(v8_0_0, "Mesh: use new Mesh({ geometry, shader }) instead");
|
|
options = {
|
|
geometry: options,
|
|
shader: args[1]
|
|
};
|
|
if (args[3]) {
|
|
deprecation(v8_0_0, "Mesh: drawMode argument has been removed, use geometry.topology instead");
|
|
options.geometry.topology = args[3];
|
|
}
|
|
}
|
|
const _a = options, { geometry, shader, texture, roundPixels, state } = _a, rest = __objRest$9(_a, ["geometry", "shader", "texture", "roundPixels", "state"]);
|
|
super(__spreadValues$p({
|
|
label: "Mesh"
|
|
}, rest));
|
|
this.renderPipeId = "mesh";
|
|
/** @ignore */
|
|
this._shader = null;
|
|
this.allowChildren = false;
|
|
this.shader = shader != null ? shader : null;
|
|
this.texture = (_b = texture != null ? texture : shader == null ? void 0 : shader.texture) != null ? _b : Texture.WHITE;
|
|
this.state = state != null ? state : State.for2d();
|
|
this._geometry = geometry;
|
|
this._geometry.on("update", this.onViewUpdate, this);
|
|
this.roundPixels = roundPixels != null ? roundPixels : false;
|
|
}
|
|
/** Alias for {@link scene.Mesh#shader}. */
|
|
get material() {
|
|
deprecation(v8_0_0, "mesh.material property has been removed, use mesh.shader instead");
|
|
return this._shader;
|
|
}
|
|
/**
|
|
* Represents the vertex and fragment shaders that processes the geometry and runs on the GPU.
|
|
* Can be shared between multiple Mesh objects.
|
|
*/
|
|
set shader(value) {
|
|
if (this._shader === value)
|
|
return;
|
|
this._shader = value;
|
|
this.onViewUpdate();
|
|
}
|
|
get shader() {
|
|
return this._shader;
|
|
}
|
|
/**
|
|
* Includes vertex positions, face indices, colors, UVs, and
|
|
* custom attributes within buffers, reducing the cost of passing all
|
|
* this data to the GPU. Can be shared between multiple Mesh objects.
|
|
*/
|
|
set geometry(value) {
|
|
var _a;
|
|
if (this._geometry === value)
|
|
return;
|
|
(_a = this._geometry) == null ? void 0 : _a.off("update", this.onViewUpdate, this);
|
|
value.on("update", this.onViewUpdate, this);
|
|
this._geometry = value;
|
|
this.onViewUpdate();
|
|
}
|
|
get geometry() {
|
|
return this._geometry;
|
|
}
|
|
/** The texture that the Mesh uses. Null for non-MeshMaterial shaders */
|
|
set texture(value) {
|
|
value || (value = Texture.EMPTY);
|
|
const currentTexture = this._texture;
|
|
if (currentTexture === value)
|
|
return;
|
|
if (currentTexture && currentTexture.dynamic)
|
|
currentTexture.off("update", this.onViewUpdate, this);
|
|
if (value.dynamic)
|
|
value.on("update", this.onViewUpdate, this);
|
|
if (this.shader) {
|
|
this.shader.texture = value;
|
|
}
|
|
this._texture = value;
|
|
this.onViewUpdate();
|
|
}
|
|
get texture() {
|
|
return this._texture;
|
|
}
|
|
get batched() {
|
|
if (this._shader)
|
|
return false;
|
|
if ((this.state.data & 12) !== 0)
|
|
return false;
|
|
if (this._geometry instanceof MeshGeometry) {
|
|
if (this._geometry.batchMode === "auto") {
|
|
return this._geometry.positions.length / 2 <= 100;
|
|
}
|
|
return this._geometry.batchMode === "batch";
|
|
}
|
|
return false;
|
|
}
|
|
/**
|
|
* The local bounds of the mesh.
|
|
* @type {rendering.Bounds}
|
|
*/
|
|
get bounds() {
|
|
return this._geometry.bounds;
|
|
}
|
|
/**
|
|
* Adds the bounds of this object to the bounds object.
|
|
* @param bounds - The output bounds object.
|
|
*/
|
|
addBounds(bounds) {
|
|
bounds.addBounds(this.geometry.bounds);
|
|
}
|
|
/**
|
|
* Checks if the object contains the given point.
|
|
* @param point - The point to check
|
|
*/
|
|
containsPoint(point) {
|
|
const { x, y } = point;
|
|
if (!this.bounds.containsPoint(x, y))
|
|
return false;
|
|
const vertices = this.geometry.getBuffer("aPosition").data;
|
|
const step = this.geometry.topology === "triangle-strip" ? 3 : 1;
|
|
if (this.geometry.getIndex()) {
|
|
const indices = this.geometry.getIndex().data;
|
|
const len = indices.length;
|
|
for (let i = 0; i + 2 < len; i += step) {
|
|
const ind0 = indices[i] * 2;
|
|
const ind1 = indices[i + 1] * 2;
|
|
const ind2 = indices[i + 2] * 2;
|
|
if (pointInTriangle(
|
|
x,
|
|
y,
|
|
vertices[ind0],
|
|
vertices[ind0 + 1],
|
|
vertices[ind1],
|
|
vertices[ind1 + 1],
|
|
vertices[ind2],
|
|
vertices[ind2 + 1]
|
|
)) {
|
|
return true;
|
|
}
|
|
}
|
|
} else {
|
|
const len = vertices.length / 2;
|
|
for (let i = 0; i + 2 < len; i += step) {
|
|
const ind0 = i * 2;
|
|
const ind1 = (i + 1) * 2;
|
|
const ind2 = (i + 2) * 2;
|
|
if (pointInTriangle(
|
|
x,
|
|
y,
|
|
vertices[ind0],
|
|
vertices[ind0 + 1],
|
|
vertices[ind1],
|
|
vertices[ind1 + 1],
|
|
vertices[ind2],
|
|
vertices[ind2 + 1]
|
|
)) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
/** @ignore */
|
|
onViewUpdate() {
|
|
this._didViewChangeTick++;
|
|
if (this.didViewUpdate)
|
|
return;
|
|
this.didViewUpdate = true;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.onChildViewUpdate(this);
|
|
}
|
|
}
|
|
/**
|
|
* Destroys this sprite renderable and optionally its texture.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
* have been set to that value
|
|
* @param {boolean} [options.texture=false] - Should it destroy the current texture of the renderable as well
|
|
* @param {boolean} [options.textureSource=false] - Should it destroy the textureSource of the renderable as well
|
|
*/
|
|
destroy(options) {
|
|
var _a;
|
|
super.destroy(options);
|
|
const destroyTexture = typeof options === "boolean" ? options : options == null ? void 0 : options.texture;
|
|
if (destroyTexture) {
|
|
const destroyTextureSource = typeof options === "boolean" ? options : options == null ? void 0 : options.textureSource;
|
|
this._texture.destroy(destroyTextureSource);
|
|
}
|
|
(_a = this._geometry) == null ? void 0 : _a.off("update", this.onViewUpdate, this);
|
|
this._texture = null;
|
|
this._geometry = null;
|
|
this._shader = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$o = Object.defineProperty;
|
|
var __defProps$a = Object.defineProperties;
|
|
var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$o = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$o = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$o.call(b, prop))
|
|
__defNormalProp$o(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$o)
|
|
for (var prop of __getOwnPropSymbols$o(b)) {
|
|
if (__propIsEnum$o.call(b, prop))
|
|
__defNormalProp$o(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
|
|
var __objRest$8 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$o)
|
|
for (var prop of __getOwnPropSymbols$o(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class AnimatedSprite extends Sprite {
|
|
/** @ignore */
|
|
constructor(...args) {
|
|
let options = args[0];
|
|
if (Array.isArray(args[0])) {
|
|
options = {
|
|
textures: args[0],
|
|
autoUpdate: args[1]
|
|
};
|
|
}
|
|
const _a = options, { textures, autoUpdate } = _a, rest = __objRest$8(_a, ["textures", "autoUpdate"]);
|
|
const [firstFrame] = textures;
|
|
super(__spreadProps$a(__spreadValues$o({}, rest), {
|
|
texture: firstFrame instanceof Texture ? firstFrame : firstFrame.texture
|
|
}));
|
|
this._textures = null;
|
|
this._durations = null;
|
|
this._autoUpdate = autoUpdate != null ? autoUpdate : true;
|
|
this._isConnectedToTicker = false;
|
|
this.animationSpeed = 1;
|
|
this.loop = true;
|
|
this.updateAnchor = false;
|
|
this.onComplete = null;
|
|
this.onFrameChange = null;
|
|
this.onLoop = null;
|
|
this._currentTime = 0;
|
|
this._playing = false;
|
|
this._previousFrame = null;
|
|
this.textures = textures;
|
|
}
|
|
/** Stops the AnimatedSprite. */
|
|
stop() {
|
|
if (!this._playing) {
|
|
return;
|
|
}
|
|
this._playing = false;
|
|
if (this._autoUpdate && this._isConnectedToTicker) {
|
|
Ticker.shared.remove(this.update, this);
|
|
this._isConnectedToTicker = false;
|
|
}
|
|
}
|
|
/** Plays the AnimatedSprite. */
|
|
play() {
|
|
if (this._playing) {
|
|
return;
|
|
}
|
|
this._playing = true;
|
|
if (this._autoUpdate && !this._isConnectedToTicker) {
|
|
Ticker.shared.add(this.update, this, UPDATE_PRIORITY.HIGH);
|
|
this._isConnectedToTicker = true;
|
|
}
|
|
}
|
|
/**
|
|
* Stops the AnimatedSprite and goes to a specific frame.
|
|
* @param frameNumber - Frame index to stop at.
|
|
*/
|
|
gotoAndStop(frameNumber) {
|
|
this.stop();
|
|
this.currentFrame = frameNumber;
|
|
}
|
|
/**
|
|
* Goes to a specific frame and begins playing the AnimatedSprite.
|
|
* @param frameNumber - Frame index to start at.
|
|
*/
|
|
gotoAndPlay(frameNumber) {
|
|
this.currentFrame = frameNumber;
|
|
this.play();
|
|
}
|
|
/**
|
|
* Updates the object transform for rendering.
|
|
* @param ticker - the ticker to use to update the object.
|
|
*/
|
|
update(ticker) {
|
|
if (!this._playing) {
|
|
return;
|
|
}
|
|
const deltaTime = ticker.deltaTime;
|
|
const elapsed = this.animationSpeed * deltaTime;
|
|
const previousFrame = this.currentFrame;
|
|
if (this._durations !== null) {
|
|
let lag = this._currentTime % 1 * this._durations[this.currentFrame];
|
|
lag += elapsed / 60 * 1e3;
|
|
while (lag < 0) {
|
|
this._currentTime--;
|
|
lag += this._durations[this.currentFrame];
|
|
}
|
|
const sign = Math.sign(this.animationSpeed * deltaTime);
|
|
this._currentTime = Math.floor(this._currentTime);
|
|
while (lag >= this._durations[this.currentFrame]) {
|
|
lag -= this._durations[this.currentFrame] * sign;
|
|
this._currentTime += sign;
|
|
}
|
|
this._currentTime += lag / this._durations[this.currentFrame];
|
|
} else {
|
|
this._currentTime += elapsed;
|
|
}
|
|
if (this._currentTime < 0 && !this.loop) {
|
|
this.gotoAndStop(0);
|
|
if (this.onComplete) {
|
|
this.onComplete();
|
|
}
|
|
} else if (this._currentTime >= this._textures.length && !this.loop) {
|
|
this.gotoAndStop(this._textures.length - 1);
|
|
if (this.onComplete) {
|
|
this.onComplete();
|
|
}
|
|
} else if (previousFrame !== this.currentFrame) {
|
|
if (this.loop && this.onLoop) {
|
|
if (this.animationSpeed > 0 && this.currentFrame < previousFrame || this.animationSpeed < 0 && this.currentFrame > previousFrame) {
|
|
this.onLoop();
|
|
}
|
|
}
|
|
this._updateTexture();
|
|
}
|
|
}
|
|
/** Updates the displayed texture to match the current frame index. */
|
|
_updateTexture() {
|
|
const currentFrame = this.currentFrame;
|
|
if (this._previousFrame === currentFrame) {
|
|
return;
|
|
}
|
|
this._previousFrame = currentFrame;
|
|
this.texture = this._textures[currentFrame];
|
|
if (this.updateAnchor) {
|
|
this.anchor.copyFrom(this.texture.defaultAnchor);
|
|
}
|
|
if (this.onFrameChange) {
|
|
this.onFrameChange(this.currentFrame);
|
|
}
|
|
}
|
|
/** Stops the AnimatedSprite and destroys it. */
|
|
destroy() {
|
|
this.stop();
|
|
super.destroy();
|
|
this.onComplete = null;
|
|
this.onFrameChange = null;
|
|
this.onLoop = null;
|
|
}
|
|
/**
|
|
* A short hand way of creating an AnimatedSprite from an array of frame ids.
|
|
* @param frames - The array of frames ids the AnimatedSprite will use as its texture frames.
|
|
* @returns - The new animated sprite with the specified frames.
|
|
*/
|
|
static fromFrames(frames) {
|
|
const textures = [];
|
|
for (let i = 0; i < frames.length; ++i) {
|
|
textures.push(Texture.from(frames[i]));
|
|
}
|
|
return new AnimatedSprite(textures);
|
|
}
|
|
/**
|
|
* A short hand way of creating an AnimatedSprite from an array of image ids.
|
|
* @param images - The array of image urls the AnimatedSprite will use as its texture frames.
|
|
* @returns The new animate sprite with the specified images as frames.
|
|
*/
|
|
static fromImages(images) {
|
|
const textures = [];
|
|
for (let i = 0; i < images.length; ++i) {
|
|
textures.push(Texture.from(images[i]));
|
|
}
|
|
return new AnimatedSprite(textures);
|
|
}
|
|
/**
|
|
* The total number of frames in the AnimatedSprite. This is the same as number of textures
|
|
* assigned to the AnimatedSprite.
|
|
* @readonly
|
|
* @default 0
|
|
*/
|
|
get totalFrames() {
|
|
return this._textures.length;
|
|
}
|
|
/** The array of textures used for this AnimatedSprite. */
|
|
get textures() {
|
|
return this._textures;
|
|
}
|
|
set textures(value) {
|
|
if (value[0] instanceof Texture) {
|
|
this._textures = value;
|
|
this._durations = null;
|
|
} else {
|
|
this._textures = [];
|
|
this._durations = [];
|
|
for (let i = 0; i < value.length; i++) {
|
|
this._textures.push(value[i].texture);
|
|
this._durations.push(value[i].time);
|
|
}
|
|
}
|
|
this._previousFrame = null;
|
|
this.gotoAndStop(0);
|
|
this._updateTexture();
|
|
}
|
|
/** The AnimatedSprite's current frame index. */
|
|
get currentFrame() {
|
|
let currentFrame = Math.floor(this._currentTime) % this._textures.length;
|
|
if (currentFrame < 0) {
|
|
currentFrame += this._textures.length;
|
|
}
|
|
return currentFrame;
|
|
}
|
|
set currentFrame(value) {
|
|
if (value < 0 || value > this.totalFrames - 1) {
|
|
throw new Error(`[AnimatedSprite]: Invalid frame index value ${value}, expected to be between 0 and totalFrames ${this.totalFrames}.`);
|
|
}
|
|
const previousFrame = this.currentFrame;
|
|
this._currentTime = value;
|
|
if (previousFrame !== this.currentFrame) {
|
|
this._updateTexture();
|
|
}
|
|
}
|
|
/**
|
|
* Indicates if the AnimatedSprite is currently playing.
|
|
* @readonly
|
|
*/
|
|
get playing() {
|
|
return this._playing;
|
|
}
|
|
/** Whether to use Ticker.shared to auto update animation time. */
|
|
get autoUpdate() {
|
|
return this._autoUpdate;
|
|
}
|
|
set autoUpdate(value) {
|
|
if (value !== this._autoUpdate) {
|
|
this._autoUpdate = value;
|
|
if (!this._autoUpdate && this._isConnectedToTicker) {
|
|
Ticker.shared.remove(this.update, this);
|
|
this._isConnectedToTicker = false;
|
|
} else if (this._autoUpdate && !this._isConnectedToTicker && this._playing) {
|
|
Ticker.shared.add(this.update, this);
|
|
this._isConnectedToTicker = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class Transform {
|
|
/**
|
|
* @param options - Options for the transform.
|
|
* @param options.matrix - The matrix to use.
|
|
* @param options.observer - The observer to use.
|
|
*/
|
|
constructor({ matrix, observer } = {}) {
|
|
this.dirty = true;
|
|
this._matrix = matrix != null ? matrix : new Matrix();
|
|
this.observer = observer;
|
|
this.position = new ObservablePoint(this, 0, 0);
|
|
this.scale = new ObservablePoint(this, 1, 1);
|
|
this.pivot = new ObservablePoint(this, 0, 0);
|
|
this.skew = new ObservablePoint(this, 0, 0);
|
|
this._rotation = 0;
|
|
this._cx = 1;
|
|
this._sx = 0;
|
|
this._cy = 0;
|
|
this._sy = 1;
|
|
}
|
|
/**
|
|
* This matrix is computed by combining this Transforms position, scale, rotation, skew, and pivot
|
|
* properties into a single matrix.
|
|
* @readonly
|
|
*/
|
|
get matrix() {
|
|
const lt = this._matrix;
|
|
if (!this.dirty)
|
|
return lt;
|
|
lt.a = this._cx * this.scale.x;
|
|
lt.b = this._sx * this.scale.x;
|
|
lt.c = this._cy * this.scale.y;
|
|
lt.d = this._sy * this.scale.y;
|
|
lt.tx = this.position.x - (this.pivot.x * lt.a + this.pivot.y * lt.c);
|
|
lt.ty = this.position.y - (this.pivot.x * lt.b + this.pivot.y * lt.d);
|
|
this.dirty = false;
|
|
return lt;
|
|
}
|
|
/**
|
|
* Called when a value changes.
|
|
* @param point
|
|
* @internal
|
|
* @private
|
|
*/
|
|
_onUpdate(point) {
|
|
var _a;
|
|
this.dirty = true;
|
|
if (point === this.skew) {
|
|
this.updateSkew();
|
|
}
|
|
(_a = this.observer) == null ? void 0 : _a._onUpdate(this);
|
|
}
|
|
/** Called when the skew or the rotation changes. */
|
|
updateSkew() {
|
|
this._cx = Math.cos(this._rotation + this.skew.y);
|
|
this._sx = Math.sin(this._rotation + this.skew.y);
|
|
this._cy = -Math.sin(this._rotation - this.skew.x);
|
|
this._sy = Math.cos(this._rotation - this.skew.x);
|
|
this.dirty = true;
|
|
}
|
|
toString() {
|
|
return `[pixi.js/math:Transform position=(${this.position.x}, ${this.position.y}) rotation=${this.rotation} scale=(${this.scale.x}, ${this.scale.y}) skew=(${this.skew.x}, ${this.skew.y}) ]`;
|
|
}
|
|
/**
|
|
* Decomposes a matrix and sets the transforms properties based on it.
|
|
* @param matrix - The matrix to decompose
|
|
*/
|
|
setFromMatrix(matrix) {
|
|
matrix.decompose(this);
|
|
this.dirty = true;
|
|
}
|
|
/** The rotation of the object in radians. */
|
|
get rotation() {
|
|
return this._rotation;
|
|
}
|
|
set rotation(value) {
|
|
if (this._rotation !== value) {
|
|
this._rotation = value;
|
|
this._onUpdate(this.skew);
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$n = Object.defineProperty;
|
|
var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$n = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$n = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$n.call(b, prop))
|
|
__defNormalProp$n(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$n)
|
|
for (var prop of __getOwnPropSymbols$n(b)) {
|
|
if (__propIsEnum$n.call(b, prop))
|
|
__defNormalProp$n(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$7 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$n.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$n)
|
|
for (var prop of __getOwnPropSymbols$n(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$n.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
const _TilingSprite = class _TilingSprite extends ViewContainer {
|
|
constructor(...args) {
|
|
let options = args[0] || {};
|
|
if (options instanceof Texture) {
|
|
options = { texture: options };
|
|
}
|
|
if (args.length > 1) {
|
|
deprecation(v8_0_0, "use new TilingSprite({ texture, width:100, height:100 }) instead");
|
|
options.width = args[1];
|
|
options.height = args[2];
|
|
}
|
|
options = __spreadValues$n(__spreadValues$n({}, _TilingSprite.defaultOptions), options);
|
|
const _a = options != null ? options : {}, {
|
|
texture,
|
|
anchor,
|
|
tilePosition,
|
|
tileScale,
|
|
tileRotation,
|
|
width,
|
|
height,
|
|
applyAnchorToTexture,
|
|
roundPixels
|
|
} = _a, rest = __objRest$7(_a, [
|
|
"texture",
|
|
"anchor",
|
|
"tilePosition",
|
|
"tileScale",
|
|
"tileRotation",
|
|
"width",
|
|
"height",
|
|
"applyAnchorToTexture",
|
|
"roundPixels"
|
|
]);
|
|
super(__spreadValues$n({
|
|
label: "TilingSprite"
|
|
}, rest));
|
|
this.renderPipeId = "tilingSprite";
|
|
this.batched = true;
|
|
this.allowChildren = false;
|
|
this._anchor = new ObservablePoint(
|
|
{
|
|
_onUpdate: () => {
|
|
this.onViewUpdate();
|
|
}
|
|
}
|
|
);
|
|
this._applyAnchorToTexture = applyAnchorToTexture;
|
|
this.texture = texture;
|
|
this._width = width != null ? width : texture.width;
|
|
this._height = height != null ? height : texture.height;
|
|
this._tileTransform = new Transform({
|
|
observer: {
|
|
_onUpdate: () => this.onViewUpdate()
|
|
}
|
|
});
|
|
if (anchor)
|
|
this.anchor = anchor;
|
|
this.tilePosition = tilePosition;
|
|
this.tileScale = tileScale;
|
|
this.tileRotation = tileRotation;
|
|
this.roundPixels = roundPixels != null ? roundPixels : false;
|
|
}
|
|
/**
|
|
* Creates a new tiling sprite.
|
|
* @param source - The source to create the texture from.
|
|
* @param options - The options for creating the tiling sprite.
|
|
* @returns A new tiling sprite.
|
|
*/
|
|
static from(source, options = {}) {
|
|
if (typeof source === "string") {
|
|
return new _TilingSprite(__spreadValues$n({
|
|
texture: Cache.get(source)
|
|
}, options));
|
|
}
|
|
return new _TilingSprite(__spreadValues$n({
|
|
texture: source
|
|
}, options));
|
|
}
|
|
/**
|
|
* Changes frame clamping in corresponding textureMatrix
|
|
* Change to -0.5 to add a pixel to the edge, recommended for transparent trimmed textures in atlas
|
|
* @default 0.5
|
|
* @member {number}
|
|
*/
|
|
get clampMargin() {
|
|
return this._texture.textureMatrix.clampMargin;
|
|
}
|
|
set clampMargin(value) {
|
|
this._texture.textureMatrix.clampMargin = value;
|
|
}
|
|
/**
|
|
* The anchor sets the origin point of the sprite. The default value is taken from the {@link Texture}
|
|
* and passed to the constructor.
|
|
*
|
|
* The default is `(0,0)`, this means the sprite's origin is the top left.
|
|
*
|
|
* Setting the anchor to `(0.5,0.5)` means the sprite's origin is centered.
|
|
*
|
|
* Setting the anchor to `(1,1)` would mean the sprite's origin point will be the bottom right corner.
|
|
*
|
|
* If you pass only single parameter, it will set both x and y to the same value as shown in the example below.
|
|
* @example
|
|
* import { TilingSprite } from 'pixi.js';
|
|
*
|
|
* const sprite = new TilingSprite({texture: Texture.WHITE});
|
|
* sprite.anchor.set(0.5); // This will set the origin to center. (0.5) is same as (0.5, 0.5).
|
|
*/
|
|
get anchor() {
|
|
return this._anchor;
|
|
}
|
|
set anchor(value) {
|
|
typeof value === "number" ? this._anchor.set(value) : this._anchor.copyFrom(value);
|
|
}
|
|
/** The offset of the image that is being tiled. */
|
|
get tilePosition() {
|
|
return this._tileTransform.position;
|
|
}
|
|
set tilePosition(value) {
|
|
this._tileTransform.position.copyFrom(value);
|
|
}
|
|
/** The scaling of the image that is being tiled. */
|
|
get tileScale() {
|
|
return this._tileTransform.scale;
|
|
}
|
|
set tileScale(value) {
|
|
typeof value === "number" ? this._tileTransform.scale.set(value) : this._tileTransform.scale.copyFrom(value);
|
|
}
|
|
set tileRotation(value) {
|
|
this._tileTransform.rotation = value;
|
|
}
|
|
/** The rotation of the image that is being tiled. */
|
|
get tileRotation() {
|
|
return this._tileTransform.rotation;
|
|
}
|
|
/** The transform of the image that is being tiled. */
|
|
get tileTransform() {
|
|
return this._tileTransform;
|
|
}
|
|
/**
|
|
* The local bounds of the sprite.
|
|
* @type {rendering.Bounds}
|
|
*/
|
|
get bounds() {
|
|
if (this._boundsDirty) {
|
|
this._updateBounds();
|
|
this._boundsDirty = false;
|
|
}
|
|
return this._bounds;
|
|
}
|
|
set texture(value) {
|
|
value || (value = Texture.EMPTY);
|
|
const currentTexture = this._texture;
|
|
if (currentTexture === value)
|
|
return;
|
|
if (currentTexture && currentTexture.dynamic)
|
|
currentTexture.off("update", this.onViewUpdate, this);
|
|
if (value.dynamic)
|
|
value.on("update", this.onViewUpdate, this);
|
|
this._texture = value;
|
|
this.onViewUpdate();
|
|
}
|
|
/** The texture that the sprite is using. */
|
|
get texture() {
|
|
return this._texture;
|
|
}
|
|
/** The width of the tiling area. */
|
|
set width(value) {
|
|
this._width = value;
|
|
this.onViewUpdate();
|
|
}
|
|
get width() {
|
|
return this._width;
|
|
}
|
|
set height(value) {
|
|
this._height = value;
|
|
this.onViewUpdate();
|
|
}
|
|
/** The height of the tiling area. */
|
|
get height() {
|
|
return this._height;
|
|
}
|
|
/**
|
|
* Sets the size of the TilingSprite to the specified width and height.
|
|
* This is faster than setting the width and height separately.
|
|
* @param value - This can be either a number or a [Size]{@link Size} object.
|
|
* @param height - The height to set. Defaults to the value of `width` if not provided.
|
|
*/
|
|
setSize(value, height) {
|
|
var _a;
|
|
if (typeof value === "object") {
|
|
height = (_a = value.height) != null ? _a : value.width;
|
|
value = value.width;
|
|
}
|
|
this._width = value;
|
|
this._height = height != null ? height : value;
|
|
this.onViewUpdate();
|
|
}
|
|
/**
|
|
* Retrieves the size of the TilingSprite as a [Size]{@link Size} object.
|
|
* This is faster than get the width and height separately.
|
|
* @param out - Optional object to store the size in.
|
|
* @returns - The size of the TilingSprite.
|
|
*/
|
|
getSize(out) {
|
|
out || (out = {});
|
|
out.width = this._width;
|
|
out.height = this._height;
|
|
return out;
|
|
}
|
|
_updateBounds() {
|
|
const bounds = this._bounds;
|
|
const anchor = this._anchor;
|
|
const width = this._width;
|
|
const height = this._height;
|
|
bounds.maxX = -anchor._x * width;
|
|
bounds.minX = bounds.maxX + width;
|
|
bounds.maxY = -anchor._y * height;
|
|
bounds.minY = bounds.maxY + height;
|
|
}
|
|
/**
|
|
* Adds the bounds of this object to the bounds object.
|
|
* @param bounds - The output bounds object.
|
|
*/
|
|
addBounds(bounds) {
|
|
const _bounds = this.bounds;
|
|
bounds.addFrame(
|
|
_bounds.minX,
|
|
_bounds.minY,
|
|
_bounds.maxX,
|
|
_bounds.maxY
|
|
);
|
|
}
|
|
/**
|
|
* Checks if the object contains the given point.
|
|
* @param point - The point to check
|
|
*/
|
|
containsPoint(point) {
|
|
const width = this._width;
|
|
const height = this._height;
|
|
const x1 = -width * this._anchor._x;
|
|
let y1 = 0;
|
|
if (point.x >= x1 && point.x <= x1 + width) {
|
|
y1 = -height * this._anchor._y;
|
|
if (point.y >= y1 && point.y <= y1 + height)
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
onViewUpdate() {
|
|
this._boundsDirty = true;
|
|
this._didTilingSpriteUpdate = true;
|
|
this._didViewChangeTick++;
|
|
if (this.didViewUpdate)
|
|
return;
|
|
this.didViewUpdate = true;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.onChildViewUpdate(this);
|
|
}
|
|
}
|
|
/**
|
|
* Destroys this sprite renderable and optionally its texture.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
* have been set to that value
|
|
* @param {boolean} [options.texture=false] - Should it destroy the current texture of the renderable as well
|
|
* @param {boolean} [options.textureSource=false] - Should it destroy the textureSource of the renderable as well
|
|
*/
|
|
destroy(options = false) {
|
|
super.destroy(options);
|
|
this._anchor = null;
|
|
this._tileTransform = null;
|
|
this._bounds = null;
|
|
const destroyTexture = typeof options === "boolean" ? options : options == null ? void 0 : options.texture;
|
|
if (destroyTexture) {
|
|
const destroyTextureSource = typeof options === "boolean" ? options : options == null ? void 0 : options.textureSource;
|
|
this._texture.destroy(destroyTextureSource);
|
|
}
|
|
this._texture = null;
|
|
}
|
|
};
|
|
/** default options for the TilingSprite */
|
|
_TilingSprite.defaultOptions = {
|
|
/** The texture to use for the sprite. */
|
|
texture: Texture.EMPTY,
|
|
/** The anchor point of the sprite */
|
|
anchor: { x: 0, y: 0 },
|
|
/** The offset of the image that is being tiled. */
|
|
tilePosition: { x: 0, y: 0 },
|
|
/** Scaling of the image that is being tiled. */
|
|
tileScale: { x: 1, y: 1 },
|
|
/** The rotation of the image that is being tiled. */
|
|
tileRotation: 0,
|
|
/** TODO */
|
|
applyAnchorToTexture: false
|
|
};
|
|
let TilingSprite = _TilingSprite;
|
|
|
|
"use strict";
|
|
var __defProp$m = Object.defineProperty;
|
|
var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$m = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$m = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$m.call(b, prop))
|
|
__defNormalProp$m(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$m)
|
|
for (var prop of __getOwnPropSymbols$m(b)) {
|
|
if (__propIsEnum$m.call(b, prop))
|
|
__defNormalProp$m(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$6 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$m)
|
|
for (var prop of __getOwnPropSymbols$m(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class AbstractText extends ViewContainer {
|
|
constructor(options, styleClass) {
|
|
const _a = options, { text, resolution, style, anchor, width, height, roundPixels } = _a, rest = __objRest$6(_a, ["text", "resolution", "style", "anchor", "width", "height", "roundPixels"]);
|
|
super(__spreadValues$m({}, rest));
|
|
this.batched = true;
|
|
this._resolution = null;
|
|
this._autoResolution = true;
|
|
this._didTextUpdate = true;
|
|
this._styleClass = styleClass;
|
|
this.text = text != null ? text : "";
|
|
this.style = style;
|
|
this.resolution = resolution != null ? resolution : null;
|
|
this.allowChildren = false;
|
|
this._anchor = new ObservablePoint(
|
|
{
|
|
_onUpdate: () => {
|
|
this.onViewUpdate();
|
|
}
|
|
}
|
|
);
|
|
if (anchor)
|
|
this.anchor = anchor;
|
|
this.roundPixels = roundPixels != null ? roundPixels : false;
|
|
if (width !== void 0)
|
|
this.width = width;
|
|
if (height !== void 0)
|
|
this.height = height;
|
|
}
|
|
/**
|
|
* The anchor sets the origin point of the text.
|
|
* The default is `(0,0)`, this means the text's origin is the top left.
|
|
*
|
|
* Setting the anchor to `(0.5,0.5)` means the text's origin is centered.
|
|
*
|
|
* Setting the anchor to `(1,1)` would mean the text's origin point will be the bottom right corner.
|
|
*
|
|
* If you pass only single parameter, it will set both x and y to the same value as shown in the example below.
|
|
* @example
|
|
* import { Text } from 'pixi.js';
|
|
*
|
|
* const text = new Text('hello world');
|
|
* text.anchor.set(0.5); // This will set the origin to center. (0.5) is same as (0.5, 0.5).
|
|
*/
|
|
get anchor() {
|
|
return this._anchor;
|
|
}
|
|
set anchor(value) {
|
|
typeof value === "number" ? this._anchor.set(value) : this._anchor.copyFrom(value);
|
|
}
|
|
/** Set the copy for the text object. To split a line you can use '\n'. */
|
|
set text(value) {
|
|
value = value.toString();
|
|
if (this._text === value)
|
|
return;
|
|
this._text = value;
|
|
this.onViewUpdate();
|
|
}
|
|
get text() {
|
|
return this._text;
|
|
}
|
|
/**
|
|
* The resolution / device pixel ratio of the canvas.
|
|
* @default 1
|
|
*/
|
|
set resolution(value) {
|
|
this._autoResolution = value === null;
|
|
this._resolution = value;
|
|
this.onViewUpdate();
|
|
}
|
|
get resolution() {
|
|
return this._resolution;
|
|
}
|
|
get style() {
|
|
return this._style;
|
|
}
|
|
/**
|
|
* Set the style of the text.
|
|
*
|
|
* Set up an event listener to listen for changes on the style object and mark the text as dirty.
|
|
*
|
|
* If setting the `style` can also be partial {@link AnyTextStyleOptions}.
|
|
* @type {
|
|
* text.TextStyle |
|
|
* Partial<text.TextStyle> |
|
|
* text.TextStyleOptions |
|
|
* text.HTMLTextStyle |
|
|
* Partial<text.HTMLTextStyle> |
|
|
* text.HTMLTextStyleOptions
|
|
* }
|
|
*/
|
|
set style(style) {
|
|
var _a;
|
|
style = style || {};
|
|
(_a = this._style) == null ? void 0 : _a.off("update", this.onViewUpdate, this);
|
|
if (style instanceof this._styleClass) {
|
|
this._style = style;
|
|
} else {
|
|
this._style = new this._styleClass(style);
|
|
}
|
|
this._style.on("update", this.onViewUpdate, this);
|
|
this.onViewUpdate();
|
|
}
|
|
/**
|
|
* The local bounds of the Text.
|
|
* @type {rendering.Bounds}
|
|
*/
|
|
get bounds() {
|
|
if (this._boundsDirty) {
|
|
this._updateBounds();
|
|
this._boundsDirty = false;
|
|
}
|
|
return this._bounds;
|
|
}
|
|
/** The width of the sprite, setting this will actually modify the scale to achieve the value set. */
|
|
get width() {
|
|
return Math.abs(this.scale.x) * this.bounds.width;
|
|
}
|
|
set width(value) {
|
|
this._setWidth(value, this.bounds.width);
|
|
}
|
|
/** The height of the sprite, setting this will actually modify the scale to achieve the value set. */
|
|
get height() {
|
|
return Math.abs(this.scale.y) * this.bounds.height;
|
|
}
|
|
set height(value) {
|
|
this._setHeight(value, this.bounds.height);
|
|
}
|
|
/**
|
|
* Retrieves the size of the Text as a [Size]{@link Size} object.
|
|
* This is faster than get the width and height separately.
|
|
* @param out - Optional object to store the size in.
|
|
* @returns - The size of the Text.
|
|
*/
|
|
getSize(out) {
|
|
out || (out = {});
|
|
out.width = Math.abs(this.scale.x) * this.bounds.width;
|
|
out.height = Math.abs(this.scale.y) * this.bounds.height;
|
|
return out;
|
|
}
|
|
/**
|
|
* Sets the size of the Text to the specified width and height.
|
|
* This is faster than setting the width and height separately.
|
|
* @param value - This can be either a number or a [Size]{@link Size} object.
|
|
* @param height - The height to set. Defaults to the value of `width` if not provided.
|
|
*/
|
|
setSize(value, height) {
|
|
var _a;
|
|
if (typeof value === "object") {
|
|
height = (_a = value.height) != null ? _a : value.width;
|
|
value = value.width;
|
|
} else {
|
|
height != null ? height : height = value;
|
|
}
|
|
value !== void 0 && this._setWidth(value, this.bounds.width);
|
|
height !== void 0 && this._setHeight(height, this.bounds.height);
|
|
}
|
|
/**
|
|
* Adds the bounds of this text to the bounds object.
|
|
* @param bounds - The output bounds object.
|
|
*/
|
|
addBounds(bounds) {
|
|
const _bounds = this.bounds;
|
|
bounds.addFrame(
|
|
_bounds.minX,
|
|
_bounds.minY,
|
|
_bounds.maxX,
|
|
_bounds.maxY
|
|
);
|
|
}
|
|
/**
|
|
* Checks if the text contains the given point.
|
|
* @param point - The point to check
|
|
*/
|
|
containsPoint(point) {
|
|
const width = this.bounds.width;
|
|
const height = this.bounds.height;
|
|
const x1 = -width * this.anchor.x;
|
|
let y1 = 0;
|
|
if (point.x >= x1 && point.x <= x1 + width) {
|
|
y1 = -height * this.anchor.y;
|
|
if (point.y >= y1 && point.y <= y1 + height)
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
onViewUpdate() {
|
|
this._didViewChangeTick++;
|
|
this._boundsDirty = true;
|
|
if (this.didViewUpdate)
|
|
return;
|
|
this.didViewUpdate = true;
|
|
this._didTextUpdate = true;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.onChildViewUpdate(this);
|
|
}
|
|
}
|
|
_getKey() {
|
|
return `${this.text}:${this._style.styleKey}:${this._resolution}`;
|
|
}
|
|
/**
|
|
* Destroys this text renderable and optionally its style texture.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
* have been set to that value
|
|
* @param {boolean} [options.texture=false] - Should it destroy the texture of the text style
|
|
* @param {boolean} [options.textureSource=false] - Should it destroy the textureSource of the text style
|
|
* @param {boolean} [options.style=false] - Should it destroy the style of the text
|
|
*/
|
|
destroy(options = false) {
|
|
super.destroy(options);
|
|
this.owner = null;
|
|
this._bounds = null;
|
|
this._anchor = null;
|
|
if (typeof options === "boolean" ? options : options == null ? void 0 : options.style) {
|
|
this._style.destroy(options);
|
|
}
|
|
this._style = null;
|
|
this._text = null;
|
|
}
|
|
}
|
|
function ensureOptions(args, name) {
|
|
var _a;
|
|
let options = (_a = args[0]) != null ? _a : {};
|
|
if (typeof options === "string" || args[1]) {
|
|
deprecation(v8_0_0, `use new ${name}({ text: "hi!", style }) instead`);
|
|
options = {
|
|
text: options,
|
|
style: args[1]
|
|
};
|
|
}
|
|
return options;
|
|
}
|
|
|
|
"use strict";
|
|
class Text extends AbstractText {
|
|
constructor(...args) {
|
|
const options = ensureOptions(args, "Text");
|
|
super(options, TextStyle);
|
|
this.renderPipeId = "text";
|
|
}
|
|
_updateBounds() {
|
|
const bounds = this._bounds;
|
|
const anchor = this._anchor;
|
|
const canvasMeasurement = CanvasTextMetrics.measureText(
|
|
this._text,
|
|
this._style
|
|
);
|
|
const { width, height } = canvasMeasurement;
|
|
bounds.minX = -anchor._x * width;
|
|
bounds.maxX = bounds.minX + width;
|
|
bounds.minY = -anchor._y * height;
|
|
bounds.maxY = bounds.minY + height;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class PrepareQueue extends PrepareBase {
|
|
/**
|
|
* Resolve the given resource type and return an item for the queue
|
|
* @param source
|
|
* @param queue
|
|
*/
|
|
resolveQueueItem(source, queue) {
|
|
if (source instanceof Container) {
|
|
this.resolveContainerQueueItem(source, queue);
|
|
} else if (source instanceof TextureSource || source instanceof Texture) {
|
|
queue.push(source.source);
|
|
} else if (source instanceof GraphicsContext) {
|
|
queue.push(source);
|
|
}
|
|
return null;
|
|
}
|
|
/**
|
|
* Resolve the given container and return an item for the queue
|
|
* @param container
|
|
* @param queue
|
|
*/
|
|
resolveContainerQueueItem(container, queue) {
|
|
if (container instanceof Sprite || container instanceof TilingSprite || container instanceof Mesh) {
|
|
queue.push(container.texture.source);
|
|
} else if (container instanceof Text) {
|
|
queue.push(container);
|
|
} else if (container instanceof Graphics) {
|
|
queue.push(container.context);
|
|
} else if (container instanceof AnimatedSprite) {
|
|
container.textures.forEach((textureOrFrame) => {
|
|
if (textureOrFrame.source) {
|
|
queue.push(textureOrFrame.source);
|
|
} else {
|
|
queue.push(textureOrFrame.texture.source);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
/**
|
|
* Resolve the given graphics context and return an item for the queue
|
|
* @param graphicsContext
|
|
*/
|
|
resolveGraphicsContextQueueItem(graphicsContext) {
|
|
this.renderer.graphicsContext.getContextRenderData(graphicsContext);
|
|
const { instructions } = graphicsContext;
|
|
for (const instruction of instructions) {
|
|
if (instruction.action === "texture") {
|
|
const { image } = instruction.data;
|
|
return image.source;
|
|
} else if (instruction.action === "fill") {
|
|
const { texture } = instruction.data.style;
|
|
return texture.source;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class BitmapText extends AbstractText {
|
|
constructor(...args) {
|
|
var _a, _b, _c;
|
|
const options = ensureOptions(args, "BitmapText");
|
|
(_a = options.style) != null ? _a : options.style = options.style || {};
|
|
(_c = (_b = options.style).fill) != null ? _c : _b.fill = 16777215;
|
|
super(options, TextStyle);
|
|
this.renderPipeId = "bitmapText";
|
|
}
|
|
_updateBounds() {
|
|
const bounds = this._bounds;
|
|
const anchor = this._anchor;
|
|
const bitmapMeasurement = BitmapFontManager.measureText(this.text, this._style);
|
|
const scale = bitmapMeasurement.scale;
|
|
const offset = bitmapMeasurement.offsetY * scale;
|
|
let width = bitmapMeasurement.width * scale;
|
|
let height = bitmapMeasurement.height * scale;
|
|
const stroke = this._style._stroke;
|
|
if (stroke) {
|
|
width += stroke.width;
|
|
height += stroke.width;
|
|
}
|
|
bounds.minX = -anchor._x * width;
|
|
bounds.maxX = bounds.minX + width;
|
|
bounds.minY = -anchor._y * (height + offset);
|
|
bounds.maxY = bounds.minY + height;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class HTMLText extends AbstractText {
|
|
constructor(...args) {
|
|
const options = ensureOptions(args, "HtmlText");
|
|
super(options, HTMLTextStyle);
|
|
this.renderPipeId = "htmlText";
|
|
}
|
|
_updateBounds() {
|
|
const bounds = this._bounds;
|
|
const anchor = this._anchor;
|
|
const htmlMeasurement = measureHtmlText(this.text, this._style);
|
|
const { width, height } = htmlMeasurement;
|
|
bounds.minX = -anchor._x * width;
|
|
bounds.maxX = bounds.minX + width;
|
|
bounds.minY = -anchor._y * height;
|
|
bounds.maxY = bounds.minY + height;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class PrepareUpload extends PrepareQueue {
|
|
/**
|
|
* Upload the given queue item
|
|
* @param item
|
|
*/
|
|
uploadQueueItem(item) {
|
|
if (item instanceof TextureSource) {
|
|
this.uploadTextureSource(item);
|
|
} else if (item instanceof Text) {
|
|
this.uploadText(item);
|
|
} else if (item instanceof HTMLText) {
|
|
this.uploadHTMLText(item);
|
|
} else if (item instanceof BitmapText) {
|
|
this.uploadBitmapText(item);
|
|
} else if (item instanceof GraphicsContext) {
|
|
this.uploadGraphicsContext(item);
|
|
}
|
|
}
|
|
uploadTextureSource(textureSource) {
|
|
this.renderer.texture.initSource(textureSource);
|
|
}
|
|
uploadText(_text) {
|
|
this.renderer.renderPipes.text.initGpuText(_text);
|
|
}
|
|
uploadBitmapText(_text) {
|
|
this.renderer.renderPipes.bitmapText.initGpuText(_text);
|
|
}
|
|
uploadHTMLText(_text) {
|
|
this.renderer.renderPipes.htmlText.initGpuText(_text);
|
|
}
|
|
/**
|
|
* Resolve the given graphics context and return an item for the queue
|
|
* @param graphicsContext
|
|
*/
|
|
uploadGraphicsContext(graphicsContext) {
|
|
this.renderer.graphicsContext.getContextRenderData(graphicsContext);
|
|
const { instructions } = graphicsContext;
|
|
for (const instruction of instructions) {
|
|
if (instruction.action === "texture") {
|
|
const { image } = instruction.data;
|
|
this.uploadTextureSource(image.source);
|
|
} else if (instruction.action === "fill") {
|
|
const { texture } = instruction.data.style;
|
|
this.uploadTextureSource(texture.source);
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class PrepareSystem extends PrepareUpload {
|
|
/** Destroys the plugin, don't use after this. */
|
|
destroy() {
|
|
clearTimeout(this.timeout);
|
|
this.renderer = null;
|
|
this.queue = null;
|
|
this.resolves = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
PrepareSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "prepare"
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
class GlBatchAdaptor {
|
|
constructor() {
|
|
this._didUpload = false;
|
|
this._tempState = State.for2d();
|
|
}
|
|
init(batcherPipe) {
|
|
batcherPipe.renderer.runners.contextChange.add(this);
|
|
}
|
|
contextChange() {
|
|
this._didUpload = false;
|
|
}
|
|
start(batchPipe, geometry, shader) {
|
|
const renderer = batchPipe.renderer;
|
|
renderer.shader.bind(shader, this._didUpload);
|
|
renderer.shader.updateUniformGroup(renderer.globalUniforms.uniformGroup);
|
|
renderer.geometry.bind(geometry, shader.glProgram);
|
|
}
|
|
execute(batchPipe, batch) {
|
|
const renderer = batchPipe.renderer;
|
|
this._didUpload = true;
|
|
this._tempState.blendMode = batch.blendMode;
|
|
renderer.state.set(this._tempState);
|
|
const textures = batch.textures.textures;
|
|
for (let i = 0; i < batch.textures.count; i++) {
|
|
renderer.texture.bind(textures[i], i);
|
|
}
|
|
renderer.geometry.draw("triangle-list", batch.size, batch.start);
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlBatchAdaptor.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipesAdaptor
|
|
],
|
|
name: "batch"
|
|
};
|
|
|
|
"use strict";
|
|
function generateGPULayout(maxTextures) {
|
|
const gpuLayout = [];
|
|
let bindIndex = 0;
|
|
for (let i = 0; i < maxTextures; i++) {
|
|
gpuLayout[bindIndex] = {
|
|
texture: {
|
|
sampleType: "float",
|
|
viewDimension: "2d",
|
|
multisampled: false
|
|
},
|
|
binding: bindIndex,
|
|
visibility: GPUShaderStage.FRAGMENT
|
|
};
|
|
bindIndex++;
|
|
gpuLayout[bindIndex] = {
|
|
sampler: {
|
|
type: "filtering"
|
|
},
|
|
binding: bindIndex,
|
|
visibility: GPUShaderStage.FRAGMENT
|
|
};
|
|
bindIndex++;
|
|
}
|
|
return gpuLayout;
|
|
}
|
|
|
|
"use strict";
|
|
function generateLayout(maxTextures) {
|
|
const layout = {};
|
|
let bindIndex = 0;
|
|
for (let i = 0; i < maxTextures; i++) {
|
|
layout[`textureSource${i + 1}`] = bindIndex++;
|
|
layout[`textureSampler${i + 1}`] = bindIndex++;
|
|
}
|
|
return layout;
|
|
}
|
|
|
|
"use strict";
|
|
const tempState = State.for2d();
|
|
class GpuBatchAdaptor {
|
|
start(batchPipe, geometry, shader) {
|
|
const renderer = batchPipe.renderer;
|
|
const encoder = renderer.encoder;
|
|
const program = shader.gpuProgram;
|
|
this._shader = shader;
|
|
this._geometry = geometry;
|
|
encoder.setGeometry(geometry, program);
|
|
tempState.blendMode = "normal";
|
|
renderer.pipeline.getPipeline(
|
|
geometry,
|
|
program,
|
|
tempState
|
|
);
|
|
const globalUniformsBindGroup = renderer.globalUniforms.bindGroup;
|
|
encoder.resetBindGroup(1);
|
|
encoder.setBindGroup(0, globalUniformsBindGroup, program);
|
|
}
|
|
execute(batchPipe, batch) {
|
|
const program = this._shader.gpuProgram;
|
|
const renderer = batchPipe.renderer;
|
|
const encoder = renderer.encoder;
|
|
if (!batch.bindGroup) {
|
|
const textureBatch = batch.textures;
|
|
batch.bindGroup = getTextureBatchBindGroup(textureBatch.textures, textureBatch.count);
|
|
}
|
|
tempState.blendMode = batch.blendMode;
|
|
const gpuBindGroup = renderer.bindGroup.getBindGroup(
|
|
batch.bindGroup,
|
|
program,
|
|
1
|
|
);
|
|
const pipeline = renderer.pipeline.getPipeline(
|
|
this._geometry,
|
|
program,
|
|
tempState
|
|
);
|
|
batch.bindGroup._touch(renderer.textureGC.count);
|
|
encoder.setPipeline(pipeline);
|
|
encoder.renderPassEncoder.setBindGroup(1, gpuBindGroup);
|
|
encoder.renderPassEncoder.drawIndexed(batch.size, 1, batch.start);
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuBatchAdaptor.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUPipesAdaptor
|
|
],
|
|
name: "batch"
|
|
};
|
|
|
|
"use strict";
|
|
const _BatcherPipe = class _BatcherPipe {
|
|
constructor(renderer, adaptor) {
|
|
this.state = State.for2d();
|
|
this._batchersByInstructionSet = /* @__PURE__ */ Object.create(null);
|
|
/** A record of all active batchers, keyed by their names */
|
|
this._activeBatches = /* @__PURE__ */ Object.create(null);
|
|
var _a, _b;
|
|
this.renderer = renderer;
|
|
this._adaptor = adaptor;
|
|
(_b = (_a = this._adaptor).init) == null ? void 0 : _b.call(_a, this);
|
|
}
|
|
static getBatcher(name) {
|
|
return new this._availableBatchers[name]();
|
|
}
|
|
buildStart(instructionSet) {
|
|
let batchers = this._batchersByInstructionSet[instructionSet.uid];
|
|
if (!batchers) {
|
|
batchers = this._batchersByInstructionSet[instructionSet.uid] = /* @__PURE__ */ Object.create(null);
|
|
batchers.default || (batchers.default = new DefaultBatcher());
|
|
}
|
|
this._activeBatches = batchers;
|
|
this._activeBatch = this._activeBatches.default;
|
|
for (const i in this._activeBatches) {
|
|
this._activeBatches[i].begin();
|
|
}
|
|
}
|
|
addToBatch(batchableObject, instructionSet) {
|
|
if (this._activeBatch.name !== batchableObject.batcherName) {
|
|
this._activeBatch.break(instructionSet);
|
|
let batch = this._activeBatches[batchableObject.batcherName];
|
|
if (!batch) {
|
|
batch = this._activeBatches[batchableObject.batcherName] = _BatcherPipe.getBatcher(batchableObject.batcherName);
|
|
batch.begin();
|
|
}
|
|
this._activeBatch = batch;
|
|
}
|
|
this._activeBatch.add(batchableObject);
|
|
}
|
|
break(instructionSet) {
|
|
this._activeBatch.break(instructionSet);
|
|
}
|
|
buildEnd(instructionSet) {
|
|
this._activeBatch.break(instructionSet);
|
|
const batches = this._activeBatches;
|
|
for (const i in batches) {
|
|
const batch = batches[i];
|
|
const geometry = batch.geometry;
|
|
geometry.indexBuffer.setDataWithSize(batch.indexBuffer, batch.indexSize, true);
|
|
geometry.buffers[0].setDataWithSize(batch.attributeBuffer.float32View, batch.attributeSize, false);
|
|
}
|
|
}
|
|
upload(instructionSet) {
|
|
const batchers = this._batchersByInstructionSet[instructionSet.uid];
|
|
for (const i in batchers) {
|
|
const batcher = batchers[i];
|
|
const geometry = batcher.geometry;
|
|
if (batcher.dirty) {
|
|
batcher.dirty = false;
|
|
geometry.buffers[0].update(batcher.attributeSize * 4);
|
|
}
|
|
}
|
|
}
|
|
execute(batch) {
|
|
if (batch.action === "startBatch") {
|
|
const batcher = batch.batcher;
|
|
const geometry = batcher.geometry;
|
|
const shader = batcher.shader;
|
|
this._adaptor.start(this, geometry, shader);
|
|
}
|
|
this._adaptor.execute(this, batch);
|
|
}
|
|
destroy() {
|
|
this.state = null;
|
|
this.renderer = null;
|
|
this._adaptor = null;
|
|
for (const i in this._activeBatches) {
|
|
this._activeBatches[i].destroy();
|
|
}
|
|
this._activeBatches = null;
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_BatcherPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "batch"
|
|
};
|
|
_BatcherPipe._availableBatchers = /* @__PURE__ */ Object.create(null);
|
|
let BatcherPipe = _BatcherPipe;
|
|
extensions.handleByMap(ExtensionType.Batcher, BatcherPipe._availableBatchers);
|
|
extensions.add(DefaultBatcher);
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
function formatShader(shader) {
|
|
const spl = shader.split(/([\n{}])/g).map((a) => a.trim()).filter((a) => a.length);
|
|
let indent = "";
|
|
const formatted = spl.map((a) => {
|
|
let indentedLine = indent + a;
|
|
if (a === "{") {
|
|
indent += " ";
|
|
} else if (a === "}") {
|
|
indent = indent.substr(0, indent.length - 4);
|
|
indentedLine = indent + a;
|
|
}
|
|
return indentedLine;
|
|
}).join("\n");
|
|
return formatted;
|
|
}
|
|
|
|
"use strict";
|
|
const textureBit = {
|
|
name: "texture-bit",
|
|
vertex: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
|
|
struct TextureUniforms {
|
|
uTextureMatrix:mat3x3<f32>,
|
|
}
|
|
|
|
@group(2) @binding(2) var<uniform> textureUniforms : TextureUniforms;
|
|
`
|
|
),
|
|
main: (
|
|
/* wgsl */
|
|
`
|
|
uv = (textureUniforms.uTextureMatrix * vec3(uv, 1.0)).xy;
|
|
`
|
|
)
|
|
},
|
|
fragment: {
|
|
header: (
|
|
/* wgsl */
|
|
`
|
|
@group(2) @binding(0) var uTexture: texture_2d<f32>;
|
|
@group(2) @binding(1) var uSampler: sampler;
|
|
|
|
|
|
`
|
|
),
|
|
main: (
|
|
/* wgsl */
|
|
`
|
|
outColor = textureSample(uTexture, uSampler, vUV);
|
|
`
|
|
)
|
|
}
|
|
};
|
|
const textureBitGl = {
|
|
name: "texture-bit",
|
|
vertex: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
uniform mat3 uTextureMatrix;
|
|
`
|
|
),
|
|
main: (
|
|
/* glsl */
|
|
`
|
|
uv = (uTextureMatrix * vec3(uv, 1.0)).xy;
|
|
`
|
|
)
|
|
},
|
|
fragment: {
|
|
header: (
|
|
/* glsl */
|
|
`
|
|
uniform sampler2D uTexture;
|
|
|
|
|
|
`
|
|
),
|
|
main: (
|
|
/* glsl */
|
|
`
|
|
outColor = texture(uTexture, vUV);
|
|
`
|
|
)
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
function buildInstructions(renderGroup, rendererOrPipes) {
|
|
const root = renderGroup.root;
|
|
const instructionSet = renderGroup.instructionSet;
|
|
instructionSet.reset();
|
|
const renderer = rendererOrPipes.renderPipes ? rendererOrPipes : rendererOrPipes.batch.renderer;
|
|
const renderPipes = renderer.renderPipes;
|
|
renderPipes.batch.buildStart(instructionSet);
|
|
renderPipes.blendMode.buildStart();
|
|
renderPipes.colorMask.buildStart();
|
|
if (root.sortableChildren) {
|
|
root.sortChildren();
|
|
}
|
|
collectAllRenderablesAdvanced(root, instructionSet, renderer, true);
|
|
renderPipes.batch.buildEnd(instructionSet);
|
|
renderPipes.blendMode.buildEnd(instructionSet);
|
|
}
|
|
function collectAllRenderables(container, instructionSet, rendererOrPipes) {
|
|
const renderer = rendererOrPipes.renderPipes ? rendererOrPipes : rendererOrPipes.batch.renderer;
|
|
if (container.globalDisplayStatus < 7 || !container.includeInBuild)
|
|
return;
|
|
if (container.sortableChildren) {
|
|
container.sortChildren();
|
|
}
|
|
if (container.isSimple) {
|
|
collectAllRenderablesSimple(container, instructionSet, renderer);
|
|
} else {
|
|
collectAllRenderablesAdvanced(container, instructionSet, renderer, false);
|
|
}
|
|
}
|
|
function collectAllRenderablesSimple(container, instructionSet, renderer) {
|
|
if (container.renderPipeId) {
|
|
const { renderPipes, renderableGC } = renderer;
|
|
renderPipes.blendMode.setBlendMode(container, container.groupBlendMode, instructionSet);
|
|
container.didViewUpdate = false;
|
|
const rp = renderPipes;
|
|
rp[container.renderPipeId].addRenderable(container, instructionSet);
|
|
renderableGC.addRenderable(container, instructionSet);
|
|
}
|
|
if (!container.renderGroup) {
|
|
const children = container.children;
|
|
const length = children.length;
|
|
for (let i = 0; i < length; i++) {
|
|
collectAllRenderables(children[i], instructionSet, renderer);
|
|
}
|
|
}
|
|
}
|
|
function collectAllRenderablesAdvanced(container, instructionSet, renderer, isRoot) {
|
|
const { renderPipes, renderableGC } = renderer;
|
|
if (!isRoot && container.renderGroup) {
|
|
renderPipes.renderGroup.addRenderGroup(container.renderGroup, instructionSet);
|
|
} else {
|
|
for (let i = 0; i < container.effects.length; i++) {
|
|
const effect = container.effects[i];
|
|
const pipe = renderPipes[effect.pipe];
|
|
pipe.push(effect, container, instructionSet);
|
|
}
|
|
const renderPipeId = container.renderPipeId;
|
|
if (renderPipeId) {
|
|
renderPipes.blendMode.setBlendMode(container, container.groupBlendMode, instructionSet);
|
|
container.didViewUpdate = false;
|
|
const pipe = renderPipes[renderPipeId];
|
|
pipe.addRenderable(container, instructionSet);
|
|
renderableGC.addRenderable(container, instructionSet);
|
|
}
|
|
const children = container.children;
|
|
if (children.length) {
|
|
for (let i = 0; i < children.length; i++) {
|
|
collectAllRenderables(children[i], instructionSet, renderer);
|
|
}
|
|
}
|
|
for (let i = container.effects.length - 1; i >= 0; i--) {
|
|
const effect = container.effects[i];
|
|
const pipe = renderPipes[effect.pipe];
|
|
pipe.pop(effect, container, instructionSet);
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const tempBounds$1 = new Bounds();
|
|
class AlphaMaskEffect extends FilterEffect {
|
|
constructor() {
|
|
super();
|
|
this.filters = [new MaskFilter({
|
|
sprite: new Sprite(Texture.EMPTY),
|
|
resolution: "inherit",
|
|
antialias: "inherit"
|
|
})];
|
|
}
|
|
get sprite() {
|
|
return this.filters[0].sprite;
|
|
}
|
|
set sprite(value) {
|
|
this.filters[0].sprite = value;
|
|
}
|
|
}
|
|
class AlphaMaskPipe {
|
|
constructor(renderer) {
|
|
this._activeMaskStage = [];
|
|
this._renderer = renderer;
|
|
}
|
|
push(mask, maskedContainer, instructionSet) {
|
|
const renderer = this._renderer;
|
|
renderer.renderPipes.batch.break(instructionSet);
|
|
instructionSet.add({
|
|
renderPipeId: "alphaMask",
|
|
action: "pushMaskBegin",
|
|
mask,
|
|
canBundle: false,
|
|
maskedContainer
|
|
});
|
|
if (mask.renderMaskToTexture) {
|
|
const maskContainer = mask.mask;
|
|
maskContainer.includeInBuild = true;
|
|
collectAllRenderables(
|
|
maskContainer,
|
|
instructionSet,
|
|
renderer
|
|
);
|
|
maskContainer.includeInBuild = false;
|
|
}
|
|
renderer.renderPipes.batch.break(instructionSet);
|
|
instructionSet.add({
|
|
renderPipeId: "alphaMask",
|
|
action: "pushMaskEnd",
|
|
mask,
|
|
maskedContainer,
|
|
canBundle: false
|
|
});
|
|
}
|
|
pop(mask, _maskedContainer, instructionSet) {
|
|
const renderer = this._renderer;
|
|
renderer.renderPipes.batch.break(instructionSet);
|
|
instructionSet.add({
|
|
renderPipeId: "alphaMask",
|
|
action: "popMaskEnd",
|
|
mask,
|
|
canBundle: false
|
|
});
|
|
}
|
|
execute(instruction) {
|
|
const renderer = this._renderer;
|
|
const renderMask = instruction.mask.renderMaskToTexture;
|
|
if (instruction.action === "pushMaskBegin") {
|
|
const filterEffect = BigPool.get(AlphaMaskEffect);
|
|
if (renderMask) {
|
|
instruction.mask.mask.measurable = true;
|
|
const bounds = getGlobalBounds(instruction.mask.mask, true, tempBounds$1);
|
|
instruction.mask.mask.measurable = false;
|
|
bounds.ceil();
|
|
const colorTextureSource = renderer.renderTarget.renderTarget.colorTexture.source;
|
|
const filterTexture = TexturePool.getOptimalTexture(
|
|
bounds.width,
|
|
bounds.height,
|
|
colorTextureSource._resolution,
|
|
colorTextureSource.antialias
|
|
);
|
|
renderer.renderTarget.push(filterTexture, true);
|
|
renderer.globalUniforms.push({
|
|
offset: bounds,
|
|
worldColor: 4294967295
|
|
});
|
|
const sprite = filterEffect.sprite;
|
|
sprite.texture = filterTexture;
|
|
sprite.worldTransform.tx = bounds.minX;
|
|
sprite.worldTransform.ty = bounds.minY;
|
|
this._activeMaskStage.push({
|
|
filterEffect,
|
|
maskedContainer: instruction.maskedContainer,
|
|
filterTexture
|
|
});
|
|
} else {
|
|
filterEffect.sprite = instruction.mask.mask;
|
|
this._activeMaskStage.push({
|
|
filterEffect,
|
|
maskedContainer: instruction.maskedContainer
|
|
});
|
|
}
|
|
} else if (instruction.action === "pushMaskEnd") {
|
|
const maskData = this._activeMaskStage[this._activeMaskStage.length - 1];
|
|
if (renderMask) {
|
|
if (renderer.type === RendererType.WEBGL) {
|
|
renderer.renderTarget.finishRenderPass();
|
|
}
|
|
renderer.renderTarget.pop();
|
|
renderer.globalUniforms.pop();
|
|
}
|
|
renderer.filter.push({
|
|
renderPipeId: "filter",
|
|
action: "pushFilter",
|
|
container: maskData.maskedContainer,
|
|
filterEffect: maskData.filterEffect,
|
|
canBundle: false
|
|
});
|
|
} else if (instruction.action === "popMaskEnd") {
|
|
renderer.filter.pop();
|
|
const maskData = this._activeMaskStage.pop();
|
|
if (renderMask) {
|
|
TexturePool.returnTexture(maskData.filterTexture);
|
|
}
|
|
BigPool.return(maskData.filterEffect);
|
|
}
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
this._activeMaskStage = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
AlphaMaskPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "alphaMask"
|
|
};
|
|
|
|
"use strict";
|
|
class ColorMaskPipe {
|
|
constructor(renderer) {
|
|
this._colorStack = [];
|
|
this._colorStackIndex = 0;
|
|
this._currentColor = 0;
|
|
this._renderer = renderer;
|
|
}
|
|
buildStart() {
|
|
this._colorStack[0] = 15;
|
|
this._colorStackIndex = 1;
|
|
this._currentColor = 15;
|
|
}
|
|
push(mask, _container, instructionSet) {
|
|
const renderer = this._renderer;
|
|
renderer.renderPipes.batch.break(instructionSet);
|
|
const colorStack = this._colorStack;
|
|
colorStack[this._colorStackIndex] = colorStack[this._colorStackIndex - 1] & mask.mask;
|
|
const currentColor = this._colorStack[this._colorStackIndex];
|
|
if (currentColor !== this._currentColor) {
|
|
this._currentColor = currentColor;
|
|
instructionSet.add({
|
|
renderPipeId: "colorMask",
|
|
colorMask: currentColor,
|
|
canBundle: false
|
|
});
|
|
}
|
|
this._colorStackIndex++;
|
|
}
|
|
pop(_mask, _container, instructionSet) {
|
|
const renderer = this._renderer;
|
|
renderer.renderPipes.batch.break(instructionSet);
|
|
const colorStack = this._colorStack;
|
|
this._colorStackIndex--;
|
|
const currentColor = colorStack[this._colorStackIndex - 1];
|
|
if (currentColor !== this._currentColor) {
|
|
this._currentColor = currentColor;
|
|
instructionSet.add({
|
|
renderPipeId: "colorMask",
|
|
colorMask: currentColor,
|
|
canBundle: false
|
|
});
|
|
}
|
|
}
|
|
execute(instruction) {
|
|
const renderer = this._renderer;
|
|
renderer.colorMask.setMask(instruction.colorMask);
|
|
}
|
|
destroy() {
|
|
this._colorStack = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
ColorMaskPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "colorMask"
|
|
};
|
|
|
|
"use strict";
|
|
class ScissorMask {
|
|
constructor(mask) {
|
|
this.priority = 0;
|
|
this.pipe = "scissorMask";
|
|
this.mask = mask;
|
|
this.mask.renderable = false;
|
|
this.mask.measurable = false;
|
|
}
|
|
addBounds(bounds, skipUpdateTransform) {
|
|
addMaskBounds(this.mask, bounds, skipUpdateTransform);
|
|
}
|
|
addLocalBounds(bounds, localRoot) {
|
|
addMaskLocalBounds(this.mask, bounds, localRoot);
|
|
}
|
|
containsPoint(point, hitTestFn) {
|
|
const mask = this.mask;
|
|
return hitTestFn(mask, point);
|
|
}
|
|
reset() {
|
|
this.mask.measurable = true;
|
|
this.mask = null;
|
|
}
|
|
destroy() {
|
|
this.reset();
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class StencilMaskPipe {
|
|
constructor(renderer) {
|
|
// used when building and also when executing..
|
|
this._maskStackHash = {};
|
|
this._maskHash = /* @__PURE__ */ new WeakMap();
|
|
this._renderer = renderer;
|
|
}
|
|
push(mask, _container, instructionSet) {
|
|
var _a, _b;
|
|
const effect = mask;
|
|
const renderer = this._renderer;
|
|
renderer.renderPipes.batch.break(instructionSet);
|
|
renderer.renderPipes.blendMode.setBlendMode(effect.mask, "none", instructionSet);
|
|
instructionSet.add({
|
|
renderPipeId: "stencilMask",
|
|
action: "pushMaskBegin",
|
|
mask,
|
|
canBundle: false
|
|
});
|
|
const maskContainer = effect.mask;
|
|
maskContainer.includeInBuild = true;
|
|
if (!this._maskHash.has(effect)) {
|
|
this._maskHash.set(effect, {
|
|
instructionsStart: 0,
|
|
instructionsLength: 0
|
|
});
|
|
}
|
|
const maskData = this._maskHash.get(effect);
|
|
maskData.instructionsStart = instructionSet.instructionSize;
|
|
collectAllRenderables(
|
|
maskContainer,
|
|
instructionSet,
|
|
renderer
|
|
);
|
|
maskContainer.includeInBuild = false;
|
|
renderer.renderPipes.batch.break(instructionSet);
|
|
instructionSet.add({
|
|
renderPipeId: "stencilMask",
|
|
action: "pushMaskEnd",
|
|
mask,
|
|
canBundle: false
|
|
});
|
|
const instructionsLength = instructionSet.instructionSize - maskData.instructionsStart - 1;
|
|
maskData.instructionsLength = instructionsLength;
|
|
const renderTargetUid = renderer.renderTarget.renderTarget.uid;
|
|
(_b = (_a = this._maskStackHash)[renderTargetUid]) != null ? _b : _a[renderTargetUid] = 0;
|
|
}
|
|
pop(mask, _container, instructionSet) {
|
|
const effect = mask;
|
|
const renderer = this._renderer;
|
|
renderer.renderPipes.batch.break(instructionSet);
|
|
renderer.renderPipes.blendMode.setBlendMode(effect.mask, "none", instructionSet);
|
|
instructionSet.add({
|
|
renderPipeId: "stencilMask",
|
|
action: "popMaskBegin",
|
|
canBundle: false
|
|
});
|
|
const maskData = this._maskHash.get(mask);
|
|
for (let i = 0; i < maskData.instructionsLength; i++) {
|
|
instructionSet.instructions[instructionSet.instructionSize++] = instructionSet.instructions[maskData.instructionsStart++];
|
|
}
|
|
instructionSet.add({
|
|
renderPipeId: "stencilMask",
|
|
action: "popMaskEnd",
|
|
canBundle: false
|
|
});
|
|
}
|
|
execute(instruction) {
|
|
var _a, _b;
|
|
const renderer = this._renderer;
|
|
const renderTargetUid = renderer.renderTarget.renderTarget.uid;
|
|
let maskStackIndex = (_b = (_a = this._maskStackHash)[renderTargetUid]) != null ? _b : _a[renderTargetUid] = 0;
|
|
if (instruction.action === "pushMaskBegin") {
|
|
renderer.renderTarget.ensureDepthStencil();
|
|
renderer.stencil.setStencilMode(STENCIL_MODES.RENDERING_MASK_ADD, maskStackIndex);
|
|
maskStackIndex++;
|
|
renderer.colorMask.setMask(0);
|
|
} else if (instruction.action === "pushMaskEnd") {
|
|
renderer.stencil.setStencilMode(STENCIL_MODES.MASK_ACTIVE, maskStackIndex);
|
|
renderer.colorMask.setMask(15);
|
|
} else if (instruction.action === "popMaskBegin") {
|
|
renderer.colorMask.setMask(0);
|
|
if (maskStackIndex !== 0) {
|
|
renderer.stencil.setStencilMode(STENCIL_MODES.RENDERING_MASK_REMOVE, maskStackIndex);
|
|
} else {
|
|
renderer.renderTarget.clear(null, CLEAR.STENCIL);
|
|
renderer.stencil.setStencilMode(STENCIL_MODES.DISABLED, maskStackIndex);
|
|
}
|
|
maskStackIndex--;
|
|
} else if (instruction.action === "popMaskEnd") {
|
|
renderer.stencil.setStencilMode(STENCIL_MODES.MASK_ACTIVE, maskStackIndex);
|
|
renderer.colorMask.setMask(15);
|
|
}
|
|
this._maskStackHash[renderTargetUid] = maskStackIndex;
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
this._maskStackHash = null;
|
|
this._maskHash = null;
|
|
}
|
|
}
|
|
StencilMaskPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "stencilMask"
|
|
};
|
|
|
|
"use strict";
|
|
var BUFFER_TYPE = /* @__PURE__ */ ((BUFFER_TYPE2) => {
|
|
BUFFER_TYPE2[BUFFER_TYPE2["ELEMENT_ARRAY_BUFFER"] = 34963] = "ELEMENT_ARRAY_BUFFER";
|
|
BUFFER_TYPE2[BUFFER_TYPE2["ARRAY_BUFFER"] = 34962] = "ARRAY_BUFFER";
|
|
BUFFER_TYPE2[BUFFER_TYPE2["UNIFORM_BUFFER"] = 35345] = "UNIFORM_BUFFER";
|
|
return BUFFER_TYPE2;
|
|
})(BUFFER_TYPE || {});
|
|
|
|
"use strict";
|
|
class GlBuffer {
|
|
constructor(buffer, type) {
|
|
this.buffer = buffer || null;
|
|
this.updateID = -1;
|
|
this.byteLength = -1;
|
|
this.type = type;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class GlBufferSystem {
|
|
/**
|
|
* @param {Renderer} renderer - The renderer this System works for.
|
|
*/
|
|
constructor(renderer) {
|
|
this._gpuBuffers = /* @__PURE__ */ Object.create(null);
|
|
/** Cache keeping track of the base bound buffer bases */
|
|
this._boundBufferBases = /* @__PURE__ */ Object.create(null);
|
|
this._renderer = renderer;
|
|
}
|
|
/**
|
|
* @ignore
|
|
*/
|
|
destroy() {
|
|
this._renderer = null;
|
|
this._gl = null;
|
|
this._gpuBuffers = null;
|
|
this._boundBufferBases = null;
|
|
}
|
|
/** Sets up the renderer context and necessary buffers. */
|
|
contextChange() {
|
|
this._gpuBuffers = /* @__PURE__ */ Object.create(null);
|
|
this._gl = this._renderer.gl;
|
|
}
|
|
getGlBuffer(buffer) {
|
|
return this._gpuBuffers[buffer.uid] || this.createGLBuffer(buffer);
|
|
}
|
|
/**
|
|
* This binds specified buffer. On first run, it will create the webGL buffers for the context too
|
|
* @param buffer - the buffer to bind to the renderer
|
|
*/
|
|
bind(buffer) {
|
|
const { _gl: gl } = this;
|
|
const glBuffer = this.getGlBuffer(buffer);
|
|
gl.bindBuffer(glBuffer.type, glBuffer.buffer);
|
|
}
|
|
/**
|
|
* Binds an uniform buffer to at the given index.
|
|
*
|
|
* A cache is used so a buffer will not be bound again if already bound.
|
|
* @param buffer - the buffer to bind
|
|
* @param index - the base index to bind it to.
|
|
*/
|
|
bindBufferBase(buffer, index) {
|
|
const { _gl: gl } = this;
|
|
if (this._boundBufferBases[index] !== buffer) {
|
|
const glBuffer = this.getGlBuffer(buffer);
|
|
this._boundBufferBases[index] = buffer;
|
|
gl.bindBufferBase(gl.UNIFORM_BUFFER, index, glBuffer.buffer);
|
|
}
|
|
}
|
|
/**
|
|
* Binds a buffer whilst also binding its range.
|
|
* This will make the buffer start from the offset supplied rather than 0 when it is read.
|
|
* @param buffer - the buffer to bind
|
|
* @param index - the base index to bind at, defaults to 0
|
|
* @param offset - the offset to bind at (this is blocks of 256). 0 = 0, 1 = 256, 2 = 512 etc
|
|
*/
|
|
bindBufferRange(buffer, index, offset) {
|
|
const { _gl: gl } = this;
|
|
offset = offset || 0;
|
|
const glBuffer = this.getGlBuffer(buffer);
|
|
gl.bindBufferRange(gl.UNIFORM_BUFFER, index || 0, glBuffer.buffer, offset * 256, 256);
|
|
}
|
|
/**
|
|
* Will ensure the data in the buffer is uploaded to the GPU.
|
|
* @param {Buffer} buffer - the buffer to update
|
|
*/
|
|
updateBuffer(buffer) {
|
|
const { _gl: gl } = this;
|
|
const glBuffer = this.getGlBuffer(buffer);
|
|
if (buffer._updateID === glBuffer.updateID) {
|
|
return glBuffer;
|
|
}
|
|
glBuffer.updateID = buffer._updateID;
|
|
gl.bindBuffer(glBuffer.type, glBuffer.buffer);
|
|
const data = buffer.data;
|
|
if (glBuffer.byteLength >= buffer.data.byteLength) {
|
|
gl.bufferSubData(glBuffer.type, 0, data, 0, buffer._updateSize / data.BYTES_PER_ELEMENT);
|
|
} else {
|
|
const drawType = buffer.descriptor.usage & BufferUsage.STATIC ? gl.STATIC_DRAW : gl.DYNAMIC_DRAW;
|
|
glBuffer.byteLength = data.byteLength;
|
|
gl.bufferData(glBuffer.type, data, drawType);
|
|
}
|
|
return glBuffer;
|
|
}
|
|
/** dispose all WebGL resources of all managed buffers */
|
|
destroyAll() {
|
|
const gl = this._gl;
|
|
for (const id in this._gpuBuffers) {
|
|
gl.deleteBuffer(this._gpuBuffers[id].buffer);
|
|
}
|
|
this._gpuBuffers = /* @__PURE__ */ Object.create(null);
|
|
}
|
|
/**
|
|
* Disposes buffer
|
|
* @param {Buffer} buffer - buffer with data
|
|
* @param {boolean} [contextLost=false] - If context was lost, we suppress deleteVertexArray
|
|
*/
|
|
onBufferDestroy(buffer, contextLost) {
|
|
const glBuffer = this._gpuBuffers[buffer.uid];
|
|
const gl = this._gl;
|
|
if (!contextLost) {
|
|
gl.deleteBuffer(glBuffer.buffer);
|
|
}
|
|
this._gpuBuffers[buffer.uid] = null;
|
|
}
|
|
/**
|
|
* creates and attaches a GLBuffer object tied to the current context.
|
|
* @param buffer
|
|
* @protected
|
|
*/
|
|
createGLBuffer(buffer) {
|
|
const { _gl: gl } = this;
|
|
let type = BUFFER_TYPE.ARRAY_BUFFER;
|
|
if (buffer.descriptor.usage & BufferUsage.INDEX) {
|
|
type = BUFFER_TYPE.ELEMENT_ARRAY_BUFFER;
|
|
} else if (buffer.descriptor.usage & BufferUsage.UNIFORM) {
|
|
type = BUFFER_TYPE.UNIFORM_BUFFER;
|
|
}
|
|
const glBuffer = new GlBuffer(gl.createBuffer(), type);
|
|
this._gpuBuffers[buffer.uid] = glBuffer;
|
|
buffer.on("destroy", this.onBufferDestroy, this);
|
|
return glBuffer;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlBufferSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "buffer"
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$l = Object.defineProperty;
|
|
var __defProps$9 = Object.defineProperties;
|
|
var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$l = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$l = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$l.call(b, prop))
|
|
__defNormalProp$l(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$l)
|
|
for (var prop of __getOwnPropSymbols$l(b)) {
|
|
if (__propIsEnum$l.call(b, prop))
|
|
__defNormalProp$l(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
|
|
const _GlContextSystem = class _GlContextSystem {
|
|
/** @param renderer - The renderer this System works for. */
|
|
constructor(renderer) {
|
|
/**
|
|
* Features supported by current renderer.
|
|
* @type {object}
|
|
* @readonly
|
|
*/
|
|
this.supports = {
|
|
/** Support for 32-bit indices buffer. */
|
|
uint32Indices: true,
|
|
/** Support for UniformBufferObjects */
|
|
uniformBufferObject: true,
|
|
/** Support for VertexArrayObjects */
|
|
vertexArrayObject: true,
|
|
/** Support for SRGB texture format */
|
|
srgbTextures: true,
|
|
/** Support for wrapping modes if a texture is non-power of two */
|
|
nonPowOf2wrapping: true,
|
|
/** Support for MSAA (antialiasing of dynamic textures) */
|
|
msaa: true,
|
|
/** Support for mipmaps if a texture is non-power of two */
|
|
nonPowOf2mipmaps: true
|
|
};
|
|
this._renderer = renderer;
|
|
this.extensions = /* @__PURE__ */ Object.create(null);
|
|
this.handleContextLost = this.handleContextLost.bind(this);
|
|
this.handleContextRestored = this.handleContextRestored.bind(this);
|
|
}
|
|
/**
|
|
* `true` if the context is lost
|
|
* @readonly
|
|
*/
|
|
get isLost() {
|
|
return !this.gl || this.gl.isContextLost();
|
|
}
|
|
/**
|
|
* Handles the context change event.
|
|
* @param {WebGLRenderingContext} gl - New WebGL context.
|
|
*/
|
|
contextChange(gl) {
|
|
this.gl = gl;
|
|
this._renderer.gl = gl;
|
|
}
|
|
init(options) {
|
|
var _a, _b;
|
|
options = __spreadValues$l(__spreadValues$l({}, _GlContextSystem.defaultOptions), options);
|
|
let multiView = this.multiView = options.multiView;
|
|
if (options.context && multiView) {
|
|
warn("Renderer created with both a context and multiview enabled. Disabling multiView as both cannot work together.");
|
|
multiView = false;
|
|
}
|
|
if (multiView) {
|
|
this.canvas = DOMAdapter.get().createCanvas(this._renderer.canvas.width, this._renderer.canvas.height);
|
|
} else {
|
|
this.canvas = this._renderer.view.canvas;
|
|
}
|
|
if (options.context) {
|
|
this.initFromContext(options.context);
|
|
} else {
|
|
const alpha = this._renderer.background.alpha < 1;
|
|
const premultipliedAlpha = (_a = options.premultipliedAlpha) != null ? _a : true;
|
|
const antialias = options.antialias && !this._renderer.backBuffer.useBackBuffer;
|
|
this.createContext(options.preferWebGLVersion, {
|
|
alpha,
|
|
premultipliedAlpha,
|
|
antialias,
|
|
stencil: true,
|
|
preserveDrawingBuffer: options.preserveDrawingBuffer,
|
|
powerPreference: (_b = options.powerPreference) != null ? _b : "default"
|
|
});
|
|
}
|
|
}
|
|
ensureCanvasSize(targetCanvas) {
|
|
if (!this.multiView) {
|
|
if (targetCanvas !== this.canvas) {
|
|
warn("multiView is disabled, but targetCanvas is not the main canvas");
|
|
}
|
|
return;
|
|
}
|
|
const { canvas } = this;
|
|
if (canvas.width < targetCanvas.width || canvas.height < targetCanvas.height) {
|
|
canvas.width = Math.max(targetCanvas.width, targetCanvas.width);
|
|
canvas.height = Math.max(targetCanvas.height, targetCanvas.height);
|
|
}
|
|
}
|
|
/**
|
|
* Initializes the context.
|
|
* @protected
|
|
* @param {WebGLRenderingContext} gl - WebGL context
|
|
*/
|
|
initFromContext(gl) {
|
|
this.gl = gl;
|
|
this.webGLVersion = gl instanceof DOMAdapter.get().getWebGLRenderingContext() ? 1 : 2;
|
|
this.getExtensions();
|
|
this.validateContext(gl);
|
|
this._renderer.runners.contextChange.emit(gl);
|
|
const element = this._renderer.view.canvas;
|
|
element.addEventListener("webglcontextlost", this.handleContextLost, false);
|
|
element.addEventListener("webglcontextrestored", this.handleContextRestored, false);
|
|
}
|
|
/**
|
|
* Initialize from context options
|
|
* @protected
|
|
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
|
|
* @param preferWebGLVersion
|
|
* @param {object} options - context attributes
|
|
*/
|
|
createContext(preferWebGLVersion, options) {
|
|
let gl;
|
|
const canvas = this.canvas;
|
|
if (preferWebGLVersion === 2) {
|
|
gl = canvas.getContext("webgl2", options);
|
|
}
|
|
if (!gl) {
|
|
gl = canvas.getContext("webgl", options);
|
|
if (!gl) {
|
|
throw new Error("This browser does not support WebGL. Try using the canvas renderer");
|
|
}
|
|
}
|
|
this.gl = gl;
|
|
this.initFromContext(this.gl);
|
|
}
|
|
/** Auto-populate the {@link GlContextSystem.extensions extensions}. */
|
|
getExtensions() {
|
|
const { gl } = this;
|
|
const common = {
|
|
anisotropicFiltering: gl.getExtension("EXT_texture_filter_anisotropic"),
|
|
floatTextureLinear: gl.getExtension("OES_texture_float_linear"),
|
|
s3tc: gl.getExtension("WEBGL_compressed_texture_s3tc"),
|
|
s3tc_sRGB: gl.getExtension("WEBGL_compressed_texture_s3tc_srgb"),
|
|
// eslint-disable-line camelcase
|
|
etc: gl.getExtension("WEBGL_compressed_texture_etc"),
|
|
etc1: gl.getExtension("WEBGL_compressed_texture_etc1"),
|
|
pvrtc: gl.getExtension("WEBGL_compressed_texture_pvrtc") || gl.getExtension("WEBKIT_WEBGL_compressed_texture_pvrtc"),
|
|
atc: gl.getExtension("WEBGL_compressed_texture_atc"),
|
|
astc: gl.getExtension("WEBGL_compressed_texture_astc"),
|
|
bptc: gl.getExtension("EXT_texture_compression_bptc"),
|
|
rgtc: gl.getExtension("EXT_texture_compression_rgtc"),
|
|
loseContext: gl.getExtension("WEBGL_lose_context")
|
|
};
|
|
if (this.webGLVersion === 1) {
|
|
this.extensions = __spreadProps$9(__spreadValues$l({}, common), {
|
|
drawBuffers: gl.getExtension("WEBGL_draw_buffers"),
|
|
depthTexture: gl.getExtension("WEBGL_depth_texture"),
|
|
vertexArrayObject: gl.getExtension("OES_vertex_array_object") || gl.getExtension("MOZ_OES_vertex_array_object") || gl.getExtension("WEBKIT_OES_vertex_array_object"),
|
|
uint32ElementIndex: gl.getExtension("OES_element_index_uint"),
|
|
// Floats and half-floats
|
|
floatTexture: gl.getExtension("OES_texture_float"),
|
|
floatTextureLinear: gl.getExtension("OES_texture_float_linear"),
|
|
textureHalfFloat: gl.getExtension("OES_texture_half_float"),
|
|
textureHalfFloatLinear: gl.getExtension("OES_texture_half_float_linear"),
|
|
vertexAttribDivisorANGLE: gl.getExtension("ANGLE_instanced_arrays"),
|
|
srgb: gl.getExtension("EXT_sRGB")
|
|
});
|
|
} else {
|
|
this.extensions = __spreadProps$9(__spreadValues$l({}, common), {
|
|
colorBufferFloat: gl.getExtension("EXT_color_buffer_float")
|
|
});
|
|
const provokeExt = gl.getExtension("WEBGL_provoking_vertex");
|
|
if (provokeExt) {
|
|
provokeExt.provokingVertexWEBGL(provokeExt.FIRST_VERTEX_CONVENTION_WEBGL);
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Handles a lost webgl context
|
|
* @param {WebGLContextEvent} event - The context lost event.
|
|
*/
|
|
handleContextLost(event) {
|
|
event.preventDefault();
|
|
if (this._contextLossForced) {
|
|
this._contextLossForced = false;
|
|
setTimeout(() => {
|
|
var _a;
|
|
if (this.gl.isContextLost()) {
|
|
(_a = this.extensions.loseContext) == null ? void 0 : _a.restoreContext();
|
|
}
|
|
}, 0);
|
|
}
|
|
}
|
|
/** Handles a restored webgl context. */
|
|
handleContextRestored() {
|
|
this._renderer.runners.contextChange.emit(this.gl);
|
|
}
|
|
destroy() {
|
|
var _a;
|
|
const element = this._renderer.view.canvas;
|
|
this._renderer = null;
|
|
element.removeEventListener("webglcontextlost", this.handleContextLost);
|
|
element.removeEventListener("webglcontextrestored", this.handleContextRestored);
|
|
this.gl.useProgram(null);
|
|
(_a = this.extensions.loseContext) == null ? void 0 : _a.loseContext();
|
|
}
|
|
/**
|
|
* this function can be called to force a webGL context loss
|
|
* this will release all resources on the GPU.
|
|
* Useful if you need to put Pixi to sleep, and save some GPU memory
|
|
*
|
|
* As soon as render is called - all resources will be created again.
|
|
*/
|
|
forceContextLoss() {
|
|
var _a;
|
|
(_a = this.extensions.loseContext) == null ? void 0 : _a.loseContext();
|
|
this._contextLossForced = true;
|
|
}
|
|
/**
|
|
* Validate context.
|
|
* @param {WebGLRenderingContext} gl - Render context.
|
|
*/
|
|
validateContext(gl) {
|
|
const attributes = gl.getContextAttributes();
|
|
if (attributes && !attributes.stencil) {
|
|
warn("Provided WebGL context does not have a stencil buffer, masks may not render correctly");
|
|
}
|
|
const supports = this.supports;
|
|
const isWebGl2 = this.webGLVersion === 2;
|
|
const extensions = this.extensions;
|
|
supports.uint32Indices = isWebGl2 || !!extensions.uint32ElementIndex;
|
|
supports.uniformBufferObject = isWebGl2;
|
|
supports.vertexArrayObject = isWebGl2 || !!extensions.vertexArrayObject;
|
|
supports.srgbTextures = isWebGl2 || !!extensions.srgb;
|
|
supports.nonPowOf2wrapping = isWebGl2;
|
|
supports.nonPowOf2mipmaps = isWebGl2;
|
|
supports.msaa = isWebGl2;
|
|
if (!supports.uint32Indices) {
|
|
warn("Provided WebGL context does not support 32 index buffer, large scenes may not render correctly");
|
|
}
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_GlContextSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "context"
|
|
};
|
|
/** The default options for the system. */
|
|
_GlContextSystem.defaultOptions = {
|
|
/**
|
|
* {@link WebGLOptions.context}
|
|
* @default null
|
|
*/
|
|
context: null,
|
|
/**
|
|
* {@link WebGLOptions.premultipliedAlpha}
|
|
* @default true
|
|
*/
|
|
premultipliedAlpha: true,
|
|
/**
|
|
* {@link WebGLOptions.preserveDrawingBuffer}
|
|
* @default false
|
|
*/
|
|
preserveDrawingBuffer: false,
|
|
/**
|
|
* {@link WebGLOptions.powerPreference}
|
|
* @default default
|
|
*/
|
|
powerPreference: void 0,
|
|
/**
|
|
* {@link WebGLOptions.webGLVersion}
|
|
* @default 2
|
|
*/
|
|
preferWebGLVersion: 2,
|
|
/**
|
|
* {@link WebGLOptions.multiView}
|
|
* @default false
|
|
*/
|
|
multiView: false
|
|
};
|
|
let GlContextSystem = _GlContextSystem;
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
function ensureAttributes(geometry, extractedData) {
|
|
var _a, _b, _c;
|
|
for (const i in geometry.attributes) {
|
|
const attribute = geometry.attributes[i];
|
|
const attributeData = extractedData[i];
|
|
if (attributeData) {
|
|
(_a = attribute.format) != null ? _a : attribute.format = attributeData.format;
|
|
(_b = attribute.offset) != null ? _b : attribute.offset = attributeData.offset;
|
|
(_c = attribute.instance) != null ? _c : attribute.instance = attributeData.instance;
|
|
} else {
|
|
warn(`Attribute ${i} is not present in the shader, but is present in the geometry. Unable to infer attribute details.`);
|
|
}
|
|
}
|
|
ensureStartAndStride(geometry);
|
|
}
|
|
function ensureStartAndStride(geometry) {
|
|
var _a, _b;
|
|
const { buffers, attributes } = geometry;
|
|
const tempStride = {};
|
|
const tempStart = {};
|
|
for (const j in buffers) {
|
|
const buffer = buffers[j];
|
|
tempStride[buffer.uid] = 0;
|
|
tempStart[buffer.uid] = 0;
|
|
}
|
|
for (const j in attributes) {
|
|
const attribute = attributes[j];
|
|
tempStride[attribute.buffer.uid] += getAttributeInfoFromFormat(attribute.format).stride;
|
|
}
|
|
for (const j in attributes) {
|
|
const attribute = attributes[j];
|
|
(_a = attribute.stride) != null ? _a : attribute.stride = tempStride[attribute.buffer.uid];
|
|
(_b = attribute.start) != null ? _b : attribute.start = tempStart[attribute.buffer.uid];
|
|
tempStart[attribute.buffer.uid] += getAttributeInfoFromFormat(attribute.format).stride;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var GL_FORMATS = /* @__PURE__ */ ((GL_FORMATS2) => {
|
|
GL_FORMATS2[GL_FORMATS2["RGBA"] = 6408] = "RGBA";
|
|
GL_FORMATS2[GL_FORMATS2["RGB"] = 6407] = "RGB";
|
|
GL_FORMATS2[GL_FORMATS2["RG"] = 33319] = "RG";
|
|
GL_FORMATS2[GL_FORMATS2["RED"] = 6403] = "RED";
|
|
GL_FORMATS2[GL_FORMATS2["RGBA_INTEGER"] = 36249] = "RGBA_INTEGER";
|
|
GL_FORMATS2[GL_FORMATS2["RGB_INTEGER"] = 36248] = "RGB_INTEGER";
|
|
GL_FORMATS2[GL_FORMATS2["RG_INTEGER"] = 33320] = "RG_INTEGER";
|
|
GL_FORMATS2[GL_FORMATS2["RED_INTEGER"] = 36244] = "RED_INTEGER";
|
|
GL_FORMATS2[GL_FORMATS2["ALPHA"] = 6406] = "ALPHA";
|
|
GL_FORMATS2[GL_FORMATS2["LUMINANCE"] = 6409] = "LUMINANCE";
|
|
GL_FORMATS2[GL_FORMATS2["LUMINANCE_ALPHA"] = 6410] = "LUMINANCE_ALPHA";
|
|
GL_FORMATS2[GL_FORMATS2["DEPTH_COMPONENT"] = 6402] = "DEPTH_COMPONENT";
|
|
GL_FORMATS2[GL_FORMATS2["DEPTH_STENCIL"] = 34041] = "DEPTH_STENCIL";
|
|
return GL_FORMATS2;
|
|
})(GL_FORMATS || {});
|
|
var GL_TARGETS = /* @__PURE__ */ ((GL_TARGETS2) => {
|
|
GL_TARGETS2[GL_TARGETS2["TEXTURE_2D"] = 3553] = "TEXTURE_2D";
|
|
GL_TARGETS2[GL_TARGETS2["TEXTURE_CUBE_MAP"] = 34067] = "TEXTURE_CUBE_MAP";
|
|
GL_TARGETS2[GL_TARGETS2["TEXTURE_2D_ARRAY"] = 35866] = "TEXTURE_2D_ARRAY";
|
|
GL_TARGETS2[GL_TARGETS2["TEXTURE_CUBE_MAP_POSITIVE_X"] = 34069] = "TEXTURE_CUBE_MAP_POSITIVE_X";
|
|
GL_TARGETS2[GL_TARGETS2["TEXTURE_CUBE_MAP_NEGATIVE_X"] = 34070] = "TEXTURE_CUBE_MAP_NEGATIVE_X";
|
|
GL_TARGETS2[GL_TARGETS2["TEXTURE_CUBE_MAP_POSITIVE_Y"] = 34071] = "TEXTURE_CUBE_MAP_POSITIVE_Y";
|
|
GL_TARGETS2[GL_TARGETS2["TEXTURE_CUBE_MAP_NEGATIVE_Y"] = 34072] = "TEXTURE_CUBE_MAP_NEGATIVE_Y";
|
|
GL_TARGETS2[GL_TARGETS2["TEXTURE_CUBE_MAP_POSITIVE_Z"] = 34073] = "TEXTURE_CUBE_MAP_POSITIVE_Z";
|
|
GL_TARGETS2[GL_TARGETS2["TEXTURE_CUBE_MAP_NEGATIVE_Z"] = 34074] = "TEXTURE_CUBE_MAP_NEGATIVE_Z";
|
|
return GL_TARGETS2;
|
|
})(GL_TARGETS || {});
|
|
var GL_WRAP_MODES = /* @__PURE__ */ ((GL_WRAP_MODES2) => {
|
|
GL_WRAP_MODES2[GL_WRAP_MODES2["CLAMP"] = 33071] = "CLAMP";
|
|
GL_WRAP_MODES2[GL_WRAP_MODES2["REPEAT"] = 10497] = "REPEAT";
|
|
GL_WRAP_MODES2[GL_WRAP_MODES2["MIRRORED_REPEAT"] = 33648] = "MIRRORED_REPEAT";
|
|
return GL_WRAP_MODES2;
|
|
})(GL_WRAP_MODES || {});
|
|
var GL_TYPES = /* @__PURE__ */ ((GL_TYPES2) => {
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_BYTE"] = 5121] = "UNSIGNED_BYTE";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_SHORT"] = 5123] = "UNSIGNED_SHORT";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_SHORT_5_6_5"] = 33635] = "UNSIGNED_SHORT_5_6_5";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_SHORT_4_4_4_4"] = 32819] = "UNSIGNED_SHORT_4_4_4_4";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_SHORT_5_5_5_1"] = 32820] = "UNSIGNED_SHORT_5_5_5_1";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT"] = 5125] = "UNSIGNED_INT";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT_10F_11F_11F_REV"] = 35899] = "UNSIGNED_INT_10F_11F_11F_REV";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT_2_10_10_10_REV"] = 33640] = "UNSIGNED_INT_2_10_10_10_REV";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT_24_8"] = 34042] = "UNSIGNED_INT_24_8";
|
|
GL_TYPES2[GL_TYPES2["UNSIGNED_INT_5_9_9_9_REV"] = 35902] = "UNSIGNED_INT_5_9_9_9_REV";
|
|
GL_TYPES2[GL_TYPES2["BYTE"] = 5120] = "BYTE";
|
|
GL_TYPES2[GL_TYPES2["SHORT"] = 5122] = "SHORT";
|
|
GL_TYPES2[GL_TYPES2["INT"] = 5124] = "INT";
|
|
GL_TYPES2[GL_TYPES2["FLOAT"] = 5126] = "FLOAT";
|
|
GL_TYPES2[GL_TYPES2["FLOAT_32_UNSIGNED_INT_24_8_REV"] = 36269] = "FLOAT_32_UNSIGNED_INT_24_8_REV";
|
|
GL_TYPES2[GL_TYPES2["HALF_FLOAT"] = 36193] = "HALF_FLOAT";
|
|
return GL_TYPES2;
|
|
})(GL_TYPES || {});
|
|
|
|
"use strict";
|
|
const infoMap = {
|
|
uint8x2: GL_TYPES.UNSIGNED_BYTE,
|
|
uint8x4: GL_TYPES.UNSIGNED_BYTE,
|
|
sint8x2: GL_TYPES.BYTE,
|
|
sint8x4: GL_TYPES.BYTE,
|
|
unorm8x2: GL_TYPES.UNSIGNED_BYTE,
|
|
unorm8x4: GL_TYPES.UNSIGNED_BYTE,
|
|
snorm8x2: GL_TYPES.BYTE,
|
|
snorm8x4: GL_TYPES.BYTE,
|
|
uint16x2: GL_TYPES.UNSIGNED_SHORT,
|
|
uint16x4: GL_TYPES.UNSIGNED_SHORT,
|
|
sint16x2: GL_TYPES.SHORT,
|
|
sint16x4: GL_TYPES.SHORT,
|
|
unorm16x2: GL_TYPES.UNSIGNED_SHORT,
|
|
unorm16x4: GL_TYPES.UNSIGNED_SHORT,
|
|
snorm16x2: GL_TYPES.SHORT,
|
|
snorm16x4: GL_TYPES.SHORT,
|
|
float16x2: GL_TYPES.HALF_FLOAT,
|
|
float16x4: GL_TYPES.HALF_FLOAT,
|
|
float32: GL_TYPES.FLOAT,
|
|
float32x2: GL_TYPES.FLOAT,
|
|
float32x3: GL_TYPES.FLOAT,
|
|
float32x4: GL_TYPES.FLOAT,
|
|
uint32: GL_TYPES.UNSIGNED_INT,
|
|
uint32x2: GL_TYPES.UNSIGNED_INT,
|
|
uint32x3: GL_TYPES.UNSIGNED_INT,
|
|
uint32x4: GL_TYPES.UNSIGNED_INT,
|
|
sint32: GL_TYPES.INT,
|
|
sint32x2: GL_TYPES.INT,
|
|
sint32x3: GL_TYPES.INT,
|
|
sint32x4: GL_TYPES.INT
|
|
};
|
|
function getGlTypeFromFormat(format) {
|
|
var _a;
|
|
return (_a = infoMap[format]) != null ? _a : infoMap.float32;
|
|
}
|
|
|
|
"use strict";
|
|
const topologyToGlMap = {
|
|
"point-list": 0,
|
|
"line-list": 1,
|
|
"line-strip": 3,
|
|
"triangle-list": 4,
|
|
"triangle-strip": 5
|
|
};
|
|
class GlGeometrySystem {
|
|
/** @param renderer - The renderer this System works for. */
|
|
constructor(renderer) {
|
|
this._geometryVaoHash = /* @__PURE__ */ Object.create(null);
|
|
this._renderer = renderer;
|
|
this._activeGeometry = null;
|
|
this._activeVao = null;
|
|
this.hasVao = true;
|
|
this.hasInstance = true;
|
|
}
|
|
/** Sets up the renderer context and necessary buffers. */
|
|
contextChange() {
|
|
const gl = this.gl = this._renderer.gl;
|
|
if (!this._renderer.context.supports.vertexArrayObject) {
|
|
throw new Error("[PixiJS] Vertex Array Objects are not supported on this device");
|
|
}
|
|
const nativeVaoExtension = this._renderer.context.extensions.vertexArrayObject;
|
|
if (nativeVaoExtension) {
|
|
gl.createVertexArray = () => nativeVaoExtension.createVertexArrayOES();
|
|
gl.bindVertexArray = (vao) => nativeVaoExtension.bindVertexArrayOES(vao);
|
|
gl.deleteVertexArray = (vao) => nativeVaoExtension.deleteVertexArrayOES(vao);
|
|
}
|
|
const nativeInstancedExtension = this._renderer.context.extensions.vertexAttribDivisorANGLE;
|
|
if (nativeInstancedExtension) {
|
|
gl.drawArraysInstanced = (a, b, c, d) => {
|
|
nativeInstancedExtension.drawArraysInstancedANGLE(a, b, c, d);
|
|
};
|
|
gl.drawElementsInstanced = (a, b, c, d, e) => {
|
|
nativeInstancedExtension.drawElementsInstancedANGLE(a, b, c, d, e);
|
|
};
|
|
gl.vertexAttribDivisor = (a, b) => nativeInstancedExtension.vertexAttribDivisorANGLE(a, b);
|
|
}
|
|
this._activeGeometry = null;
|
|
this._activeVao = null;
|
|
this._geometryVaoHash = /* @__PURE__ */ Object.create(null);
|
|
}
|
|
/**
|
|
* Binds geometry so that is can be drawn. Creating a Vao if required
|
|
* @param geometry - Instance of geometry to bind.
|
|
* @param program - Instance of program to use vao for.
|
|
*/
|
|
bind(geometry, program) {
|
|
const gl = this.gl;
|
|
this._activeGeometry = geometry;
|
|
const vao = this.getVao(geometry, program);
|
|
if (this._activeVao !== vao) {
|
|
this._activeVao = vao;
|
|
gl.bindVertexArray(vao);
|
|
}
|
|
this.updateBuffers();
|
|
}
|
|
/** Reset and unbind any active VAO and geometry. */
|
|
reset() {
|
|
this.unbind();
|
|
}
|
|
/** Update buffers of the currently bound geometry. */
|
|
updateBuffers() {
|
|
const geometry = this._activeGeometry;
|
|
const bufferSystem = this._renderer.buffer;
|
|
for (let i = 0; i < geometry.buffers.length; i++) {
|
|
const buffer = geometry.buffers[i];
|
|
bufferSystem.updateBuffer(buffer);
|
|
}
|
|
}
|
|
/**
|
|
* Check compatibility between a geometry and a program
|
|
* @param geometry - Geometry instance.
|
|
* @param program - Program instance.
|
|
*/
|
|
checkCompatibility(geometry, program) {
|
|
const geometryAttributes = geometry.attributes;
|
|
const shaderAttributes = program._attributeData;
|
|
for (const j in shaderAttributes) {
|
|
if (!geometryAttributes[j]) {
|
|
throw new Error(`shader and geometry incompatible, geometry missing the "${j}" attribute`);
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Takes a geometry and program and generates a unique signature for them.
|
|
* @param geometry - To get signature from.
|
|
* @param program - To test geometry against.
|
|
* @returns - Unique signature of the geometry and program
|
|
*/
|
|
getSignature(geometry, program) {
|
|
const attribs = geometry.attributes;
|
|
const shaderAttributes = program._attributeData;
|
|
const strings = ["g", geometry.uid];
|
|
for (const i in attribs) {
|
|
if (shaderAttributes[i]) {
|
|
strings.push(i, shaderAttributes[i].location);
|
|
}
|
|
}
|
|
return strings.join("-");
|
|
}
|
|
getVao(geometry, program) {
|
|
var _a;
|
|
return ((_a = this._geometryVaoHash[geometry.uid]) == null ? void 0 : _a[program._key]) || this.initGeometryVao(geometry, program);
|
|
}
|
|
/**
|
|
* Creates or gets Vao with the same structure as the geometry and stores it on the geometry.
|
|
* If vao is created, it is bound automatically. We use a shader to infer what and how to set up the
|
|
* attribute locations.
|
|
* @param geometry - Instance of geometry to to generate Vao for.
|
|
* @param program
|
|
* @param _incRefCount - Increment refCount of all geometry buffers.
|
|
*/
|
|
initGeometryVao(geometry, program, _incRefCount = true) {
|
|
const gl = this._renderer.gl;
|
|
const bufferSystem = this._renderer.buffer;
|
|
this._renderer.shader._getProgramData(program);
|
|
this.checkCompatibility(geometry, program);
|
|
const signature = this.getSignature(geometry, program);
|
|
if (!this._geometryVaoHash[geometry.uid]) {
|
|
this._geometryVaoHash[geometry.uid] = /* @__PURE__ */ Object.create(null);
|
|
geometry.on("destroy", this.onGeometryDestroy, this);
|
|
}
|
|
const vaoObjectHash = this._geometryVaoHash[geometry.uid];
|
|
let vao = vaoObjectHash[signature];
|
|
if (vao) {
|
|
vaoObjectHash[program._key] = vao;
|
|
return vao;
|
|
}
|
|
ensureAttributes(geometry, program._attributeData);
|
|
const buffers = geometry.buffers;
|
|
vao = gl.createVertexArray();
|
|
gl.bindVertexArray(vao);
|
|
for (let i = 0; i < buffers.length; i++) {
|
|
const buffer = buffers[i];
|
|
bufferSystem.bind(buffer);
|
|
}
|
|
this.activateVao(geometry, program);
|
|
vaoObjectHash[program._key] = vao;
|
|
vaoObjectHash[signature] = vao;
|
|
gl.bindVertexArray(null);
|
|
return vao;
|
|
}
|
|
/**
|
|
* Disposes geometry.
|
|
* @param geometry - Geometry with buffers. Only VAO will be disposed
|
|
* @param [contextLost=false] - If context was lost, we suppress deleteVertexArray
|
|
*/
|
|
onGeometryDestroy(geometry, contextLost) {
|
|
const vaoObjectHash = this._geometryVaoHash[geometry.uid];
|
|
const gl = this.gl;
|
|
if (vaoObjectHash) {
|
|
if (contextLost) {
|
|
for (const i in vaoObjectHash) {
|
|
if (this._activeVao !== vaoObjectHash[i]) {
|
|
this.unbind();
|
|
}
|
|
gl.deleteVertexArray(vaoObjectHash[i]);
|
|
}
|
|
}
|
|
this._geometryVaoHash[geometry.uid] = null;
|
|
}
|
|
}
|
|
/**
|
|
* Dispose all WebGL resources of all managed geometries.
|
|
* @param [contextLost=false] - If context was lost, we suppress `gl.delete` calls
|
|
*/
|
|
destroyAll(contextLost = false) {
|
|
const gl = this.gl;
|
|
for (const i in this._geometryVaoHash) {
|
|
if (contextLost) {
|
|
for (const j in this._geometryVaoHash[i]) {
|
|
const vaoObjectHash = this._geometryVaoHash[i];
|
|
if (this._activeVao !== vaoObjectHash) {
|
|
this.unbind();
|
|
}
|
|
gl.deleteVertexArray(vaoObjectHash[j]);
|
|
}
|
|
}
|
|
this._geometryVaoHash[i] = null;
|
|
}
|
|
}
|
|
/**
|
|
* Activate vertex array object.
|
|
* @param geometry - Geometry instance.
|
|
* @param program - Shader program instance.
|
|
*/
|
|
activateVao(geometry, program) {
|
|
var _a, _b;
|
|
const gl = this._renderer.gl;
|
|
const bufferSystem = this._renderer.buffer;
|
|
const attributes = geometry.attributes;
|
|
if (geometry.indexBuffer) {
|
|
bufferSystem.bind(geometry.indexBuffer);
|
|
}
|
|
let lastBuffer = null;
|
|
for (const j in attributes) {
|
|
const attribute = attributes[j];
|
|
const buffer = attribute.buffer;
|
|
const glBuffer = bufferSystem.getGlBuffer(buffer);
|
|
const programAttrib = program._attributeData[j];
|
|
if (programAttrib) {
|
|
if (lastBuffer !== glBuffer) {
|
|
bufferSystem.bind(buffer);
|
|
lastBuffer = glBuffer;
|
|
}
|
|
const location = programAttrib.location;
|
|
gl.enableVertexAttribArray(location);
|
|
const attributeInfo = getAttributeInfoFromFormat(attribute.format);
|
|
const type = getGlTypeFromFormat(attribute.format);
|
|
if (((_a = programAttrib.format) == null ? void 0 : _a.substring(1, 4)) === "int") {
|
|
gl.vertexAttribIPointer(
|
|
location,
|
|
attributeInfo.size,
|
|
type,
|
|
attribute.stride,
|
|
attribute.offset
|
|
);
|
|
} else {
|
|
gl.vertexAttribPointer(
|
|
location,
|
|
attributeInfo.size,
|
|
type,
|
|
attributeInfo.normalised,
|
|
attribute.stride,
|
|
attribute.offset
|
|
);
|
|
}
|
|
if (attribute.instance) {
|
|
if (this.hasInstance) {
|
|
const divisor = (_b = attribute.divisor) != null ? _b : 1;
|
|
gl.vertexAttribDivisor(location, divisor);
|
|
} else {
|
|
throw new Error("geometry error, GPU Instancing is not supported on this device");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Draws the currently bound geometry.
|
|
* @param topology - The type primitive to render.
|
|
* @param size - The number of elements to be rendered. If not specified, all vertices after the
|
|
* starting vertex will be drawn.
|
|
* @param start - The starting vertex in the geometry to start drawing from. If not specified,
|
|
* drawing will start from the first vertex.
|
|
* @param instanceCount - The number of instances of the set of elements to execute. If not specified,
|
|
* all instances will be drawn.
|
|
*/
|
|
draw(topology, size, start, instanceCount) {
|
|
const { gl } = this._renderer;
|
|
const geometry = this._activeGeometry;
|
|
const glTopology = topologyToGlMap[geometry.topology || topology];
|
|
instanceCount || (instanceCount = geometry.instanceCount);
|
|
if (geometry.indexBuffer) {
|
|
const byteSize = geometry.indexBuffer.data.BYTES_PER_ELEMENT;
|
|
const glType = byteSize === 2 ? gl.UNSIGNED_SHORT : gl.UNSIGNED_INT;
|
|
if (instanceCount > 1) {
|
|
gl.drawElementsInstanced(glTopology, size || geometry.indexBuffer.data.length, glType, (start || 0) * byteSize, instanceCount);
|
|
} else {
|
|
gl.drawElements(glTopology, size || geometry.indexBuffer.data.length, glType, (start || 0) * byteSize);
|
|
}
|
|
} else if (instanceCount > 1) {
|
|
gl.drawArraysInstanced(glTopology, start || 0, size || geometry.getSize(), instanceCount);
|
|
} else {
|
|
gl.drawArrays(glTopology, start || 0, size || geometry.getSize());
|
|
}
|
|
return this;
|
|
}
|
|
/** Unbind/reset everything. */
|
|
unbind() {
|
|
this.gl.bindVertexArray(null);
|
|
this._activeVao = null;
|
|
this._activeGeometry = null;
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
this.gl = null;
|
|
this._activeVao = null;
|
|
this._activeGeometry = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlGeometrySystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "geometry"
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$k = Object.defineProperty;
|
|
var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$k = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$k = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$k.call(b, prop))
|
|
__defNormalProp$k(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$k)
|
|
for (var prop of __getOwnPropSymbols$k(b)) {
|
|
if (__propIsEnum$k.call(b, prop))
|
|
__defNormalProp$k(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const bigTriangleGeometry = new Geometry({
|
|
attributes: {
|
|
aPosition: [
|
|
-1,
|
|
-1,
|
|
// Bottom left corner
|
|
3,
|
|
-1,
|
|
// Bottom right corner, extending beyond right edge
|
|
-1,
|
|
3
|
|
// Top left corner, extending beyond top edge
|
|
]
|
|
}
|
|
});
|
|
const _GlBackBufferSystem = class _GlBackBufferSystem {
|
|
constructor(renderer) {
|
|
/** if true, the back buffer is used */
|
|
this.useBackBuffer = false;
|
|
this._useBackBufferThisRender = false;
|
|
this._renderer = renderer;
|
|
}
|
|
init(options = {}) {
|
|
const { useBackBuffer, antialias } = __spreadValues$k(__spreadValues$k({}, _GlBackBufferSystem.defaultOptions), options);
|
|
this.useBackBuffer = useBackBuffer;
|
|
this._antialias = antialias;
|
|
if (!this._renderer.context.supports.msaa) {
|
|
warn("antialiasing, is not supported on when using the back buffer");
|
|
this._antialias = false;
|
|
}
|
|
this._state = State.for2d();
|
|
const bigTriangleProgram = new GlProgram({
|
|
vertex: `
|
|
attribute vec2 aPosition;
|
|
out vec2 vUv;
|
|
|
|
void main() {
|
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
|
|
vUv = (aPosition + 1.0) / 2.0;
|
|
|
|
// flip dem UVs
|
|
vUv.y = 1.0 - vUv.y;
|
|
}`,
|
|
fragment: `
|
|
in vec2 vUv;
|
|
out vec4 finalColor;
|
|
|
|
uniform sampler2D uTexture;
|
|
|
|
void main() {
|
|
finalColor = texture(uTexture, vUv);
|
|
}`,
|
|
name: "big-triangle"
|
|
});
|
|
this._bigTriangleShader = new Shader({
|
|
glProgram: bigTriangleProgram,
|
|
resources: {
|
|
uTexture: Texture.WHITE.source
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* This is called before the RenderTargetSystem is started. This is where
|
|
* we replace the target with the back buffer if required.
|
|
* @param options - The options for this render.
|
|
*/
|
|
renderStart(options) {
|
|
const renderTarget = this._renderer.renderTarget.getRenderTarget(options.target);
|
|
this._useBackBufferThisRender = this.useBackBuffer && !!renderTarget.isRoot;
|
|
if (this._useBackBufferThisRender) {
|
|
const renderTarget2 = this._renderer.renderTarget.getRenderTarget(options.target);
|
|
this._targetTexture = renderTarget2.colorTexture;
|
|
options.target = this._getBackBufferTexture(renderTarget2.colorTexture);
|
|
}
|
|
}
|
|
renderEnd() {
|
|
this._presentBackBuffer();
|
|
}
|
|
_presentBackBuffer() {
|
|
const renderer = this._renderer;
|
|
renderer.renderTarget.finishRenderPass();
|
|
if (!this._useBackBufferThisRender)
|
|
return;
|
|
renderer.renderTarget.bind(this._targetTexture, false);
|
|
this._bigTriangleShader.resources.uTexture = this._backBufferTexture.source;
|
|
renderer.encoder.draw({
|
|
geometry: bigTriangleGeometry,
|
|
shader: this._bigTriangleShader,
|
|
state: this._state
|
|
});
|
|
}
|
|
_getBackBufferTexture(targetSourceTexture) {
|
|
this._backBufferTexture = this._backBufferTexture || new Texture({
|
|
source: new TextureSource({
|
|
width: targetSourceTexture.width,
|
|
height: targetSourceTexture.height,
|
|
resolution: targetSourceTexture._resolution,
|
|
antialias: this._antialias
|
|
})
|
|
});
|
|
this._backBufferTexture.source.resize(
|
|
targetSourceTexture.width,
|
|
targetSourceTexture.height,
|
|
targetSourceTexture._resolution
|
|
);
|
|
return this._backBufferTexture;
|
|
}
|
|
/** destroys the back buffer */
|
|
destroy() {
|
|
if (this._backBufferTexture) {
|
|
this._backBufferTexture.destroy();
|
|
this._backBufferTexture = null;
|
|
}
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_GlBackBufferSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "backBuffer",
|
|
priority: 1
|
|
};
|
|
/** default options for the back buffer system */
|
|
_GlBackBufferSystem.defaultOptions = {
|
|
/** if true will use the back buffer where required */
|
|
useBackBuffer: false
|
|
};
|
|
let GlBackBufferSystem = _GlBackBufferSystem;
|
|
|
|
"use strict";
|
|
class GlColorMaskSystem {
|
|
constructor(renderer) {
|
|
this._colorMaskCache = 15;
|
|
this._renderer = renderer;
|
|
}
|
|
setMask(colorMask) {
|
|
if (this._colorMaskCache === colorMask)
|
|
return;
|
|
this._colorMaskCache = colorMask;
|
|
this._renderer.gl.colorMask(
|
|
!!(colorMask & 8),
|
|
!!(colorMask & 4),
|
|
!!(colorMask & 2),
|
|
!!(colorMask & 1)
|
|
);
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlColorMaskSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "colorMask"
|
|
};
|
|
|
|
"use strict";
|
|
class GlEncoderSystem {
|
|
constructor(renderer) {
|
|
this.commandFinished = Promise.resolve();
|
|
this._renderer = renderer;
|
|
}
|
|
setGeometry(geometry, shader) {
|
|
this._renderer.geometry.bind(geometry, shader.glProgram);
|
|
}
|
|
finishRenderPass() {
|
|
}
|
|
draw(options) {
|
|
const renderer = this._renderer;
|
|
const { geometry, shader, state, skipSync, topology: type, size, start, instanceCount } = options;
|
|
renderer.shader.bind(shader, skipSync);
|
|
renderer.geometry.bind(geometry, renderer.shader._activeProgram);
|
|
if (state) {
|
|
renderer.state.set(state);
|
|
}
|
|
renderer.geometry.draw(type, size, start, instanceCount != null ? instanceCount : geometry.instanceCount);
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlEncoderSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "encoder"
|
|
};
|
|
|
|
"use strict";
|
|
class GlRenderTarget {
|
|
constructor() {
|
|
this.width = -1;
|
|
this.height = -1;
|
|
this.msaa = false;
|
|
this.msaaRenderBuffer = [];
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const GpuStencilModesToPixi = [];
|
|
GpuStencilModesToPixi[STENCIL_MODES.NONE] = void 0;
|
|
GpuStencilModesToPixi[STENCIL_MODES.DISABLED] = {
|
|
stencilWriteMask: 0,
|
|
stencilReadMask: 0
|
|
};
|
|
GpuStencilModesToPixi[STENCIL_MODES.RENDERING_MASK_ADD] = {
|
|
stencilFront: {
|
|
compare: "equal",
|
|
passOp: "increment-clamp"
|
|
},
|
|
stencilBack: {
|
|
compare: "equal",
|
|
passOp: "increment-clamp"
|
|
}
|
|
};
|
|
GpuStencilModesToPixi[STENCIL_MODES.RENDERING_MASK_REMOVE] = {
|
|
stencilFront: {
|
|
compare: "equal",
|
|
passOp: "decrement-clamp"
|
|
},
|
|
stencilBack: {
|
|
compare: "equal",
|
|
passOp: "decrement-clamp"
|
|
}
|
|
};
|
|
GpuStencilModesToPixi[STENCIL_MODES.MASK_ACTIVE] = {
|
|
stencilWriteMask: 0,
|
|
stencilFront: {
|
|
compare: "equal",
|
|
passOp: "keep"
|
|
},
|
|
stencilBack: {
|
|
compare: "equal",
|
|
passOp: "keep"
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
class GlStencilSystem {
|
|
constructor(renderer) {
|
|
this._stencilCache = {
|
|
enabled: false,
|
|
stencilReference: 0,
|
|
stencilMode: STENCIL_MODES.NONE
|
|
};
|
|
this._renderTargetStencilState = /* @__PURE__ */ Object.create(null);
|
|
renderer.renderTarget.onRenderTargetChange.add(this);
|
|
}
|
|
contextChange(gl) {
|
|
this._gl = gl;
|
|
this._comparisonFuncMapping = {
|
|
always: gl.ALWAYS,
|
|
never: gl.NEVER,
|
|
equal: gl.EQUAL,
|
|
"not-equal": gl.NOTEQUAL,
|
|
less: gl.LESS,
|
|
"less-equal": gl.LEQUAL,
|
|
greater: gl.GREATER,
|
|
"greater-equal": gl.GEQUAL
|
|
};
|
|
this._stencilOpsMapping = {
|
|
keep: gl.KEEP,
|
|
zero: gl.ZERO,
|
|
replace: gl.REPLACE,
|
|
invert: gl.INVERT,
|
|
"increment-clamp": gl.INCR,
|
|
"decrement-clamp": gl.DECR,
|
|
"increment-wrap": gl.INCR_WRAP,
|
|
"decrement-wrap": gl.DECR_WRAP
|
|
};
|
|
this._stencilCache.enabled = false;
|
|
this._stencilCache.stencilMode = STENCIL_MODES.NONE;
|
|
this._stencilCache.stencilReference = 0;
|
|
}
|
|
onRenderTargetChange(renderTarget) {
|
|
if (this._activeRenderTarget === renderTarget)
|
|
return;
|
|
this._activeRenderTarget = renderTarget;
|
|
let stencilState = this._renderTargetStencilState[renderTarget.uid];
|
|
if (!stencilState) {
|
|
stencilState = this._renderTargetStencilState[renderTarget.uid] = {
|
|
stencilMode: STENCIL_MODES.DISABLED,
|
|
stencilReference: 0
|
|
};
|
|
}
|
|
this.setStencilMode(stencilState.stencilMode, stencilState.stencilReference);
|
|
}
|
|
setStencilMode(stencilMode, stencilReference) {
|
|
const stencilState = this._renderTargetStencilState[this._activeRenderTarget.uid];
|
|
const gl = this._gl;
|
|
const mode = GpuStencilModesToPixi[stencilMode];
|
|
const _stencilCache = this._stencilCache;
|
|
stencilState.stencilMode = stencilMode;
|
|
stencilState.stencilReference = stencilReference;
|
|
if (stencilMode === STENCIL_MODES.DISABLED) {
|
|
if (this._stencilCache.enabled) {
|
|
this._stencilCache.enabled = false;
|
|
gl.disable(gl.STENCIL_TEST);
|
|
}
|
|
return;
|
|
}
|
|
if (!this._stencilCache.enabled) {
|
|
this._stencilCache.enabled = true;
|
|
gl.enable(gl.STENCIL_TEST);
|
|
}
|
|
if (stencilMode !== _stencilCache.stencilMode || _stencilCache.stencilReference !== stencilReference) {
|
|
_stencilCache.stencilMode = stencilMode;
|
|
_stencilCache.stencilReference = stencilReference;
|
|
gl.stencilFunc(this._comparisonFuncMapping[mode.stencilBack.compare], stencilReference, 255);
|
|
gl.stencilOp(gl.KEEP, gl.KEEP, this._stencilOpsMapping[mode.stencilBack.passOp]);
|
|
}
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlStencilSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "stencil"
|
|
};
|
|
|
|
"use strict";
|
|
class UboSystem {
|
|
constructor(adaptor) {
|
|
/** Cache of uniform buffer layouts and sync functions, so we don't have to re-create them */
|
|
this._syncFunctionHash = /* @__PURE__ */ Object.create(null);
|
|
this._adaptor = adaptor;
|
|
this._systemCheck();
|
|
}
|
|
/**
|
|
* Overridable function by `pixi.js/unsafe-eval` to silence
|
|
* throwing an error if platform doesn't support unsafe-evals.
|
|
* @private
|
|
*/
|
|
_systemCheck() {
|
|
if (!unsafeEvalSupported()) {
|
|
throw new Error("Current environment does not allow unsafe-eval, please use pixi.js/unsafe-eval module to enable support.");
|
|
}
|
|
}
|
|
ensureUniformGroup(uniformGroup) {
|
|
const uniformData = this.getUniformGroupData(uniformGroup);
|
|
uniformGroup.buffer || (uniformGroup.buffer = new Buffer({
|
|
data: new Float32Array(uniformData.layout.size / 4),
|
|
usage: BufferUsage.UNIFORM | BufferUsage.COPY_DST
|
|
}));
|
|
}
|
|
getUniformGroupData(uniformGroup) {
|
|
return this._syncFunctionHash[uniformGroup._signature] || this._initUniformGroup(uniformGroup);
|
|
}
|
|
_initUniformGroup(uniformGroup) {
|
|
const uniformGroupSignature = uniformGroup._signature;
|
|
let uniformData = this._syncFunctionHash[uniformGroupSignature];
|
|
if (!uniformData) {
|
|
const elements = Object.keys(uniformGroup.uniformStructures).map((i) => uniformGroup.uniformStructures[i]);
|
|
const layout = this._adaptor.createUboElements(elements);
|
|
const syncFunction = this._generateUboSync(layout.uboElements);
|
|
uniformData = this._syncFunctionHash[uniformGroupSignature] = {
|
|
layout,
|
|
syncFunction
|
|
};
|
|
}
|
|
return this._syncFunctionHash[uniformGroupSignature];
|
|
}
|
|
_generateUboSync(uboElements) {
|
|
return this._adaptor.generateUboSync(uboElements);
|
|
}
|
|
syncUniformGroup(uniformGroup, data, offset) {
|
|
const uniformGroupData = this.getUniformGroupData(uniformGroup);
|
|
uniformGroup.buffer || (uniformGroup.buffer = new Buffer({
|
|
data: new Float32Array(uniformGroupData.layout.size / 4),
|
|
usage: BufferUsage.UNIFORM | BufferUsage.COPY_DST
|
|
}));
|
|
data || (data = uniformGroup.buffer.data);
|
|
offset || (offset = 0);
|
|
uniformGroupData.syncFunction(uniformGroup.uniforms, data, offset);
|
|
return true;
|
|
}
|
|
updateUniformGroup(uniformGroup) {
|
|
if (uniformGroup.isStatic && !uniformGroup._dirtyId)
|
|
return false;
|
|
uniformGroup._dirtyId = 0;
|
|
const synced = this.syncUniformGroup(uniformGroup);
|
|
uniformGroup.buffer.update();
|
|
return synced;
|
|
}
|
|
destroy() {
|
|
this._syncFunctionHash = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const WGSL_TO_STD40_SIZE = {
|
|
f32: 4,
|
|
"vec2<f32>": 8,
|
|
"vec3<f32>": 12,
|
|
"vec4<f32>": 16,
|
|
"mat2x2<f32>": 16 * 2,
|
|
"mat3x3<f32>": 16 * 3,
|
|
"mat4x4<f32>": 16 * 4
|
|
// TODO - not essential for now but support these in the future
|
|
// int: 4,
|
|
// ivec2: 8,
|
|
// ivec3: 12,
|
|
// ivec4: 16,
|
|
// uint: 4,
|
|
// uvec2: 8,
|
|
// uvec3: 12,
|
|
// uvec4: 16,
|
|
// bool: 4,
|
|
// bvec2: 8,
|
|
// bvec3: 12,
|
|
// bvec4: 16,
|
|
// mat2: 16 * 2,
|
|
// mat3: 16 * 3,
|
|
// mat4: 16 * 4,
|
|
};
|
|
function createUboElementsSTD40(uniformData) {
|
|
const uboElements = uniformData.map((data) => ({
|
|
data,
|
|
offset: 0,
|
|
size: 0
|
|
}));
|
|
let size = 0;
|
|
let chunkSize = 0;
|
|
let offset = 0;
|
|
for (let i = 0; i < uboElements.length; i++) {
|
|
const uboElement = uboElements[i];
|
|
size = WGSL_TO_STD40_SIZE[uboElement.data.type];
|
|
if (!size) {
|
|
throw new Error(`Unknown type ${uboElement.data.type}`);
|
|
}
|
|
if (uboElement.data.size > 1) {
|
|
size = Math.max(size, 16) * uboElement.data.size;
|
|
}
|
|
uboElement.size = size;
|
|
if (chunkSize % size !== 0 && chunkSize < 16) {
|
|
const lineUpValue = chunkSize % size % 16;
|
|
chunkSize += lineUpValue;
|
|
offset += lineUpValue;
|
|
}
|
|
if (chunkSize + size > 16) {
|
|
offset = Math.ceil(offset / 16) * 16;
|
|
uboElement.offset = offset;
|
|
offset += size;
|
|
chunkSize = size;
|
|
} else {
|
|
uboElement.offset = offset;
|
|
chunkSize += size;
|
|
offset += size;
|
|
}
|
|
}
|
|
offset = Math.ceil(offset / 16) * 16;
|
|
return { uboElements, size: offset };
|
|
}
|
|
|
|
"use strict";
|
|
const uniformParsers = [
|
|
// uploading pixi matrix object to mat3
|
|
{
|
|
type: "mat3x3<f32>",
|
|
test: (data) => {
|
|
const value = data.value;
|
|
return value.a !== void 0;
|
|
},
|
|
ubo: `
|
|
var matrix = uv[name].toArray(true);
|
|
data[offset] = matrix[0];
|
|
data[offset + 1] = matrix[1];
|
|
data[offset + 2] = matrix[2];
|
|
data[offset + 4] = matrix[3];
|
|
data[offset + 5] = matrix[4];
|
|
data[offset + 6] = matrix[5];
|
|
data[offset + 8] = matrix[6];
|
|
data[offset + 9] = matrix[7];
|
|
data[offset + 10] = matrix[8];
|
|
`,
|
|
uniform: `
|
|
gl.uniformMatrix3fv(ud[name].location, false, uv[name].toArray(true));
|
|
`
|
|
},
|
|
// uploading a pixi rectangle as a vec4
|
|
{
|
|
type: "vec4<f32>",
|
|
test: (data) => data.type === "vec4<f32>" && data.size === 1 && data.value.width !== void 0,
|
|
ubo: `
|
|
v = uv[name];
|
|
data[offset] = v.x;
|
|
data[offset + 1] = v.y;
|
|
data[offset + 2] = v.width;
|
|
data[offset + 3] = v.height;
|
|
`,
|
|
uniform: `
|
|
cv = ud[name].value;
|
|
v = uv[name];
|
|
if (cv[0] !== v.x || cv[1] !== v.y || cv[2] !== v.width || cv[3] !== v.height) {
|
|
cv[0] = v.x;
|
|
cv[1] = v.y;
|
|
cv[2] = v.width;
|
|
cv[3] = v.height;
|
|
gl.uniform4f(ud[name].location, v.x, v.y, v.width, v.height);
|
|
}
|
|
`
|
|
},
|
|
// uploading a pixi point as a vec2
|
|
{
|
|
type: "vec2<f32>",
|
|
test: (data) => data.type === "vec2<f32>" && data.size === 1 && data.value.x !== void 0,
|
|
ubo: `
|
|
v = uv[name];
|
|
data[offset] = v.x;
|
|
data[offset + 1] = v.y;
|
|
`,
|
|
uniform: `
|
|
cv = ud[name].value;
|
|
v = uv[name];
|
|
if (cv[0] !== v.x || cv[1] !== v.y) {
|
|
cv[0] = v.x;
|
|
cv[1] = v.y;
|
|
gl.uniform2f(ud[name].location, v.x, v.y);
|
|
}
|
|
`
|
|
},
|
|
// uploading a pixi color as a vec4
|
|
{
|
|
type: "vec4<f32>",
|
|
test: (data) => data.type === "vec4<f32>" && data.size === 1 && data.value.red !== void 0,
|
|
ubo: `
|
|
v = uv[name];
|
|
data[offset] = v.red;
|
|
data[offset + 1] = v.green;
|
|
data[offset + 2] = v.blue;
|
|
data[offset + 3] = v.alpha;
|
|
`,
|
|
uniform: `
|
|
cv = ud[name].value;
|
|
v = uv[name];
|
|
if (cv[0] !== v.red || cv[1] !== v.green || cv[2] !== v.blue || cv[3] !== v.alpha) {
|
|
cv[0] = v.red;
|
|
cv[1] = v.green;
|
|
cv[2] = v.blue;
|
|
cv[3] = v.alpha;
|
|
gl.uniform4f(ud[name].location, v.red, v.green, v.blue, v.alpha);
|
|
}
|
|
`
|
|
},
|
|
// uploading a pixi color as a vec3
|
|
{
|
|
type: "vec3<f32>",
|
|
test: (data) => data.type === "vec3<f32>" && data.size === 1 && data.value.red !== void 0,
|
|
ubo: `
|
|
v = uv[name];
|
|
data[offset] = v.red;
|
|
data[offset + 1] = v.green;
|
|
data[offset + 2] = v.blue;
|
|
`,
|
|
uniform: `
|
|
cv = ud[name].value;
|
|
v = uv[name];
|
|
if (cv[0] !== v.red || cv[1] !== v.green || cv[2] !== v.blue) {
|
|
cv[0] = v.red;
|
|
cv[1] = v.green;
|
|
cv[2] = v.blue;
|
|
gl.uniform3f(ud[name].location, v.red, v.green, v.blue);
|
|
}
|
|
`
|
|
}
|
|
];
|
|
|
|
"use strict";
|
|
function createUboSyncFunction(uboElements, parserCode, arrayGenerationFunction, singleSettersMap) {
|
|
const funcFragments = [`
|
|
var v = null;
|
|
var v2 = null;
|
|
var t = 0;
|
|
var index = 0;
|
|
var name = null;
|
|
var arrayOffset = null;
|
|
`];
|
|
let prev = 0;
|
|
for (let i = 0; i < uboElements.length; i++) {
|
|
const uboElement = uboElements[i];
|
|
const name = uboElement.data.name;
|
|
let parsed = false;
|
|
let offset = 0;
|
|
for (let j = 0; j < uniformParsers.length; j++) {
|
|
const uniformParser = uniformParsers[j];
|
|
if (uniformParser.test(uboElement.data)) {
|
|
offset = uboElement.offset / 4;
|
|
funcFragments.push(
|
|
`name = "${name}";`,
|
|
`offset += ${offset - prev};`,
|
|
uniformParsers[j][parserCode] || uniformParsers[j].ubo
|
|
);
|
|
parsed = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!parsed) {
|
|
if (uboElement.data.size > 1) {
|
|
offset = uboElement.offset / 4;
|
|
funcFragments.push(arrayGenerationFunction(uboElement, offset - prev));
|
|
} else {
|
|
const template = singleSettersMap[uboElement.data.type];
|
|
offset = uboElement.offset / 4;
|
|
funcFragments.push(
|
|
/* wgsl */
|
|
`
|
|
v = uv.${name};
|
|
offset += ${offset - prev};
|
|
${template};
|
|
`
|
|
);
|
|
}
|
|
}
|
|
prev = offset;
|
|
}
|
|
const fragmentSrc = funcFragments.join("\n");
|
|
return new Function(
|
|
"uv",
|
|
"data",
|
|
"offset",
|
|
fragmentSrc
|
|
);
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$j = Object.defineProperty;
|
|
var __defProps$8 = Object.defineProperties;
|
|
var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$j = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$j = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$j.call(b, prop))
|
|
__defNormalProp$j(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$j)
|
|
for (var prop of __getOwnPropSymbols$j(b)) {
|
|
if (__propIsEnum$j.call(b, prop))
|
|
__defNormalProp$j(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
|
|
function loopMatrix(col, row) {
|
|
const total = col * row;
|
|
return `
|
|
for (let i = 0; i < ${total}; i++) {
|
|
data[offset + (((i / ${col})|0) * 4) + (i % ${col})] = v[i];
|
|
}
|
|
`;
|
|
}
|
|
const uboSyncFunctionsSTD40 = {
|
|
f32: `
|
|
data[offset] = v;`,
|
|
i32: `
|
|
data[offset] = v;`,
|
|
"vec2<f32>": `
|
|
data[offset] = v[0];
|
|
data[offset + 1] = v[1];`,
|
|
"vec3<f32>": `
|
|
data[offset] = v[0];
|
|
data[offset + 1] = v[1];
|
|
data[offset + 2] = v[2];`,
|
|
"vec4<f32>": `
|
|
data[offset] = v[0];
|
|
data[offset + 1] = v[1];
|
|
data[offset + 2] = v[2];
|
|
data[offset + 3] = v[3];`,
|
|
"mat2x2<f32>": `
|
|
data[offset] = v[0];
|
|
data[offset + 1] = v[1];
|
|
data[offset + 4] = v[2];
|
|
data[offset + 5] = v[3];`,
|
|
"mat3x3<f32>": `
|
|
data[offset] = v[0];
|
|
data[offset + 1] = v[1];
|
|
data[offset + 2] = v[2];
|
|
data[offset + 4] = v[3];
|
|
data[offset + 5] = v[4];
|
|
data[offset + 6] = v[5];
|
|
data[offset + 8] = v[6];
|
|
data[offset + 9] = v[7];
|
|
data[offset + 10] = v[8];`,
|
|
"mat4x4<f32>": `
|
|
for (let i = 0; i < 16; i++) {
|
|
data[offset + i] = v[i];
|
|
}`,
|
|
"mat3x2<f32>": loopMatrix(3, 2),
|
|
"mat4x2<f32>": loopMatrix(4, 2),
|
|
"mat2x3<f32>": loopMatrix(2, 3),
|
|
"mat4x3<f32>": loopMatrix(4, 3),
|
|
"mat2x4<f32>": loopMatrix(2, 4),
|
|
"mat3x4<f32>": loopMatrix(3, 4)
|
|
};
|
|
const uboSyncFunctionsWGSL = __spreadProps$8(__spreadValues$j({}, uboSyncFunctionsSTD40), {
|
|
"mat2x2<f32>": `
|
|
data[offset] = v[0];
|
|
data[offset + 1] = v[1];
|
|
data[offset + 2] = v[2];
|
|
data[offset + 3] = v[3];
|
|
`
|
|
});
|
|
|
|
"use strict";
|
|
function generateArraySyncSTD40(uboElement, offsetToAdd) {
|
|
const rowSize = Math.max(WGSL_TO_STD40_SIZE[uboElement.data.type] / 16, 1);
|
|
const elementSize = uboElement.data.value.length / uboElement.data.size;
|
|
const remainder = (4 - elementSize % 4) % 4;
|
|
return `
|
|
v = uv.${uboElement.data.name};
|
|
offset += ${offsetToAdd};
|
|
|
|
arrayOffset = offset;
|
|
|
|
t = 0;
|
|
|
|
for(var i=0; i < ${uboElement.data.size * rowSize}; i++)
|
|
{
|
|
for(var j = 0; j < ${elementSize}; j++)
|
|
{
|
|
data[arrayOffset++] = v[t++];
|
|
}
|
|
${remainder !== 0 ? `arrayOffset += ${remainder};` : ""}
|
|
}
|
|
`;
|
|
}
|
|
|
|
"use strict";
|
|
function createUboSyncFunctionSTD40(uboElements) {
|
|
return createUboSyncFunction(
|
|
uboElements,
|
|
"uboStd40",
|
|
generateArraySyncSTD40,
|
|
uboSyncFunctionsSTD40
|
|
);
|
|
}
|
|
|
|
"use strict";
|
|
class GlUboSystem extends UboSystem {
|
|
constructor() {
|
|
super({
|
|
createUboElements: createUboElementsSTD40,
|
|
generateUboSync: createUboSyncFunctionSTD40
|
|
});
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlUboSystem.extension = {
|
|
type: [ExtensionType.WebGLSystem],
|
|
name: "ubo"
|
|
};
|
|
|
|
"use strict";
|
|
class GlRenderTargetAdaptor {
|
|
constructor() {
|
|
this._clearColorCache = [0, 0, 0, 0];
|
|
this._viewPortCache = new Rectangle();
|
|
}
|
|
init(renderer, renderTargetSystem) {
|
|
this._renderer = renderer;
|
|
this._renderTargetSystem = renderTargetSystem;
|
|
renderer.runners.contextChange.add(this);
|
|
}
|
|
contextChange() {
|
|
this._clearColorCache = [0, 0, 0, 0];
|
|
this._viewPortCache = new Rectangle();
|
|
}
|
|
copyToTexture(sourceRenderSurfaceTexture, destinationTexture, originSrc, size, originDest) {
|
|
const renderTargetSystem = this._renderTargetSystem;
|
|
const renderer = this._renderer;
|
|
const glRenderTarget = renderTargetSystem.getGpuRenderTarget(sourceRenderSurfaceTexture);
|
|
const gl = renderer.gl;
|
|
this.finishRenderPass(sourceRenderSurfaceTexture);
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, glRenderTarget.resolveTargetFramebuffer);
|
|
renderer.texture.bind(destinationTexture, 0);
|
|
gl.copyTexSubImage2D(
|
|
gl.TEXTURE_2D,
|
|
0,
|
|
originDest.x,
|
|
originDest.y,
|
|
originSrc.x,
|
|
originSrc.y,
|
|
size.width,
|
|
size.height
|
|
);
|
|
return destinationTexture;
|
|
}
|
|
startRenderPass(renderTarget, clear = true, clearColor, viewport) {
|
|
const renderTargetSystem = this._renderTargetSystem;
|
|
const source = renderTarget.colorTexture;
|
|
const gpuRenderTarget = renderTargetSystem.getGpuRenderTarget(renderTarget);
|
|
let viewPortY = viewport.y;
|
|
if (renderTarget.isRoot) {
|
|
viewPortY = source.pixelHeight - viewport.height;
|
|
}
|
|
renderTarget.colorTextures.forEach((texture) => {
|
|
this._renderer.texture.unbind(texture);
|
|
});
|
|
const gl = this._renderer.gl;
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, gpuRenderTarget.framebuffer);
|
|
const viewPortCache = this._viewPortCache;
|
|
if (viewPortCache.x !== viewport.x || viewPortCache.y !== viewPortY || viewPortCache.width !== viewport.width || viewPortCache.height !== viewport.height) {
|
|
viewPortCache.x = viewport.x;
|
|
viewPortCache.y = viewPortY;
|
|
viewPortCache.width = viewport.width;
|
|
viewPortCache.height = viewport.height;
|
|
gl.viewport(
|
|
viewport.x,
|
|
viewPortY,
|
|
viewport.width,
|
|
viewport.height
|
|
);
|
|
}
|
|
if (!gpuRenderTarget.depthStencilRenderBuffer && (renderTarget.stencil || renderTarget.depth)) {
|
|
this._initStencil(gpuRenderTarget);
|
|
}
|
|
this.clear(renderTarget, clear, clearColor);
|
|
}
|
|
finishRenderPass(renderTarget) {
|
|
const renderTargetSystem = this._renderTargetSystem;
|
|
const glRenderTarget = renderTargetSystem.getGpuRenderTarget(renderTarget);
|
|
if (!glRenderTarget.msaa)
|
|
return;
|
|
const gl = this._renderer.gl;
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, glRenderTarget.resolveTargetFramebuffer);
|
|
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, glRenderTarget.framebuffer);
|
|
gl.blitFramebuffer(
|
|
0,
|
|
0,
|
|
glRenderTarget.width,
|
|
glRenderTarget.height,
|
|
0,
|
|
0,
|
|
glRenderTarget.width,
|
|
glRenderTarget.height,
|
|
gl.COLOR_BUFFER_BIT,
|
|
gl.NEAREST
|
|
);
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, glRenderTarget.framebuffer);
|
|
}
|
|
initGpuRenderTarget(renderTarget) {
|
|
const renderer = this._renderer;
|
|
const gl = renderer.gl;
|
|
const glRenderTarget = new GlRenderTarget();
|
|
const colorTexture = renderTarget.colorTexture;
|
|
if (CanvasSource.test(colorTexture.resource)) {
|
|
this._renderer.context.ensureCanvasSize(renderTarget.colorTexture.resource);
|
|
glRenderTarget.framebuffer = null;
|
|
return glRenderTarget;
|
|
}
|
|
this._initColor(renderTarget, glRenderTarget);
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
|
|
return glRenderTarget;
|
|
}
|
|
destroyGpuRenderTarget(gpuRenderTarget) {
|
|
const gl = this._renderer.gl;
|
|
if (gpuRenderTarget.framebuffer) {
|
|
gl.deleteFramebuffer(gpuRenderTarget.framebuffer);
|
|
gpuRenderTarget.framebuffer = null;
|
|
}
|
|
if (gpuRenderTarget.resolveTargetFramebuffer) {
|
|
gl.deleteFramebuffer(gpuRenderTarget.resolveTargetFramebuffer);
|
|
gpuRenderTarget.resolveTargetFramebuffer = null;
|
|
}
|
|
if (gpuRenderTarget.depthStencilRenderBuffer) {
|
|
gl.deleteRenderbuffer(gpuRenderTarget.depthStencilRenderBuffer);
|
|
gpuRenderTarget.depthStencilRenderBuffer = null;
|
|
}
|
|
gpuRenderTarget.msaaRenderBuffer.forEach((renderBuffer) => {
|
|
gl.deleteRenderbuffer(renderBuffer);
|
|
});
|
|
gpuRenderTarget.msaaRenderBuffer = null;
|
|
}
|
|
clear(_renderTarget, clear, clearColor) {
|
|
if (!clear)
|
|
return;
|
|
const renderTargetSystem = this._renderTargetSystem;
|
|
if (typeof clear === "boolean") {
|
|
clear = clear ? CLEAR.ALL : CLEAR.NONE;
|
|
}
|
|
const gl = this._renderer.gl;
|
|
if (clear & CLEAR.COLOR) {
|
|
clearColor != null ? clearColor : clearColor = renderTargetSystem.defaultClearColor;
|
|
const clearColorCache = this._clearColorCache;
|
|
const clearColorArray = clearColor;
|
|
if (clearColorCache[0] !== clearColorArray[0] || clearColorCache[1] !== clearColorArray[1] || clearColorCache[2] !== clearColorArray[2] || clearColorCache[3] !== clearColorArray[3]) {
|
|
clearColorCache[0] = clearColorArray[0];
|
|
clearColorCache[1] = clearColorArray[1];
|
|
clearColorCache[2] = clearColorArray[2];
|
|
clearColorCache[3] = clearColorArray[3];
|
|
gl.clearColor(clearColorArray[0], clearColorArray[1], clearColorArray[2], clearColorArray[3]);
|
|
}
|
|
}
|
|
gl.clear(clear);
|
|
}
|
|
resizeGpuRenderTarget(renderTarget) {
|
|
if (renderTarget.isRoot)
|
|
return;
|
|
const renderTargetSystem = this._renderTargetSystem;
|
|
const glRenderTarget = renderTargetSystem.getGpuRenderTarget(renderTarget);
|
|
this._resizeColor(renderTarget, glRenderTarget);
|
|
if (renderTarget.stencil || renderTarget.depth) {
|
|
this._resizeStencil(glRenderTarget);
|
|
}
|
|
}
|
|
_initColor(renderTarget, glRenderTarget) {
|
|
const renderer = this._renderer;
|
|
const gl = renderer.gl;
|
|
const resolveTargetFramebuffer = gl.createFramebuffer();
|
|
glRenderTarget.resolveTargetFramebuffer = resolveTargetFramebuffer;
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, resolveTargetFramebuffer);
|
|
glRenderTarget.width = renderTarget.colorTexture.source.pixelWidth;
|
|
glRenderTarget.height = renderTarget.colorTexture.source.pixelHeight;
|
|
renderTarget.colorTextures.forEach((colorTexture, i) => {
|
|
const source = colorTexture.source;
|
|
if (source.antialias) {
|
|
if (renderer.context.supports.msaa) {
|
|
glRenderTarget.msaa = true;
|
|
} else {
|
|
warn("[RenderTexture] Antialiasing on textures is not supported in WebGL1");
|
|
}
|
|
}
|
|
renderer.texture.bindSource(source, 0);
|
|
const glSource = renderer.texture.getGlSource(source);
|
|
const glTexture = glSource.texture;
|
|
gl.framebufferTexture2D(
|
|
gl.FRAMEBUFFER,
|
|
gl.COLOR_ATTACHMENT0 + i,
|
|
3553,
|
|
// texture.target,
|
|
glTexture,
|
|
0
|
|
);
|
|
});
|
|
if (glRenderTarget.msaa) {
|
|
const viewFramebuffer = gl.createFramebuffer();
|
|
glRenderTarget.framebuffer = viewFramebuffer;
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, viewFramebuffer);
|
|
renderTarget.colorTextures.forEach((_, i) => {
|
|
const msaaRenderBuffer = gl.createRenderbuffer();
|
|
glRenderTarget.msaaRenderBuffer[i] = msaaRenderBuffer;
|
|
});
|
|
} else {
|
|
glRenderTarget.framebuffer = resolveTargetFramebuffer;
|
|
}
|
|
this._resizeColor(renderTarget, glRenderTarget);
|
|
}
|
|
_resizeColor(renderTarget, glRenderTarget) {
|
|
const source = renderTarget.colorTexture.source;
|
|
glRenderTarget.width = source.pixelWidth;
|
|
glRenderTarget.height = source.pixelHeight;
|
|
renderTarget.colorTextures.forEach((colorTexture, i) => {
|
|
if (i === 0)
|
|
return;
|
|
colorTexture.source.resize(source.width, source.height, source._resolution);
|
|
});
|
|
if (glRenderTarget.msaa) {
|
|
const renderer = this._renderer;
|
|
const gl = renderer.gl;
|
|
const viewFramebuffer = glRenderTarget.framebuffer;
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, viewFramebuffer);
|
|
renderTarget.colorTextures.forEach((colorTexture, i) => {
|
|
const source2 = colorTexture.source;
|
|
renderer.texture.bindSource(source2, 0);
|
|
const glSource = renderer.texture.getGlSource(source2);
|
|
const glInternalFormat = glSource.internalFormat;
|
|
const msaaRenderBuffer = glRenderTarget.msaaRenderBuffer[i];
|
|
gl.bindRenderbuffer(
|
|
gl.RENDERBUFFER,
|
|
msaaRenderBuffer
|
|
);
|
|
gl.renderbufferStorageMultisample(
|
|
gl.RENDERBUFFER,
|
|
4,
|
|
glInternalFormat,
|
|
source2.pixelWidth,
|
|
source2.pixelHeight
|
|
);
|
|
gl.framebufferRenderbuffer(
|
|
gl.FRAMEBUFFER,
|
|
gl.COLOR_ATTACHMENT0 + i,
|
|
gl.RENDERBUFFER,
|
|
msaaRenderBuffer
|
|
);
|
|
});
|
|
}
|
|
}
|
|
_initStencil(glRenderTarget) {
|
|
if (glRenderTarget.framebuffer === null)
|
|
return;
|
|
const gl = this._renderer.gl;
|
|
const depthStencilRenderBuffer = gl.createRenderbuffer();
|
|
glRenderTarget.depthStencilRenderBuffer = depthStencilRenderBuffer;
|
|
gl.bindRenderbuffer(
|
|
gl.RENDERBUFFER,
|
|
depthStencilRenderBuffer
|
|
);
|
|
gl.framebufferRenderbuffer(
|
|
gl.FRAMEBUFFER,
|
|
gl.DEPTH_STENCIL_ATTACHMENT,
|
|
gl.RENDERBUFFER,
|
|
depthStencilRenderBuffer
|
|
);
|
|
this._resizeStencil(glRenderTarget);
|
|
}
|
|
_resizeStencil(glRenderTarget) {
|
|
const gl = this._renderer.gl;
|
|
gl.bindRenderbuffer(
|
|
gl.RENDERBUFFER,
|
|
glRenderTarget.depthStencilRenderBuffer
|
|
);
|
|
if (glRenderTarget.msaa) {
|
|
gl.renderbufferStorageMultisample(
|
|
gl.RENDERBUFFER,
|
|
4,
|
|
gl.DEPTH24_STENCIL8,
|
|
glRenderTarget.width,
|
|
glRenderTarget.height
|
|
);
|
|
} else {
|
|
gl.renderbufferStorage(
|
|
gl.RENDERBUFFER,
|
|
this._renderer.context.webGLVersion === 2 ? gl.DEPTH24_STENCIL8 : gl.DEPTH_STENCIL,
|
|
glRenderTarget.width,
|
|
glRenderTarget.height
|
|
);
|
|
}
|
|
}
|
|
postrender(renderTarget) {
|
|
if (!this._renderer.context.multiView)
|
|
return;
|
|
if (CanvasSource.test(renderTarget.colorTexture.resource)) {
|
|
const contextCanvas = this._renderer.context.canvas;
|
|
const canvasSource = renderTarget.colorTexture;
|
|
canvasSource.context2D.drawImage(
|
|
contextCanvas,
|
|
0,
|
|
canvasSource.pixelHeight - contextCanvas.height
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function calculateProjection(pm, x, y, width, height, flipY) {
|
|
const sign = flipY ? 1 : -1;
|
|
pm.identity();
|
|
pm.a = 1 / width * 2;
|
|
pm.d = sign * (1 / height * 2);
|
|
pm.tx = -1 - x * pm.a;
|
|
pm.ty = -sign - y * pm.d;
|
|
return pm;
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$i = Object.defineProperty;
|
|
var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$i = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$i = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$i.call(b, prop))
|
|
__defNormalProp$i(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$i)
|
|
for (var prop of __getOwnPropSymbols$i(b)) {
|
|
if (__propIsEnum$i.call(b, prop))
|
|
__defNormalProp$i(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const canvasCache = /* @__PURE__ */ new Map();
|
|
function getCanvasTexture(canvas, options) {
|
|
if (!canvasCache.has(canvas)) {
|
|
const texture = new Texture({
|
|
source: new CanvasSource(__spreadValues$i({
|
|
resource: canvas
|
|
}, options))
|
|
});
|
|
const onDestroy = () => {
|
|
if (canvasCache.get(canvas) === texture) {
|
|
canvasCache.delete(canvas);
|
|
}
|
|
};
|
|
texture.once("destroy", onDestroy);
|
|
texture.source.once("destroy", onDestroy);
|
|
canvasCache.set(canvas, texture);
|
|
}
|
|
return canvasCache.get(canvas);
|
|
}
|
|
function hasCachedCanvasTexture(canvas) {
|
|
return canvasCache.has(canvas);
|
|
}
|
|
|
|
"use strict";
|
|
function isRenderingToScreen(renderTarget) {
|
|
const resource = renderTarget.colorTexture.source.resource;
|
|
return globalThis.HTMLCanvasElement && resource instanceof HTMLCanvasElement && document.body.contains(resource);
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$h = Object.defineProperty;
|
|
var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$h = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$h = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$h.call(b, prop))
|
|
__defNormalProp$h(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$h)
|
|
for (var prop of __getOwnPropSymbols$h(b)) {
|
|
if (__propIsEnum$h.call(b, prop))
|
|
__defNormalProp$h(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _RenderTarget = class _RenderTarget {
|
|
/**
|
|
* @param [descriptor] - Options for creating a render target.
|
|
*/
|
|
constructor(descriptor = {}) {
|
|
/** unique id for this render target */
|
|
this.uid = uid$1("renderTarget");
|
|
/**
|
|
* An array of textures that can be written to by the GPU - mostly this has one texture in Pixi, but you could
|
|
* write to multiple if required! (eg deferred lighting)
|
|
*/
|
|
this.colorTextures = [];
|
|
this.dirtyId = 0;
|
|
this.isRoot = false;
|
|
this._size = new Float32Array(2);
|
|
/** if true, then when the render target is destroyed, it will destroy all the textures that were created for it. */
|
|
this._managedColorTextures = false;
|
|
descriptor = __spreadValues$h(__spreadValues$h({}, _RenderTarget.defaultOptions), descriptor);
|
|
this.stencil = descriptor.stencil;
|
|
this.depth = descriptor.depth;
|
|
this.isRoot = descriptor.isRoot;
|
|
if (typeof descriptor.colorTextures === "number") {
|
|
this._managedColorTextures = true;
|
|
for (let i = 0; i < descriptor.colorTextures; i++) {
|
|
this.colorTextures.push(
|
|
new TextureSource({
|
|
width: descriptor.width,
|
|
height: descriptor.height,
|
|
resolution: descriptor.resolution,
|
|
antialias: descriptor.antialias
|
|
})
|
|
);
|
|
}
|
|
} else {
|
|
this.colorTextures = [...descriptor.colorTextures.map((texture) => texture.source)];
|
|
const colorSource = this.colorTexture.source;
|
|
this.resize(colorSource.width, colorSource.height, colorSource._resolution);
|
|
}
|
|
this.colorTexture.source.on("resize", this.onSourceResize, this);
|
|
if (descriptor.depthStencilTexture || this.stencil) {
|
|
if (descriptor.depthStencilTexture instanceof Texture || descriptor.depthStencilTexture instanceof TextureSource) {
|
|
this.depthStencilTexture = descriptor.depthStencilTexture.source;
|
|
} else {
|
|
this.ensureDepthStencilTexture();
|
|
}
|
|
}
|
|
}
|
|
get size() {
|
|
const _size = this._size;
|
|
_size[0] = this.pixelWidth;
|
|
_size[1] = this.pixelHeight;
|
|
return _size;
|
|
}
|
|
get width() {
|
|
return this.colorTexture.source.width;
|
|
}
|
|
get height() {
|
|
return this.colorTexture.source.height;
|
|
}
|
|
get pixelWidth() {
|
|
return this.colorTexture.source.pixelWidth;
|
|
}
|
|
get pixelHeight() {
|
|
return this.colorTexture.source.pixelHeight;
|
|
}
|
|
get resolution() {
|
|
return this.colorTexture.source._resolution;
|
|
}
|
|
get colorTexture() {
|
|
return this.colorTextures[0];
|
|
}
|
|
onSourceResize(source) {
|
|
this.resize(source.width, source.height, source._resolution, true);
|
|
}
|
|
/**
|
|
* This will ensure a depthStencil texture is created for this render target.
|
|
* Most likely called by the mask system to make sure we have stencil buffer added.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
ensureDepthStencilTexture() {
|
|
if (!this.depthStencilTexture) {
|
|
this.depthStencilTexture = new TextureSource({
|
|
width: this.width,
|
|
height: this.height,
|
|
resolution: this.resolution,
|
|
format: "depth24plus-stencil8",
|
|
autoGenerateMipmaps: false,
|
|
antialias: false,
|
|
mipLevelCount: 1
|
|
// sampleCount: handled by the render target system..
|
|
});
|
|
}
|
|
}
|
|
resize(width, height, resolution = this.resolution, skipColorTexture = false) {
|
|
this.dirtyId++;
|
|
this.colorTextures.forEach((colorTexture, i) => {
|
|
if (skipColorTexture && i === 0)
|
|
return;
|
|
colorTexture.source.resize(width, height, resolution);
|
|
});
|
|
if (this.depthStencilTexture) {
|
|
this.depthStencilTexture.source.resize(width, height, resolution);
|
|
}
|
|
}
|
|
destroy() {
|
|
this.colorTexture.source.off("resize", this.onSourceResize, this);
|
|
if (this._managedColorTextures) {
|
|
this.colorTextures.forEach((texture) => {
|
|
texture.destroy();
|
|
});
|
|
}
|
|
if (this.depthStencilTexture) {
|
|
this.depthStencilTexture.destroy();
|
|
delete this.depthStencilTexture;
|
|
}
|
|
}
|
|
};
|
|
/** The default options for a render target */
|
|
_RenderTarget.defaultOptions = {
|
|
/** the width of the RenderTarget */
|
|
width: 0,
|
|
/** the height of the RenderTarget */
|
|
height: 0,
|
|
/** the resolution of the RenderTarget */
|
|
resolution: 1,
|
|
/** an array of textures, or a number indicating how many color textures there should be */
|
|
colorTextures: 1,
|
|
/** should this render target have a stencil buffer? */
|
|
stencil: false,
|
|
/** should this render target have a depth buffer? */
|
|
depth: false,
|
|
/** should this render target be antialiased? */
|
|
antialias: false,
|
|
// save on perf by default!
|
|
/** is this a root element, true if this is gl context owners render target */
|
|
isRoot: false
|
|
};
|
|
let RenderTarget = _RenderTarget;
|
|
|
|
"use strict";
|
|
class RenderTargetSystem {
|
|
constructor(renderer) {
|
|
/** This is the root viewport for the render pass*/
|
|
this.rootViewPort = new Rectangle();
|
|
/** the current viewport that the gpu is using */
|
|
this.viewport = new Rectangle();
|
|
/**
|
|
* a runner that lets systems know if the active render target has changed.
|
|
* Eg the Stencil System needs to know so it can manage the stencil buffer
|
|
*/
|
|
this.onRenderTargetChange = new SystemRunner("onRenderTargetChange");
|
|
/** the projection matrix that is used by the shaders based on the active render target and the viewport */
|
|
this.projectionMatrix = new Matrix();
|
|
/** the default clear color for render targets */
|
|
this.defaultClearColor = [0, 0, 0, 0];
|
|
/**
|
|
* a hash that stores the render target for a given render surface. When you pass in a texture source,
|
|
* a render target is created for it. This map stores and makes it easy to retrieve the render target
|
|
*/
|
|
this._renderSurfaceToRenderTargetHash = /* @__PURE__ */ new Map();
|
|
/** A hash that stores a gpu render target for a given render target. */
|
|
this._gpuRenderTargetHash = /* @__PURE__ */ Object.create(null);
|
|
/**
|
|
* A stack that stores the render target and frame that is currently being rendered to.
|
|
* When push is called, the current render target is stored in this stack.
|
|
* When pop is called, the previous render target is restored.
|
|
*/
|
|
this._renderTargetStack = [];
|
|
this._renderer = renderer;
|
|
}
|
|
/** called when dev wants to finish a render pass */
|
|
finishRenderPass() {
|
|
this.adaptor.finishRenderPass(this.renderTarget);
|
|
}
|
|
/**
|
|
* called when the renderer starts to render a scene.
|
|
* @param options
|
|
* @param options.target - the render target to render to
|
|
* @param options.clear - the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
|
|
* @param options.clearColor - the color to clear to
|
|
* @param options.frame - the frame to render to
|
|
*/
|
|
renderStart({
|
|
target,
|
|
clear,
|
|
clearColor,
|
|
frame
|
|
}) {
|
|
this._renderTargetStack.length = 0;
|
|
this.push(
|
|
target,
|
|
clear,
|
|
clearColor,
|
|
frame
|
|
);
|
|
this.rootViewPort.copyFrom(this.viewport);
|
|
this.rootRenderTarget = this.renderTarget;
|
|
this.renderingToScreen = isRenderingToScreen(this.rootRenderTarget);
|
|
}
|
|
postrender() {
|
|
var _a, _b;
|
|
(_b = (_a = this.adaptor).postrender) == null ? void 0 : _b.call(_a, this.rootRenderTarget);
|
|
}
|
|
/**
|
|
* Binding a render surface! This is the main function of the render target system.
|
|
* It will take the RenderSurface (which can be a texture, canvas, or render target) and bind it to the renderer.
|
|
* Once bound all draw calls will be rendered to the render surface.
|
|
*
|
|
* If a frame is not provide and the render surface is a texture, the frame of the texture will be used.
|
|
* @param renderSurface - the render surface to bind
|
|
* @param clear - the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
|
|
* @param clearColor - the color to clear to
|
|
* @param frame - the frame to render to
|
|
* @returns the render target that was bound
|
|
*/
|
|
bind(renderSurface, clear = true, clearColor, frame) {
|
|
const renderTarget = this.getRenderTarget(renderSurface);
|
|
const didChange = this.renderTarget !== renderTarget;
|
|
this.renderTarget = renderTarget;
|
|
this.renderSurface = renderSurface;
|
|
const gpuRenderTarget = this.getGpuRenderTarget(renderTarget);
|
|
if (renderTarget.pixelWidth !== gpuRenderTarget.width || renderTarget.pixelHeight !== gpuRenderTarget.height) {
|
|
this.adaptor.resizeGpuRenderTarget(renderTarget);
|
|
gpuRenderTarget.width = renderTarget.pixelWidth;
|
|
gpuRenderTarget.height = renderTarget.pixelHeight;
|
|
}
|
|
const source = renderTarget.colorTexture;
|
|
const viewport = this.viewport;
|
|
const pixelWidth = source.pixelWidth;
|
|
const pixelHeight = source.pixelHeight;
|
|
if (!frame && renderSurface instanceof Texture) {
|
|
frame = renderSurface.frame;
|
|
}
|
|
if (frame) {
|
|
const resolution = source._resolution;
|
|
viewport.x = frame.x * resolution + 0.5 | 0;
|
|
viewport.y = frame.y * resolution + 0.5 | 0;
|
|
viewport.width = frame.width * resolution + 0.5 | 0;
|
|
viewport.height = frame.height * resolution + 0.5 | 0;
|
|
} else {
|
|
viewport.x = 0;
|
|
viewport.y = 0;
|
|
viewport.width = pixelWidth;
|
|
viewport.height = pixelHeight;
|
|
}
|
|
calculateProjection(
|
|
this.projectionMatrix,
|
|
0,
|
|
0,
|
|
viewport.width / source.resolution,
|
|
viewport.height / source.resolution,
|
|
!renderTarget.isRoot
|
|
);
|
|
this.adaptor.startRenderPass(renderTarget, clear, clearColor, viewport);
|
|
if (didChange) {
|
|
this.onRenderTargetChange.emit(renderTarget);
|
|
}
|
|
return renderTarget;
|
|
}
|
|
clear(target, clear = CLEAR.ALL, clearColor) {
|
|
if (!clear)
|
|
return;
|
|
if (target) {
|
|
target = this.getRenderTarget(target);
|
|
}
|
|
this.adaptor.clear(
|
|
target || this.renderTarget,
|
|
clear,
|
|
clearColor,
|
|
this.viewport
|
|
);
|
|
}
|
|
contextChange() {
|
|
this._gpuRenderTargetHash = /* @__PURE__ */ Object.create(null);
|
|
}
|
|
/**
|
|
* Push a render surface to the renderer. This will bind the render surface to the renderer,
|
|
* @param renderSurface - the render surface to push
|
|
* @param clear - the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
|
|
* @param clearColor - the color to clear to
|
|
* @param frame - the frame to use when rendering to the render surface
|
|
*/
|
|
push(renderSurface, clear = CLEAR.ALL, clearColor, frame) {
|
|
const renderTarget = this.bind(renderSurface, clear, clearColor, frame);
|
|
this._renderTargetStack.push({
|
|
renderTarget,
|
|
frame
|
|
});
|
|
return renderTarget;
|
|
}
|
|
/** Pops the current render target from the renderer and restores the previous render target. */
|
|
pop() {
|
|
this._renderTargetStack.pop();
|
|
const currentRenderTargetData = this._renderTargetStack[this._renderTargetStack.length - 1];
|
|
this.bind(currentRenderTargetData.renderTarget, false, null, currentRenderTargetData.frame);
|
|
}
|
|
/**
|
|
* Gets the render target from the provide render surface. Eg if its a texture,
|
|
* it will return the render target for the texture.
|
|
* If its a render target, it will return the same render target.
|
|
* @param renderSurface - the render surface to get the render target for
|
|
* @returns the render target for the render surface
|
|
*/
|
|
getRenderTarget(renderSurface) {
|
|
var _a;
|
|
if (renderSurface.isTexture) {
|
|
renderSurface = renderSurface.source;
|
|
}
|
|
return (_a = this._renderSurfaceToRenderTargetHash.get(renderSurface)) != null ? _a : this._initRenderTarget(renderSurface);
|
|
}
|
|
/**
|
|
* Copies a render surface to another texture
|
|
* @param sourceRenderSurfaceTexture - the render surface to copy from
|
|
* @param destinationTexture - the texture to copy to
|
|
* @param originSrc - the origin of the copy
|
|
* @param originSrc.x - the x origin of the copy
|
|
* @param originSrc.y - the y origin of the copy
|
|
* @param size - the size of the copy
|
|
* @param size.width - the width of the copy
|
|
* @param size.height - the height of the copy
|
|
* @param originDest - the destination origin (top left to paste from!)
|
|
* @param originDest.x - the x origin of the paste
|
|
* @param originDest.y - the y origin of the paste
|
|
*/
|
|
copyToTexture(sourceRenderSurfaceTexture, destinationTexture, originSrc, size, originDest) {
|
|
if (originSrc.x < 0) {
|
|
size.width += originSrc.x;
|
|
originDest.x -= originSrc.x;
|
|
originSrc.x = 0;
|
|
}
|
|
if (originSrc.y < 0) {
|
|
size.height += originSrc.y;
|
|
originDest.y -= originSrc.y;
|
|
originSrc.y = 0;
|
|
}
|
|
const { pixelWidth, pixelHeight } = sourceRenderSurfaceTexture;
|
|
size.width = Math.min(size.width, pixelWidth - originSrc.x);
|
|
size.height = Math.min(size.height, pixelHeight - originSrc.y);
|
|
return this.adaptor.copyToTexture(
|
|
sourceRenderSurfaceTexture,
|
|
destinationTexture,
|
|
originSrc,
|
|
size,
|
|
originDest
|
|
);
|
|
}
|
|
/**
|
|
* ensures that we have a depth stencil buffer available to render to
|
|
* This is used by the mask system to make sure we have a stencil buffer.
|
|
*/
|
|
ensureDepthStencil() {
|
|
if (!this.renderTarget.stencil) {
|
|
this.renderTarget.stencil = true;
|
|
this.adaptor.startRenderPass(this.renderTarget, false, null, this.viewport);
|
|
}
|
|
}
|
|
/** nukes the render target system */
|
|
destroy() {
|
|
this._renderer = null;
|
|
this._renderSurfaceToRenderTargetHash.forEach((renderTarget, key) => {
|
|
if (renderTarget !== key) {
|
|
renderTarget.destroy();
|
|
}
|
|
});
|
|
this._renderSurfaceToRenderTargetHash.clear();
|
|
this._gpuRenderTargetHash = /* @__PURE__ */ Object.create(null);
|
|
}
|
|
_initRenderTarget(renderSurface) {
|
|
let renderTarget = null;
|
|
if (CanvasSource.test(renderSurface)) {
|
|
renderSurface = getCanvasTexture(renderSurface).source;
|
|
}
|
|
if (renderSurface instanceof RenderTarget) {
|
|
renderTarget = renderSurface;
|
|
} else if (renderSurface instanceof TextureSource) {
|
|
renderTarget = new RenderTarget({
|
|
colorTextures: [renderSurface]
|
|
});
|
|
if (CanvasSource.test(renderSurface.source.resource)) {
|
|
renderTarget.isRoot = true;
|
|
}
|
|
renderSurface.once("destroy", () => {
|
|
renderTarget.destroy();
|
|
this._renderSurfaceToRenderTargetHash.delete(renderSurface);
|
|
const gpuRenderTarget = this._gpuRenderTargetHash[renderTarget.uid];
|
|
if (gpuRenderTarget) {
|
|
this._gpuRenderTargetHash[renderTarget.uid] = null;
|
|
this.adaptor.destroyGpuRenderTarget(gpuRenderTarget);
|
|
}
|
|
});
|
|
}
|
|
this._renderSurfaceToRenderTargetHash.set(renderSurface, renderTarget);
|
|
return renderTarget;
|
|
}
|
|
getGpuRenderTarget(renderTarget) {
|
|
return this._gpuRenderTargetHash[renderTarget.uid] || (this._gpuRenderTargetHash[renderTarget.uid] = this.adaptor.initGpuRenderTarget(renderTarget));
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class GlRenderTargetSystem extends RenderTargetSystem {
|
|
constructor(renderer) {
|
|
super(renderer);
|
|
this.adaptor = new GlRenderTargetAdaptor();
|
|
this.adaptor.init(renderer, this);
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlRenderTargetSystem.extension = {
|
|
type: [ExtensionType.WebGLSystem],
|
|
name: "renderTarget"
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
class BufferResource extends EventEmitter {
|
|
/**
|
|
* Create a new Buffer Resource.
|
|
* @param options - The options for the buffer resource
|
|
* @param options.buffer - The underlying buffer that this resource is using
|
|
* @param options.offset - The offset of the buffer this resource is using.
|
|
* If not provided, then it will use the offset of the buffer.
|
|
* @param options.size - The size of the buffer this resource is using.
|
|
* If not provided, then it will use the size of the buffer.
|
|
*/
|
|
constructor({ buffer, offset, size }) {
|
|
super();
|
|
/**
|
|
* emits when the underlying buffer has changed shape (i.e. resized)
|
|
* letting the renderer know that it needs to discard the old buffer on the GPU and create a new one
|
|
* @event change
|
|
*/
|
|
/** a unique id for this uniform group used through the renderer */
|
|
this.uid = uid$1("buffer");
|
|
/**
|
|
* a resource type, used to identify how to handle it when its in a bind group / shader resource
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._resourceType = "bufferResource";
|
|
/**
|
|
* used internally to know if a uniform group was used in the last render pass
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._touched = 0;
|
|
/**
|
|
* the resource id used internally by the renderer to build bind group keys
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._resourceId = uid$1("resource");
|
|
/**
|
|
* A cheeky hint to the GL renderer to let it know this is a BufferResource
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
this._bufferResource = true;
|
|
/**
|
|
* Has the Buffer resource been destroyed?
|
|
* @readonly
|
|
*/
|
|
this.destroyed = false;
|
|
this.buffer = buffer;
|
|
this.offset = offset | 0;
|
|
this.size = size;
|
|
this.buffer.on("change", this.onBufferChange, this);
|
|
}
|
|
onBufferChange() {
|
|
this._resourceId = uid$1("resource");
|
|
this.emit("change", this);
|
|
}
|
|
/**
|
|
* Destroys this resource. Make sure the underlying buffer is not used anywhere else
|
|
* if you want to destroy it as well, or code will explode
|
|
* @param destroyBuffer - Should the underlying buffer be destroyed as well?
|
|
*/
|
|
destroy(destroyBuffer = false) {
|
|
this.destroyed = true;
|
|
if (destroyBuffer) {
|
|
this.buffer.destroy();
|
|
}
|
|
this.emit("change", this);
|
|
this.buffer = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function generateShaderSyncCode(shader, shaderSystem) {
|
|
const funcFragments = [];
|
|
const headerFragments = [`
|
|
var g = s.groups;
|
|
var sS = r.shader;
|
|
var p = s.glProgram;
|
|
var ugS = r.uniformGroup;
|
|
var resources;
|
|
`];
|
|
let addedTextreSystem = false;
|
|
let blockIndex = 0;
|
|
let textureCount = 0;
|
|
const programData = shaderSystem._getProgramData(shader.glProgram);
|
|
for (const i in shader.groups) {
|
|
const group = shader.groups[i];
|
|
funcFragments.push(`
|
|
resources = g[${i}].resources;
|
|
`);
|
|
for (const j in group.resources) {
|
|
const resource = group.resources[j];
|
|
if (resource instanceof UniformGroup) {
|
|
if (resource.ubo) {
|
|
funcFragments.push(`
|
|
sS.bindUniformBlock(
|
|
resources[${j}],
|
|
sS._uniformBindMap[${i}[${j}],
|
|
${blockIndex++}
|
|
);
|
|
`);
|
|
} else {
|
|
funcFragments.push(`
|
|
ugS.updateUniformGroup(resources[${j}], p, sD);
|
|
`);
|
|
}
|
|
} else if (resource instanceof BufferResource) {
|
|
funcFragments.push(`
|
|
sS.bindUniformBlock(
|
|
resources[${j}],
|
|
sS._uniformBindMap[${i}[${j}],
|
|
${blockIndex++}
|
|
);
|
|
`);
|
|
} else if (resource instanceof TextureSource) {
|
|
const uniformName = shader._uniformBindMap[i][j];
|
|
const uniformData = programData.uniformData[uniformName];
|
|
if (uniformData) {
|
|
if (!addedTextreSystem) {
|
|
addedTextreSystem = true;
|
|
headerFragments.push(`
|
|
var tS = r.texture;
|
|
`);
|
|
}
|
|
shaderSystem._gl.uniform1i(uniformData.location, textureCount);
|
|
funcFragments.push(`
|
|
tS.bind(resources[${j}], ${textureCount});
|
|
`);
|
|
textureCount++;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
const functionSource = [...headerFragments, ...funcFragments].join("\n");
|
|
return new Function("r", "s", "sD", functionSource);
|
|
}
|
|
|
|
"use strict";
|
|
class IGLUniformData {
|
|
}
|
|
class GlProgramData {
|
|
/**
|
|
* Makes a new Pixi program.
|
|
* @param program - webgl program
|
|
* @param uniformData - uniforms
|
|
*/
|
|
constructor(program, uniformData) {
|
|
this.program = program;
|
|
this.uniformData = uniformData;
|
|
this.uniformGroups = {};
|
|
this.uniformDirtyGroups = {};
|
|
this.uniformBlockBindings = {};
|
|
}
|
|
/** Destroys this program. */
|
|
destroy() {
|
|
this.uniformData = null;
|
|
this.uniformGroups = null;
|
|
this.uniformDirtyGroups = null;
|
|
this.uniformBlockBindings = null;
|
|
this.program = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function compileShader(gl, type, src) {
|
|
const shader = gl.createShader(type);
|
|
gl.shaderSource(shader, src);
|
|
gl.compileShader(shader);
|
|
return shader;
|
|
}
|
|
|
|
"use strict";
|
|
function booleanArray(size) {
|
|
const array = new Array(size);
|
|
for (let i = 0; i < array.length; i++) {
|
|
array[i] = false;
|
|
}
|
|
return array;
|
|
}
|
|
function defaultValue(type, size) {
|
|
switch (type) {
|
|
case "float":
|
|
return 0;
|
|
case "vec2":
|
|
return new Float32Array(2 * size);
|
|
case "vec3":
|
|
return new Float32Array(3 * size);
|
|
case "vec4":
|
|
return new Float32Array(4 * size);
|
|
case "int":
|
|
case "uint":
|
|
case "sampler2D":
|
|
case "sampler2DArray":
|
|
return 0;
|
|
case "ivec2":
|
|
return new Int32Array(2 * size);
|
|
case "ivec3":
|
|
return new Int32Array(3 * size);
|
|
case "ivec4":
|
|
return new Int32Array(4 * size);
|
|
case "uvec2":
|
|
return new Uint32Array(2 * size);
|
|
case "uvec3":
|
|
return new Uint32Array(3 * size);
|
|
case "uvec4":
|
|
return new Uint32Array(4 * size);
|
|
case "bool":
|
|
return false;
|
|
case "bvec2":
|
|
return booleanArray(2 * size);
|
|
case "bvec3":
|
|
return booleanArray(3 * size);
|
|
case "bvec4":
|
|
return booleanArray(4 * size);
|
|
case "mat2":
|
|
return new Float32Array([
|
|
1,
|
|
0,
|
|
0,
|
|
1
|
|
]);
|
|
case "mat3":
|
|
return new Float32Array([
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
1
|
|
]);
|
|
case "mat4":
|
|
return new Float32Array([
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1
|
|
]);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
"use strict";
|
|
let GL_TABLE = null;
|
|
const GL_TO_GLSL_TYPES = {
|
|
FLOAT: "float",
|
|
FLOAT_VEC2: "vec2",
|
|
FLOAT_VEC3: "vec3",
|
|
FLOAT_VEC4: "vec4",
|
|
INT: "int",
|
|
INT_VEC2: "ivec2",
|
|
INT_VEC3: "ivec3",
|
|
INT_VEC4: "ivec4",
|
|
UNSIGNED_INT: "uint",
|
|
UNSIGNED_INT_VEC2: "uvec2",
|
|
UNSIGNED_INT_VEC3: "uvec3",
|
|
UNSIGNED_INT_VEC4: "uvec4",
|
|
BOOL: "bool",
|
|
BOOL_VEC2: "bvec2",
|
|
BOOL_VEC3: "bvec3",
|
|
BOOL_VEC4: "bvec4",
|
|
FLOAT_MAT2: "mat2",
|
|
FLOAT_MAT3: "mat3",
|
|
FLOAT_MAT4: "mat4",
|
|
SAMPLER_2D: "sampler2D",
|
|
INT_SAMPLER_2D: "sampler2D",
|
|
UNSIGNED_INT_SAMPLER_2D: "sampler2D",
|
|
SAMPLER_CUBE: "samplerCube",
|
|
INT_SAMPLER_CUBE: "samplerCube",
|
|
UNSIGNED_INT_SAMPLER_CUBE: "samplerCube",
|
|
SAMPLER_2D_ARRAY: "sampler2DArray",
|
|
INT_SAMPLER_2D_ARRAY: "sampler2DArray",
|
|
UNSIGNED_INT_SAMPLER_2D_ARRAY: "sampler2DArray"
|
|
};
|
|
const GLSL_TO_VERTEX_TYPES = {
|
|
float: "float32",
|
|
vec2: "float32x2",
|
|
vec3: "float32x3",
|
|
vec4: "float32x4",
|
|
int: "sint32",
|
|
ivec2: "sint32x2",
|
|
ivec3: "sint32x3",
|
|
ivec4: "sint32x4",
|
|
uint: "uint32",
|
|
uvec2: "uint32x2",
|
|
uvec3: "uint32x3",
|
|
uvec4: "uint32x4",
|
|
bool: "uint32",
|
|
bvec2: "uint32x2",
|
|
bvec3: "uint32x3",
|
|
bvec4: "uint32x4"
|
|
};
|
|
function mapType(gl, type) {
|
|
if (!GL_TABLE) {
|
|
const typeNames = Object.keys(GL_TO_GLSL_TYPES);
|
|
GL_TABLE = {};
|
|
for (let i = 0; i < typeNames.length; ++i) {
|
|
const tn = typeNames[i];
|
|
GL_TABLE[gl[tn]] = GL_TO_GLSL_TYPES[tn];
|
|
}
|
|
}
|
|
return GL_TABLE[type];
|
|
}
|
|
function mapGlToVertexFormat(gl, type) {
|
|
const typeValue = mapType(gl, type);
|
|
return GLSL_TO_VERTEX_TYPES[typeValue] || "float32";
|
|
}
|
|
|
|
"use strict";
|
|
function extractAttributesFromGlProgram(program, gl, sortAttributes = false) {
|
|
const attributes = {};
|
|
const totalAttributes = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
|
|
for (let i = 0; i < totalAttributes; i++) {
|
|
const attribData = gl.getActiveAttrib(program, i);
|
|
if (attribData.name.startsWith("gl_")) {
|
|
continue;
|
|
}
|
|
const format = mapGlToVertexFormat(gl, attribData.type);
|
|
attributes[attribData.name] = {
|
|
location: 0,
|
|
// set further down..
|
|
format,
|
|
stride: getAttributeInfoFromFormat(format).stride,
|
|
offset: 0,
|
|
instance: false,
|
|
start: 0
|
|
};
|
|
}
|
|
const keys = Object.keys(attributes);
|
|
if (sortAttributes) {
|
|
keys.sort((a, b) => a > b ? 1 : -1);
|
|
for (let i = 0; i < keys.length; i++) {
|
|
attributes[keys[i]].location = i;
|
|
gl.bindAttribLocation(program, i, keys[i]);
|
|
}
|
|
gl.linkProgram(program);
|
|
} else {
|
|
for (let i = 0; i < keys.length; i++) {
|
|
attributes[keys[i]].location = gl.getAttribLocation(program, keys[i]);
|
|
}
|
|
}
|
|
return attributes;
|
|
}
|
|
|
|
"use strict";
|
|
function getUboData(program, gl) {
|
|
if (!gl.ACTIVE_UNIFORM_BLOCKS)
|
|
return {};
|
|
const uniformBlocks = {};
|
|
const totalUniformsBlocks = gl.getProgramParameter(program, gl.ACTIVE_UNIFORM_BLOCKS);
|
|
for (let i = 0; i < totalUniformsBlocks; i++) {
|
|
const name = gl.getActiveUniformBlockName(program, i);
|
|
const uniformBlockIndex = gl.getUniformBlockIndex(program, name);
|
|
const size = gl.getActiveUniformBlockParameter(program, i, gl.UNIFORM_BLOCK_DATA_SIZE);
|
|
uniformBlocks[name] = {
|
|
name,
|
|
index: uniformBlockIndex,
|
|
size
|
|
};
|
|
}
|
|
return uniformBlocks;
|
|
}
|
|
|
|
"use strict";
|
|
function getUniformData(program, gl) {
|
|
const uniforms = {};
|
|
const totalUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
|
|
for (let i = 0; i < totalUniforms; i++) {
|
|
const uniformData = gl.getActiveUniform(program, i);
|
|
const name = uniformData.name.replace(/\[.*?\]$/, "");
|
|
const isArray = !!uniformData.name.match(/\[.*?\]$/);
|
|
const type = mapType(gl, uniformData.type);
|
|
uniforms[name] = {
|
|
name,
|
|
index: i,
|
|
type,
|
|
size: uniformData.size,
|
|
isArray,
|
|
value: defaultValue(type, uniformData.size)
|
|
};
|
|
}
|
|
return uniforms;
|
|
}
|
|
|
|
"use strict";
|
|
function logPrettyShaderError(gl, shader) {
|
|
const shaderSrc = gl.getShaderSource(shader).split("\n").map((line, index) => `${index}: ${line}`);
|
|
const shaderLog = gl.getShaderInfoLog(shader);
|
|
const splitShader = shaderLog.split("\n");
|
|
const dedupe = {};
|
|
const lineNumbers = splitShader.map((line) => parseFloat(line.replace(/^ERROR\: 0\:([\d]+)\:.*$/, "$1"))).filter((n) => {
|
|
if (n && !dedupe[n]) {
|
|
dedupe[n] = true;
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
const logArgs = [""];
|
|
lineNumbers.forEach((number) => {
|
|
shaderSrc[number - 1] = `%c${shaderSrc[number - 1]}%c`;
|
|
logArgs.push("background: #FF0000; color:#FFFFFF; font-size: 10px", "font-size: 10px");
|
|
});
|
|
const fragmentSourceToLog = shaderSrc.join("\n");
|
|
logArgs[0] = fragmentSourceToLog;
|
|
console.error(shaderLog);
|
|
console.groupCollapsed("click to view full shader code");
|
|
console.warn(...logArgs);
|
|
console.groupEnd();
|
|
}
|
|
function logProgramError(gl, program, vertexShader, fragmentShader) {
|
|
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
|
|
logPrettyShaderError(gl, vertexShader);
|
|
}
|
|
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
|
|
logPrettyShaderError(gl, fragmentShader);
|
|
}
|
|
console.error("PixiJS Error: Could not initialize shader.");
|
|
if (gl.getProgramInfoLog(program) !== "") {
|
|
console.warn("PixiJS Warning: gl.getProgramInfoLog()", gl.getProgramInfoLog(program));
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function generateProgram(gl, program) {
|
|
const glVertShader = compileShader(gl, gl.VERTEX_SHADER, program.vertex);
|
|
const glFragShader = compileShader(gl, gl.FRAGMENT_SHADER, program.fragment);
|
|
const webGLProgram = gl.createProgram();
|
|
gl.attachShader(webGLProgram, glVertShader);
|
|
gl.attachShader(webGLProgram, glFragShader);
|
|
const transformFeedbackVaryings = program.transformFeedbackVaryings;
|
|
if (transformFeedbackVaryings) {
|
|
if (typeof gl.transformFeedbackVaryings !== "function") {
|
|
warn(`TransformFeedback is not supported but TransformFeedbackVaryings are given.`);
|
|
} else {
|
|
gl.transformFeedbackVaryings(
|
|
webGLProgram,
|
|
transformFeedbackVaryings.names,
|
|
transformFeedbackVaryings.bufferMode === "separate" ? gl.SEPARATE_ATTRIBS : gl.INTERLEAVED_ATTRIBS
|
|
);
|
|
}
|
|
}
|
|
gl.linkProgram(webGLProgram);
|
|
if (!gl.getProgramParameter(webGLProgram, gl.LINK_STATUS)) {
|
|
logProgramError(gl, webGLProgram, glVertShader, glFragShader);
|
|
}
|
|
program._attributeData = extractAttributesFromGlProgram(
|
|
webGLProgram,
|
|
gl,
|
|
!/^[ \t]*#[ \t]*version[ \t]+300[ \t]+es[ \t]*$/m.test(program.vertex)
|
|
);
|
|
program._uniformData = getUniformData(webGLProgram, gl);
|
|
program._uniformBlockData = getUboData(webGLProgram, gl);
|
|
gl.deleteShader(glVertShader);
|
|
gl.deleteShader(glFragShader);
|
|
const uniformData = {};
|
|
for (const i in program._uniformData) {
|
|
const data = program._uniformData[i];
|
|
uniformData[i] = {
|
|
location: gl.getUniformLocation(webGLProgram, i),
|
|
value: defaultValue(data.type, data.size)
|
|
};
|
|
}
|
|
const glProgram = new GlProgramData(webGLProgram, uniformData);
|
|
return glProgram;
|
|
}
|
|
|
|
"use strict";
|
|
const defaultSyncData = {
|
|
textureCount: 0,
|
|
blockIndex: 0
|
|
};
|
|
class GlShaderSystem {
|
|
constructor(renderer) {
|
|
/**
|
|
* @internal
|
|
* @private
|
|
*/
|
|
this._activeProgram = null;
|
|
this._programDataHash = /* @__PURE__ */ Object.create(null);
|
|
this._nextIndex = 0;
|
|
this._boundUniformsIdsToIndexHash = /* @__PURE__ */ Object.create(null);
|
|
this._boundIndexToUniformsHash = /* @__PURE__ */ Object.create(null);
|
|
this._shaderSyncFunctions = /* @__PURE__ */ Object.create(null);
|
|
this._renderer = renderer;
|
|
}
|
|
contextChange(gl) {
|
|
this._gl = gl;
|
|
this._maxBindings = gl.MAX_UNIFORM_BUFFER_BINDINGS ? gl.getParameter(gl.MAX_UNIFORM_BUFFER_BINDINGS) : 0;
|
|
this._programDataHash = /* @__PURE__ */ Object.create(null);
|
|
this._boundUniformsIdsToIndexHash = /* @__PURE__ */ Object.create(null);
|
|
this._boundIndexToUniformsHash = /* @__PURE__ */ Object.create(null);
|
|
this._shaderSyncFunctions = /* @__PURE__ */ Object.create(null);
|
|
this._activeProgram = null;
|
|
this.maxTextures = getMaxTexturesPerBatch();
|
|
}
|
|
/**
|
|
* Changes the current shader to the one given in parameter.
|
|
* @param shader - the new shader
|
|
* @param skipSync - false if the shader should automatically sync its uniforms.
|
|
* @returns the glProgram that belongs to the shader.
|
|
*/
|
|
bind(shader, skipSync) {
|
|
this._setProgram(shader.glProgram);
|
|
if (skipSync)
|
|
return;
|
|
defaultSyncData.textureCount = 0;
|
|
defaultSyncData.blockIndex = 0;
|
|
let syncFunction = this._shaderSyncFunctions[shader.glProgram._key];
|
|
if (!syncFunction) {
|
|
syncFunction = this._shaderSyncFunctions[shader.glProgram._key] = this._generateShaderSync(shader, this);
|
|
}
|
|
syncFunction(this._renderer, shader, defaultSyncData);
|
|
}
|
|
/**
|
|
* Updates the uniform group.
|
|
* @param uniformGroup - the uniform group to update
|
|
*/
|
|
updateUniformGroup(uniformGroup) {
|
|
this._renderer.uniformGroup.updateUniformGroup(uniformGroup, this._activeProgram, defaultSyncData);
|
|
}
|
|
/**
|
|
* Binds a uniform block to the shader.
|
|
* @param uniformGroup - the uniform group to bind
|
|
* @param name - the name of the uniform block
|
|
* @param index - the index of the uniform block
|
|
*/
|
|
bindUniformBlock(uniformGroup, name, index = 0) {
|
|
const bufferSystem = this._renderer.buffer;
|
|
const programData = this._getProgramData(this._activeProgram);
|
|
const isBufferResource = uniformGroup._bufferResource;
|
|
if (isBufferResource) {
|
|
this._renderer.ubo.updateUniformGroup(uniformGroup);
|
|
}
|
|
bufferSystem.updateBuffer(uniformGroup.buffer);
|
|
let boundIndex = this._boundUniformsIdsToIndexHash[uniformGroup.uid];
|
|
if (boundIndex === void 0) {
|
|
const nextIndex = this._nextIndex++ % this._maxBindings;
|
|
const currentBoundUniformGroup = this._boundIndexToUniformsHash[nextIndex];
|
|
if (currentBoundUniformGroup) {
|
|
this._boundUniformsIdsToIndexHash[currentBoundUniformGroup.uid] = void 0;
|
|
}
|
|
boundIndex = this._boundUniformsIdsToIndexHash[uniformGroup.uid] = nextIndex;
|
|
this._boundIndexToUniformsHash[nextIndex] = uniformGroup;
|
|
if (isBufferResource) {
|
|
bufferSystem.bindBufferRange(uniformGroup.buffer, nextIndex, uniformGroup.offset);
|
|
} else {
|
|
bufferSystem.bindBufferBase(uniformGroup.buffer, nextIndex);
|
|
}
|
|
}
|
|
const gl = this._gl;
|
|
const uniformBlockIndex = this._activeProgram._uniformBlockData[name].index;
|
|
if (programData.uniformBlockBindings[index] === boundIndex)
|
|
return;
|
|
programData.uniformBlockBindings[index] = boundIndex;
|
|
gl.uniformBlockBinding(programData.program, uniformBlockIndex, boundIndex);
|
|
}
|
|
_setProgram(program) {
|
|
if (this._activeProgram === program)
|
|
return;
|
|
this._activeProgram = program;
|
|
const programData = this._getProgramData(program);
|
|
this._gl.useProgram(programData.program);
|
|
}
|
|
/**
|
|
* @param program - the program to get the data for
|
|
* @internal
|
|
* @private
|
|
*/
|
|
_getProgramData(program) {
|
|
return this._programDataHash[program._key] || this._createProgramData(program);
|
|
}
|
|
_createProgramData(program) {
|
|
const key = program._key;
|
|
this._programDataHash[key] = generateProgram(this._gl, program);
|
|
return this._programDataHash[key];
|
|
}
|
|
destroy() {
|
|
for (const key of Object.keys(this._programDataHash)) {
|
|
const programData = this._programDataHash[key];
|
|
programData.destroy();
|
|
this._programDataHash[key] = null;
|
|
}
|
|
this._programDataHash = null;
|
|
this._boundUniformsIdsToIndexHash = null;
|
|
}
|
|
/**
|
|
* Creates a function that can be executed that will sync the shader as efficiently as possible.
|
|
* Overridden by the unsafe eval package if you don't want eval used in your project.
|
|
* @param shader - the shader to generate the sync function for
|
|
* @param shaderSystem - the shader system to use
|
|
* @returns - the generated sync function
|
|
* @ignore
|
|
*/
|
|
_generateShaderSync(shader, shaderSystem) {
|
|
return generateShaderSyncCode(shader, shaderSystem);
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlShaderSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "shader"
|
|
};
|
|
|
|
"use strict";
|
|
const UNIFORM_TO_SINGLE_SETTERS = {
|
|
f32: `if (cv !== v) {
|
|
cu.value = v;
|
|
gl.uniform1f(location, v);
|
|
}`,
|
|
"vec2<f32>": `if (cv[0] !== v[0] || cv[1] !== v[1]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
gl.uniform2f(location, v[0], v[1]);
|
|
}`,
|
|
"vec3<f32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
cv[2] = v[2];
|
|
gl.uniform3f(location, v[0], v[1], v[2]);
|
|
}`,
|
|
"vec4<f32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2] || cv[3] !== v[3]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
cv[2] = v[2];
|
|
cv[3] = v[3];
|
|
gl.uniform4f(location, v[0], v[1], v[2], v[3]);
|
|
}`,
|
|
i32: `if (cv !== v) {
|
|
cu.value = v;
|
|
gl.uniform1i(location, v);
|
|
}`,
|
|
"vec2<i32>": `if (cv[0] !== v[0] || cv[1] !== v[1]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
gl.uniform2i(location, v[0], v[1]);
|
|
}`,
|
|
"vec3<i32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
cv[2] = v[2];
|
|
gl.uniform3i(location, v[0], v[1], v[2]);
|
|
}`,
|
|
"vec4<i32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2] || cv[3] !== v[3]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
cv[2] = v[2];
|
|
cv[3] = v[3];
|
|
gl.uniform4i(location, v[0], v[1], v[2], v[3]);
|
|
}`,
|
|
u32: `if (cv !== v) {
|
|
cu.value = v;
|
|
gl.uniform1ui(location, v);
|
|
}`,
|
|
"vec2<u32>": `if (cv[0] !== v[0] || cv[1] !== v[1]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
gl.uniform2ui(location, v[0], v[1]);
|
|
}`,
|
|
"vec3<u32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
cv[2] = v[2];
|
|
gl.uniform3ui(location, v[0], v[1], v[2]);
|
|
}`,
|
|
"vec4<u32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2] || cv[3] !== v[3]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
cv[2] = v[2];
|
|
cv[3] = v[3];
|
|
gl.uniform4ui(location, v[0], v[1], v[2], v[3]);
|
|
}`,
|
|
bool: `if (cv !== v) {
|
|
cu.value = v;
|
|
gl.uniform1i(location, v);
|
|
}`,
|
|
"vec2<bool>": `if (cv[0] !== v[0] || cv[1] !== v[1]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
gl.uniform2i(location, v[0], v[1]);
|
|
}`,
|
|
"vec3<bool>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
cv[2] = v[2];
|
|
gl.uniform3i(location, v[0], v[1], v[2]);
|
|
}`,
|
|
"vec4<bool>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2] || cv[3] !== v[3]) {
|
|
cv[0] = v[0];
|
|
cv[1] = v[1];
|
|
cv[2] = v[2];
|
|
cv[3] = v[3];
|
|
gl.uniform4i(location, v[0], v[1], v[2], v[3]);
|
|
}`,
|
|
"mat2x2<f32>": `gl.uniformMatrix2fv(location, false, v);`,
|
|
"mat3x3<f32>": `gl.uniformMatrix3fv(location, false, v);`,
|
|
"mat4x4<f32>": `gl.uniformMatrix4fv(location, false, v);`
|
|
};
|
|
const UNIFORM_TO_ARRAY_SETTERS = {
|
|
f32: `gl.uniform1fv(location, v);`,
|
|
"vec2<f32>": `gl.uniform2fv(location, v);`,
|
|
"vec3<f32>": `gl.uniform3fv(location, v);`,
|
|
"vec4<f32>": `gl.uniform4fv(location, v);`,
|
|
"mat2x2<f32>": `gl.uniformMatrix2fv(location, false, v);`,
|
|
"mat3x3<f32>": `gl.uniformMatrix3fv(location, false, v);`,
|
|
"mat4x4<f32>": `gl.uniformMatrix4fv(location, false, v);`,
|
|
i32: `gl.uniform1iv(location, v);`,
|
|
"vec2<i32>": `gl.uniform2iv(location, v);`,
|
|
"vec3<i32>": `gl.uniform3iv(location, v);`,
|
|
"vec4<i32>": `gl.uniform4iv(location, v);`,
|
|
u32: `gl.uniform1iv(location, v);`,
|
|
"vec2<u32>": `gl.uniform2iv(location, v);`,
|
|
"vec3<u32>": `gl.uniform3iv(location, v);`,
|
|
"vec4<u32>": `gl.uniform4iv(location, v);`,
|
|
bool: `gl.uniform1iv(location, v);`,
|
|
"vec2<bool>": `gl.uniform2iv(location, v);`,
|
|
"vec3<bool>": `gl.uniform3iv(location, v);`,
|
|
"vec4<bool>": `gl.uniform4iv(location, v);`
|
|
};
|
|
|
|
"use strict";
|
|
function generateUniformsSync(group, uniformData) {
|
|
const funcFragments = [`
|
|
var v = null;
|
|
var cv = null;
|
|
var cu = null;
|
|
var t = 0;
|
|
var gl = renderer.gl;
|
|
var name = null;
|
|
`];
|
|
for (const i in group.uniforms) {
|
|
if (!uniformData[i]) {
|
|
if (group.uniforms[i] instanceof UniformGroup) {
|
|
if (group.uniforms[i].ubo) {
|
|
funcFragments.push(`
|
|
renderer.shader.bindUniformBlock(uv.${i}, "${i}");
|
|
`);
|
|
} else {
|
|
funcFragments.push(`
|
|
renderer.shader.updateUniformGroup(uv.${i});
|
|
`);
|
|
}
|
|
} else if (group.uniforms[i] instanceof BufferResource) {
|
|
funcFragments.push(`
|
|
renderer.shader.bindBufferResource(uv.${i}, "${i}");
|
|
`);
|
|
}
|
|
continue;
|
|
}
|
|
const uniform = group.uniformStructures[i];
|
|
let parsed = false;
|
|
for (let j = 0; j < uniformParsers.length; j++) {
|
|
const parser = uniformParsers[j];
|
|
if (uniform.type === parser.type && parser.test(uniform)) {
|
|
funcFragments.push(`name = "${i}";`, uniformParsers[j].uniform);
|
|
parsed = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!parsed) {
|
|
const templateType = uniform.size === 1 ? UNIFORM_TO_SINGLE_SETTERS : UNIFORM_TO_ARRAY_SETTERS;
|
|
const template = templateType[uniform.type].replace("location", `ud["${i}"].location`);
|
|
funcFragments.push(`
|
|
cu = ud["${i}"];
|
|
cv = cu.value;
|
|
v = uv["${i}"];
|
|
${template};`);
|
|
}
|
|
}
|
|
return new Function("ud", "uv", "renderer", "syncData", funcFragments.join("\n"));
|
|
}
|
|
|
|
"use strict";
|
|
class GlUniformGroupSystem {
|
|
/** @param renderer - The renderer this System works for. */
|
|
constructor(renderer) {
|
|
/** Cache to holds the generated functions. Stored against UniformObjects unique signature. */
|
|
this._cache = {};
|
|
this._uniformGroupSyncHash = {};
|
|
this._renderer = renderer;
|
|
this.gl = null;
|
|
this._cache = {};
|
|
}
|
|
contextChange(gl) {
|
|
this.gl = gl;
|
|
}
|
|
/**
|
|
* Uploads the uniforms values to the currently bound shader.
|
|
* @param group - the uniforms values that be applied to the current shader
|
|
* @param program
|
|
* @param syncData
|
|
* @param syncData.textureCount
|
|
*/
|
|
updateUniformGroup(group, program, syncData) {
|
|
const programData = this._renderer.shader._getProgramData(program);
|
|
if (!group.isStatic || group._dirtyId !== programData.uniformDirtyGroups[group.uid]) {
|
|
programData.uniformDirtyGroups[group.uid] = group._dirtyId;
|
|
const syncFunc = this._getUniformSyncFunction(group, program);
|
|
syncFunc(programData.uniformData, group.uniforms, this._renderer, syncData);
|
|
}
|
|
}
|
|
/**
|
|
* Overridable by the pixi.js/unsafe-eval package to use static syncUniforms instead.
|
|
* @param group
|
|
* @param program
|
|
*/
|
|
_getUniformSyncFunction(group, program) {
|
|
var _a;
|
|
return ((_a = this._uniformGroupSyncHash[group._signature]) == null ? void 0 : _a[program._key]) || this._createUniformSyncFunction(group, program);
|
|
}
|
|
_createUniformSyncFunction(group, program) {
|
|
const uniformGroupSyncHash = this._uniformGroupSyncHash[group._signature] || (this._uniformGroupSyncHash[group._signature] = {});
|
|
const id = this._getSignature(group, program._uniformData, "u");
|
|
if (!this._cache[id]) {
|
|
this._cache[id] = this._generateUniformsSync(group, program._uniformData);
|
|
}
|
|
uniformGroupSyncHash[program._key] = this._cache[id];
|
|
return uniformGroupSyncHash[program._key];
|
|
}
|
|
_generateUniformsSync(group, uniformData) {
|
|
return generateUniformsSync(group, uniformData);
|
|
}
|
|
/**
|
|
* Takes a uniform group and data and generates a unique signature for them.
|
|
* @param group - The uniform group to get signature of
|
|
* @param group.uniforms
|
|
* @param uniformData - Uniform information generated by the shader
|
|
* @param preFix
|
|
* @returns Unique signature of the uniform group
|
|
*/
|
|
_getSignature(group, uniformData, preFix) {
|
|
const uniforms = group.uniforms;
|
|
const strings = [`${preFix}-`];
|
|
for (const i in uniforms) {
|
|
strings.push(i);
|
|
if (uniformData[i]) {
|
|
strings.push(uniformData[i].type);
|
|
}
|
|
}
|
|
return strings.join("-");
|
|
}
|
|
/** Destroys this System and removes all its textures. */
|
|
destroy() {
|
|
this._renderer = null;
|
|
this._cache = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlUniformGroupSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "uniformGroup"
|
|
};
|
|
|
|
"use strict";
|
|
function migrateFragmentFromV7toV8(fragmentShader) {
|
|
fragmentShader = fragmentShader.replaceAll("texture2D", "texture").replaceAll("gl_FragColor", "finalColor").replaceAll("varying", "in");
|
|
fragmentShader = `
|
|
out vec4 finalColor;
|
|
${fragmentShader}
|
|
`;
|
|
return fragmentShader;
|
|
}
|
|
|
|
"use strict";
|
|
const GLSL_TO_SIZE = {
|
|
float: 1,
|
|
vec2: 2,
|
|
vec3: 3,
|
|
vec4: 4,
|
|
int: 1,
|
|
ivec2: 2,
|
|
ivec3: 3,
|
|
ivec4: 4,
|
|
uint: 1,
|
|
uvec2: 2,
|
|
uvec3: 3,
|
|
uvec4: 4,
|
|
bool: 1,
|
|
bvec2: 2,
|
|
bvec3: 3,
|
|
bvec4: 4,
|
|
mat2: 4,
|
|
mat3: 9,
|
|
mat4: 16,
|
|
sampler2D: 1
|
|
};
|
|
function mapSize(type) {
|
|
return GLSL_TO_SIZE[type];
|
|
}
|
|
|
|
"use strict";
|
|
function mapWebGLBlendModesToPixi(gl) {
|
|
const blendMap = {};
|
|
blendMap.normal = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
|
|
blendMap.add = [gl.ONE, gl.ONE];
|
|
blendMap.multiply = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
|
|
blendMap.screen = [gl.ONE, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
|
|
blendMap.none = [0, 0];
|
|
blendMap["normal-npm"] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
|
|
blendMap["add-npm"] = [gl.SRC_ALPHA, gl.ONE, gl.ONE, gl.ONE];
|
|
blendMap["screen-npm"] = [gl.SRC_ALPHA, gl.ONE_MINUS_SRC_COLOR, gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
|
|
blendMap.erase = [gl.ZERO, gl.ONE_MINUS_SRC_ALPHA];
|
|
const isWebGl2 = !(gl instanceof DOMAdapter.get().getWebGLRenderingContext());
|
|
if (isWebGl2) {
|
|
blendMap.min = [gl.ONE, gl.ONE, gl.ONE, gl.ONE, gl.MIN, gl.MIN];
|
|
blendMap.max = [gl.ONE, gl.ONE, gl.ONE, gl.ONE, gl.MAX, gl.MAX];
|
|
} else {
|
|
const ext = gl.getExtension("EXT_blend_minmax");
|
|
if (ext) {
|
|
blendMap.min = [gl.ONE, gl.ONE, gl.ONE, gl.ONE, ext.MIN_EXT, ext.MIN_EXT];
|
|
blendMap.max = [gl.ONE, gl.ONE, gl.ONE, gl.ONE, ext.MAX_EXT, ext.MAX_EXT];
|
|
}
|
|
}
|
|
return blendMap;
|
|
}
|
|
|
|
"use strict";
|
|
const BLEND = 0;
|
|
const OFFSET = 1;
|
|
const CULLING = 2;
|
|
const DEPTH_TEST = 3;
|
|
const WINDING = 4;
|
|
const DEPTH_MASK = 5;
|
|
const _GlStateSystem = class _GlStateSystem {
|
|
constructor() {
|
|
this.gl = null;
|
|
this.stateId = 0;
|
|
this.polygonOffset = 0;
|
|
this.blendMode = "none";
|
|
this._blendEq = false;
|
|
this.map = [];
|
|
this.map[BLEND] = this.setBlend;
|
|
this.map[OFFSET] = this.setOffset;
|
|
this.map[CULLING] = this.setCullFace;
|
|
this.map[DEPTH_TEST] = this.setDepthTest;
|
|
this.map[WINDING] = this.setFrontFace;
|
|
this.map[DEPTH_MASK] = this.setDepthMask;
|
|
this.checks = [];
|
|
this.defaultState = State.for2d();
|
|
}
|
|
contextChange(gl) {
|
|
this.gl = gl;
|
|
this.blendModesMap = mapWebGLBlendModesToPixi(gl);
|
|
this.reset();
|
|
}
|
|
/**
|
|
* Sets the current state
|
|
* @param {*} state - The state to set.
|
|
*/
|
|
set(state) {
|
|
state = state || this.defaultState;
|
|
if (this.stateId !== state.data) {
|
|
let diff = this.stateId ^ state.data;
|
|
let i = 0;
|
|
while (diff) {
|
|
if (diff & 1) {
|
|
this.map[i].call(this, !!(state.data & 1 << i));
|
|
}
|
|
diff = diff >> 1;
|
|
i++;
|
|
}
|
|
this.stateId = state.data;
|
|
}
|
|
for (let i = 0; i < this.checks.length; i++) {
|
|
this.checks[i](this, state);
|
|
}
|
|
}
|
|
/**
|
|
* Sets the state, when previous state is unknown.
|
|
* @param {*} state - The state to set
|
|
*/
|
|
forceState(state) {
|
|
state = state || this.defaultState;
|
|
for (let i = 0; i < this.map.length; i++) {
|
|
this.map[i].call(this, !!(state.data & 1 << i));
|
|
}
|
|
for (let i = 0; i < this.checks.length; i++) {
|
|
this.checks[i](this, state);
|
|
}
|
|
this.stateId = state.data;
|
|
}
|
|
/**
|
|
* Sets whether to enable or disable blending.
|
|
* @param value - Turn on or off WebGl blending.
|
|
*/
|
|
setBlend(value) {
|
|
this._updateCheck(_GlStateSystem._checkBlendMode, value);
|
|
this.gl[value ? "enable" : "disable"](this.gl.BLEND);
|
|
}
|
|
/**
|
|
* Sets whether to enable or disable polygon offset fill.
|
|
* @param value - Turn on or off webgl polygon offset testing.
|
|
*/
|
|
setOffset(value) {
|
|
this._updateCheck(_GlStateSystem._checkPolygonOffset, value);
|
|
this.gl[value ? "enable" : "disable"](this.gl.POLYGON_OFFSET_FILL);
|
|
}
|
|
/**
|
|
* Sets whether to enable or disable depth test.
|
|
* @param value - Turn on or off webgl depth testing.
|
|
*/
|
|
setDepthTest(value) {
|
|
this.gl[value ? "enable" : "disable"](this.gl.DEPTH_TEST);
|
|
}
|
|
/**
|
|
* Sets whether to enable or disable depth mask.
|
|
* @param value - Turn on or off webgl depth mask.
|
|
*/
|
|
setDepthMask(value) {
|
|
this.gl.depthMask(value);
|
|
}
|
|
/**
|
|
* Sets whether to enable or disable cull face.
|
|
* @param {boolean} value - Turn on or off webgl cull face.
|
|
*/
|
|
setCullFace(value) {
|
|
this.gl[value ? "enable" : "disable"](this.gl.CULL_FACE);
|
|
}
|
|
/**
|
|
* Sets the gl front face.
|
|
* @param {boolean} value - true is clockwise and false is counter-clockwise
|
|
*/
|
|
setFrontFace(value) {
|
|
this.gl.frontFace(this.gl[value ? "CW" : "CCW"]);
|
|
}
|
|
/**
|
|
* Sets the blend mode.
|
|
* @param {number} value - The blend mode to set to.
|
|
*/
|
|
setBlendMode(value) {
|
|
if (!this.blendModesMap[value]) {
|
|
value = "normal";
|
|
}
|
|
if (value === this.blendMode) {
|
|
return;
|
|
}
|
|
this.blendMode = value;
|
|
const mode = this.blendModesMap[value];
|
|
const gl = this.gl;
|
|
if (mode.length === 2) {
|
|
gl.blendFunc(mode[0], mode[1]);
|
|
} else {
|
|
gl.blendFuncSeparate(mode[0], mode[1], mode[2], mode[3]);
|
|
}
|
|
if (mode.length === 6) {
|
|
this._blendEq = true;
|
|
gl.blendEquationSeparate(mode[4], mode[5]);
|
|
} else if (this._blendEq) {
|
|
this._blendEq = false;
|
|
gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
|
|
}
|
|
}
|
|
/**
|
|
* Sets the polygon offset.
|
|
* @param {number} value - the polygon offset
|
|
* @param {number} scale - the polygon offset scale
|
|
*/
|
|
setPolygonOffset(value, scale) {
|
|
this.gl.polygonOffset(value, scale);
|
|
}
|
|
// used
|
|
/** Resets all the logic and disables the VAOs. */
|
|
reset() {
|
|
this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false);
|
|
this.forceState(this.defaultState);
|
|
this._blendEq = true;
|
|
this.blendMode = "";
|
|
this.setBlendMode("normal");
|
|
}
|
|
/**
|
|
* Checks to see which updates should be checked based on which settings have been activated.
|
|
*
|
|
* For example, if blend is enabled then we should check the blend modes each time the state is changed
|
|
* or if polygon fill is activated then we need to check if the polygon offset changes.
|
|
* The idea is that we only check what we have too.
|
|
* @param func - the checking function to add or remove
|
|
* @param value - should the check function be added or removed.
|
|
*/
|
|
_updateCheck(func, value) {
|
|
const index = this.checks.indexOf(func);
|
|
if (value && index === -1) {
|
|
this.checks.push(func);
|
|
} else if (!value && index !== -1) {
|
|
this.checks.splice(index, 1);
|
|
}
|
|
}
|
|
/**
|
|
* A private little wrapper function that we call to check the blend mode.
|
|
* @param system - the System to perform the state check on
|
|
* @param state - the state that the blendMode will pulled from
|
|
*/
|
|
static _checkBlendMode(system, state) {
|
|
system.setBlendMode(state.blendMode);
|
|
}
|
|
/**
|
|
* A private little wrapper function that we call to check the polygon offset.
|
|
* @param system - the System to perform the state check on
|
|
* @param state - the state that the blendMode will pulled from
|
|
*/
|
|
static _checkPolygonOffset(system, state) {
|
|
system.setPolygonOffset(1, state.polygonOffset);
|
|
}
|
|
/**
|
|
* @ignore
|
|
*/
|
|
destroy() {
|
|
this.gl = null;
|
|
this.checks.length = 0;
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_GlStateSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "state"
|
|
};
|
|
let GlStateSystem = _GlStateSystem;
|
|
|
|
"use strict";
|
|
class GlTexture {
|
|
constructor(texture) {
|
|
this.target = GL_TARGETS.TEXTURE_2D;
|
|
this.texture = texture;
|
|
this.width = -1;
|
|
this.height = -1;
|
|
this.type = GL_TYPES.UNSIGNED_BYTE;
|
|
this.internalFormat = GL_FORMATS.RGBA;
|
|
this.format = GL_FORMATS.RGBA;
|
|
this.samplerType = 0;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const glUploadBufferImageResource = {
|
|
id: "buffer",
|
|
upload(source, glTexture, gl) {
|
|
if (glTexture.width === source.width || glTexture.height === source.height) {
|
|
gl.texSubImage2D(
|
|
gl.TEXTURE_2D,
|
|
0,
|
|
0,
|
|
0,
|
|
source.width,
|
|
source.height,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
source.resource
|
|
);
|
|
} else {
|
|
gl.texImage2D(
|
|
glTexture.target,
|
|
0,
|
|
glTexture.internalFormat,
|
|
source.width,
|
|
source.height,
|
|
0,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
source.resource
|
|
);
|
|
}
|
|
glTexture.width = source.width;
|
|
glTexture.height = source.height;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const compressedFormatMap = {
|
|
"bc1-rgba-unorm": true,
|
|
"bc1-rgba-unorm-srgb": true,
|
|
"bc2-rgba-unorm": true,
|
|
"bc2-rgba-unorm-srgb": true,
|
|
"bc3-rgba-unorm": true,
|
|
"bc3-rgba-unorm-srgb": true,
|
|
"bc4-r-unorm": true,
|
|
"bc4-r-snorm": true,
|
|
"bc5-rg-unorm": true,
|
|
"bc5-rg-snorm": true,
|
|
"bc6h-rgb-ufloat": true,
|
|
"bc6h-rgb-float": true,
|
|
"bc7-rgba-unorm": true,
|
|
"bc7-rgba-unorm-srgb": true,
|
|
// ETC2 compressed formats usable if "texture-compression-etc2" is both
|
|
// supported by the device/user agent and enabled in requestDevice.
|
|
"etc2-rgb8unorm": true,
|
|
"etc2-rgb8unorm-srgb": true,
|
|
"etc2-rgb8a1unorm": true,
|
|
"etc2-rgb8a1unorm-srgb": true,
|
|
"etc2-rgba8unorm": true,
|
|
"etc2-rgba8unorm-srgb": true,
|
|
"eac-r11unorm": true,
|
|
"eac-r11snorm": true,
|
|
"eac-rg11unorm": true,
|
|
"eac-rg11snorm": true,
|
|
// ASTC compressed formats usable if "texture-compression-astc" is both
|
|
// supported by the device/user agent and enabled in requestDevice.
|
|
"astc-4x4-unorm": true,
|
|
"astc-4x4-unorm-srgb": true,
|
|
"astc-5x4-unorm": true,
|
|
"astc-5x4-unorm-srgb": true,
|
|
"astc-5x5-unorm": true,
|
|
"astc-5x5-unorm-srgb": true,
|
|
"astc-6x5-unorm": true,
|
|
"astc-6x5-unorm-srgb": true,
|
|
"astc-6x6-unorm": true,
|
|
"astc-6x6-unorm-srgb": true,
|
|
"astc-8x5-unorm": true,
|
|
"astc-8x5-unorm-srgb": true,
|
|
"astc-8x6-unorm": true,
|
|
"astc-8x6-unorm-srgb": true,
|
|
"astc-8x8-unorm": true,
|
|
"astc-8x8-unorm-srgb": true,
|
|
"astc-10x5-unorm": true,
|
|
"astc-10x5-unorm-srgb": true,
|
|
"astc-10x6-unorm": true,
|
|
"astc-10x6-unorm-srgb": true,
|
|
"astc-10x8-unorm": true,
|
|
"astc-10x8-unorm-srgb": true,
|
|
"astc-10x10-unorm": true,
|
|
"astc-10x10-unorm-srgb": true,
|
|
"astc-12x10-unorm": true,
|
|
"astc-12x10-unorm-srgb": true,
|
|
"astc-12x12-unorm": true,
|
|
"astc-12x12-unorm-srgb": true
|
|
};
|
|
const glUploadCompressedTextureResource = {
|
|
id: "compressed",
|
|
upload(source, glTexture, gl) {
|
|
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
|
|
let mipWidth = source.pixelWidth;
|
|
let mipHeight = source.pixelHeight;
|
|
const compressed = !!compressedFormatMap[source.format];
|
|
for (let i = 0; i < source.resource.length; i++) {
|
|
const levelBuffer = source.resource[i];
|
|
if (compressed) {
|
|
gl.compressedTexImage2D(
|
|
gl.TEXTURE_2D,
|
|
i,
|
|
glTexture.internalFormat,
|
|
mipWidth,
|
|
mipHeight,
|
|
0,
|
|
levelBuffer
|
|
);
|
|
} else {
|
|
gl.texImage2D(
|
|
gl.TEXTURE_2D,
|
|
i,
|
|
glTexture.internalFormat,
|
|
mipWidth,
|
|
mipHeight,
|
|
0,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
levelBuffer
|
|
);
|
|
}
|
|
mipWidth = Math.max(mipWidth >> 1, 1);
|
|
mipHeight = Math.max(mipHeight >> 1, 1);
|
|
}
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const glUploadImageResource = {
|
|
id: "image",
|
|
upload(source, glTexture, gl, webGLVersion) {
|
|
const premultipliedAlpha = source.alphaMode === "premultiply-alpha-on-upload";
|
|
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultipliedAlpha);
|
|
const glWidth = glTexture.width;
|
|
const glHeight = glTexture.height;
|
|
const textureWidth = source.pixelWidth;
|
|
const textureHeight = source.pixelHeight;
|
|
const resourceWidth = source.resourceWidth;
|
|
const resourceHeight = source.resourceHeight;
|
|
if (resourceWidth < textureWidth || resourceHeight < textureHeight) {
|
|
if (glWidth !== textureWidth || glHeight !== textureHeight) {
|
|
gl.texImage2D(
|
|
glTexture.target,
|
|
0,
|
|
glTexture.internalFormat,
|
|
textureWidth,
|
|
textureHeight,
|
|
0,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
null
|
|
);
|
|
}
|
|
if (webGLVersion === 2) {
|
|
gl.texSubImage2D(
|
|
gl.TEXTURE_2D,
|
|
0,
|
|
0,
|
|
0,
|
|
resourceWidth,
|
|
resourceHeight,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
source.resource
|
|
);
|
|
} else {
|
|
gl.texSubImage2D(
|
|
gl.TEXTURE_2D,
|
|
0,
|
|
0,
|
|
0,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
source.resource
|
|
);
|
|
}
|
|
} else if (glWidth === textureWidth || glHeight === textureHeight) {
|
|
gl.texSubImage2D(
|
|
gl.TEXTURE_2D,
|
|
0,
|
|
0,
|
|
0,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
source.resource
|
|
);
|
|
} else if (webGLVersion === 2) {
|
|
gl.texImage2D(
|
|
glTexture.target,
|
|
0,
|
|
glTexture.internalFormat,
|
|
textureWidth,
|
|
textureHeight,
|
|
0,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
source.resource
|
|
);
|
|
} else {
|
|
gl.texImage2D(
|
|
glTexture.target,
|
|
0,
|
|
glTexture.internalFormat,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
source.resource
|
|
);
|
|
}
|
|
glTexture.width = textureWidth;
|
|
glTexture.height = textureHeight;
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const glUploadVideoResource = {
|
|
id: "video",
|
|
upload(source, glTexture, gl, webGLVersion) {
|
|
if (!source.isValid) {
|
|
gl.texImage2D(
|
|
glTexture.target,
|
|
0,
|
|
glTexture.internalFormat,
|
|
1,
|
|
1,
|
|
0,
|
|
glTexture.format,
|
|
glTexture.type,
|
|
null
|
|
);
|
|
return;
|
|
}
|
|
glUploadImageResource.upload(source, glTexture, gl, webGLVersion);
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const scaleModeToGlFilter = {
|
|
linear: 9729,
|
|
nearest: 9728
|
|
};
|
|
const mipmapScaleModeToGlFilter = {
|
|
linear: {
|
|
linear: 9987,
|
|
nearest: 9985
|
|
},
|
|
nearest: {
|
|
linear: 9986,
|
|
nearest: 9984
|
|
}
|
|
};
|
|
const wrapModeToGlAddress = {
|
|
"clamp-to-edge": 33071,
|
|
repeat: 10497,
|
|
"mirror-repeat": 33648
|
|
};
|
|
const compareModeToGlCompare = {
|
|
never: 512,
|
|
less: 513,
|
|
equal: 514,
|
|
"less-equal": 515,
|
|
greater: 516,
|
|
"not-equal": 517,
|
|
"greater-equal": 518,
|
|
always: 519
|
|
};
|
|
|
|
"use strict";
|
|
function applyStyleParams(style, gl, mipmaps, anisotropicExt, glFunctionName, firstParam, forceClamp, firstCreation) {
|
|
const castParam = firstParam;
|
|
if (!firstCreation || style.addressModeU !== "repeat" || style.addressModeV !== "repeat" || style.addressModeW !== "repeat") {
|
|
const wrapModeS = wrapModeToGlAddress[forceClamp ? "clamp-to-edge" : style.addressModeU];
|
|
const wrapModeT = wrapModeToGlAddress[forceClamp ? "clamp-to-edge" : style.addressModeV];
|
|
const wrapModeR = wrapModeToGlAddress[forceClamp ? "clamp-to-edge" : style.addressModeW];
|
|
gl[glFunctionName](castParam, gl.TEXTURE_WRAP_S, wrapModeS);
|
|
gl[glFunctionName](castParam, gl.TEXTURE_WRAP_T, wrapModeT);
|
|
if (gl.TEXTURE_WRAP_R)
|
|
gl[glFunctionName](castParam, gl.TEXTURE_WRAP_R, wrapModeR);
|
|
}
|
|
if (!firstCreation || style.magFilter !== "linear") {
|
|
gl[glFunctionName](castParam, gl.TEXTURE_MAG_FILTER, scaleModeToGlFilter[style.magFilter]);
|
|
}
|
|
if (mipmaps) {
|
|
if (!firstCreation || style.mipmapFilter !== "linear") {
|
|
const glFilterMode = mipmapScaleModeToGlFilter[style.minFilter][style.mipmapFilter];
|
|
gl[glFunctionName](castParam, gl.TEXTURE_MIN_FILTER, glFilterMode);
|
|
}
|
|
} else {
|
|
gl[glFunctionName](castParam, gl.TEXTURE_MIN_FILTER, scaleModeToGlFilter[style.minFilter]);
|
|
}
|
|
if (anisotropicExt && style.maxAnisotropy > 1) {
|
|
const level = Math.min(style.maxAnisotropy, gl.getParameter(anisotropicExt.MAX_TEXTURE_MAX_ANISOTROPY_EXT));
|
|
gl[glFunctionName](castParam, anisotropicExt.TEXTURE_MAX_ANISOTROPY_EXT, level);
|
|
}
|
|
if (style.compare) {
|
|
gl[glFunctionName](castParam, gl.TEXTURE_COMPARE_FUNC, compareModeToGlCompare[style.compare]);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function mapFormatToGlFormat(gl) {
|
|
return {
|
|
// 8-bit formats
|
|
r8unorm: gl.RED,
|
|
r8snorm: gl.RED,
|
|
r8uint: gl.RED,
|
|
r8sint: gl.RED,
|
|
// 16-bit formats
|
|
r16uint: gl.RED,
|
|
r16sint: gl.RED,
|
|
r16float: gl.RED,
|
|
rg8unorm: gl.RG,
|
|
rg8snorm: gl.RG,
|
|
rg8uint: gl.RG,
|
|
rg8sint: gl.RG,
|
|
// 32-bit formats
|
|
r32uint: gl.RED,
|
|
r32sint: gl.RED,
|
|
r32float: gl.RED,
|
|
rg16uint: gl.RG,
|
|
rg16sint: gl.RG,
|
|
rg16float: gl.RG,
|
|
rgba8unorm: gl.RGBA,
|
|
"rgba8unorm-srgb": gl.RGBA,
|
|
// Packed 32-bit formats
|
|
rgba8snorm: gl.RGBA,
|
|
rgba8uint: gl.RGBA,
|
|
rgba8sint: gl.RGBA,
|
|
bgra8unorm: gl.RGBA,
|
|
"bgra8unorm-srgb": gl.RGBA,
|
|
rgb9e5ufloat: gl.RGB,
|
|
rgb10a2unorm: gl.RGBA,
|
|
rg11b10ufloat: gl.RGB,
|
|
// 64-bit formats
|
|
rg32uint: gl.RG,
|
|
rg32sint: gl.RG,
|
|
rg32float: gl.RG,
|
|
rgba16uint: gl.RGBA,
|
|
rgba16sint: gl.RGBA,
|
|
rgba16float: gl.RGBA,
|
|
// 128-bit formats
|
|
rgba32uint: gl.RGBA,
|
|
rgba32sint: gl.RGBA,
|
|
rgba32float: gl.RGBA,
|
|
// Depth/stencil formats
|
|
stencil8: gl.STENCIL_INDEX8,
|
|
depth16unorm: gl.DEPTH_COMPONENT,
|
|
depth24plus: gl.DEPTH_COMPONENT,
|
|
"depth24plus-stencil8": gl.DEPTH_STENCIL,
|
|
depth32float: gl.DEPTH_COMPONENT,
|
|
"depth32float-stencil8": gl.DEPTH_STENCIL
|
|
};
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$g = Object.defineProperty;
|
|
var __defProps$7 = Object.defineProperties;
|
|
var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$g = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$g = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$g.call(b, prop))
|
|
__defNormalProp$g(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$g)
|
|
for (var prop of __getOwnPropSymbols$g(b)) {
|
|
if (__propIsEnum$g.call(b, prop))
|
|
__defNormalProp$g(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
|
|
function mapFormatToGlInternalFormat(gl, extensions) {
|
|
let srgb = {};
|
|
let bgra8unorm = gl.RGBA;
|
|
if (!(gl instanceof DOMAdapter.get().getWebGLRenderingContext())) {
|
|
srgb = {
|
|
"rgba8unorm-srgb": gl.SRGB8_ALPHA8,
|
|
"bgra8unorm-srgb": gl.SRGB8_ALPHA8
|
|
};
|
|
bgra8unorm = gl.RGBA8;
|
|
} else if (extensions.srgb) {
|
|
srgb = {
|
|
"rgba8unorm-srgb": extensions.srgb.SRGB8_ALPHA8_EXT,
|
|
"bgra8unorm-srgb": extensions.srgb.SRGB8_ALPHA8_EXT
|
|
};
|
|
}
|
|
return __spreadValues$g(__spreadValues$g(__spreadValues$g(__spreadValues$g(__spreadValues$g(__spreadValues$g(__spreadProps$7(__spreadValues$g({
|
|
// 8-bit formats
|
|
r8unorm: gl.R8,
|
|
r8snorm: gl.R8_SNORM,
|
|
r8uint: gl.R8UI,
|
|
r8sint: gl.R8I,
|
|
// 16-bit formats
|
|
r16uint: gl.R16UI,
|
|
r16sint: gl.R16I,
|
|
r16float: gl.R16F,
|
|
rg8unorm: gl.RG8,
|
|
rg8snorm: gl.RG8_SNORM,
|
|
rg8uint: gl.RG8UI,
|
|
rg8sint: gl.RG8I,
|
|
// 32-bit formats
|
|
r32uint: gl.R32UI,
|
|
r32sint: gl.R32I,
|
|
r32float: gl.R32F,
|
|
rg16uint: gl.RG16UI,
|
|
rg16sint: gl.RG16I,
|
|
rg16float: gl.RG16F,
|
|
rgba8unorm: gl.RGBA
|
|
}, srgb), {
|
|
// Packed 32-bit formats
|
|
rgba8snorm: gl.RGBA8_SNORM,
|
|
rgba8uint: gl.RGBA8UI,
|
|
rgba8sint: gl.RGBA8I,
|
|
bgra8unorm,
|
|
rgb9e5ufloat: gl.RGB9_E5,
|
|
rgb10a2unorm: gl.RGB10_A2,
|
|
rg11b10ufloat: gl.R11F_G11F_B10F,
|
|
// 64-bit formats
|
|
rg32uint: gl.RG32UI,
|
|
rg32sint: gl.RG32I,
|
|
rg32float: gl.RG32F,
|
|
rgba16uint: gl.RGBA16UI,
|
|
rgba16sint: gl.RGBA16I,
|
|
rgba16float: gl.RGBA16F,
|
|
// 128-bit formats
|
|
rgba32uint: gl.RGBA32UI,
|
|
rgba32sint: gl.RGBA32I,
|
|
rgba32float: gl.RGBA32F,
|
|
// Depth/stencil formats
|
|
stencil8: gl.STENCIL_INDEX8,
|
|
depth16unorm: gl.DEPTH_COMPONENT16,
|
|
depth24plus: gl.DEPTH_COMPONENT24,
|
|
"depth24plus-stencil8": gl.DEPTH24_STENCIL8,
|
|
depth32float: gl.DEPTH_COMPONENT32F,
|
|
"depth32float-stencil8": gl.DEPTH32F_STENCIL8
|
|
}), extensions.s3tc ? {
|
|
"bc1-rgba-unorm": extensions.s3tc.COMPRESSED_RGBA_S3TC_DXT1_EXT,
|
|
"bc2-rgba-unorm": extensions.s3tc.COMPRESSED_RGBA_S3TC_DXT3_EXT,
|
|
"bc3-rgba-unorm": extensions.s3tc.COMPRESSED_RGBA_S3TC_DXT5_EXT
|
|
} : {}), extensions.s3tc_sRGB ? {
|
|
"bc1-rgba-unorm-srgb": extensions.s3tc_sRGB.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT,
|
|
"bc2-rgba-unorm-srgb": extensions.s3tc_sRGB.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT,
|
|
"bc3-rgba-unorm-srgb": extensions.s3tc_sRGB.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT
|
|
} : {}), extensions.rgtc ? {
|
|
"bc4-r-unorm": extensions.rgtc.COMPRESSED_RED_RGTC1_EXT,
|
|
"bc4-r-snorm": extensions.rgtc.COMPRESSED_SIGNED_RED_RGTC1_EXT,
|
|
"bc5-rg-unorm": extensions.rgtc.COMPRESSED_RED_GREEN_RGTC2_EXT,
|
|
"bc5-rg-snorm": extensions.rgtc.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT
|
|
} : {}), extensions.bptc ? {
|
|
"bc6h-rgb-float": extensions.bptc.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT,
|
|
"bc6h-rgb-ufloat": extensions.bptc.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT,
|
|
"bc7-rgba-unorm": extensions.bptc.COMPRESSED_RGBA_BPTC_UNORM_EXT,
|
|
"bc7-rgba-unorm-srgb": extensions.bptc.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT
|
|
} : {}), extensions.etc ? {
|
|
"etc2-rgb8unorm": extensions.etc.COMPRESSED_RGB8_ETC2,
|
|
"etc2-rgb8unorm-srgb": extensions.etc.COMPRESSED_SRGB8_ETC2,
|
|
"etc2-rgb8a1unorm": extensions.etc.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2,
|
|
"etc2-rgb8a1unorm-srgb": extensions.etc.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2,
|
|
"etc2-rgba8unorm": extensions.etc.COMPRESSED_RGBA8_ETC2_EAC,
|
|
"etc2-rgba8unorm-srgb": extensions.etc.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC,
|
|
"eac-r11unorm": extensions.etc.COMPRESSED_R11_EAC,
|
|
// 'eac-r11snorm'
|
|
"eac-rg11unorm": extensions.etc.COMPRESSED_SIGNED_RG11_EAC
|
|
// 'eac-rg11snorm'
|
|
} : {}), extensions.astc ? {
|
|
"astc-4x4-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_4x4_KHR,
|
|
"astc-4x4-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR,
|
|
"astc-5x4-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_5x4_KHR,
|
|
"astc-5x4-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR,
|
|
"astc-5x5-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_5x5_KHR,
|
|
"astc-5x5-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR,
|
|
"astc-6x5-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_6x5_KHR,
|
|
"astc-6x5-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR,
|
|
"astc-6x6-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_6x6_KHR,
|
|
"astc-6x6-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR,
|
|
"astc-8x5-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_8x5_KHR,
|
|
"astc-8x5-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR,
|
|
"astc-8x6-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_8x6_KHR,
|
|
"astc-8x6-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR,
|
|
"astc-8x8-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_8x8_KHR,
|
|
"astc-8x8-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR,
|
|
"astc-10x5-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_10x5_KHR,
|
|
"astc-10x5-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR,
|
|
"astc-10x6-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_10x6_KHR,
|
|
"astc-10x6-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR,
|
|
"astc-10x8-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_10x8_KHR,
|
|
"astc-10x8-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR,
|
|
"astc-10x10-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_10x10_KHR,
|
|
"astc-10x10-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR,
|
|
"astc-12x10-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_12x10_KHR,
|
|
"astc-12x10-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR,
|
|
"astc-12x12-unorm": extensions.astc.COMPRESSED_RGBA_ASTC_12x12_KHR,
|
|
"astc-12x12-unorm-srgb": extensions.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR
|
|
} : {});
|
|
}
|
|
|
|
"use strict";
|
|
function mapFormatToGlType(gl) {
|
|
return {
|
|
// 8-bit formats
|
|
r8unorm: gl.UNSIGNED_BYTE,
|
|
r8snorm: gl.BYTE,
|
|
r8uint: gl.UNSIGNED_BYTE,
|
|
r8sint: gl.BYTE,
|
|
// 16-bit formats
|
|
r16uint: gl.UNSIGNED_SHORT,
|
|
r16sint: gl.SHORT,
|
|
r16float: gl.HALF_FLOAT,
|
|
rg8unorm: gl.UNSIGNED_BYTE,
|
|
rg8snorm: gl.BYTE,
|
|
rg8uint: gl.UNSIGNED_BYTE,
|
|
rg8sint: gl.BYTE,
|
|
// 32-bit formats
|
|
r32uint: gl.UNSIGNED_INT,
|
|
r32sint: gl.INT,
|
|
r32float: gl.FLOAT,
|
|
rg16uint: gl.UNSIGNED_SHORT,
|
|
rg16sint: gl.SHORT,
|
|
rg16float: gl.HALF_FLOAT,
|
|
rgba8unorm: gl.UNSIGNED_BYTE,
|
|
"rgba8unorm-srgb": gl.UNSIGNED_BYTE,
|
|
// Packed 32-bit formats
|
|
rgba8snorm: gl.BYTE,
|
|
rgba8uint: gl.UNSIGNED_BYTE,
|
|
rgba8sint: gl.BYTE,
|
|
bgra8unorm: gl.UNSIGNED_BYTE,
|
|
"bgra8unorm-srgb": gl.UNSIGNED_BYTE,
|
|
rgb9e5ufloat: gl.UNSIGNED_INT_5_9_9_9_REV,
|
|
rgb10a2unorm: gl.UNSIGNED_INT_2_10_10_10_REV,
|
|
rg11b10ufloat: gl.UNSIGNED_INT_10F_11F_11F_REV,
|
|
// 64-bit formats
|
|
rg32uint: gl.UNSIGNED_INT,
|
|
rg32sint: gl.INT,
|
|
rg32float: gl.FLOAT,
|
|
rgba16uint: gl.UNSIGNED_SHORT,
|
|
rgba16sint: gl.SHORT,
|
|
rgba16float: gl.HALF_FLOAT,
|
|
// 128-bit formats
|
|
rgba32uint: gl.UNSIGNED_INT,
|
|
rgba32sint: gl.INT,
|
|
rgba32float: gl.FLOAT,
|
|
// Depth/stencil formats
|
|
stencil8: gl.UNSIGNED_BYTE,
|
|
depth16unorm: gl.UNSIGNED_SHORT,
|
|
depth24plus: gl.UNSIGNED_INT,
|
|
"depth24plus-stencil8": gl.UNSIGNED_INT_24_8,
|
|
depth32float: gl.FLOAT,
|
|
"depth32float-stencil8": gl.FLOAT_32_UNSIGNED_INT_24_8_REV
|
|
};
|
|
}
|
|
|
|
"use strict";
|
|
function unpremultiplyAlpha$1(pixels) {
|
|
if (pixels instanceof Uint8ClampedArray) {
|
|
pixels = new Uint8Array(pixels.buffer);
|
|
}
|
|
const n = pixels.length;
|
|
for (let i = 0; i < n; i += 4) {
|
|
const alpha = pixels[i + 3];
|
|
if (alpha !== 0) {
|
|
const a = 255.001 / alpha;
|
|
pixels[i] = pixels[i] * a + 0.5;
|
|
pixels[i + 1] = pixels[i + 1] * a + 0.5;
|
|
pixels[i + 2] = pixels[i + 2] * a + 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
const BYTES_PER_PIXEL = 4;
|
|
class GlTextureSystem {
|
|
constructor(renderer) {
|
|
this.managedTextures = [];
|
|
this._glTextures = /* @__PURE__ */ Object.create(null);
|
|
this._glSamplers = /* @__PURE__ */ Object.create(null);
|
|
this._boundTextures = [];
|
|
this._activeTextureLocation = -1;
|
|
this._boundSamplers = /* @__PURE__ */ Object.create(null);
|
|
this._uploads = {
|
|
image: glUploadImageResource,
|
|
buffer: glUploadBufferImageResource,
|
|
video: glUploadVideoResource,
|
|
compressed: glUploadCompressedTextureResource
|
|
};
|
|
// TODO - separate samplers will be a cool thing to add, but not right now!
|
|
this._useSeparateSamplers = false;
|
|
this._renderer = renderer;
|
|
}
|
|
contextChange(gl) {
|
|
this._gl = gl;
|
|
if (!this._mapFormatToInternalFormat) {
|
|
this._mapFormatToInternalFormat = mapFormatToGlInternalFormat(gl, this._renderer.context.extensions);
|
|
this._mapFormatToType = mapFormatToGlType(gl);
|
|
this._mapFormatToFormat = mapFormatToGlFormat(gl);
|
|
}
|
|
this._glTextures = /* @__PURE__ */ Object.create(null);
|
|
this._glSamplers = /* @__PURE__ */ Object.create(null);
|
|
this._boundSamplers = /* @__PURE__ */ Object.create(null);
|
|
for (let i = 0; i < 16; i++) {
|
|
this.bind(Texture.EMPTY, i);
|
|
}
|
|
}
|
|
initSource(source) {
|
|
this.bind(source);
|
|
}
|
|
bind(texture, location = 0) {
|
|
const source = texture.source;
|
|
if (texture) {
|
|
this.bindSource(source, location);
|
|
if (this._useSeparateSamplers) {
|
|
this._bindSampler(source.style, location);
|
|
}
|
|
} else {
|
|
this.bindSource(null, location);
|
|
if (this._useSeparateSamplers) {
|
|
this._bindSampler(null, location);
|
|
}
|
|
}
|
|
}
|
|
bindSource(source, location = 0) {
|
|
const gl = this._gl;
|
|
source._touched = this._renderer.textureGC.count;
|
|
if (this._boundTextures[location] !== source) {
|
|
this._boundTextures[location] = source;
|
|
this._activateLocation(location);
|
|
source = source || Texture.EMPTY.source;
|
|
const glTexture = this.getGlSource(source);
|
|
gl.bindTexture(glTexture.target, glTexture.texture);
|
|
}
|
|
}
|
|
_bindSampler(style, location = 0) {
|
|
const gl = this._gl;
|
|
if (!style) {
|
|
this._boundSamplers[location] = null;
|
|
gl.bindSampler(location, null);
|
|
return;
|
|
}
|
|
const sampler = this._getGlSampler(style);
|
|
if (this._boundSamplers[location] !== sampler) {
|
|
this._boundSamplers[location] = sampler;
|
|
gl.bindSampler(location, sampler);
|
|
}
|
|
}
|
|
unbind(texture) {
|
|
const source = texture.source;
|
|
const boundTextures = this._boundTextures;
|
|
const gl = this._gl;
|
|
for (let i = 0; i < boundTextures.length; i++) {
|
|
if (boundTextures[i] === source) {
|
|
this._activateLocation(i);
|
|
const glTexture = this.getGlSource(source);
|
|
gl.bindTexture(glTexture.target, null);
|
|
boundTextures[i] = null;
|
|
}
|
|
}
|
|
}
|
|
_activateLocation(location) {
|
|
if (this._activeTextureLocation !== location) {
|
|
this._activeTextureLocation = location;
|
|
this._gl.activeTexture(this._gl.TEXTURE0 + location);
|
|
}
|
|
}
|
|
_initSource(source) {
|
|
const gl = this._gl;
|
|
const glTexture = new GlTexture(gl.createTexture());
|
|
glTexture.type = this._mapFormatToType[source.format];
|
|
glTexture.internalFormat = this._mapFormatToInternalFormat[source.format];
|
|
glTexture.format = this._mapFormatToFormat[source.format];
|
|
if (source.autoGenerateMipmaps && (this._renderer.context.supports.nonPowOf2mipmaps || source.isPowerOfTwo)) {
|
|
const biggestDimension = Math.max(source.width, source.height);
|
|
source.mipLevelCount = Math.floor(Math.log2(biggestDimension)) + 1;
|
|
}
|
|
this._glTextures[source.uid] = glTexture;
|
|
if (!this.managedTextures.includes(source)) {
|
|
source.on("update", this.onSourceUpdate, this);
|
|
source.on("resize", this.onSourceUpdate, this);
|
|
source.on("styleChange", this.onStyleChange, this);
|
|
source.on("destroy", this.onSourceDestroy, this);
|
|
source.on("unload", this.onSourceUnload, this);
|
|
source.on("updateMipmaps", this.onUpdateMipmaps, this);
|
|
this.managedTextures.push(source);
|
|
}
|
|
this.onSourceUpdate(source);
|
|
this.updateStyle(source, false);
|
|
return glTexture;
|
|
}
|
|
onStyleChange(source) {
|
|
this.updateStyle(source, false);
|
|
}
|
|
updateStyle(source, firstCreation) {
|
|
const gl = this._gl;
|
|
const glTexture = this.getGlSource(source);
|
|
gl.bindTexture(gl.TEXTURE_2D, glTexture.texture);
|
|
this._boundTextures[this._activeTextureLocation] = source;
|
|
applyStyleParams(
|
|
source.style,
|
|
gl,
|
|
source.mipLevelCount > 1,
|
|
this._renderer.context.extensions.anisotropicFiltering,
|
|
"texParameteri",
|
|
gl.TEXTURE_2D,
|
|
// will force a clamp to edge if the texture is not a power of two
|
|
!this._renderer.context.supports.nonPowOf2wrapping && !source.isPowerOfTwo,
|
|
firstCreation
|
|
);
|
|
}
|
|
onSourceUnload(source) {
|
|
const glTexture = this._glTextures[source.uid];
|
|
if (!glTexture)
|
|
return;
|
|
this.unbind(source);
|
|
this._glTextures[source.uid] = null;
|
|
this._gl.deleteTexture(glTexture.texture);
|
|
}
|
|
onSourceUpdate(source) {
|
|
const gl = this._gl;
|
|
const glTexture = this.getGlSource(source);
|
|
gl.bindTexture(gl.TEXTURE_2D, glTexture.texture);
|
|
this._boundTextures[this._activeTextureLocation] = source;
|
|
if (this._uploads[source.uploadMethodId]) {
|
|
this._uploads[source.uploadMethodId].upload(source, glTexture, gl, this._renderer.context.webGLVersion);
|
|
} else {
|
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, source.pixelWidth, source.pixelHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
|
|
}
|
|
if (source.autoGenerateMipmaps && source.mipLevelCount > 1) {
|
|
this.onUpdateMipmaps(source, false);
|
|
}
|
|
}
|
|
onUpdateMipmaps(source, bind = true) {
|
|
if (bind)
|
|
this.bindSource(source, 0);
|
|
const glTexture = this.getGlSource(source);
|
|
this._gl.generateMipmap(glTexture.target);
|
|
}
|
|
onSourceDestroy(source) {
|
|
source.off("destroy", this.onSourceDestroy, this);
|
|
source.off("update", this.onSourceUpdate, this);
|
|
source.off("resize", this.onSourceUpdate, this);
|
|
source.off("unload", this.onSourceUnload, this);
|
|
source.off("styleChange", this.onStyleChange, this);
|
|
source.off("updateMipmaps", this.onUpdateMipmaps, this);
|
|
this.managedTextures.splice(this.managedTextures.indexOf(source), 1);
|
|
this.onSourceUnload(source);
|
|
}
|
|
_initSampler(style) {
|
|
const gl = this._gl;
|
|
const glSampler = this._gl.createSampler();
|
|
this._glSamplers[style._resourceId] = glSampler;
|
|
applyStyleParams(
|
|
style,
|
|
gl,
|
|
this._boundTextures[this._activeTextureLocation].mipLevelCount > 1,
|
|
this._renderer.context.extensions.anisotropicFiltering,
|
|
"samplerParameteri",
|
|
glSampler,
|
|
false,
|
|
true
|
|
);
|
|
return this._glSamplers[style._resourceId];
|
|
}
|
|
_getGlSampler(sampler) {
|
|
return this._glSamplers[sampler._resourceId] || this._initSampler(sampler);
|
|
}
|
|
getGlSource(source) {
|
|
return this._glTextures[source.uid] || this._initSource(source);
|
|
}
|
|
generateCanvas(texture) {
|
|
const { pixels, width, height } = this.getPixels(texture);
|
|
const canvas = DOMAdapter.get().createCanvas();
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const ctx = canvas.getContext("2d");
|
|
if (ctx) {
|
|
const imageData = ctx.createImageData(width, height);
|
|
imageData.data.set(pixels);
|
|
ctx.putImageData(imageData, 0, 0);
|
|
}
|
|
return canvas;
|
|
}
|
|
getPixels(texture) {
|
|
const resolution = texture.source.resolution;
|
|
const frame = texture.frame;
|
|
const width = Math.max(Math.round(frame.width * resolution), 1);
|
|
const height = Math.max(Math.round(frame.height * resolution), 1);
|
|
const pixels = new Uint8Array(BYTES_PER_PIXEL * width * height);
|
|
const renderer = this._renderer;
|
|
const renderTarget = renderer.renderTarget.getRenderTarget(texture);
|
|
const glRenterTarget = renderer.renderTarget.getGpuRenderTarget(renderTarget);
|
|
const gl = renderer.gl;
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, glRenterTarget.resolveTargetFramebuffer);
|
|
gl.readPixels(
|
|
Math.round(frame.x * resolution),
|
|
Math.round(frame.y * resolution),
|
|
width,
|
|
height,
|
|
gl.RGBA,
|
|
gl.UNSIGNED_BYTE,
|
|
pixels
|
|
);
|
|
if (false) {
|
|
unpremultiplyAlpha(pixels);
|
|
}
|
|
return { pixels: new Uint8ClampedArray(pixels.buffer), width, height };
|
|
}
|
|
destroy() {
|
|
this.managedTextures.slice().forEach((source) => this.onSourceDestroy(source));
|
|
this.managedTextures = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlTextureSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem
|
|
],
|
|
name: "texture"
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
class GlGraphicsAdaptor {
|
|
init() {
|
|
const uniforms = new UniformGroup({
|
|
uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
|
|
uTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uRound: { value: 0, type: "f32" }
|
|
});
|
|
const maxTextures = getMaxTexturesPerBatch();
|
|
const glProgram = compileHighShaderGlProgram({
|
|
name: "graphics",
|
|
bits: [
|
|
colorBitGl,
|
|
generateTextureBatchBitGl(maxTextures),
|
|
localUniformBitGl,
|
|
roundPixelsBitGl
|
|
]
|
|
});
|
|
this.shader = new Shader({
|
|
glProgram,
|
|
resources: {
|
|
localUniforms: uniforms,
|
|
batchSamplers: getBatchSamplersUniformGroup(maxTextures)
|
|
}
|
|
});
|
|
}
|
|
execute(graphicsPipe, renderable) {
|
|
const context = renderable.context;
|
|
const shader = context.customShader || this.shader;
|
|
const renderer = graphicsPipe.renderer;
|
|
const contextSystem = renderer.graphicsContext;
|
|
const {
|
|
batcher,
|
|
instructions
|
|
} = contextSystem.getContextRenderData(context);
|
|
shader.groups[0] = renderer.globalUniforms.bindGroup;
|
|
renderer.state.set(graphicsPipe.state);
|
|
renderer.shader.bind(shader);
|
|
renderer.geometry.bind(batcher.geometry, shader.glProgram);
|
|
const batches = instructions.instructions;
|
|
for (let i = 0; i < instructions.instructionSize; i++) {
|
|
const batch = batches[i];
|
|
if (batch.size) {
|
|
for (let j = 0; j < batch.textures.count; j++) {
|
|
renderer.texture.bind(batch.textures.textures[j], j);
|
|
}
|
|
renderer.geometry.draw("triangle-list", batch.size, batch.start);
|
|
}
|
|
}
|
|
}
|
|
destroy() {
|
|
this.shader.destroy(true);
|
|
this.shader = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlGraphicsAdaptor.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipesAdaptor
|
|
],
|
|
name: "graphics"
|
|
};
|
|
|
|
"use strict";
|
|
class GlMeshAdaptor {
|
|
init() {
|
|
const glProgram = compileHighShaderGlProgram({
|
|
name: "mesh",
|
|
bits: [
|
|
localUniformBitGl,
|
|
textureBitGl,
|
|
roundPixelsBitGl
|
|
]
|
|
});
|
|
this._shader = new Shader({
|
|
glProgram,
|
|
resources: {
|
|
uTexture: Texture.EMPTY.source,
|
|
textureUniforms: {
|
|
uTextureMatrix: { type: "mat3x3<f32>", value: new Matrix() }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
execute(meshPipe, mesh) {
|
|
const renderer = meshPipe.renderer;
|
|
let shader = mesh._shader;
|
|
if (!shader) {
|
|
shader = this._shader;
|
|
const texture = mesh.texture;
|
|
const source = texture.source;
|
|
shader.resources.uTexture = source;
|
|
shader.resources.uSampler = source.style;
|
|
shader.resources.textureUniforms.uniforms.uTextureMatrix = texture.textureMatrix.mapCoord;
|
|
} else if (!shader.glProgram) {
|
|
warn("Mesh shader has no glProgram", mesh.shader);
|
|
return;
|
|
}
|
|
shader.groups[100] = renderer.globalUniforms.bindGroup;
|
|
shader.groups[101] = meshPipe.localUniformsBindGroup;
|
|
renderer.encoder.draw({
|
|
geometry: mesh._geometry,
|
|
shader,
|
|
state: mesh.state
|
|
});
|
|
}
|
|
destroy() {
|
|
this._shader.destroy(true);
|
|
this._shader = null;
|
|
}
|
|
}
|
|
GlMeshAdaptor.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipesAdaptor
|
|
],
|
|
name: "mesh"
|
|
};
|
|
|
|
"use strict";
|
|
class CustomRenderPipe {
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
}
|
|
addRenderable(container, instructionSet) {
|
|
this._renderer.renderPipes.batch.break(instructionSet);
|
|
instructionSet.add(container);
|
|
}
|
|
execute(container) {
|
|
if (!container.isRenderable)
|
|
return;
|
|
container.render(this._renderer);
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
CustomRenderPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "customRender"
|
|
};
|
|
|
|
"use strict";
|
|
function executeInstructions(renderGroup, renderer) {
|
|
const instructionSet = renderGroup.instructionSet;
|
|
const instructions = instructionSet.instructions;
|
|
for (let i = 0; i < instructionSet.instructionSize; i++) {
|
|
const instruction = instructions[i];
|
|
renderer[instruction.renderPipeId].execute(instruction);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class RenderGroupPipe {
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
}
|
|
addRenderGroup(renderGroup, instructionSet) {
|
|
this._renderer.renderPipes.batch.break(instructionSet);
|
|
instructionSet.add(renderGroup);
|
|
}
|
|
execute(renderGroup) {
|
|
if (!renderGroup.isRenderable)
|
|
return;
|
|
this._renderer.globalUniforms.push({
|
|
worldTransformMatrix: renderGroup.worldTransform,
|
|
worldColor: renderGroup.worldColorAlpha
|
|
});
|
|
executeInstructions(renderGroup, this._renderer.renderPipes);
|
|
this._renderer.globalUniforms.pop();
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
RenderGroupPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "renderGroup"
|
|
};
|
|
|
|
"use strict";
|
|
function clearList(list, index) {
|
|
index || (index = 0);
|
|
for (let j = index; j < list.length; j++) {
|
|
if (list[j]) {
|
|
list[j] = null;
|
|
} else {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function collectRenderGroups(renderGroup, out = []) {
|
|
out.push(renderGroup);
|
|
for (let i = 0; i < renderGroup.renderGroupChildren.length; i++) {
|
|
collectRenderGroups(renderGroup.renderGroupChildren[i], out);
|
|
}
|
|
return out;
|
|
}
|
|
|
|
"use strict";
|
|
function mixHexColors(color1, color2, ratio) {
|
|
const r1 = color1 >> 16 & 255;
|
|
const g1 = color1 >> 8 & 255;
|
|
const b1 = color1 & 255;
|
|
const r2 = color2 >> 16 & 255;
|
|
const g2 = color2 >> 8 & 255;
|
|
const b2 = color2 & 255;
|
|
const r = r1 + (r2 - r1) * ratio;
|
|
const g = g1 + (g2 - g1) * ratio;
|
|
const b = b1 + (b2 - b1) * ratio;
|
|
return (r << 16) + (g << 8) + b;
|
|
}
|
|
|
|
"use strict";
|
|
const WHITE_BGR = 16777215;
|
|
function mixColors(localBGRColor, parentBGRColor) {
|
|
if (localBGRColor === WHITE_BGR || parentBGRColor === WHITE_BGR) {
|
|
return localBGRColor + parentBGRColor - WHITE_BGR;
|
|
}
|
|
return mixHexColors(localBGRColor, parentBGRColor, 0.5);
|
|
}
|
|
function mixStandardAnd32BitColors(localColorRGB, localAlpha, parentColor) {
|
|
const parentAlpha = (parentColor >> 24 & 255) / 255;
|
|
const globalAlpha = localAlpha * parentAlpha * 255;
|
|
const localBGRColor = ((localColorRGB & 255) << 16) + (localColorRGB & 65280) + (localColorRGB >> 16 & 255);
|
|
const parentBGRColor = parentColor & 16777215;
|
|
let sharedBGRColor;
|
|
if (localBGRColor === WHITE_BGR || parentBGRColor === WHITE_BGR) {
|
|
sharedBGRColor = localBGRColor + parentBGRColor - WHITE_BGR;
|
|
} else {
|
|
sharedBGRColor = mixHexColors(localBGRColor, parentBGRColor, 0.5);
|
|
}
|
|
return sharedBGRColor + (globalAlpha << 24);
|
|
}
|
|
|
|
"use strict";
|
|
const tempContainer = new Container();
|
|
const UPDATE_BLEND_COLOR_VISIBLE = UPDATE_VISIBLE | UPDATE_COLOR | UPDATE_BLEND;
|
|
function updateRenderGroupTransforms(renderGroup, updateChildRenderGroups = false) {
|
|
updateRenderGroupTransform(renderGroup);
|
|
const childrenToUpdate = renderGroup.childrenToUpdate;
|
|
const updateTick = renderGroup.updateTick++;
|
|
for (const j in childrenToUpdate) {
|
|
const renderGroupDepth = Number(j);
|
|
const childrenAtDepth = childrenToUpdate[j];
|
|
const list = childrenAtDepth.list;
|
|
const index = childrenAtDepth.index;
|
|
for (let i = 0; i < index; i++) {
|
|
const child = list[i];
|
|
if (child.parentRenderGroup === renderGroup && child.relativeRenderGroupDepth === renderGroupDepth) {
|
|
updateTransformAndChildren(child, updateTick, 0);
|
|
}
|
|
}
|
|
clearList(list, index);
|
|
childrenAtDepth.index = 0;
|
|
}
|
|
if (updateChildRenderGroups) {
|
|
for (let i = 0; i < renderGroup.renderGroupChildren.length; i++) {
|
|
updateRenderGroupTransforms(renderGroup.renderGroupChildren[i], updateChildRenderGroups);
|
|
}
|
|
}
|
|
}
|
|
function updateRenderGroupTransform(renderGroup) {
|
|
const root = renderGroup.root;
|
|
let worldAlpha;
|
|
if (renderGroup.renderGroupParent) {
|
|
const renderGroupParent = renderGroup.renderGroupParent;
|
|
renderGroup.worldTransform.appendFrom(
|
|
root.relativeGroupTransform,
|
|
renderGroupParent.worldTransform
|
|
);
|
|
renderGroup.worldColor = mixColors(
|
|
root.groupColor,
|
|
renderGroupParent.worldColor
|
|
);
|
|
worldAlpha = root.groupAlpha * renderGroupParent.worldAlpha;
|
|
} else {
|
|
renderGroup.worldTransform.copyFrom(root.localTransform);
|
|
renderGroup.worldColor = root.localColor;
|
|
worldAlpha = root.localAlpha;
|
|
}
|
|
worldAlpha = worldAlpha < 0 ? 0 : worldAlpha > 1 ? 1 : worldAlpha;
|
|
renderGroup.worldAlpha = worldAlpha;
|
|
renderGroup.worldColorAlpha = renderGroup.worldColor + ((worldAlpha * 255 | 0) << 24);
|
|
}
|
|
function updateTransformAndChildren(container, updateTick, updateFlags) {
|
|
if (updateTick === container.updateTick)
|
|
return;
|
|
container.updateTick = updateTick;
|
|
container.didChange = false;
|
|
const localTransform = container.localTransform;
|
|
container.updateLocalTransform();
|
|
const parent = container.parent;
|
|
if (parent && !parent.renderGroup) {
|
|
updateFlags = updateFlags | container._updateFlags;
|
|
container.relativeGroupTransform.appendFrom(
|
|
localTransform,
|
|
parent.relativeGroupTransform
|
|
);
|
|
if (updateFlags & UPDATE_BLEND_COLOR_VISIBLE) {
|
|
updateColorBlendVisibility(container, parent, updateFlags);
|
|
}
|
|
} else {
|
|
updateFlags = container._updateFlags;
|
|
container.relativeGroupTransform.copyFrom(localTransform);
|
|
if (updateFlags & UPDATE_BLEND_COLOR_VISIBLE) {
|
|
updateColorBlendVisibility(container, tempContainer, updateFlags);
|
|
}
|
|
}
|
|
if (!container.renderGroup) {
|
|
const children = container.children;
|
|
const length = children.length;
|
|
for (let i = 0; i < length; i++) {
|
|
updateTransformAndChildren(children[i], updateTick, updateFlags);
|
|
}
|
|
const renderGroup = container.parentRenderGroup;
|
|
if (container.renderPipeId && !renderGroup.structureDidChange) {
|
|
renderGroup.updateRenderable(container);
|
|
}
|
|
}
|
|
}
|
|
function updateColorBlendVisibility(container, parent, updateFlags) {
|
|
if (updateFlags & UPDATE_COLOR) {
|
|
container.groupColor = mixColors(
|
|
container.localColor,
|
|
parent.groupColor
|
|
);
|
|
let groupAlpha = container.localAlpha * parent.groupAlpha;
|
|
groupAlpha = groupAlpha < 0 ? 0 : groupAlpha > 1 ? 1 : groupAlpha;
|
|
container.groupAlpha = groupAlpha;
|
|
container.groupColorAlpha = container.groupColor + ((groupAlpha * 255 | 0) << 24);
|
|
}
|
|
if (updateFlags & UPDATE_BLEND) {
|
|
container.groupBlendMode = container.localBlendMode === "inherit" ? parent.groupBlendMode : container.localBlendMode;
|
|
}
|
|
if (updateFlags & UPDATE_VISIBLE) {
|
|
container.globalDisplayStatus = container.localDisplayStatus & parent.globalDisplayStatus;
|
|
}
|
|
container._updateFlags = 0;
|
|
}
|
|
|
|
"use strict";
|
|
function validateRenderables(renderGroup, renderPipes) {
|
|
const { list, index } = renderGroup.childrenRenderablesToUpdate;
|
|
let rebuildRequired = false;
|
|
for (let i = 0; i < index; i++) {
|
|
const container = list[i];
|
|
const renderable = container;
|
|
const pipe = renderPipes[renderable.renderPipeId];
|
|
rebuildRequired = pipe.validateRenderable(container);
|
|
if (rebuildRequired) {
|
|
break;
|
|
}
|
|
}
|
|
renderGroup.structureDidChange = rebuildRequired;
|
|
return rebuildRequired;
|
|
}
|
|
|
|
"use strict";
|
|
const tempMatrix$1 = new Matrix();
|
|
class RenderGroupSystem {
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
}
|
|
render({ container, transform }) {
|
|
container.isRenderGroup = true;
|
|
const parent = container.parent;
|
|
const renderGroupParent = container.renderGroup.renderGroupParent;
|
|
container.parent = null;
|
|
container.renderGroup.renderGroupParent = null;
|
|
const renderer = this._renderer;
|
|
const renderGroups = collectRenderGroups(container.renderGroup, []);
|
|
let originalLocalTransform = tempMatrix$1;
|
|
if (transform) {
|
|
originalLocalTransform = originalLocalTransform.copyFrom(container.renderGroup.localTransform);
|
|
container.renderGroup.localTransform.copyFrom(transform);
|
|
}
|
|
const renderPipes = renderer.renderPipes;
|
|
for (let i = 0; i < renderGroups.length; i++) {
|
|
const renderGroup = renderGroups[i];
|
|
renderGroup.runOnRender();
|
|
renderGroup.instructionSet.renderPipes = renderPipes;
|
|
if (!renderGroup.structureDidChange) {
|
|
validateRenderables(renderGroup, renderPipes);
|
|
} else {
|
|
clearList(renderGroup.childrenRenderablesToUpdate.list, 0);
|
|
}
|
|
updateRenderGroupTransforms(renderGroup);
|
|
if (renderGroup.structureDidChange) {
|
|
renderGroup.structureDidChange = false;
|
|
buildInstructions(renderGroup, renderer);
|
|
} else {
|
|
updateRenderables(renderGroup);
|
|
}
|
|
renderGroup.childrenRenderablesToUpdate.index = 0;
|
|
renderer.renderPipes.batch.upload(renderGroup.instructionSet);
|
|
}
|
|
renderer.globalUniforms.start({
|
|
worldTransformMatrix: transform ? container.renderGroup.localTransform : container.renderGroup.worldTransform,
|
|
worldColor: container.renderGroup.worldColorAlpha
|
|
});
|
|
executeInstructions(container.renderGroup, renderPipes);
|
|
if (renderPipes.uniformBatch) {
|
|
renderPipes.uniformBatch.renderEnd();
|
|
}
|
|
if (transform) {
|
|
container.renderGroup.localTransform.copyFrom(originalLocalTransform);
|
|
}
|
|
container.parent = parent;
|
|
container.renderGroup.renderGroupParent = renderGroupParent;
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
RenderGroupSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem,
|
|
ExtensionType.CanvasSystem
|
|
],
|
|
name: "renderGroup"
|
|
};
|
|
function updateRenderables(renderGroup) {
|
|
const { list, index } = renderGroup.childrenRenderablesToUpdate;
|
|
for (let i = 0; i < index; i++) {
|
|
const container = list[i];
|
|
if (container.didViewUpdate) {
|
|
renderGroup.updateRenderable(container);
|
|
}
|
|
}
|
|
clearList(list, index);
|
|
}
|
|
|
|
"use strict";
|
|
class SpritePipe {
|
|
constructor(renderer) {
|
|
this._gpuSpriteHash = /* @__PURE__ */ Object.create(null);
|
|
this._destroyRenderableBound = this.destroyRenderable.bind(this);
|
|
this._renderer = renderer;
|
|
}
|
|
addRenderable(sprite, instructionSet) {
|
|
const gpuSprite = this._getGpuSprite(sprite);
|
|
if (sprite._didSpriteUpdate)
|
|
this._updateBatchableSprite(sprite, gpuSprite);
|
|
this._renderer.renderPipes.batch.addToBatch(gpuSprite, instructionSet);
|
|
}
|
|
updateRenderable(sprite) {
|
|
const gpuSprite = this._gpuSpriteHash[sprite.uid];
|
|
if (sprite._didSpriteUpdate)
|
|
this._updateBatchableSprite(sprite, gpuSprite);
|
|
gpuSprite._batcher.updateElement(gpuSprite);
|
|
}
|
|
validateRenderable(sprite) {
|
|
const texture = sprite._texture;
|
|
const gpuSprite = this._getGpuSprite(sprite);
|
|
if (gpuSprite.texture._source !== texture._source) {
|
|
return !gpuSprite._batcher.checkAndUpdateTexture(gpuSprite, texture);
|
|
}
|
|
return false;
|
|
}
|
|
destroyRenderable(sprite) {
|
|
const batchableSprite = this._gpuSpriteHash[sprite.uid];
|
|
BigPool.return(batchableSprite);
|
|
this._gpuSpriteHash[sprite.uid] = null;
|
|
sprite.off("destroyed", this._destroyRenderableBound);
|
|
}
|
|
_updateBatchableSprite(sprite, batchableSprite) {
|
|
sprite._didSpriteUpdate = false;
|
|
batchableSprite.bounds = sprite.bounds;
|
|
batchableSprite.texture = sprite._texture;
|
|
}
|
|
_getGpuSprite(sprite) {
|
|
return this._gpuSpriteHash[sprite.uid] || this._initGPUSprite(sprite);
|
|
}
|
|
_initGPUSprite(sprite) {
|
|
const batchableSprite = BigPool.get(BatchableSprite);
|
|
batchableSprite.renderable = sprite;
|
|
batchableSprite.transform = sprite.groupTransform;
|
|
batchableSprite.texture = sprite._texture;
|
|
batchableSprite.bounds = sprite.bounds;
|
|
batchableSprite.roundPixels = this._renderer._roundPixels | sprite._roundPixels;
|
|
this._gpuSpriteHash[sprite.uid] = batchableSprite;
|
|
sprite._didSpriteUpdate = false;
|
|
sprite.on("destroyed", this._destroyRenderableBound);
|
|
return batchableSprite;
|
|
}
|
|
destroy() {
|
|
for (const i in this._gpuSpriteHash) {
|
|
BigPool.return(this._gpuSpriteHash[i]);
|
|
}
|
|
this._gpuSpriteHash = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
SpritePipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "sprite"
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$f = Object.defineProperty;
|
|
var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$f = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$f = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$f.call(b, prop))
|
|
__defNormalProp$f(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$f)
|
|
for (var prop of __getOwnPropSymbols$f(b)) {
|
|
if (__propIsEnum$f.call(b, prop))
|
|
__defNormalProp$f(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _BackgroundSystem = class _BackgroundSystem {
|
|
constructor() {
|
|
this.clearBeforeRender = true;
|
|
this._backgroundColor = new Color(0);
|
|
this.color = this._backgroundColor;
|
|
this.alpha = 1;
|
|
}
|
|
/**
|
|
* initiates the background system
|
|
* @param options - the options for the background colors
|
|
*/
|
|
init(options) {
|
|
options = __spreadValues$f(__spreadValues$f({}, _BackgroundSystem.defaultOptions), options);
|
|
this.clearBeforeRender = options.clearBeforeRender;
|
|
this.color = options.background || options.backgroundColor || this._backgroundColor;
|
|
this.alpha = options.backgroundAlpha;
|
|
this._backgroundColor.setAlpha(options.backgroundAlpha);
|
|
}
|
|
/** The background color to fill if not transparent */
|
|
get color() {
|
|
return this._backgroundColor;
|
|
}
|
|
set color(value) {
|
|
this._backgroundColor.setValue(value);
|
|
}
|
|
/** The background color alpha. Setting this to 0 will make the canvas transparent. */
|
|
get alpha() {
|
|
return this._backgroundColor.alpha;
|
|
}
|
|
set alpha(value) {
|
|
this._backgroundColor.setAlpha(value);
|
|
}
|
|
/** The background color as an [R, G, B, A] array. */
|
|
get colorRgba() {
|
|
return this._backgroundColor.toArray();
|
|
}
|
|
/**
|
|
* destroys the background system
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
destroy() {
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_BackgroundSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem,
|
|
ExtensionType.CanvasSystem
|
|
],
|
|
name: "background",
|
|
priority: 0
|
|
};
|
|
/** default options used by the system */
|
|
_BackgroundSystem.defaultOptions = {
|
|
/**
|
|
* {@link WebGLOptions.backgroundAlpha}
|
|
* @default 1
|
|
*/
|
|
backgroundAlpha: 1,
|
|
/**
|
|
* {@link WebGLOptions.backgroundColor}
|
|
* @default 0x000000
|
|
*/
|
|
backgroundColor: 0,
|
|
/**
|
|
* {@link WebGLOptions.clearBeforeRender}
|
|
* @default true
|
|
*/
|
|
clearBeforeRender: true
|
|
};
|
|
let BackgroundSystem = _BackgroundSystem;
|
|
|
|
"use strict";
|
|
const BLEND_MODE_FILTERS = {};
|
|
extensions.handle(ExtensionType.BlendMode, (value) => {
|
|
if (!value.name) {
|
|
throw new Error("BlendMode extension must have a name property");
|
|
}
|
|
BLEND_MODE_FILTERS[value.name] = value.ref;
|
|
}, (value) => {
|
|
delete BLEND_MODE_FILTERS[value.name];
|
|
});
|
|
class BlendModePipe {
|
|
constructor(renderer) {
|
|
this._isAdvanced = false;
|
|
this._filterHash = /* @__PURE__ */ Object.create(null);
|
|
this._renderer = renderer;
|
|
}
|
|
/**
|
|
* This ensures that a blendMode switch is added to the instruction set if the blend mode has changed.
|
|
* @param renderable - The renderable we are adding to the instruction set
|
|
* @param blendMode - The blend mode of the renderable
|
|
* @param instructionSet - The instruction set we are adding to
|
|
*/
|
|
setBlendMode(renderable, blendMode, instructionSet) {
|
|
if (this._activeBlendMode === blendMode) {
|
|
if (this._isAdvanced)
|
|
this._renderableList.push(renderable);
|
|
return;
|
|
}
|
|
this._activeBlendMode = blendMode;
|
|
if (this._isAdvanced) {
|
|
this._endAdvancedBlendMode(instructionSet);
|
|
}
|
|
this._isAdvanced = !!BLEND_MODE_FILTERS[blendMode];
|
|
if (this._isAdvanced) {
|
|
this._beginAdvancedBlendMode(instructionSet);
|
|
this._renderableList.push(renderable);
|
|
}
|
|
}
|
|
_beginAdvancedBlendMode(instructionSet) {
|
|
this._renderer.renderPipes.batch.break(instructionSet);
|
|
const blendMode = this._activeBlendMode;
|
|
if (!BLEND_MODE_FILTERS[blendMode]) {
|
|
warn(`Unable to assign BlendMode: '${blendMode}'. You may want to include: import 'pixi.js/advanced-blend-modes'`);
|
|
return;
|
|
}
|
|
let filterEffect = this._filterHash[blendMode];
|
|
if (!filterEffect) {
|
|
filterEffect = this._filterHash[blendMode] = new FilterEffect();
|
|
filterEffect.filters = [new BLEND_MODE_FILTERS[blendMode]()];
|
|
}
|
|
const instruction = {
|
|
renderPipeId: "filter",
|
|
action: "pushFilter",
|
|
renderables: [],
|
|
filterEffect,
|
|
canBundle: false
|
|
};
|
|
this._renderableList = instruction.renderables;
|
|
instructionSet.add(instruction);
|
|
}
|
|
_endAdvancedBlendMode(instructionSet) {
|
|
this._renderableList = null;
|
|
this._renderer.renderPipes.batch.break(instructionSet);
|
|
instructionSet.add({
|
|
renderPipeId: "filter",
|
|
action: "popFilter",
|
|
canBundle: false
|
|
});
|
|
}
|
|
/**
|
|
* called when the instruction build process is starting this will reset internally to the default blend mode
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
buildStart() {
|
|
this._isAdvanced = false;
|
|
}
|
|
/**
|
|
* called when the instruction build process is finished, ensuring that if there is an advanced blend mode
|
|
* active, we add the final render instructions added to the instruction set
|
|
* @param instructionSet - The instruction set we are adding to
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
buildEnd(instructionSet) {
|
|
if (this._isAdvanced) {
|
|
this._endAdvancedBlendMode(instructionSet);
|
|
}
|
|
}
|
|
/**
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
destroy() {
|
|
this._renderer = null;
|
|
this._renderableList = null;
|
|
for (const i in this._filterHash) {
|
|
this._filterHash[i].destroy();
|
|
}
|
|
this._filterHash = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
BlendModePipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGLPipes,
|
|
ExtensionType.WebGPUPipes,
|
|
ExtensionType.CanvasPipes
|
|
],
|
|
name: "blendMode"
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$e = Object.defineProperty;
|
|
var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$e = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$e = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$e.call(b, prop))
|
|
__defNormalProp$e(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$e)
|
|
for (var prop of __getOwnPropSymbols$e(b)) {
|
|
if (__propIsEnum$e.call(b, prop))
|
|
__defNormalProp$e(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const imageTypes = {
|
|
png: "image/png",
|
|
jpg: "image/jpeg",
|
|
webp: "image/webp"
|
|
};
|
|
const _ExtractSystem = class _ExtractSystem {
|
|
/** @param renderer - The renderer this System works for. */
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
}
|
|
_normalizeOptions(options, defaults = {}) {
|
|
if (options instanceof Container || options instanceof Texture) {
|
|
return __spreadValues$e({
|
|
target: options
|
|
}, defaults);
|
|
}
|
|
return __spreadValues$e(__spreadValues$e({}, defaults), options);
|
|
}
|
|
/**
|
|
* Will return a HTML Image of the target
|
|
* @param options - The options for creating the image, or the target to extract
|
|
* @returns - HTML Image of the target
|
|
*/
|
|
async image(options) {
|
|
const image = new Image();
|
|
image.src = await this.base64(options);
|
|
return image;
|
|
}
|
|
/**
|
|
* Will return a base64 encoded string of this target. It works by calling
|
|
* `Extract.canvas` and then running toDataURL on that.
|
|
* @param options - The options for creating the image, or the target to extract
|
|
*/
|
|
async base64(options) {
|
|
options = this._normalizeOptions(
|
|
options,
|
|
_ExtractSystem.defaultImageOptions
|
|
);
|
|
const { format, quality } = options;
|
|
const canvas = this.canvas(options);
|
|
if (canvas.toBlob !== void 0) {
|
|
return new Promise((resolve, reject) => {
|
|
canvas.toBlob((blob) => {
|
|
if (!blob) {
|
|
reject(new Error("ICanvas.toBlob failed!"));
|
|
return;
|
|
}
|
|
const reader = new FileReader();
|
|
reader.onload = () => resolve(reader.result);
|
|
reader.onerror = reject;
|
|
reader.readAsDataURL(blob);
|
|
}, imageTypes[format], quality);
|
|
});
|
|
}
|
|
if (canvas.toDataURL !== void 0) {
|
|
return canvas.toDataURL(imageTypes[format], quality);
|
|
}
|
|
if (canvas.convertToBlob !== void 0) {
|
|
const blob = await canvas.convertToBlob({ type: imageTypes[format], quality });
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => resolve(reader.result);
|
|
reader.onerror = reject;
|
|
reader.readAsDataURL(blob);
|
|
});
|
|
}
|
|
throw new Error("Extract.base64() requires ICanvas.toDataURL, ICanvas.toBlob, or ICanvas.convertToBlob to be implemented");
|
|
}
|
|
/**
|
|
* Creates a Canvas element, renders this target to it and then returns it.
|
|
* @param options - The options for creating the canvas, or the target to extract
|
|
* @returns - A Canvas element with the texture rendered on.
|
|
*/
|
|
canvas(options) {
|
|
options = this._normalizeOptions(options);
|
|
const target = options.target;
|
|
const renderer = this._renderer;
|
|
if (target instanceof Texture) {
|
|
return renderer.texture.generateCanvas(target);
|
|
}
|
|
const texture = renderer.textureGenerator.generateTexture(options);
|
|
const canvas = renderer.texture.generateCanvas(texture);
|
|
texture.destroy();
|
|
return canvas;
|
|
}
|
|
/**
|
|
* Will return a one-dimensional array containing the pixel data of the entire texture in RGBA
|
|
* order, with integer values between 0 and 255 (included).
|
|
* @param options - The options for extracting the image, or the target to extract
|
|
* @returns - One-dimensional array containing the pixel data of the entire texture
|
|
*/
|
|
pixels(options) {
|
|
options = this._normalizeOptions(options);
|
|
const target = options.target;
|
|
const renderer = this._renderer;
|
|
const texture = target instanceof Texture ? target : renderer.textureGenerator.generateTexture(options);
|
|
const pixelInfo = renderer.texture.getPixels(texture);
|
|
if (target instanceof Container) {
|
|
texture.destroy();
|
|
}
|
|
return pixelInfo;
|
|
}
|
|
/**
|
|
* Will return a texture of the target
|
|
* @param options - The options for creating the texture, or the target to extract
|
|
* @returns - A texture of the target
|
|
*/
|
|
texture(options) {
|
|
options = this._normalizeOptions(options);
|
|
if (options.target instanceof Texture)
|
|
return options.target;
|
|
return this._renderer.textureGenerator.generateTexture(options);
|
|
}
|
|
/**
|
|
* Will extract a HTMLImage of the target and download it
|
|
* @param options - The options for downloading and extracting the image, or the target to extract
|
|
*/
|
|
download(options) {
|
|
var _a;
|
|
options = this._normalizeOptions(options);
|
|
const canvas = this.canvas(options);
|
|
const link = document.createElement("a");
|
|
link.download = (_a = options.filename) != null ? _a : "image.png";
|
|
link.href = canvas.toDataURL("image/png");
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
/**
|
|
* Logs the target to the console as an image. This is a useful way to debug what's happening in the renderer.
|
|
* @param options - The options for logging the image, or the target to log
|
|
*/
|
|
log(options) {
|
|
var _a;
|
|
const width = (_a = options.width) != null ? _a : 200;
|
|
options = this._normalizeOptions(options);
|
|
const canvas = this.canvas(options);
|
|
const base64 = canvas.toDataURL();
|
|
console.log(`[Pixi Texture] ${canvas.width}px ${canvas.height}px`);
|
|
const style = [
|
|
"font-size: 1px;",
|
|
`padding: ${width}px ${300}px;`,
|
|
`background: url(${base64}) no-repeat;`,
|
|
"background-size: contain;"
|
|
].join(" ");
|
|
console.log("%c ", style);
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_ExtractSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "extract"
|
|
};
|
|
/** Default options for creating an image. */
|
|
_ExtractSystem.defaultImageOptions = {
|
|
/** The format of the image. */
|
|
format: "png",
|
|
/** The quality of the image. */
|
|
quality: 1
|
|
};
|
|
let ExtractSystem = _ExtractSystem;
|
|
|
|
"use strict";
|
|
class RenderTexture extends Texture {
|
|
static create(options) {
|
|
return new RenderTexture({
|
|
source: new TextureSource(options)
|
|
});
|
|
}
|
|
/**
|
|
* Resizes the render texture.
|
|
* @param width - The new width of the render texture.
|
|
* @param height - The new height of the render texture.
|
|
* @param resolution - The new resolution of the render texture.
|
|
* @returns This texture.
|
|
*/
|
|
resize(width, height, resolution) {
|
|
this.source.resize(width, height, resolution);
|
|
return this;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$d = Object.defineProperty;
|
|
var __defProps$6 = Object.defineProperties;
|
|
var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$d = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$d = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$d.call(b, prop))
|
|
__defNormalProp$d(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$d)
|
|
for (var prop of __getOwnPropSymbols$d(b)) {
|
|
if (__propIsEnum$d.call(b, prop))
|
|
__defNormalProp$d(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
|
|
const tempRect = new Rectangle();
|
|
const tempBounds = new Bounds();
|
|
const noColor = [0, 0, 0, 0];
|
|
class GenerateTextureSystem {
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
}
|
|
/**
|
|
* A Useful function that returns a texture of the display object that can then be used to create sprites
|
|
* This can be quite useful if your container is complicated and needs to be reused multiple times.
|
|
* @param {GenerateTextureOptions | Container} options - Generate texture options.
|
|
* @param {Container} [options.container] - If not given, the renderer's resolution is used.
|
|
* @param {Rectangle} options.region - The region of the container, that shall be rendered,
|
|
* @param {number} [options.resolution] - The resolution of the texture being generated.
|
|
* if no region is specified, defaults to the local bounds of the container.
|
|
* @param {GenerateTextureSourceOptions} [options.textureSourceOptions] - Texture options for GPU.
|
|
* @returns a shiny new texture of the container passed in
|
|
*/
|
|
generateTexture(options) {
|
|
var _a;
|
|
if (options instanceof Container) {
|
|
options = {
|
|
target: options,
|
|
frame: void 0,
|
|
textureSourceOptions: {},
|
|
resolution: void 0
|
|
};
|
|
}
|
|
const resolution = options.resolution || this._renderer.resolution;
|
|
const antialias = options.antialias || this._renderer.view.antialias;
|
|
const container = options.target;
|
|
let clearColor = options.clearColor;
|
|
if (clearColor) {
|
|
const isRGBAArray = Array.isArray(clearColor) && clearColor.length === 4;
|
|
clearColor = isRGBAArray ? clearColor : Color.shared.setValue(clearColor).toArray();
|
|
} else {
|
|
clearColor = noColor;
|
|
}
|
|
const region = ((_a = options.frame) == null ? void 0 : _a.copyTo(tempRect)) || getLocalBounds(container, tempBounds).rectangle;
|
|
region.width = Math.max(region.width, 1 / resolution) | 0;
|
|
region.height = Math.max(region.height, 1 / resolution) | 0;
|
|
const target = RenderTexture.create(__spreadProps$6(__spreadValues$d({}, options.textureSourceOptions), {
|
|
width: region.width,
|
|
height: region.height,
|
|
resolution,
|
|
antialias
|
|
}));
|
|
const transform = Matrix.shared.translate(-region.x, -region.y);
|
|
this._renderer.render({
|
|
container,
|
|
transform,
|
|
target,
|
|
clearColor
|
|
});
|
|
target.source.updateMipmaps();
|
|
return target;
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GenerateTextureSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "textureGenerator"
|
|
};
|
|
|
|
"use strict";
|
|
class GlobalUniformSystem {
|
|
constructor(renderer) {
|
|
this._stackIndex = 0;
|
|
this._globalUniformDataStack = [];
|
|
this._uniformsPool = [];
|
|
this._activeUniforms = [];
|
|
this._bindGroupPool = [];
|
|
this._activeBindGroups = [];
|
|
this._renderer = renderer;
|
|
}
|
|
reset() {
|
|
this._stackIndex = 0;
|
|
for (let i = 0; i < this._activeUniforms.length; i++) {
|
|
this._uniformsPool.push(this._activeUniforms[i]);
|
|
}
|
|
for (let i = 0; i < this._activeBindGroups.length; i++) {
|
|
this._bindGroupPool.push(this._activeBindGroups[i]);
|
|
}
|
|
this._activeUniforms.length = 0;
|
|
this._activeBindGroups.length = 0;
|
|
}
|
|
start(options) {
|
|
this.reset();
|
|
this.push(options);
|
|
}
|
|
bind({
|
|
size,
|
|
projectionMatrix,
|
|
worldTransformMatrix,
|
|
worldColor,
|
|
offset
|
|
}) {
|
|
const renderTarget = this._renderer.renderTarget.renderTarget;
|
|
const currentGlobalUniformData = this._stackIndex ? this._globalUniformDataStack[this._stackIndex - 1] : {
|
|
projectionData: renderTarget,
|
|
worldTransformMatrix: new Matrix(),
|
|
worldColor: 4294967295,
|
|
offset: new Point()
|
|
};
|
|
const globalUniformData = {
|
|
projectionMatrix: projectionMatrix || this._renderer.renderTarget.projectionMatrix,
|
|
resolution: size || renderTarget.size,
|
|
worldTransformMatrix: worldTransformMatrix || currentGlobalUniformData.worldTransformMatrix,
|
|
worldColor: worldColor || currentGlobalUniformData.worldColor,
|
|
offset: offset || currentGlobalUniformData.offset,
|
|
bindGroup: null
|
|
};
|
|
const uniformGroup = this._uniformsPool.pop() || this._createUniforms();
|
|
this._activeUniforms.push(uniformGroup);
|
|
const uniforms = uniformGroup.uniforms;
|
|
uniforms.uProjectionMatrix = globalUniformData.projectionMatrix;
|
|
uniforms.uResolution = globalUniformData.resolution;
|
|
uniforms.uWorldTransformMatrix.copyFrom(globalUniformData.worldTransformMatrix);
|
|
uniforms.uWorldTransformMatrix.tx -= globalUniformData.offset.x;
|
|
uniforms.uWorldTransformMatrix.ty -= globalUniformData.offset.y;
|
|
color32BitToUniform(
|
|
globalUniformData.worldColor,
|
|
uniforms.uWorldColorAlpha,
|
|
0
|
|
);
|
|
uniformGroup.update();
|
|
let bindGroup;
|
|
if (this._renderer.renderPipes.uniformBatch) {
|
|
bindGroup = this._renderer.renderPipes.uniformBatch.getUniformBindGroup(uniformGroup, false);
|
|
} else {
|
|
bindGroup = this._bindGroupPool.pop() || new BindGroup();
|
|
this._activeBindGroups.push(bindGroup);
|
|
bindGroup.setResource(uniformGroup, 0);
|
|
}
|
|
globalUniformData.bindGroup = bindGroup;
|
|
this._currentGlobalUniformData = globalUniformData;
|
|
}
|
|
push(options) {
|
|
this.bind(options);
|
|
this._globalUniformDataStack[this._stackIndex++] = this._currentGlobalUniformData;
|
|
}
|
|
pop() {
|
|
this._currentGlobalUniformData = this._globalUniformDataStack[--this._stackIndex - 1];
|
|
if (this._renderer.type === RendererType.WEBGL) {
|
|
this._currentGlobalUniformData.bindGroup.resources[0].update();
|
|
}
|
|
}
|
|
get bindGroup() {
|
|
return this._currentGlobalUniformData.bindGroup;
|
|
}
|
|
get uniformGroup() {
|
|
return this._currentGlobalUniformData.bindGroup.resources[0];
|
|
}
|
|
_createUniforms() {
|
|
const globalUniforms = new UniformGroup({
|
|
uProjectionMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uWorldTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
// TODO - someone smart - set this to be a unorm8x4 rather than a vec4<f32>
|
|
uWorldColorAlpha: { value: new Float32Array(4), type: "vec4<f32>" },
|
|
uResolution: { value: [0, 0], type: "vec2<f32>" }
|
|
}, {
|
|
isStatic: true
|
|
});
|
|
return globalUniforms;
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GlobalUniformSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem,
|
|
ExtensionType.CanvasSystem
|
|
],
|
|
name: "globalUniforms"
|
|
};
|
|
|
|
"use strict";
|
|
let uid = 1;
|
|
class SchedulerSystem {
|
|
constructor() {
|
|
this._tasks = [];
|
|
}
|
|
/** Initializes the scheduler system and starts the ticker. */
|
|
init() {
|
|
Ticker.system.add(this._update, this);
|
|
}
|
|
/**
|
|
* Schedules a repeating task.
|
|
* @param func - The function to execute.
|
|
* @param duration - The interval duration in milliseconds.
|
|
* @returns The unique identifier for the scheduled task.
|
|
*/
|
|
repeat(func, duration) {
|
|
const id = uid++;
|
|
this._tasks.push({
|
|
func,
|
|
duration,
|
|
start: performance.now(),
|
|
last: performance.now(),
|
|
repeat: true,
|
|
id
|
|
});
|
|
return id;
|
|
}
|
|
/**
|
|
* Cancels a scheduled task.
|
|
* @param id - The unique identifier of the task to cancel.
|
|
*/
|
|
cancel(id) {
|
|
for (let i = 0; i < this._tasks.length; i++) {
|
|
if (this._tasks[i].id === id) {
|
|
this._tasks.splice(i, 1);
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Updates and executes the scheduled tasks.
|
|
* @private
|
|
*/
|
|
_update() {
|
|
const now = performance.now();
|
|
for (let i = 0; i < this._tasks.length; i++) {
|
|
const task = this._tasks[i];
|
|
if (now - task.last >= task.duration) {
|
|
const elapsed = now - task.start;
|
|
task.func(elapsed);
|
|
task.last = now;
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Destroys the scheduler system and removes all tasks.
|
|
* @internal
|
|
* @ignore
|
|
*/
|
|
destroy() {
|
|
Ticker.system.remove(this._update, this);
|
|
this._tasks.length = 0;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
SchedulerSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem,
|
|
ExtensionType.CanvasSystem
|
|
],
|
|
name: "scheduler",
|
|
priority: 0
|
|
};
|
|
|
|
"use strict";
|
|
let saidHello = false;
|
|
function sayHello(type) {
|
|
if (saidHello) {
|
|
return;
|
|
}
|
|
if (DOMAdapter.get().getNavigator().userAgent.toLowerCase().indexOf("chrome") > -1) {
|
|
const args = [
|
|
`%c %c %c %c %c PixiJS %c v${VERSION} (${type}) http://www.pixijs.com/
|
|
|
|
`,
|
|
"background: #E72264; padding:5px 0;",
|
|
"background: #6CA2EA; padding:5px 0;",
|
|
"background: #B5D33D; padding:5px 0;",
|
|
"background: #FED23F; padding:5px 0;",
|
|
"color: #FFFFFF; background: #E72264; padding:5px 0;",
|
|
"color: #E72264; background: #FFFFFF; padding:5px 0;"
|
|
];
|
|
globalThis.console.log(...args);
|
|
} else if (globalThis.console) {
|
|
globalThis.console.log(`PixiJS ${VERSION} - ${type} - http://www.pixijs.com/`);
|
|
}
|
|
saidHello = true;
|
|
}
|
|
|
|
"use strict";
|
|
class HelloSystem {
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
}
|
|
/**
|
|
* It all starts here! This initiates every system, passing in the options for any system by name.
|
|
* @param options - the config for the renderer and all its systems
|
|
*/
|
|
init(options) {
|
|
if (options.hello) {
|
|
let name = this._renderer.name;
|
|
if (this._renderer.type === RendererType.WEBGL) {
|
|
name += ` ${this._renderer.context.webGLVersion}`;
|
|
}
|
|
sayHello(name);
|
|
}
|
|
}
|
|
}
|
|
/** @ignore */
|
|
HelloSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem,
|
|
ExtensionType.CanvasSystem
|
|
],
|
|
name: "hello",
|
|
priority: -2
|
|
};
|
|
/** The default options for the system. */
|
|
HelloSystem.defaultOptions = {
|
|
/** {@link WebGLOptions.hello} */
|
|
hello: false
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$c = Object.defineProperty;
|
|
var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$c = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$c = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$c.call(b, prop))
|
|
__defNormalProp$c(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$c)
|
|
for (var prop of __getOwnPropSymbols$c(b)) {
|
|
if (__propIsEnum$c.call(b, prop))
|
|
__defNormalProp$c(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _RenderableGCSystem = class _RenderableGCSystem {
|
|
/** @param renderer - The renderer this System works for. */
|
|
constructor(renderer) {
|
|
this._managedRenderables = [];
|
|
this._renderer = renderer;
|
|
}
|
|
init(options) {
|
|
options = __spreadValues$c(__spreadValues$c({}, _RenderableGCSystem.defaultOptions), options);
|
|
this.maxUnusedTime = options.renderableGCMaxUnusedTime;
|
|
this._frequency = options.renderableGCFrequency;
|
|
this.enabled = options.renderableGCActive;
|
|
}
|
|
get enabled() {
|
|
return !!this._handler;
|
|
}
|
|
set enabled(value) {
|
|
if (this.enabled === value)
|
|
return;
|
|
if (value) {
|
|
this._handler = this._renderer.scheduler.repeat(
|
|
() => this.run(),
|
|
this._frequency
|
|
);
|
|
} else {
|
|
this._renderer.scheduler.cancel(this._handler);
|
|
}
|
|
}
|
|
prerender() {
|
|
this._now = performance.now();
|
|
}
|
|
addRenderable(renderable, instructionSet) {
|
|
if (!this.enabled)
|
|
return;
|
|
renderable._lastUsed = this._now;
|
|
if (renderable._lastInstructionTick === -1) {
|
|
this._managedRenderables.push(renderable);
|
|
renderable.once("destroyed", this._removeRenderable, this);
|
|
}
|
|
renderable._lastInstructionTick = instructionSet.tick;
|
|
}
|
|
/** Runs the scheduled garbage collection */
|
|
run() {
|
|
var _a, _b, _c;
|
|
const now = performance.now();
|
|
const managedRenderables = this._managedRenderables;
|
|
const renderPipes = this._renderer.renderPipes;
|
|
let offset = 0;
|
|
for (let i = 0; i < managedRenderables.length; i++) {
|
|
const renderable = managedRenderables[i];
|
|
if (renderable === null) {
|
|
offset++;
|
|
continue;
|
|
}
|
|
const renderGroup = (_a = renderable.renderGroup) != null ? _a : renderable.parentRenderGroup;
|
|
const currentIndex = (_c = (_b = renderGroup == null ? void 0 : renderGroup.instructionSet) == null ? void 0 : _b.tick) != null ? _c : -1;
|
|
if (renderable._lastInstructionTick !== currentIndex && now - renderable._lastUsed > this.maxUnusedTime) {
|
|
if (!renderable.destroyed) {
|
|
const rp = renderPipes;
|
|
rp[renderable.renderPipeId].destroyRenderable(renderable);
|
|
}
|
|
renderable._lastInstructionTick = -1;
|
|
offset++;
|
|
renderable.off("destroyed", this._removeRenderable, this);
|
|
} else {
|
|
managedRenderables[i - offset] = renderable;
|
|
}
|
|
}
|
|
managedRenderables.length = managedRenderables.length - offset;
|
|
}
|
|
destroy() {
|
|
this.enabled = false;
|
|
this._renderer = null;
|
|
this._managedRenderables.length = 0;
|
|
}
|
|
_removeRenderable(renderable) {
|
|
const index = this._managedRenderables.indexOf(renderable);
|
|
if (index >= 0) {
|
|
renderable.off("destroyed", this._removeRenderable, this);
|
|
this._managedRenderables[index] = null;
|
|
}
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_RenderableGCSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "renderableGC"
|
|
};
|
|
/** default options for the renderableGCSystem */
|
|
_RenderableGCSystem.defaultOptions = {
|
|
/**
|
|
* If set to true, this will enable the garbage collector on the GPU.
|
|
* @default true
|
|
*/
|
|
renderableGCActive: true,
|
|
/**
|
|
* The maximum idle frames before a texture is destroyed by garbage collection.
|
|
* @default 60 * 60
|
|
*/
|
|
renderableGCMaxUnusedTime: 6e4,
|
|
/**
|
|
* Frames between two garbage collections.
|
|
* @default 600
|
|
*/
|
|
renderableGCFrequency: 3e4
|
|
};
|
|
let RenderableGCSystem = _RenderableGCSystem;
|
|
|
|
"use strict";
|
|
var __defProp$b = Object.defineProperty;
|
|
var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$b = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$b = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$b.call(b, prop))
|
|
__defNormalProp$b(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$b)
|
|
for (var prop of __getOwnPropSymbols$b(b)) {
|
|
if (__propIsEnum$b.call(b, prop))
|
|
__defNormalProp$b(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _TextureGCSystem = class _TextureGCSystem {
|
|
/** @param renderer - The renderer this System works for. */
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
this.count = 0;
|
|
this.checkCount = 0;
|
|
}
|
|
init(options) {
|
|
var _a;
|
|
options = __spreadValues$b(__spreadValues$b({}, _TextureGCSystem.defaultOptions), options);
|
|
this.checkCountMax = options.textureGCCheckCountMax;
|
|
this.maxIdle = (_a = options.textureGCAMaxIdle) != null ? _a : options.textureGCMaxIdle;
|
|
this.active = options.textureGCActive;
|
|
}
|
|
/**
|
|
* Checks to see when the last time a texture was used.
|
|
* If the texture has not been used for a specified amount of time, it will be removed from the GPU.
|
|
*/
|
|
postrender() {
|
|
if (!this._renderer.renderingToScreen) {
|
|
return;
|
|
}
|
|
this.count++;
|
|
if (!this.active)
|
|
return;
|
|
this.checkCount++;
|
|
if (this.checkCount > this.checkCountMax) {
|
|
this.checkCount = 0;
|
|
this.run();
|
|
}
|
|
}
|
|
/**
|
|
* Checks to see when the last time a texture was used.
|
|
* If the texture has not been used for a specified amount of time, it will be removed from the GPU.
|
|
*/
|
|
run() {
|
|
const managedTextures = this._renderer.texture.managedTextures;
|
|
for (let i = 0; i < managedTextures.length; i++) {
|
|
const texture = managedTextures[i];
|
|
if (texture.autoGarbageCollect && texture.resource && texture._touched > -1 && this.count - texture._touched > this.maxIdle) {
|
|
texture._touched = -1;
|
|
texture.unload();
|
|
}
|
|
}
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_TextureGCSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "textureGC"
|
|
};
|
|
/** default options for the TextureGCSystem */
|
|
_TextureGCSystem.defaultOptions = {
|
|
/**
|
|
* If set to true, this will enable the garbage collector on the GPU.
|
|
* @default true
|
|
*/
|
|
textureGCActive: true,
|
|
/**
|
|
* @deprecated since 8.3.0
|
|
* @see {@link TextureGCSystem.textureGCMaxIdle}
|
|
*/
|
|
textureGCAMaxIdle: null,
|
|
/**
|
|
* The maximum idle frames before a texture is destroyed by garbage collection.
|
|
* @default 60 * 60
|
|
*/
|
|
textureGCMaxIdle: 60 * 60,
|
|
/**
|
|
* Frames between two garbage collections.
|
|
* @default 600
|
|
*/
|
|
textureGCCheckCountMax: 600
|
|
};
|
|
let TextureGCSystem = _TextureGCSystem;
|
|
|
|
"use strict";
|
|
var __defProp$a = Object.defineProperty;
|
|
var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$a = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$a = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$a.call(b, prop))
|
|
__defNormalProp$a(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$a)
|
|
for (var prop of __getOwnPropSymbols$a(b)) {
|
|
if (__propIsEnum$a.call(b, prop))
|
|
__defNormalProp$a(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _ViewSystem = class _ViewSystem {
|
|
/**
|
|
* Whether CSS dimensions of canvas view should be resized to screen dimensions automatically.
|
|
* @member {boolean}
|
|
*/
|
|
get autoDensity() {
|
|
return this.texture.source.autoDensity;
|
|
}
|
|
set autoDensity(value) {
|
|
this.texture.source.autoDensity = value;
|
|
}
|
|
/** The resolution / device pixel ratio of the renderer. */
|
|
get resolution() {
|
|
return this.texture.source._resolution;
|
|
}
|
|
set resolution(value) {
|
|
this.texture.source.resize(
|
|
this.texture.source.width,
|
|
this.texture.source.height,
|
|
value
|
|
);
|
|
}
|
|
/**
|
|
* initiates the view system
|
|
* @param options - the options for the view
|
|
*/
|
|
init(options) {
|
|
options = __spreadValues$a(__spreadValues$a({}, _ViewSystem.defaultOptions), options);
|
|
if (options.view) {
|
|
deprecation(v8_0_0, "ViewSystem.view has been renamed to ViewSystem.canvas");
|
|
options.canvas = options.view;
|
|
}
|
|
this.screen = new Rectangle(0, 0, options.width, options.height);
|
|
this.canvas = options.canvas || DOMAdapter.get().createCanvas();
|
|
this.antialias = !!options.antialias;
|
|
this.texture = getCanvasTexture(this.canvas, options);
|
|
this.renderTarget = new RenderTarget({
|
|
colorTextures: [this.texture],
|
|
depth: !!options.depth,
|
|
isRoot: true
|
|
});
|
|
this.texture.source.transparent = options.backgroundAlpha < 1;
|
|
this.resolution = options.resolution;
|
|
}
|
|
/**
|
|
* Resizes the screen and canvas to the specified dimensions.
|
|
* @param desiredScreenWidth - The new width of the screen.
|
|
* @param desiredScreenHeight - The new height of the screen.
|
|
* @param resolution
|
|
*/
|
|
resize(desiredScreenWidth, desiredScreenHeight, resolution) {
|
|
this.texture.source.resize(desiredScreenWidth, desiredScreenHeight, resolution);
|
|
this.screen.width = this.texture.frame.width;
|
|
this.screen.height = this.texture.frame.height;
|
|
}
|
|
/**
|
|
* Destroys this System and optionally removes the canvas from the dom.
|
|
* @param {options | false} options - The options for destroying the view, or "false".
|
|
* @param options.removeView - Whether to remove the view element from the DOM. Defaults to `false`.
|
|
*/
|
|
destroy(options = false) {
|
|
const removeView = typeof options === "boolean" ? options : !!(options == null ? void 0 : options.removeView);
|
|
if (removeView && this.canvas.parentNode) {
|
|
this.canvas.parentNode.removeChild(this.canvas);
|
|
}
|
|
}
|
|
};
|
|
/** @ignore */
|
|
_ViewSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGLSystem,
|
|
ExtensionType.WebGPUSystem,
|
|
ExtensionType.CanvasSystem
|
|
],
|
|
name: "view",
|
|
priority: 0
|
|
};
|
|
/** The default options for the view system. */
|
|
_ViewSystem.defaultOptions = {
|
|
/**
|
|
* {@link WebGLOptions.width}
|
|
* @default 800
|
|
*/
|
|
width: 800,
|
|
/**
|
|
* {@link WebGLOptions.height}
|
|
* @default 600
|
|
*/
|
|
height: 600,
|
|
/**
|
|
* {@link WebGLOptions.autoDensity}
|
|
* @default false
|
|
*/
|
|
autoDensity: false,
|
|
/**
|
|
* {@link WebGLOptions.antialias}
|
|
* @default false
|
|
*/
|
|
antialias: false
|
|
};
|
|
let ViewSystem = _ViewSystem;
|
|
|
|
"use strict";
|
|
const SharedSystems = [
|
|
BackgroundSystem,
|
|
GlobalUniformSystem,
|
|
HelloSystem,
|
|
ViewSystem,
|
|
RenderGroupSystem,
|
|
TextureGCSystem,
|
|
GenerateTextureSystem,
|
|
ExtractSystem,
|
|
RendererInitHook,
|
|
RenderableGCSystem,
|
|
SchedulerSystem
|
|
];
|
|
const SharedRenderPipes = [
|
|
BlendModePipe,
|
|
BatcherPipe,
|
|
SpritePipe,
|
|
RenderGroupPipe,
|
|
AlphaMaskPipe,
|
|
StencilMaskPipe,
|
|
ColorMaskPipe,
|
|
CustomRenderPipe
|
|
];
|
|
|
|
"use strict";
|
|
const DefaultWebGLSystems = [
|
|
...SharedSystems,
|
|
GlUboSystem,
|
|
GlBackBufferSystem,
|
|
GlContextSystem,
|
|
GlBufferSystem,
|
|
GlTextureSystem,
|
|
GlRenderTargetSystem,
|
|
GlGeometrySystem,
|
|
GlUniformGroupSystem,
|
|
GlShaderSystem,
|
|
GlEncoderSystem,
|
|
GlStateSystem,
|
|
GlStencilSystem,
|
|
GlColorMaskSystem
|
|
];
|
|
const DefaultWebGLPipes = [...SharedRenderPipes];
|
|
const DefaultWebGLAdapters = [GlBatchAdaptor, GlMeshAdaptor, GlGraphicsAdaptor];
|
|
const systems$1 = [];
|
|
const renderPipes$1 = [];
|
|
const renderPipeAdaptors$1 = [];
|
|
extensions.handleByNamedList(ExtensionType.WebGLSystem, systems$1);
|
|
extensions.handleByNamedList(ExtensionType.WebGLPipes, renderPipes$1);
|
|
extensions.handleByNamedList(ExtensionType.WebGLPipesAdaptor, renderPipeAdaptors$1);
|
|
extensions.add(...DefaultWebGLSystems, ...DefaultWebGLPipes, ...DefaultWebGLAdapters);
|
|
class WebGLRenderer extends AbstractRenderer {
|
|
constructor() {
|
|
const systemConfig = {
|
|
name: "webgl",
|
|
type: RendererType.WEBGL,
|
|
systems: systems$1,
|
|
renderPipes: renderPipes$1,
|
|
renderPipeAdaptors: renderPipeAdaptors$1
|
|
};
|
|
super(systemConfig);
|
|
}
|
|
}
|
|
|
|
var WebGLRenderer$1 = {
|
|
__proto__: null,
|
|
WebGLRenderer: WebGLRenderer
|
|
};
|
|
|
|
"use strict";
|
|
class BindGroupSystem {
|
|
constructor(renderer) {
|
|
this._hash = /* @__PURE__ */ Object.create(null);
|
|
this._renderer = renderer;
|
|
}
|
|
contextChange(gpu) {
|
|
this._gpu = gpu;
|
|
}
|
|
getBindGroup(bindGroup, program, groupIndex) {
|
|
bindGroup._updateKey();
|
|
const gpuBindGroup = this._hash[bindGroup._key] || this._createBindGroup(bindGroup, program, groupIndex);
|
|
return gpuBindGroup;
|
|
}
|
|
_createBindGroup(group, program, groupIndex) {
|
|
var _a;
|
|
const device = this._gpu.device;
|
|
const groupLayout = program.layout[groupIndex];
|
|
const entries = [];
|
|
const renderer = this._renderer;
|
|
for (const j in groupLayout) {
|
|
const resource = (_a = group.resources[j]) != null ? _a : group.resources[groupLayout[j]];
|
|
let gpuResource;
|
|
if (resource._resourceType === "uniformGroup") {
|
|
const uniformGroup = resource;
|
|
renderer.ubo.updateUniformGroup(uniformGroup);
|
|
const buffer = uniformGroup.buffer;
|
|
gpuResource = {
|
|
buffer: renderer.buffer.getGPUBuffer(buffer),
|
|
offset: 0,
|
|
size: buffer.descriptor.size
|
|
};
|
|
} else if (resource._resourceType === "buffer") {
|
|
const buffer = resource;
|
|
gpuResource = {
|
|
buffer: renderer.buffer.getGPUBuffer(buffer),
|
|
offset: 0,
|
|
size: buffer.descriptor.size
|
|
};
|
|
} else if (resource._resourceType === "bufferResource") {
|
|
const bufferResource = resource;
|
|
gpuResource = {
|
|
buffer: renderer.buffer.getGPUBuffer(bufferResource.buffer),
|
|
offset: bufferResource.offset,
|
|
size: bufferResource.size
|
|
};
|
|
} else if (resource._resourceType === "textureSampler") {
|
|
const sampler = resource;
|
|
gpuResource = renderer.texture.getGpuSampler(sampler);
|
|
} else if (resource._resourceType === "textureSource") {
|
|
const texture = resource;
|
|
gpuResource = renderer.texture.getGpuSource(texture).createView({});
|
|
}
|
|
entries.push({
|
|
binding: groupLayout[j],
|
|
resource: gpuResource
|
|
});
|
|
}
|
|
const layout = renderer.shader.getProgramData(program).bindGroups[groupIndex];
|
|
const gpuBindGroup = device.createBindGroup({
|
|
layout,
|
|
entries
|
|
});
|
|
this._hash[group._key] = gpuBindGroup;
|
|
return gpuBindGroup;
|
|
}
|
|
destroy() {
|
|
for (const key of Object.keys(this._hash)) {
|
|
this._hash[key] = null;
|
|
}
|
|
this._hash = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
BindGroupSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "bindGroup"
|
|
};
|
|
|
|
"use strict";
|
|
class GpuBufferSystem {
|
|
constructor() {
|
|
this._gpuBuffers = /* @__PURE__ */ Object.create(null);
|
|
this._managedBuffers = [];
|
|
}
|
|
contextChange(gpu) {
|
|
this._gpu = gpu;
|
|
}
|
|
getGPUBuffer(buffer) {
|
|
return this._gpuBuffers[buffer.uid] || this.createGPUBuffer(buffer);
|
|
}
|
|
updateBuffer(buffer) {
|
|
const gpuBuffer = this._gpuBuffers[buffer.uid] || this.createGPUBuffer(buffer);
|
|
const data = buffer.data;
|
|
if (buffer._updateID && data) {
|
|
buffer._updateID = 0;
|
|
this._gpu.device.queue.writeBuffer(
|
|
gpuBuffer,
|
|
0,
|
|
data.buffer,
|
|
0,
|
|
// round to the nearest 4 bytes
|
|
(buffer._updateSize || data.byteLength) + 3 & ~3
|
|
);
|
|
}
|
|
return gpuBuffer;
|
|
}
|
|
/** dispose all WebGL resources of all managed buffers */
|
|
destroyAll() {
|
|
for (const id in this._gpuBuffers) {
|
|
this._gpuBuffers[id].destroy();
|
|
}
|
|
this._gpuBuffers = {};
|
|
}
|
|
createGPUBuffer(buffer) {
|
|
if (!this._gpuBuffers[buffer.uid]) {
|
|
buffer.on("update", this.updateBuffer, this);
|
|
buffer.on("change", this.onBufferChange, this);
|
|
buffer.on("destroy", this.onBufferDestroy, this);
|
|
this._managedBuffers.push(buffer);
|
|
}
|
|
const gpuBuffer = this._gpu.device.createBuffer(buffer.descriptor);
|
|
buffer._updateID = 0;
|
|
if (buffer.data) {
|
|
fastCopy(buffer.data.buffer, gpuBuffer.getMappedRange());
|
|
gpuBuffer.unmap();
|
|
}
|
|
this._gpuBuffers[buffer.uid] = gpuBuffer;
|
|
return gpuBuffer;
|
|
}
|
|
onBufferChange(buffer) {
|
|
const gpuBuffer = this._gpuBuffers[buffer.uid];
|
|
gpuBuffer.destroy();
|
|
buffer._updateID = 0;
|
|
this._gpuBuffers[buffer.uid] = this.createGPUBuffer(buffer);
|
|
}
|
|
/**
|
|
* Disposes buffer
|
|
* @param buffer - buffer with data
|
|
*/
|
|
onBufferDestroy(buffer) {
|
|
this._managedBuffers.splice(this._managedBuffers.indexOf(buffer), 1);
|
|
this._destroyBuffer(buffer);
|
|
}
|
|
destroy() {
|
|
this._managedBuffers.forEach((buffer) => this._destroyBuffer(buffer));
|
|
this._managedBuffers = null;
|
|
this._gpuBuffers = null;
|
|
}
|
|
_destroyBuffer(buffer) {
|
|
const gpuBuffer = this._gpuBuffers[buffer.uid];
|
|
gpuBuffer.destroy();
|
|
buffer.off("update", this.updateBuffer, this);
|
|
buffer.off("change", this.onBufferChange, this);
|
|
buffer.off("destroy", this.onBufferDestroy, this);
|
|
this._gpuBuffers[buffer.uid] = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuBufferSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "buffer"
|
|
};
|
|
|
|
"use strict";
|
|
function GpuReadBuffer(buffer, renderer) {
|
|
const bufferSize = buffer.descriptor.size;
|
|
const device = renderer.gpu.device;
|
|
const stagingBuffer = new Buffer({
|
|
data: new Float32Array(24e5),
|
|
usage: BufferUsage.MAP_READ | BufferUsage.COPY_DST
|
|
});
|
|
const stagingGPUBuffer = renderer.buffer.createGPUBuffer(stagingBuffer);
|
|
const commandEncoder = device.createCommandEncoder();
|
|
commandEncoder.copyBufferToBuffer(
|
|
renderer.buffer.getGPUBuffer(buffer),
|
|
0,
|
|
// Source offset
|
|
stagingGPUBuffer,
|
|
0,
|
|
// Destination offset
|
|
bufferSize
|
|
);
|
|
device.queue.submit([commandEncoder.finish()]);
|
|
void stagingGPUBuffer.mapAsync(
|
|
GPUMapMode.READ,
|
|
0,
|
|
// Offset
|
|
bufferSize
|
|
// Length
|
|
).then(() => {
|
|
stagingGPUBuffer.getMappedRange(0, bufferSize);
|
|
stagingGPUBuffer.unmap();
|
|
});
|
|
}
|
|
|
|
"use strict";
|
|
class UboBatch {
|
|
constructor({ minUniformOffsetAlignment }) {
|
|
this._minUniformOffsetAlignment = 256;
|
|
this.byteIndex = 0;
|
|
this._minUniformOffsetAlignment = minUniformOffsetAlignment;
|
|
this.data = new Float32Array(65535);
|
|
}
|
|
clear() {
|
|
this.byteIndex = 0;
|
|
}
|
|
addEmptyGroup(size) {
|
|
if (size > this._minUniformOffsetAlignment / 4) {
|
|
throw new Error(`UniformBufferBatch: array is too large: ${size * 4}`);
|
|
}
|
|
const start = this.byteIndex;
|
|
let newSize = start + size * 4;
|
|
newSize = Math.ceil(newSize / this._minUniformOffsetAlignment) * this._minUniformOffsetAlignment;
|
|
if (newSize > this.data.length * 4) {
|
|
throw new Error("UniformBufferBatch: ubo batch got too big");
|
|
}
|
|
this.byteIndex = newSize;
|
|
return start;
|
|
}
|
|
addGroup(array) {
|
|
const offset = this.addEmptyGroup(array.length);
|
|
for (let i = 0; i < array.length; i++) {
|
|
this.data[offset / 4 + i] = array[i];
|
|
}
|
|
return offset;
|
|
}
|
|
destroy() {
|
|
this._buffer.destroy();
|
|
this._buffer = null;
|
|
this.data = null;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class GpuColorMaskSystem {
|
|
constructor(renderer) {
|
|
this._colorMaskCache = 15;
|
|
this._renderer = renderer;
|
|
}
|
|
setMask(colorMask) {
|
|
if (this._colorMaskCache === colorMask)
|
|
return;
|
|
this._colorMaskCache = colorMask;
|
|
this._renderer.pipeline.setColorMask(colorMask);
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
this._colorMaskCache = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuColorMaskSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "colorMask"
|
|
};
|
|
|
|
"use strict";
|
|
class GpuDeviceSystem {
|
|
/**
|
|
* @param {WebGPURenderer} renderer - The renderer this System works for.
|
|
*/
|
|
constructor(renderer) {
|
|
this._renderer = renderer;
|
|
}
|
|
async init(options) {
|
|
if (this._initPromise)
|
|
return this._initPromise;
|
|
this._initPromise = this._createDeviceAndAdaptor(options).then((gpu) => {
|
|
this.gpu = gpu;
|
|
this._renderer.runners.contextChange.emit(this.gpu);
|
|
});
|
|
return this._initPromise;
|
|
}
|
|
/**
|
|
* Handle the context change event
|
|
* @param gpu
|
|
*/
|
|
contextChange(gpu) {
|
|
this._renderer.gpu = gpu;
|
|
}
|
|
/**
|
|
* Helper class to create a WebGL Context
|
|
* @param {object} options - An options object that gets passed in to the canvas element containing the
|
|
* context attributes
|
|
* @see https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext
|
|
* @returns {WebGLRenderingContext} the WebGL context
|
|
*/
|
|
async _createDeviceAndAdaptor(options) {
|
|
const adapter = await DOMAdapter.get().getNavigator().gpu.requestAdapter({
|
|
powerPreference: options.powerPreference,
|
|
forceFallbackAdapter: options.forceFallbackAdapter
|
|
});
|
|
const requiredFeatures = [
|
|
"texture-compression-bc",
|
|
"texture-compression-astc",
|
|
"texture-compression-etc2"
|
|
].filter((feature) => adapter.features.has(feature));
|
|
const device = await adapter.requestDevice({
|
|
requiredFeatures
|
|
});
|
|
return { adapter, device };
|
|
}
|
|
destroy() {
|
|
this.gpu = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuDeviceSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "device"
|
|
};
|
|
/** The default options for the GpuDeviceSystem. */
|
|
GpuDeviceSystem.defaultOptions = {
|
|
/**
|
|
* {@link WebGPUOptions.powerPreference}
|
|
* @default default
|
|
*/
|
|
powerPreference: void 0,
|
|
/**
|
|
* Force the use of the fallback adapter
|
|
* @default false
|
|
*/
|
|
forceFallbackAdapter: false
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$9 = Object.defineProperty;
|
|
var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$9 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$9.call(b, prop))
|
|
__defNormalProp$9(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$9)
|
|
for (var prop of __getOwnPropSymbols$9(b)) {
|
|
if (__propIsEnum$9.call(b, prop))
|
|
__defNormalProp$9(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
class GpuEncoderSystem {
|
|
constructor(renderer) {
|
|
this._boundBindGroup = /* @__PURE__ */ Object.create(null);
|
|
this._boundVertexBuffer = /* @__PURE__ */ Object.create(null);
|
|
this._renderer = renderer;
|
|
}
|
|
renderStart() {
|
|
this.commandFinished = new Promise((resolve) => {
|
|
this._resolveCommandFinished = resolve;
|
|
});
|
|
this.commandEncoder = this._renderer.gpu.device.createCommandEncoder();
|
|
}
|
|
beginRenderPass(gpuRenderTarget) {
|
|
this.endRenderPass();
|
|
this._clearCache();
|
|
this.renderPassEncoder = this.commandEncoder.beginRenderPass(gpuRenderTarget.descriptor);
|
|
}
|
|
endRenderPass() {
|
|
if (this.renderPassEncoder) {
|
|
this.renderPassEncoder.end();
|
|
}
|
|
this.renderPassEncoder = null;
|
|
}
|
|
setViewport(viewport) {
|
|
this.renderPassEncoder.setViewport(viewport.x, viewport.y, viewport.width, viewport.height, 0, 1);
|
|
}
|
|
setPipelineFromGeometryProgramAndState(geometry, program, state, topology) {
|
|
const pipeline = this._renderer.pipeline.getPipeline(geometry, program, state, topology);
|
|
this.setPipeline(pipeline);
|
|
}
|
|
setPipeline(pipeline) {
|
|
if (this._boundPipeline === pipeline)
|
|
return;
|
|
this._boundPipeline = pipeline;
|
|
this.renderPassEncoder.setPipeline(pipeline);
|
|
}
|
|
_setVertexBuffer(index, buffer) {
|
|
if (this._boundVertexBuffer[index] === buffer)
|
|
return;
|
|
this._boundVertexBuffer[index] = buffer;
|
|
this.renderPassEncoder.setVertexBuffer(index, this._renderer.buffer.updateBuffer(buffer));
|
|
}
|
|
_setIndexBuffer(buffer) {
|
|
if (this._boundIndexBuffer === buffer)
|
|
return;
|
|
this._boundIndexBuffer = buffer;
|
|
const indexFormat = buffer.data.BYTES_PER_ELEMENT === 2 ? "uint16" : "uint32";
|
|
this.renderPassEncoder.setIndexBuffer(this._renderer.buffer.updateBuffer(buffer), indexFormat);
|
|
}
|
|
resetBindGroup(index) {
|
|
this._boundBindGroup[index] = null;
|
|
}
|
|
setBindGroup(index, bindGroup, program) {
|
|
if (this._boundBindGroup[index] === bindGroup)
|
|
return;
|
|
this._boundBindGroup[index] = bindGroup;
|
|
bindGroup._touch(this._renderer.textureGC.count);
|
|
const gpuBindGroup = this._renderer.bindGroup.getBindGroup(bindGroup, program, index);
|
|
this.renderPassEncoder.setBindGroup(index, gpuBindGroup);
|
|
}
|
|
setGeometry(geometry, program) {
|
|
const buffersToBind = this._renderer.pipeline.getBufferNamesToBind(geometry, program);
|
|
for (const i in buffersToBind) {
|
|
this._setVertexBuffer(i, geometry.attributes[buffersToBind[i]].buffer);
|
|
}
|
|
if (geometry.indexBuffer) {
|
|
this._setIndexBuffer(geometry.indexBuffer);
|
|
}
|
|
}
|
|
_setShaderBindGroups(shader, skipSync) {
|
|
for (const i in shader.groups) {
|
|
const bindGroup = shader.groups[i];
|
|
if (!skipSync) {
|
|
this._syncBindGroup(bindGroup);
|
|
}
|
|
this.setBindGroup(i, bindGroup, shader.gpuProgram);
|
|
}
|
|
}
|
|
_syncBindGroup(bindGroup) {
|
|
for (const j in bindGroup.resources) {
|
|
const resource = bindGroup.resources[j];
|
|
if (resource.isUniformGroup) {
|
|
this._renderer.ubo.updateUniformGroup(resource);
|
|
}
|
|
}
|
|
}
|
|
draw(options) {
|
|
const { geometry, shader, state, topology, size, start, instanceCount, skipSync } = options;
|
|
this.setPipelineFromGeometryProgramAndState(geometry, shader.gpuProgram, state, topology);
|
|
this.setGeometry(geometry, shader.gpuProgram);
|
|
this._setShaderBindGroups(shader, skipSync);
|
|
if (geometry.indexBuffer) {
|
|
this.renderPassEncoder.drawIndexed(
|
|
size || geometry.indexBuffer.data.length,
|
|
instanceCount || geometry.instanceCount,
|
|
start || 0
|
|
);
|
|
} else {
|
|
this.renderPassEncoder.draw(size || geometry.getSize(), instanceCount || geometry.instanceCount, start || 0);
|
|
}
|
|
}
|
|
finishRenderPass() {
|
|
if (this.renderPassEncoder) {
|
|
this.renderPassEncoder.end();
|
|
this.renderPassEncoder = null;
|
|
}
|
|
}
|
|
postrender() {
|
|
this.finishRenderPass();
|
|
this._gpu.device.queue.submit([this.commandEncoder.finish()]);
|
|
this._resolveCommandFinished();
|
|
this.commandEncoder = null;
|
|
}
|
|
// restores a render pass if finishRenderPass was called
|
|
// not optimised as really used for debugging!
|
|
// used when we want to stop drawing and log a texture..
|
|
restoreRenderPass() {
|
|
const descriptor = this._renderer.renderTarget.adaptor.getDescriptor(
|
|
this._renderer.renderTarget.renderTarget,
|
|
false,
|
|
[0, 0, 0, 1]
|
|
);
|
|
this.renderPassEncoder = this.commandEncoder.beginRenderPass(descriptor);
|
|
const boundPipeline = this._boundPipeline;
|
|
const boundVertexBuffer = __spreadValues$9({}, this._boundVertexBuffer);
|
|
const boundIndexBuffer = this._boundIndexBuffer;
|
|
const boundBindGroup = __spreadValues$9({}, this._boundBindGroup);
|
|
this._clearCache();
|
|
const viewport = this._renderer.renderTarget.viewport;
|
|
this.renderPassEncoder.setViewport(viewport.x, viewport.y, viewport.width, viewport.height, 0, 1);
|
|
this.setPipeline(boundPipeline);
|
|
for (const i in boundVertexBuffer) {
|
|
this._setVertexBuffer(i, boundVertexBuffer[i]);
|
|
}
|
|
for (const i in boundBindGroup) {
|
|
this.setBindGroup(i, boundBindGroup[i], null);
|
|
}
|
|
this._setIndexBuffer(boundIndexBuffer);
|
|
}
|
|
_clearCache() {
|
|
for (let i = 0; i < 16; i++) {
|
|
this._boundBindGroup[i] = null;
|
|
this._boundVertexBuffer[i] = null;
|
|
}
|
|
this._boundIndexBuffer = null;
|
|
this._boundPipeline = null;
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
this._gpu = null;
|
|
this._boundBindGroup = null;
|
|
this._boundVertexBuffer = null;
|
|
this._boundIndexBuffer = null;
|
|
this._boundPipeline = null;
|
|
}
|
|
contextChange(gpu) {
|
|
this._gpu = gpu;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuEncoderSystem.extension = {
|
|
type: [ExtensionType.WebGPUSystem],
|
|
name: "encoder",
|
|
priority: 1
|
|
};
|
|
|
|
"use strict";
|
|
class GpuStencilSystem {
|
|
constructor(renderer) {
|
|
this._renderTargetStencilState = /* @__PURE__ */ Object.create(null);
|
|
this._renderer = renderer;
|
|
renderer.renderTarget.onRenderTargetChange.add(this);
|
|
}
|
|
onRenderTargetChange(renderTarget) {
|
|
let stencilState = this._renderTargetStencilState[renderTarget.uid];
|
|
if (!stencilState) {
|
|
stencilState = this._renderTargetStencilState[renderTarget.uid] = {
|
|
stencilMode: STENCIL_MODES.DISABLED,
|
|
stencilReference: 0
|
|
};
|
|
}
|
|
this._activeRenderTarget = renderTarget;
|
|
this.setStencilMode(stencilState.stencilMode, stencilState.stencilReference);
|
|
}
|
|
setStencilMode(stencilMode, stencilReference) {
|
|
const stencilState = this._renderTargetStencilState[this._activeRenderTarget.uid];
|
|
stencilState.stencilMode = stencilMode;
|
|
stencilState.stencilReference = stencilReference;
|
|
const renderer = this._renderer;
|
|
renderer.pipeline.setStencilMode(stencilMode);
|
|
renderer.encoder.renderPassEncoder.setStencilReference(stencilReference);
|
|
}
|
|
destroy() {
|
|
this._renderer.renderTarget.onRenderTargetChange.remove(this);
|
|
this._renderer = null;
|
|
this._activeRenderTarget = null;
|
|
this._renderTargetStencilState = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuStencilSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "stencil"
|
|
};
|
|
|
|
"use strict";
|
|
const WGSL_ALIGN_SIZE_DATA = {
|
|
i32: { align: 4, size: 4 },
|
|
u32: { align: 4, size: 4 },
|
|
f32: { align: 4, size: 4 },
|
|
f16: { align: 2, size: 2 },
|
|
"vec2<i32>": { align: 8, size: 8 },
|
|
"vec2<u32>": { align: 8, size: 8 },
|
|
"vec2<f32>": { align: 8, size: 8 },
|
|
"vec2<f16>": { align: 4, size: 4 },
|
|
"vec3<i32>": { align: 16, size: 12 },
|
|
"vec3<u32>": { align: 16, size: 12 },
|
|
"vec3<f32>": { align: 16, size: 12 },
|
|
"vec3<f16>": { align: 8, size: 6 },
|
|
"vec4<i32>": { align: 16, size: 16 },
|
|
"vec4<u32>": { align: 16, size: 16 },
|
|
"vec4<f32>": { align: 16, size: 16 },
|
|
"vec4<f16>": { align: 8, size: 8 },
|
|
"mat2x2<f32>": { align: 8, size: 16 },
|
|
"mat2x2<f16>": { align: 4, size: 8 },
|
|
"mat3x2<f32>": { align: 8, size: 24 },
|
|
"mat3x2<f16>": { align: 4, size: 12 },
|
|
"mat4x2<f32>": { align: 8, size: 32 },
|
|
"mat4x2<f16>": { align: 4, size: 16 },
|
|
"mat2x3<f32>": { align: 16, size: 32 },
|
|
"mat2x3<f16>": { align: 8, size: 16 },
|
|
"mat3x3<f32>": { align: 16, size: 48 },
|
|
"mat3x3<f16>": { align: 8, size: 24 },
|
|
"mat4x3<f32>": { align: 16, size: 64 },
|
|
"mat4x3<f16>": { align: 8, size: 32 },
|
|
"mat2x4<f32>": { align: 16, size: 32 },
|
|
"mat2x4<f16>": { align: 8, size: 16 },
|
|
"mat3x4<f32>": { align: 16, size: 48 },
|
|
"mat3x4<f16>": { align: 8, size: 24 },
|
|
"mat4x4<f32>": { align: 16, size: 64 },
|
|
"mat4x4<f16>": { align: 8, size: 32 }
|
|
};
|
|
function createUboElementsWGSL(uniformData) {
|
|
const uboElements = uniformData.map((data) => ({
|
|
data,
|
|
offset: 0,
|
|
size: 0
|
|
}));
|
|
let offset = 0;
|
|
for (let i = 0; i < uboElements.length; i++) {
|
|
const uboElement = uboElements[i];
|
|
let size = WGSL_ALIGN_SIZE_DATA[uboElement.data.type].size;
|
|
const align = WGSL_ALIGN_SIZE_DATA[uboElement.data.type].align;
|
|
if (!WGSL_ALIGN_SIZE_DATA[uboElement.data.type]) {
|
|
throw new Error(`[Pixi.js] WebGPU UniformBuffer: Unknown type ${uboElement.data.type}`);
|
|
}
|
|
if (uboElement.data.size > 1) {
|
|
size = Math.max(size, align) * uboElement.data.size;
|
|
}
|
|
offset = Math.ceil(offset / align) * align;
|
|
uboElement.size = size;
|
|
uboElement.offset = offset;
|
|
offset += size;
|
|
}
|
|
offset = Math.ceil(offset / 16) * 16;
|
|
return { uboElements, size: offset };
|
|
}
|
|
|
|
"use strict";
|
|
function generateArraySyncWGSL(uboElement, offsetToAdd) {
|
|
const { size, align } = WGSL_ALIGN_SIZE_DATA[uboElement.data.type];
|
|
const remainder = (align - size) / 4;
|
|
return `
|
|
v = uv.${uboElement.data.name};
|
|
${offsetToAdd !== 0 ? `offset += ${offsetToAdd};` : ""}
|
|
|
|
arrayOffset = offset;
|
|
|
|
t = 0;
|
|
|
|
for(var i=0; i < ${uboElement.data.size * (size / 4)}; i++)
|
|
{
|
|
for(var j = 0; j < ${size / 4}; j++)
|
|
{
|
|
data[arrayOffset++] = v[t++];
|
|
}
|
|
${remainder !== 0 ? `arrayOffset += ${remainder};` : ""}
|
|
}
|
|
`;
|
|
}
|
|
|
|
"use strict";
|
|
function createUboSyncFunctionWGSL(uboElements) {
|
|
return createUboSyncFunction(
|
|
uboElements,
|
|
"uboWgsl",
|
|
generateArraySyncWGSL,
|
|
uboSyncFunctionsWGSL
|
|
);
|
|
}
|
|
|
|
"use strict";
|
|
class GpuUboSystem extends UboSystem {
|
|
constructor() {
|
|
super({
|
|
createUboElements: createUboElementsWGSL,
|
|
generateUboSync: createUboSyncFunctionWGSL
|
|
});
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuUboSystem.extension = {
|
|
type: [ExtensionType.WebGPUSystem],
|
|
name: "ubo"
|
|
};
|
|
|
|
"use strict";
|
|
const minUniformOffsetAlignment = 128;
|
|
class GpuUniformBatchPipe {
|
|
constructor(renderer) {
|
|
this._bindGroupHash = /* @__PURE__ */ Object.create(null);
|
|
// number of buffers..
|
|
this._buffers = [];
|
|
this._bindGroups = [];
|
|
this._bufferResources = [];
|
|
this._renderer = renderer;
|
|
this._batchBuffer = new UboBatch({ minUniformOffsetAlignment });
|
|
const totalBuffers = 256 / minUniformOffsetAlignment;
|
|
for (let i = 0; i < totalBuffers; i++) {
|
|
let usage = BufferUsage.UNIFORM | BufferUsage.COPY_DST;
|
|
if (i === 0)
|
|
usage |= BufferUsage.COPY_SRC;
|
|
this._buffers.push(new Buffer({
|
|
data: this._batchBuffer.data,
|
|
usage
|
|
}));
|
|
}
|
|
}
|
|
renderEnd() {
|
|
this._uploadBindGroups();
|
|
this._resetBindGroups();
|
|
}
|
|
_resetBindGroups() {
|
|
for (const i in this._bindGroupHash) {
|
|
this._bindGroupHash[i] = null;
|
|
}
|
|
this._batchBuffer.clear();
|
|
}
|
|
// just works for single bind groups for now
|
|
getUniformBindGroup(group, duplicate) {
|
|
if (!duplicate && this._bindGroupHash[group.uid]) {
|
|
return this._bindGroupHash[group.uid];
|
|
}
|
|
this._renderer.ubo.ensureUniformGroup(group);
|
|
const data = group.buffer.data;
|
|
const offset = this._batchBuffer.addEmptyGroup(data.length);
|
|
this._renderer.ubo.syncUniformGroup(group, this._batchBuffer.data, offset / 4);
|
|
this._bindGroupHash[group.uid] = this._getBindGroup(offset / minUniformOffsetAlignment);
|
|
return this._bindGroupHash[group.uid];
|
|
}
|
|
getUboResource(group) {
|
|
this._renderer.ubo.updateUniformGroup(group);
|
|
const data = group.buffer.data;
|
|
const offset = this._batchBuffer.addGroup(data);
|
|
return this._getBufferResource(offset / minUniformOffsetAlignment);
|
|
}
|
|
getArrayBindGroup(data) {
|
|
const offset = this._batchBuffer.addGroup(data);
|
|
return this._getBindGroup(offset / minUniformOffsetAlignment);
|
|
}
|
|
getArrayBufferResource(data) {
|
|
const offset = this._batchBuffer.addGroup(data);
|
|
const index = offset / minUniformOffsetAlignment;
|
|
return this._getBufferResource(index);
|
|
}
|
|
_getBufferResource(index) {
|
|
if (!this._bufferResources[index]) {
|
|
const buffer = this._buffers[index % 2];
|
|
this._bufferResources[index] = new BufferResource({
|
|
buffer,
|
|
offset: (index / 2 | 0) * 256,
|
|
size: minUniformOffsetAlignment
|
|
});
|
|
}
|
|
return this._bufferResources[index];
|
|
}
|
|
_getBindGroup(index) {
|
|
if (!this._bindGroups[index]) {
|
|
const bindGroup = new BindGroup({
|
|
0: this._getBufferResource(index)
|
|
});
|
|
this._bindGroups[index] = bindGroup;
|
|
}
|
|
return this._bindGroups[index];
|
|
}
|
|
_uploadBindGroups() {
|
|
const bufferSystem = this._renderer.buffer;
|
|
const firstBuffer = this._buffers[0];
|
|
firstBuffer.update(this._batchBuffer.byteIndex);
|
|
bufferSystem.updateBuffer(firstBuffer);
|
|
const commandEncoder = this._renderer.gpu.device.createCommandEncoder();
|
|
for (let i = 1; i < this._buffers.length; i++) {
|
|
const buffer = this._buffers[i];
|
|
commandEncoder.copyBufferToBuffer(
|
|
bufferSystem.getGPUBuffer(firstBuffer),
|
|
minUniformOffsetAlignment,
|
|
bufferSystem.getGPUBuffer(buffer),
|
|
0,
|
|
this._batchBuffer.byteIndex
|
|
);
|
|
}
|
|
this._renderer.gpu.device.queue.submit([commandEncoder.finish()]);
|
|
}
|
|
destroy() {
|
|
for (let i = 0; i < this._bindGroups.length; i++) {
|
|
this._bindGroups[i].destroy();
|
|
}
|
|
this._bindGroups = null;
|
|
this._bindGroupHash = null;
|
|
for (let i = 0; i < this._buffers.length; i++) {
|
|
this._buffers[i].destroy();
|
|
}
|
|
this._buffers = null;
|
|
for (let i = 0; i < this._bufferResources.length; i++) {
|
|
this._bufferResources[i].destroy();
|
|
}
|
|
this._bufferResources = null;
|
|
this._batchBuffer.destroy();
|
|
this._bindGroupHash = null;
|
|
this._renderer = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuUniformBatchPipe.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUPipes
|
|
],
|
|
name: "uniformBatch"
|
|
};
|
|
|
|
"use strict";
|
|
var __defProp$8 = Object.defineProperty;
|
|
var __defProps$5 = Object.defineProperties;
|
|
var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$8 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$8.call(b, prop))
|
|
__defNormalProp$8(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$8)
|
|
for (var prop of __getOwnPropSymbols$8(b)) {
|
|
if (__propIsEnum$8.call(b, prop))
|
|
__defNormalProp$8(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
|
|
const topologyStringToId = {
|
|
"point-list": 0,
|
|
"line-list": 1,
|
|
"line-strip": 2,
|
|
"triangle-list": 3,
|
|
"triangle-strip": 4
|
|
};
|
|
function getGraphicsStateKey(geometryLayout, shaderKey, state, blendMode, topology) {
|
|
return geometryLayout << 24 | shaderKey << 16 | state << 10 | blendMode << 5 | topology;
|
|
}
|
|
function getGlobalStateKey(stencilStateId, multiSampleCount, colorMask, renderTarget) {
|
|
return colorMask << 6 | stencilStateId << 3 | renderTarget << 1 | multiSampleCount;
|
|
}
|
|
class PipelineSystem {
|
|
constructor(renderer) {
|
|
this._moduleCache = /* @__PURE__ */ Object.create(null);
|
|
this._bufferLayoutsCache = /* @__PURE__ */ Object.create(null);
|
|
this._bindingNamesCache = /* @__PURE__ */ Object.create(null);
|
|
this._pipeCache = /* @__PURE__ */ Object.create(null);
|
|
this._pipeStateCaches = /* @__PURE__ */ Object.create(null);
|
|
this._colorMask = 15;
|
|
this._multisampleCount = 1;
|
|
this._renderer = renderer;
|
|
}
|
|
contextChange(gpu) {
|
|
this._gpu = gpu;
|
|
this.setStencilMode(STENCIL_MODES.DISABLED);
|
|
this._updatePipeHash();
|
|
}
|
|
setMultisampleCount(multisampleCount) {
|
|
if (this._multisampleCount === multisampleCount)
|
|
return;
|
|
this._multisampleCount = multisampleCount;
|
|
this._updatePipeHash();
|
|
}
|
|
setRenderTarget(renderTarget) {
|
|
this._multisampleCount = renderTarget.msaaSamples;
|
|
this._depthStencilAttachment = renderTarget.descriptor.depthStencilAttachment ? 1 : 0;
|
|
this._updatePipeHash();
|
|
}
|
|
setColorMask(colorMask) {
|
|
if (this._colorMask === colorMask)
|
|
return;
|
|
this._colorMask = colorMask;
|
|
this._updatePipeHash();
|
|
}
|
|
setStencilMode(stencilMode) {
|
|
if (this._stencilMode === stencilMode)
|
|
return;
|
|
this._stencilMode = stencilMode;
|
|
this._stencilState = GpuStencilModesToPixi[stencilMode];
|
|
this._updatePipeHash();
|
|
}
|
|
setPipeline(geometry, program, state, passEncoder) {
|
|
const pipeline = this.getPipeline(geometry, program, state);
|
|
passEncoder.setPipeline(pipeline);
|
|
}
|
|
getPipeline(geometry, program, state, topology) {
|
|
if (!geometry._layoutKey) {
|
|
ensureAttributes(geometry, program.attributeData);
|
|
this._generateBufferKey(geometry);
|
|
}
|
|
topology = topology || geometry.topology;
|
|
const key = getGraphicsStateKey(
|
|
geometry._layoutKey,
|
|
program._layoutKey,
|
|
state.data,
|
|
state._blendModeId,
|
|
topologyStringToId[topology]
|
|
);
|
|
if (this._pipeCache[key])
|
|
return this._pipeCache[key];
|
|
this._pipeCache[key] = this._createPipeline(geometry, program, state, topology);
|
|
return this._pipeCache[key];
|
|
}
|
|
_createPipeline(geometry, program, state, topology) {
|
|
const device = this._gpu.device;
|
|
const buffers = this._createVertexBufferLayouts(geometry, program);
|
|
const blendModes = this._renderer.state.getColorTargets(state);
|
|
blendModes[0].writeMask = this._stencilMode === STENCIL_MODES.RENDERING_MASK_ADD ? 0 : this._colorMask;
|
|
const layout = this._renderer.shader.getProgramData(program).pipeline;
|
|
const descriptor = {
|
|
// TODO later check if its helpful to create..
|
|
// layout,
|
|
vertex: {
|
|
module: this._getModule(program.vertex.source),
|
|
entryPoint: program.vertex.entryPoint,
|
|
// geometry..
|
|
buffers
|
|
},
|
|
fragment: {
|
|
module: this._getModule(program.fragment.source),
|
|
entryPoint: program.fragment.entryPoint,
|
|
targets: blendModes
|
|
},
|
|
primitive: {
|
|
topology,
|
|
cullMode: state.cullMode
|
|
},
|
|
layout,
|
|
multisample: {
|
|
count: this._multisampleCount
|
|
},
|
|
// depthStencil,
|
|
label: `PIXI Pipeline`
|
|
};
|
|
if (this._depthStencilAttachment) {
|
|
descriptor.depthStencil = __spreadProps$5(__spreadValues$8({}, this._stencilState), {
|
|
format: "depth24plus-stencil8",
|
|
depthWriteEnabled: state.depthTest,
|
|
depthCompare: state.depthTest ? "less" : "always"
|
|
});
|
|
}
|
|
const pipeline = device.createRenderPipeline(descriptor);
|
|
return pipeline;
|
|
}
|
|
_getModule(code) {
|
|
return this._moduleCache[code] || this._createModule(code);
|
|
}
|
|
_createModule(code) {
|
|
const device = this._gpu.device;
|
|
this._moduleCache[code] = device.createShaderModule({
|
|
code
|
|
});
|
|
return this._moduleCache[code];
|
|
}
|
|
_generateBufferKey(geometry) {
|
|
const keyGen = [];
|
|
let index = 0;
|
|
const attributeKeys = Object.keys(geometry.attributes).sort();
|
|
for (let i = 0; i < attributeKeys.length; i++) {
|
|
const attribute = geometry.attributes[attributeKeys[i]];
|
|
keyGen[index++] = attribute.offset;
|
|
keyGen[index++] = attribute.format;
|
|
keyGen[index++] = attribute.stride;
|
|
keyGen[index++] = attribute.instance;
|
|
}
|
|
const stringKey = keyGen.join("|");
|
|
geometry._layoutKey = createIdFromString(stringKey, "geometry");
|
|
return geometry._layoutKey;
|
|
}
|
|
_generateAttributeLocationsKey(program) {
|
|
const keyGen = [];
|
|
let index = 0;
|
|
const attributeKeys = Object.keys(program.attributeData).sort();
|
|
for (let i = 0; i < attributeKeys.length; i++) {
|
|
const attribute = program.attributeData[attributeKeys[i]];
|
|
keyGen[index++] = attribute.location;
|
|
}
|
|
const stringKey = keyGen.join("|");
|
|
program._attributeLocationsKey = createIdFromString(stringKey, "programAttributes");
|
|
return program._attributeLocationsKey;
|
|
}
|
|
/**
|
|
* Returns a hash of buffer names mapped to bind locations.
|
|
* This is used to bind the correct buffer to the correct location in the shader.
|
|
* @param geometry - The geometry where to get the buffer names
|
|
* @param program - The program where to get the buffer names
|
|
* @returns An object of buffer names mapped to the bind location.
|
|
*/
|
|
getBufferNamesToBind(geometry, program) {
|
|
const key = geometry._layoutKey << 16 | program._attributeLocationsKey;
|
|
if (this._bindingNamesCache[key])
|
|
return this._bindingNamesCache[key];
|
|
const data = this._createVertexBufferLayouts(geometry, program);
|
|
const bufferNamesToBind = /* @__PURE__ */ Object.create(null);
|
|
const attributeData = program.attributeData;
|
|
for (let i = 0; i < data.length; i++) {
|
|
for (const j in attributeData) {
|
|
if (attributeData[j].location === i) {
|
|
bufferNamesToBind[i] = j;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
this._bindingNamesCache[key] = bufferNamesToBind;
|
|
return bufferNamesToBind;
|
|
}
|
|
_createVertexBufferLayouts(geometry, program) {
|
|
if (!program._attributeLocationsKey)
|
|
this._generateAttributeLocationsKey(program);
|
|
const key = geometry._layoutKey << 16 | program._attributeLocationsKey;
|
|
if (this._bufferLayoutsCache[key]) {
|
|
return this._bufferLayoutsCache[key];
|
|
}
|
|
const vertexBuffersLayout = [];
|
|
geometry.buffers.forEach((buffer) => {
|
|
var _a;
|
|
const bufferEntry = {
|
|
arrayStride: 0,
|
|
stepMode: "vertex",
|
|
attributes: []
|
|
};
|
|
const bufferEntryAttributes = bufferEntry.attributes;
|
|
for (const i in program.attributeData) {
|
|
const attribute = geometry.attributes[i];
|
|
if (((_a = attribute.divisor) != null ? _a : 1) !== 1) {
|
|
warn(`Attribute ${i} has an invalid divisor value of '${attribute.divisor}'. WebGPU only supports a divisor value of 1`);
|
|
}
|
|
if (attribute.buffer === buffer) {
|
|
bufferEntry.arrayStride = attribute.stride;
|
|
bufferEntry.stepMode = attribute.instance ? "instance" : "vertex";
|
|
bufferEntryAttributes.push({
|
|
shaderLocation: program.attributeData[i].location,
|
|
offset: attribute.offset,
|
|
format: attribute.format
|
|
});
|
|
}
|
|
}
|
|
if (bufferEntryAttributes.length) {
|
|
vertexBuffersLayout.push(bufferEntry);
|
|
}
|
|
});
|
|
this._bufferLayoutsCache[key] = vertexBuffersLayout;
|
|
return vertexBuffersLayout;
|
|
}
|
|
_updatePipeHash() {
|
|
const key = getGlobalStateKey(
|
|
this._stencilMode,
|
|
this._multisampleCount,
|
|
this._colorMask,
|
|
this._depthStencilAttachment
|
|
);
|
|
if (!this._pipeStateCaches[key]) {
|
|
this._pipeStateCaches[key] = /* @__PURE__ */ Object.create(null);
|
|
}
|
|
this._pipeCache = this._pipeStateCaches[key];
|
|
}
|
|
destroy() {
|
|
this._renderer = null;
|
|
this._bufferLayoutsCache = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
PipelineSystem.extension = {
|
|
type: [ExtensionType.WebGPUSystem],
|
|
name: "pipeline"
|
|
};
|
|
|
|
"use strict";
|
|
class GpuRenderTarget {
|
|
constructor() {
|
|
this.contexts = [];
|
|
this.msaaTextures = [];
|
|
this.msaaSamples = 1;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class GpuRenderTargetAdaptor {
|
|
init(renderer, renderTargetSystem) {
|
|
this._renderer = renderer;
|
|
this._renderTargetSystem = renderTargetSystem;
|
|
}
|
|
copyToTexture(sourceRenderSurfaceTexture, destinationTexture, originSrc, size, originDest) {
|
|
const renderer = this._renderer;
|
|
const baseGpuTexture = this._getGpuColorTexture(
|
|
sourceRenderSurfaceTexture
|
|
);
|
|
const backGpuTexture = renderer.texture.getGpuSource(
|
|
destinationTexture.source
|
|
);
|
|
renderer.encoder.commandEncoder.copyTextureToTexture(
|
|
{
|
|
texture: baseGpuTexture,
|
|
origin: originSrc
|
|
},
|
|
{
|
|
texture: backGpuTexture,
|
|
origin: originDest
|
|
},
|
|
size
|
|
);
|
|
return destinationTexture;
|
|
}
|
|
startRenderPass(renderTarget, clear = true, clearColor, viewport) {
|
|
const renderTargetSystem = this._renderTargetSystem;
|
|
const gpuRenderTarget = renderTargetSystem.getGpuRenderTarget(renderTarget);
|
|
const descriptor = this.getDescriptor(renderTarget, clear, clearColor);
|
|
gpuRenderTarget.descriptor = descriptor;
|
|
this._renderer.pipeline.setRenderTarget(gpuRenderTarget);
|
|
this._renderer.encoder.beginRenderPass(gpuRenderTarget);
|
|
this._renderer.encoder.setViewport(viewport);
|
|
}
|
|
finishRenderPass() {
|
|
this._renderer.encoder.endRenderPass();
|
|
}
|
|
/**
|
|
* returns the gpu texture for the first color texture in the render target
|
|
* mainly used by the filter manager to get copy the texture for blending
|
|
* @param renderTarget
|
|
* @returns a gpu texture
|
|
*/
|
|
_getGpuColorTexture(renderTarget) {
|
|
const gpuRenderTarget = this._renderTargetSystem.getGpuRenderTarget(renderTarget);
|
|
if (gpuRenderTarget.contexts[0]) {
|
|
return gpuRenderTarget.contexts[0].getCurrentTexture();
|
|
}
|
|
return this._renderer.texture.getGpuSource(
|
|
renderTarget.colorTextures[0].source
|
|
);
|
|
}
|
|
getDescriptor(renderTarget, clear, clearValue) {
|
|
if (typeof clear === "boolean") {
|
|
clear = clear ? CLEAR.ALL : CLEAR.NONE;
|
|
}
|
|
const renderTargetSystem = this._renderTargetSystem;
|
|
const gpuRenderTarget = renderTargetSystem.getGpuRenderTarget(renderTarget);
|
|
const colorAttachments = renderTarget.colorTextures.map(
|
|
(texture, i) => {
|
|
const context = gpuRenderTarget.contexts[i];
|
|
let view;
|
|
let resolveTarget;
|
|
if (context) {
|
|
const currentTexture = context.getCurrentTexture();
|
|
const canvasTextureView = currentTexture.createView();
|
|
view = canvasTextureView;
|
|
} else {
|
|
view = this._renderer.texture.getGpuSource(texture).createView({
|
|
mipLevelCount: 1
|
|
});
|
|
}
|
|
if (gpuRenderTarget.msaaTextures[i]) {
|
|
resolveTarget = view;
|
|
view = this._renderer.texture.getTextureView(
|
|
gpuRenderTarget.msaaTextures[i]
|
|
);
|
|
}
|
|
const loadOp = clear & CLEAR.COLOR ? "clear" : "load";
|
|
clearValue != null ? clearValue : clearValue = renderTargetSystem.defaultClearColor;
|
|
return {
|
|
view,
|
|
resolveTarget,
|
|
clearValue,
|
|
storeOp: "store",
|
|
loadOp
|
|
};
|
|
}
|
|
);
|
|
let depthStencilAttachment;
|
|
if ((renderTarget.stencil || renderTarget.depth) && !renderTarget.depthStencilTexture) {
|
|
renderTarget.ensureDepthStencilTexture();
|
|
renderTarget.depthStencilTexture.source.sampleCount = gpuRenderTarget.msaa ? 4 : 1;
|
|
}
|
|
if (renderTarget.depthStencilTexture) {
|
|
const stencilLoadOp = clear & CLEAR.STENCIL ? "clear" : "load";
|
|
const depthLoadOp = clear & CLEAR.DEPTH ? "clear" : "load";
|
|
depthStencilAttachment = {
|
|
view: this._renderer.texture.getGpuSource(renderTarget.depthStencilTexture.source).createView(),
|
|
stencilStoreOp: "store",
|
|
stencilLoadOp,
|
|
depthClearValue: 1,
|
|
depthLoadOp,
|
|
depthStoreOp: "store"
|
|
};
|
|
}
|
|
const descriptor = {
|
|
colorAttachments,
|
|
depthStencilAttachment
|
|
};
|
|
return descriptor;
|
|
}
|
|
clear(renderTarget, clear = true, clearColor, viewport) {
|
|
if (!clear)
|
|
return;
|
|
const { gpu, encoder } = this._renderer;
|
|
const device = gpu.device;
|
|
const standAlone = encoder.commandEncoder === null;
|
|
if (standAlone) {
|
|
const commandEncoder = device.createCommandEncoder();
|
|
const renderPassDescriptor = this.getDescriptor(renderTarget, clear, clearColor);
|
|
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
|
|
passEncoder.setViewport(viewport.x, viewport.y, viewport.width, viewport.height, 0, 1);
|
|
passEncoder.end();
|
|
const gpuCommands = commandEncoder.finish();
|
|
device.queue.submit([gpuCommands]);
|
|
} else {
|
|
this.startRenderPass(renderTarget, clear, clearColor, viewport);
|
|
}
|
|
}
|
|
initGpuRenderTarget(renderTarget) {
|
|
renderTarget.isRoot = true;
|
|
const gpuRenderTarget = new GpuRenderTarget();
|
|
renderTarget.colorTextures.forEach((colorTexture, i) => {
|
|
if (CanvasSource.test(colorTexture.resource)) {
|
|
const context = colorTexture.resource.getContext(
|
|
"webgpu"
|
|
);
|
|
const alphaMode = colorTexture.transparent ? "premultiplied" : "opaque";
|
|
try {
|
|
context.configure({
|
|
device: this._renderer.gpu.device,
|
|
// eslint-disable-next-line max-len
|
|
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
|
|
format: "bgra8unorm",
|
|
alphaMode
|
|
});
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
gpuRenderTarget.contexts[i] = context;
|
|
}
|
|
gpuRenderTarget.msaa = colorTexture.source.antialias;
|
|
if (colorTexture.source.antialias) {
|
|
const msaaTexture = new TextureSource({
|
|
width: 0,
|
|
height: 0,
|
|
sampleCount: 4
|
|
});
|
|
gpuRenderTarget.msaaTextures[i] = msaaTexture;
|
|
}
|
|
});
|
|
if (gpuRenderTarget.msaa) {
|
|
gpuRenderTarget.msaaSamples = 4;
|
|
if (renderTarget.depthStencilTexture) {
|
|
renderTarget.depthStencilTexture.source.sampleCount = 4;
|
|
}
|
|
}
|
|
return gpuRenderTarget;
|
|
}
|
|
destroyGpuRenderTarget(gpuRenderTarget) {
|
|
gpuRenderTarget.contexts.forEach((context) => {
|
|
context.unconfigure();
|
|
});
|
|
gpuRenderTarget.msaaTextures.forEach((texture) => {
|
|
texture.destroy();
|
|
});
|
|
gpuRenderTarget.msaaTextures.length = 0;
|
|
gpuRenderTarget.contexts.length = 0;
|
|
}
|
|
ensureDepthStencilTexture(renderTarget) {
|
|
const gpuRenderTarget = this._renderTargetSystem.getGpuRenderTarget(renderTarget);
|
|
if (renderTarget.depthStencilTexture && gpuRenderTarget.msaa) {
|
|
renderTarget.depthStencilTexture.source.sampleCount = 4;
|
|
}
|
|
}
|
|
resizeGpuRenderTarget(renderTarget) {
|
|
const gpuRenderTarget = this._renderTargetSystem.getGpuRenderTarget(renderTarget);
|
|
gpuRenderTarget.width = renderTarget.width;
|
|
gpuRenderTarget.height = renderTarget.height;
|
|
if (gpuRenderTarget.msaa) {
|
|
renderTarget.colorTextures.forEach((colorTexture, i) => {
|
|
const msaaTexture = gpuRenderTarget.msaaTextures[i];
|
|
msaaTexture == null ? void 0 : msaaTexture.resize(
|
|
colorTexture.source.width,
|
|
colorTexture.source.height,
|
|
colorTexture.source._resolution
|
|
);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class GpuRenderTargetSystem extends RenderTargetSystem {
|
|
constructor(renderer) {
|
|
super(renderer);
|
|
this.adaptor = new GpuRenderTargetAdaptor();
|
|
this.adaptor.init(renderer, this);
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuRenderTargetSystem.extension = {
|
|
type: [ExtensionType.WebGPUSystem],
|
|
name: "renderTarget"
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
class GpuShaderSystem {
|
|
constructor() {
|
|
this._gpuProgramData = /* @__PURE__ */ Object.create(null);
|
|
}
|
|
contextChange(gpu) {
|
|
this._gpu = gpu;
|
|
this.maxTextures = gpu.device.limits.maxSampledTexturesPerShaderStage;
|
|
}
|
|
getProgramData(program) {
|
|
return this._gpuProgramData[program._layoutKey] || this._createGPUProgramData(program);
|
|
}
|
|
_createGPUProgramData(program) {
|
|
const device = this._gpu.device;
|
|
const bindGroups = program.gpuLayout.map((group) => device.createBindGroupLayout({ entries: group }));
|
|
const pipelineLayoutDesc = { bindGroupLayouts: bindGroups };
|
|
this._gpuProgramData[program._layoutKey] = {
|
|
bindGroups,
|
|
pipeline: device.createPipelineLayout(pipelineLayoutDesc)
|
|
};
|
|
return this._gpuProgramData[program._layoutKey];
|
|
}
|
|
destroy() {
|
|
this._gpu = null;
|
|
this._gpuProgramData = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuShaderSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "shader"
|
|
};
|
|
|
|
"use strict";
|
|
const GpuBlendModesToPixi = {};
|
|
GpuBlendModesToPixi.normal = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi.add = {
|
|
alpha: {
|
|
srcFactor: "src-alpha",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "one",
|
|
dstFactor: "one",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi.multiply = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "dst",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi.screen = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi.overlay = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi.none = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "zero",
|
|
dstFactor: "zero",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi["normal-npm"] = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "src-alpha",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi["add-npm"] = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "src-alpha",
|
|
dstFactor: "one",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi["screen-npm"] = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "src-alpha",
|
|
dstFactor: "one-minus-src",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi.erase = {
|
|
alpha: {
|
|
srcFactor: "zero",
|
|
dstFactor: "one-minus-src-alpha",
|
|
operation: "add"
|
|
},
|
|
color: {
|
|
srcFactor: "zero",
|
|
dstFactor: "one-minus-src",
|
|
operation: "add"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi.min = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one",
|
|
operation: "min"
|
|
},
|
|
color: {
|
|
srcFactor: "one",
|
|
dstFactor: "one",
|
|
operation: "min"
|
|
}
|
|
};
|
|
GpuBlendModesToPixi.max = {
|
|
alpha: {
|
|
srcFactor: "one",
|
|
dstFactor: "one",
|
|
operation: "max"
|
|
},
|
|
color: {
|
|
srcFactor: "one",
|
|
dstFactor: "one",
|
|
operation: "max"
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
class GpuStateSystem {
|
|
constructor() {
|
|
this.defaultState = new State();
|
|
this.defaultState.blend = true;
|
|
}
|
|
contextChange(gpu) {
|
|
this.gpu = gpu;
|
|
}
|
|
/**
|
|
* Gets the blend mode data for the current state
|
|
* @param state - The state to get the blend mode from
|
|
*/
|
|
getColorTargets(state) {
|
|
const blend = GpuBlendModesToPixi[state.blendMode] || GpuBlendModesToPixi.normal;
|
|
return [
|
|
{
|
|
format: "bgra8unorm",
|
|
writeMask: 0,
|
|
blend
|
|
}
|
|
];
|
|
}
|
|
destroy() {
|
|
this.gpu = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuStateSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "state"
|
|
};
|
|
|
|
"use strict";
|
|
const gpuUploadBufferImageResource = {
|
|
type: "image",
|
|
upload(source, gpuTexture, gpu) {
|
|
const resource = source.resource;
|
|
const total = (source.pixelWidth | 0) * (source.pixelHeight | 0);
|
|
const bytesPerPixel = resource.byteLength / total;
|
|
gpu.device.queue.writeTexture(
|
|
{ texture: gpuTexture },
|
|
resource,
|
|
{
|
|
offset: 0,
|
|
rowsPerImage: source.pixelHeight,
|
|
bytesPerRow: source.pixelHeight * bytesPerPixel
|
|
},
|
|
{
|
|
width: source.pixelWidth,
|
|
height: source.pixelHeight,
|
|
depthOrArrayLayers: 1
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const blockDataMap = {
|
|
"bc1-rgba-unorm": { blockBytes: 8, blockWidth: 4, blockHeight: 4 },
|
|
"bc2-rgba-unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 },
|
|
"bc3-rgba-unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 },
|
|
"bc7-rgba-unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 },
|
|
"etc1-rgb-unorm": { blockBytes: 8, blockWidth: 4, blockHeight: 4 },
|
|
"etc2-rgba8unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 },
|
|
"astc-4x4-unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 }
|
|
};
|
|
const defaultBlockData = { blockBytes: 4, blockWidth: 1, blockHeight: 1 };
|
|
const gpuUploadCompressedTextureResource = {
|
|
type: "compressed",
|
|
upload(source, gpuTexture, gpu) {
|
|
let mipWidth = source.pixelWidth;
|
|
let mipHeight = source.pixelHeight;
|
|
const blockData = blockDataMap[source.format] || defaultBlockData;
|
|
for (let i = 0; i < source.resource.length; i++) {
|
|
const levelBuffer = source.resource[i];
|
|
const bytesPerRow = Math.ceil(mipWidth / blockData.blockWidth) * blockData.blockBytes;
|
|
gpu.device.queue.writeTexture(
|
|
{
|
|
texture: gpuTexture,
|
|
mipLevel: i
|
|
},
|
|
levelBuffer,
|
|
{
|
|
offset: 0,
|
|
bytesPerRow
|
|
},
|
|
{
|
|
width: Math.ceil(mipWidth / blockData.blockWidth) * blockData.blockWidth,
|
|
height: Math.ceil(mipHeight / blockData.blockHeight) * blockData.blockHeight,
|
|
depthOrArrayLayers: 1
|
|
}
|
|
);
|
|
mipWidth = Math.max(mipWidth >> 1, 1);
|
|
mipHeight = Math.max(mipHeight >> 1, 1);
|
|
}
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const gpuUploadImageResource = {
|
|
type: "image",
|
|
upload(source, gpuTexture, gpu) {
|
|
const resource = source.resource;
|
|
if (!resource)
|
|
return;
|
|
const width = Math.min(gpuTexture.width, source.resourceWidth || source.pixelWidth);
|
|
const height = Math.min(gpuTexture.height, source.resourceHeight || source.pixelHeight);
|
|
const premultipliedAlpha = source.alphaMode === "premultiply-alpha-on-upload";
|
|
gpu.device.queue.copyExternalImageToTexture(
|
|
{ source: resource },
|
|
{ texture: gpuTexture, premultipliedAlpha },
|
|
{
|
|
width,
|
|
height
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
const gpuUploadVideoResource = {
|
|
type: "video",
|
|
upload(source, gpuTexture, gpu) {
|
|
gpuUploadImageResource.upload(source, gpuTexture, gpu);
|
|
}
|
|
};
|
|
|
|
"use strict";
|
|
class GpuMipmapGenerator {
|
|
constructor(device) {
|
|
this.device = device;
|
|
this.sampler = device.createSampler({ minFilter: "linear" });
|
|
this.pipelines = {};
|
|
}
|
|
_getMipmapPipeline(format) {
|
|
let pipeline = this.pipelines[format];
|
|
if (!pipeline) {
|
|
if (!this.mipmapShaderModule) {
|
|
this.mipmapShaderModule = this.device.createShaderModule({
|
|
code: (
|
|
/* wgsl */
|
|
`
|
|
var<private> pos : array<vec2<f32>, 3> = array<vec2<f32>, 3>(
|
|
vec2<f32>(-1.0, -1.0), vec2<f32>(-1.0, 3.0), vec2<f32>(3.0, -1.0));
|
|
|
|
struct VertexOutput {
|
|
@builtin(position) position : vec4<f32>,
|
|
@location(0) texCoord : vec2<f32>,
|
|
};
|
|
|
|
@vertex
|
|
fn vertexMain(@builtin(vertex_index) vertexIndex : u32) -> VertexOutput {
|
|
var output : VertexOutput;
|
|
output.texCoord = pos[vertexIndex] * vec2<f32>(0.5, -0.5) + vec2<f32>(0.5);
|
|
output.position = vec4<f32>(pos[vertexIndex], 0.0, 1.0);
|
|
return output;
|
|
}
|
|
|
|
@group(0) @binding(0) var imgSampler : sampler;
|
|
@group(0) @binding(1) var img : texture_2d<f32>;
|
|
|
|
@fragment
|
|
fn fragmentMain(@location(0) texCoord : vec2<f32>) -> @location(0) vec4<f32> {
|
|
return textureSample(img, imgSampler, texCoord);
|
|
}
|
|
`
|
|
)
|
|
});
|
|
}
|
|
pipeline = this.device.createRenderPipeline({
|
|
layout: "auto",
|
|
vertex: {
|
|
module: this.mipmapShaderModule,
|
|
entryPoint: "vertexMain"
|
|
},
|
|
fragment: {
|
|
module: this.mipmapShaderModule,
|
|
entryPoint: "fragmentMain",
|
|
targets: [{ format }]
|
|
}
|
|
});
|
|
this.pipelines[format] = pipeline;
|
|
}
|
|
return pipeline;
|
|
}
|
|
/**
|
|
* Generates mipmaps for the given GPUTexture from the data in level 0.
|
|
* @param {module:External.GPUTexture} texture - Texture to generate mipmaps for.
|
|
* @returns {module:External.GPUTexture} - The originally passed texture
|
|
*/
|
|
generateMipmap(texture) {
|
|
const pipeline = this._getMipmapPipeline(texture.format);
|
|
if (texture.dimension === "3d" || texture.dimension === "1d") {
|
|
throw new Error("Generating mipmaps for non-2d textures is currently unsupported!");
|
|
}
|
|
let mipTexture = texture;
|
|
const arrayLayerCount = texture.depthOrArrayLayers || 1;
|
|
const renderToSource = texture.usage & GPUTextureUsage.RENDER_ATTACHMENT;
|
|
if (!renderToSource) {
|
|
const mipTextureDescriptor = {
|
|
size: {
|
|
width: Math.ceil(texture.width / 2),
|
|
height: Math.ceil(texture.height / 2),
|
|
depthOrArrayLayers: arrayLayerCount
|
|
},
|
|
format: texture.format,
|
|
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
|
|
mipLevelCount: texture.mipLevelCount - 1
|
|
};
|
|
mipTexture = this.device.createTexture(mipTextureDescriptor);
|
|
}
|
|
const commandEncoder = this.device.createCommandEncoder({});
|
|
const bindGroupLayout = pipeline.getBindGroupLayout(0);
|
|
for (let arrayLayer = 0; arrayLayer < arrayLayerCount; ++arrayLayer) {
|
|
let srcView = texture.createView({
|
|
baseMipLevel: 0,
|
|
mipLevelCount: 1,
|
|
dimension: "2d",
|
|
baseArrayLayer: arrayLayer,
|
|
arrayLayerCount: 1
|
|
});
|
|
let dstMipLevel = renderToSource ? 1 : 0;
|
|
for (let i = 1; i < texture.mipLevelCount; ++i) {
|
|
const dstView = mipTexture.createView({
|
|
baseMipLevel: dstMipLevel++,
|
|
mipLevelCount: 1,
|
|
dimension: "2d",
|
|
baseArrayLayer: arrayLayer,
|
|
arrayLayerCount: 1
|
|
});
|
|
const passEncoder = commandEncoder.beginRenderPass({
|
|
colorAttachments: [{
|
|
view: dstView,
|
|
storeOp: "store",
|
|
loadOp: "clear",
|
|
clearValue: { r: 0, g: 0, b: 0, a: 0 }
|
|
}]
|
|
});
|
|
const bindGroup = this.device.createBindGroup({
|
|
layout: bindGroupLayout,
|
|
entries: [{
|
|
binding: 0,
|
|
resource: this.sampler
|
|
}, {
|
|
binding: 1,
|
|
resource: srcView
|
|
}]
|
|
});
|
|
passEncoder.setPipeline(pipeline);
|
|
passEncoder.setBindGroup(0, bindGroup);
|
|
passEncoder.draw(3, 1, 0, 0);
|
|
passEncoder.end();
|
|
srcView = dstView;
|
|
}
|
|
}
|
|
if (!renderToSource) {
|
|
const mipLevelSize = {
|
|
width: Math.ceil(texture.width / 2),
|
|
height: Math.ceil(texture.height / 2),
|
|
depthOrArrayLayers: arrayLayerCount
|
|
};
|
|
for (let i = 1; i < texture.mipLevelCount; ++i) {
|
|
commandEncoder.copyTextureToTexture({
|
|
texture: mipTexture,
|
|
mipLevel: i - 1
|
|
}, {
|
|
texture,
|
|
mipLevel: i
|
|
}, mipLevelSize);
|
|
mipLevelSize.width = Math.ceil(mipLevelSize.width / 2);
|
|
mipLevelSize.height = Math.ceil(mipLevelSize.height / 2);
|
|
}
|
|
}
|
|
this.device.queue.submit([commandEncoder.finish()]);
|
|
if (!renderToSource) {
|
|
mipTexture.destroy();
|
|
}
|
|
return texture;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
class GpuTextureSystem {
|
|
constructor(renderer) {
|
|
this.managedTextures = [];
|
|
this._gpuSources = /* @__PURE__ */ Object.create(null);
|
|
this._gpuSamplers = /* @__PURE__ */ Object.create(null);
|
|
this._bindGroupHash = /* @__PURE__ */ Object.create(null);
|
|
this._textureViewHash = /* @__PURE__ */ Object.create(null);
|
|
this._uploads = {
|
|
image: gpuUploadImageResource,
|
|
buffer: gpuUploadBufferImageResource,
|
|
video: gpuUploadVideoResource,
|
|
compressed: gpuUploadCompressedTextureResource
|
|
};
|
|
this._renderer = renderer;
|
|
}
|
|
contextChange(gpu) {
|
|
this._gpu = gpu;
|
|
}
|
|
initSource(source) {
|
|
if (source.autoGenerateMipmaps) {
|
|
const biggestDimension = Math.max(source.pixelWidth, source.pixelHeight);
|
|
source.mipLevelCount = Math.floor(Math.log2(biggestDimension)) + 1;
|
|
}
|
|
let usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
|
|
if (source.uploadMethodId !== "compressed") {
|
|
usage |= GPUTextureUsage.RENDER_ATTACHMENT;
|
|
usage |= GPUTextureUsage.COPY_SRC;
|
|
}
|
|
const blockData = blockDataMap[source.format] || { blockBytes: 4, blockWidth: 1, blockHeight: 1 };
|
|
const width = Math.ceil(source.pixelWidth / blockData.blockWidth) * blockData.blockWidth;
|
|
const height = Math.ceil(source.pixelHeight / blockData.blockHeight) * blockData.blockHeight;
|
|
const textureDescriptor = {
|
|
label: source.label,
|
|
size: { width, height },
|
|
format: source.format,
|
|
sampleCount: source.sampleCount,
|
|
mipLevelCount: source.mipLevelCount,
|
|
dimension: source.dimension,
|
|
usage
|
|
};
|
|
const gpuTexture = this._gpu.device.createTexture(textureDescriptor);
|
|
this._gpuSources[source.uid] = gpuTexture;
|
|
if (!this.managedTextures.includes(source)) {
|
|
source.on("update", this.onSourceUpdate, this);
|
|
source.on("resize", this.onSourceResize, this);
|
|
source.on("destroy", this.onSourceDestroy, this);
|
|
source.on("unload", this.onSourceUnload, this);
|
|
source.on("updateMipmaps", this.onUpdateMipmaps, this);
|
|
this.managedTextures.push(source);
|
|
}
|
|
this.onSourceUpdate(source);
|
|
return gpuTexture;
|
|
}
|
|
onSourceUpdate(source) {
|
|
const gpuTexture = this.getGpuSource(source);
|
|
if (!gpuTexture)
|
|
return;
|
|
if (this._uploads[source.uploadMethodId]) {
|
|
this._uploads[source.uploadMethodId].upload(source, gpuTexture, this._gpu);
|
|
}
|
|
if (source.autoGenerateMipmaps && source.mipLevelCount > 1) {
|
|
this.onUpdateMipmaps(source);
|
|
}
|
|
}
|
|
onSourceUnload(source) {
|
|
const gpuTexture = this._gpuSources[source.uid];
|
|
if (gpuTexture) {
|
|
this._gpuSources[source.uid] = null;
|
|
gpuTexture.destroy();
|
|
}
|
|
}
|
|
onUpdateMipmaps(source) {
|
|
if (!this._mipmapGenerator) {
|
|
this._mipmapGenerator = new GpuMipmapGenerator(this._gpu.device);
|
|
}
|
|
const gpuTexture = this.getGpuSource(source);
|
|
this._mipmapGenerator.generateMipmap(gpuTexture);
|
|
}
|
|
onSourceDestroy(source) {
|
|
source.off("update", this.onSourceUpdate, this);
|
|
source.off("unload", this.onSourceUnload, this);
|
|
source.off("destroy", this.onSourceDestroy, this);
|
|
source.off("resize", this.onSourceResize, this);
|
|
source.off("updateMipmaps", this.onUpdateMipmaps, this);
|
|
this.managedTextures.splice(this.managedTextures.indexOf(source), 1);
|
|
this.onSourceUnload(source);
|
|
}
|
|
onSourceResize(source) {
|
|
const gpuTexture = this._gpuSources[source.uid];
|
|
if (!gpuTexture) {
|
|
this.initSource(source);
|
|
} else if (gpuTexture.width !== source.pixelWidth || gpuTexture.height !== source.pixelHeight) {
|
|
this._textureViewHash[source.uid] = null;
|
|
this._bindGroupHash[source.uid] = null;
|
|
this.onSourceUnload(source);
|
|
this.initSource(source);
|
|
}
|
|
}
|
|
_initSampler(sampler) {
|
|
this._gpuSamplers[sampler._resourceId] = this._gpu.device.createSampler(sampler);
|
|
return this._gpuSamplers[sampler._resourceId];
|
|
}
|
|
getGpuSampler(sampler) {
|
|
return this._gpuSamplers[sampler._resourceId] || this._initSampler(sampler);
|
|
}
|
|
getGpuSource(source) {
|
|
return this._gpuSources[source.uid] || this.initSource(source);
|
|
}
|
|
/**
|
|
* this returns s bind group for a specific texture, the bind group contains
|
|
* - the texture source
|
|
* - the texture style
|
|
* - the texture matrix
|
|
* This is cached so the bind group should only be created once per texture
|
|
* @param texture - the texture you want the bindgroup for
|
|
* @returns the bind group for the texture
|
|
*/
|
|
getTextureBindGroup(texture) {
|
|
var _a;
|
|
return (_a = this._bindGroupHash[texture.uid]) != null ? _a : this._createTextureBindGroup(texture);
|
|
}
|
|
_createTextureBindGroup(texture) {
|
|
const source = texture.source;
|
|
this._bindGroupHash[texture.uid] = new BindGroup({
|
|
0: source,
|
|
1: source.style,
|
|
2: new UniformGroup({
|
|
uTextureMatrix: { type: "mat3x3<f32>", value: texture.textureMatrix.mapCoord }
|
|
})
|
|
});
|
|
return this._bindGroupHash[texture.uid];
|
|
}
|
|
getTextureView(texture) {
|
|
var _a;
|
|
const source = texture.source;
|
|
return (_a = this._textureViewHash[source.uid]) != null ? _a : this._createTextureView(source);
|
|
}
|
|
_createTextureView(texture) {
|
|
this._textureViewHash[texture.uid] = this.getGpuSource(texture).createView();
|
|
return this._textureViewHash[texture.uid];
|
|
}
|
|
generateCanvas(texture) {
|
|
const renderer = this._renderer;
|
|
const commandEncoder = renderer.gpu.device.createCommandEncoder();
|
|
const canvas = DOMAdapter.get().createCanvas();
|
|
canvas.width = texture.source.pixelWidth;
|
|
canvas.height = texture.source.pixelHeight;
|
|
const context = canvas.getContext("webgpu");
|
|
context.configure({
|
|
device: renderer.gpu.device,
|
|
// eslint-disable-next-line max-len
|
|
usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC,
|
|
format: DOMAdapter.get().getNavigator().gpu.getPreferredCanvasFormat(),
|
|
alphaMode: "premultiplied"
|
|
});
|
|
commandEncoder.copyTextureToTexture({
|
|
texture: renderer.texture.getGpuSource(texture.source),
|
|
origin: {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
}, {
|
|
texture: context.getCurrentTexture()
|
|
}, {
|
|
width: canvas.width,
|
|
height: canvas.height
|
|
});
|
|
renderer.gpu.device.queue.submit([commandEncoder.finish()]);
|
|
return canvas;
|
|
}
|
|
getPixels(texture) {
|
|
const webGPUCanvas = this.generateCanvas(texture);
|
|
const canvasAndContext = CanvasPool.getOptimalCanvasAndContext(webGPUCanvas.width, webGPUCanvas.height);
|
|
const context = canvasAndContext.context;
|
|
context.drawImage(webGPUCanvas, 0, 0);
|
|
const { width, height } = webGPUCanvas;
|
|
const imageData = context.getImageData(0, 0, width, height);
|
|
const pixels = new Uint8ClampedArray(imageData.data.buffer);
|
|
CanvasPool.returnCanvasAndContext(canvasAndContext);
|
|
return { pixels, width, height };
|
|
}
|
|
destroy() {
|
|
this.managedTextures.slice().forEach((source) => this.onSourceDestroy(source));
|
|
this.managedTextures = null;
|
|
for (const k of Object.keys(this._bindGroupHash)) {
|
|
const key = Number(k);
|
|
const bindGroup = this._bindGroupHash[key];
|
|
bindGroup == null ? void 0 : bindGroup.destroy();
|
|
this._bindGroupHash[key] = null;
|
|
}
|
|
this._gpu = null;
|
|
this._mipmapGenerator = null;
|
|
this._gpuSources = null;
|
|
this._bindGroupHash = null;
|
|
this._textureViewHash = null;
|
|
this._gpuSamplers = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuTextureSystem.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUSystem
|
|
],
|
|
name: "texture"
|
|
};
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
class GpuGraphicsAdaptor {
|
|
init() {
|
|
const localUniforms = new UniformGroup({
|
|
uTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
|
|
uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
|
|
uRound: { value: 0, type: "f32" }
|
|
});
|
|
const gpuProgram = compileHighShaderGpuProgram({
|
|
name: "graphics",
|
|
bits: [
|
|
colorBit,
|
|
generateTextureBatchBit(getMaxTexturesPerBatch()),
|
|
localUniformBitGroup2,
|
|
roundPixelsBit
|
|
]
|
|
});
|
|
this.shader = new Shader({
|
|
gpuProgram,
|
|
resources: {
|
|
// added on the fly!
|
|
localUniforms
|
|
}
|
|
});
|
|
}
|
|
execute(graphicsPipe, renderable) {
|
|
const context = renderable.context;
|
|
const shader = context.customShader || this.shader;
|
|
const renderer = graphicsPipe.renderer;
|
|
const contextSystem = renderer.graphicsContext;
|
|
const {
|
|
batcher,
|
|
instructions
|
|
} = contextSystem.getContextRenderData(context);
|
|
const encoder = renderer.encoder;
|
|
encoder.setPipelineFromGeometryProgramAndState(
|
|
batcher.geometry,
|
|
shader.gpuProgram,
|
|
graphicsPipe.state
|
|
);
|
|
encoder.setGeometry(batcher.geometry, shader.gpuProgram);
|
|
const globalUniformsBindGroup = renderer.globalUniforms.bindGroup;
|
|
encoder.setBindGroup(0, globalUniformsBindGroup, shader.gpuProgram);
|
|
const localBindGroup = renderer.renderPipes.uniformBatch.getUniformBindGroup(shader.resources.localUniforms, true);
|
|
encoder.setBindGroup(2, localBindGroup, shader.gpuProgram);
|
|
const batches = instructions.instructions;
|
|
for (let i = 0; i < instructions.instructionSize; i++) {
|
|
const batch = batches[i];
|
|
shader.groups[1] = batch.bindGroup;
|
|
if (!batch.gpuBindGroup) {
|
|
const textureBatch = batch.textures;
|
|
batch.bindGroup = getTextureBatchBindGroup(textureBatch.textures, textureBatch.count);
|
|
batch.gpuBindGroup = renderer.bindGroup.getBindGroup(
|
|
batch.bindGroup,
|
|
shader.gpuProgram,
|
|
1
|
|
);
|
|
}
|
|
encoder.setBindGroup(1, batch.bindGroup, shader.gpuProgram);
|
|
encoder.renderPassEncoder.drawIndexed(batch.size, 1, batch.start);
|
|
}
|
|
}
|
|
destroy() {
|
|
this.shader.destroy(true);
|
|
this.shader = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuGraphicsAdaptor.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUPipesAdaptor
|
|
],
|
|
name: "graphics"
|
|
};
|
|
|
|
"use strict";
|
|
class GpuMeshAdapter {
|
|
init() {
|
|
const gpuProgram = compileHighShaderGpuProgram({
|
|
name: "mesh",
|
|
bits: [
|
|
localUniformBit,
|
|
textureBit,
|
|
roundPixelsBit
|
|
]
|
|
});
|
|
this._shader = new Shader({
|
|
gpuProgram,
|
|
resources: {
|
|
uTexture: Texture.EMPTY._source,
|
|
uSampler: Texture.EMPTY._source.style,
|
|
textureUniforms: {
|
|
uTextureMatrix: { type: "mat3x3<f32>", value: new Matrix() }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
execute(meshPipe, mesh) {
|
|
const renderer = meshPipe.renderer;
|
|
let shader = mesh._shader;
|
|
if (!shader) {
|
|
shader = this._shader;
|
|
shader.groups[2] = renderer.texture.getTextureBindGroup(mesh.texture);
|
|
} else if (!shader.gpuProgram) {
|
|
warn("Mesh shader has no gpuProgram", mesh.shader);
|
|
return;
|
|
}
|
|
const gpuProgram = shader.gpuProgram;
|
|
if (gpuProgram.autoAssignGlobalUniforms) {
|
|
shader.groups[0] = renderer.globalUniforms.bindGroup;
|
|
}
|
|
if (gpuProgram.autoAssignLocalUniforms) {
|
|
const localUniforms = meshPipe.localUniforms;
|
|
shader.groups[1] = renderer.renderPipes.uniformBatch.getUniformBindGroup(localUniforms, true);
|
|
}
|
|
renderer.encoder.draw({
|
|
geometry: mesh._geometry,
|
|
shader,
|
|
state: mesh.state
|
|
});
|
|
}
|
|
destroy() {
|
|
this._shader.destroy(true);
|
|
this._shader = null;
|
|
}
|
|
}
|
|
/** @ignore */
|
|
GpuMeshAdapter.extension = {
|
|
type: [
|
|
ExtensionType.WebGPUPipesAdaptor
|
|
],
|
|
name: "mesh"
|
|
};
|
|
|
|
"use strict";
|
|
const DefaultWebGPUSystems = [
|
|
...SharedSystems,
|
|
GpuUboSystem,
|
|
GpuEncoderSystem,
|
|
GpuDeviceSystem,
|
|
GpuBufferSystem,
|
|
GpuTextureSystem,
|
|
GpuRenderTargetSystem,
|
|
GpuShaderSystem,
|
|
GpuStateSystem,
|
|
PipelineSystem,
|
|
GpuColorMaskSystem,
|
|
GpuStencilSystem,
|
|
BindGroupSystem
|
|
];
|
|
const DefaultWebGPUPipes = [...SharedRenderPipes, GpuUniformBatchPipe];
|
|
const DefaultWebGPUAdapters = [GpuBatchAdaptor, GpuMeshAdapter, GpuGraphicsAdaptor];
|
|
const systems = [];
|
|
const renderPipes = [];
|
|
const renderPipeAdaptors = [];
|
|
extensions.handleByNamedList(ExtensionType.WebGPUSystem, systems);
|
|
extensions.handleByNamedList(ExtensionType.WebGPUPipes, renderPipes);
|
|
extensions.handleByNamedList(ExtensionType.WebGPUPipesAdaptor, renderPipeAdaptors);
|
|
extensions.add(...DefaultWebGPUSystems, ...DefaultWebGPUPipes, ...DefaultWebGPUAdapters);
|
|
class WebGPURenderer extends AbstractRenderer {
|
|
constructor() {
|
|
const systemConfig = {
|
|
name: "webgpu",
|
|
type: RendererType.WEBGPU,
|
|
systems,
|
|
renderPipes,
|
|
renderPipeAdaptors
|
|
};
|
|
super(systemConfig);
|
|
}
|
|
}
|
|
|
|
var WebGPURenderer$1 = {
|
|
__proto__: null,
|
|
WebGPURenderer: WebGPURenderer
|
|
};
|
|
|
|
"use strict";
|
|
const DEPRECATED_DRAW_MODES = {
|
|
POINTS: "point-list",
|
|
LINES: "line-list",
|
|
LINE_STRIP: "line-strip",
|
|
TRIANGLES: "triangle-list",
|
|
TRIANGLE_STRIP: "triangle-strip"
|
|
};
|
|
const DRAW_MODES = new Proxy(DEPRECATED_DRAW_MODES, {
|
|
get(target, prop) {
|
|
deprecation(v8_0_0, `DRAW_MODES.${prop} is deprecated, use '${DEPRECATED_DRAW_MODES[prop]}' instead`);
|
|
return target[prop];
|
|
}
|
|
});
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
const fullFrame = new Rectangle(0, 0, 1, 1);
|
|
function viewportFromFrame(viewport, source, frame) {
|
|
frame || (frame = fullFrame);
|
|
const pixelWidth = source.pixelWidth;
|
|
const pixelHeight = source.pixelHeight;
|
|
viewport.x = frame.x * pixelWidth | 0;
|
|
viewport.y = frame.y * pixelHeight | 0;
|
|
viewport.width = frame.width * pixelWidth | 0;
|
|
viewport.height = frame.height * pixelHeight | 0;
|
|
return viewport;
|
|
}
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
var MSAA_QUALITY = /* @__PURE__ */ ((MSAA_QUALITY2) => {
|
|
MSAA_QUALITY2[MSAA_QUALITY2["NONE"] = 0] = "NONE";
|
|
MSAA_QUALITY2[MSAA_QUALITY2["LOW"] = 2] = "LOW";
|
|
MSAA_QUALITY2[MSAA_QUALITY2["MEDIUM"] = 4] = "MEDIUM";
|
|
MSAA_QUALITY2[MSAA_QUALITY2["HIGH"] = 8] = "HIGH";
|
|
return MSAA_QUALITY2;
|
|
})(MSAA_QUALITY || {});
|
|
var DEPRECATED_WRAP_MODES = /* @__PURE__ */ ((DEPRECATED_WRAP_MODES2) => {
|
|
DEPRECATED_WRAP_MODES2["CLAMP"] = "clamp-to-edge";
|
|
DEPRECATED_WRAP_MODES2["REPEAT"] = "repeat";
|
|
DEPRECATED_WRAP_MODES2["MIRRORED_REPEAT"] = "mirror-repeat";
|
|
return DEPRECATED_WRAP_MODES2;
|
|
})(DEPRECATED_WRAP_MODES || {});
|
|
const WRAP_MODES = new Proxy(DEPRECATED_WRAP_MODES, {
|
|
get(target, prop) {
|
|
deprecation(v8_0_0, `DRAW_MODES.${prop} is deprecated, use '${DEPRECATED_WRAP_MODES[prop]}' instead`);
|
|
return target[prop];
|
|
}
|
|
});
|
|
var DEPRECATED_SCALE_MODES = /* @__PURE__ */ ((DEPRECATED_SCALE_MODES2) => {
|
|
DEPRECATED_SCALE_MODES2["NEAREST"] = "nearest";
|
|
DEPRECATED_SCALE_MODES2["LINEAR"] = "linear";
|
|
return DEPRECATED_SCALE_MODES2;
|
|
})(DEPRECATED_SCALE_MODES || {});
|
|
const SCALE_MODES = new Proxy(DEPRECATED_SCALE_MODES, {
|
|
get(target, prop) {
|
|
deprecation(v8_0_0, `DRAW_MODES.${prop} is deprecated, use '${DEPRECATED_SCALE_MODES[prop]}' instead`);
|
|
return target[prop];
|
|
}
|
|
});
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
class TextureUvs {
|
|
constructor() {
|
|
this.x0 = 0;
|
|
this.y0 = 0;
|
|
this.x1 = 1;
|
|
this.y1 = 0;
|
|
this.x2 = 1;
|
|
this.y2 = 1;
|
|
this.x3 = 0;
|
|
this.y3 = 1;
|
|
this.uvsFloat32 = new Float32Array(8);
|
|
}
|
|
/**
|
|
* Sets the texture Uvs based on the given frame information.
|
|
* @protected
|
|
* @param frame - The frame of the texture
|
|
* @param baseFrame - The base frame of the texture
|
|
* @param rotate - Rotation of frame, see {@link groupD8}
|
|
*/
|
|
set(frame, baseFrame, rotate) {
|
|
const tw = baseFrame.width;
|
|
const th = baseFrame.height;
|
|
if (rotate) {
|
|
const w2 = frame.width / 2 / tw;
|
|
const h2 = frame.height / 2 / th;
|
|
const cX = frame.x / tw + w2;
|
|
const cY = frame.y / th + h2;
|
|
rotate = groupD8.add(rotate, groupD8.NW);
|
|
this.x0 = cX + w2 * groupD8.uX(rotate);
|
|
this.y0 = cY + h2 * groupD8.uY(rotate);
|
|
rotate = groupD8.add(rotate, 2);
|
|
this.x1 = cX + w2 * groupD8.uX(rotate);
|
|
this.y1 = cY + h2 * groupD8.uY(rotate);
|
|
rotate = groupD8.add(rotate, 2);
|
|
this.x2 = cX + w2 * groupD8.uX(rotate);
|
|
this.y2 = cY + h2 * groupD8.uY(rotate);
|
|
rotate = groupD8.add(rotate, 2);
|
|
this.x3 = cX + w2 * groupD8.uX(rotate);
|
|
this.y3 = cY + h2 * groupD8.uY(rotate);
|
|
} else {
|
|
this.x0 = frame.x / tw;
|
|
this.y0 = frame.y / th;
|
|
this.x1 = (frame.x + frame.width) / tw;
|
|
this.y1 = frame.y / th;
|
|
this.x2 = (frame.x + frame.width) / tw;
|
|
this.y2 = (frame.y + frame.height) / th;
|
|
this.x3 = frame.x / tw;
|
|
this.y3 = (frame.y + frame.height) / th;
|
|
}
|
|
this.uvsFloat32[0] = this.x0;
|
|
this.uvsFloat32[1] = this.y0;
|
|
this.uvsFloat32[2] = this.x1;
|
|
this.uvsFloat32[3] = this.y1;
|
|
this.uvsFloat32[4] = this.x2;
|
|
this.uvsFloat32[5] = this.y2;
|
|
this.uvsFloat32[6] = this.x3;
|
|
this.uvsFloat32[7] = this.y3;
|
|
}
|
|
toString() {
|
|
return `[pixi.js/core:TextureUvs x0=${this.x0} y0=${this.y0} x1=${this.x1} y1=${this.y1} x2=${this.x2} y2=${this.y2} x3=${this.x3} y3=${this.y3}]`;
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
let uidCount = 0;
|
|
function generateUID() {
|
|
return uidCount++;
|
|
}
|
|
|
|
"use strict";
|
|
function parseFunctionBody(fn) {
|
|
const fnStr = fn.toString();
|
|
const bodyStart = fnStr.indexOf("{");
|
|
const bodyEnd = fnStr.lastIndexOf("}");
|
|
if (bodyStart === -1 || bodyEnd === -1) {
|
|
throw new Error("getFunctionBody: No body found in function definition");
|
|
}
|
|
return fnStr.slice(bodyStart + 1, bodyEnd).trim();
|
|
}
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
var __defProp$7 = Object.defineProperty;
|
|
var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$7 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$7.call(b, prop))
|
|
__defNormalProp$7(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$7)
|
|
for (var prop of __getOwnPropSymbols$7(b)) {
|
|
if (__propIsEnum$7.call(b, prop))
|
|
__defNormalProp$7(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest$5 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$7)
|
|
for (var prop of __getOwnPropSymbols$7(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class RenderContainer extends Container {
|
|
/**
|
|
* @param options - The options for the container.
|
|
*/
|
|
constructor(options) {
|
|
var _b, _c;
|
|
if (typeof options === "function") {
|
|
options = { render: options };
|
|
}
|
|
const _a = options, { render } = _a, rest = __objRest$5(_a, ["render"]);
|
|
super(__spreadValues$7({
|
|
label: "RenderContainer"
|
|
}, rest));
|
|
this.batched = false;
|
|
this._lastUsed = 0;
|
|
this._lastInstructionTick = -1;
|
|
/**
|
|
* The local bounds of the sprite.
|
|
* @type {rendering.Bounds}
|
|
*/
|
|
this.bounds = new Bounds();
|
|
this.canBundle = false;
|
|
this.renderPipeId = "customRender";
|
|
if (render)
|
|
this.render = render;
|
|
this.containsPoint = (_b = options.containsPoint) != null ? _b : () => false;
|
|
this.addBounds = (_c = options.addBounds) != null ? _c : () => false;
|
|
}
|
|
/**
|
|
* An overridable function that can be used to render the object using the current renderer.
|
|
* @param _renderer - The current renderer
|
|
*/
|
|
render(_renderer) {
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function updateLocalTransform(lt, container) {
|
|
const scale = container._scale;
|
|
const pivot = container._pivot;
|
|
const position = container._position;
|
|
const sx = scale._x;
|
|
const sy = scale._y;
|
|
const px = pivot._x;
|
|
const py = pivot._y;
|
|
lt.a = container._cx * sx;
|
|
lt.b = container._sx * sx;
|
|
lt.c = container._cy * sy;
|
|
lt.d = container._sy * sy;
|
|
lt.tx = position._x - (px * lt.a + py * lt.c);
|
|
lt.ty = position._y - (px * lt.b + py * lt.d);
|
|
}
|
|
|
|
"use strict";
|
|
function updateWorldTransform(local, parent, world) {
|
|
const lta = local.a;
|
|
const ltb = local.b;
|
|
const ltc = local.c;
|
|
const ltd = local.d;
|
|
const lttx = local.tx;
|
|
const ltty = local.ty;
|
|
const pta = parent.a;
|
|
const ptb = parent.b;
|
|
const ptc = parent.c;
|
|
const ptd = parent.d;
|
|
world.a = lta * pta + ltb * ptc;
|
|
world.b = lta * ptb + ltb * ptd;
|
|
world.c = ltc * pta + ltd * ptc;
|
|
world.d = ltc * ptb + ltd * ptd;
|
|
world.tx = lttx * pta + ltty * ptc + parent.tx;
|
|
world.ty = lttx * ptb + ltty * ptd + parent.ty;
|
|
}
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
const buildMap = {
|
|
rectangle: buildRectangle,
|
|
polygon: buildPolygon,
|
|
triangle: buildTriangle,
|
|
circle: buildCircle,
|
|
ellipse: buildCircle,
|
|
roundedRectangle: buildCircle
|
|
};
|
|
function buildGeometryFromPath(options) {
|
|
if (options instanceof GraphicsPath) {
|
|
options = {
|
|
path: options,
|
|
textureMatrix: null,
|
|
out: null
|
|
};
|
|
}
|
|
const vertices = [];
|
|
const uvs = [];
|
|
const indices = [];
|
|
const shapePath = options.path.shapePath;
|
|
const textureMatrix = options.textureMatrix;
|
|
shapePath.shapePrimitives.forEach(({ shape, transform: matrix }) => {
|
|
const indexOffset = indices.length;
|
|
const vertOffset = vertices.length / 2;
|
|
const points = [];
|
|
const build = buildMap[shape.type];
|
|
build.build(shape, points);
|
|
if (matrix) {
|
|
transformVertices(points, matrix);
|
|
}
|
|
build.triangulate(points, vertices, 2, vertOffset, indices, indexOffset);
|
|
const uvsOffset = uvs.length / 2;
|
|
if (textureMatrix) {
|
|
if (matrix) {
|
|
textureMatrix.append(matrix.clone().invert());
|
|
}
|
|
buildUvs(vertices, 2, vertOffset, uvs, uvsOffset, 2, vertices.length / 2 - vertOffset, textureMatrix);
|
|
} else {
|
|
buildSimpleUvs(uvs, uvsOffset, 2, vertices.length / 2 - vertOffset);
|
|
}
|
|
});
|
|
const out = options.out;
|
|
if (out) {
|
|
out.positions = new Float32Array(vertices);
|
|
out.uvs = new Float32Array(uvs);
|
|
out.indices = new Uint32Array(indices);
|
|
return out;
|
|
}
|
|
const geometry = new MeshGeometry({
|
|
positions: new Float32Array(vertices),
|
|
uvs: new Float32Array(uvs),
|
|
indices: new Uint32Array(indices)
|
|
});
|
|
return geometry;
|
|
}
|
|
|
|
"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();
|
|
}
|
|
|
|
"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
|
|
);
|
|
}
|
|
|
|
"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
|
|
);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$6 = Object.defineProperty;
|
|
var __defProps$4 = Object.defineProperties;
|
|
var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$6 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$6.call(b, prop))
|
|
__defNormalProp$6(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$6)
|
|
for (var prop of __getOwnPropSymbols$6(b)) {
|
|
if (__propIsEnum$6.call(b, prop))
|
|
__defNormalProp$6(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
|
|
var __objRest$4 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$6)
|
|
for (var prop of __getOwnPropSymbols$6(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
const _PerspectiveMesh = class _PerspectiveMesh extends Mesh {
|
|
/**
|
|
* @param options - Options to be applied to PerspectiveMesh
|
|
*/
|
|
constructor(options) {
|
|
options = __spreadValues$6(__spreadValues$6({}, _PerspectiveMesh.defaultOptions), options);
|
|
const _a = options, { texture, verticesX, verticesY } = _a, rest = __objRest$4(_a, ["texture", "verticesX", "verticesY"]);
|
|
const planeGeometry = new PerspectivePlaneGeometry(definedProps({
|
|
width: texture.width,
|
|
height: texture.height,
|
|
verticesX,
|
|
verticesY
|
|
}));
|
|
super(definedProps(__spreadProps$4(__spreadValues$6({}, 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;
|
|
|
|
"use strict";
|
|
var __defProp$5 = Object.defineProperty;
|
|
var __defProps$3 = Object.defineProperties;
|
|
var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$5 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$5.call(b, prop))
|
|
__defNormalProp$5(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$5)
|
|
for (var prop of __getOwnPropSymbols$5(b)) {
|
|
if (__propIsEnum$5.call(b, prop))
|
|
__defNormalProp$5(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
|
|
var __objRest$3 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$5)
|
|
for (var prop of __getOwnPropSymbols$5(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class MeshPlane extends Mesh {
|
|
/**
|
|
* @param options - Options to be applied to MeshPlane
|
|
*/
|
|
constructor(options) {
|
|
const _a = options, { texture, verticesX, verticesY } = _a, rest = __objRest$3(_a, ["texture", "verticesX", "verticesY"]);
|
|
const planeGeometry = new PlaneGeometry(definedProps({
|
|
width: texture.width,
|
|
height: texture.height,
|
|
verticesX,
|
|
verticesY
|
|
}));
|
|
super(definedProps(__spreadProps$3(__spreadValues$5({}, rest), { geometry: planeGeometry, texture })));
|
|
this.texture = texture;
|
|
this.autoResize = true;
|
|
}
|
|
/**
|
|
* Method used for overrides, to do something in case texture frame was changed.
|
|
* Meshes based on plane can override it and change more details based on texture.
|
|
*/
|
|
textureUpdated() {
|
|
const geometry = this.geometry;
|
|
const { width, height } = this.texture;
|
|
if (this.autoResize && (geometry.width !== width || geometry.height !== height)) {
|
|
geometry.width = width;
|
|
geometry.height = height;
|
|
geometry.build({});
|
|
}
|
|
}
|
|
set texture(value) {
|
|
var _a;
|
|
(_a = this._texture) == null ? void 0 : _a.off("update", this.textureUpdated, this);
|
|
super.texture = value;
|
|
value.on("update", this.textureUpdated, this);
|
|
this.textureUpdated();
|
|
}
|
|
/** The texture of the MeshPlane */
|
|
get texture() {
|
|
return this._texture;
|
|
}
|
|
/**
|
|
* Destroys this sprite renderable and optionally its texture.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
* have been set to that value
|
|
* @param {boolean} [options.texture=false] - Should it destroy the current texture of the renderable as well
|
|
* @param {boolean} [options.textureSource=false] - Should it destroy the textureSource of the renderable as well
|
|
*/
|
|
destroy(options) {
|
|
this.texture.off("update", this.textureUpdated, this);
|
|
super.destroy(options);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$4 = Object.defineProperty;
|
|
var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$4 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$4.call(b, prop))
|
|
__defNormalProp$4(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$4)
|
|
for (var prop of __getOwnPropSymbols$4(b)) {
|
|
if (__propIsEnum$4.call(b, prop))
|
|
__defNormalProp$4(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _RopeGeometry = class _RopeGeometry extends MeshGeometry {
|
|
/**
|
|
* @param options - Options to be applied to rope geometry
|
|
*/
|
|
constructor(options) {
|
|
const { width, points, textureScale } = __spreadValues$4(__spreadValues$4({}, _RopeGeometry.defaultOptions), options);
|
|
super({
|
|
positions: new Float32Array(points.length * 4),
|
|
uvs: new Float32Array(points.length * 4),
|
|
indices: new Uint32Array((points.length - 1) * 6)
|
|
});
|
|
this.points = points;
|
|
this._width = width;
|
|
this.textureScale = textureScale;
|
|
this._build();
|
|
}
|
|
/**
|
|
* The width (i.e., thickness) of the rope.
|
|
* @readonly
|
|
*/
|
|
get width() {
|
|
return this._width;
|
|
}
|
|
/** Refreshes Rope indices and uvs */
|
|
_build() {
|
|
const points = this.points;
|
|
if (!points)
|
|
return;
|
|
const vertexBuffer = this.getBuffer("aPosition");
|
|
const uvBuffer = this.getBuffer("aUV");
|
|
const indexBuffer = this.getIndex();
|
|
if (points.length < 1) {
|
|
return;
|
|
}
|
|
if (vertexBuffer.data.length / 4 !== points.length) {
|
|
vertexBuffer.data = new Float32Array(points.length * 4);
|
|
uvBuffer.data = new Float32Array(points.length * 4);
|
|
indexBuffer.data = new Uint16Array((points.length - 1) * 6);
|
|
}
|
|
const uvs = uvBuffer.data;
|
|
const indices = indexBuffer.data;
|
|
uvs[0] = 0;
|
|
uvs[1] = 0;
|
|
uvs[2] = 0;
|
|
uvs[3] = 1;
|
|
let amount = 0;
|
|
let prev = points[0];
|
|
const textureWidth = this._width * this.textureScale;
|
|
const total = points.length;
|
|
for (let i = 0; i < total; i++) {
|
|
const index = i * 4;
|
|
if (this.textureScale > 0) {
|
|
const dx = prev.x - points[i].x;
|
|
const dy = prev.y - points[i].y;
|
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
prev = points[i];
|
|
amount += distance / textureWidth;
|
|
} else {
|
|
amount = i / (total - 1);
|
|
}
|
|
uvs[index] = amount;
|
|
uvs[index + 1] = 0;
|
|
uvs[index + 2] = amount;
|
|
uvs[index + 3] = 1;
|
|
}
|
|
let indexCount = 0;
|
|
for (let i = 0; i < total - 1; i++) {
|
|
const index = i * 2;
|
|
indices[indexCount++] = index;
|
|
indices[indexCount++] = index + 1;
|
|
indices[indexCount++] = index + 2;
|
|
indices[indexCount++] = index + 2;
|
|
indices[indexCount++] = index + 1;
|
|
indices[indexCount++] = index + 3;
|
|
}
|
|
uvBuffer.update();
|
|
indexBuffer.update();
|
|
this.updateVertices();
|
|
}
|
|
/** refreshes vertices of Rope mesh */
|
|
updateVertices() {
|
|
const points = this.points;
|
|
if (points.length < 1) {
|
|
return;
|
|
}
|
|
let lastPoint = points[0];
|
|
let nextPoint;
|
|
let perpX = 0;
|
|
let perpY = 0;
|
|
const vertices = this.buffers[0].data;
|
|
const total = points.length;
|
|
const halfWidth = this.textureScale > 0 ? this.textureScale * this._width / 2 : this._width / 2;
|
|
for (let i = 0; i < total; i++) {
|
|
const point = points[i];
|
|
const index = i * 4;
|
|
if (i < points.length - 1) {
|
|
nextPoint = points[i + 1];
|
|
} else {
|
|
nextPoint = point;
|
|
}
|
|
perpY = -(nextPoint.x - lastPoint.x);
|
|
perpX = nextPoint.y - lastPoint.y;
|
|
let ratio = (1 - i / (total - 1)) * 10;
|
|
if (ratio > 1) {
|
|
ratio = 1;
|
|
}
|
|
const perpLength = Math.sqrt(perpX * perpX + perpY * perpY);
|
|
if (perpLength < 1e-6) {
|
|
perpX = 0;
|
|
perpY = 0;
|
|
} else {
|
|
perpX /= perpLength;
|
|
perpY /= perpLength;
|
|
perpX *= halfWidth;
|
|
perpY *= halfWidth;
|
|
}
|
|
vertices[index] = point.x + perpX;
|
|
vertices[index + 1] = point.y + perpY;
|
|
vertices[index + 2] = point.x - perpX;
|
|
vertices[index + 3] = point.y - perpY;
|
|
lastPoint = point;
|
|
}
|
|
this.buffers[0].update();
|
|
}
|
|
/** Refreshes Rope indices and uvs */
|
|
update() {
|
|
if (this.textureScale > 0) {
|
|
this._build();
|
|
} else {
|
|
this.updateVertices();
|
|
}
|
|
}
|
|
};
|
|
/** Default options for RopeGeometry constructor. */
|
|
_RopeGeometry.defaultOptions = {
|
|
/** The width (i.e., thickness) of the rope. */
|
|
width: 200,
|
|
/** An array of points that determine the rope. */
|
|
points: [],
|
|
/** Rope texture scale, if zero then the rope texture is stretched. */
|
|
textureScale: 0
|
|
};
|
|
let RopeGeometry = _RopeGeometry;
|
|
|
|
"use strict";
|
|
var __defProp$3 = Object.defineProperty;
|
|
var __defProps$2 = Object.defineProperties;
|
|
var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$3 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$3.call(b, prop))
|
|
__defNormalProp$3(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$3)
|
|
for (var prop of __getOwnPropSymbols$3(b)) {
|
|
if (__propIsEnum$3.call(b, prop))
|
|
__defNormalProp$3(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
var __objRest$2 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$3)
|
|
for (var prop of __getOwnPropSymbols$3(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
const _MeshRope = class _MeshRope extends Mesh {
|
|
/**
|
|
* Note: The wrap mode of the texture is set to REPEAT if `textureScale` is positive.
|
|
* @param options
|
|
* @param options.texture - The texture to use on the rope.
|
|
* @param options.points - An array of {@link math.Point} objects to construct this rope.
|
|
* @param {number} options.textureScale - Optional. Positive values scale rope texture
|
|
* keeping its aspect ratio. You can reduce alpha channel artifacts by providing a larger texture
|
|
* and downsampling here. If set to zero, texture will be stretched instead.
|
|
*/
|
|
constructor(options) {
|
|
const _a = __spreadValues$3(__spreadValues$3({}, _MeshRope.defaultOptions), options), { texture, points, textureScale } = _a, rest = __objRest$2(_a, ["texture", "points", "textureScale"]);
|
|
const ropeGeometry = new RopeGeometry(definedProps({ width: texture.height, points, textureScale }));
|
|
if (textureScale > 0) {
|
|
texture.source.style.addressMode = "repeat";
|
|
}
|
|
super(definedProps(__spreadProps$2(__spreadValues$3({}, rest), {
|
|
texture,
|
|
geometry: ropeGeometry
|
|
})));
|
|
this.autoUpdate = true;
|
|
this.onRender = this._render;
|
|
}
|
|
_render() {
|
|
const geometry = this.geometry;
|
|
if (this.autoUpdate || geometry._width !== this.texture.height) {
|
|
geometry._width = this.texture.height;
|
|
geometry.update();
|
|
}
|
|
}
|
|
};
|
|
_MeshRope.defaultOptions = {
|
|
textureScale: 0
|
|
};
|
|
let MeshRope = _MeshRope;
|
|
|
|
"use strict";
|
|
var __defProp$2 = Object.defineProperty;
|
|
var __defProps$1 = Object.defineProperties;
|
|
var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$2 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$2.call(b, prop))
|
|
__defNormalProp$2(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$2)
|
|
for (var prop of __getOwnPropSymbols$2(b)) {
|
|
if (__propIsEnum$2.call(b, prop))
|
|
__defNormalProp$2(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
var __objRest$1 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$2)
|
|
for (var prop of __getOwnPropSymbols$2(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
class MeshSimple extends Mesh {
|
|
/**
|
|
* @param options - Options to be used for construction
|
|
*/
|
|
constructor(options) {
|
|
const _a = options, { texture, vertices, uvs, indices, topology } = _a, rest = __objRest$1(_a, ["texture", "vertices", "uvs", "indices", "topology"]);
|
|
const geometry = new MeshGeometry(definedProps({
|
|
positions: vertices,
|
|
uvs,
|
|
indices,
|
|
topology
|
|
}));
|
|
super(definedProps(__spreadProps$1(__spreadValues$2({}, rest), {
|
|
texture,
|
|
geometry
|
|
})));
|
|
this.autoUpdate = true;
|
|
this.onRender = this._render;
|
|
}
|
|
/**
|
|
* Collection of vertices data.
|
|
* @type {Float32Array}
|
|
*/
|
|
get vertices() {
|
|
return this.geometry.getBuffer("aPosition").data;
|
|
}
|
|
set vertices(value) {
|
|
this.geometry.getBuffer("aPosition").data = value;
|
|
}
|
|
_render() {
|
|
if (this.autoUpdate) {
|
|
this.geometry.getBuffer("aPosition").update();
|
|
}
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function getTextureDefaultMatrix(texture, out) {
|
|
const { width, height } = texture.frame;
|
|
out.scale(1 / width, 1 / height);
|
|
return out;
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp$1 = Object.defineProperty;
|
|
var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues$1 = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp$1.call(b, prop))
|
|
__defNormalProp$1(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols$1)
|
|
for (var prop of __getOwnPropSymbols$1(b)) {
|
|
if (__propIsEnum$1.call(b, prop))
|
|
__defNormalProp$1(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __objRest = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$1)
|
|
for (var prop of __getOwnPropSymbols$1(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
const _NineSliceSprite = class _NineSliceSprite extends ViewContainer {
|
|
/**
|
|
* @param {scene.NineSliceSpriteOptions|Texture} options - Options to use
|
|
* @param options.texture - The texture to use on the NineSliceSprite.
|
|
* @param options.leftWidth - Width of the left vertical bar (A)
|
|
* @param options.topHeight - Height of the top horizontal bar (C)
|
|
* @param options.rightWidth - Width of the right vertical bar (B)
|
|
* @param options.bottomHeight - Height of the bottom horizontal bar (D)
|
|
* @param options.width - Width of the NineSliceSprite,
|
|
* setting this will actually modify the vertices and not the UV's of this plane.
|
|
* @param options.height - Height of the NineSliceSprite,
|
|
* setting this will actually modify the vertices and not UV's of this plane.
|
|
*/
|
|
constructor(options) {
|
|
var _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
|
|
if (options instanceof Texture) {
|
|
options = { texture: options };
|
|
}
|
|
const _a = options, {
|
|
width,
|
|
height,
|
|
leftWidth,
|
|
rightWidth,
|
|
topHeight,
|
|
bottomHeight,
|
|
texture,
|
|
roundPixels
|
|
} = _a, rest = __objRest(_a, [
|
|
"width",
|
|
"height",
|
|
"leftWidth",
|
|
"rightWidth",
|
|
"topHeight",
|
|
"bottomHeight",
|
|
"texture",
|
|
"roundPixels"
|
|
]);
|
|
super(__spreadValues$1({
|
|
label: "NineSliceSprite"
|
|
}, rest));
|
|
this.renderPipeId = "nineSliceSprite";
|
|
this.batched = true;
|
|
this._didSpriteUpdate = true;
|
|
this._leftWidth = (_c = leftWidth != null ? leftWidth : (_b = texture == null ? void 0 : texture.defaultBorders) == null ? void 0 : _b.left) != null ? _c : NineSliceGeometry.defaultOptions.leftWidth;
|
|
this._topHeight = (_e = topHeight != null ? topHeight : (_d = texture == null ? void 0 : texture.defaultBorders) == null ? void 0 : _d.top) != null ? _e : NineSliceGeometry.defaultOptions.topHeight;
|
|
this._rightWidth = (_g = rightWidth != null ? rightWidth : (_f = texture == null ? void 0 : texture.defaultBorders) == null ? void 0 : _f.right) != null ? _g : NineSliceGeometry.defaultOptions.rightWidth;
|
|
this._bottomHeight = (_i = bottomHeight != null ? bottomHeight : (_h = texture == null ? void 0 : texture.defaultBorders) == null ? void 0 : _h.bottom) != null ? _i : NineSliceGeometry.defaultOptions.bottomHeight;
|
|
this.bounds.maxX = this._width = (_j = width != null ? width : texture.width) != null ? _j : NineSliceGeometry.defaultOptions.width;
|
|
this.bounds.maxY = this._height = (_k = height != null ? height : texture.height) != null ? _k : NineSliceGeometry.defaultOptions.height;
|
|
this.allowChildren = false;
|
|
this.texture = texture != null ? texture : _NineSliceSprite.defaultOptions.texture;
|
|
this.roundPixels = roundPixels != null ? roundPixels : false;
|
|
}
|
|
/** The local bounds of the view. */
|
|
get bounds() {
|
|
return this._bounds;
|
|
}
|
|
/** The width of the NineSliceSprite, setting this will actually modify the vertices and UV's of this plane. */
|
|
get width() {
|
|
return this._width;
|
|
}
|
|
set width(value) {
|
|
this.bounds.maxX = this._width = value;
|
|
this.onViewUpdate();
|
|
}
|
|
/** The height of the NineSliceSprite, setting this will actually modify the vertices and UV's of this plane. */
|
|
get height() {
|
|
return this._height;
|
|
}
|
|
set height(value) {
|
|
this.bounds.maxY = this._height = value;
|
|
this.onViewUpdate();
|
|
}
|
|
/**
|
|
* Sets the size of the NiceSliceSprite to the specified width and height.
|
|
* setting this will actually modify the vertices and UV's of this plane
|
|
* This is faster than setting the width and height separately.
|
|
* @param value - This can be either a number or a [Size]{@link Size} object.
|
|
* @param height - The height to set. Defaults to the value of `width` if not provided.
|
|
*/
|
|
setSize(value, height) {
|
|
var _a;
|
|
if (typeof value === "object") {
|
|
height = (_a = value.height) != null ? _a : value.width;
|
|
value = value.width;
|
|
}
|
|
this.bounds.maxX = this._width = value;
|
|
this.bounds.maxY = this._height = height != null ? height : value;
|
|
this.onViewUpdate();
|
|
}
|
|
/**
|
|
* Retrieves the size of the NineSliceSprite as a [Size]{@link Size} object.
|
|
* This is faster than get the width and height separately.
|
|
* @param out - Optional object to store the size in.
|
|
* @returns - The size of the NineSliceSprite.
|
|
*/
|
|
getSize(out) {
|
|
out || (out = {});
|
|
out.width = this._width;
|
|
out.height = this._height;
|
|
return out;
|
|
}
|
|
/** The width of the left column (a) of the NineSliceSprite. */
|
|
get leftWidth() {
|
|
return this._leftWidth;
|
|
}
|
|
set leftWidth(value) {
|
|
this._leftWidth = value;
|
|
this.onViewUpdate();
|
|
}
|
|
/** The width of the right column (b) of the NineSliceSprite. */
|
|
get topHeight() {
|
|
return this._topHeight;
|
|
}
|
|
set topHeight(value) {
|
|
this._topHeight = value;
|
|
this.onViewUpdate();
|
|
}
|
|
/** The width of the right column (b) of the NineSliceSprite. */
|
|
get rightWidth() {
|
|
return this._rightWidth;
|
|
}
|
|
set rightWidth(value) {
|
|
this._rightWidth = value;
|
|
this.onViewUpdate();
|
|
}
|
|
/** The width of the right column (b) of the NineSliceSprite. */
|
|
get bottomHeight() {
|
|
return this._bottomHeight;
|
|
}
|
|
set bottomHeight(value) {
|
|
this._bottomHeight = value;
|
|
this.onViewUpdate();
|
|
}
|
|
/** The texture that the NineSliceSprite is using. */
|
|
get texture() {
|
|
return this._texture;
|
|
}
|
|
set texture(value) {
|
|
value || (value = Texture.EMPTY);
|
|
const currentTexture = this._texture;
|
|
if (currentTexture === value)
|
|
return;
|
|
if (currentTexture && currentTexture.dynamic)
|
|
currentTexture.off("update", this.onViewUpdate, this);
|
|
if (value.dynamic)
|
|
value.on("update", this.onViewUpdate, this);
|
|
this._texture = value;
|
|
this.onViewUpdate();
|
|
}
|
|
/** The original width of the texture */
|
|
get originalWidth() {
|
|
return this._texture.width;
|
|
}
|
|
/** The original height of the texture */
|
|
get originalHeight() {
|
|
return this._texture.height;
|
|
}
|
|
onViewUpdate() {
|
|
this._didViewChangeTick++;
|
|
this._didSpriteUpdate = true;
|
|
if (this.didViewUpdate)
|
|
return;
|
|
this.didViewUpdate = true;
|
|
const renderGroup = this.renderGroup || this.parentRenderGroup;
|
|
if (renderGroup) {
|
|
renderGroup.onChildViewUpdate(this);
|
|
}
|
|
}
|
|
/**
|
|
* Adds the bounds of this object to the bounds object.
|
|
* @param bounds - The output bounds object.
|
|
*/
|
|
addBounds(bounds) {
|
|
const _bounds = this.bounds;
|
|
bounds.addFrame(_bounds.minX, _bounds.minY, _bounds.maxX, _bounds.maxY);
|
|
}
|
|
/**
|
|
* Destroys this sprite renderable and optionally its texture.
|
|
* @param options - Options parameter. A boolean will act as if all options
|
|
* have been set to that value
|
|
* @param {boolean} [options.texture=false] - Should it destroy the current texture of the renderable as well
|
|
* @param {boolean} [options.textureSource=false] - Should it destroy the textureSource of the renderable as well
|
|
*/
|
|
destroy(options) {
|
|
super.destroy(options);
|
|
const destroyTexture = typeof options === "boolean" ? options : options == null ? void 0 : options.texture;
|
|
if (destroyTexture) {
|
|
const destroyTextureSource = typeof options === "boolean" ? options : options == null ? void 0 : options.textureSource;
|
|
this._texture.destroy(destroyTextureSource);
|
|
}
|
|
this._texture = null;
|
|
}
|
|
};
|
|
/** The default options, used to override the initial values of any options passed in the constructor. */
|
|
_NineSliceSprite.defaultOptions = {
|
|
/** @default Texture.EMPTY */
|
|
texture: Texture.EMPTY
|
|
};
|
|
let NineSliceSprite = _NineSliceSprite;
|
|
class NineSlicePlane extends NineSliceSprite {
|
|
constructor(...args) {
|
|
let options = args[0];
|
|
if (options instanceof Texture) {
|
|
deprecation(v8_0_0, "NineSlicePlane now uses the options object {texture, leftWidth, rightWidth, topHeight, bottomHeight}");
|
|
options = {
|
|
texture: options,
|
|
leftWidth: args[1],
|
|
topHeight: args[2],
|
|
rightWidth: args[3],
|
|
bottomHeight: args[4]
|
|
};
|
|
}
|
|
deprecation(v8_0_0, "NineSlicePlane is deprecated. Use NineSliceSprite instead.");
|
|
super(options);
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
function ensureTextStyle(renderMode, style) {
|
|
if (style instanceof TextStyle || style instanceof HTMLTextStyle) {
|
|
return style;
|
|
}
|
|
return renderMode === "html" ? new HTMLTextStyle(style) : new TextStyle(style);
|
|
}
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
async function logDebugTexture(texture, renderer, size = 200) {
|
|
const base64 = await renderer.extract.base64(texture);
|
|
await renderer.encoder.commandFinished;
|
|
const width = size;
|
|
console.log(`logging texture ${texture.source.width}px ${texture.source.height}px`);
|
|
const style = [
|
|
"font-size: 1px;",
|
|
`padding: ${width}px ${300}px;`,
|
|
`background: url(${base64}) no-repeat;`,
|
|
"background-size: contain;"
|
|
].join(" ");
|
|
console.log("%c ", style);
|
|
}
|
|
|
|
"use strict";
|
|
var __defProp = Object.defineProperty;
|
|
var __defProps = Object.defineProperties;
|
|
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols)
|
|
for (var prop of __getOwnPropSymbols(b)) {
|
|
if (__propIsEnum.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
const colors = [
|
|
"#000080",
|
|
// Navy Blue
|
|
"#228B22",
|
|
// Forest Green
|
|
"#8B0000",
|
|
// Dark Red
|
|
"#4169E1",
|
|
// Royal Blue
|
|
"#008080",
|
|
// Teal
|
|
"#800000",
|
|
// Maroon
|
|
"#9400D3",
|
|
// Dark Violet
|
|
"#FF8C00",
|
|
// Dark Orange
|
|
"#556B2F",
|
|
// Olive Green
|
|
"#8B008B"
|
|
// Dark Magenta
|
|
];
|
|
let colorTick = 0;
|
|
function logScene(container, depth = 0, data = { color: "#000000" }) {
|
|
if (container.renderGroup) {
|
|
data.color = colors[colorTick++];
|
|
}
|
|
let spaces = "";
|
|
for (let i = 0; i < depth; i++) {
|
|
spaces += " ";
|
|
}
|
|
let label = container.label;
|
|
if (!label && container instanceof Sprite) {
|
|
label = `sprite:${container.texture.label}`;
|
|
}
|
|
let output = `%c ${spaces}|- ${label} (worldX:${container.worldTransform.tx}, relativeRenderX:${container.relativeGroupTransform.tx}, renderX:${container.groupTransform.tx}, localX:${container.x})`;
|
|
if (container.renderGroup) {
|
|
output += " (RenderGroup)";
|
|
}
|
|
if (container.filters) {
|
|
output += "(*filters)";
|
|
}
|
|
console.log(output, `color:${data.color}; font-weight:bold;`);
|
|
depth++;
|
|
for (let i = 0; i < container.children.length; i++) {
|
|
const child = container.children[i];
|
|
logScene(child, depth, __spreadValues({}, data));
|
|
}
|
|
}
|
|
function logRenderGroupScene(renderGroup, depth = 0, data = { index: 0, color: "#000000" }) {
|
|
let spaces = "";
|
|
for (let i = 0; i < depth; i++) {
|
|
spaces += " ";
|
|
}
|
|
const output = `%c ${spaces}- ${data.index}: ${renderGroup.root.label} worldX:${renderGroup.worldTransform.tx}`;
|
|
console.log(output, `color:${data.color}; font-weight:bold;`);
|
|
depth++;
|
|
for (let i = 0; i < renderGroup.renderGroupChildren.length; i++) {
|
|
const child = renderGroup.renderGroupChildren[i];
|
|
logRenderGroupScene(child, depth, __spreadProps(__spreadValues({}, data), { index: i }));
|
|
}
|
|
}
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
"use strict";
|
|
|
|
exports.AbstractBitmapFont = AbstractBitmapFont;
|
|
exports.AbstractRenderer = AbstractRenderer;
|
|
exports.AbstractText = AbstractText;
|
|
exports.AccessibilitySystem = AccessibilitySystem;
|
|
exports.AlphaFilter = AlphaFilter;
|
|
exports.AlphaMask = AlphaMask;
|
|
exports.AlphaMaskPipe = AlphaMaskPipe;
|
|
exports.AnimatedSprite = AnimatedSprite;
|
|
exports.Application = Application;
|
|
exports.ApplicationInitHook = ApplicationInitHook;
|
|
exports.Assets = Assets;
|
|
exports.AssetsClass = AssetsClass;
|
|
exports.BLEND_TO_NPM = BLEND_TO_NPM;
|
|
exports.BUFFER_TYPE = BUFFER_TYPE;
|
|
exports.BackgroundLoader = BackgroundLoader;
|
|
exports.BackgroundSystem = BackgroundSystem;
|
|
exports.Batch = Batch;
|
|
exports.BatchGeometry = BatchGeometry;
|
|
exports.BatchTextureArray = BatchTextureArray;
|
|
exports.BatchableGraphics = BatchableGraphics;
|
|
exports.BatchableMesh = BatchableMesh;
|
|
exports.BatchableSprite = BatchableSprite;
|
|
exports.Batcher = Batcher;
|
|
exports.BatcherPipe = BatcherPipe;
|
|
exports.BigPool = BigPool;
|
|
exports.BindGroup = BindGroup;
|
|
exports.BindGroupSystem = BindGroupSystem;
|
|
exports.BitmapFont = BitmapFont;
|
|
exports.BitmapFontManager = BitmapFontManager;
|
|
exports.BitmapText = BitmapText;
|
|
exports.BitmapTextPipe = BitmapTextPipe;
|
|
exports.BlendModeFilter = BlendModeFilter;
|
|
exports.BlendModePipe = BlendModePipe;
|
|
exports.BlurFilter = BlurFilter;
|
|
exports.BlurFilterPass = BlurFilterPass;
|
|
exports.Bounds = Bounds;
|
|
exports.BrowserAdapter = BrowserAdapter;
|
|
exports.Buffer = Buffer;
|
|
exports.BufferImageSource = BufferImageSource;
|
|
exports.BufferResource = BufferResource;
|
|
exports.BufferUsage = BufferUsage;
|
|
exports.CLEAR = CLEAR;
|
|
exports.Cache = Cache;
|
|
exports.CanvasPool = CanvasPool;
|
|
exports.CanvasPoolClass = CanvasPoolClass;
|
|
exports.CanvasSource = CanvasSource;
|
|
exports.CanvasTextMetrics = CanvasTextMetrics;
|
|
exports.CanvasTextPipe = CanvasTextPipe;
|
|
exports.CanvasTextSystem = CanvasTextSystem;
|
|
exports.Circle = Circle;
|
|
exports.Color = Color;
|
|
exports.ColorMask = ColorMask;
|
|
exports.ColorMaskPipe = ColorMaskPipe;
|
|
exports.ColorMatrixFilter = ColorMatrixFilter;
|
|
exports.CompressedSource = CompressedSource;
|
|
exports.Container = Container;
|
|
exports.Culler = Culler;
|
|
exports.CullerPlugin = CullerPlugin;
|
|
exports.CustomRenderPipe = CustomRenderPipe;
|
|
exports.D3D10_RESOURCE_DIMENSION = D3D10_RESOURCE_DIMENSION;
|
|
exports.D3DFMT = D3DFMT;
|
|
exports.DATA_URI = DATA_URI;
|
|
exports.DDS = DDS;
|
|
exports.DEG_TO_RAD = DEG_TO_RAD;
|
|
exports.DEPRECATED_SCALE_MODES = DEPRECATED_SCALE_MODES;
|
|
exports.DEPRECATED_WRAP_MODES = DEPRECATED_WRAP_MODES;
|
|
exports.DOMAdapter = DOMAdapter;
|
|
exports.DRAW_MODES = DRAW_MODES;
|
|
exports.DXGI_FORMAT = DXGI_FORMAT;
|
|
exports.DXGI_TO_TEXTURE_FORMAT = DXGI_TO_TEXTURE_FORMAT;
|
|
exports.DefaultBatcher = DefaultBatcher;
|
|
exports.DefaultShader = DefaultShader;
|
|
exports.DisplacementFilter = DisplacementFilter;
|
|
exports.DynamicBitmapFont = DynamicBitmapFont;
|
|
exports.Ellipse = Ellipse;
|
|
exports.EventBoundary = EventBoundary;
|
|
exports.EventEmitter = EventEmitter;
|
|
exports.EventSystem = EventSystem;
|
|
exports.EventsTicker = EventsTicker;
|
|
exports.ExtensionType = ExtensionType;
|
|
exports.ExtractSystem = ExtractSystem;
|
|
exports.FOURCC_TO_TEXTURE_FORMAT = FOURCC_TO_TEXTURE_FORMAT;
|
|
exports.FederatedContainer = FederatedContainer;
|
|
exports.FederatedEvent = FederatedEvent;
|
|
exports.FederatedMouseEvent = FederatedMouseEvent;
|
|
exports.FederatedPointerEvent = FederatedPointerEvent;
|
|
exports.FederatedWheelEvent = FederatedWheelEvent;
|
|
exports.FillGradient = FillGradient;
|
|
exports.FillPattern = FillPattern;
|
|
exports.Filter = Filter;
|
|
exports.FilterEffect = FilterEffect;
|
|
exports.FilterPipe = FilterPipe;
|
|
exports.FilterSystem = FilterSystem;
|
|
exports.FontStylePromiseCache = FontStylePromiseCache;
|
|
exports.GAUSSIAN_VALUES = GAUSSIAN_VALUES;
|
|
exports.GL_FORMATS = GL_FORMATS;
|
|
exports.GL_INTERNAL_FORMAT = GL_INTERNAL_FORMAT;
|
|
exports.GL_TARGETS = GL_TARGETS;
|
|
exports.GL_TYPES = GL_TYPES;
|
|
exports.GL_WRAP_MODES = GL_WRAP_MODES;
|
|
exports.GenerateTextureSystem = GenerateTextureSystem;
|
|
exports.Geometry = Geometry;
|
|
exports.GlBackBufferSystem = GlBackBufferSystem;
|
|
exports.GlBatchAdaptor = GlBatchAdaptor;
|
|
exports.GlBuffer = GlBuffer;
|
|
exports.GlBufferSystem = GlBufferSystem;
|
|
exports.GlColorMaskSystem = GlColorMaskSystem;
|
|
exports.GlContextSystem = GlContextSystem;
|
|
exports.GlEncoderSystem = GlEncoderSystem;
|
|
exports.GlGeometrySystem = GlGeometrySystem;
|
|
exports.GlGraphicsAdaptor = GlGraphicsAdaptor;
|
|
exports.GlMeshAdaptor = GlMeshAdaptor;
|
|
exports.GlProgram = GlProgram;
|
|
exports.GlProgramData = GlProgramData;
|
|
exports.GlRenderTarget = GlRenderTarget;
|
|
exports.GlRenderTargetAdaptor = GlRenderTargetAdaptor;
|
|
exports.GlRenderTargetSystem = GlRenderTargetSystem;
|
|
exports.GlShaderSystem = GlShaderSystem;
|
|
exports.GlStateSystem = GlStateSystem;
|
|
exports.GlStencilSystem = GlStencilSystem;
|
|
exports.GlTexture = GlTexture;
|
|
exports.GlTextureSystem = GlTextureSystem;
|
|
exports.GlUboSystem = GlUboSystem;
|
|
exports.GlUniformGroupSystem = GlUniformGroupSystem;
|
|
exports.GlobalUniformSystem = GlobalUniformSystem;
|
|
exports.GpuBatchAdaptor = GpuBatchAdaptor;
|
|
exports.GpuBlendModesToPixi = GpuBlendModesToPixi;
|
|
exports.GpuBufferSystem = GpuBufferSystem;
|
|
exports.GpuColorMaskSystem = GpuColorMaskSystem;
|
|
exports.GpuDeviceSystem = GpuDeviceSystem;
|
|
exports.GpuEncoderSystem = GpuEncoderSystem;
|
|
exports.GpuGraphicsAdaptor = GpuGraphicsAdaptor;
|
|
exports.GpuGraphicsContext = GpuGraphicsContext;
|
|
exports.GpuMeshAdapter = GpuMeshAdapter;
|
|
exports.GpuMipmapGenerator = GpuMipmapGenerator;
|
|
exports.GpuProgram = GpuProgram;
|
|
exports.GpuReadBuffer = GpuReadBuffer;
|
|
exports.GpuRenderTarget = GpuRenderTarget;
|
|
exports.GpuRenderTargetAdaptor = GpuRenderTargetAdaptor;
|
|
exports.GpuRenderTargetSystem = GpuRenderTargetSystem;
|
|
exports.GpuShaderSystem = GpuShaderSystem;
|
|
exports.GpuStateSystem = GpuStateSystem;
|
|
exports.GpuStencilModesToPixi = GpuStencilModesToPixi;
|
|
exports.GpuStencilSystem = GpuStencilSystem;
|
|
exports.GpuTextureSystem = GpuTextureSystem;
|
|
exports.GpuUboSystem = GpuUboSystem;
|
|
exports.GpuUniformBatchPipe = GpuUniformBatchPipe;
|
|
exports.Graphics = Graphics;
|
|
exports.GraphicsContext = GraphicsContext;
|
|
exports.GraphicsContextRenderData = GraphicsContextRenderData;
|
|
exports.GraphicsContextSystem = GraphicsContextSystem;
|
|
exports.GraphicsPath = GraphicsPath;
|
|
exports.GraphicsPipe = GraphicsPipe;
|
|
exports.HTMLText = HTMLText;
|
|
exports.HTMLTextPipe = HTMLTextPipe;
|
|
exports.HTMLTextRenderData = HTMLTextRenderData;
|
|
exports.HTMLTextStyle = HTMLTextStyle;
|
|
exports.HTMLTextSystem = HTMLTextSystem;
|
|
exports.HelloSystem = HelloSystem;
|
|
exports.IGLUniformData = IGLUniformData;
|
|
exports.ImageSource = ImageSource;
|
|
exports.InstructionSet = InstructionSet;
|
|
exports.KTX = KTX;
|
|
exports.Loader = Loader;
|
|
exports.LoaderParserPriority = LoaderParserPriority;
|
|
exports.MSAA_QUALITY = MSAA_QUALITY;
|
|
exports.MaskEffectManager = MaskEffectManager;
|
|
exports.MaskEffectManagerClass = MaskEffectManagerClass;
|
|
exports.MaskFilter = MaskFilter;
|
|
exports.Matrix = Matrix;
|
|
exports.Mesh = Mesh;
|
|
exports.MeshGeometry = MeshGeometry;
|
|
exports.MeshPipe = MeshPipe;
|
|
exports.MeshPlane = MeshPlane;
|
|
exports.MeshRope = MeshRope;
|
|
exports.MeshSimple = MeshSimple;
|
|
exports.NOOP = NOOP;
|
|
exports.NineSliceGeometry = NineSliceGeometry;
|
|
exports.NineSlicePlane = NineSlicePlane;
|
|
exports.NineSliceSprite = NineSliceSprite;
|
|
exports.NineSliceSpritePipe = NineSliceSpritePipe;
|
|
exports.NoiseFilter = NoiseFilter;
|
|
exports.ObservablePoint = ObservablePoint;
|
|
exports.PI_2 = PI_2;
|
|
exports.PerspectiveMesh = PerspectiveMesh;
|
|
exports.PerspectivePlaneGeometry = PerspectivePlaneGeometry;
|
|
exports.PipelineSystem = PipelineSystem;
|
|
exports.PlaneGeometry = PlaneGeometry;
|
|
exports.Point = Point;
|
|
exports.Polygon = Polygon;
|
|
exports.Pool = Pool;
|
|
exports.PoolGroupClass = PoolGroupClass;
|
|
exports.PrepareBase = PrepareBase;
|
|
exports.PrepareQueue = PrepareQueue;
|
|
exports.PrepareSystem = PrepareSystem;
|
|
exports.PrepareUpload = PrepareUpload;
|
|
exports.QuadGeometry = QuadGeometry;
|
|
exports.RAD_TO_DEG = RAD_TO_DEG;
|
|
exports.Rectangle = Rectangle;
|
|
exports.RenderContainer = RenderContainer;
|
|
exports.RenderGroup = RenderGroup;
|
|
exports.RenderGroupPipe = RenderGroupPipe;
|
|
exports.RenderGroupSystem = RenderGroupSystem;
|
|
exports.RenderTarget = RenderTarget;
|
|
exports.RenderTargetSystem = RenderTargetSystem;
|
|
exports.RenderTexture = RenderTexture;
|
|
exports.RenderableGCSystem = RenderableGCSystem;
|
|
exports.RendererInitHook = RendererInitHook;
|
|
exports.RendererType = RendererType;
|
|
exports.ResizePlugin = ResizePlugin;
|
|
exports.Resolver = Resolver;
|
|
exports.RopeGeometry = RopeGeometry;
|
|
exports.RoundedRectangle = RoundedRectangle;
|
|
exports.SCALE_MODES = SCALE_MODES;
|
|
exports.STENCIL_MODES = STENCIL_MODES;
|
|
exports.SVGParser = SVGParser;
|
|
exports.SVGToGraphicsPath = SVGToGraphicsPath;
|
|
exports.SchedulerSystem = SchedulerSystem;
|
|
exports.ScissorMask = ScissorMask;
|
|
exports.SdfShader = SdfShader;
|
|
exports.Shader = Shader;
|
|
exports.ShaderStage = ShaderStage;
|
|
exports.ShapePath = ShapePath;
|
|
exports.SharedRenderPipes = SharedRenderPipes;
|
|
exports.SharedSystems = SharedSystems;
|
|
exports.Sprite = Sprite;
|
|
exports.SpritePipe = SpritePipe;
|
|
exports.Spritesheet = Spritesheet;
|
|
exports.State = State;
|
|
exports.StencilMask = StencilMask;
|
|
exports.StencilMaskPipe = StencilMaskPipe;
|
|
exports.SystemRunner = SystemRunner;
|
|
exports.TEXTURE_FORMAT_BLOCK_SIZE = TEXTURE_FORMAT_BLOCK_SIZE;
|
|
exports.Text = Text;
|
|
exports.TextStyle = TextStyle;
|
|
exports.Texture = Texture;
|
|
exports.TextureGCSystem = TextureGCSystem;
|
|
exports.TextureMatrix = TextureMatrix;
|
|
exports.TexturePool = TexturePool;
|
|
exports.TexturePoolClass = TexturePoolClass;
|
|
exports.TextureSource = TextureSource;
|
|
exports.TextureStyle = TextureStyle;
|
|
exports.TextureUvs = TextureUvs;
|
|
exports.Ticker = Ticker;
|
|
exports.TickerListener = TickerListener;
|
|
exports.TickerPlugin = TickerPlugin;
|
|
exports.TilingSprite = TilingSprite;
|
|
exports.TilingSpritePipe = TilingSpritePipe;
|
|
exports.TilingSpriteShader = TilingSpriteShader;
|
|
exports.Transform = Transform;
|
|
exports.Triangle = Triangle;
|
|
exports.UNIFORM_TO_ARRAY_SETTERS = UNIFORM_TO_ARRAY_SETTERS;
|
|
exports.UNIFORM_TO_SINGLE_SETTERS = UNIFORM_TO_SINGLE_SETTERS;
|
|
exports.UNIFORM_TYPES_MAP = UNIFORM_TYPES_MAP;
|
|
exports.UNIFORM_TYPES_VALUES = UNIFORM_TYPES_VALUES;
|
|
exports.UPDATE_BLEND = UPDATE_BLEND;
|
|
exports.UPDATE_COLOR = UPDATE_COLOR;
|
|
exports.UPDATE_PRIORITY = UPDATE_PRIORITY;
|
|
exports.UPDATE_TRANSFORM = UPDATE_TRANSFORM;
|
|
exports.UPDATE_VISIBLE = UPDATE_VISIBLE;
|
|
exports.UboBatch = UboBatch;
|
|
exports.UboSystem = UboSystem;
|
|
exports.UniformGroup = UniformGroup;
|
|
exports.VERSION = VERSION;
|
|
exports.VideoSource = VideoSource;
|
|
exports.ViewContainer = ViewContainer;
|
|
exports.ViewSystem = ViewSystem;
|
|
exports.ViewableBuffer = ViewableBuffer;
|
|
exports.WGSL_ALIGN_SIZE_DATA = WGSL_ALIGN_SIZE_DATA;
|
|
exports.WGSL_TO_STD40_SIZE = WGSL_TO_STD40_SIZE;
|
|
exports.WRAP_MODES = WRAP_MODES;
|
|
exports.WebGLRenderer = WebGLRenderer;
|
|
exports.WebGPURenderer = WebGPURenderer;
|
|
exports.WorkerManager = WorkerManager;
|
|
exports._getGlobalBounds = _getGlobalBounds;
|
|
exports._getGlobalBoundsRecursive = _getGlobalBoundsRecursive;
|
|
exports.accessibilityTarget = accessibilityTarget;
|
|
exports.addBits = addBits;
|
|
exports.addMaskBounds = addMaskBounds;
|
|
exports.addMaskLocalBounds = addMaskLocalBounds;
|
|
exports.addProgramDefines = addProgramDefines;
|
|
exports.alphaFrag = fragment$4;
|
|
exports.alphaWgsl = source$5;
|
|
exports.applyMatrix = applyMatrix;
|
|
exports.applyProjectiveTransformationToPlane = applyProjectiveTransformationToPlane;
|
|
exports.applyStyleParams = applyStyleParams;
|
|
exports.assignWithIgnore = assignWithIgnore;
|
|
exports.autoDetectEnvironment = autoDetectEnvironment;
|
|
exports.autoDetectRenderer = autoDetectRenderer;
|
|
exports.autoDetectSource = autoDetectSource;
|
|
exports.basisTranscoderUrls = basisTranscoderUrls;
|
|
exports.bitmapFontCachePlugin = bitmapFontCachePlugin;
|
|
exports.bitmapFontTextParser = bitmapFontTextParser;
|
|
exports.bitmapFontXMLParser = bitmapFontXMLParser;
|
|
exports.bitmapFontXMLStringParser = bitmapFontXMLStringParser;
|
|
exports.blendTemplateFrag = blendTemplateFrag;
|
|
exports.blendTemplateVert = blendTemplateVert;
|
|
exports.blendTemplateWgsl = blendTemplate;
|
|
exports.blockDataMap = blockDataMap;
|
|
exports.blurTemplateWgsl = source$4;
|
|
exports.boundsPool = boundsPool;
|
|
exports.browserExt = browserExt;
|
|
exports.buildAdaptiveBezier = buildAdaptiveBezier;
|
|
exports.buildAdaptiveQuadratic = buildAdaptiveQuadratic;
|
|
exports.buildArc = buildArc;
|
|
exports.buildArcTo = buildArcTo;
|
|
exports.buildArcToSvg = buildArcToSvg;
|
|
exports.buildCircle = buildCircle;
|
|
exports.buildContextBatches = buildContextBatches;
|
|
exports.buildEllipse = buildEllipse;
|
|
exports.buildGeometryFromPath = buildGeometryFromPath;
|
|
exports.buildInstructions = buildInstructions;
|
|
exports.buildLine = buildLine;
|
|
exports.buildPolygon = buildPolygon;
|
|
exports.buildRectangle = buildRectangle;
|
|
exports.buildRoundedRectangle = buildRoundedRectangle;
|
|
exports.buildSimpleUvs = buildSimpleUvs;
|
|
exports.buildTriangle = buildTriangle;
|
|
exports.buildUvs = buildUvs;
|
|
exports.cacheTextureArray = cacheTextureArray;
|
|
exports.calculateProjection = calculateProjection;
|
|
exports.checkChildrenDidChange = checkChildrenDidChange;
|
|
exports.checkDataUrl = checkDataUrl;
|
|
exports.checkExtension = checkExtension;
|
|
exports.checkMaxIfStatementsInShader = checkMaxIfStatementsInShader;
|
|
exports.childrenHelperMixin = childrenHelperMixin;
|
|
exports.clearList = clearList;
|
|
exports.closePointEps = closePointEps;
|
|
exports.collectAllRenderables = collectAllRenderables;
|
|
exports.collectRenderGroups = collectRenderGroups;
|
|
exports.color32BitToUniform = color32BitToUniform;
|
|
exports.colorBit = colorBit;
|
|
exports.colorBitGl = colorBitGl;
|
|
exports.colorMatrixFilterFrag = fragment$3;
|
|
exports.colorMatrixFilterWgsl = source$3;
|
|
exports.colorToUniform = colorToUniform;
|
|
exports.compareModeToGlCompare = compareModeToGlCompare;
|
|
exports.compileHighShader = compileHighShader;
|
|
exports.compileHighShaderGl = compileHighShaderGl;
|
|
exports.compileHighShaderGlProgram = compileHighShaderGlProgram;
|
|
exports.compileHighShaderGpuProgram = compileHighShaderGpuProgram;
|
|
exports.compileHooks = compileHooks;
|
|
exports.compileInputs = compileInputs;
|
|
exports.compileOutputs = compileOutputs;
|
|
exports.compileShader = compileShader;
|
|
exports.compute2DProjection = compute2DProjection;
|
|
exports.convertFormatIfRequired = convertFormatIfRequired;
|
|
exports.convertToList = convertToList;
|
|
exports.copySearchParams = copySearchParams;
|
|
exports.createIdFromString = createIdFromString;
|
|
exports.createLevelBuffers = createLevelBuffers;
|
|
exports.createLevelBuffersFromKTX = createLevelBuffersFromKTX;
|
|
exports.createStringVariations = createStringVariations;
|
|
exports.createTexture = createTexture;
|
|
exports.createUboElementsSTD40 = createUboElementsSTD40;
|
|
exports.createUboElementsWGSL = createUboElementsWGSL;
|
|
exports.createUboSyncFunction = createUboSyncFunction;
|
|
exports.createUboSyncFunctionSTD40 = createUboSyncFunctionSTD40;
|
|
exports.createUboSyncFunctionWGSL = createUboSyncFunctionWGSL;
|
|
exports.crossOrigin = crossOrigin;
|
|
exports.cullingMixin = cullingMixin;
|
|
exports.curveEps = curveEps;
|
|
exports.defaultFilterVert = vertex$2;
|
|
exports.defaultValue = defaultValue;
|
|
exports.definedProps = definedProps;
|
|
exports.deprecation = deprecation;
|
|
exports.detectAvif = detectAvif;
|
|
exports.detectBasis = detectBasis;
|
|
exports.detectCompressed = detectCompressed;
|
|
exports.detectDefaults = detectDefaults;
|
|
exports.detectMp4 = detectMp4;
|
|
exports.detectOgv = detectOgv;
|
|
exports.detectVideoAlphaMode = detectVideoAlphaMode;
|
|
exports.detectWebm = detectWebm;
|
|
exports.detectWebp = detectWebp;
|
|
exports.determineCrossOrigin = determineCrossOrigin;
|
|
exports.displacementFrag = fragment$2;
|
|
exports.displacementVert = vertex$1;
|
|
exports.displacementWgsl = source$2;
|
|
exports.earcut = earcut$1;
|
|
exports.effectsMixin = effectsMixin;
|
|
exports.ensureAttributes = ensureAttributes;
|
|
exports.ensureIsBuffer = ensureIsBuffer;
|
|
exports.ensureOptions = ensureOptions;
|
|
exports.ensurePrecision = ensurePrecision;
|
|
exports.ensureTextStyle = ensureTextStyle;
|
|
exports.executeInstructions = executeInstructions;
|
|
exports.extensions = extensions;
|
|
exports.extractAttributesFromGlProgram = extractAttributesFromGlProgram;
|
|
exports.extractAttributesFromGpuProgram = extractAttributesFromGpuProgram;
|
|
exports.extractFontFamilies = extractFontFamilies;
|
|
exports.extractStructAndGroups = extractStructAndGroups;
|
|
exports.fastCopy = fastCopy;
|
|
exports.findHooksRx = findHooksRx;
|
|
exports.findMixin = findMixin;
|
|
exports.fontStringFromTextStyle = fontStringFromTextStyle;
|
|
exports.formatShader = formatShader;
|
|
exports.fragmentGPUTemplate = fragmentGPUTemplate;
|
|
exports.fragmentGlTemplate = fragmentGlTemplate;
|
|
exports.generateArraySyncSTD40 = generateArraySyncSTD40;
|
|
exports.generateArraySyncWGSL = generateArraySyncWGSL;
|
|
exports.generateBlurFragSource = generateBlurFragSource;
|
|
exports.generateBlurGlProgram = generateBlurGlProgram;
|
|
exports.generateBlurProgram = generateBlurProgram;
|
|
exports.generateBlurVertSource = generateBlurVertSource;
|
|
exports.generateGPULayout = generateGPULayout;
|
|
exports.generateGpuLayoutGroups = generateGpuLayoutGroups;
|
|
exports.generateLayout = generateLayout;
|
|
exports.generateLayoutHash = generateLayoutHash;
|
|
exports.generateProgram = generateProgram;
|
|
exports.generateShaderSyncCode = generateShaderSyncCode;
|
|
exports.generateTextStyleKey = generateTextStyleKey;
|
|
exports.generateTextureBatchBit = generateTextureBatchBit;
|
|
exports.generateTextureBatchBitGl = generateTextureBatchBitGl;
|
|
exports.generateUID = generateUID;
|
|
exports.generateUniformsSync = generateUniformsSync;
|
|
exports.getAdjustedBlendModeBlend = getAdjustedBlendModeBlend;
|
|
exports.getAttributeInfoFromFormat = getAttributeInfoFromFormat;
|
|
exports.getBatchSamplersUniformGroup = getBatchSamplersUniformGroup;
|
|
exports.getBitmapTextLayout = getBitmapTextLayout;
|
|
exports.getCanvasBoundingBox = getCanvasBoundingBox;
|
|
exports.getCanvasFillStyle = getCanvasFillStyle;
|
|
exports.getCanvasTexture = getCanvasTexture;
|
|
exports.getDefaultUniformValue = getDefaultUniformValue;
|
|
exports.getFastGlobalBounds = getFastGlobalBounds;
|
|
exports.getFontCss = getFontCss;
|
|
exports.getFontFamilyName = getFontFamilyName;
|
|
exports.getGeometryBounds = getGeometryBounds;
|
|
exports.getGlTypeFromFormat = getGlTypeFromFormat;
|
|
exports.getGlobalBounds = getGlobalBounds;
|
|
exports.getGlobalRenderableBounds = getGlobalRenderableBounds;
|
|
exports.getLocalBounds = getLocalBounds;
|
|
exports.getMatrixRelativeToParent = getMatrixRelativeToParent;
|
|
exports.getMaxFragmentPrecision = getMaxFragmentPrecision;
|
|
exports.getMaxTexturesPerBatch = getMaxTexturesPerBatch;
|
|
exports.getOrientationOfPoints = getOrientationOfPoints;
|
|
exports.getParent = getParent;
|
|
exports.getPo2TextureFromSource = getPo2TextureFromSource;
|
|
exports.getResolutionOfUrl = getResolutionOfUrl;
|
|
exports.getSVGUrl = getSVGUrl;
|
|
exports.getSupportedCompressedTextureFormats = getSupportedCompressedTextureFormats;
|
|
exports.getSupportedGPUCompressedTextureFormats = getSupportedGPUCompressedTextureFormats;
|
|
exports.getSupportedGlCompressedTextureFormats = getSupportedGlCompressedTextureFormats;
|
|
exports.getSupportedTextureFormats = getSupportedTextureFormats;
|
|
exports.getTemporaryCanvasFromImage = getTemporaryCanvasFromImage;
|
|
exports.getTestContext = getTestContext;
|
|
exports.getTextureBatchBindGroup = getTextureBatchBindGroup;
|
|
exports.getTextureDefaultMatrix = getTextureDefaultMatrix;
|
|
exports.getTextureFormatFromKTXTexture = getTextureFormatFromKTXTexture;
|
|
exports.getUboData = getUboData;
|
|
exports.getUniformData = getUniformData;
|
|
exports.getUrlExtension = getUrlExtension;
|
|
exports.glFormatToGPUFormat = glFormatToGPUFormat;
|
|
exports.glUploadBufferImageResource = glUploadBufferImageResource;
|
|
exports.glUploadCompressedTextureResource = glUploadCompressedTextureResource;
|
|
exports.glUploadImageResource = glUploadImageResource;
|
|
exports.glUploadVideoResource = glUploadVideoResource;
|
|
exports.globalUniformsBit = globalUniformsBit;
|
|
exports.globalUniformsBitGl = globalUniformsBitGl;
|
|
exports.globalUniformsUBOBitGl = globalUniformsUBOBitGl;
|
|
exports.gpuFormatToBasisTranscoderFormat = gpuFormatToBasisTranscoderFormat;
|
|
exports.gpuFormatToKTXBasisTranscoderFormat = gpuFormatToKTXBasisTranscoderFormat;
|
|
exports.gpuUploadBufferImageResource = gpuUploadBufferImageResource;
|
|
exports.gpuUploadCompressedTextureResource = gpuUploadCompressedTextureResource;
|
|
exports.gpuUploadImageResource = gpuUploadImageResource;
|
|
exports.gpuUploadVideoResource = gpuUploadVideoResource;
|
|
exports.groupD8 = groupD8;
|
|
exports.hasCachedCanvasTexture = hasCachedCanvasTexture;
|
|
exports.hslWgsl = hsl;
|
|
exports.hslgl = hslgl;
|
|
exports.hslgpu = hslgpu;
|
|
exports.injectBits = injectBits;
|
|
exports.insertVersion = insertVersion;
|
|
exports.isMobile = isMobile;
|
|
exports.isPow2 = isPow2;
|
|
exports.isRenderingToScreen = isRenderingToScreen;
|
|
exports.isSafari = isSafari;
|
|
exports.isSingleItem = isSingleItem;
|
|
exports.isWebGLSupported = isWebGLSupported;
|
|
exports.isWebGPUSupported = isWebGPUSupported;
|
|
exports.ktxTranscoderUrls = ktxTranscoderUrls;
|
|
exports.loadBasis = loadBasis;
|
|
exports.loadBasisOnWorker = loadBasisOnWorker;
|
|
exports.loadBitmapFont = loadBitmapFont;
|
|
exports.loadDDS = loadDDS;
|
|
exports.loadEnvironmentExtensions = loadEnvironmentExtensions;
|
|
exports.loadFontAsBase64 = loadFontAsBase64;
|
|
exports.loadFontCSS = loadFontCSS;
|
|
exports.loadImageBitmap = loadImageBitmap;
|
|
exports.loadJson = loadJson;
|
|
exports.loadKTX = loadKTX;
|
|
exports.loadKTX2 = loadKTX2;
|
|
exports.loadKTX2onWorker = loadKTX2onWorker;
|
|
exports.loadSVGImage = loadSVGImage;
|
|
exports.loadSvg = loadSvg;
|
|
exports.loadTextures = loadTextures;
|
|
exports.loadTxt = loadTxt;
|
|
exports.loadVideoTextures = loadVideoTextures;
|
|
exports.loadWebFont = loadWebFont;
|
|
exports.localUniformBit = localUniformBit;
|
|
exports.localUniformBitGl = localUniformBitGl;
|
|
exports.localUniformBitGroup2 = localUniformBitGroup2;
|
|
exports.localUniformMSDFBit = localUniformMSDFBit;
|
|
exports.localUniformMSDFBitGl = localUniformMSDFBitGl;
|
|
exports.log2 = log2;
|
|
exports.logDebugTexture = logDebugTexture;
|
|
exports.logProgramError = logProgramError;
|
|
exports.logRenderGroupScene = logRenderGroupScene;
|
|
exports.logScene = logScene;
|
|
exports.mSDFBit = mSDFBit;
|
|
exports.mSDFBitGl = mSDFBitGl;
|
|
exports.mapFormatToGlFormat = mapFormatToGlFormat;
|
|
exports.mapFormatToGlInternalFormat = mapFormatToGlInternalFormat;
|
|
exports.mapFormatToGlType = mapFormatToGlType;
|
|
exports.mapGlToVertexFormat = mapGlToVertexFormat;
|
|
exports.mapSize = mapSize;
|
|
exports.mapType = mapType;
|
|
exports.mapWebGLBlendModesToPixi = mapWebGLBlendModesToPixi;
|
|
exports.maskFrag = fragment;
|
|
exports.maskVert = vertex;
|
|
exports.maskWgsl = source;
|
|
exports.matrixPool = matrixPool;
|
|
exports.measureHtmlText = measureHtmlText;
|
|
exports.measureMixin = measureMixin;
|
|
exports.migrateFragmentFromV7toV8 = migrateFragmentFromV7toV8;
|
|
exports.mipmapScaleModeToGlFilter = mipmapScaleModeToGlFilter;
|
|
exports.mixColors = mixColors;
|
|
exports.mixHexColors = mixHexColors;
|
|
exports.mixStandardAnd32BitColors = mixStandardAnd32BitColors;
|
|
exports.multiplyHexColors = multiplyHexColors;
|
|
exports.nextPow2 = nextPow2;
|
|
exports.noiseFrag = fragment$1;
|
|
exports.noiseWgsl = source$1;
|
|
exports.nonCompressedFormats = nonCompressedFormats;
|
|
exports.normalizeExtensionPriority = normalizeExtensionPriority;
|
|
exports.nssvg = nssvg;
|
|
exports.nsxhtml = nsxhtml;
|
|
exports.onRenderMixin = onRenderMixin;
|
|
exports.parseDDS = parseDDS;
|
|
exports.parseFunctionBody = parseFunctionBody;
|
|
exports.parseKTX = parseKTX;
|
|
exports.path = path;
|
|
exports.pointInTriangle = pointInTriangle;
|
|
exports.preloadVideo = preloadVideo;
|
|
exports.removeItems = removeItems;
|
|
exports.removeStructAndGroupDuplicates = removeStructAndGroupDuplicates;
|
|
exports.resetUids = resetUids;
|
|
exports.resolveCharacters = resolveCharacters;
|
|
exports.resolveCompressedTextureUrl = resolveCompressedTextureUrl;
|
|
exports.resolveJsonUrl = resolveJsonUrl;
|
|
exports.resolveTextureUrl = resolveTextureUrl;
|
|
exports.resourceToTexture = resourceToTexture;
|
|
exports.roundPixelsBit = roundPixelsBit;
|
|
exports.roundPixelsBitGl = roundPixelsBitGl;
|
|
exports.roundedShapeArc = roundedShapeArc;
|
|
exports.roundedShapeQuadraticCurve = roundedShapeQuadraticCurve;
|
|
exports.sayHello = sayHello;
|
|
exports.scaleModeToGlFilter = scaleModeToGlFilter;
|
|
exports.setBasisTranscoderPath = setBasisTranscoderPath;
|
|
exports.setKTXTranscoderPath = setKTXTranscoderPath;
|
|
exports.setPositions = setPositions;
|
|
exports.setProgramName = setProgramName;
|
|
exports.setUvs = setUvs;
|
|
exports.shapeBuilders = shapeBuilders;
|
|
exports.sortMixin = sortMixin;
|
|
exports.spritesheetAsset = spritesheetAsset;
|
|
exports.squaredDistanceToLineSegment = squaredDistanceToLineSegment;
|
|
exports.stripVersion = stripVersion;
|
|
exports.testImageFormat = testImageFormat;
|
|
exports.testVideoFormat = testVideoFormat;
|
|
exports.textStyleToCSS = textStyleToCSS;
|
|
exports.textureBit = textureBit;
|
|
exports.textureBitGl = textureBitGl;
|
|
exports.textureFrom = textureFrom;
|
|
exports.tilingBit = tilingBit;
|
|
exports.tilingBitGl = tilingBitGl;
|
|
exports.toFillStyle = toFillStyle;
|
|
exports.toLocalGlobalMixin = toLocalGlobalMixin;
|
|
exports.toStrokeStyle = toStrokeStyle;
|
|
exports.transformVertices = transformVertices;
|
|
exports.triangulateWithHoles = triangulateWithHoles;
|
|
exports.uboSyncFunctionsSTD40 = uboSyncFunctionsSTD40;
|
|
exports.uboSyncFunctionsWGSL = uboSyncFunctionsWGSL;
|
|
exports.uid = uid$1;
|
|
exports.uniformParsers = uniformParsers;
|
|
exports.unpremultiplyAlpha = unpremultiplyAlpha$1;
|
|
exports.unsafeEvalSupported = unsafeEvalSupported;
|
|
exports.updateLocalTransform = updateLocalTransform;
|
|
exports.updateQuadBounds = updateQuadBounds;
|
|
exports.updateRenderGroupTransform = updateRenderGroupTransform;
|
|
exports.updateRenderGroupTransforms = updateRenderGroupTransforms;
|
|
exports.updateTransformAndChildren = updateTransformAndChildren;
|
|
exports.updateTransformBackwards = updateTransformBackwards;
|
|
exports.updateWorldTransform = updateWorldTransform;
|
|
exports.v8_0_0 = v8_0_0;
|
|
exports.v8_3_4 = v8_3_4;
|
|
exports.validFormats = validFormats;
|
|
exports.validateRenderables = validateRenderables;
|
|
exports.vertexGPUTemplate = vertexGPUTemplate;
|
|
exports.vertexGlTemplate = vertexGlTemplate;
|
|
exports.viewportFromFrame = viewportFromFrame;
|
|
exports.vkFormatToGPUFormat = vkFormatToGPUFormat;
|
|
exports.warn = warn;
|
|
exports.wrapModeToGlAddress = wrapModeToGlAddress;
|
|
|
|
return exports;
|
|
|
|
})({});
|
|
//# sourceMappingURL=pixi.js.map
|