From 48bf124c1798c0276342b71d11f566db8f1ee9ca Mon Sep 17 00:00:00 2001 From: lzxue <120635640@qq.com> Date: Wed, 6 Dec 2023 16:01:06 +0800 Subject: [PATCH 1/5] chore: raster --- dev-demos/raster/image/demos/image.tsx | 3 +- dev-demos/raster/single/demos/light.tsx | 38 +++++++++-------- packages/layers/src/core/BaseModel.ts | 6 ++- packages/layers/src/raster/models/raster.ts | 42 +++++++++++++------ .../layers/src/raster/models/rasterRgb.ts | 4 +- .../src/raster/models/rasterTerrainRgb.ts | 4 +- .../raster/shaders/raster/raster_2d_frag.glsl | 36 ++++++++++++++++ .../shaders/{ => raster}/raster_2d_vert.glsl | 10 ++--- .../src/raster/shaders/raster_2d_frag.glsl | 32 -------------- .../src/raster/shaders/raster_frag.glsl | 11 ----- .../src/raster/shaders/raster_vert.glsl | 34 --------------- .../shaders/{ => rgb}/raster_rgb_frag.glsl | 1 - .../terrain_rgb_frag.glsl} | 0 .../terrain_rgb_vert.glsl} | 0 .../renderer/src/device/DeviceTexture2D.ts | 1 + 15 files changed, 103 insertions(+), 119 deletions(-) create mode 100644 packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl rename packages/layers/src/raster/shaders/{ => raster}/raster_2d_vert.glsl (64%) delete mode 100644 packages/layers/src/raster/shaders/raster_2d_frag.glsl delete mode 100644 packages/layers/src/raster/shaders/raster_frag.glsl delete mode 100644 packages/layers/src/raster/shaders/raster_vert.glsl rename packages/layers/src/raster/shaders/{ => rgb}/raster_rgb_frag.glsl (95%) rename packages/layers/src/raster/shaders/{raster_terrain_rgb_frag.glsl => terrain/terrain_rgb_frag.glsl} (100%) rename packages/layers/src/raster/shaders/{rater_terrain_rgb_vert.glsl => terrain/terrain_rgb_vert.glsl} (100%) diff --git a/dev-demos/raster/image/demos/image.tsx b/dev-demos/raster/image/demos/image.tsx index 862396a8c0..1eda00db17 100644 --- a/dev-demos/raster/image/demos/image.tsx +++ b/dev-demos/raster/image/demos/image.tsx @@ -28,7 +28,7 @@ export default () => { tileSize: 256, }, }); - scene.addLayer(layer1); + // scene.addLayer(layer1); const layer = new ImageLayer({}); layer.source( @@ -41,6 +41,7 @@ export default () => { } ); scene.addLayer(layer); + scene.startAnimate(); }) diff --git a/dev-demos/raster/single/demos/light.tsx b/dev-demos/raster/single/demos/light.tsx index 00b82314fa..d677b53b06 100644 --- a/dev-demos/raster/single/demos/light.tsx +++ b/dev-demos/raster/single/demos/light.tsx @@ -17,6 +17,7 @@ export default () => { useEffect(() => { const scene = new Scene({ id: 'map', + renderer:'device', map: new Map({ center: [ 105, 37.5 ], zoom: 2.5 @@ -47,7 +48,7 @@ export default () => { const layer = new RasterLayer({ zIndex: 2, - visible:false, + visible:true, }); layer .source(tiffdata.data, { @@ -70,24 +71,25 @@ export default () => { positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ] } }); - const raster = new RasterLayer({ - zIndex: 2, - maskLayers: [layer], - visible: true, - enableMask: true, - }).source( - 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788', - { - parser: { - type: 'rasterTile', - tileSize: 256, - }, - }, - ).style({ - opacity: 1 - }); - scene.addLayer(raster); + // const raster = new RasterLayer({ + // zIndex: 2, + // maskLayers: [layer], + // visible: true, + // enableMask: true, + // }).source( + // 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788', + // { + // parser: { + // type: 'rasterTile', + // tileSize: 256, + // }, + // }, + // ).style({ + // opacity: 1 + // }); + // scene.addLayer(raster); scene.addLayer(layer); + scene.startAnimate(); } }, []); return ( diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index f8a5966841..793bd850e8 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -334,6 +334,7 @@ ${uniforms.join('\n')} } public initUniformsBuffer() { + console.log('init') const attrUniforms = this.getUniformsBufferInfo(this.getStyleAttribute()); const commonUniforms = this.getCommonUniformsInfo(); if (attrUniforms.uniformsLength !== 0) { @@ -360,9 +361,12 @@ ${uniforms.join('\n')} if (Array.isArray(value)) { uniformsArray.push(...value); uniformsLength += value.length; - } else if (typeof value === 'number') { // 排除纹理 + } else if (typeof value === 'number' ) { // 排除纹理 uniformsArray.push(value); uniformsLength += 1; + } else if(typeof value ==='boolean') { + uniformsArray.push(Number(value)); + uniformsLength += 1; } }) diff --git a/packages/layers/src/raster/models/raster.ts b/packages/layers/src/raster/models/raster.ts index 884808c3bb..bc30078d99 100644 --- a/packages/layers/src/raster/models/raster.ts +++ b/packages/layers/src/raster/models/raster.ts @@ -9,12 +9,24 @@ import { getDefaultDomain } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; -import rasterFrag from '../shaders/raster_2d_frag.glsl'; -import rasterVert from '../shaders/raster_2d_vert.glsl'; +import rasterFrag from '../shaders/raster/raster_2d_frag.glsl'; +import rasterVert from '../shaders/raster/raster_2d_vert.glsl'; +import { ShaderLocation } from '../../core/CommonStyleAttribute'; export default class RasterModel extends BaseModel { protected texture: ITexture2D; protected colorTexture: ITexture2D; public getUninforms() { + const commoninfo = this.getCommonUniformsInfo(); + const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute()); + this.updateStyleUnifoms(); + return { + ...commoninfo.uniformsOption, + ...attributeInfo.uniformsOption, + } + } + + + protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any; }; } { const { opacity = 1, clampLow = true, @@ -28,15 +40,19 @@ export default class RasterModel extends BaseModel { rampColors, newdomain, ); - return { - u_opacity: opacity || 1, - u_texture: this.texture, - u_domain: newdomain, - u_clampLow: clampLow, - u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow, - u_noDataValue: noDataValue, - u_colorTexture: this.colorTexture, - }; + const commonOptions = { + u_domain: newdomain, + u_opacity: opacity || 1, + u_noDataValue: noDataValue, + u_clampLow: clampLow, + u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow, + u_texture: this.texture, + u_colorTexture: this.colorTexture, + }; + this.textures=[this.texture,this.colorTexture] + const commonBufferInfo = this.getUniformsBufferInfo(commonOptions); + return commonBufferInfo; + } private async getRasterData(parserDataItem: any) { @@ -73,7 +89,7 @@ export default class RasterModel extends BaseModel { type: gl.FLOAT, // aniso: 4, }); - + this.initUniformsBuffer(); const model = await this.layer.buildLayerModel({ moduleName: 'rasterImageData', vertexShader: rasterVert, @@ -86,6 +102,7 @@ export default class RasterModel extends BaseModel { } public async buildModels(): Promise { + return this.initModels(); } @@ -100,6 +117,7 @@ export default class RasterModel extends BaseModel { name: 'uv', type: AttributeType.Attribute, descriptor: { + shaderLocation: ShaderLocation.UV, name: 'a_Uv', buffer: { // give the WebGL driver a hint that this buffer may change diff --git a/packages/layers/src/raster/models/rasterRgb.ts b/packages/layers/src/raster/models/rasterRgb.ts index 89c190c629..69d66d68d8 100644 --- a/packages/layers/src/raster/models/rasterRgb.ts +++ b/packages/layers/src/raster/models/rasterRgb.ts @@ -8,8 +8,8 @@ import { import BaseModel from '../../core/BaseModel'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; -import rasterVert from '../shaders/raster_2d_vert.glsl'; -import rasterFrag from '../shaders/raster_rgb_frag.glsl'; +import rasterVert from '../shaders/raster/raster_2d_vert.glsl'; +import rasterFrag from '../shaders/rgb/raster_rgb_frag.glsl'; export default class RasterModel extends BaseModel { protected texture: ITexture2D; protected dataOption: any = {}; diff --git a/packages/layers/src/raster/models/rasterTerrainRgb.ts b/packages/layers/src/raster/models/rasterTerrainRgb.ts index 3611632a7d..f69668feb5 100644 --- a/packages/layers/src/raster/models/rasterTerrainRgb.ts +++ b/packages/layers/src/raster/models/rasterTerrainRgb.ts @@ -10,8 +10,8 @@ import { getDefaultDomain } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IRasterTerrainLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; -import Raster_terrainFrag from '../shaders/raster_terrain_rgb_frag.glsl'; -import Raster_terrainVert from '../shaders/rater_terrain_rgb_vert.glsl'; +import Raster_terrainFrag from '../shaders/terrain/terrain_rgb_frag.glsl'; +import Raster_terrainVert from '../shaders/terrain/terrain_rgb_vert.glsl'; export default class RasterTerrainRGB extends BaseModel { protected texture: ITexture2D; diff --git a/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl b/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl new file mode 100644 index 0000000000..793d881e63 --- /dev/null +++ b/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl @@ -0,0 +1,36 @@ +layout(std140) uniform commonUniforms { + vec2 u_domain; + float u_opacity; + float u_noDataValue; + bool u_clampLow; + bool u_clampHigh; +}; + +uniform sampler2D u_texture; +uniform sampler2D u_colorTexture; + +in vec2 v_texCoord; + +out vec4 outputColor; + +bool isnan_emu(float x) { return (x > 0.0 || x < 0.0) ? x != x : x != 0.0; } + + +void main() { + + float value = texture(SAMPLER_2D(u_texture),vec2(v_texCoord.x,v_texCoord.y)).r; + if (value == u_noDataValue || isnan_emu(value)) + discard; + else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) + discard; + else { + float normalisedValue =(value - u_domain[0]) / (u_domain[1] -u_domain[0]); + vec4 color = texture(SAMPLER_2D(u_colorTexture),vec2(normalisedValue, 0)); + + outputColor = color; + outputColor.a = outputColor.a * u_opacity ; + if(outputColor.a < 0.01) + discard; + + } +} diff --git a/packages/layers/src/raster/shaders/raster_2d_vert.glsl b/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl similarity index 64% rename from packages/layers/src/raster/shaders/raster_2d_vert.glsl rename to packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl index 022b2cb46e..c07a0af876 100644 --- a/packages/layers/src/raster/shaders/raster_2d_vert.glsl +++ b/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl @@ -1,9 +1,9 @@ -precision highp float; -uniform mat4 u_ModelMatrix; -attribute vec3 a_Position; -attribute vec2 a_Uv; -varying vec2 v_texCoord; +layout(location = 0) in vec3 a_Position; +layout(location = 14) in vec2 a_Uv; + +out vec2 v_texCoord; + #pragma include "projection" void main() { v_texCoord = a_Uv; diff --git a/packages/layers/src/raster/shaders/raster_2d_frag.glsl b/packages/layers/src/raster/shaders/raster_2d_frag.glsl deleted file mode 100644 index 027e4ebe41..0000000000 --- a/packages/layers/src/raster/shaders/raster_2d_frag.glsl +++ /dev/null @@ -1,32 +0,0 @@ -precision mediump float; -uniform float u_opacity: 1.0; -uniform sampler2D u_texture; -uniform sampler2D u_colorTexture; -uniform float u_min; -uniform float u_max; -uniform vec2 u_domain; -uniform float u_noDataValue; -uniform bool u_clampLow: true; -uniform bool u_clampHigh: true; -varying vec2 v_texCoord; -bool isnan_emu(float x) { return (x > 0.0 || x < 0.0) ? x != x : x != 0.0; } - - -void main() { - - float value = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)).r; - if (value == u_noDataValue || isnan_emu(value)) - discard; - else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) - discard; - else { - float normalisedValue =(value - u_domain[0]) / (u_domain[1] -u_domain[0]); - vec4 color = texture2D(u_colorTexture,vec2(normalisedValue, 0)); - - gl_FragColor = color; - gl_FragColor.a = gl_FragColor.a * u_opacity ; - if(gl_FragColor.a < 0.01) - discard; - - } -} diff --git a/packages/layers/src/raster/shaders/raster_frag.glsl b/packages/layers/src/raster/shaders/raster_frag.glsl deleted file mode 100644 index 5968448caf..0000000000 --- a/packages/layers/src/raster/shaders/raster_frag.glsl +++ /dev/null @@ -1,11 +0,0 @@ -varying vec4 v_color; -uniform float u_opacity: 1.0; -#define PI 3.141592653589793 - -void main() { - gl_FragColor = v_color; - gl_FragColor.a *= u_opacity; - if(gl_FragColor.a < 0.01) - discard; - -} diff --git a/packages/layers/src/raster/shaders/raster_vert.glsl b/packages/layers/src/raster/shaders/raster_vert.glsl deleted file mode 100644 index 7d6fc74086..0000000000 --- a/packages/layers/src/raster/shaders/raster_vert.glsl +++ /dev/null @@ -1,34 +0,0 @@ -precision highp float; -attribute vec3 a_Position; -uniform mat4 u_ModelMatrix; - -uniform vec4 u_extent; -uniform sampler2D u_texture; -uniform sampler2D u_colorTexture; -uniform float u_min; -uniform float u_max; -uniform float u_width; -uniform float u_height; -uniform float u_heightRatio; - -varying vec2 v_texCoord; -varying vec4 v_color; - -#pragma include "projection" -void main() { - vec2 uv = a_Position.xy / vec2(u_width, u_height); - vec2 minxy = project_position(vec4(u_extent.xy, 0, 1.0)).xy; - vec2 maxxy = project_position(vec4(u_extent.zw, 0, 1.0)).xy; - float value = texture2D(u_texture, vec2(uv.x,1.0 - uv.y)).x; - vec2 step = (maxxy - minxy) / vec2(u_width, u_height); - vec2 pos = minxy + vec2(a_Position.x, a_Position.y ) * step; - // v_texCoord = a_Uv; - value = clamp(value,u_min,u_max); - float value1 = (value - u_min) / (u_max -u_min); - vec4 color = texture2D(u_colorTexture,vec2(intensity, 0)); - - - - gl_Position = project_common_position_to_clipspace_v2(vec4(pos.xy, project_scale(value) * u_heightRatio, 1.0)); - -} diff --git a/packages/layers/src/raster/shaders/raster_rgb_frag.glsl b/packages/layers/src/raster/shaders/rgb/raster_rgb_frag.glsl similarity index 95% rename from packages/layers/src/raster/shaders/raster_rgb_frag.glsl rename to packages/layers/src/raster/shaders/rgb/raster_rgb_frag.glsl index b2114d95c2..9807591d34 100644 --- a/packages/layers/src/raster/shaders/raster_rgb_frag.glsl +++ b/packages/layers/src/raster/shaders/rgb/raster_rgb_frag.glsl @@ -1,4 +1,3 @@ -precision mediump float; uniform vec2 u_rminmax: vec2(0,255); uniform vec2 u_gminmax: vec2(0,255); uniform vec2 u_bminmax: vec2(0,255); diff --git a/packages/layers/src/raster/shaders/raster_terrain_rgb_frag.glsl b/packages/layers/src/raster/shaders/terrain/terrain_rgb_frag.glsl similarity index 100% rename from packages/layers/src/raster/shaders/raster_terrain_rgb_frag.glsl rename to packages/layers/src/raster/shaders/terrain/terrain_rgb_frag.glsl diff --git a/packages/layers/src/raster/shaders/rater_terrain_rgb_vert.glsl b/packages/layers/src/raster/shaders/terrain/terrain_rgb_vert.glsl similarity index 100% rename from packages/layers/src/raster/shaders/rater_terrain_rgb_vert.glsl rename to packages/layers/src/raster/shaders/terrain/terrain_rgb_vert.glsl diff --git a/packages/renderer/src/device/DeviceTexture2D.ts b/packages/renderer/src/device/DeviceTexture2D.ts index acd4b1590a..7e64b4003d 100644 --- a/packages/renderer/src/device/DeviceTexture2D.ts +++ b/packages/renderer/src/device/DeviceTexture2D.ts @@ -72,6 +72,7 @@ export default class DeviceTexture2D implements ITexture2D { packAlignment: alignment, }, }); + console.log(data) if (data) { // @ts-ignore this.texture.setImageData([data]); From 26b3593dd2541ac7bf13bd6727a38e53306aff80 Mon Sep 17 00:00:00 2001 From: lzxue <120635640@qq.com> Date: Wed, 6 Dec 2023 21:24:39 +0800 Subject: [PATCH 2/5] chore: raster --- dev-demos/features/point/pointFillImage.md | 4 +- dev-demos/raster/image/demos/image.tsx | 23 +++++----- dev-demos/raster/multiband/lc_08/rgb.tsx | 8 ++-- packages/layers/src/core/BaseModel.ts | 1 - packages/layers/src/image/models/image.ts | 42 +++++++++++++------ .../layers/src/image/shaders/image_frag.glsl | 17 ++++---- .../layers/src/image/shaders/image_vert.glsl | 12 +++--- packages/layers/src/point/models/fillmage.ts | 6 ++- .../point/shaders/image/fillImage_frag.glsl | 8 ++-- .../point/shaders/image/fillImage_vert.glsl | 6 +-- packages/layers/src/raster/models/raster.ts | 12 +++--- .../layers/src/raster/models/rasterRgb.ts | 29 ++++++++++--- .../raster/shaders/raster/raster_2d_frag.glsl | 3 +- .../raster/shaders/raster/raster_2d_vert.glsl | 9 ++++ .../raster/shaders/rgb/raster_rgb_frag.glsl | 27 +++++++----- .../raster/shaders/rgb/raster_rgb_vert.glsl | 21 ++++++++++ packages/renderer/src/device/DeviceModel.ts | 2 +- .../renderer/src/device/DeviceTexture2D.ts | 6 ++- 18 files changed, 160 insertions(+), 76 deletions(-) create mode 100644 packages/layers/src/raster/shaders/rgb/raster_rgb_vert.glsl diff --git a/dev-demos/features/point/pointFillImage.md b/dev-demos/features/point/pointFillImage.md index f3514feca5..a670d5b465 100644 --- a/dev-demos/features/point/pointFillImage.md +++ b/dev-demos/features/point/pointFillImage.md @@ -14,7 +14,7 @@ export default () => { const scene = new Scene({ id: 'point_fillImage', - // renderer: 'device', + renderer: 'device', map: new GaodeMap({ style: 'light', center: [120, 30], @@ -56,7 +56,7 @@ export default () => { }) .shape('marker') .size(36) - .active(true) + // .active(true) .style({ rotation: 90 }) diff --git a/dev-demos/raster/image/demos/image.tsx b/dev-demos/raster/image/demos/image.tsx index 1eda00db17..c039c76bbb 100644 --- a/dev-demos/raster/image/demos/image.tsx +++ b/dev-demos/raster/image/demos/image.tsx @@ -10,6 +10,7 @@ export default () => { const scene = new Scene({ id: 'map', + renderer: 'device', map: new GaodeMap({ style: 'light', center: [ 121.268, 30.3628 ], @@ -18,16 +19,16 @@ export default () => { }); scene.on('loaded', () => { - const url1 = - 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; - const layer1 = new RasterLayer({ - zIndex: 0, - }).source(url1, { - parser: { - type: 'rasterTile', - tileSize: 256, - }, - }); + // const url1 = + // 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788'; + // const layer1 = new RasterLayer({ + // zIndex: 0, + // }).source(url1, { + // parser: { + // type: 'rasterTile', + // tileSize: 256, + // }, + // }); // scene.addLayer(layer1); const layer = new ImageLayer({}); @@ -41,7 +42,7 @@ export default () => { } ); scene.addLayer(layer); - scene.startAnimate(); + // scene.startAnimate(); }) diff --git a/dev-demos/raster/multiband/lc_08/rgb.tsx b/dev-demos/raster/multiband/lc_08/rgb.tsx index 67cc642683..9d6bfccf71 100644 --- a/dev-demos/raster/multiband/lc_08/rgb.tsx +++ b/dev-demos/raster/multiband/lc_08/rgb.tsx @@ -15,7 +15,7 @@ export default () => { useEffect(() => { const scene = new Scene({ id: 'map', - + renderer:'device', map: new Map({ center: [130.5, 47], zoom: 2, @@ -33,8 +33,8 @@ export default () => { ).json(); const layer = new RasterLayer({ zIndex: 10, - mask: true, - maskfence: maskData, + // mask: true, + // maskfence: maskData, }); layer .source( @@ -78,6 +78,8 @@ export default () => { .style({ opacity: 1, }); + + scene.startAnimate(); scene.addLayer(layer); }); }, []); diff --git a/packages/layers/src/core/BaseModel.ts b/packages/layers/src/core/BaseModel.ts index 793bd850e8..146965bec6 100644 --- a/packages/layers/src/core/BaseModel.ts +++ b/packages/layers/src/core/BaseModel.ts @@ -334,7 +334,6 @@ ${uniforms.join('\n')} } public initUniformsBuffer() { - console.log('init') const attrUniforms = this.getUniformsBufferInfo(this.getStyleAttribute()); const commonUniforms = this.getCommonUniformsInfo(); if (attrUniforms.uniformsLength !== 0) { diff --git a/packages/layers/src/image/models/image.ts b/packages/layers/src/image/models/image.ts index c325f96e09..232221c97a 100644 --- a/packages/layers/src/image/models/image.ts +++ b/packages/layers/src/image/models/image.ts @@ -11,27 +11,48 @@ import { IImageLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; import ImageFrag from '../shaders/image_frag.glsl'; import ImageVert from '../shaders/image_vert.glsl'; +import { ShaderLocation } from '../../core/CommonStyleAttribute'; export default class ImageModel extends BaseModel { protected texture: ITexture2D; public getUninforms(): IModelUniform { - const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions; + const commoninfo = this.getCommonUniformsInfo(); + const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute()); + this.updateStyleUnifoms(); return { + ...commoninfo.uniformsOption, + ...attributeInfo.uniformsOption, + } + } + + protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any; }; } { + const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions; + const commonOptions = { u_opacity: opacity || 1, u_texture: this.texture, }; + this.textures = [this.texture] + const commonBufferInfo = this.getUniformsBufferInfo(commonOptions); + return commonBufferInfo; } public async initModels(): Promise { - const source = this.layer.getSource(); + await this.loadTexture(); + return this.buildModels(); + } + + public clearModels(): void { + this.texture?.destroy(); + } + + private async loadTexture() { const { createTexture2D } = this.rendererService; this.texture = createTexture2D({ height: 0, width: 0, }); - + const source = this.layer.getSource(); const imageData = await source.data.images; - this.texture = createTexture2D({ data: imageData[0], width: imageData[0].width, @@ -40,6 +61,10 @@ export default class ImageModel extends BaseModel { min: gl.LINEAR, }); + } + + public async buildModels(): Promise { + this.initUniformsBuffer(); const model = await this.layer.buildLayerModel({ moduleName: 'rasterImage', vertexShader: ImageVert, @@ -55,20 +80,13 @@ export default class ImageModel extends BaseModel { return [model]; } - public clearModels(): void { - this.texture?.destroy(); - } - - public async buildModels(): Promise { - return this.initModels(); - } - protected registerBuiltinAttributes() { this.styleAttributeService.registerStyleAttribute({ name: 'uv', type: AttributeType.Attribute, descriptor: { name: 'a_Uv', + shaderLocation: ShaderLocation.UV, buffer: { usage: gl.DYNAMIC_DRAW, data: [], diff --git a/packages/layers/src/image/shaders/image_frag.glsl b/packages/layers/src/image/shaders/image_frag.glsl index 6aa915300e..54dad1e6d3 100644 --- a/packages/layers/src/image/shaders/image_frag.glsl +++ b/packages/layers/src/image/shaders/image_frag.glsl @@ -1,11 +1,14 @@ -precision mediump float; -uniform float u_opacity: 1.0; uniform sampler2D u_texture; -varying vec2 v_texCoord; +layout(std140) uniform commonUniforms { + float u_opacity; +}; + +in vec2 v_texCoord; +out vec4 outputColor; void main() { - vec4 color = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)); - gl_FragColor = color; - gl_FragColor.a *= u_opacity; - if(gl_FragColor.a < 0.01) + vec4 color = texture(SAMPLER_2D(u_texture),vec2(v_texCoord.x,v_texCoord.y)); + outputColor = color; + outputColor.a *= u_opacity; + if(outputColor.a < 0.01) discard; } diff --git a/packages/layers/src/image/shaders/image_vert.glsl b/packages/layers/src/image/shaders/image_vert.glsl index 29aa234956..e045683f29 100644 --- a/packages/layers/src/image/shaders/image_vert.glsl +++ b/packages/layers/src/image/shaders/image_vert.glsl @@ -1,9 +1,11 @@ -precision highp float; -uniform mat4 u_ModelMatrix; +layout(location = 0) in vec3 a_Position; +layout(location = 14) in vec2 a_Uv; -attribute vec3 a_Position; -attribute vec2 a_Uv; -varying vec2 v_texCoord; +layout(std140) uniform commonUniforms { + float u_opacity; +}; + +out vec2 v_texCoord; #pragma include "projection" void main() { v_texCoord = a_Uv; diff --git a/packages/layers/src/point/models/fillmage.ts b/packages/layers/src/point/models/fillmage.ts index 2e230d5b23..1d7565f46b 100644 --- a/packages/layers/src/point/models/fillmage.ts +++ b/packages/layers/src/point/models/fillmage.ts @@ -29,7 +29,7 @@ export default class FillImageModel extends BaseModel { return { ...commoninfo.uniformsOption, ...attributeInfo.uniformsOption, - ...{u_texture:this.texture} + } } protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption:{[key: string]: any} } { @@ -51,11 +51,13 @@ export default class FillImageModel extends BaseModel { */ const commonOptions = { + u_textSize: [1024, this.iconService.canvasHeight || 128], u_heightfixed: Number(heightfixed), u_raisingHeight: Number(raisingHeight), u_size_unit: SizeUnitType[unit] as SizeUnitType, - u_textSize: [1024, this.iconService.canvasHeight || 128] + u_texture:this.texture }; + this.textures = [this.texture]; const commonBufferInfo = this.getUniformsBufferInfo(commonOptions); return commonBufferInfo; diff --git a/packages/layers/src/point/shaders/image/fillImage_frag.glsl b/packages/layers/src/point/shaders/image/fillImage_frag.glsl index 7f024606bc..2fb504c4df 100644 --- a/packages/layers/src/point/shaders/image/fillImage_frag.glsl +++ b/packages/layers/src/point/shaders/image/fillImage_frag.glsl @@ -6,10 +6,10 @@ out vec4 outputColor; uniform sampler2D u_texture; layout(std140) uniform uBlock { - float u_heightfixed: 0.0; - float u_raisingHeight: 0.0; - float u_size_unit; vec2 u_textSize; + float u_heightfixed; + float u_raisingHeight; + float u_size_unit; }; #pragma include "sdf_2d" @@ -18,7 +18,7 @@ layout(std140) uniform uBlock { void main() { vec2 pos = v_Iconuv / u_textSize + v_uv / u_textSize * 64.; - outputColor = texture(u_texture, pos); + outputColor = texture(SAMPLER_2D(u_texture), pos); outputColor.a *= v_opacity; outputColor = filterColor(outputColor); } diff --git a/packages/layers/src/point/shaders/image/fillImage_vert.glsl b/packages/layers/src/point/shaders/image/fillImage_vert.glsl index 39851a8ac8..a91a1a52e7 100644 --- a/packages/layers/src/point/shaders/image/fillImage_vert.glsl +++ b/packages/layers/src/point/shaders/image/fillImage_vert.glsl @@ -5,10 +5,10 @@ layout(location = 11) in vec3 a_Extrude; layout(location = 14) in vec2 a_Uv; layout(std140) uniform uBlock { - float u_heightfixed: 0.0; - float u_raisingHeight: 0.0; - float u_size_unit; vec2 u_textSize; + float u_heightfixed; + float u_raisingHeight; + float u_size_unit; }; out vec2 v_uv; diff --git a/packages/layers/src/raster/models/raster.ts b/packages/layers/src/raster/models/raster.ts index bc30078d99..54758243cd 100644 --- a/packages/layers/src/raster/models/raster.ts +++ b/packages/layers/src/raster/models/raster.ts @@ -75,6 +75,11 @@ export default class RasterModel extends BaseModel { } public async initModels(): Promise { + return this.buildModels(); + } + + public async buildModels(): Promise { + this.initUniformsBuffer(); const source = this.layer.getSource(); const { createTexture2D } = this.rendererService; const parserDataItem = source.data.dataArray[0]; @@ -89,7 +94,7 @@ export default class RasterModel extends BaseModel { type: gl.FLOAT, // aniso: 4, }); - this.initUniformsBuffer(); + const model = await this.layer.buildLayerModel({ moduleName: 'rasterImageData', vertexShader: rasterVert, @@ -101,11 +106,6 @@ export default class RasterModel extends BaseModel { return [model]; } - public async buildModels(): Promise { - - return this.initModels(); - } - public clearModels(): void { this.texture?.destroy(); this.colorTexture?.destroy(); diff --git a/packages/layers/src/raster/models/rasterRgb.ts b/packages/layers/src/raster/models/rasterRgb.ts index 69d66d68d8..495a3ec869 100644 --- a/packages/layers/src/raster/models/rasterRgb.ts +++ b/packages/layers/src/raster/models/rasterRgb.ts @@ -8,24 +8,39 @@ import { import BaseModel from '../../core/BaseModel'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; -import rasterVert from '../shaders/raster/raster_2d_vert.glsl'; +import rasterVert from '../shaders/rgb/raster_rgb_vert.glsl'; import rasterFrag from '../shaders/rgb/raster_rgb_frag.glsl'; +import { ShaderLocation } from '../../core/CommonStyleAttribute'; export default class RasterModel extends BaseModel { protected texture: ITexture2D; protected dataOption: any = {}; public getUninforms() { + const commoninfo = this.getCommonUniformsInfo(); + const attributeInfo = this.getUniformsBufferInfo(this.getStyleAttribute()); + this.updateStyleUnifoms(); + return { + ...commoninfo.uniformsOption, + ...attributeInfo.uniformsOption, + } + } + + protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any; }; } { const { opacity = 1, noDataValue = 0 } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; - const { rMinMax, gMinMax, bMinMax } = this.dataOption; - return { - u_opacity: opacity || 1, - u_texture: this.texture, - u_noDataValue: noDataValue, + const { rMinMax = [0,255], gMinMax = [0,255], bMinMax = [0,255] } = this.dataOption; + const commonOptions = { u_rminmax: rMinMax, u_gminmax: gMinMax, u_bminmax: bMinMax, + u_opacity: opacity || 1, + u_noDataValue: noDataValue, + u_texture: this.texture, }; + this.textures = [this.texture] + + const commonBufferInfo = this.getUniformsBufferInfo(commonOptions); + return commonBufferInfo; } private async getRasterData(parserDataItem: any) { @@ -57,6 +72,7 @@ export default class RasterModel extends BaseModel { } public async initModels(): Promise { + this.initUniformsBuffer(); const source = this.layer.getSource(); const { createTexture2D } = this.rendererService; const parserDataItem = source.data.dataArray[0]; @@ -96,6 +112,7 @@ export default class RasterModel extends BaseModel { type: AttributeType.Attribute, descriptor: { name: 'a_Uv', + shaderLocation: ShaderLocation.UV, buffer: { // give the WebGL driver a hint that this buffer may change usage: gl.DYNAMIC_DRAW, diff --git a/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl b/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl index 793d881e63..551250047f 100644 --- a/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl +++ b/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl @@ -11,10 +11,11 @@ uniform sampler2D u_colorTexture; in vec2 v_texCoord; -out vec4 outputColor; + bool isnan_emu(float x) { return (x > 0.0 || x < 0.0) ? x != x : x != 0.0; } +out vec4 outputColor; void main() { diff --git a/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl b/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl index c07a0af876..bfcb487a0a 100644 --- a/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl +++ b/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl @@ -2,9 +2,18 @@ layout(location = 0) in vec3 a_Position; layout(location = 14) in vec2 a_Uv; +layout(std140) uniform commonUniforms { + vec2 u_domain; + float u_opacity; + float u_noDataValue; + bool u_clampLow; + bool u_clampHigh; +}; + out vec2 v_texCoord; #pragma include "projection" + void main() { v_texCoord = a_Uv; vec4 project_pos = project_position(vec4(a_Position, 1.0)); diff --git a/packages/layers/src/raster/shaders/rgb/raster_rgb_frag.glsl b/packages/layers/src/raster/shaders/rgb/raster_rgb_frag.glsl index 9807591d34..0d05c71577 100644 --- a/packages/layers/src/raster/shaders/rgb/raster_rgb_frag.glsl +++ b/packages/layers/src/raster/shaders/rgb/raster_rgb_frag.glsl @@ -1,19 +1,26 @@ -uniform vec2 u_rminmax: vec2(0,255); -uniform vec2 u_gminmax: vec2(0,255); -uniform vec2 u_bminmax: vec2(0,255); -uniform float u_opacity: 1.0; uniform sampler2D u_texture; -uniform float u_noDataValue : 0.0; -varying vec2 v_texCoord; +layout(std140) uniform commonUniforms { + vec2 u_rminmax; + vec2 u_gminmax; + vec2 u_bminmax; + float u_opacity; + float u_noDataValue; +}; + +in vec2 v_texCoord; + +out vec4 outputColor; void main() { - vec3 rgb = texture2D(u_texture,vec2(v_texCoord.x,v_texCoord.y)).rgb; + + vec3 rgb = texture(SAMPLER_2D(u_texture),vec2(v_texCoord.x,v_texCoord.y)).rgb; + if(rgb == vec3(u_noDataValue)) { - gl_FragColor = vec4(0.0, 0, 0, 0.0); + outputColor = vec4(0.0, 0, 0, 0.0); } else { - gl_FragColor = vec4(rgb.r / (u_rminmax.y -u_rminmax.x), rgb.g /(u_gminmax.y -u_gminmax.x), rgb.b/ (u_bminmax.y - u_bminmax.x), u_opacity); + outputColor = vec4(rgb.r / (u_rminmax.y -u_rminmax.x), rgb.g /(u_gminmax.y -u_gminmax.x), rgb.b/ (u_bminmax.y - u_bminmax.x), u_opacity); } - if(gl_FragColor.a < 0.01) + if(outputColor.a < 0.01) discard; } \ No newline at end of file diff --git a/packages/layers/src/raster/shaders/rgb/raster_rgb_vert.glsl b/packages/layers/src/raster/shaders/rgb/raster_rgb_vert.glsl new file mode 100644 index 0000000000..a57fa642ed --- /dev/null +++ b/packages/layers/src/raster/shaders/rgb/raster_rgb_vert.glsl @@ -0,0 +1,21 @@ + +layout(location = 0) in vec3 a_Position; +layout(location = 14) in vec2 a_Uv; + +layout(std140) uniform commonUniforms { + vec2 u_rminmax; + vec2 u_gminmax; + vec2 u_bminmax; + float u_opacity; + float u_noDataValue; +}; + +out vec2 v_texCoord; + +#pragma include "projection" + +void main() { + v_texCoord = a_Uv; + vec4 project_pos = project_position(vec4(a_Position, 1.0)); + gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy,0., 1.0)); +} diff --git a/packages/renderer/src/device/DeviceModel.ts b/packages/renderer/src/device/DeviceModel.ts index 7e3333f52a..f50fadf124 100644 --- a/packages/renderer/src/device/DeviceModel.ts +++ b/packages/renderer/src/device/DeviceModel.ts @@ -252,7 +252,7 @@ export default class DeviceModel implements IModel { : null, ); renderPass.setViewport(0, 0, width, height); - + if (uniformBuffers) { this.bindings = this.device.createBindings({ pipeline: this.pipeline, diff --git a/packages/renderer/src/device/DeviceTexture2D.ts b/packages/renderer/src/device/DeviceTexture2D.ts index 7e64b4003d..20b00387df 100644 --- a/packages/renderer/src/device/DeviceTexture2D.ts +++ b/packages/renderer/src/device/DeviceTexture2D.ts @@ -52,7 +52,10 @@ export default class DeviceTexture2D implements ITexture2D { pixelFormat = Format.F32_LUMINANCE; } else if (format === gl.LUMINANCE && type === gl.UNSIGNED_BYTE) { pixelFormat = Format.U8_LUMINANCE; - } else { + } else if(type === gl.FLOAT && format === gl.RGB) { + pixelFormat = Format.F32_RGB; + } + else { throw new Error(`create texture error, type: ${type}, format: ${format}`); } @@ -72,7 +75,6 @@ export default class DeviceTexture2D implements ITexture2D { packAlignment: alignment, }, }); - console.log(data) if (data) { // @ts-ignore this.texture.setImageData([data]); From 46b63854969af4e0d75e31aff3a80fa7ec20048d Mon Sep 17 00:00:00 2001 From: lzxue <120635640@qq.com> Date: Fri, 8 Dec 2023 11:52:36 +0800 Subject: [PATCH 3/5] =?UTF-8?q?docs:=20=E6=96=87=E6=A1=A3=E6=8F=8F?= =?UTF-8?q?=E8=BF=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dev-demos/raster/image/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dev-demos/raster/image/image.md b/dev-demos/raster/image/image.md index 606562b9d1..d4848bb938 100644 --- a/dev-demos/raster/image/image.md +++ b/dev-demos/raster/image/image.md @@ -1,6 +1,6 @@ --- group: - path: 'image' + path: 'image-device' title: 图片 --- ### 图片图层 From be2ca188ccaceb038a7b8cc430bdb5dc69fea0c4 Mon Sep 17 00:00:00 2001 From: "yuqi.pyq" Date: Tue, 12 Dec 2023 20:14:03 +0800 Subject: [PATCH 4/5] feat: raster --- dev-demos/raster/single/demos/light.tsx | 158 ++++++++++-------- dev-demos/raster/single/demos/rasterFile.tsx | 50 +++--- packages/layers/src/raster/models/raster.ts | 41 ++--- .../raster/shaders/raster/raster_2d_frag.glsl | 29 ++-- .../raster/shaders/raster/raster_2d_vert.glsl | 5 +- packages/renderer/package.json | 2 +- .../renderer/src/device/DeviceTexture2D.ts | 43 ++--- 7 files changed, 168 insertions(+), 160 deletions(-) diff --git a/dev-demos/raster/single/demos/light.tsx b/dev-demos/raster/single/demos/light.tsx index d677b53b06..d77b6ad680 100644 --- a/dev-demos/raster/single/demos/light.tsx +++ b/dev-demos/raster/single/demos/light.tsx @@ -2,8 +2,8 @@ import { RasterLayer, Scene } from '@antv/l7'; // @ts-ignore import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; import * as GeoTIFF from 'geotiff'; +import React, { useEffect } from 'react'; async function getTiffData() { const response = await fetch( @@ -16,81 +16,91 @@ async function getTiffData() { export default () => { useEffect(() => { const scene = new Scene({ - id: 'map', - renderer:'device', - map: new Map({ - center: [ 105, 37.5 ], - zoom: 2.5 - }) - }); - scene.on('loaded', () => { - addLayer(); + id: 'map', + renderer: 'device', + map: new Map({ + center: [105, 37.5], + zoom: 2.5, + }), + }); + scene.on('loaded', () => { + addLayer(); + }); + async function getTiffData() { + const response = await fetch( + 'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff', + ); + const arrayBuffer = await response.arrayBuffer(); + const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer); + const image = await tiff.getImage(); + const width = image.getWidth(); + const height = image.getHeight(); + const values = await image.readRasters(); + return { + data: values[0], + width, + height, + }; + } + + async function addLayer() { + const tiffdata = await getTiffData(); + + const layer = new RasterLayer({ + zIndex: 2, + visible: true, }); - async function getTiffData() { - const response = await fetch( - 'https://gw.alipayobjects.com/zos/antvdemo/assets/light_clip/lightF182013.tiff' - ); - const arrayBuffer = await response.arrayBuffer(); - const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer); - const image = await tiff.getImage(); - const width = image.getWidth(); - const height = image.getHeight(); - const values = await image.readRasters(); - return { - data: values[0], - width, - height - }; - } - - async function addLayer() { - const tiffdata = await getTiffData(); - - const layer = new RasterLayer({ - zIndex: 2, - visible:true, + layer + .source(tiffdata.data, { + parser: { + type: 'raster', + width: tiffdata.width, + height: tiffdata.height, + extent: [ + 73.4821902409999979, 3.8150178409999995, 135.1066187319999869, + 57.6300459959999998, + ], + }, + }) + .style({ + clampLow: false, + clampHigh: false, + domain: [0, 90], + nodataValue: 0, + rampColors: { + // type:'quantize', + // colors:['#1b9e77','#d95f02','#7570b3','#e7298a','#66a61e','#e6ab02'], + colors: [ + 'rgba(92,58,16,0)', + 'rgba(92,58,16,0)', + '#fabd08', + '#f1e93f', + '#f1ff8f', + '#fcfff7', + ], + positions: [0, 0.05, 0.1, 0.25, 0.5, 1.0], + }, }); - layer - .source(tiffdata.data, { - parser: { - type: 'raster', - width: tiffdata.width, - height: tiffdata.height, - extent: [ 73.4821902409999979, 3.8150178409999995, 135.1066187319999869, 57.6300459959999998 ] - } - }) - .style({ - clampLow: false, - clampHigh: false, - domain: [ 0, 90 ], - nodataValue: 0, - rampColors: { - // type:'quantize', - // colors:['#1b9e77','#d95f02','#7570b3','#e7298a','#66a61e','#e6ab02'], - colors: [ 'rgba(92,58,16,0)', 'rgba(92,58,16,0)', '#fabd08', '#f1e93f', '#f1ff8f', '#fcfff7' ], - positions: [ 0, 0.05, 0.1, 0.25, 0.5, 1.0 ] - } - }); - // const raster = new RasterLayer({ - // zIndex: 2, - // maskLayers: [layer], - // visible: true, - // enableMask: true, - // }).source( - // 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788', - // { - // parser: { - // type: 'rasterTile', - // tileSize: 256, - // }, - // }, - // ).style({ - // opacity: 1 - // }); - // scene.addLayer(raster); - scene.addLayer(layer); - scene.startAnimate(); - } + // const raster = new RasterLayer({ + // zIndex: 2, + // maskLayers: [layer], + // visible: true, + // enableMask: true, + // }).source( + // 'https://tiles{1-3}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=b2a0cfc132cd60b61391b9dd63c15711eadb9b38a9943e3f98160d5710aef788', + // { + // parser: { + // type: 'rasterTile', + // tileSize: 256, + // }, + // }, + // ).style({ + // opacity: 1 + // }); + // scene.addLayer(raster); + scene.addLayer(layer); + scene.startAnimate(); + } }, []); return (
{ useEffect(() => { const scene = new Scene({ id: 'map', + renderer: 'device', map: new Map({ center: [121.268, 30.3628], zoom: 3, @@ -24,19 +25,20 @@ export default () => { }); scene.on('loaded', async () => { + const maskdata = await ( + await fetch( + 'https://gw.alipayobjects.com/os/bmw-prod/fccd80c0-2611-49f9-9a9f-e2a4dd12226f.json', + ) + ).json(); - const maskdata = await (await fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/fccd80c0-2611-49f9-9a9f-e2a4dd12226f.json', - )).json(); - - const p = new PolygonLayer({ - visible: false, - zIndex: 1 - }) - .source(maskdata) - .shape('fill') - .color('blue') - scene.addLayer(p) + // const p = new PolygonLayer({ + // visible: false, + // zIndex: 1, + // }) + // .source(maskdata) + // .shape('fill') + // .color('blue'); + // scene.addLayer(p); const tiffdata = await getTiffData(); const tiff = await GeoTIFF.fromArrayBuffer(tiffdata); @@ -46,9 +48,8 @@ export default () => { const values = await image.readRasters(); const layer = new RasterLayer({ - maskLayers: [p], - } - ); + // maskLayers: [p], + }); layer .source(values[0], { parser: { @@ -65,12 +66,23 @@ export default () => { domain: [0, 10000], rampColors: { type: 'custom', - colors: ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#f7f7f7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac'], + colors: [ + '#b2182b', + '#d6604d', + '#f4a582', + '#fddbc7', + '#f7f7f7', + '#d1e5f0', + '#92c5de', + '#4393c3', + '#2166ac', + ], positions: [0, 50, 200, 500, 2000, 3000, 4000, 5000, 8000, 10000], }, }); scene.addLayer(layer); + scene.startAnimate(); }); }, []); return ( diff --git a/packages/layers/src/raster/models/raster.ts b/packages/layers/src/raster/models/raster.ts index 54758243cd..f1b1633e9f 100644 --- a/packages/layers/src/raster/models/raster.ts +++ b/packages/layers/src/raster/models/raster.ts @@ -7,11 +7,11 @@ import { } from '@antv/l7-core'; import { getDefaultDomain } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; +import { ShaderLocation } from '../../core/CommonStyleAttribute'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; import rasterFrag from '../shaders/raster/raster_2d_frag.glsl'; import rasterVert from '../shaders/raster/raster_2d_vert.glsl'; -import { ShaderLocation } from '../../core/CommonStyleAttribute'; export default class RasterModel extends BaseModel { protected texture: ITexture2D; protected colorTexture: ITexture2D; @@ -22,11 +22,14 @@ export default class RasterModel extends BaseModel { return { ...commoninfo.uniformsOption, ...attributeInfo.uniformsOption, - } + }; } - - protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any; }; } { + protected getCommonUniformsInfo(): { + uniformsArray: number[]; + uniformsLength: number; + uniformsOption: { [key: string]: any }; + } { const { opacity = 1, clampLow = true, @@ -40,19 +43,18 @@ export default class RasterModel extends BaseModel { rampColors, newdomain, ); - const commonOptions = { - u_domain: newdomain, - u_opacity: opacity || 1, - u_noDataValue: noDataValue, - u_clampLow: clampLow, - u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow, - u_texture: this.texture, - u_colorTexture: this.colorTexture, - }; - this.textures=[this.texture,this.colorTexture] - const commonBufferInfo = this.getUniformsBufferInfo(commonOptions); - return commonBufferInfo; - + const commonOptions = { + u_domain: newdomain, + u_opacity: opacity || 1, + u_noDataValue: noDataValue, + u_clampLow: clampLow, + u_clampHigh: typeof clampHigh !== 'undefined' ? clampHigh : clampLow, + u_rasterTexture: this.texture, + u_colorTexture: this.colorTexture, + }; + this.textures = [this.texture, this.colorTexture]; + const commonBufferInfo = this.getUniformsBufferInfo(commonOptions); + return commonBufferInfo; } private async getRasterData(parserDataItem: any) { @@ -87,11 +89,12 @@ export default class RasterModel extends BaseModel { const { data, width, height } = await this.getRasterData(parserDataItem); this.texture = createTexture2D({ - data, + data: new Uint8Array(data), width, height, format: gl.LUMINANCE, - type: gl.FLOAT, + type: gl.UNSIGNED_BYTE, + alignment: 1, // aniso: 4, }); diff --git a/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl b/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl index 551250047f..dd498d797e 100644 --- a/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl +++ b/packages/layers/src/raster/shaders/raster/raster_2d_frag.glsl @@ -1,37 +1,34 @@ layout(std140) uniform commonUniforms { - vec2 u_domain; + vec2 u_domain; float u_opacity; float u_noDataValue; bool u_clampLow; bool u_clampHigh; }; -uniform sampler2D u_texture; +uniform sampler2D u_rasterTexture; uniform sampler2D u_colorTexture; in vec2 v_texCoord; - - bool isnan_emu(float x) { return (x > 0.0 || x < 0.0) ? x != x : x != 0.0; } out vec4 outputColor; void main() { - - float value = texture(SAMPLER_2D(u_texture),vec2(v_texCoord.x,v_texCoord.y)).r; - if (value == u_noDataValue || isnan_emu(value)) - discard; - else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) - discard; - else { - float normalisedValue =(value - u_domain[0]) / (u_domain[1] -u_domain[0]); - vec4 color = texture(SAMPLER_2D(u_colorTexture),vec2(normalisedValue, 0)); + // Can use any component here since u_rasterTexture is under luminance format. + float value = texture(SAMPLER_2D(u_rasterTexture), vec2(v_texCoord.x, v_texCoord.y)).r * 255.0; + if (value == u_noDataValue || isnan_emu(value)) { + discard; + } else if ((!u_clampLow && value < u_domain[0]) || (!u_clampHigh && value > u_domain[1])) { + discard; + } else { + float normalisedValue =(value - u_domain[0]) / (u_domain[1] - u_domain[0]); + vec4 color = texture(SAMPLER_2D(u_colorTexture), vec2(normalisedValue, 0)); outputColor = color; - outputColor.a = outputColor.a * u_opacity ; - if(outputColor.a < 0.01) + outputColor.a = outputColor.a * u_opacity ; + if (outputColor.a < 0.01) discard; - } } diff --git a/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl b/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl index bfcb487a0a..12e866f87d 100644 --- a/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl +++ b/packages/layers/src/raster/shaders/raster/raster_2d_vert.glsl @@ -3,7 +3,7 @@ layout(location = 0) in vec3 a_Position; layout(location = 14) in vec2 a_Uv; layout(std140) uniform commonUniforms { - vec2 u_domain; + vec2 u_domain; float u_opacity; float u_noDataValue; bool u_clampLow; @@ -17,6 +17,5 @@ out vec2 v_texCoord; void main() { v_texCoord = a_Uv; vec4 project_pos = project_position(vec4(a_Position, 1.0)); - - gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy,0., 1.0)); + gl_Position = project_common_position_to_clipspace_v2(vec4(project_pos.xy,0., 1.0)); } diff --git a/packages/renderer/package.json b/packages/renderer/package.json index ea228190fc..2e6805ef21 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -24,7 +24,7 @@ "tsc": "tsc --project tsconfig.build.json" }, "dependencies": { - "@antv/g-device-api": "^1.4.3", + "@antv/g-device-api": "^1.4.5", "@antv/l7-core": "2.20.5", "@antv/l7-utils": "2.20.5", "@babel/runtime": "^7.7.7", diff --git a/packages/renderer/src/device/DeviceTexture2D.ts b/packages/renderer/src/device/DeviceTexture2D.ts index 58d88429e3..06a969c828 100644 --- a/packages/renderer/src/device/DeviceTexture2D.ts +++ b/packages/renderer/src/device/DeviceTexture2D.ts @@ -1,17 +1,17 @@ import { Device, + TextureUsage as DeviceTextureUsage, FilterMode, Format, MipmapFilterMode, Sampler, Texture, - TextureUsage as DeviceTextureUsage, } from '@antv/g-device-api'; import { - gl, ITexture2D, ITexture2DInitializationOptions, TextureUsage, + gl, } from '@antv/l7-core'; import { wrapModeMap } from './constants'; @@ -36,13 +36,13 @@ export default class DeviceTexture2D implements ITexture2D { format = gl.RGBA, wrapS = gl.CLAMP_TO_EDGE, wrapT = gl.CLAMP_TO_EDGE, - // aniso = 0, + aniso = 0, alignment = 1, usage = TextureUsage.SAMPLED, - // mipmap = false, + mipmap = false, // premultiplyAlpha = false, - // mag = gl.NEAREST, - // min = gl.NEAREST, + mag = gl.NEAREST, + min = gl.NEAREST, // colorSpace = gl.BROWSER_DEFAULT_WEBGL, // x = 0, // y = 0, @@ -54,23 +54,14 @@ export default class DeviceTexture2D implements ITexture2D { let pixelFormat: Format = Format.U8_RGBA_RT; if (type === gl.UNSIGNED_BYTE && format === gl.RGBA) { pixelFormat = Format.U8_RGBA_RT; - } else if (format === gl.LUMINANCE && type === gl.FLOAT) { - pixelFormat = Format.F32_LUMINANCE; - } else if (format === gl.LUMINANCE && type === gl.UNSIGNED_BYTE) { + } else if (type === gl.UNSIGNED_BYTE && format === gl.LUMINANCE) { pixelFormat = Format.U8_LUMINANCE; - } else if(type === gl.FLOAT && format === gl.RGB) { + } else if (type === gl.FLOAT && format === gl.RGB) { pixelFormat = Format.F32_RGB; - } - else { + } else { throw new Error(`create texture error, type: ${type}, format: ${format}`); } - // // copy pixels from current bind framebuffer - // x, - // y, - // copy, - // }; - this.texture = device.createTexture({ format: pixelFormat!, width, @@ -83,26 +74,22 @@ export default class DeviceTexture2D implements ITexture2D { unpackFlipY: flipY, packAlignment: alignment, }, + mipLevelCount: usage === TextureUsage.RENDER_TARGET ? 1 : mipmap ? 1 : 0, }); if (data) { // @ts-ignore this.texture.setImageData([data]); } - // wrapS: gl.CLAMP_TO_EDGE, - // wrapT: gl.CLAMP_TO_EDGE, - // min: gl.LINEAR, - // mag: gl.LINEAR, - this.sampler = device.createSampler({ addressModeU: wrapModeMap[wrapS], addressModeV: wrapModeMap[wrapT], - minFilter: FilterMode.BILINEAR, // TODO: use mag & min - magFilter: FilterMode.BILINEAR, + minFilter: min === gl.NEAREST ? FilterMode.POINT : FilterMode.BILINEAR, + magFilter: mag === gl.NEAREST ? FilterMode.POINT : FilterMode.BILINEAR, mipmapFilter: MipmapFilterMode.NO_MIP, - lodMinClamp: 0, - lodMaxClamp: 0, - // maxAnisotropy: aniso, + // lodMinClamp: 0, + // lodMaxClamp: 0, + maxAnisotropy: aniso, }); } From 2690f1d6f43196c3ea8904ab92f8c50bc63e8aa5 Mon Sep 17 00:00:00 2001 From: "yuqi.pyq" Date: Wed, 13 Dec 2023 12:59:29 +0800 Subject: [PATCH 5/5] fix: raster rgb --- dev-demos/raster/multiband/lc_08/432.tsx | 31 ++++++++++--------- dev-demos/raster/multiband/lc_08/NDBI.tsx | 5 +-- dev-demos/raster/multiband/lc_08/NDVI.tsx | 3 +- dev-demos/raster/multiband/lc_08/NDWI.tsx | 5 +-- dev-demos/raster/multiband/lc_08/rgb.tsx | 4 +-- .../layers/src/raster/models/rasterRgb.ts | 22 ++++++++----- 6 files changed, 41 insertions(+), 29 deletions(-) diff --git a/dev-demos/raster/multiband/lc_08/432.tsx b/dev-demos/raster/multiband/lc_08/432.tsx index 2b6105cfb0..a7758d6d9c 100644 --- a/dev-demos/raster/multiband/lc_08/432.tsx +++ b/dev-demos/raster/multiband/lc_08/432.tsx @@ -4,8 +4,8 @@ import { Select } from 'antd'; import 'antd/es/select/style/index'; // @ts-ignore import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; import * as GeoTIFF from 'geotiff'; +import React, { useEffect } from 'react'; async function getTiffData(url: string) { const response = await fetch(url); @@ -19,6 +19,7 @@ export default () => { useEffect(() => { const scene = new Scene({ id: 'map', + renderer: 'device', map: new Map({ center: [130.5, 47], zoom: 10.5, @@ -29,20 +30,20 @@ export default () => { const url2 = 'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&'; - const layer2 = new RasterLayer({ - zIndex: 1, - }).source(url2, { - parser: { - type: 'rasterTile', - tileSize: 256, - wmtsOptions: { - layer: 'img', - tileMatrixset: 'w', - format: 'tiles', - }, - }, - }); - scene.addLayer(layer2); + // const layer2 = new RasterLayer({ + // zIndex: 1, + // }).source(url2, { + // parser: { + // type: 'rasterTile', + // tileSize: 256, + // wmtsOptions: { + // layer: 'img', + // tileMatrixset: 'w', + // format: 'tiles', + // }, + // }, + // }); + // scene.addLayer(layer2); const url1 = 'https://gw.alipayobjects.com/zos/raptor/1667832825992/LC08_3857_clip_2.tif'; const tiffdata = await getTiffData(url1); diff --git a/dev-demos/raster/multiband/lc_08/NDBI.tsx b/dev-demos/raster/multiband/lc_08/NDBI.tsx index 6a52ffc0e7..594724aecb 100644 --- a/dev-demos/raster/multiband/lc_08/NDBI.tsx +++ b/dev-demos/raster/multiband/lc_08/NDBI.tsx @@ -2,8 +2,8 @@ import { RasterLayer, Scene } from '@antv/l7'; // @ts-ignore import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; import * as GeoTIFF from 'geotiff'; +import React, { useEffect } from 'react'; async function getTiffData(url: string) { const response = await fetch(url); @@ -15,6 +15,7 @@ export default () => { useEffect(() => { const scene = new Scene({ id: 'map', + renderer: 'device', map: new Map({ center: [130.5, 47], zoom: 10.5, @@ -88,7 +89,7 @@ export default () => { }, }); - scene.addLayer(layer2); + // scene.addLayer(layer2); scene.addLayer(layer); }); }, []); diff --git a/dev-demos/raster/multiband/lc_08/NDVI.tsx b/dev-demos/raster/multiband/lc_08/NDVI.tsx index 9a763cd32d..5f5775d01e 100644 --- a/dev-demos/raster/multiband/lc_08/NDVI.tsx +++ b/dev-demos/raster/multiband/lc_08/NDVI.tsx @@ -2,8 +2,8 @@ import { RasterLayer, Scene } from '@antv/l7'; // @ts-ignore import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; import * as GeoTIFF from 'geotiff'; +import React, { useEffect } from 'react'; async function getTiffData(url: string) { const response = await fetch(url); @@ -15,6 +15,7 @@ export default () => { useEffect(() => { const scene = new Scene({ id: 'map', + renderer: 'device', map: new Map({ center: [130.5, 47], zoom: 10.5, diff --git a/dev-demos/raster/multiband/lc_08/NDWI.tsx b/dev-demos/raster/multiband/lc_08/NDWI.tsx index 941c653b92..88e00459c7 100644 --- a/dev-demos/raster/multiband/lc_08/NDWI.tsx +++ b/dev-demos/raster/multiband/lc_08/NDWI.tsx @@ -2,8 +2,8 @@ import { RasterLayer, Scene } from '@antv/l7'; // @ts-ignore import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; import * as GeoTIFF from 'geotiff'; +import React, { useEffect } from 'react'; async function getTiffData(url: string) { const response = await fetch(url); @@ -15,6 +15,7 @@ export default () => { useEffect(() => { const scene = new Scene({ id: 'map', + renderer: 'device', map: new Map({ center: [130.5, 47], zoom: 10.5, @@ -87,7 +88,7 @@ export default () => { }, }); - scene.addLayer(layer2); + // scene.addLayer(layer2); scene.addLayer(layer); }); }, []); diff --git a/dev-demos/raster/multiband/lc_08/rgb.tsx b/dev-demos/raster/multiband/lc_08/rgb.tsx index 9d6bfccf71..9b7394da31 100644 --- a/dev-demos/raster/multiband/lc_08/rgb.tsx +++ b/dev-demos/raster/multiband/lc_08/rgb.tsx @@ -2,8 +2,8 @@ import { RasterLayer, Scene, metersToLngLat } from '@antv/l7'; // @ts-ignore import { Map } from '@antv/l7-maps'; -import React, { useEffect } from 'react'; import * as GeoTIFF from 'geotiff'; +import React, { useEffect } from 'react'; async function getTiffData(url: string) { const response = await fetch(url); @@ -15,7 +15,7 @@ export default () => { useEffect(() => { const scene = new Scene({ id: 'map', - renderer:'device', + renderer: 'device', map: new Map({ center: [130.5, 47], zoom: 2, diff --git a/packages/layers/src/raster/models/rasterRgb.ts b/packages/layers/src/raster/models/rasterRgb.ts index 495a3ec869..b7442079e9 100644 --- a/packages/layers/src/raster/models/rasterRgb.ts +++ b/packages/layers/src/raster/models/rasterRgb.ts @@ -6,11 +6,11 @@ import { ITexture2D, } from '@antv/l7-core'; import BaseModel from '../../core/BaseModel'; +import { ShaderLocation } from '../../core/CommonStyleAttribute'; import { IRasterLayerStyleOptions } from '../../core/interface'; import { RasterImageTriangulation } from '../../core/triangulation'; -import rasterVert from '../shaders/rgb/raster_rgb_vert.glsl'; import rasterFrag from '../shaders/rgb/raster_rgb_frag.glsl'; -import { ShaderLocation } from '../../core/CommonStyleAttribute'; +import rasterVert from '../shaders/rgb/raster_rgb_vert.glsl'; export default class RasterModel extends BaseModel { protected texture: ITexture2D; protected dataOption: any = {}; @@ -22,13 +22,21 @@ export default class RasterModel extends BaseModel { return { ...commoninfo.uniformsOption, ...attributeInfo.uniformsOption, - } + }; } - protected getCommonUniformsInfo(): { uniformsArray: number[]; uniformsLength: number; uniformsOption: { [key: string]: any; }; } { + protected getCommonUniformsInfo(): { + uniformsArray: number[]; + uniformsLength: number; + uniformsOption: { [key: string]: any }; + } { const { opacity = 1, noDataValue = 0 } = this.layer.getLayerConfig() as IRasterLayerStyleOptions; - const { rMinMax = [0,255], gMinMax = [0,255], bMinMax = [0,255] } = this.dataOption; + const { + rMinMax = [0, 255], + gMinMax = [0, 255], + bMinMax = [0, 255], + } = this.dataOption; const commonOptions = { u_rminmax: rMinMax, u_gminmax: gMinMax, @@ -37,7 +45,7 @@ export default class RasterModel extends BaseModel { u_noDataValue: noDataValue, u_texture: this.texture, }; - this.textures = [this.texture] + this.textures = [this.texture]; const commonBufferInfo = this.getUniformsBufferInfo(commonOptions); return commonBufferInfo; @@ -79,7 +87,7 @@ export default class RasterModel extends BaseModel { const { data, width, height } = await this.getRasterData(parserDataItem); this.texture = createTexture2D({ // @ts-ignore - data, + data: new Float32Array(data), width, height, format: gl.RGB,