ng-cw-v12
Version:
Angular UI Component Library
1,579 lines • 91.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('three'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/liquid-ether-background', ['exports', '@angular/core', 'three', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["liquid-ether-background"] = {}), global.ng.core, global.THREE, global.ng.common));
})(this, (function (exports, i0, THREE, common) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
function accept(f) { if (f !== void 0 && typeof f !== "function")
throw new TypeError("Function expected"); return f; }
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
var _, done = false;
for (var i = decorators.length - 1; i >= 0; i--) {
var context = {};
for (var p in contextIn)
context[p] = p === "access" ? {} : contextIn[p];
for (var p in contextIn.access)
context.access[p] = contextIn.access[p];
context.addInitializer = function (f) { if (done)
throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
if (kind === "accessor") {
if (result === void 0)
continue;
if (result === null || typeof result !== "object")
throw new TypeError("Object expected");
if (_ = accept(result.get))
descriptor.get = _;
if (_ = accept(result.set))
descriptor.set = _;
if (_ = accept(result.init))
initializers.push(_);
}
else if (_ = accept(result)) {
if (kind === "field")
initializers.push(_);
else
descriptor[key] = _;
}
}
if (target)
Object.defineProperty(target, contextIn.name, descriptor);
done = true;
}
;
function __runInitializers(thisArg, initializers, value) {
var useValue = arguments.length > 2;
for (var i = 0; i < initializers.length; i++) {
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
}
return useValue ? value : void 0;
}
;
function __propKey(x) {
return typeof x === "symbol" ? x : "".concat(x);
}
;
function __setFunctionName(f, name, prefix) {
if (typeof name === "symbol")
name = name.description ? "[".concat(name.description, "]") : "";
return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
}
;
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function () { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
/** @deprecated */
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2)
for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar)
ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, state, kind, f) {
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m")
throw new TypeError("Private method is not writable");
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
}
function __classPrivateFieldIn(state, receiver) {
if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
throw new TypeError("Cannot use 'in' operator on non-object");
return typeof state === "function" ? receiver === state : state.has(receiver);
}
// ─── 顶点着色器（公用）───────────────────────────────────────────────────────
var face_vert = "\n attribute vec3 position;\n uniform vec2 px;\n uniform vec2 boundarySpace;\n varying vec2 uv;\n precision highp float;\n void main(){\n vec3 pos = position;\n vec2 scale = 1.0 - boundarySpace * 2.0;\n pos.xy = pos.xy * scale;\n uv = vec2(0.5) + (pos.xy) * 0.5;\n gl_Position = vec4(pos, 1.0);\n }\n";
// ─── 边界线顶点着色器 ──────────────────────────────────────────────────────
var line_vert = "\n attribute vec3 position;\n uniform vec2 px;\n precision highp float;\n varying vec2 uv;\n void main(){\n vec3 pos = position;\n uv = 0.5 + pos.xy * 0.5;\n vec2 n = sign(pos.xy);\n pos.xy = abs(pos.xy) - px * 1.0;\n pos.xy *= n;\n gl_Position = vec4(pos, 1.0);\n }\n";
// ─── 鼠标力顶点着色器 ──────────────────────────────────────────────────────
var mouse_vert = "\n precision highp float;\n attribute vec3 position;\n attribute vec2 uv;\n uniform vec2 center;\n uniform vec2 scale;\n uniform vec2 px;\n varying vec2 vUv;\n void main(){\n vec2 pos = position.xy * scale * 2.0 * px + center;\n vUv = uv;\n gl_Position = vec4(pos, 0.0, 1.0);\n }\n";
// ─── 平流片元着色器（BFECC）────────────────────────────────────────────────
var advection_frag = "\n precision highp float;\n uniform sampler2D velocity;\n uniform float dt;\n uniform bool isBFECC;\n uniform vec2 fboSize;\n uniform vec2 px;\n varying vec2 uv;\n void main(){\n vec2 ratio = max(fboSize.x, fboSize.y) / fboSize;\n if(isBFECC == false){\n vec2 vel = texture2D(velocity, uv).xy;\n vec2 uv2 = uv - vel * dt * ratio;\n vec2 newVel = texture2D(velocity, uv2).xy;\n gl_FragColor = vec4(newVel, 0.0, 0.0);\n } else {\n vec2 spot_new = uv;\n vec2 vel_old = texture2D(velocity, uv).xy;\n vec2 spot_old = spot_new - vel_old * dt * ratio;\n vec2 vel_new1 = texture2D(velocity, spot_old).xy;\n vec2 spot_new2 = spot_old + vel_new1 * dt * ratio;\n vec2 error = spot_new2 - spot_new;\n vec2 spot_new3 = spot_new - error / 2.0;\n vec2 vel_2 = texture2D(velocity, spot_new3).xy;\n vec2 spot_old2 = spot_new3 - vel_2 * dt * ratio;\n vec2 newVel2 = texture2D(velocity, spot_old2).xy;\n gl_FragColor = vec4(newVel2, 0.0, 0.0);\n }\n }\n";
// ─── 颜色输出片元着色器 ────────────────────────────────────────────────────
var color_frag = "\n precision highp float;\n uniform sampler2D velocity;\n uniform sampler2D palette;\n uniform vec4 bgColor;\n varying vec2 uv;\n void main(){\n vec2 vel = texture2D(velocity, uv).xy;\n float lenv = clamp(length(vel), 0.0, 1.0);\n vec3 c = texture2D(palette, vec2(lenv, 0.5)).rgb;\n vec3 outRGB = mix(bgColor.rgb, c, lenv);\n float outA = mix(bgColor.a, 1.0, lenv);\n gl_FragColor = vec4(outRGB, outA);\n }\n";
// ─── 散度片元着色器 ────────────────────────────────────────────────────────
var divergence_frag = "\n precision highp float;\n uniform sampler2D velocity;\n uniform float dt;\n uniform vec2 px;\n varying vec2 uv;\n void main(){\n float x0 = texture2D(velocity, uv - vec2(px.x, 0.0)).x;\n float x1 = texture2D(velocity, uv + vec2(px.x, 0.0)).x;\n float y0 = texture2D(velocity, uv - vec2(0.0, px.y)).y;\n float y1 = texture2D(velocity, uv + vec2(0.0, px.y)).y;\n float divergence = (x1 - x0 + y1 - y0) / 2.0;\n gl_FragColor = vec4(divergence / dt);\n }\n";
// ─── 外力片元着色器 ────────────────────────────────────────────────────────
var externalForce_frag = "\n precision highp float;\n uniform vec2 force;\n uniform vec2 center;\n uniform vec2 scale;\n uniform vec2 px;\n varying vec2 vUv;\n void main(){\n vec2 circle = (vUv - 0.5) * 2.0;\n float d = 1.0 - min(length(circle), 1.0);\n d *= d;\n gl_FragColor = vec4(force * d, 0.0, 1.0);\n }\n";
// ─── 泊松压力片元着色器 ────────────────────────────────────────────────────
var poisson_frag = "\n precision highp float;\n uniform sampler2D pressure;\n uniform sampler2D divergence;\n uniform vec2 px;\n varying vec2 uv;\n void main(){\n float p0 = texture2D(pressure, uv + vec2(px.x * 2.0, 0.0)).r;\n float p1 = texture2D(pressure, uv - vec2(px.x * 2.0, 0.0)).r;\n float p2 = texture2D(pressure, uv + vec2(0.0, px.y * 2.0)).r;\n float p3 = texture2D(pressure, uv - vec2(0.0, px.y * 2.0)).r;\n float div = texture2D(divergence, uv).r;\n float newP = (p0 + p1 + p2 + p3) / 4.0 - div;\n gl_FragColor = vec4(newP);\n }\n";
// ─── 压力梯度修正片元着色器 ────────────────────────────────────────────────
var pressure_frag = "\n precision highp float;\n uniform sampler2D pressure;\n uniform sampler2D velocity;\n uniform vec2 px;\n uniform float dt;\n varying vec2 uv;\n void main(){\n float step = 1.0;\n float p0 = texture2D(pressure, uv + vec2(px.x * step, 0.0)).r;\n float p1 = texture2D(pressure, uv - vec2(px.x * step, 0.0)).r;\n float p2 = texture2D(pressure, uv + vec2(0.0, px.y * step)).r;\n float p3 = texture2D(pressure, uv - vec2(0.0, px.y * step)).r;\n vec2 v = texture2D(velocity, uv).xy;\n vec2 gradP = vec2(p0 - p1, p2 - p3) * 0.5;\n v = v - gradP * dt;\n gl_FragColor = vec4(v, 0.0, 1.0);\n }\n";
// ─── 粘性扩散片元着色器 ────────────────────────────────────────────────────
var viscous_frag = "\n precision highp float;\n uniform sampler2D velocity;\n uniform sampler2D velocity_new;\n uniform float v;\n uniform vec2 px;\n uniform float dt;\n varying vec2 uv;\n void main(){\n vec2 old = texture2D(velocity, uv).xy;\n vec2 new0 = texture2D(velocity_new, uv + vec2(px.x * 2.0, 0.0)).xy;\n vec2 new1 = texture2D(velocity_new, uv - vec2(px.x * 2.0, 0.0)).xy;\n vec2 new2 = texture2D(velocity_new, uv + vec2(0.0, px.y * 2.0)).xy;\n vec2 new3 = texture2D(velocity_new, uv - vec2(0.0, px.y * 2.0)).xy;\n vec2 newv = 4.0 * old + v * dt * (new0 + new1 + new2 + new3);\n newv /= 4.0 * (1.0 + v * dt);\n gl_FragColor = vec4(newv, 0.0, 0.0);\n }\n";
// ─── 边界处理片元着色器：速度反弹 ──────────────────────────────────────────
var boundary_vel_frag = "\n precision highp float;\n uniform sampler2D velocity;\n uniform vec2 px;\n varying vec2 uv;\n void main(){\n vec2 n = sign(uv - 0.5);\n vec2 offset = n * px;\n vec2 vel = texture2D(velocity, uv - offset).xy;\n if(abs(n.x) > 0.5) vel.x *= -1.0;\n if(abs(n.y) > 0.5) vel.y *= -1.0;\n gl_FragColor = vec4(vel, 0.0, 1.0);\n }\n";
// ─── 边界处理片元着色器：压力一致 ──────────────────────────────────────────
var boundary_pres_frag = "\n precision highp float;\n uniform sampler2D pressure;\n uniform vec2 px;\n varying vec2 uv;\n void main(){\n vec2 n = sign(uv - 0.5);\n vec2 offset = n * px;\n float p = texture2D(pressure, uv - offset).r;\n gl_FragColor = vec4(p, 0.0, 0.0, 1.0);\n }\n";
var LiquidEtherBackgroundComponent = /** @class */ (function () {
function LiquidEtherBackgroundComponent(ngZone) {
this.ngZone = ngZone;
/** 背景颜色 */
this.ncBgColor = 'black';
/** 颜色数组，用于映射流体速度场的渲染颜色 */
this.ncColors = ['#5227FF', '#FF9FFC', '#B19EEF'];
/** 鼠标拖动产生的流体力度（0-60） */
this.ncMouseForce = 20;
/** 鼠标影响半径（单位：像素 10-300） */
this.ncCursorSize = 100;
/** 是否启用粘性模拟（启用后运动更平滑、更厚重） */
this._isViscous = false;
/** 粘性系数（仅在 ncIsViscous 为 true 时生效 1-100） */
this.ncViscous = 30;
/** 粘性扩散的迭代次数（仅在ncIsViscous为true时生效 1-64，次数越多，迭代越平滑，速度越慢）） */
this.ncIterationsViscous = 32;
/** 强制不可压缩性所需的压力泊松迭代次数（2-64） */
this.ncIterationsPoisson = 32;
/** 在对流/扩散过程中使用固定的模拟时间步长，数值越小越精确但性能开销更高 */
this.ncDt = 0.014;
/** 启用BFECC平流（误差补偿）可获得更清晰的流场；禁用可略微提高性能 */
this._bfecc = true;
/** 模拟纹理相对于画布大小的比例（0~1，越小性能越好，模糊程度越高） */
this.ncResolution = 0.5;
/** 是否开启边界反弹模式（流体在边界处反弹而非穿透） */
this._isBounce = false;
/** 是否开启自动演示模式（无用户操作时自动驱动流体运动） */
this._autoDemo = true;
/** 自动指针运动速度（标准化单位/秒，0-1） */
this.ncAutoSpeed = 0.5;
/** 在自动模式下，对速度增量应用乘数（0-4） */
this.ncAutoIntensity = 2.2;
/** 用户移动鼠标时，从自动指针到实际光标的插值时间（秒） */
this.ncTakeoverDuration = 0.25;
/** 自动模式恢复前，短暂的无操作时间（毫秒） */
this.ncAutoResumeDelay = 1000;
/** 激活后，自动移动速度从0加速到全速所需的时间（秒） */
this.ncAutoRampDuration = 0.6;
this.webgl = null;
this.rafId = null;
this.resizeRafId = null;
this.isVisible = true;
}
Object.defineProperty(LiquidEtherBackgroundComponent.prototype, "ncIsViscous", {
get: function () {
return this._isViscous;
},
set: function (val) {
this._isViscous = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(LiquidEtherBackgroundComponent.prototype, "ncBFECC", {
get: function () {
return this._bfecc;
},
set: function (val) {
this._bfecc = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(LiquidEtherBackgroundComponent.prototype, "ncIsBounce", {
get: function () {
return this._isBounce;
},
set: function (val) {
this._isBounce = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(LiquidEtherBackgroundComponent.prototype, "ncAutoDemo", {
get: function () {
return this._autoDemo;
},
set: function (val) {
this._autoDemo = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
LiquidEtherBackgroundComponent.prototype.ngOnInit = function () { };
LiquidEtherBackgroundComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
_this.initWebGL();
});
};
LiquidEtherBackgroundComponent.prototype.ngOnDestroy = function () {
this.cleanup();
};
LiquidEtherBackgroundComponent.prototype.ngOnChanges = function (changes) {
if (!this.webgl)
return;
// ncColors 变化需要重建调色板纹理，整体重新初始化
if (changes['ncColors']) {
this.cleanup();
this.initWebGL();
return;
}
// 其余参数变化时，直接写入 simulation.options
this.applyOptions();
};
// ─── 初始化入口 ──────────────────────────────────────────────────────────
LiquidEtherBackgroundComponent.prototype.initWebGL = function () {
var container = this.containerRef.nativeElement;
this.webgl = this.createWebGLManager(container);
this.webgl.start();
this.setupResizeObserver(container);
this.setupIntersectionObserver(container);
};
// ─── 构建调色板纹理 ───────────────────────────────────────────────────────
LiquidEtherBackgroundComponent.prototype.makePaletteTexture = function (stops) {
var arr;
if (Array.isArray(stops) && stops.length > 0) {
arr = stops.length === 1 ? [stops[0], stops[0]] : stops;
}
else {
arr = ['#ffffff', '#ffffff'];
}
var w = arr.length;
var data = new Uint8Array(w * 4);
for (var i = 0; i < w; i++) {
var c = new THREE__namespace.Color(arr[i]);
data[i * 4 + 0] = Math.round(c.r * 255);
data[i * 4 + 1] = Math.round(c.g * 255);
data[i * 4 + 2] = Math.round(c.b * 255);
data[i * 4 + 3] = 255;
}
var tex = new THREE__namespace.DataTexture(data, w, 1, THREE__namespace.RGBAFormat);
tex.magFilter = THREE__namespace.LinearFilter;
tex.minFilter = THREE__namespace.LinearFilter;
tex.wrapS = THREE__namespace.ClampToEdgeWrapping;
tex.wrapT = THREE__namespace.ClampToEdgeWrapping;
tex.generateMipmaps = false;
tex.needsUpdate = true;
return tex;
};
// ─── 创建 WebGL 管理器（包含所有仿真子类） ──────────────────────────────
LiquidEtherBackgroundComponent.prototype.createWebGLManager = function (container) {
var self = this;
var paletteTex = this.makePaletteTexture(this.ncColors);
var bgVec4 = new THREE__namespace.Vector4(0, 0, 0, 0); // 始终透明背景
// ── Common：WebGL 渲染器与时钟 ──────────────────────────────────────
var CommonClass = /** @class */ (function () {
function CommonClass() {
this.width = 0;
this.height = 0;
this.aspect = 1;
this.pixelRatio = 1;
this.fboWidth = null;
this.fboHeight = null;
this.time = 0;
this.delta = 0;
this.container = null;
this.renderer = null;
this.clock = null;
}
CommonClass.prototype.init = function (c) {
this.container = c;
this.pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
this.resize();
this.renderer = new THREE__namespace.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.autoClear = false;
this.renderer.setClearColor(new THREE__namespace.Color(0x000000), 0);
this.renderer.setPixelRatio(this.pixelRatio);
this.renderer.setSize(this.width, this.height);
this.renderer.domElement.style.width = '100%';
this.renderer.domElement.style.height = '100%';
this.renderer.domElement.style.display = 'block';
this.clock = new THREE__namespace.Clock();
this.clock.start();
};
CommonClass.prototype.resize = function () {
if (!this.container)
return;
var rect = this.container.getBoundingClientRect();
this.width = Math.max(1, Math.floor(rect.width));
this.height = Math.max(1, Math.floor(rect.height));
this.aspect = this.width / this.height;
if (this.renderer)
this.renderer.setSize(this.width, this.height, false);
};
CommonClass.prototype.update = function () {
this.delta = this.clock.getDelta();
this.time += this.delta;
};
return CommonClass;
}());
var Common = new CommonClass();
// ── Mouse：鼠标与触控事件 + 自动演示平滑过渡 ──────────────────────
var MouseClass = /** @class */ (function () {
function MouseClass() {
this.mouseMoved = false;
this.coords = new THREE__namespace.Vector2();
this.coords_old = new THREE__namespace.Vector2();
this.diff = new THREE__namespace.Vector2();
this.timer = null;
this.container = null;
this.docTarget = null;
this.listenerTarget = null;
this.isHoverInside = false;
this.hasUserControl = false;
this.isAutoActive = false;
this.autoIntensity = 2.0;
this.takeoverActive = false;
this.takeoverStartTime = 0;
this.takeoverDuration = 0.25;
this.takeoverFrom = new THREE__namespace.Vector2();
this.takeoverTo = new THREE__namespace.Vector2();
this.onInteract = null;
}
MouseClass.prototype.init = function (c) {
this.container = c;
};
MouseClass.prototype.dispose = function () {
this.container = null;
};
MouseClass.prototype.isPointInside = function (clientX, clientY) {
if (!this.container)
return false;
var rect = this.container.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0)
return false;
return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
};
MouseClass.prototype.updateHoverState = function (clientX, clientY) {
this.isHoverInside = this.isPointInside(clientX, clientY);
return this.isHoverInside;
};
MouseClass.prototype.setCoords = function (x, y) {
var _this = this;
if (!this.container)
return;
if (this.timer)
window.clearTimeout(this.timer);
var rect = this.container.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0)
return;
var nx = (x - rect.left) / rect.width;
var ny = (y - rect.top) / rect.height;
this.coords.set(nx * 2 - 1, -(ny * 2 - 1));
this.mouseMoved = true;
this.timer = window.setTimeout(function () { _this.mouseMoved = false; }, 100);
};
MouseClass.prototype.setNormalized = function (nx, ny) {
this.coords.set(nx, ny);
this.mouseMoved = true;
};
MouseClass.prototype.onMouseMove = function (event) {
if (!this.updateHoverState(event.clientX, event.clientY))
return;
if (this.onInteract)
this.onInteract();
if (this.isAutoActive && !this.hasUserControl && !this.takeoverActive) {
if (!this.container)
return;
var rect = this.container.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0)
return;
var nx = (event.clientX - rect.left) / rect.width;
var ny = (event.clientY - rect.top) / rect.height;
this.takeoverFrom.copy(this.coords);
this.takeoverTo.set(nx * 2 - 1, -(ny * 2 - 1));
this.takeoverStartTime = performance.now();
this.takeoverActive = true;
this.hasUserControl = true;
this.isAutoActive = false;
return;
}
this.setCoords(event.clientX, event.clientY);
this.hasUserControl = true;
};
MouseClass.prototype.onTouchStart = function (event) {
if (event.touches.length !== 1)
return;
var t = event.touches[0];
if (!this.updateHoverState(t.clientX, t.clientY))
return;
if (this.onInteract)
this.onInteract();
this.setCoords(t.clientX, t.clientY);
this.hasUserControl = true;
};
MouseClass.prototype.onTouchMove = function (event) {
if (event.touches.length !== 1)
return;
var t = event.touches[0];
if (!this.updateHoverState(t.clientX, t.clientY))
return;
if (this.onInteract)
this.onInteract();
this.setCoords(t.clientX, t.clientY);
};
MouseClass.prototype.onTouchEnd = function () { this.isHoverInside = false; };
MouseClass.prototype.onMouseLeave = function () { this.isHoverInside = false; };
MouseClass.prototype.update = function () {
if (this.takeoverActive) {
var t = (performance.now() - this.takeoverStartTime) / (this.takeoverDuration * 1000);
if (t >= 1) {
this.takeoverActive = false;
this.coords.copy(this.takeoverTo);
this.coords_old.copy(this.coords);
this.diff.set(0, 0);
}
else {
var k = t * t * (3 - 2 * t);
this.coords.copy(this.takeoverFrom).lerp(this.takeoverTo, k);
}
}
this.diff.subVectors(this.coords, this.coords_old);
this.coords_old.copy(this.coords);
if (this.coords_old.x === 0 && this.coords_old.y === 0)
this.diff.set(0, 0);
if (this.isAutoActive && !this.takeoverActive)
this.diff.multiplyScalar(this.autoIntensity);
};
return MouseClass;
}());
var Mouse = new MouseClass();
// ── AutoDriver：无人操作时自动漫游 ─────────────────────────────────
var AutoDriver = /** @class */ (function () {
function AutoDriver(mouse, manager, opts) {
this.active = false;
this.current = new THREE__namespace.Vector2(0, 0);
this.target = new THREE__namespace.Vector2();
this.lastTime = performance.now();
this.activationTime = 0;
this.margin = 0.2;
this._tmpDir = new THREE__namespace.Vector2();
this.mouse = mouse;
this.manager = manager;
this.enabled = opts.enabled;
this.speed = opts.speed;
this.resumeDelay = opts.resumeDelay || 3000;
this.rampDurationMs = (opts.rampDuration || 0) * 1000;
this.pickNewTarget();
}
AutoDriver.prototype.pickNewTarget = function () {
var r = Math.random;
this.target.set((r() * 2 - 1) * (1 - this.margin), (r() * 2 - 1) * (1 - this.margin));
};
AutoDriver.prototype.forceStop = function () {
this.active = false;
this.mouse.isAutoActive = false;
};
AutoDriver.prototype.update = function () {
if (!this.enabled)
return;
var now = performance.now();
var idle = now - this.manager.lastUserInteraction;
if (idle < this.resumeDelay) {
if (this.active)
this.forceStop();
return;
}
if (this.mouse.isHoverInside) {
if (this.active)
this.forceStop();
return;
}
if (!this.active) {
this.active = true;
this.current.copy(this.mouse.coords);
this.lastTime = now;
this.activationTime = now;
}
this.mouse.isAutoActive = true;
var dtSec = (now - this.lastTime) / 1000;
this.lastTime = now;
if (dtSec > 0.2)
dtSec = 0.016;
var dir = this._tmpDir.subVectors(this.target, this.current);
var dist = dir.length();
if (dist < 0.01) {
this.pickNewTarget();
return;
}
dir.normalize();
var ramp = 1;
if (this.rampDurationMs > 0) {
var t = Math.min(1, (now - this.activationTime) / this.rampDurationMs);
ramp = t * t * (3 - 2 * t);
}
var step = this.speed * dtSec * ramp;
var move = Math.min(step, dist);
this.current.addScaledVector(dir, move);
this.mouse.setNormalized(this.current.x, this.current.y);
};
return AutoDriver;
}());
// ── ShaderPass：通用着色器渲染通道基类 ────────────────────────────
var ShaderPass = /** @class */ (function () {
function ShaderPass(props) {
var _a;
this.material = null;
this.geometry = null;
this.plane = null;
this.props = props || {};
this.uniforms = (_a = this.props.material) === null || _a === void 0 ? void 0 : _a.uniforms;
}
ShaderPass.prototype.init = function () {
this.scene = new THREE__namespace.Scene();
this.camera = new THREE__namespace.Camera();
if (this.uniforms) {
this.material = new THREE__namespace.RawShaderMaterial(this.props.material);
this.geometry = new THREE__namespace.PlaneGeometry(2.0, 2.0);
this.plane = new THREE__namespace.Mesh(this.geometry, this.material);
this.scene.add(this.plane);
}
};
ShaderPass.prototype.update = function (props) {
Common.renderer.setRenderTarget(this.props.output || null);
Common.renderer.render(this.scene, this.camera);
Common.renderer.setRenderTarget(null);
};
return ShaderPass;
}());
// ── Advection：速度场平流（含边界反弹线段） ────────────────────────
var Advection = /** @class */ (function (_super) {
__extends(Advection, _super);
function Advection(simProps) {
var _this = _super.call(this, {
material: {
vertexShader: face_vert,
fragmentShader: advection_frag,
uniforms: {
boundarySpace: { value: simProps.cellScale },
px: { value: simProps.cellScale },
fboSize: { value: simProps.fboSize },
velocity: { value: simProps.src.texture },
dt: { value: simProps.dt },
isBFECC: { value: true }
}
},
output: simProps.dst
}) || this;
_this.uniforms = _this.props.material.uniforms;
_this.init();
return _this;
}
Advection.prototype.init = function () {
_super.prototype.init.call(this);
var boundaryG = new THREE__namespace.BufferGeometry();
var verts = new Float32Array([-1, -1, 0, -1, 1, 0, -1, 1, 0, 1, 1, 0, 1, 1, 0, 1, -1, 0, 1, -1, 0, -1, -1, 0]);
boundaryG.setAttribute('position', new THREE__namespace.BufferAttribute(verts, 3));
var boundaryM = new THREE__namespace.RawShaderMaterial({
vertexShader: line_vert,
fragmentShader: boundary_vel_frag,
uniforms: this.uniforms
});
this.line = new THREE__namespace.LineSegments(boundaryG, boundaryM);
this.scene.add(this.line);
};
Advection.prototype.update = function (_c) {
var dt = _c.dt, isBounce = _c.isBounce, BFECC = _c.BFECC;
this.uniforms.dt.value = dt;
this.line.visible = isBounce;
this.uniforms.isBFECC.value = BFECC;
_super.prototype.update.call(this);
};
return Advection;
}(ShaderPass));
// ── ExternalForce：鼠标施力 ────────────────────────────────────────
var ExternalForce = /** @class */ (function (_super) {
__extends(ExternalForce, _super);
function ExternalForce(simProps) {
var _this = _super.call(this, { output: simProps.dst }) || this;
_this.initForce(simProps);
return _this;
}
ExternalForce.prototype.initForce = function (simProps) {
_super.prototype.init.call(this);
var mouseG = new THREE__namespace.PlaneGeometry(1, 1);
var mouseM = new THREE__namespace.RawShaderMaterial({
vertexShader: mouse_vert,
fragmentShader: externalForce_frag,
blending: THREE__namespace.AdditiveBlending,
depthWrite: false,
uniforms: {
px: { value: simProps.cellScale },
force: { value: new THREE__namespace.Vector2(0, 0) },
center: { value: new THREE__namespace.Vector2(0, 0) },
scale: { value: new THREE__namespace.Vector2(simProps.cursor_size, simProps.cursor_size) }
}
});
this.mouse = new THREE__namespace.Mesh(mouseG, mouseM);
this.scene.add(this.mouse);
};
ExternalForce.prototype.update = function (props) {
var forceX = (Mouse.diff.x / 2) * props.mouse_force;
var forceY = (Mouse.diff.y / 2) * props.mouse_force;
var cursorSizeX = props.cursor_size * props.cellScale.x;
var cursorSizeY = props.cursor_size * props.cellScale.y;
var centerX = Math.min(Math.max(Mouse.coords.x, -1 + cursorSizeX + props.cellScale.x * 2), 1 - cursorSizeX - props.cellScale.x * 2);
var centerY = Math.min(Math.max(Mouse.coords.y, -1 + cursorSizeY + props.cellScale.y * 2), 1 - cursorSizeY - props.cellScale.y * 2);
var u = this.mouse.material.uniforms;
u.force.value.set(forceX, forceY);
u.center.value.set(centerX, centerY);
u.scale.value.set(props.cursor_size, props.cursor_size);
_super.prototype.update.call(this);
};
return ExternalForce;
}(ShaderPass));
// ── Viscous：粘性扩散（雅可比迭代） ──────────────────────────────
var Viscous = /** @class */ (function (_super) {
__extends(Viscous, _super);
function Viscous(simProps) {
var _this = _super.call(this, {
material: {
vertexShader: face_vert,
fragmentShader: viscous_frag,
uniforms: {
boundarySpace: { value: simProps.boundarySpace },
velocity: { value: simProps.src.texture },
velocity_new: { value: simProps.dst_.texture },
v: { value: simProps.viscous },
px: { value: simProps.cellScale },
dt: { value: simProps.dt }
}
},
output: simProps.dst,
output0: simProps.dst_,
output1: simProps.dst
}) || this;
_this.init();
return _this;
}
Viscous.prototype.init = function () {
_super.prototype.init.call(this);
var boundaryG = new THREE__namespace.BufferGeometry();
var verts = new Float32Array([-1, -1, 0, -1, 1, 0, -1, 1, 0, 1, 1, 0, 1, 1, 0, 1, -1, 0, 1, -1, 0, -1, -1, 0]);
boundaryG.setAttribute('position', new THREE__namespace.BufferAttribute(verts, 3));
var boundaryM = new THREE__namespace.RawShaderMaterial({
vertexShader: line_vert,
fragmentShader: boundary_vel_frag,
uniforms: this.uniforms
});
this.line = new THREE__namespace.LineSegments(boundaryG, boundaryM);
this.scene.add(this.line);
};
Viscous.prototype.update = function (_c) {
var viscous = _c.viscous, iterations = _c.iterations, dt = _c.dt, isBounce = _c.isBounce;
var fbo_in, fbo_out;
this.uniforms.v.value = viscous;
this.line.visible = isBounce;
for (var i = 0; i < iterations; i++) {
if (i % 2 === 0) {
fbo_in = this.props.output0;
fbo_out = this.props.output1;
}
else {
fbo_in = this.props.output1;
fbo_out = this.props.output0;
}
this.uniforms.velocity_new.value = fbo_in.texture;
this.props.output = fbo_out;
this.uniforms.dt.value = dt;
_super.prototype.update.call(this);
}
return fbo_out;
};
return Viscous;
}(ShaderPass));
// ── Divergence：散度计算 ──────────────────────────────────────────
var Divergence = /** @class */ (function (_super) {
__extends(Divergence, _super);
function Divergence(simProps) {
var _this = _super.call(this, {
material: {
vertexShader: face_vert,
fragmentShader: divergence_frag,
uniforms: {
boundarySpace: { value: simProps.boundarySpace },
velocity: { value: simProps.src.texture },
px: { value: simProps.cellScale },
dt: { value: simProps.dt }
}
},
output: simProps.dst
}) || this;
_this.init();
return _this;
}
Divergence.prototype.update = function (_c) {
var vel = _c.vel;
this.uniforms.velocity.value = vel.texture;
_super.prototype.update.call(this);
};
return Divergence;
}(ShaderPass));
// ── Poisson：压力求解（雅可比迭代） ──────────────────────────────
var Poisson = /** @class */ (function (_super) {
__extends(Poisson, _super);
function Poisson(simProps) {
var _this = _super.call(this, {
material: {
vertexShader: face_vert,
fragmentShader: poisson_frag,
uniforms: {
boundarySpace: { value: simProps.boundarySpace },
pressure: { value: simProps.dst_.texture },
divergence: { value: simProps.src.texture },
px: { value: simProps.cellScale }
}
},
output: simProps.dst,
output0: simProps.dst_,
output1: simProps.dst
}) || this;
_this.init();
return _this;
}
Poisson.prototype.init = function () {
_super.prototype.init.call(this);
var boundaryG = new THREE__namespace.BufferGeometry();
var verts = new Float32Array([-1, -1, 0, -1, 1, 0, -1, 1, 0, 1, 1, 0, 1, 1, 0, 1, -1, 0, 1, -1, 0, -1, -1, 0]);
boundaryG.setAttribute('position', new THREE__namespace.BufferAttribute(verts, 3));
var boundaryM = new THREE__namespace.RawShaderMaterial({
vertexShader: line_vert,
fragmentShader: boundary_pres_frag,
uniforms: this.uniforms
});
this.line = new THREE__namespace.LineSegments(boundaryG, boundaryM);
this.scene.add(this.line);
};
Poisson.prototype.update = function (_c) {
var iterations = _c.iterations, isBounce = _c.isBounce;
var p_in, p_out;
this.line.visible = isBounce;
for (var i = 0; i < iterations; i++) {
if (i % 2 === 0) {
p_in = this.props.output0;
p_out = this.props.output1;
}
else {
p_in = this.props.output1;
p_out = this.props.output0;
}
this.uniforms.pressure.value = p_in.texture;
this.props.output = p_out;
_super.prototype.update.call(this);
}
return p_out;
};
return Poisson;
}(ShaderPass));
// ── Pressure：压力梯度修正 ────────────────────────────────────────
var Pressure = /** @class */ (function (_super) {
__extends(Pressure, _super);
function Pressure(simProps) {
var _this = _super.call(this, {
material: {
vertexShader: face_vert,
fragmentShader: pressure_frag,
uniforms: {
boundarySpace: { value: simProps.boundarySpace },
pressure: { value: simProps.src_p.texture },
velocity: { value: simProps.src_v.texture },
px: { value: simProps.cellScale },
dt: { value: simProps.dt }
}
},
output: simProps.dst
}) || this;
_this.init();
return _this;
}
Pressure.prototype.init = function () {
_super.prototype.init.call(this);
var boundaryG = new THREE__namespace.BufferGeometry();
var verts = new Float32Array([-1, -1, 0, -1, 1, 0, -1, 1, 0, 1, 1, 0, 1, 1, 0, 1, -1, 0, 1, -1, 0, -1, -1, 0]);
boundaryG.setAttribute('position', new THREE__namespace.BufferAttribute(verts, 3));
var boundaryM = new THREE__namespace.RawShaderMaterial({
vertexShader: line_vert,
fragmentShader: boundary_vel_frag,
uniforms: this.uniforms
});
this.line = new THREE__namespace.LineSegments(boundaryG, boundaryM);
this.scene.add(this.line);
};
Pressure.prototype.update = function (_c) {
var vel = _c.vel, pressure = _c.pressure, isBounce = _c.isBounce;
this.uniforms.velocity.value = vel.texture;
this.uniforms.pressure.value = pressure.texture;
this.line.visible = isBounce;
_super.prototype.update.call(this);
};
return Pressure;
}(ShaderPass));
// ── Simulation：整合流体仿真管线 ─────────────────────────────────
var Simulation = /** @class */ (function () {
function Simulation(options) {
this.fboSize = new THREE__namespace.Vector2();
this.cellScale = new THREE__namespace.Vector2();
this.boundarySpace = new THREE__namespace.Vector2();
this.options = Object.assign({ iterations_poisson: 32, iterations_viscous: 32, mouse_force: 20, resolution: 0.5, cursor_size: 100, viscous: 30, isBounce: false, dt: 0.014, isViscous: false, BFECC: true }, (options || {}));
this.fbos = { vel_0: null, vel_1: null, vel_viscous0: null, vel_viscous1: null, div: null, pressure_0: null, pressure_1: null };
this.init();
}
Simulation.prototype.init = function () {
this.calcSize();
this.createAllFBO();
this.createShaderPass();
};
Simulation.prototype.getFloatType = function () {
var isIOS = /(iPad|iPhone|iPod)/i.test(navigator.userAgent);
return isIOS ? THREE__namespace.HalfFloatType : THREE__namespace.FloatType;
};
Simulation.prototype.createAllFBO = function () {
var type = this.getFloatType();
var opts = {
type: type,
depthBuffer: false, stencilBuffer: false,
minFilter: THREE__namespace.LinearFilter, magFilter: THREE__namespace.LinearFilter,
wrapS: THREE__namespace.ClampToEdgeWrapping, wrapT: THREE__namespace.ClampToEdgeWrapping
};
for (var key in this.fbos) {
this.fbos[key] = new THREE__namespace.WebGLRenderTarget(this.fboSize.x, this.fboSize.y, opts);
}
};
Simulation.prototype.createShaderPass = function () {
this.advection = new Advection({
cellScale: this.cellScale, fboSize: this.fboSize,
dt: this.options.dt, src: this.fbos.vel_0, dst: this.fbos.vel_1
});
this.externalForce = new ExternalForce({
cellScale: this.cellScale, cursor_size: this.options.cursor_size, dst: this.fbos.vel_1
});
this.viscous = new Viscous({
cellScale: this.cellScale, boundarySpace: this.boundarySpace,
viscous: this.options.viscous, src: this.fbos.vel_1,
dst: this.fbos.vel_viscous1, dst_: this.fbos.vel_viscous0, dt: this.options.dt
});
this.divergence = new Divergence({
cellScale: this.cellScale, boundarySpace: this.boundarySpace,
src: this.fbos.vel_viscous0, dst: this.fbos.div, dt: this.options.dt
});
this.poisson = new Poisson({
cellScale: this.cellScale, boundarySpace: this.boundarySpace,
src: this.fbos.div, dst: this.fbos.pressure_1, dst_: this.fbos.pressure_0
});
this.pressure = new Pressure({
cellScale: this.cellScale, boundarySpace: this.boundarySpace,
src_p: this.fbos.pressure_0, src_v: this.fbos.vel_viscous0,
dst: this.fbos.vel_0, dt: this.options.dt
});
};
Simulation.prototype.calcSize = function () {
var width = Math.max(1, Math.round(this.options.resolution * Common.width));
var height = Math.max(1, Math.round(this.options.resolution * Common.height));
this.cellScale.set(1.0 / width, 1.0 / height);
this.fboSize.set(width, height);
};
Simulation.prototype.resize = function () {
this.calcSize();
for (var key in this.fbos) {
this.fbos[key].setSize(this.fboSize.x, this.fboSize.y);
}
};
Simulation.prototype.update = function () {
if (this.options.isBounce)
this.boundarySpace.set(0, 0);
else
this.boundarySpace.copy(this.cellScale);
this.advection.update({ dt: this.options.dt, isBounce: this.options.isBounce, BFECC: this.options.BFECC });
this.externalForce.update({ cursor_size: this.options.cursor_size, mouse_force: this.options.mouse_force, cellScale: this.cellScale });
var vel = this.fbos.vel_1;
if (this.options.isViscous) {
vel = this.viscous.update({ viscous: this.options.viscous, iterations: this.options.iterations_viscous, dt: this.options.dt, isBounce: this.options.isBounce });
}
this.divergence.update({ vel: vel });
var pressure = this.poisson.update({ iterations: this.options.iterations_poisson, isBounce: this.options.isBounce });
this.pressure.update({ vel: vel, pressure: pressure, isBounce: this.options.isBounce });
};
return Simulation;
}());
// ── Output：最终颜色输出场景 ──────────────────────────────────────
var Output = /** @class */ (function () {
function Output() {
this.init();
}
Output.prototype.init = function () {
this.simulation = new Simulation();
this.scene = new THREE__namespace.Scene();
this.camera = new THREE__namespace.Camera();
this.output = new THREE__namespace.Mesh(new THREE__namespace.PlaneGeometry(2, 2), new THREE__namespace.RawShaderMaterial({
vertexShader: face_vert,
fragmentShader: color_frag,
transparent: true,
depthWrite: false,
uniforms: {
velocity: { value: this.simulation.fbos.vel_0.texture },
boundarySpace: { value: new THREE__namespace.Vector2() },
palette: { value: paletteTex },
bgColor: { value: bgVec4 }
}
}));
this.scene.add(this.output);
};
Output.prototype.resize = function () { this.simulation.resize(); };
Output.prototype.render = function () {
Common.renderer.setRenderTarget(null);
Common.renderer.render(this.scene, this.camera);
};
Output.prototype.update = function () { this.simulation.update(); this.render(); };
return Output;
}());
// ── WebGLManager：顶层管理器，驱动动画循环 ───────────────────────
var WebGLManager = /** @class */ (function () {
function WebGLManager(props) {
var _this = this;
this.lastUserInteraction = performance.now();
this.running = false;
this.props = props;
Common.init(props.$wrapper);
this.mouse = Mouse;
this.mouse.init(props.$wrapper);
Mouse.autoIntensity = props.autoIntensity;
Mouse.takeoverDuration = props.takeoverDuration;
Mouse.onInteract = function () {
_this.lastUserInteraction = performance.now();
if (_this.autoDriver)
_this.autoDriver.forceStop();
};
this.autoDriver = new AutoDriver(Mouse, this, {
enabled: props.autoDemo,
speed: props.autoSpeed,
resumeDelay: props.autoResumeDelay,
rampDuration: props.autoRampDuration
});
this.init();
this._loop = this.loop.bind(this);
this._resize = this.resize.bind(this);
this._onVisibility = function () {
if (document.hidden) {
_this.pause();
}
else if (self.isVisible) {
self.ngZone.runOutsideAngular(function () {
_this.start();
});
}
};
window.addEventListener('resize', this._resize);
document.addEventListener('visibilitychange', this._onVisibility);
}
WebGLManager.prototype.init = function () {
this.props.$wrapper.prepend(Common.renderer.domElement);
this.output = new Output();
};
WebGLManager.prototype.resize = function () {
Common.resize();
this.output.resize();
};
WebGLManager.prototype.render = function () {
if (this.autoDriver)
this.autoDriver.update();
Mouse.update();
Common.update();
this.output.update();
};
WebGLManager.prototype.loop = function () {
if (!this.running)
return;
this.render();
self.rafId = requestAnimationFrame(this._loop);
};
WebGLManager.prototype.start = function () {
if (this.running)
return;
this.running = true;
this._loop();
};
WebGLManager.prototype.pause = function () {
this.running = false;
if (self.rafId !== null) {
cancelAnimationFrame(self.rafId);
self.rafId = null;
}
};
WebGLManager.prototype.dispose = function () {
try {
window.removeEventListener('resize', this._resize);
document.removeEventListener('visibilitychange', this._onVisibility);
this.mouse.dispose();
if (Common.renderer) {
var canvas = Common.renderer.domElement;
if (canvas && canvas.parentNode)
canvas.parentNode.removeChild(canvas);
Common.renderer.dispose();
}
}
catch (e) {
void 0;
}
};
return WebGLManager;
}());
// ─── 实例化并配置 ────────────────────────────────────────────────
var webgl = new WebGLManager({
$wrapper: container,
autoDemo: self.ncAutoDemo,
autoSpeed: self.ncAutoSpeed,
autoIntensity: self.ncAutoIntensity,
takeoverDuration: self.ncTakeoverDuration,
autoResumeDelay: self.ncAutoResumeDelay,
autoRampDuration: self.ncAutoRampDuration
});
this.applyOptionsToSimulation(webgl.output.simulation);
return webgl;
};
// ─── 将 @Input 参数写入 simulation.options ───────────────────────────────
LiquidEtherBackgroundComponent.prototype.applyOptions = function () {
var _a, _b;
if (!((_b = (_a = this.webgl) === null || _a === void 0 ? void 0 : _a.output) === null || _b === void 0 ? void 0 : _b.simulation))
return;
this.applyOptionsToSimulation(this.webgl.output.simulation);
};
LiquidEtherBackgroundComponent.prototype.applyOptionsToSimulation = function (sim) {
var _a;
var prevRes = sim.options.resolution;
Object.assign(sim.options, {
mouse_force: this.ncMouseForce,
cursor_size: this.ncCursorSize,
isViscous: this.ncIsViscous,
viscous: this.ncViscous,
iterations_viscous: this.ncIterationsViscous,
iterations_poisson: this.ncIterationsPoisson,
dt: this.ncDt,
BFECC: this.ncBFECC,
resolution: this.ncResolution,
isBounce: this.ncIsBounce
});
if (this.ncResolution !== prevRes) {
sim.resize();
}
// 同步 autoDriver 参数
if ((_a = this.webgl) === null || _a === void 0 ? void 0 : _a.autoDriver) {
this.webgl.autoDriver.enabled = this.ncAutoDemo;
this.webgl.autoDriver.speed = this.ncAutoSpeed;
this.webgl.autoDriver.resumeDelay = this.ncAutoResumeDelay;
this.webgl.autoDriver.rampDurationMs = this.ncAutoRampDuration * 1000;
if (this.webgl.autoDriver.mouse) {
this.webgl.autoDriver.mouse.autoIntensity = this.ncAutoIntensity;
this.webgl.autoDriver.mouse.takeoverDuration = this.ncTakeoverDuration;
}
}
};
// ─── ResizeObserver：容器尺寸变化时重新计算 ──────────────────────────────
LiquidEtherBackgroundComponent.prototype.setupResizeObserver = function (container) {
var _this = this;
this.resizeObserver = new ResizeObserver(function () {
if (!_this.webgl)
return;
if (_this.resizeRafId !== null)
cancelAnimationFrame(_this.resizeRafId);
_this.ngZone.runOutsideAngular(function () {
_this.resizeRafId = requestAnimationFrame(function () {
if (!_this.webgl)
return;
_this.webgl.resize();
_this.resizeRafId = null;
});
});
});
this.resizeObserver.observe(container);
};
// ─── IntersectionObserver：不可见时暂停渲染以节省性能 ────────────────────
LiquidEtherBackgroundComponent.prototype.setupIntersectionObserver = function (container) {
var _this = this;
this.intersectionObserver = new IntersectionObserver(function (entries) {
var entry = entries[0];
_this.isVisible = entry.isIntersecting && entry.intersectionRatio > 0;
if (!_this.webgl)
return;
if (_this.isVisible && !document.hidden) {
_this.ngZone.runOutsideAngular(function () {
_this.webgl.start();
});
}
else {
_this.webgl.pause();
}
}, { threshold: [0, 0.01, 0.1] });
this.intersectionObserver.observe(container);
};
// ─── 清理资源 ─────────────────────────────────────────────────────────────
LiquidEtherBackgroundComponent.prototype.cleanup = function () {
var _a, _b;
if (this.rafId !== null) {
cancelAnimationFrame(this.rafId);
this.rafId = null;
}
if (this.resizeRafId !== null) {
cancelAnimationFrame(this.resizeRafId);
this.resizeRafId = null;
}
try {
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
}
catch (e) {
void 0;
}
try {
(_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
}
catch (e) {
void 0;
}
if (this.webgl) {
this.webgl.dispose();
this.webgl = null;
}
};
// ─── HostListeners for Mouse/Touch Interaction ──────────────────────────
LiquidEtherBackgroundComponent.prototype.onMouseMove = function (event) {
var _a, _b;
(_b = (_a = this.webgl) === null || _a === void 0 ? void 0 : _a.mouse) === null || _b === void 0 ? void 0 : _b.onMouseMove(event);
};
LiquidEtherBackgroundComponent.prototype.onTouchStart = function (event) {
var _a, _b;
(_b = (_a = this.webgl) === null || _a === void 0 ? void 0 : _a.mouse) === null || _b === void 0 ? void 0 : _b.onTouchStart(event);
};
LiquidEtherBackgroundComponent.prototype.onTouchMove = function (event) {
var _a, _b;
(_b = (_a = this.webgl) === null || _a === void 0 ? void 0 : _a.mouse) === null || _b === void 0 ? void 0 : _b.onTouchMove(event);
};
LiquidEtherBackgroundComponent.prototype.onTouchEnd = function () {
var _a, _b;
(_b = (_a = this.webgl) === null || _a === void 0 ? void 0 : _a.mouse) === null || _b === void 0 ? void 0 : _b.onTouchEnd();
};
LiquidEtherBackgroundComponent.prototype.onMouseLeave = function () {
var _a, _b;
(_b = (_a = this.webgl) === null || _a === void 0 ? void 0 : _a.mouse) === null || _b === void 0 ? void 0 : _b.onMouseLeave();
};
return LiquidEtherBackgroundComponent;
}());
LiquidEtherBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LiquidEtherBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
LiquidEtherBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LiquidEtherBackgroundComponent, selector: "nc-liquid-ether-background", inputs: { ncBgColor: "ncBgColor", ncColors: "ncColors", ncMouseForce: "ncMouseForce", ncCursorSize: "ncCursorSize", ncIsViscous: "ncIsViscous", ncViscous: "ncViscous", ncIterationsViscous: "ncIterationsViscous", ncIterationsPoisson: "ncIterationsPoisson", ncDt: "ncDt", ncBFECC: "ncBFECC", ncResolution: "ncResolution", ncIsBounce: "ncIsBounce", ncAutoDemo: "ncAutoDemo", ncAutoSpeed: "ncAutoSpeed", ncAutoIntensity: "ncAutoIntensity", ncTakeoverDuration: "ncTakeoverDuration", ncAutoResumeDelay: "ncAutoResumeDelay", ncAutoRampDuration: "ncAutoRampDuration" }, host: { listeners: { "mousemove": "onMouseMove($event)", "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-liquid-ether-canvas-container\" [style.background-color]=\"ncBgColor\"></div>\r\n<div class=\"nc-content-wrapper\">\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.nc-liquid-ether-canvas-container{position:absolute;inset:0;z-index:0}.nc-content-wrapper{position:relative;z-index:1;width:100%;height:100%}\n"] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LiquidEtherBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-liquid-ether-background',
templateUrl: './liquid-ether-background.component.html',
styleUrls: ['./liquid-ether-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncBgColor: [{
type: i0.Input
}], ncColors: [{
type: i0.Input
}], ncMouseForce: [{
type: i0.Input
}], ncCursorSize: [{
type: i0.Input
}], ncIsViscous: [{
type: i0.Input
}], ncViscous: [{
type: i0.Input
}], ncIterationsViscous: [{
type: i0.Input
}], ncIterationsPoisson: [{
type: i0.Input
}], ncDt: [{
type: i0.Input
}], ncBFECC: [{
type: i0.Input
}], ncResolution: [{
type: i0.Input
}], ncIsBounce: [{
type: i0.Input
}], ncAutoDemo: [{
type: i0.Input
}], ncAutoSpeed: [{
type: i0.Input
}], ncAutoIntensity: [{
type: i0.Input
}], ncTakeoverDuration: [{
type: i0.Input
}], ncAutoResumeDelay: [{
type: i0.Input
}], ncAutoRampDuration: [{
type: i0.Input
}], onMouseMove: [{
type: i0.HostListener,
args: ['mousemove', ['$event']]
}], onTouchStart: [{
type: i0.HostListener,
args: ['touchstart', ['$event']]
}], onTouchMove: [{
type: i0.HostListener,
args: ['touchmove', ['$event']]
}], onTouchEnd: [{
type: i0.HostListener,
args: ['touchend']
}], onMouseLeave: [{
type: i0.HostListener,
args: ['mouseleave']
}] } });
var NcLiquidEtherBackgroundModule = /** @class */ (function () {
function NcLiquidEtherBackgroundModule() {
}
return NcLiquidEtherBackgroundModule;
}());
NcLiquidEtherBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLiquidEtherBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcLiquidEtherBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLiquidEtherBackgroundModule, declarations: [LiquidEtherBackgroundComponent], imports: [common.CommonModule], exports: [LiquidEtherBackgroundComponent] });
NcLiquidEtherBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLiquidEtherBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcLiquidEtherBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
LiquidEtherBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
LiquidEtherBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.LiquidEtherBackgroundComponent = LiquidEtherBackgroundComponent;
exports.NcLiquidEtherBackgroundModule = NcLiquidEtherBackgroundModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-liquid-ether-background.umd.js.map