ng-cw-v12
Version:
Angular UI Component Library
318 lines (309 loc) • 20.5 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/soft-aurora-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"]["soft-aurora-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 = "\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 float uSpeed;\nuniform float uScale;\nuniform float uBrightness;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform float uNoiseFreq;\nuniform float uNoiseAmp;\nuniform float uBandHeight;\nuniform float uBandSpread;\nuniform float uOctaveDecay;\nuniform float uLayerOffset;\nuniform float uColorSpeed;\nuniform vec2 uMouse;\nuniform float uMouseInfluence;\nuniform bool uEnableMouse;\n\n#define TAU 6.28318\n\nvec3 gradientHash(vec3 p) {\n p = vec3(\n dot(p, vec3(127.1, 311.7, 234.6)),\n dot(p, vec3(269.5, 183.3, 198.3)),\n dot(p, vec3(169.5, 283.3, 156.9))\n );\n vec3 h = fract(sin(p) * 43758.5453123);\n float phi = acos(2.0 * h.x - 1.0);\n float theta = TAU * h.y;\n return vec3(cos(theta) * sin(phi), sin(theta) * cos(phi), cos(phi));\n}\n\nfloat quinticSmooth(float t) {\n float t2 = t * t;\n float t3 = t * t2;\n return 6.0 * t3 * t2 - 15.0 * t2 * t2 + 10.0 * t3;\n}\n\nvec3 cosineGradient(float t, vec3 a, vec3 b, vec3 c, vec3 d) {\n return a + b * cos(TAU * (c * t + d));\n}\n\nfloat perlin3D(float amplitude, float frequency, float px, float py, float pz) {\n float x = px * frequency;\n float y = py * frequency;\n\n float fx = floor(x); float fy = floor(y); float fz = floor(pz);\n float cx = ceil(x); float cy = ceil(y); float cz = ceil(pz);\n\n vec3 g000 = gradientHash(vec3(fx, fy, fz));\n vec3 g100 = gradientHash(vec3(cx, fy, fz));\n vec3 g010 = gradientHash(vec3(fx, cy, fz));\n vec3 g110 = gradientHash(vec3(cx, cy, fz));\n vec3 g001 = gradientHash(vec3(fx, fy, cz));\n vec3 g101 = gradientHash(vec3(cx, fy, cz));\n vec3 g011 = gradientHash(vec3(fx, cy, cz));\n vec3 g111 = gradientHash(vec3(cx, cy, cz));\n\n float d000 = dot(g000, vec3(x - fx, y - fy, pz - fz));\n float d100 = dot(g100, vec3(x - cx, y - fy, pz - fz));\n float d010 = dot(g010, vec3(x - fx, y - cy, pz - fz));\n float d110 = dot(g110, vec3(x - cx, y - cy, pz - fz));\n float d001 = dot(g001, vec3(x - fx, y - fy, pz - cz));\n float d101 = dot(g101, vec3(x - cx, y - fy, pz - cz));\n float d011 = dot(g011, vec3(x - fx, y - cy, pz - cz));\n float d111 = dot(g111, vec3(x - cx, y - cy, pz - cz));\n\n float sx = quinticSmooth(x - fx);\n float sy = quinticSmooth(y - fy);\n float sz = quinticSmooth(pz - fz);\n\n float lx00 = mix(d000, d100, sx);\n float lx10 = mix(d010, d110, sx);\n float lx01 = mix(d001, d101, sx);\n float lx11 = mix(d011, d111, sx);\n\n float ly0 = mix(lx00, lx10, sy);\n float ly1 = mix(lx01, lx11, sy);\n\n return amplitude * mix(ly0, ly1, sz);\n}\n\nfloat auroraGlow(float t, vec2 shift) {\n vec2 uv = gl_FragCoord.xy / uResolution.y;\n uv += shift;\n\n float noiseVal = 0.0;\n float freq = uNoiseFreq;\n float amp = uNoiseAmp;\n vec2 samplePos = uv * uScale;\n\n for (float i = 0.0; i < 3.0; i += 1.0) {\n noiseVal += perlin3D(amp, freq, samplePos.x, samplePos.y, t);\n amp *= uOctaveDecay;\n freq *= 2.0;\n }\n\n float yBand = uv.y * 10.0 - uBandHeight * 10.0;\n return 0.3 * max(exp(uBandSpread * (1.0 - 1.1 * abs(noiseVal + yBand))), 0.0);\n}\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution.xy;\n float t = uSpeed * 0.4 * uTime;\n\n vec2 shift = vec2(0.0);\n if (uEnableMouse) {\n shift = (uMouse - 0.5) * uMouseInfluence;\n }\n\n vec3 col = vec3(0.0);\n col += 0.99 * auroraGlow(t, shift) * cosineGradient(uv.x + uTime * uSpeed * 0.2 * uColorSpeed, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.3, 0.20, 0.20)) * uColor1;\n col += 0.99 * auroraGlow(t + uLayerOffset, shift) * cosineGradient(uv.x + uTime * uSpeed * 0.1 * uColorSpeed, vec3(0.5), vec3(0.5), vec3(2.0, 1.0, 0.0), vec3(0.5, 0.20, 0.25)) * uColor2;\n\n col *= uBrightness;\n float alpha = clamp(length(col), 0.0, 1.0);\n gl_FragColor = vec4(col, alpha);\n}\n";
var SoftAuroraBackgroundComponent = /** @class */ (function () {
function SoftAuroraBackgroundComponent(ngZone) {
var _this = this;
this.ngZone = ngZone;
/** 播放速度（0.1-5） */
this.ncSpeed = 0.6;
/** 缩放比例（0.1-3） */
this.ncScale = 1.5;
/** 亮度（0.1-3） */
this.ncBrightness = 1.0;
/** 光晕颜色1 */
this.ncColor1 = '#f7f7f7';
/** 光晕颜色2 */
this.ncColor2 = '#e100ff';
/** 噪声频率（0.5-10） */
this.ncNoiseFrequency = 2.5;
/** 噪声幅度（0.5-10） */
this.ncNoiseAmplitude = 1.0;
/** 色带高度位置（0-1） */
this.ncBandHeight = 0.5;
/** 色带扩展程度（0.1-3） */
this.ncBandSpread = 1.0;
/** 噪声每层的衰减量（0.01-0.5） */
this.ncOctaveDecay = 0.1;
/** 两层极光之间的时间差（0-1） */
this.ncLayerOffset = 0;
/** 颜色渐变速度（0.1-5） */
this.ncColorSpeed = 1.0;
/** 鼠标事件的影响力（0.1-1） */
this.ncMouseInfluence = 0.25;
/** 是否启用鼠标交互 */
this._enableMouseInteraction = true;
this.animationFrameId = null;
this.targetMouse = [0.5, 0.5];
this.currentMouse = [0.5, 0.5];
this.timeOffset = 0;
this.lastTime = 0;
this.animate = function () {
_this.animationFrameId = requestAnimationFrame(_this.animate);
var currentTime = performance.now();
_this.timeOffset += (currentTime - _this.lastTime);
_this.lastTime = currentTime;
if (_this.material) {
_this.material.uniforms['uTime'].value = _this.timeOffset * 0.001;
if (_this.ncEnableMouseInteraction) {
_this.currentMouse[0] += 0.05 * (_this.targetMouse[0] - _this.currentMouse[0]);
_this.currentMouse[1] += 0.05 * (_this.targetMouse[1] - _this.currentMouse[1]);
_this.material.uniforms['uMouse'].value.set(_this.currentMouse[0], _this.currentMouse[1]);
}
else {
_this.material.uniforms['uMouse'].value.set(0.5, 0.5);
}
_this.renderer.render(_this.scene, _this.camera);
}
};
}
Object.defineProperty(SoftAuroraBackgroundComponent.prototype, "ncEnableMouseInteraction", {
get: function () {
return this._enableMouseInteraction;
},
set: function (val) {
this._enableMouseInteraction = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
SoftAuroraBackgroundComponent.prototype.ngOnInit = function () { };
SoftAuroraBackgroundComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
_this.initThreeJS();
});
};
SoftAuroraBackgroundComponent.prototype.ngOnDestroy = function () {
this.cleanup();
};
SoftAuroraBackgroundComponent.prototype.ngOnChanges = function (changes) {
if (!this.material)
return;
if (changes['ncSpeed'])
this.material.uniforms['uSpeed'].value = this.ncSpeed;
if (changes['ncScale'])
this.material.uniforms['uScale'].value = this.ncScale;
if (changes['ncBrightness'])
this.material.uniforms['uBrightness'].value = this.ncBrightness;
if (changes['ncColor1'])
this.material.uniforms['uColor1'].value.set(this.ncColor1);
if (changes['ncColor2'])
this.material.uniforms['uColor2'].value.set(this.ncColor2);
if (changes['ncNoiseFrequency'])
this.material.uniforms['uNoiseFreq'].value = this.ncNoiseFrequency;
if (changes['ncNoiseAmplitude'])
this.material.uniforms['uNoiseAmp'].value = this.ncNoiseAmplitude;
if (changes['ncBandHeight'])
this.material.uniforms['uBandHeight'].value = this.ncBandHeight;
if (changes['ncBandSpread'])
this.material.uniforms['uBandSpread'].value = this.ncBandSpread;
if (changes['ncOctaveDecay'])
this.material.uniforms['uOctaveDecay'].value = this.ncOctaveDecay;
if (changes['ncLayerOffset'])
this.material.uniforms['uLayerOffset'].value = this.ncLayerOffset;
if (changes['ncColorSpeed'])
this.material.uniforms['uColorSpeed'].value = this.ncColorSpeed;
if (changes['ncMouseInfluence'])
this.material.uniforms['uMouseInfluence'].value = this.ncMouseInfluence;
if (changes['ncEnableMouseInteraction'])
this.material.uniforms['uEnableMouse'].value = this.ncEnableMouseInteraction;
};
SoftAuroraBackgroundComponent.prototype.onMouseMove = function (e) {
if (!this.ncEnableMouseInteraction || !this.renderer)
return;
var canvas = this.renderer.domElement;
var rect = canvas.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0)
return;
this.targetMouse = [
(e.clientX - rect.left) / rect.width,
1.0 - (e.clientY - rect.top) / rect.height
];
};
SoftAuroraBackgroundComponent.prototype.onMouseLeave = function () {
if (!this.ncEnableMouseInteraction)
return;
this.targetMouse = [0.5, 0.5];
};
SoftAuroraBackgroundComponent.prototype.initThreeJS = function () {
var _this = this;
var container = this.containerRef.nativeElement;
this.renderer = new THREE__namespace.WebGLRenderer({ alpha: true, antialias: false, premultipliedAlpha: false });
this.renderer.setClearColor(0x000000, 0); // transparent background
this.scene = new THREE__namespace.Scene();
this.camera = new THREE__namespace.OrthographicCamera(-1, 1, 1, -1, 0, 1);
this.material = new THREE__namespace.ShaderMaterial({
vertexShader: vertexShader,
fragmentShader: fragmentShader,
transparent: true,
uniforms: {
uTime: { value: 0 },
uResolution: { value: new THREE__namespace.Vector3() },
uSpeed: { value: this.ncSpeed },
uScale: { value: this.ncScale },
uBrightness: { value: this.ncBrightness },
uColor1: { value: new THREE__namespace.Color(this.ncColor1) },
uColor2: { value: new THREE__namespace.Color(this.ncColor2) },
uNoiseFreq: { value: this.ncNoiseFrequency },
uNoiseAmp: { value: this.ncNoiseAmplitude },
uBandHeight: { value: this.ncBandHeight },
uBandSpread: { value: this.ncBandSpread },
uOctaveDecay: { value: this.ncOctaveDecay },
uLayerOffset: { value: this.ncLayerOffset },
uColorSpeed: { value: this.ncColorSpeed },
uMouse: { value: new THREE__namespace.Vector2(0.5, 0.5) },
uMouseInfluence: { value: this.ncMouseInfluence },
uEnableMouse: { value: this.ncEnableMouseInteraction }
}
});
var geometry = new THREE__namespace.PlaneGeometry(2, 2);
this.mesh = new THREE__namespace.Mesh(geometry, this.material);
this.scene.add(this.mesh);
container.appendChild(this.renderer.domElement);
this.resizeObserver = new ResizeObserver(function () { return _this.resize(); });
this.resizeObserver.observe(container);
this.resize();
this.lastTime = performance.now();
this.animate();
};
SoftAuroraBackgroundComponent.prototype.resize = function () {
if (!this.containerRef || !this.renderer)
return;
var container = this.containerRef.nativeElement;
var width = container.offsetWidth;
var height = container.offsetHeight;
if (width === 0 || height === 0)
return;
this.renderer.setSize(width, height);
if (this.material) {
this.material.uniforms['uResolution'].value.set(width, height, width / height);
}
};
SoftAuroraBackgroundComponent.prototype.cleanup = function () {
if (this.animationFrameId !== null) {
cancelAnimationFrame(this.animationFrameId);
this.animationFrameId = null;
}
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
if (this.renderer && this.containerRef) {
var container = this.containerRef.nativeElement;
if (container.contains(this.renderer.domElement)) {
container.removeChild(this.renderer.domElement);
}
this.renderer.dispose();
this.renderer.forceContextLoss();
}
if (this.mesh) {
if (this.mesh.geometry)
this.mesh.geometry.dispose();
if (this.material)
this.material.dispose();
}
};
return SoftAuroraBackgroundComponent;
}());
SoftAuroraBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: SoftAuroraBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
SoftAuroraBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SoftAuroraBackgroundComponent, selector: "nc-soft-aurora-background", inputs: { ncSpeed: "ncSpeed", ncScale: "ncScale", ncBrightness: "ncBrightness", ncColor1: "ncColor1", ncColor2: "ncColor2", ncNoiseFrequency: "ncNoiseFrequency", ncNoiseAmplitude: "ncNoiseAmplitude", ncBandHeight: "ncBandHeight", ncBandSpread: "ncBandSpread", ncOctaveDecay: "ncOctaveDecay", ncLayerOffset: "ncLayerOffset", ncColorSpeed: "ncColorSpeed", ncMouseInfluence: "ncMouseInfluence", ncEnableMouseInteraction: "ncEnableMouseInteraction" }, host: { listeners: { "mousemove": "onMouseMove($event)", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-soft-aurora-canvas-container\"></div>\r\n<div class=\"nc-content-wrapper\">\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block;position:relative;width:100%;height:100%;overflow:hidden}.nc-soft-aurora-canvas-container{position:absolute;inset:0;z-index:0;width:100%;height:100%;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: SoftAuroraBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-soft-aurora-background',
templateUrl: './soft-aurora-background.component.html',
styleUrls: ['./soft-aurora-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncSpeed: [{
type: i0.Input
}], ncScale: [{
type: i0.Input
}], ncBrightness: [{
type: i0.Input
}], ncColor1: [{
type: i0.Input
}], ncColor2: [{
type: i0.Input
}], ncNoiseFrequency: [{
type: i0.Input
}], ncNoiseAmplitude: [{
type: i0.Input
}], ncBandHeight: [{
type: i0.Input
}], ncBandSpread: [{
type: i0.Input
}], ncOctaveDecay: [{
type: i0.Input
}], ncLayerOffset: [{
type: i0.Input
}], ncColorSpeed: [{
type: i0.Input
}], ncMouseInfluence: [{
type: i0.Input
}], ncEnableMouseInteraction: [{
type: i0.Input
}], onMouseMove: [{
type: i0.HostListener,
args: ['mousemove', ['$event']]
}], onMouseLeave: [{
type: i0.HostListener,
args: ['mouseleave']
}] } });
var NcSoftAuroraBackgroundModule = /** @class */ (function () {
function NcSoftAuroraBackgroundModule() {
}
return NcSoftAuroraBackgroundModule;
}());
NcSoftAuroraBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSoftAuroraBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcSoftAuroraBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSoftAuroraBackgroundModule, declarations: [SoftAuroraBackgroundComponent], imports: [common.CommonModule], exports: [SoftAuroraBackgroundComponent] });
NcSoftAuroraBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSoftAuroraBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSoftAuroraBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
SoftAuroraBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
SoftAuroraBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcSoftAuroraBackgroundModule = NcSoftAuroraBackgroundModule;
exports.SoftAuroraBackgroundComponent = SoftAuroraBackgroundComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-soft-aurora-background.umd.js.map