ng-cw-v12
Version:
Angular UI Component Library
268 lines (248 loc) • 10.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewChild, Input, HostListener, NgModule } from '@angular/core';
import * as THREE from 'three';
import { CommonModule } from '@angular/common';
const VERT = `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1.0);
}
`;
const FRAG = `
precision highp float;
uniform float uTime;
uniform float uAmplitude;
uniform vec3 uColorStops[3];
uniform vec2 uResolution;
uniform float uBlend;
// out vec4 fragColor; eliminated for WebGL1
vec3 permute(vec3 x) {
return mod(((x * 34.0) + 1.0) * x, 289.0);
}
float snoise(vec2 v){
const vec4 C = vec4(
0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439
);
vec2 i = floor(v + dot(v, C.yy));
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute(
permute(i.y + vec3(0.0, i1.y, 1.0))
+ i.x + vec3(0.0, i1.x, 1.0)
);
vec3 m = max(
0.5 - vec3(
dot(x0, x0),
dot(x12.xy, x12.xy),
dot(x12.zw, x12.zw)
),
0.0
);
m = m * m;
m = m * m;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
void main() {
vec2 uv = gl_FragCoord.xy / uResolution;
vec3 rampColor;
if (uv.x < 0.5) {
rampColor = mix(uColorStops[0], uColorStops[1], uv.x * 2.0);
} else {
rampColor = mix(uColorStops[1], uColorStops[2], (uv.x - 0.5) * 2.0);
}
float height = snoise(vec2(uv.x * 2.0 + uTime * 0.1, uTime * 0.25)) * 0.5 * uAmplitude;
height = exp(height);
height = (uv.y * 2.0 - height + 0.2);
float intensity = 0.6 * height;
float midPoint = 0.20;
float auroraAlpha = smoothstep(midPoint - uBlend * 0.5, midPoint + uBlend * 0.5, intensity);
vec3 auroraColor = intensity * rampColor;
gl_FragColor = vec4(auroraColor * auroraAlpha, auroraAlpha);
}
`;
class AuroraBackgroundComponent {
constructor(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;
}
ngOnInit() { }
ngAfterViewInit() {
this.ngZone.runOutsideAngular(() => {
this.initWebGL();
});
}
ngOnDestroy() {
this.isDestroyed = true;
this.cleanup();
}
ngOnChanges(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.
}
}
onResize() {
this.resize();
}
parseColorStops(stops) {
const array = stops && stops.length === 3 ? stops : ['#5227FF', '#7cff67', '#5227FF'];
return array.map(hex => {
const c = new THREE.Color(hex);
return new THREE.Vector3(c.r, c.g, c.b);
});
}
initWebGL() {
var _a, _b;
const ctn = this.containerRef.nativeElement;
if (!ctn)
return;
this.renderer = new THREE.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.Scene();
this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
const geometry = new THREE.PlaneGeometry(2, 2);
this.material = new THREE.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.Vector2(ctn.offsetWidth, ctn.offsetHeight) },
uBlend: { value: (_b = this.ncBlend) !== null && _b !== void 0 ? _b : 0.5 }
},
transparent: true,
blending: THREE.CustomBlending,
blendEquation: THREE.AddEquation,
blendSrc: THREE.OneFactor,
blendDst: THREE.OneMinusSrcAlphaFactor
});
this.mesh = new THREE.Mesh(geometry, this.material);
this.scene.add(this.mesh);
this.resize();
const update = (t) => {
var _a;
if (this.isDestroyed)
return;
this.animateId = requestAnimationFrame(update);
const 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);
}
resize() {
if (!this.containerRef || !this.renderer || !this.material)
return;
const ctn = this.containerRef.nativeElement;
const width = ctn.offsetWidth;
const height = ctn.offsetHeight;
this.renderer.setSize(width, height, false);
this.material.uniforms['uResolution'].value.set(width, height);
}
cleanup() {
if (this.animateId) {
cancelAnimationFrame(this.animateId);
}
if (this.renderer && this.containerRef) {
const 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();
}
}
}
AuroraBackgroundComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AuroraBackgroundComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
AuroraBackgroundComponent.ɵcmp = i0.ɵɵ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, 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.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AuroraBackgroundComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-aurora-background',
templateUrl: './aurora-background.component.html',
styleUrls: ['./aurora-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { containerRef: [{
type: ViewChild,
args: ['container', { static: true }]
}], ncColorStops: [{
type: Input
}], ncAmplitude: [{
type: Input
}], ncBlend: [{
type: Input
}], ncSpeed: [{
type: Input
}], onResize: [{
type: HostListener,
args: ['window:resize']
}] } });
class NcAuroraBackgroundModule {
}
NcAuroraBackgroundModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcAuroraBackgroundModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcAuroraBackgroundModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcAuroraBackgroundModule, declarations: [AuroraBackgroundComponent], imports: [CommonModule], exports: [AuroraBackgroundComponent] });
NcAuroraBackgroundModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcAuroraBackgroundModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcAuroraBackgroundModule, decorators: [{
type: NgModule,
args: [{
declarations: [
AuroraBackgroundComponent
],
imports: [
CommonModule
],
exports: [
AuroraBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AuroraBackgroundComponent, NcAuroraBackgroundModule };
//# sourceMappingURL=ng-cw-v12-aurora-background.js.map