feat: 简化 shader 代码

This commit is contained in:
shihui 2022-12-03 16:58:30 +08:00
parent 8adec0eccd
commit c6994d0cd3
2 changed files with 18 additions and 84 deletions

View File

@ -1,23 +1,13 @@
export const vert = ` export const vert = `
attribute vec3 a_Position;
attribute vec3 a_Extrude;
uniform mat4 u_ModelMatrix;
#define TILE_SIZE 512.0 #define TILE_SIZE 512.0
#define PI 3.1415926536 #define PI 3.1415926536
#define WORLD_SCALE TILE_SIZE / (PI * 2.0) #define WORLD_SCALE TILE_SIZE / (PI * 2.0)
#define COORDINATE_SYSTEM_LNGLAT 1.0 // mapbox
#define COORDINATE_SYSTEM_LNGLAT_OFFSET 2.0 // mapbox offset
#define COORDINATE_SYSTEM_VECTOR_TILE 3.0
#define COORDINATE_SYSTEM_IDENTITY 4.0
#define COORDINATE_SYSTEM_P20 5.0 // amap #define COORDINATE_SYSTEM_P20 5.0 // amap
#define COORDINATE_SYSTEM_P20_OFFSET 6.0 // amap offset #define COORDINATE_SYSTEM_P20_OFFSET 6.0 // amap offset
#define COORDINATE_SYSTEM_METER_OFFSET 7.0
#define COORDINATE_SYSTEM_P20_2 8.0 // amap2.0 attribute vec3 a_Position;
attribute vec3 a_Extrude;
uniform mat4 u_ViewProjectionMatrix; uniform mat4 u_ViewProjectionMatrix;
@ -35,10 +25,6 @@ uniform vec3 u_PixelsPerDegree;
uniform vec3 u_PixelsPerDegree2; uniform vec3 u_PixelsPerDegree2;
uniform vec3 u_PixelsPerMeter;
vec2 project_mercator(vec2 lnglat) { vec2 project_mercator(vec2 lnglat) {
float x = lnglat.x; float x = lnglat.x;
return vec2( return vec2(
@ -47,87 +33,48 @@ vec2 project_mercator(vec2 lnglat) {
); );
} }
float project_scale(float meters) { // offset coords -> world coords 偏移坐标转成世界坐标
return meters * u_PixelsPerMeter.z;
}
// offset coords -> world coords
vec4 project_offset(vec4 offset) { vec4 project_offset(vec4 offset) {
float dy = offset.y; float dy = offset.y;
dy = clamp(dy, -1., 1.); dy = clamp(dy, -1., 1.);
vec3 pixels_per_unit = u_PixelsPerDegree + u_PixelsPerDegree2 * dy; vec3 pixels_per_unit = u_PixelsPerDegree + u_PixelsPerDegree2 * dy;
return vec4(offset.xyz * pixels_per_unit, offset.w); return vec4(offset.xy * pixels_per_unit.xy, 0.0, 1.0);
} }
// 投影方法 - 将经纬度转化为平面坐标xy 平面)
vec4 project_position(vec4 position) { vec4 project_position(vec4 position) {
float a = COORDINATE_SYSTEM_LNGLAT_OFFSET;
float b = COORDINATE_SYSTEM_P20_OFFSET; if (u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
float c = COORDINATE_SYSTEM_LNGLAT;
if (u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET
|| u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) {
float X = position.x - u_ViewportCenter.x; float X = position.x - u_ViewportCenter.x;
float Y = position.y - u_ViewportCenter.y; float Y = position.y - u_ViewportCenter.y;
return project_offset(vec4(X, Y, position.z, position.w)); return project_offset(vec4(X, Y, 0.0, 1.0));
}
if (u_CoordinateSystem < COORDINATE_SYSTEM_LNGLAT + 0.01 && u_CoordinateSystem >COORDINATE_SYSTEM_LNGLAT - 0.01) {
return vec4(
project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale,
project_scale(position.z),
position.w
);
} }
if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) { if (u_CoordinateSystem == COORDINATE_SYSTEM_P20) {
return vec4( return vec4(
(project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale - vec2(215440491., 106744817.)) * vec2(1., -1.), (project_mercator(position.xy) * WORLD_SCALE * u_ZoomScale - vec2(215440491., 106744817.)) * vec2(1., -1.),
project_scale(position.z), 0.0,
position.w 1.0
); );
} }
return position; return position;
} }
vec2 project_pixel(vec2 pixel) { vec2 project_pixel(vec2 pixel) {
if (u_CoordinateSystem == COORDINATE_SYSTEM_P20 || u_CoordinateSystem == COORDINATE_SYSTEM_P20_OFFSET) { // P20 坐标系下,为了和 Web 墨卡托坐标系统一zoom 默认减1
// P20 坐标系下,为了和 Web 墨卡托坐标系统一zoom 默认减1 return pixel * pow(2.0, (19.0 - u_Zoom));
return pixel * pow(2.0, (19.0 - u_Zoom));
}
if(u_CoordinateSystem == COORDINATE_SYSTEM_P20_2) {
// P20_2 坐标系下,为了和 Web 墨卡托坐标系统一zoom 默认减3
return pixel * pow(2.0, (19.0 - 3.0 - u_Zoom));
}
return pixel * -1.;
} }
vec4 project_common_position_to_clipspace(vec4 position, mat4 viewProjectionMatrix, vec4 center) {
if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||
u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
// Needs to be divided with project_uCommonUnitsPerMeter
position.w *= u_PixelsPerMeter.z;
}
return viewProjectionMatrix * position + center;
}
// Projects from common space coordinates to clip space
vec4 project_common_position_to_clipspace(vec4 position) {
return project_common_position_to_clipspace(
position,
u_ViewProjectionMatrix,
u_ViewportCenterProjection
);
}
void main() { void main() {
vec2 offset = a_Extrude.xy * 10.0; vec2 offset = a_Extrude.xy * 10.0;
offset = project_pixel(offset); offset = project_pixel(offset);
vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0)); vec4 project_pos = project_position(vec4(a_Position.xy, 0.0, 1.0));
gl_Position = project_common_position_to_clipspace(vec4(project_pos.xy + offset, 0.0, 1.0)); vec4 worldPos = u_ViewProjectionMatrix * vec4(project_pos.xy + offset, 0.0, 1.0) + u_ViewportCenterProjection;
gl_Position = worldPos;
} }
`; `;
@ -139,8 +86,6 @@ export const frag = `
#endif #endif
void main() { void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
} }
`; `;

View File

@ -1,7 +1,4 @@
import { import {
gl,
IAttribute,
IElements,
IModel, IModel,
IModelDrawOptions, IModelDrawOptions,
IModelInitializationOptions, IModelInitializationOptions,
@ -9,9 +6,6 @@ import {
} from '@antv/l7-core'; } from '@antv/l7-core';
import regl from 'l7regl'; import regl from 'l7regl';
import { isPlainObject, isTypedArray } from 'lodash'; import { isPlainObject, isTypedArray } from 'lodash';
import {
primitiveMap,
} from './constants';
import ReglAttribute from './ReglAttribute'; import ReglAttribute from './ReglAttribute';
import ReglElements from './ReglElements'; import ReglElements from './ReglElements';
@ -20,9 +14,7 @@ import ReglElements from './ReglElements';
*/ */
export default class ReglModel implements IModel { export default class ReglModel implements IModel {
private reGl: regl.Regl; private reGl: regl.Regl;
private drawCommand: regl.DrawCommand; private drawCommand: regl.DrawCommand;
private drawParams: regl.DrawConfig;
private options: IModelInitializationOptions;
private uniforms: { private uniforms: {
[key: string]: IUniform; [key: string]: IUniform;
} = {}; } = {};
@ -34,11 +26,10 @@ export default class ReglModel implements IModel {
fs, fs,
attributes, attributes,
uniforms, uniforms,
primitive,
elements, elements,
} = options; } = options;
const reglUniforms: { [key: string]: IUniform } = {}; const reglUniforms: { [key: string]: IUniform } = {};
this.options = options;
if (uniforms) { if (uniforms) {
this.uniforms = this.extractUniforms(uniforms); this.uniforms = this.extractUniforms(uniforms);
@ -59,9 +50,7 @@ export default class ReglModel implements IModel {
frag: fs, frag: fs,
uniforms: reglUniforms, uniforms: reglUniforms,
vert: vs, vert: vs,
blend: {}, primitive: 'triangles'
primitive:
primitiveMap[primitive === undefined ? gl.TRIANGLES : primitive],
}; };
drawParams.elements = (elements as ReglElements).get(); drawParams.elements = (elements as ReglElements).get();