diff --git a/.storybook/config.ts b/.storybook/config.ts index 8d0e91a35c..6169a25011 100644 --- a/.storybook/config.ts +++ b/.storybook/config.ts @@ -1,5 +1,5 @@ // tslint:disable-next-line:no-submodule-imports -import '!style-loader!css-loader!sass-loader!./iframe.scss'; +// import '!style-loader!css-loader!sass-loader!./iframe.scss'; import { addParameters, configure } from '@storybook/react'; import { create } from '@storybook/theming'; diff --git a/examples/line/arc/demo/arcCircle.js b/examples/line/arc/demo/arcCircle.js index 3fb1f37441..7b28638742 100644 --- a/examples/line/arc/demo/arcCircle.js +++ b/examples/line/arc/demo/arcCircle.js @@ -27,8 +27,7 @@ fetch('https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt') .shape('greatcircle') .color('#8C1EB2') .style({ - opacity: 0.8, - blur: 0.99 + opacity: 0.8 }); scene.addLayer(layer); }); diff --git a/package.json b/package.json index 87c2d5c404..306f9456a3 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "scripts": { "start": "yarn run site:clean && yarn run site:develop", "site:develop": "cross-env BABEL_ENV=site gatsby develop --open -H 0.0.0.0", - "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths --no-uglify", + "site:build": "yarn run site:clean && cross-env BABEL_ENV=site gatsby build --prefix-paths", "site:clean": "gatsby clean", "site:deploy": "yarn run site:build && gh-pages -d public", "site:publish": "gh-pages -d public", diff --git a/packages/layers/src/line/models/arc.ts b/packages/layers/src/line/models/arc.ts index 9963a24a36..0ad24a1936 100644 --- a/packages/layers/src/line/models/arc.ts +++ b/packages/layers/src/line/models/arc.ts @@ -12,7 +12,7 @@ import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; import line_arc_frag from '../shaders/line_arc_frag.glsl'; -import line_arc2d_vert from '../shaders/line_bezier_vert.glsl'; +import line_arc2d_vert from '../shaders/line_arc_vert.glsl'; const lineStyleObj: { [key: string]: number } = { solid: 0.0, dash: 1.0, diff --git a/packages/layers/src/line/models/arc_3d.ts b/packages/layers/src/line/models/arc_3d.ts index 4110ae6c7b..a96c6fcade 100644 --- a/packages/layers/src/line/models/arc_3d.ts +++ b/packages/layers/src/line/models/arc_3d.ts @@ -10,8 +10,8 @@ import { import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; +import line_arc_vert from '../shaders/line_arc_3d_vert.glsl'; import line_arc_frag from '../shaders/line_arc_frag.glsl'; -import line_arc_vert from '../shaders/line_arc_vert.glsl'; const lineStyleObj: { [key: string]: number } = { solid: 0.0, dash: 1.0, diff --git a/packages/layers/src/line/models/great_circle.ts b/packages/layers/src/line/models/great_circle.ts index 16ce7d75af..a7e71e947c 100644 --- a/packages/layers/src/line/models/great_circle.ts +++ b/packages/layers/src/line/models/great_circle.ts @@ -11,8 +11,8 @@ import { import BaseModel from '../../core/BaseModel'; import { ILineLayerStyleOptions, lineStyleType } from '../../core/interface'; import { LineArcTriangulation } from '../../core/triangulation'; -import line_arc2d_vert from '../shaders/line_arc2d_vert.glsl'; import line_arc_frag from '../shaders/line_arc_frag.glsl'; +import line_arc2d_vert from '../shaders/line_arc_great_circle_vert.glsl'; const lineStyleObj: { [key: string]: number } = { solid: 0.0, dash: 1.0, diff --git a/packages/layers/src/line/shaders/line_arc_3d_vert.glsl b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl new file mode 100644 index 0000000000..d0ce46b315 --- /dev/null +++ b/packages/layers/src/line/shaders/line_arc_3d_vert.glsl @@ -0,0 +1,91 @@ +#define LineTypeSolid 0.0 +#define LineTypeDash 1.0 +#define Animate 0.0 +attribute vec3 a_Position; +attribute vec4 a_Instance; +attribute vec4 a_Color; +attribute float a_Size; + +uniform mat4 u_ModelMatrix; +uniform float segmentNumber; +uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; +varying vec4 v_color; +varying vec2 v_normal; +varying float v_distance_ratio; +uniform float u_line_type: 0.0; +uniform vec2 u_dash_array: [10.0, 5.]; + +varying vec2 v_dash_array; + +#pragma include "projection" +#pragma include "project" +#pragma include "picking" + +float maps (float value, float start1, float stop1, float start2, float stop2) { + return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); +} + +float getSegmentRatio(float index) { + return smoothstep(0.0, 1.0, index / (segmentNumber - 1.0)); +} + +float paraboloid(vec2 source, vec2 target, float ratio) { + vec2 x = mix(source, target, ratio); + vec2 center = mix(source, target, 0.5); + float dSourceCenter = distance(source, center); + float dXCenter = distance(x, center); + return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter); +} + +vec3 getPos(vec2 source, vec2 target, float segmentRatio) { + float vertex_height = paraboloid(source, target, segmentRatio); + + return vec3( + mix(source, target, segmentRatio), + sqrt(max(0.0, vertex_height)) + ); +} +vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + + vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0; + + return offset; +} +vec2 getNormal(vec2 line_clipspace, float offset_direction) { + // normalized direction of the line + vec2 dir_screenspace = normalize(line_clipspace); + // rotate by 90 degrees + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); +} + +void main() { + v_color = a_Color; + vec2 source = project_position(vec4(a_Instance.rg, 0, 0)).xy; + vec2 target = project_position(vec4(a_Instance.ba, 0, 0)).xy; + float segmentIndex = a_Position.x; + float segmentRatio = getSegmentRatio(segmentIndex); + float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); + + if(u_line_type == LineTypeDash) { + v_distance_ratio = segmentIndex / segmentNumber; + float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); + } + if(u_aimate.x == Animate) { + v_distance_ratio = segmentIndex / segmentNumber; + } + + float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); + vec3 curr = getPos(source, target, segmentRatio); + vec3 next = getPos(source, target, nextSegmentRatio); + vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y); + v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); + + gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0)); + setPickingColor(a_PickingColor); +} diff --git a/packages/layers/src/line/shaders/line_arc_frag.glsl b/packages/layers/src/line/shaders/line_arc_frag.glsl index 7c9802c707..c72c593c0d 100644 --- a/packages/layers/src/line/shaders/line_arc_frag.glsl +++ b/packages/layers/src/line/shaders/line_arc_frag.glsl @@ -18,7 +18,7 @@ uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; void main() { gl_FragColor = v_color; float blur = 1.- smoothstep(u_blur, 1., length(v_normal.xy)); - gl_FragColor.a *= (blur * u_opacity); + gl_FragColor.a *= u_opacity * blur; if(u_line_type == LineTypeDash) { gl_FragColor.a *= blur * (1.0- step(v_dash_array.x, mod(v_distance_ratio, v_dash_array.x +v_dash_array.y))); } diff --git a/packages/layers/src/line/shaders/line_arc2d_vert.glsl b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl similarity index 99% rename from packages/layers/src/line/shaders/line_arc2d_vert.glsl rename to packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl index e9cfafb0d0..f16aaf417c 100644 --- a/packages/layers/src/line/shaders/line_arc2d_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_great_circle_vert.glsl @@ -50,7 +50,7 @@ vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { // rotate by 90 degrees dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0; - return offset * vec2(1.0, -1.0); + return offset; } vec2 getNormal(vec2 line_clipspace, float offset_direction) { // normalized direction of the line diff --git a/packages/layers/src/line/shaders/line_arc_vert.glsl b/packages/layers/src/line/shaders/line_arc_vert.glsl index d0ce46b315..dd710d2de1 100644 --- a/packages/layers/src/line/shaders/line_arc_vert.glsl +++ b/packages/layers/src/line/shaders/line_arc_vert.glsl @@ -1,91 +1,85 @@ #define LineTypeSolid 0.0 #define LineTypeDash 1.0 #define Animate 0.0 +attribute vec4 a_Color; attribute vec3 a_Position; attribute vec4 a_Instance; -attribute vec4 a_Color; attribute float a_Size; - uniform mat4 u_ModelMatrix; uniform float segmentNumber; uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; varying vec4 v_color; varying vec2 v_normal; + varying float v_distance_ratio; uniform float u_line_type: 0.0; uniform vec2 u_dash_array: [10.0, 5.]; - varying vec2 v_dash_array; - #pragma include "projection" #pragma include "project" #pragma include "picking" -float maps (float value, float start1, float stop1, float start2, float stop2) { - return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1)); +float bezier3(vec3 arr, float t) { + float ut = 1. - t; + return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t; +} +vec2 midPoint(vec2 source, vec2 target) { + vec2 center = target - source; + float r = length(center); + float theta = atan(center.y, center.x); + float thetaOffset = 0.314; + float r2 = r / 2.0 / cos(thetaOffset); + float theta2 = theta + thetaOffset; + vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y); + return mid; } - float getSegmentRatio(float index) { - return smoothstep(0.0, 1.0, index / (segmentNumber - 1.0)); + return smoothstep(0.0, 1.0, index / (segmentNumber - 1.)); } - -float paraboloid(vec2 source, vec2 target, float ratio) { - vec2 x = mix(source, target, ratio); - vec2 center = mix(source, target, 0.5); - float dSourceCenter = distance(source, center); - float dXCenter = distance(x, center); - return (dSourceCenter + dXCenter) * (dSourceCenter - dXCenter); -} - -vec3 getPos(vec2 source, vec2 target, float segmentRatio) { - float vertex_height = paraboloid(source, target, segmentRatio); - - return vec3( - mix(source, target, segmentRatio), - sqrt(max(0.0, vertex_height)) - ); +vec2 interpolate (vec2 source, vec2 target, float t) { + // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation + vec2 mid = midPoint(source, target); + vec3 x = vec3(source.x, mid.x, target.x); + vec3 y = vec3(source.y, mid.y, target.y); + return vec2(bezier3(x ,t), bezier3(y,t)); } vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { // normalized direction of the line vec2 dir_screenspace = normalize(line_clipspace); // rotate by 90 degrees - dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); - + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0; - return offset; } vec2 getNormal(vec2 line_clipspace, float offset_direction) { // normalized direction of the line vec2 dir_screenspace = normalize(line_clipspace); // rotate by 90 degrees - dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); - return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); + dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); + return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); } void main() { v_color = a_Color; - vec2 source = project_position(vec4(a_Instance.rg, 0, 0)).xy; - vec2 target = project_position(vec4(a_Instance.ba, 0, 0)).xy; + vec2 source = a_Instance.rg; + vec2 target = a_Instance.ba; float segmentIndex = a_Position.x; float segmentRatio = getSegmentRatio(segmentIndex); float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); - - if(u_line_type == LineTypeDash) { - v_distance_ratio = segmentIndex / segmentNumber; - float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; - v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); - } - if(u_aimate.x == Animate) { + float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); + if(u_line_type == LineTypeDash) { + v_distance_ratio = segmentIndex / segmentNumber; + float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; + v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); + } + if(u_aimate.x == Animate) { v_distance_ratio = segmentIndex / segmentNumber; } - - float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); - vec3 curr = getPos(source, target, segmentRatio); - vec3 next = getPos(source, target, nextSegmentRatio); - vec2 offset = getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y); + vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0)); + vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0)); v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); + vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y)); - gl_Position = project_common_position_to_clipspace(vec4(curr.xy + project_pixel(offset), curr.z, 1.0)); + gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); setPickingColor(a_PickingColor); } diff --git a/packages/layers/src/line/shaders/line_bezier_vert.glsl b/packages/layers/src/line/shaders/line_bezier_vert.glsl deleted file mode 100644 index 50a8b340ae..0000000000 --- a/packages/layers/src/line/shaders/line_bezier_vert.glsl +++ /dev/null @@ -1,85 +0,0 @@ -#define LineTypeSolid 0.0 -#define LineTypeDash 1.0 -#define Animate 0.0 -attribute vec4 a_Color; -attribute vec3 a_Position; -attribute vec4 a_Instance; -attribute float a_Size; -uniform mat4 u_ModelMatrix; -uniform float segmentNumber; -uniform vec4 u_aimate: [ 0, 2., 1.0, 0.2 ]; -varying vec4 v_color; -varying vec2 v_normal; - -varying float v_distance_ratio; -uniform float u_line_type: 0.0; -uniform vec2 u_dash_array: [10.0, 5.]; -varying vec2 v_dash_array; -#pragma include "projection" -#pragma include "project" -#pragma include "picking" - -float bezier3(vec3 arr, float t) { - float ut = 1. - t; - return (arr.x * ut + arr.y * t) * ut + (arr.y * ut + arr.z * t) * t; -} -vec2 midPoint(vec2 source, vec2 target) { - vec2 center = target - source; - float r = length(center); - float theta = atan(center.y, center.x); - float thetaOffset = 0.314; - float r2 = r / 2.0 / cos(thetaOffset); - float theta2 = theta + thetaOffset; - vec2 mid = vec2(r2*cos(theta2) + source.x, r2*sin(theta2) + source.y); - return mid; -} -float getSegmentRatio(float index) { - return smoothstep(0.0, 1.0, index / (segmentNumber - 1.)); -} -vec2 interpolate (vec2 source, vec2 target, float t) { - // if the angularDist is PI, linear interpolation is applied. otherwise, use spherical interpolation - vec2 mid = midPoint(source, target); - vec3 x = vec3(source.x, mid.x, target.x); - vec3 y = vec3(source.y, mid.y, target.y); - return vec2(bezier3(x ,t), bezier3(y,t)); -} -vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction) { - // normalized direction of the line - vec2 dir_screenspace = normalize(line_clipspace); - // rotate by 90 degrees - dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); - vec2 offset = dir_screenspace * offset_direction * a_Size / 2.0; - return offset * vec2(1.0, -1.0); -} -vec2 getNormal(vec2 line_clipspace, float offset_direction) { - // normalized direction of the line - vec2 dir_screenspace = normalize(line_clipspace); - // rotate by 90 degrees - dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); - return reverse_offset_normal(vec3(dir_screenspace,1.0)).xy * sign(offset_direction); -} - -void main() { - v_color = a_Color; - vec2 source = a_Instance.rg; - vec2 target = a_Instance.ba; - float segmentIndex = a_Position.x; - float segmentRatio = getSegmentRatio(segmentIndex); - float indexDir = mix(-1.0, 1.0, step(segmentIndex, 0.0)); - float nextSegmentRatio = getSegmentRatio(segmentIndex + indexDir); - if(u_line_type == LineTypeDash) { - v_distance_ratio = segmentIndex / segmentNumber; - float total_Distance = pixelDistance(a_Instance.rg, a_Instance.ba) / 2.0 * PI; - v_dash_array = pow(2.0, 20.0 - u_Zoom) * u_dash_array / (total_Distance / segmentNumber * segmentIndex); - } - if(u_aimate.x == Animate) { - v_distance_ratio = segmentIndex / segmentNumber; - } - vec4 curr = project_position(vec4(interpolate(source, target, segmentRatio), 0.0, 1.0)); - vec4 next = project_position(vec4(interpolate(source, target, nextSegmentRatio), 0.0, 1.0)); - v_normal = getNormal((next.xy - curr.xy) * indexDir, a_Position.y); - vec2 offset = project_pixel(getExtrusionOffset((next.xy - curr.xy) * indexDir, a_Position.y)); - - gl_Position = project_common_position_to_clipspace(vec4(curr.xy + offset, 0, 1.0)); - setPickingColor(a_PickingColor); -} diff --git a/stories/Layers/components/Arc2DLine.tsx b/stories/Layers/components/Arc2DLine.tsx index 671afd3e02..67d4e2d305 100644 --- a/stories/Layers/components/Arc2DLine.tsx +++ b/stories/Layers/components/Arc2DLine.tsx @@ -23,28 +23,28 @@ export default class Arc2DLineDemo extends React.Component { zoom: 2, }), }); - const lineLayer = new LineLayer() + const lineLayer = new LineLayer({ + blend: 'normal', + }) .source(await response.text(), { parser: { type: 'csv', - x: 'lng1', - y: 'lat1', - x1: 'lng2', - y1: 'lat2', + x1: 'lng1', + y1: 'lat1', + x: 'lng2', + y: 'lat2', }, }) - .size(4) - .shape('greatcircle') - .color('rgb(13,64,140)') - .animate({ - interval: 0.5, - duration: 2, - trailLength: 0.4, - }) + .size(3) + .shape('arc') + .color('#8C1EB2') .style({ - opacity: 0.1, + opacity: 1, }); scene.addLayer(lineLayer); + lineLayer.on('click', (e) => { + console.log(e); + }); scene.render(); this.scene = scene; }