Skip to content

Commit

Permalink
Make glyph buffers caclucations distance independant.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalenkevich
kalenkevich committed Apr 7, 2024
1 parent d441087 commit 80ad6ec
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 59 deletions.
10 changes: 6 additions & 4 deletions src/map/renderer/webgl/objects/glyph/glyph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ export interface WebGlGlyphBufferredGroup extends WebGlObjectBufferredGroup {
size: number; // group size | number of instances;
numElements: number; // number of elements
atlas: string;
vertecies: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 2, Float32Array>; // Array<vec2>;
textcoords: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 2, Float32Array>; // Array<vec2>;
color: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 4, Float32Array>; // Array<vec4>;
selectionColor: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 4, Float32Array>; // Array<vec4>;
vertecies: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 3, Float32Array>;
textcoords: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 2, Float32Array>;
// [width, height]
glyphProperties: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 2, Float32Array>;
color: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 4, Float32Array>;
selectionColor: WebGlObjectAttributeDescriptor<WebGlObjectAttributeType.FLOAT, 4, Float32Array>;
}
70 changes: 40 additions & 30 deletions src/map/renderer/webgl/objects/glyph/glyph_group_builder.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { GlyphMapFeature, MapFeatureType } from '../../../../tile/feature';
import { WebGlGlyphBufferredGroup } from './glyph';
import { WebGlObjectAttributeType } from '../object/object';
import { ObjectGroupBuilder } from '../object/object_group_builder';
import { ObjectGroupBuilder, VERTEX_QUAD_POSITION } from '../object/object_group_builder';
import { GlyphsManager } from '../../../../glyphs/glyphs_manager';
import { MapFeatureFlags } from '../../../../flags';
import { createdSharedArrayBuffer } from '../../utils/array_buffer';
import { integerToVector4 } from '../../utils/number2vec';
import { addXTimes } from '../../utils/array_utils';

const TRANSPARENT_COLOR = [0, 0, 0, 0];

Expand Down Expand Up @@ -37,9 +38,10 @@ export class GlyphGroupBuilder extends ObjectGroupBuilder<GlyphMapFeature, WebGl

const size = filteredGlyphs.length;

const verteciesBuffer = [];
const texcoordBuffer = [];
const colorBuffer = [];
const verteciesBuffer: number[] = [];
const texcoordBuffer: number[] = [];
const colorBuffer: number[] = [];
const glyphProperties: number[] = [];
const selectionColorBuffer: number[] = [];

