ng-cw-v12
Version:
Angular UI Component Library
357 lines (348 loc) • 23.2 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/galaxy-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"]["galaxy-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);
var vertexShader = "\nprecision highp float;\nattribute vec3 position;\nattribute vec2 uv;\nvarying vec2 vUv;\nvoid main() {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n}\n";
var fragmentShader = "\nprecision highp float;\n\nuniform float uTime;\nuniform vec3 uResolution;\nuniform vec2 uFocal;\nuniform vec2 uRotation;\nuniform float uStarSpeed;\nuniform float uDensity;\nuniform float uHueShift;\nuniform float uSpeed;\nuniform vec2 uMouse;\nuniform float uGlowIntensity;\nuniform float uSaturation;\nuniform bool uMouseRepulsion;\nuniform float uTwinkleIntensity;\nuniform float uRotationSpeed;\nuniform float uRepulsionStrength;\nuniform float uMouseActiveFactor;\nuniform float uAutoCenterRepulsion;\n\n\nvarying vec2 vUv;\n\n#define NUM_LAYER 4.0\n#define STAR_COLOR_CUTOFF 0.2\n#define MAT45 mat2(0.7071, -0.7071, 0.7071, 0.7071)\n#define PERIOD 3.0\n\nfloat Hash21(vec2 p) {\n p = fract(p * vec2(123.34, 456.21));\n p += dot(p, p + 45.32);\n return fract(p.x * p.y);\n}\n\nfloat tri(float x) {\n return abs(fract(x) * 2.0 - 1.0);\n}\n\nfloat tris(float x) {\n float t = fract(x);\n return 1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0));\n}\n\nfloat trisn(float x) {\n float t = fract(x);\n return 2.0 * (1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0))) - 1.0;\n}\n\nvec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n}\n\nfloat Star(vec2 uv, float flare) {\n float d = length(uv);\n float m = (0.05 * uGlowIntensity) / d;\n float rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));\n m += rays * flare * uGlowIntensity;\n uv *= MAT45;\n rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));\n m += rays * 0.3 * flare * uGlowIntensity;\n m *= smoothstep(1.0, 0.2, d);\n return m;\n}\n\nvec3 StarLayer(vec2 uv) {\n vec3 col = vec3(0.0);\n\n vec2 gv = fract(uv) - 0.5; \n vec2 id = floor(uv);\n\n for (int y = -1; y <= 1; y++) {\n for (int x = -1; x <= 1; x++) {\n vec2 offset = vec2(float(x), float(y));\n vec2 si = id + vec2(float(x), float(y));\n float seed = Hash21(si);\n float size = fract(seed * 345.32);\n float glossLocal = tri(uStarSpeed / (PERIOD * seed + 1.0));\n float flareSize = smoothstep(0.9, 1.0, size) * glossLocal;\n\n float red = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 1.0)) + STAR_COLOR_CUTOFF;\n float blu = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 3.0)) + STAR_COLOR_CUTOFF;\n float grn = min(red, blu) * seed;\n vec3 base = vec3(red, grn, blu);\n \n float hue = atan(base.g - base.r, base.b - base.r) / (2.0 * 3.14159) + 0.5;\n hue = fract(hue + uHueShift / 360.0);\n float sat = length(base - vec3(dot(base, vec3(0.299, 0.587, 0.114)))) * uSaturation;\n float val = max(max(base.r, base.g), base.b);\n base = hsv2rgb(vec3(hue, sat, val));\n\n vec2 pad = vec2(tris(seed * 34.0 + uTime * uSpeed / 10.0), tris(seed * 38.0 + uTime * uSpeed / 30.0)) - 0.5;\n\n float star = Star(gv - offset - pad, flareSize);\n vec3 color = base;\n\n float twinkle = trisn(uTime * uSpeed + seed * 6.2831) * 0.5 + 1.0;\n twinkle = mix(1.0, twinkle, uTwinkleIntensity);\n star *= twinkle;\n \n col += star * size * color;\n }\n }\n\n return col;\n}\n\nvoid main() {\n vec2 focalPx = uFocal * uResolution.xy;\n vec2 uv = (vUv * uResolution.xy - focalPx) / uResolution.y;\n\n vec2 mouseNorm = uMouse - vec2(0.5);\n \n if (uAutoCenterRepulsion > 0.0) {\n vec2 centerUV = vec2(0.0, 0.0);\n float centerDist = length(uv - centerUV);\n vec2 repulsion = normalize(uv - centerUV) * (uAutoCenterRepulsion / (centerDist + 0.1));\n uv += repulsion * 0.05;\n } else if (uMouseRepulsion) {\n vec2 mousePosUV = (uMouse * uResolution.xy - focalPx) / uResolution.y;\n float mouseDist = length(uv - mousePosUV);\n vec2 repulsion = normalize(uv - mousePosUV) * (uRepulsionStrength / (mouseDist + 0.1));\n uv += repulsion * 0.05 * uMouseActiveFactor;\n } else {\n vec2 mouseOffset = mouseNorm * 0.1 * uMouseActiveFactor;\n uv += mouseOffset;\n }\n\n float autoRotAngle = uTime * uRotationSpeed;\n mat2 autoRot = mat2(cos(autoRotAngle), -sin(autoRotAngle), sin(autoRotAngle), cos(autoRotAngle));\n uv = autoRot * uv;\n\n uv = mat2(uRotation.x, -uRotation.y, uRotation.y, uRotation.x) * uv;\n\n vec3 col = vec3(0.0);\n\n for (float i = 0.0; i < 1.0; i += 1.0 / NUM_LAYER) {\n float depth = fract(i + uStarSpeed * uSpeed);\n float scale = mix(20.0 * uDensity, 0.5 * uDensity, depth);\n float fade = depth * smoothstep(1.0, 0.9, depth);\n col += StarLayer(uv * scale + i * 453.32) * fade;\n }\n\n float alpha = length(col);\n alpha = smoothstep(0.0, 0.3, alpha);\n alpha = min(alpha, 1.0);\n gl_FragColor = vec4(col, alpha);\n}\n";
var GalaxyBackgroundComponent = /** @class */ (function () {
function GalaxyBackgroundComponent(ngZone) {
var _this = this;
this.ngZone = ngZone;
/** 将星系效应的焦点设置为 [x, y] 坐标（0-1） */
this.ncFocal = [0.5, 0.5];
/** 控制星系的旋转矩阵，其旋转值为[x, y] */
this.ncRotation = [1.0, 0.0];
/** 控制星星的移动速度和动画效果（0.1-2） */
this.ncStarSpeed = 0.5;
/** 控制星星的密度（0.1-3） */
this.ncDensity = 1;
/** 将所有星星的色调按指定的角度（0-360度）进行调整（在ncSaturation不为0时生效）*/
this.ncHueShift = 140;
/** 为真时，停止所有基于时间的动画 */
this._disableAnimation = false;
/** 所有动画的全局速度倍率（0.1-3） */
this.ncSpeed = 1.0;
/** 是否启用鼠标交互 */
this._mouseInteraction = true;
/** 控制星光效果的强度（0-1） */
this.ncGlowIntensity = 0.3;
/** 控制星星的颜色饱和度（0-1，0：灰度 1：全彩） */
this.ncSaturation = 0.0;
/** 是否启用鼠标排斥效果 */
this._mouseRepulsion = true;
/** 鼠标排斥力度（0-10） */
this.ncRepulsionStrength = 2;
/** 控制星星闪烁的程度（0-1，0：不闪烁 1：最大闪烁） */
this.ncTwinkleIntensity = 0.3;
/** 星系自动旋转的速度（0-0.5） */
this.ncRotationSpeed = 0.1;
/** 自动向中心排斥的强度（0-20，如果大于0则不使用鼠标位置） */
this.ncAutoCenterRepulsion = 0;
this.animationId = null;
this.targetMousePos = { x: 0.5, y: 0.5 };
this.smoothMousePos = { x: 0.5, y: 0.5 };
this.targetMouseActive = 0.0;
this.smoothMouseActive = 0.0;
this.animate = function (t) {
_this.animationId = requestAnimationFrame(_this.animate);
if (!_this.ncDisableAnimation) {
_this.uniforms.uTime.value = t * 0.001;
_this.uniforms.uStarSpeed.value = (t * 0.001 * _this.ncStarSpeed) / 10.0;
}
var lerpFactor = 0.05;
_this.smoothMousePos.x += (_this.targetMousePos.x - _this.smoothMousePos.x) * lerpFactor;
_this.smoothMousePos.y += (_this.targetMousePos.y - _this.smoothMousePos.y) * lerpFactor;
_this.smoothMouseActive += (_this.targetMouseActive - _this.smoothMouseActive) * lerpFactor;
_this.uniforms.uMouse.value[0] = _this.smoothMousePos.x;
_this.uniforms.uMouse.value[1] = _this.smoothMousePos.y;
_this.uniforms.uMouseActiveFactor.value = _this.smoothMouseActive;
_this.renderer.render(_this.scene, _this.camera);
};
this.handleMouseLeave = function () {
_this.targetMouseActive = 0.0;
};
}
Object.defineProperty(GalaxyBackgroundComponent.prototype, "ncDisableAnimation", {
get: function () {
return this._disableAnimation;
},
set: function (val) {
this._disableAnimation = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(GalaxyBackgroundComponent.prototype, "ncMouseInteraction", {
get: function () {
return this._mouseInteraction;
},
set: function (val) {
this._mouseInteraction = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(GalaxyBackgroundComponent.prototype, "ncMouseRepulsion", {
get: function () {
return this._mouseRepulsion;
},
set: function (val) {
this._mouseRepulsion = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
GalaxyBackgroundComponent.prototype.ngOnInit = function () { };
GalaxyBackgroundComponent.prototype.ngAfterViewInit = function () {
this.initWebGL();
};
GalaxyBackgroundComponent.prototype.ngOnDestroy = function () {
this.cleanup();
};
GalaxyBackgroundComponent.prototype.ngOnChanges = function (changes) {
if (!this.uniforms)
return;
this.updateUniforms();
};
GalaxyBackgroundComponent.prototype.initWebGL = function () {
var _this = this;
var container = this.containerRef.nativeElement;
this.renderer = new THREE__namespace.WebGLRenderer({
alpha: true,
premultipliedAlpha: false,
antialias: false
});
this.renderer.setClearColor(0x000000, 0);
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
container.appendChild(this.renderer.domElement);
this.scene = new THREE__namespace.Scene();
this.camera = new THREE__namespace.OrthographicCamera(-1, 1, 1, -1, 0, 1);
this.uniforms = {
uTime: { value: 0 },
uResolution: { value: new THREE__namespace.Vector3() },
uFocal: { value: new THREE__namespace.Vector2() },
uRotation: { value: new THREE__namespace.Vector2() },
uStarSpeed: { value: this.ncStarSpeed },
uDensity: { value: this.ncDensity },
uHueShift: { value: this.ncHueShift },
uSpeed: { value: this.ncSpeed },
uMouse: { value: [this.smoothMousePos.x, this.smoothMousePos.y] },
uGlowIntensity: { value: this.ncGlowIntensity },
uSaturation: { value: this.ncSaturation },
uMouseRepulsion: { value: this.ncMouseRepulsion },
uTwinkleIntensity: { value: this.ncTwinkleIntensity },
uRotationSpeed: { value: this.ncRotationSpeed },
uRepulsionStrength: { value: this.ncRepulsionStrength },
uMouseActiveFactor: { value: 0.0 },
uAutoCenterRepulsion: { value: this.ncAutoCenterRepulsion }
};
this.updateUniforms();
var geometry = new THREE__namespace.PlaneGeometry(2, 2);
this.material = new THREE__namespace.RawShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
uniforms: this.uniforms,
transparent: true,
blending: THREE__namespace.NormalBlending
});
var mesh = new THREE__namespace.Mesh(geometry, this.material);
this.scene.add(mesh);
this.resizeObserver = new ResizeObserver(function () { return _this.resize(); });
this.resizeObserver.observe(container);
this.resize();
this.ngZone.runOutsideAngular(function () {
_this.animate(0);
});
};
GalaxyBackgroundComponent.prototype.updateUniforms = function () {
if (!this.uniforms || !this.renderer)
return;
this.renderer.setClearColor(0x000000, 0);
this.material && (this.material.transparent = true);
this.uniforms.uFocal.value.set(this.ncFocal[0], this.ncFocal[1]);
this.uniforms.uRotation.value.set(this.ncRotation[0], this.ncRotation[1]);
this.uniforms.uStarSpeed.value = this.ncStarSpeed;
this.uniforms.uDensity.value = this.ncDensity;
this.uniforms.uHueShift.value = this.ncHueShift;
this.uniforms.uSpeed.value = this.ncSpeed;
this.uniforms.uGlowIntensity.value = this.ncGlowIntensity;
this.uniforms.uSaturation.value = this.ncSaturation;
this.uniforms.uMouseRepulsion.value = this.ncMouseRepulsion;
this.uniforms.uTwinkleIntensity.value = this.ncTwinkleIntensity;
this.uniforms.uRotationSpeed.value = this.ncRotationSpeed;
this.uniforms.uRepulsionStrength.value = this.ncRepulsionStrength;
this.uniforms.uAutoCenterRepulsion.value = this.ncAutoCenterRepulsion;
};
GalaxyBackgroundComponent.prototype.resize = function () {
if (!this.containerRef || !this.renderer)
return;
var container = this.containerRef.nativeElement;
var width = container.offsetWidth;
var height = container.offsetHeight;
this.renderer.setSize(width, height);
if (this.uniforms) {
this.uniforms.uResolution.value.set(width, height, width / height);
}
};
GalaxyBackgroundComponent.prototype.onMouseMove = function (e) {
if (!this.ncMouseInteraction)
return;
this.updateMousePos(e.clientX, e.clientY);
};
GalaxyBackgroundComponent.prototype.onMouseLeave = function () {
this.handleMouseLeave();
};
GalaxyBackgroundComponent.prototype.onTouchMove = function (e) {
if (!this.ncMouseInteraction || e.touches.length === 0)
return;
this.updateMousePos(e.touches[0].clientX, e.touches[0].clientY);
};
GalaxyBackgroundComponent.prototype.onTouchEnd = function () {
this.handleMouseLeave();
};
GalaxyBackgroundComponent.prototype.updateMousePos = function (clientX, clientY) {
if (!this.containerRef)
return;
var rect = this.containerRef.nativeElement.getBoundingClientRect();
var x = (clientX - rect.left) / rect.width;
var y = 1.0 - (clientY - rect.top) / rect.height;
this.targetMousePos = { x: x, y: y };
this.targetMouseActive = 1.0;
};
GalaxyBackgroundComponent.prototype.cleanup = function () {
var _a;
if (this.animationId !== null) {
cancelAnimationFrame(this.animationId);
this.animationId = null;
}
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
var container = (_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
if (container) {
if (this.renderer && container.contains(this.renderer.domElement)) {
container.removeChild(this.renderer.domElement);
}
}
if (this.renderer) {
this.renderer.dispose();
}
if (this.material) {
this.material.dispose();
}
if (this.scene) {
this.scene.clear();
}
};
return GalaxyBackgroundComponent;
}());
GalaxyBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GalaxyBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
GalaxyBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GalaxyBackgroundComponent, selector: "nc-galaxy-background", inputs: { ncFocal: "ncFocal", ncRotation: "ncRotation", ncStarSpeed: "ncStarSpeed", ncDensity: "ncDensity", ncHueShift: "ncHueShift", ncDisableAnimation: "ncDisableAnimation", ncSpeed: "ncSpeed", ncMouseInteraction: "ncMouseInteraction", ncGlowIntensity: "ncGlowIntensity", ncSaturation: "ncSaturation", ncMouseRepulsion: "ncMouseRepulsion", ncRepulsionStrength: "ncRepulsionStrength", ncTwinkleIntensity: "ncTwinkleIntensity", ncRotationSpeed: "ncRotationSpeed", ncAutoCenterRepulsion: "ncAutoCenterRepulsion" }, host: { listeners: { "mousemove": "onMouseMove($event)", "mouseleave": "onMouseLeave()", "touchstart": "onTouchMove($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-galaxy-canvas-container\"></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-galaxy-canvas-container{position:absolute;inset:0;z-index:0;background-color:#000}.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: GalaxyBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-galaxy-background',
templateUrl: './galaxy-background.component.html',
styleUrls: ['./galaxy-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncFocal: [{
type: i0.Input
}], ncRotation: [{
type: i0.Input
}], ncStarSpeed: [{
type: i0.Input
}], ncDensity: [{
type: i0.Input
}], ncHueShift: [{
type: i0.Input
}], ncDisableAnimation: [{
type: i0.Input
}], ncSpeed: [{
type: i0.Input
}], ncMouseInteraction: [{
type: i0.Input
}], ncGlowIntensity: [{
type: i0.Input
}], ncSaturation: [{
type: i0.Input
}], ncMouseRepulsion: [{
type: i0.Input
}], ncRepulsionStrength: [{
type: i0.Input
}], ncTwinkleIntensity: [{
type: i0.Input
}], ncRotationSpeed: [{
type: i0.Input
}], ncAutoCenterRepulsion: [{
type: i0.Input
}], onMouseMove: [{
type: i0.HostListener,
args: ['mousemove', ['$event']]
}], onMouseLeave: [{
type: i0.HostListener,
args: ['mouseleave']
}], onTouchMove: [{
type: i0.HostListener,
args: ['touchstart', ['$event']]
}, {
type: i0.HostListener,
args: ['touchmove', ['$event']]
}], onTouchEnd: [{
type: i0.HostListener,
args: ['touchend']
}] } });
var NcGalaxyBackgroundModule = /** @class */ (function () {
function NcGalaxyBackgroundModule() {
}
return NcGalaxyBackgroundModule;
}());
NcGalaxyBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcGalaxyBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcGalaxyBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcGalaxyBackgroundModule, declarations: [GalaxyBackgroundComponent], imports: [common.CommonModule], exports: [GalaxyBackgroundComponent] });
NcGalaxyBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcGalaxyBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcGalaxyBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
GalaxyBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
GalaxyBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.GalaxyBackgroundComponent = GalaxyBackgroundComponent;
exports.NcGalaxyBackgroundModule = NcGalaxyBackgroundModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-galaxy-background.umd.js.map