-
Notifications
You must be signed in to change notification settings - Fork 633
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(layer): add citybuildinglayer & add line add animate
- Loading branch information
Showing
35 changed files
with
769 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import { IEncodeFeature } from '@antv/l7-core'; | ||
import BaseLayer from '../core/BaseLayer'; | ||
import CityBuildModel from './models/build'; | ||
|
||
export default class CityBuildingLayer extends BaseLayer { | ||
public type: string = 'PolygonLayer'; | ||
|
||
protected getConfigSchema() { | ||
return { | ||
properties: { | ||
opacity: { | ||
type: 'number', | ||
minimum: 0, | ||
maximum: 1, | ||
}, | ||
}, | ||
}; | ||
} | ||
|
||
protected renderModels() { | ||
this.models.forEach((model) => | ||
model.draw({ | ||
uniforms: this.layerModel.getUninforms(), | ||
}), | ||
); | ||
return this; | ||
} | ||
|
||
protected buildModels() { | ||
this.layerModel = new CityBuildModel(this); | ||
this.models = this.layerModel.buildModels(); | ||
} | ||
|
||
protected getModelType(): string { | ||
return 'citybuilding'; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
import { AttributeType, gl, IEncodeFeature, IModel } from '@antv/l7-core'; | ||
import { rgb2arr } from '@antv/l7-utils'; | ||
import BaseModel from '../../core/BaseModel'; | ||
import { PolygonExtrudeTriangulation } from '../../core/triangulation'; | ||
import buildFrag from '../shaders/build_frag.glsl'; | ||
import buildVert from '../shaders/build_vert.glsl'; | ||
interface ICityBuildLayerStyleOptions { | ||
opacity: number; | ||
baseColor: string; | ||
brightColor: string; | ||
windowColor: string; | ||
} | ||
export default class CityBuildModel extends BaseModel { | ||
public getUninforms() { | ||
const { | ||
opacity = 1, | ||
baseColor = 'rgb(16,16,16)', | ||
brightColor = 'rgb(255,176,38)', | ||
windowColor = 'rgb(30,60,89)', | ||
} = this.layer.getLayerConfig() as ICityBuildLayerStyleOptions; | ||
return { | ||
u_opacity: opacity, | ||
u_baseColor: rgb2arr(baseColor), | ||
u_brightColor: rgb2arr(brightColor), | ||
u_windowColor: rgb2arr(windowColor), | ||
u_time: this.layer.getLayerAnimateTime(), | ||
}; | ||
} | ||
|
||
public buildModels(): IModel[] { | ||
this.startModelAnimate(); | ||
return [ | ||
this.layer.buildLayerModel({ | ||
moduleName: 'cityBuilding', | ||
vertexShader: buildVert, | ||
fragmentShader: buildFrag, | ||
triangulation: PolygonExtrudeTriangulation, | ||
}), | ||
]; | ||
} | ||
|
||
protected registerBuiltinAttributes() { | ||
// point layer size; | ||
this.styleAttributeService.registerStyleAttribute({ | ||
name: 'normal', | ||
type: AttributeType.Attribute, | ||
descriptor: { | ||
name: 'a_Normal', | ||
buffer: { | ||
// give the WebGL driver a hint that this buffer may change | ||
usage: gl.STATIC_DRAW, | ||
data: [], | ||
type: gl.FLOAT, | ||
}, | ||
size: 3, | ||
update: ( | ||
feature: IEncodeFeature, | ||
featureIdx: number, | ||
vertex: number[], | ||
attributeIdx: number, | ||
normal: number[], | ||
) => { | ||
return normal; | ||
}, | ||
}, | ||
}); | ||
|
||
this.styleAttributeService.registerStyleAttribute({ | ||
name: 'size', | ||
type: AttributeType.Attribute, | ||
descriptor: { | ||
name: 'a_Size', | ||
buffer: { | ||
// give the WebGL driver a hint that this buffer may change | ||
usage: gl.DYNAMIC_DRAW, | ||
data: [], | ||
type: gl.FLOAT, | ||
}, | ||
size: 1, | ||
update: ( | ||
feature: IEncodeFeature, | ||
featureIdx: number, | ||
vertex: number[], | ||
attributeIdx: number, | ||
) => { | ||
const { size } = feature; | ||
return Array.isArray(size) ? [size[0]] : [size as number]; | ||
}, | ||
}, | ||
}); | ||
this.styleAttributeService.registerStyleAttribute({ | ||
name: 'uv', | ||
type: AttributeType.Attribute, | ||
descriptor: { | ||
name: 'a_Uv', | ||
buffer: { | ||
// give the WebGL driver a hint that this buffer may change | ||
usage: gl.DYNAMIC_DRAW, | ||
data: [], | ||
type: gl.FLOAT, | ||
}, | ||
size: 2, | ||
update: ( | ||
feature: IEncodeFeature, | ||
featureIdx: number, | ||
vertex: number[], | ||
attributeIdx: number, | ||
) => { | ||
const { size } = feature; | ||
return [vertex[3], vertex[4]]; | ||
}, | ||
}, | ||
}); | ||
} | ||
} |
104 changes: 104 additions & 0 deletions
104
packages/layers/src/citybuliding/shaders/build_frag.glsl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
uniform float u_opacity: 1.0; | ||
uniform vec4 u_baseColor : [ 1.0, 0, 0, 1.0 ]; | ||
uniform vec4 u_brightColor : [ 1.0, 0, 0, 1.0 ]; | ||
uniform vec4 u_windowColor : [ 1.0, 0, 0, 1.0 ]; | ||
uniform float u_near : 0; | ||
uniform float u_far : 1; | ||
varying vec4 v_Color; | ||
varying vec2 v_texCoord; | ||
uniform float u_Zoom : 1; | ||
uniform float u_time; | ||
|
||
#pragma include "picking" | ||
|
||
vec3 getWindowColor(float n, float hot, vec3 brightColor, vec3 darkColor) { | ||
float s = step(hot, n); | ||
vec3 color = mix(brightColor,vec3(0.9,0.9,1.0),n); | ||
|
||
return mix(darkColor, color, s); | ||
} | ||
float random (vec2 st) { | ||
return fract(sin(dot(st.xy, vec2(12.9898,78.233)))* 43758.5453123); | ||
} | ||
|
||
float LinearizeDepth() | ||
{ | ||
float z = gl_FragCoord.z * 2.0 - 1.0; | ||
return (2.0 * u_near * u_far) / (u_far + u_near - z * (u_far - u_near)); | ||
} | ||
|
||
vec3 fog(vec3 color, vec3 fogColor, float depth){ | ||
float fogFactor=clamp(depth,0.0,1.0); | ||
vec3 output_color=mix(fogColor,color,fogFactor); | ||
return output_color; | ||
} | ||
|
||
float sdRect(vec2 p, vec2 sz) { | ||
vec2 d = abs(p) - sz; | ||
float outside = length(max(d, 0.)); | ||
float inside = min(max(d.x, d.y), 0.); | ||
return outside + inside; | ||
} | ||
|
||
void main() { | ||
gl_FragColor = v_Color; | ||
gl_FragColor.a *= u_opacity; | ||
|
||
vec3 baseColor = u_baseColor.xyz; | ||
vec3 brightColor = u_brightColor.xyz; | ||
vec3 windowColor = u_windowColor.xyz; | ||
float targetColId = 5.; | ||
float depth = 1.0 - LinearizeDepth() / u_far * u_Zoom; | ||
vec3 fogColor = vec3(23.0/255.0,31.0/255.0,51.0/255.0); | ||
if(v_texCoord.x < 0.) { //顶部颜色 | ||
vec3 foggedColor = fog(baseColor.xyz + vec3(0.12*0.9,0.2*0.9,0.3*0.9),fogColor,depth); | ||
gl_FragColor = vec4( foggedColor, v_Color.w); | ||
}else { // 侧面颜色 | ||
vec2 st = v_texCoord; | ||
vec2 UvScale = v_texCoord; | ||
float tStep = min(0.08,max(0.05* (18.0-u_Zoom),0.02)); | ||
float tStart = 0.25 * tStep; | ||
float tEnd = 0.75 * tStep; | ||
float u = mod(UvScale.x, tStep); | ||
float v = mod(UvScale.y, tStep); | ||
float ux = floor(UvScale.x/tStep); | ||
float uy = floor(UvScale.y/tStep); | ||
float n = random(vec2(ux,uy)); | ||
float lightP = u_time; | ||
float head = 1.0- step(0.005,st.y); | ||
/*step3*/ | ||
// 将窗户颜色和墙面颜色区别开来 | ||
float sU = step(tStart, u) - step(tEnd, u); | ||
float sV = step(tStart, v) - step(tEnd, v); | ||
vec2 windowSize = vec2(abs(tEnd-tStart),abs(tEnd-tStart)); | ||
float dist = sdRect(vec2(u,v), windowSize); | ||
float s = sU * sV; | ||
|
||
float curColId = floor(UvScale.x / tStep); | ||
float sCol = step(targetColId - 0.2, curColId) - step(targetColId + 0.2, curColId); | ||
|
||
float mLightP = mod(lightP, 2.); | ||
float sRow = step(mLightP - 0.2, st.y) - step(mLightP, st.y); | ||
if(ux == targetColId){ | ||
n =0.; | ||
} | ||
float timeP = min(0.75, abs ( sin(u_time/6.0) ) ); | ||
float hot = smoothstep(1.0,0.0,timeP); | ||
vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), s); | ||
//vec3 color = mix(baseColor, getWindowColor(n,hot,brightColor,windowColor), 1.0); | ||
float sFinal = s * sCol * sRow; | ||
color += mix(baseColor, brightColor, sFinal*n); | ||
if (st.y<0.01){ | ||
color = baseColor; | ||
} | ||
if(head ==1.0) { // 顶部亮线 | ||
color = brightColor; | ||
} | ||
color = color * v_Color.rgb; | ||
|
||
vec3 foggedColor = fog(color,fogColor,depth); | ||
|
||
gl_FragColor = vec4(foggedColor,1.0); | ||
} | ||
gl_FragColor = filterColor(gl_FragColor); | ||
} |
Oops, something went wrong.