for (const glyph of filteredGlyphs) {
Expand All @@ -49,57 +51,65 @@ export class GlyphGroupBuilder extends ObjectGroupBuilder<GlyphMapFeature, WebGl

const textureWidth = textureAtlas.width;
const textureHeight = textureAtlas.height;
const glyphScaledWidth = glyphMapping.width / glyphMapping.pixelRatio / distance;
const glyphScaledHeight = glyphMapping.height / glyphMapping.pixelRatio / distance;
const glyphScaledWidth = glyphMapping.width / glyphMapping.pixelRatio;
const glyphScaledHeight = glyphMapping.height / glyphMapping.pixelRatio;

let [x1, y1] = [glyph.center[0], glyph.center[1]];
x1 = x1 - glyphScaledWidth / 2;
y1 = y1 - glyphScaledHeight / 2;
const x2 = x1 + glyphScaledWidth;
const y2 = y1 + glyphScaledHeight;
const [x1, y1] = [glyph.center[0], glyph.center[1]];

const u1 = glyphMapping.x / textureWidth;
const v1 = glyphMapping.y / textureHeight;
const u2 = (glyphMapping.x + glyphMapping.width) / textureWidth;
const v2 = (glyphMapping.y + glyphMapping.height) / textureHeight;

// first triangle
verteciesBuffer.push(x1, y1, x2, y1, x1, y2);
texcoordBuffer.push(u1, v1, u2, v1, u1, v2);

// second triangle
verteciesBuffer.push(x1, y2, x2, y1, x2, y2);
texcoordBuffer.push(u1, v2, u2, v1, u2, v2);

colorBuffer.push(
...TRANSPARENT_COLOR,
...TRANSPARENT_COLOR,
...TRANSPARENT_COLOR,
...TRANSPARENT_COLOR,
...TRANSPARENT_COLOR,
...TRANSPARENT_COLOR,
verteciesBuffer.push(
x1,
y1,
VERTEX_QUAD_POSITION.TOP_LEFT,
x1,
y1,
VERTEX_QUAD_POSITION.TOP_RIGHT,
x1,
y1,
VERTEX_QUAD_POSITION.BOTTOM_LEFT,
x1,
y1,
VERTEX_QUAD_POSITION.BOTTOM_LEFT,
x1,
y1,
VERTEX_QUAD_POSITION.TOP_RIGHT,
x1,
y1,
VERTEX_QUAD_POSITION.BOTTOM_RIGHT,
);
selectionColorBuffer.push(...colorId, ...colorId, ...colorId, ...colorId, ...colorId, ...colorId);
texcoordBuffer.push(u1, v1, u2, v1, u1, v2, u1, v2, u2, v1, u2, v2);

addXTimes(glyphProperties, [glyphScaledWidth, glyphScaledHeight], 6);
addXTimes(colorBuffer, TRANSPARENT_COLOR, 6);
addXTimes(selectionColorBuffer, colorId, 6);
}

return {
type: MapFeatureType.glyph,
name,
zIndex,
size,
numElements: verteciesBuffer.length / 2,
numElements: verteciesBuffer.length / 3,
atlas: textureAtlasName,
vertecies: {
type: WebGlObjectAttributeType.FLOAT,
size: 2,
size: 3,
buffer: createdSharedArrayBuffer(verteciesBuffer),
},
textcoords: {
type: WebGlObjectAttributeType.FLOAT,
size: 2,
buffer: createdSharedArrayBuffer(texcoordBuffer),
},

glyphProperties: {
type: WebGlObjectAttributeType.FLOAT,
size: 2,
buffer: createdSharedArrayBuffer(glyphProperties),
},
color: {
type: WebGlObjectAttributeType.FLOAT,
size: 4,
Expand Down
5 changes: 4 additions & 1 deletion src/map/renderer/webgl/objects/glyph/glyph_program.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export class GlyphProgram extends ObjectProgram {

protected textcoordBuffer: WebGlBuffer;
protected colorBuffer: WebGlBuffer;
protected glyphPropertiesBuffer: WebGlBuffer;

constructor(
protected readonly gl: ExtendedWebGLRenderingContext,
Expand Down Expand Up @@ -68,9 +69,10 @@ export class GlyphProgram extends ObjectProgram {

gl.bindVertexArray(this.vao);

this.positionBuffer = createWebGlBuffer(this.gl, { location: 0, size: 2 });
this.positionBuffer = createWebGlBuffer(this.gl, { location: 0, size: 3 });
this.textcoordBuffer = createWebGlBuffer(this.gl, { location: 1, size: 2 });
this.colorBuffer = createWebGlBuffer(this.gl, { location: 2, size: 4 });
this.glyphPropertiesBuffer = createWebGlBuffer(this.gl, { location: 3, size: 2 });

gl.bindVertexArray(null);
}
Expand All @@ -97,6 +99,7 @@ export class GlyphProgram extends ObjectProgram {
this.currentAtlasTexture?.bind();
this.positionBuffer.bufferData(objectGroup.vertecies.buffer);
this.textcoordBuffer.bufferData(objectGroup.textcoords.buffer);
this.glyphPropertiesBuffer.bufferData(objectGroup.glyphProperties.buffer);
this.colorBuffer.bufferData(
options?.readPixelRenderMode ? objectGroup.selectionColor.buffer : objectGroup.color.buffer,
);
Expand Down
34 changes: 32 additions & 2 deletions src/map/renderer/webgl/objects/glyph/glyph_shaders.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import { FEATURE_FLAGS_UTILS, CLIP_UTILS, MAT_UTILS } from '../object/object_sha
export default {
vertext: `
precision highp float;
#define VERTEX_QUAD_ALIGNMENT_TOP_LEFT 0.0
#define VERTEX_QUAD_ALIGNMENT_TOP_RIGHT 1.0
#define VERTEX_QUAD_ALIGNMENT_BOTTOM_LEFT 2.0
#define VERTEX_QUAD_ALIGNMENT_BOTTOM_RIGHT 3.0
${CLIP_UTILS}
${MAT_UTILS}
${FEATURE_FLAGS_UTILS}
Expand All @@ -12,9 +17,10 @@ export default {
uniform float u_height;
uniform float u_distance;
attribute vec2 a_position;
attribute vec3 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
attribute vec2 a_glyph_properties;
varying vec2 v_texCoord;
varying vec4 v_color;
Expand All @@ -23,7 +29,31 @@ export default {
v_texCoord = a_texCoord;
v_color = a_color;
gl_Position = vec4(applyMatrix(u_matrix, clipSpace(a_position)), 0, 1);
float width = a_glyph_properties[0];
float height = a_glyph_properties[1];
width /= u_distance;
height /= u_distance;
float x = a_position.x;
float y = a_position.y;
float alignment = a_position.z;
if (alignment == VERTEX_QUAD_ALIGNMENT_TOP_LEFT) {
x -= width / 2.0;
y -= height / 2.0;
} else if (alignment == VERTEX_QUAD_ALIGNMENT_TOP_RIGHT) {
x += width / 2.0;
y -= height / 2.0;
} else if (alignment == VERTEX_QUAD_ALIGNMENT_BOTTOM_LEFT) {
x -= width / 2.0;
y += height / 2.0;
} else if (alignment == VERTEX_QUAD_ALIGNMENT_BOTTOM_RIGHT) {
x += width / 2.0;
y += height / 2.0;
}
gl_Position = vec4(applyMatrix(u_matrix, clipSpace(vec2(x, y))), 0, 1);
}
`,
fragment: `
Expand Down
5 changes: 5 additions & 0 deletions src/map/renderer/webgl/objects/image/image_shader.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import { FEATURE_FLAGS_UTILS, CLIP_UTILS, MAT_UTILS } from '../object/object_sha
export default {
vertext: `
precision highp float;
#define VERTEX_ALIGNMENT_TOP_LEFT 0.0
#define VERTEX_ALIGNMENT_TOP_RIGHT 1.0
#define VERTEX_ALIGNMENT_BOTTOM_LEFT 2.0
#define VERTEX_ALIGNMENT_BOTTOM_RIGHT 3.0
${CLIP_UTILS}
${MAT_UTILS}
${FEATURE_FLAGS_UTILS}
Expand Down
7 changes: 7 additions & 0 deletions src/map/renderer/webgl/objects/object/object_group_builder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,13 @@ import { MapFeature } from '../../../../tile/feature';
import { WebGlObjectBufferredGroup } from './object';
import { MapFeatureFlags } from '../../../../flags';

export enum VERTEX_QUAD_POSITION {
TOP_LEFT = 0,
TOP_RIGHT = 1,
BOTTOM_LEFT = 2,
BOTTOM_RIGHT = 3,
}

export abstract class ObjectGroupBuilder<
InputObjectType extends MapFeature,
OutputObjectType extends WebGlObjectBufferredGroup,
Expand Down
21 changes: 7 additions & 14 deletions src/map/renderer/webgl/objects/text_texture/text_texture_builder.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { MapFeatureType, TextMapFeature } from '../../../../tile/feature';
import { WebGlTextTextureBufferredGroup } from './text_texture';
import { WebGlObjectAttributeType } from '../object/object';
import { ObjectGroupBuilder } from '../object/object_group_builder';
import { ObjectGroupBuilder, VERTEX_QUAD_POSITION } from '../object/object_group_builder';
import { createdSharedArrayBuffer } from '../../utils/array_buffer';
import { integerToVector4 } from '../../utils/number2vec';
import { MapFeatureFlags } from '../../../../flags';
Expand All @@ -16,13 +16,6 @@ import {
} from '../../../../font/font_config';
import { addXTimes } from '../../utils/array_utils';

enum VERTEX_POSITION {
TOP_LEFT = 0,
TOP_RIGHT = 1,
BOTTOM_LEFT = 2,
BOTTOM_RIGHT = 3,
}

export interface GlyphMapping {
glyph: TextureFontGlyph | SdfFontGlyph;
font: string;
Expand Down Expand Up @@ -84,22 +77,22 @@ export class TextTextureGroupBuilder extends ObjectGroupBuilder<TextMapFeature,
verteciesBuffer.push(
x1,
y1,
VERTEX_POSITION.TOP_LEFT,
VERTEX_QUAD_POSITION.TOP_LEFT,
x1,
y1,
VERTEX_POSITION.TOP_RIGHT,
VERTEX_QUAD_POSITION.TOP_RIGHT,
x1,
y1,
VERTEX_POSITION.BOTTOM_LEFT,
VERTEX_QUAD_POSITION.BOTTOM_LEFT,
x1,
y1,
VERTEX_POSITION.BOTTOM_LEFT,
VERTEX_QUAD_POSITION.BOTTOM_LEFT,
x1,
y1,
VERTEX_POSITION.TOP_RIGHT,
VERTEX_QUAD_POSITION.TOP_RIGHT,
x1,
y1,
VERTEX_POSITION.BOTTOM_RIGHT,
VERTEX_QUAD_POSITION.BOTTOM_RIGHT,
);
texcoordBuffer.push(u1, v1, u2, v1, u1, v2, u1, v2, u2, v1, u2, v2);

Expand Down
15 changes: 7 additions & 8 deletions src/map/renderer/webgl/objects/text_texture/text_texture_shaders.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,10 @@ import { FEATURE_FLAGS_UTILS, CLIP_UTILS, MAT_UTILS } from '../object/object_sha
export default {
vertext: `
precision highp float;
#define VERTEX_ALIGNMENT_TOP_LEFT 0.0
#define VERTEX_ALIGNMENT_TOP_RIGHT 1.0
#define VERTEX_ALIGNMENT_BOTTOM_LEFT 2.0
#define VERTEX_ALIGNMENT_BOTTOM_RIGHT 3.0
#define VERTEX_QUAD_ALIGNMENT_TOP_LEFT 0.0
#define VERTEX_QUAD_ALIGNMENT_TOP_RIGHT 1.0
#define VERTEX_QUAD_ALIGNMENT_BOTTOM_LEFT 2.0
#define VERTEX_QUAD_ALIGNMENT_BOTTOM_RIGHT 3.0
${CLIP_UTILS}
${MAT_UTILS}
Expand Down Expand Up @@ -44,11 +43,11 @@ export default {
float y = a_position.y - ascend;
float alignment = a_position.z;
if (alignment == VERTEX_ALIGNMENT_TOP_RIGHT) {
if (alignment == VERTEX_QUAD_ALIGNMENT_TOP_RIGHT) {
x += width;
} else if (alignment == VERTEX_ALIGNMENT_BOTTOM_LEFT) {
} else if (alignment == VERTEX_QUAD_ALIGNMENT_BOTTOM_LEFT) {
y += height;
} else if (alignment == VERTEX_ALIGNMENT_BOTTOM_RIGHT) {
} else if (alignment == VERTEX_QUAD_ALIGNMENT_BOTTOM_RIGHT) {
x += width;
y += height;
}
Expand Down

0 comments on commit 80ad6ec

Please sign in to comment.