ng-cw-v12
Version:
Angular UI Component Library
312 lines (303 loc) • 20.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/grainient-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"]["grainient-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 vertex = "\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = vec4(position, 1.0);\n }\n";
var fragment = "\n precision highp float;\n uniform vec2 iResolution;\n uniform float iTime;\n uniform float uTimeSpeed;\n uniform float uColorBalance;\n uniform float uWarpStrength;\n uniform float uWarpFrequency;\n uniform float uWarpSpeed;\n uniform float uWarpAmplitude;\n uniform float uBlendAngle;\n uniform float uBlendSoftness;\n uniform float uRotationAmount;\n uniform float uNoiseScale;\n uniform float uGrainAmount;\n uniform float uGrainScale;\n uniform float uGrainAnimated;\n uniform float uContrast;\n uniform float uGamma;\n uniform float uSaturation;\n uniform vec2 uCenterOffset;\n uniform float uZoom;\n uniform vec3 uColor1;\n uniform vec3 uColor2;\n uniform vec3 uColor3;\n\n #define S(a,b,t) smoothstep(a,b,t)\n\n mat2 Rot(float a) {\n float s = sin(a), c = cos(a);\n return mat2(c, -s, s, c);\n }\n\n vec2 hash(vec2 p) {\n p = vec2(dot(p, vec2(2127.1, 81.17)), dot(p, vec2(1269.5, 283.37)));\n return fract(sin(p) * 43758.5453);\n }\n\n float noise(vec2 p) {\n vec2 i = floor(p), f = fract(p), u = f * f * (3.0 - 2.0 * f);\n float n = mix(mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 0.0)), f - vec2(0.0, 0.0)),\n dot(-1.0 + 2.0 * hash(i + vec2(1.0, 0.0)), f - vec2(1.0, 0.0)), u.x),\n mix(dot(-1.0 + 2.0 * hash(i + vec2(0.0, 1.0)), f - vec2(0.0, 1.0)),\n dot(-1.0 + 2.0 * hash(i + vec2(1.0, 1.0)), f - vec2(1.0, 1.0)), u.x), u.y);\n return 0.5 + 0.5 * n;\n }\n\n void mainImage(out vec4 o, vec2 C) {\n float t = iTime * uTimeSpeed;\n vec2 uv = C / iResolution.xy;\n float ratio = iResolution.x / iResolution.y;\n vec2 tuv = uv - 0.5 + uCenterOffset;\n tuv /= max(uZoom, 0.001);\n\n float degree = noise(vec2(t * 0.1, tuv.x * tuv.y) * uNoiseScale);\n tuv.y *= 1.0 / ratio;\n tuv *= Rot(radians((degree - 0.5) * uRotationAmount + 180.0));\n tuv.y *= ratio;\n\n float frequency = uWarpFrequency;\n float ws = max(uWarpStrength, 0.001);\n float amplitude = uWarpAmplitude / ws;\n float warpTime = t * uWarpSpeed;\n tuv.x += sin(tuv.y * frequency + warpTime) / amplitude;\n tuv.y += sin(tuv.x * (frequency * 1.5) + warpTime) / (amplitude * 0.5);\n\n vec3 colLav = uColor1;\n vec3 colOrg = uColor2;\n vec3 colDark = uColor3;\n float b = uColorBalance;\n float s = max(uBlendSoftness, 0.0);\n mat2 blendRot = Rot(radians(uBlendAngle));\n float blendX = (tuv * blendRot).x;\n\n float edge0 = -0.3 - b - s;\n float edge1 = 0.2 - b + s;\n float v0 = 0.5 - b + s;\n float v1 = -0.3 - b - s;\n\n vec3 layer1 = mix(colDark, colOrg, S(edge0, edge1, blendX));\n vec3 layer2 = mix(colOrg, colLav, S(edge0, edge1, blendX));\n vec3 col = mix(layer1, layer2, S(v0, v1, tuv.y));\n\n vec2 grainUv = uv * max(uGrainScale, 0.001);\n if (uGrainAnimated > 0.5) {\n grainUv += vec2(iTime * 0.05);\n }\n float grain = fract(sin(dot(grainUv, vec2(12.9898, 78.233))) * 43758.5453);\n col += (grain - 0.5) * uGrainAmount;\n\n col = (col - 0.5) * uContrast + 0.5;\n float luma = dot(col, vec3(0.2126, 0.7152, 0.0722));\n col = mix(vec3(luma), col, uSaturation);\n col = pow(max(col, 0.0), vec3(1.0 / max(uGamma, 0.001)));\n col = clamp(col, 0.0, 1.0);\n\n o = vec4(col, 1.0);\n }\n\n void main() {\n mainImage(gl_FragColor, gl_FragCoord.xy);\n }\n";
var GrainientBackgroundComponent = /** @class */ (function () {
function GrainientBackgroundComponent(ngZone) {
this.ngZone = ngZone;
/** 渐变混合中使用的主色（十六进制字符串） */
this.ncColor1 = '#FF9FFC';
/** 渐变混合中使用的辅助强调色（十六进制字符串） */
this.ncColor2 = '#5227FF';
/** 渐变混合中使用了深色底色（十六进制字符串） */
this.ncColor3 = '#B19EEF';
/** 渐变动画的速度倍增器（0-5） */
this.ncTimeSpeed = 0.25;
/** 将色调平衡向深色或浅色方向调整（-1.0 到 1.0） */
this.ncColorBalance = 0.0;
/** 波扭曲变形强度（0-4） */
this.ncWarpStrength = 1.0;
/** 波的弯曲频率（0-12） */
this.ncWarpFrequency = 5.0;
/** 弯曲动画的速度倍率（0-6）*/
this.ncWarpSpeed = 2.0;
/** 扭曲变形的基准振幅（5-80） */
this.ncWarpAmplitude = 50.0;
/** 颜色混合轴的旋转角度（deg -180-180） */
this.ncBlendAngle = 0.0;
/** 柔化颜色图层之间的过渡边缘（0-0.4） */
this.ncBlendSoftness = 0.05;
/** 旋转量受噪声驱动（0-1440） */
this.ncRotationAmount = 500.0;
/** 调整驱动旋转的噪声频率（0-4） */
this.ncNoiseScale = 2.0;
/** 颗粒感强度（0-0.4） */
this.ncGrainAmount = 0.1;
/** 颗粒感尺度（0.2-8） */
this.ncGrainScale = 2.0;
/** 让谷物随时间变化呈现动画效果 */
this._grainAnimated = false;
/** 对最终颜色进行整体对比度调整（0-2.5） */
this.ncContrast = 1.5;
/** 最终颜色的伽马校正（0.4-2.5） */
this.ncGamma = 1.0;
/** 最终颜色的饱和度（0-2.5） */
this.ncSaturation = 1.0;
/** 渐变中心的水平偏移量（-1-1） */
this.ncCenterX = 0.0;
/** 渐变中心垂直偏移量（-1-1） */
this.ncCenterY = 0.0;
/** 渐变场的缩放级别（0.3-3） */
this.ncZoom = 0.9;
this.time0 = performance.now();
this.rafId = null;
}
Object.defineProperty(GrainientBackgroundComponent.prototype, "ncGrainAnimated", {
get: function () {
return this._grainAnimated;
},
set: function (val) {
this._grainAnimated = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
GrainientBackgroundComponent.prototype.ngOnInit = function () { };
GrainientBackgroundComponent.prototype.ngAfterViewInit = function () {
var _this = this;
this.ngZone.runOutsideAngular(function () {
_this.initScene();
_this.setupResizeObserver();
_this.animate();
});
};
GrainientBackgroundComponent.prototype.ngOnDestroy = function () {
if (this.rafId)
cancelAnimationFrame(this.rafId);
if (this.resizeObserver)
this.resizeObserver.disconnect();
if (this.renderer) {
this.renderer.dispose();
this.renderer.forceContextLoss();
this.renderer.domElement.remove();
}
};
GrainientBackgroundComponent.prototype.ngOnChanges = function (changes) {
if (!this.material)
return;
this.updateUniforms();
};
GrainientBackgroundComponent.prototype.initScene = function () {
var container = this.containerRef.nativeElement;
var _a = container.getBoundingClientRect(), width = _a.width, height = _a.height;
this.renderer = new THREE__namespace.WebGLRenderer({ antialias: false, alpha: true });
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
this.renderer.setSize(width || 1, height || 1);
container.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.ShaderMaterial({
vertexShader: vertex,
fragmentShader: fragment,
uniforms: {
iTime: { value: 0 },
iResolution: { value: new THREE__namespace.Vector2(width, height) },
uTimeSpeed: { value: this.ncTimeSpeed },
uColorBalance: { value: this.ncColorBalance },
uWarpStrength: { value: this.ncWarpStrength },
uWarpFrequency: { value: this.ncWarpFrequency },
uWarpSpeed: { value: this.ncWarpSpeed },
uWarpAmplitude: { value: this.ncWarpAmplitude },
uBlendAngle: { value: this.ncBlendAngle },
uBlendSoftness: { value: this.ncBlendSoftness },
uRotationAmount: { value: this.ncRotationAmount },
uNoiseScale: { value: this.ncNoiseScale },
uGrainAmount: { value: this.ncGrainAmount },
uGrainScale: { value: this.ncGrainScale },
uGrainAnimated: { value: this.ncGrainAnimated ? 1.0 : 0.0 },
uContrast: { value: this.ncContrast },
uGamma: { value: this.ncGamma },
uSaturation: { value: this.ncSaturation },
uCenterOffset: { value: new THREE__namespace.Vector2(this.ncCenterX, this.ncCenterY) },
uZoom: { value: this.ncZoom },
uColor1: { value: new Float32Array(this.hexToRgb(this.ncColor1)) },
uColor2: { value: new Float32Array(this.hexToRgb(this.ncColor2)) },
uColor3: { value: new Float32Array(this.hexToRgb(this.ncColor3)) }
}
});
this.mesh = new THREE__namespace.Mesh(geometry, this.material);
this.scene.add(this.mesh);
};
GrainientBackgroundComponent.prototype.updateUniforms = function () {
var u = this.material.uniforms;
u['uTimeSpeed'].value = this.ncTimeSpeed;
u['uColorBalance'].value = this.ncColorBalance;
u['uWarpStrength'].value = this.ncWarpStrength;
u['uWarpFrequency'].value = this.ncWarpFrequency;
u['uWarpSpeed'].value = this.ncWarpSpeed;
u['uWarpAmplitude'].value = this.ncWarpAmplitude;
u['uBlendAngle'].value = this.ncBlendAngle;
u['uBlendSoftness'].value = this.ncBlendSoftness;
u['uRotationAmount'].value = this.ncRotationAmount;
u['uNoiseScale'].value = this.ncNoiseScale;
u['uGrainAmount'].value = this.ncGrainAmount;
u['uGrainScale'].value = this.ncGrainScale;
u['uGrainAnimated'].value = this.ncGrainAnimated ? 1.0 : 0.0;
u['uContrast'].value = this.ncContrast;
u['uGamma'].value = this.ncGamma;
u['uSaturation'].value = this.ncSaturation;
u['uCenterOffset'].value.set(this.ncCenterX, this.ncCenterY);
u['uZoom'].value = this.ncZoom;
u['uColor1'].value = new Float32Array(this.hexToRgb(this.ncColor1));
u['uColor2'].value = new Float32Array(this.hexToRgb(this.ncColor2));
u['uColor3'].value = new Float32Array(this.hexToRgb(this.ncColor3));
};
GrainientBackgroundComponent.prototype.hexToRgb = function (hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (!result)
return [1, 1, 1];
return [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255];
};
GrainientBackgroundComponent.prototype.setupResizeObserver = function () {
var _this = this;
this.resizeObserver = new ResizeObserver(function () {
_this.ngZone.runOutsideAngular(function () {
_this.onResize();
});
});
this.resizeObserver.observe(this.containerRef.nativeElement);
};
GrainientBackgroundComponent.prototype.onResize = function () {
var container = this.containerRef.nativeElement;
var _a = container.getBoundingClientRect(), width = _a.width, height = _a.height;
if (width === 0 || height === 0)
return;
this.renderer.setSize(width, height);
this.material.uniforms['iResolution'].value.set(width, height);
};
GrainientBackgroundComponent.prototype.animate = function () {
var _this = this;
this.rafId = requestAnimationFrame(function (t) {
_this.animate();
_this.render(t);
});
};
GrainientBackgroundComponent.prototype.render = function (t) {
this.material.uniforms['iTime'].value = (t - this.time0) * 0.001;
this.renderer.render(this.scene, this.camera);
};
return GrainientBackgroundComponent;
}());
GrainientBackgroundComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: GrainientBackgroundComponent, deps: [{ token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
GrainientBackgroundComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GrainientBackgroundComponent, selector: "nc-grainient-background", inputs: { ncColor1: "ncColor1", ncColor2: "ncColor2", ncColor3: "ncColor3", ncTimeSpeed: "ncTimeSpeed", ncColorBalance: "ncColorBalance", ncWarpStrength: "ncWarpStrength", ncWarpFrequency: "ncWarpFrequency", ncWarpSpeed: "ncWarpSpeed", ncWarpAmplitude: "ncWarpAmplitude", ncBlendAngle: "ncBlendAngle", ncBlendSoftness: "ncBlendSoftness", ncRotationAmount: "ncRotationAmount", ncNoiseScale: "ncNoiseScale", ncGrainAmount: "ncGrainAmount", ncGrainScale: "ncGrainScale", ncGrainAnimated: "ncGrainAnimated", ncContrast: "ncContrast", ncGamma: "ncGamma", ncSaturation: "ncSaturation", ncCenterX: "ncCenterX", ncCenterY: "ncCenterY", ncZoom: "ncZoom" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div #container class=\"nc-grainient-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-grainient-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: GrainientBackgroundComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-grainient-background',
templateUrl: './grainient-background.component.html',
styleUrls: ['./grainient-background.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.NgZone }]; }, propDecorators: { containerRef: [{
type: i0.ViewChild,
args: ['container', { static: true }]
}], ncColor1: [{
type: i0.Input
}], ncColor2: [{
type: i0.Input
}], ncColor3: [{
type: i0.Input
}], ncTimeSpeed: [{
type: i0.Input
}], ncColorBalance: [{
type: i0.Input
}], ncWarpStrength: [{
type: i0.Input
}], ncWarpFrequency: [{
type: i0.Input
}], ncWarpSpeed: [{
type: i0.Input
}], ncWarpAmplitude: [{
type: i0.Input
}], ncBlendAngle: [{
type: i0.Input
}], ncBlendSoftness: [{
type: i0.Input
}], ncRotationAmount: [{
type: i0.Input
}], ncNoiseScale: [{
type: i0.Input
}], ncGrainAmount: [{
type: i0.Input
}], ncGrainScale: [{
type: i0.Input
}], ncGrainAnimated: [{
type: i0.Input
}], ncContrast: [{
type: i0.Input
}], ncGamma: [{
type: i0.Input
}], ncSaturation: [{
type: i0.Input
}], ncCenterX: [{
type: i0.Input
}], ncCenterY: [{
type: i0.Input
}], ncZoom: [{
type: i0.Input
}] } });
var NcGrainientBackgroundModule = /** @class */ (function () {
function NcGrainientBackgroundModule() {
}
return NcGrainientBackgroundModule;
}());
NcGrainientBackgroundModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcGrainientBackgroundModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcGrainientBackgroundModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcGrainientBackgroundModule, declarations: [GrainientBackgroundComponent], imports: [common.CommonModule], exports: [GrainientBackgroundComponent] });
NcGrainientBackgroundModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcGrainientBackgroundModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcGrainientBackgroundModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
GrainientBackgroundComponent
],
imports: [
common.CommonModule
],
exports: [
GrainientBackgroundComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.GrainientBackgroundComponent = GrainientBackgroundComponent;
exports.NcGrainientBackgroundModule = NcGrainientBackgroundModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-grainient-background.umd.js.map