From 24a56b869faa545c95578daceae4b3694684ace1 Mon Sep 17 00:00:00 2001 From: 951142905 <951142905@qq.com> Date: Wed, 6 Nov 2024 22:58:47 +0800 Subject: [PATCH] feat: add line length range control - Add lineLength option to control particle trail length range - Change lineLength type from number to { min: number; max: number } - Set default lineLength range to { min: 20, max: 100 } - Set default lineWidth to 5.0 - Update control panel UI to support lineLength range adjustment - Add different lineLength ranges for wind and ocean data --- example/CHANGELOG.md | 18 +++++++ example/package.json | 2 +- example/src/components/ControlPanel.tsx | 52 ++++++++++++++++++- example/src/pages/earth.tsx | 9 +++- packages/cesium-wind-layer/CHANGELOG.md | 13 +++++ packages/cesium-wind-layer/package.json | 2 +- packages/cesium-wind-layer/readme.md | 3 +- packages/cesium-wind-layer/readme.zh-CN.md | 3 +- packages/cesium-wind-layer/src/index.ts | 5 +- .../src/shaders/segmentDraw.ts | 31 +++++------ packages/cesium-wind-layer/src/types.ts | 11 +++- .../src/windParticlesComputing.ts | 2 +- .../src/windParticlesRendering.ts | 4 ++ 13 files changed, 130 insertions(+), 25 deletions(-) diff --git a/example/CHANGELOG.md b/example/CHANGELOG.md index bd91710..1de6ac0 100644 --- a/example/CHANGELOG.md +++ b/example/CHANGELOG.md @@ -1,5 +1,23 @@ # example +## 0.6.0 + +### Minor Changes + +- feat: add line length range control + + - Add lineLength option to control particle trail length range + - Change lineLength type from number to { min: number; max: number } + - Set default lineLength range to { min: 20, max: 100 } + - Set default lineWidth to 5.0 + - Update control panel UI to support lineLength range adjustment + - Add different lineLength ranges for wind and ocean data + +### Patch Changes + +- Updated dependencies + - cesium-wind-layer@0.9.0 + ## 0.5.0 ### Minor Changes diff --git a/example/package.json b/example/package.json index d6bc56f..7814c6d 100644 --- a/example/package.json +++ b/example/package.json @@ -1,7 +1,7 @@ { "name": "example", "private": true, - "version": "0.5.0", + "version": "0.6.0", "type": "module", "scripts": { "dev": "vite", diff --git a/example/src/components/ControlPanel.tsx b/example/src/components/ControlPanel.tsx index 5f91db3..b164eee 100644 --- a/example/src/components/ControlPanel.tsx +++ b/example/src/components/ControlPanel.tsx @@ -325,6 +325,56 @@ export const ControlPanel: React.FC = ({ + + +
+
+ + Min Length + + } + style={{ marginBottom: 0 }} + > + + +
+
+ + Max Length + + } + style={{ marginBottom: 0 }} + > + + +
+
+ + + = ({ 'Factor to adjust the speed of particles. Controls the movement speed of particles.' )} > - + = { dropRate: 0.003, particleHeight: 1000, dropRateBump: 0.01, - lineWidth: 10.0, - colors: colorSchemes[3].colors, + lineWidth: 5.0, + lineLength: { min: 20, max: 100 }, + colors: colorSchemes[3].colors.reverse(), flipY: true, useViewerBounds: true, dynamic: true, diff --git a/packages/cesium-wind-layer/CHANGELOG.md b/packages/cesium-wind-layer/CHANGELOG.md index d1f2e48..846d5e7 100644 --- a/packages/cesium-wind-layer/CHANGELOG.md +++ b/packages/cesium-wind-layer/CHANGELOG.md @@ -1,5 +1,18 @@ # cesium-wind-layer +## 0.9.0 + +### Minor Changes + +- feat: add line length range control + + - Add lineLength option to control particle trail length range + - Change lineLength type from number to { min: number; max: number } + - Set default lineLength range to { min: 20, max: 100 } + - Set default lineWidth to 5.0 + - Update control panel UI to support lineLength range adjustment + - Add different lineLength ranges for wind and ocean data + ## 0.8.0 ### Minor Changes diff --git a/packages/cesium-wind-layer/package.json b/packages/cesium-wind-layer/package.json index 00367d1..9b9b431 100644 --- a/packages/cesium-wind-layer/package.json +++ b/packages/cesium-wind-layer/package.json @@ -1,6 +1,6 @@ { "name": "cesium-wind-layer", - "version": "0.8.0", + "version": "0.9.0", "publishConfig": { "access": "public" }, diff --git a/packages/cesium-wind-layer/readme.md b/packages/cesium-wind-layer/readme.md index bf67482..880a4c5 100644 --- a/packages/cesium-wind-layer/readme.md +++ b/packages/cesium-wind-layer/readme.md @@ -93,7 +93,8 @@ Main class for wind visualization. interface WindLayerOptions { particlesTextureSize: number; // Size of the particle texture. Determines the maximum number of particles (size squared). Default is 100. particleHeight: number; // Height of particles above the ground in meters. Default is 0. - lineWidth: number; // Width of particle trails in pixels. Default is 10.0. + lineWidth: number; // Width of particle trails in pixels. Default is 5.0. + lineLength: { min: number; max: number }; // Length range of particle trails. Default is { min: 20, max: 100 }. speedFactor: number; // Factor to adjust the speed of particles. Default is 1.0. dropRate: number; // Rate at which particles are dropped (reset). Default is 0.003. dropRateBump: number; // Additional drop rate for slow-moving particles. Default is 0.001. diff --git a/packages/cesium-wind-layer/readme.zh-CN.md b/packages/cesium-wind-layer/readme.zh-CN.md index f3723b8..e416c02 100644 --- a/packages/cesium-wind-layer/readme.zh-CN.md +++ b/packages/cesium-wind-layer/readme.zh-CN.md @@ -93,7 +93,8 @@ const windLayer = new WindLayer(viewer, windData, { interface WindLayerOptions { particlesTextureSize: number; // 粒子纹理大小，决定粒子最大数量（size * size）（默认：100） particleHeight: number; // 粒子距地面高度（默认：0） - lineWidth: number; // 粒子线宽（默认：10.0） + lineWidth: number; // 粒子线宽（默认：5.0） + lineLength: { min: number; max: number }; // 粒子轨迹长度范围（默认：{ min: 20, max: 100 }） speedFactor: number; // 速度倍数（默认：1.0） dropRate: number; // 粒子消失率（默认：0.003） dropRateBump: number; // 额外消失率（默认：0.01） diff --git a/packages/cesium-wind-layer/src/index.ts b/packages/cesium-wind-layer/src/index.ts index f12f2cb..0f471b8 100644 --- a/packages/cesium-wind-layer/src/index.ts +++ b/packages/cesium-wind-layer/src/index.ts @@ -38,7 +38,8 @@ export class WindLayer { particleHeight: 1000, dropRateBump: 0.01, speedFactor: 1.0, - lineWidth: 10.0, + lineWidth: 5.0, + lineLength: { min: 20, max: 100 }, colors: ['white'], flipY: false, useViewerBounds: false, @@ -71,12 +72,14 @@ export class WindLayer { * @param {number} [options.particlesTextureSize=100] - Size of the particle texture. Determines the maximum number of particles (size squared). * @param {number} [options.particleHeight=0] - Height of particles above the ground in meters. * @param {number} [options.lineWidth=3.0] - Width of particle trails in pixels. + * @param {Object} [options.lineLength={ min: 20, max: 100 }] - Length range of particle trails. * @param {number} [options.speedFactor=1.0] - Factor to adjust the speed of particles. * @param {number} [options.dropRate=0.003] - Rate at which particles are dropped (reset). * @param {number} [options.dropRateBump=0.001] - Additional drop rate for slow-moving particles. * @param {string[]} [options.colors=['white']] - Array of colors for particles. Can be used to create color gradients. * @param {boolean} [options.flipY=false] - Whether to flip the Y-axis of the wind data. * @param {boolean} [options.useViewerBounds=false] - Whether to use the viewer bounds to generate particles. + * @param {boolean} [options.dynamic=true] - Whether to enable dynamic particle animation. */ constructor(viewer: Viewer, windData: WindData, options?: Partial) { this.show = true; diff --git a/packages/cesium-wind-layer/src/shaders/segmentDraw.ts b/packages/cesium-wind-layer/src/shaders/segmentDraw.ts index e8bb8b8..0bad63b 100644 --- a/packages/cesium-wind-layer/src/shaders/segmentDraw.ts +++ b/packages/cesium-wind-layer/src/shaders/segmentDraw.ts @@ -14,10 +14,12 @@ uniform float particleHeight; uniform float aspect; uniform float pixelSize; uniform float lineWidth; +uniform vec2 lineLength; +uniform vec2 domain; uniform bool is3D; // 添加输出变量传递给片元着色器 -out vec2 speed; +out vec4 speed; out float v_segmentPosition; out vec2 textureCoordinate; @@ -91,6 +93,7 @@ void main() { vec2 flippedIndex = vec2(st.x, 1.0 - st.y); vec2 particleIndex = flippedIndex; + speed = texture(particlesSpeed, particleIndex); vec2 previousPosition = texture(previousParticlesPosition, particleIndex).rg; vec2 currentPosition = texture(currentParticlesPosition, particleIndex).rg; @@ -116,13 +119,12 @@ void main() { vec4 offset = vec4(0.0); // 计算速度相关的宽度和长度因子 - float speedFactor = max(0.3, speed.y); float widthFactor = pointToUse < 0 ? 1.0 : 0.5; // 头部更宽，尾部更窄 - // Modify length calculation with constraints - float baseLengthFactor = 10.0; - float speedBasedLength = baseLengthFactor * speedFactor; - float lengthFactor = clamp(speedBasedLength, 10.0, 100.0) / frameRateAdjustment; + // Calculate length based on speed + float speedLength = clamp(speed.b, domain.x, domain.y); + float normalizedSpeed = (speedLength - domain.x) / (domain.y - domain.x); + float lengthFactor = mix(lineLength.x, lineLength.y, normalizedSpeed) * pixelSize; if (pointToUse == 1) { // 头部位置 @@ -130,26 +132,25 @@ void main() { projectedCoordinates.previous, projectedCoordinates.current, offsetSign, - widthFactor * speedFactor + widthFactor * normalizedSpeed ); gl_Position = projectedCoordinates.previous + offset; v_segmentPosition = 0.0; // 头部 } else if (pointToUse == -1) { - // 尾部位置，向后延伸，使用受限制的长度 - vec4 direction = projectedCoordinates.next - projectedCoordinates.current; + // Get direction and normalize it to length 1.0 + vec4 direction = normalize(projectedCoordinates.next - projectedCoordinates.current); vec4 extendedPosition = projectedCoordinates.current + direction * lengthFactor; offset = pixelSize * calculateOffsetOnNormalDirection( projectedCoordinates.current, extendedPosition, offsetSign, - widthFactor * speedFactor + widthFactor * normalizedSpeed ); gl_Position = extendedPosition + offset; v_segmentPosition = 1.0; // 尾部 } - speed = texture(particlesSpeed, particleIndex).ba; textureCoordinate = st; } `; @@ -157,7 +158,7 @@ void main() { export const renderParticlesFragmentShader = /*glsl*/`#version 300 es precision highp float; -in vec2 speed; +in vec4 speed; in float v_segmentPosition; in vec2 textureCoordinate; @@ -170,8 +171,8 @@ out vec4 fragColor; void main() { const float zero = 0.0; - if(speed.y > zero && speed.x > displayRange.x && speed.x < displayRange.y) { - float speedLength = clamp(speed.x, domain.x, domain.y); + if(speed.a > zero && speed.b > displayRange.x && speed.b < displayRange.y) { + float speedLength = clamp(speed.b, domain.x, domain.y); float normalizedSpeed = (speedLength - domain.x) / (domain.y - domain.x); vec4 baseColor = texture(colorTable, vec2(normalizedSpeed, zero)); @@ -180,7 +181,7 @@ void main() { alpha = pow(alpha, 1.5); // 调整透明度渐变曲线 // 根据速度调整透明度 - float speedAlpha = mix(0.3, 1.0, speed.y); + float speedAlpha = mix(0.3, 1.0, speed.a); // 组合颜色和透明度 fragColor = vec4(baseColor.rgb, baseColor.a * alpha * speedAlpha); diff --git a/packages/cesium-wind-layer/src/types.ts b/packages/cesium-wind-layer/src/types.ts index 2598d7a..b1d678f 100644 --- a/packages/cesium-wind-layer/src/types.ts +++ b/packages/cesium-wind-layer/src/types.ts @@ -10,10 +10,19 @@ export interface WindLayerOptions { */ particleHeight: number; /** - * Width of particle trails in pixels. Default is 10.0. + * Width of particle trails in pixels. Default is 5.0. * Controls the width of the particles. */ lineWidth: number; + /** + * Length range of particle trails. Default is { min: 20, max: 100 }. + * @property {number} min - Minimum length of particle trails + * @property {number} max - Maximum length of particle trails + */ + lineLength?: { + min: number; + max: number; + }; /** * Factor to adjust the speed of particles. Default is 1.0. * Controls the movement speed of particles. diff --git a/packages/cesium-wind-layer/src/windParticlesComputing.ts b/packages/cesium-wind-layer/src/windParticlesComputing.ts index 71c3a93..3c4f088 100644 --- a/packages/cesium-wind-layer/src/windParticlesComputing.ts +++ b/packages/cesium-wind-layer/src/windParticlesComputing.ts @@ -201,7 +201,7 @@ export class WindParticlesComputing { }, dropRate: () => this.options.dropRate, dropRateBump: () => this.options.dropRateBump, - useViewerBounds: () => this.options.useViewerBounds // 添加新的 uniform + useViewerBounds: () => this.options.useViewerBounds }, fragmentShaderSource: ShaderManager.getPostProcessingPositionShader(), outputTexture: this.particlesTextures.postProcessingPosition, diff --git a/packages/cesium-wind-layer/src/windParticlesRendering.ts b/packages/cesium-wind-layer/src/windParticlesRendering.ts index 5bca254..b65cee3 100644 --- a/packages/cesium-wind-layer/src/windParticlesRendering.ts +++ b/packages/cesium-wind-layer/src/windParticlesRendering.ts @@ -208,6 +208,10 @@ export class WindParticlesRendering { lineWidth: () => this.options.lineWidth, is3D: () => this.viewerParameters.sceneMode === SceneMode.SCENE3D, segmentsDepthTexture: () => this.textures.segmentsDepth, + lineLength: () => { + const length = this.options.lineLength || { min: 50, max: 150 }; + return new Cartesian2(length.min, length.max); + }, }, vertexShaderSource: ShaderManager.getSegmentDrawVertexShader(), fragmentShaderSource: ShaderManager.getSegmentDrawFragmentShader(),