ng-cw-v12
Version:
Angular UI Component Library
218 lines (209 loc) • 13.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/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"]["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 VERT = "\nattribute vec3 position;\nvoid main() {\n gl_Position = vec4(position, 1.0);\n}\n";
var FRAG = "\nprecision highp float;\n\nuniform float uTime;\nuniform float uAmplitude;\nuniform vec3 uColorStops[3];\nuniform vec2 uResolution;\nuniform float uBlend;\n\n// out vec4 fragColor; eliminated for WebGL1\n\n\nvec3 permute(vec3 x) {\n return mod(((x * 34.0) + 1.0) * x, 289.0);\n}\n\nfloat snoise(vec2 v){\n const vec4 C = vec4(\n 0.211324865405187, 0.366025403784439,\n -0.577350269189626, 0.024390243902439\n );\n vec2 i = floor(v + dot(v, C.yy));\n vec2 x0 = v - i + dot(i, C.xx);\n vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n i = mod(i, 289.0);\n\n vec3 p = permute(\n permute(i.y + vec3(0.0, i1.y, 1.0))\n + i.x + vec3(0.0, i1.x, 1.0)\n );\n\n vec3 m = max(\n 0.5 - vec3(\n dot(x0, x0),\n dot(x12.xy, x12.xy),\n dot(x12.zw, x12.zw)\n ), \n 0.0\n );\n m = m * m;\n m = m * m;\n\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);\n\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n\nvoid main() {\n vec2 uv = gl_FragCoord.xy / uResolution;\n \n vec3 rampColor;\n if (uv.x < 0.5) {\n rampColor = mix(uColorStops[0], uColorStops[1], uv.x * 2.0);\n } else {\n rampColor = mix(uColorStops[1], uColorStops[2], (uv.x - 0.5) * 2.0);\n }\n \n float height = snoise(vec2(uv.x * 2.0 + uTime * 0.1, uTime * 0.25)) * 0.5 * uAmplitude;\n height = exp(height);\n height = (uv.y * 2.0 - height + 0.2);\n float intensity = 0.6 * height;\n \n float midPoint = 0.20;\n float auroraAlpha = smoothstep(midPoint - uBlend * 0.5, midPoint + uBlend * 0.5, intensity);\n \n vec3 auroraColor = intensity * rampColor;\n \n gl_FragColor = vec4(auroraColor * auroraAlpha, auroraAlpha);\n}\n";
var AuroraBackgroundComponent = /** @class */ (function () {
function AuroraBackgroundComponent(ngZone) {
this.ngZone = ngZone;
/** 颜色断点，默认为 ['#5227FF', '#7cff67', '#5227FF'] */
this.ncColorStops = ['#5227FF', '#7cff67', '#5227FF'];
/** 极光振幅（0-3） */
this.ncAmplitude = 1;
/** 极光混合度（0-1） */
this.ncBlend = 0.5;
/** 极光运动速度（0-2） */
this.ncSpeed = 1;
this.animateId = 0;
this.isDestroyed = false;
}
AuroraBackgroundComponent.prototype.ngOnInit = function () { };
AuroraBackgroundComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
_this.initWebGL();
});
};
AuroraBackgroundComponent.prototype.ngOnDestroy = function () {
this.isDestroyed = true;
this.cleanup();
};
AuroraBackgroundComponent.prototype.ngOnChanges = function (changes) {
if (this.material) {
if (changes['ncAmplitude']) {
this.material.uniforms['uAmplitude'].value = this.ncAmplitude;
}
if (changes['ncBlend']) {
this.material.uniforms['uBlend'].value = this.ncBlend;
}
if (changes['ncColorStops']) {
this.material.uniforms['uColorStops'].value = this.parseColorStops(this.ncColorStops);
}
// Parameters applied, material automatically updates via uniformity.
}
};
AuroraBackgroundComponent.prototype.onResize = function () {
this.resize();
};
AuroraBackgroundComponent.prototype.parseColorStops = function (stops) {
var array = stops && stops.length === 3 ? stops : ['#5227FF', '#7cff67', '#5227FF'];
return array.map(function (hex) {
var c = new THREE__namespace.Color(hex);
return new THREE__namespace.Vector3(c.r, c.g, c.b);
});
};
AuroraBackgroundComponent.prototype.initWebGL = function () {
var _this = this;
var _a, _b;
var ctn = this.containerRef.nativeElement;
if (!ctn)
return;
this.renderer = new THREE__namespace.WebGLRenderer({
alpha: true,
premultipliedAlpha: true,
antialias: true
});
this.renderer.setClearColor(0x000000, 0);
this.renderer.domElement.style.backgroundColor = 'transparent';
this.renderer.domElement.style.width = '100%';
this.renderer.domElement.style.height = '100%';
ctn.appendChild(this.renderer.domElement);
this.scene = new THREE__namespace.Scene();
this.camera = new THREE__namespace.OrthographicCamera(-1, 1, 1, -1, 0, 1);
var geometry = new THREE__namespace.PlaneGeometry(2, 2);
this.material = new THREE__namespace.RawShaderMaterial({
vertexShader: VERT,
fragmentShader: FRAG,
uniforms: {
uTime: { value: 0 },
uAmplitude: { value: (_a = this.ncAmplitude) !== null && _a !== void 0 ? _a : 1.0 },
uColorStops: { value: this.parseColorStops(this.ncColorStops) },
uResolution: { value: new THREE__namespace.Vector2(ctn.offsetWidth, ctn.offsetHeight) },
uBlend: { value: (_b = this.ncBlend) !== null && _b !== void 0 ? _b : 0.5 }
},
transparent: true,
blending: THREE__namespace.CustomBlending,
blendEquation: THREE__namespace.AddEquation,
blendSrc: THREE__namespace.OneFactor,
blendDst: THREE__namespace.OneMinusSrcAlphaFactor
});
this.mesh = new THREE__namespace.Mesh(geometry, this.material);
this.scene.add(this.mesh);
this.resize();
var update = function (t) {
var _a;
if (_this.isDestroyed)
return;
_this.animateId = requestAnimationFrame(update);
var timeElapsed = t * 0.01;
_this.material.uniforms['uTime'].value = timeElapsed * ((_a = _this.ncSpeed) !== null && _a !== void 0 ? _a : 1.0) * 0.1;
_this.renderer.render(_this.scene, _this.camera);
};
this.animateId = requestAnimationFrame(update);
};
AuroraBackgroundComponent.prototype.resize = function () {
if (!this.containerRef || !this.renderer || !this.material)
return;
var ctn = this.containerRef.nativeElement;
var width = ctn.offsetWidth;
var height = ctn.offsetHeight;
this.renderer.setSize(width, height, false);
this.material.uniforms['uResolution'].value.set(width, height);
};
AuroraBackgroundComponent.prototype.cleanup = function () {
if (this.animateId) {
cancelAnimationFrame(this.animateId);
}
if (this.renderer && this.containerRef) {
var ctn = this.containerRef.nativeElement;
if (ctn.contains(this.renderer.domElement)) {
ctn.removeChild(this.renderer.domElement);
}
this.renderer.dispose();
}
if (this.material) {
this.material.dispose();
}
if (this.mesh && this.mesh.geometry) {
this.mesh.geometry.dispose();
}
};
return AuroraBackgroundComponent;
}());
AuroraBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: AuroraBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
AuroraBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AuroraBackgroundComponent, selector: "nc-aurora-background", inputs: { ncColorStops: "ncColorStops", ncAmplitude: "ncAmplitude", ncBlend: "ncBlend", ncSpeed: "ncSpeed" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-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-aurora-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: AuroraBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-aurora-background',
templateUrl: './aurora-background.component.html',
styleUrls: ['./aurora-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncColorStops: [{
type: i0.Input
}], ncAmplitude: [{
type: i0.Input
}], ncBlend: [{
type: i0.Input
}], ncSpeed: [{
type: i0.Input
}], onResize: [{
type: i0.HostListener,
args: ['window:resize']
}] } });
var NcAuroraBackgroundModule = /** @class */ (function () {
function NcAuroraBackgroundModule() {
}
return NcAuroraBackgroundModule;
}());
NcAuroraBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAuroraBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcAuroraBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAuroraBackgroundModule, declarations: [AuroraBackgroundComponent], imports: [common.CommonModule], exports: [AuroraBackgroundComponent] });
NcAuroraBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAuroraBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcAuroraBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
AuroraBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
AuroraBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.AuroraBackgroundComponent = AuroraBackgroundComponent;
exports.NcAuroraBackgroundModule = NcAuroraBackgroundModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-aurora-background.umd.js.map