diff --git a/src/index.d.ts b/src/index.d.ts index a4062ea..daa992d 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -21,6 +21,7 @@ export interface COBEOptions { diffuse: number devicePixelRatio: number dark: number + maxMarkers?: number opacity?: number offset?: [number, number] scale?: number diff --git a/src/index.js b/src/index.js index 2408e7e..47b846c 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,8 @@ const OPT_OFFSET = 'offset' const OPT_SCALE = 'scale' const OPT_OPACITY = 'opacity' const OPT_MAP_BASE_BRIGHTNESS = 'mapBaseBrightness' +const OPT_MAX_MARKERS = 'maxMarkers' +const DEFAULT_MAX_MARKERS = 64 const OPT_MAPPING = { [OPT_PHI]: GLSLX_NAME_PHI, @@ -34,9 +36,9 @@ const OPT_MAPPING = { const { PI, sin, cos } = Math -const mapMarkers = (markers) => { +const mapMarkers = (markers, maxMarkers) => { return [].concat( - ...markers.map((m) => { + ...markers.slice(0, maxMarkers).map((m) => { let [a, b] = m.location a = (a * PI) / 180 b = (b * PI) / 180 - PI @@ -139,7 +141,7 @@ export default (canvas, opts) => { [GLSLX_NAME_DARK]: createUniform('float', OPT_DARK), [GLSLX_NAME_MARKERS]: { type: 'vec4', - value: mapMarkers(opts[OPT_MARKERS]), + value: mapMarkers(opts[OPT_MARKERS], opts[OPT_MAX_MARKERS] || DEFAULT_MAX_MARKERS), }, [GLSLX_NAME_MARKERS_NUM]: { type: 'float', @@ -170,7 +172,7 @@ export default (canvas, opts) => { } } if (state[OPT_MARKERS] !== undefined) { - uniforms[GLSLX_NAME_MARKERS].value = mapMarkers(state[OPT_MARKERS]) + uniforms[GLSLX_NAME_MARKERS].value = mapMarkers(state[OPT_MARKERS], opts[OPT_MAX_MARKERS] || DEFAULT_MAX_MARKERS) uniforms[GLSLX_NAME_MARKERS_NUM].value = state[OPT_MARKERS].length } if (state.width && state.height) { diff --git a/src/shader.frag b/src/shader.frag index 0d8589b..76e1842 100644 --- a/src/shader.frag +++ b/src/shader.frag @@ -11,7 +11,7 @@ uniform float scale; uniform vec3 baseColor; uniform vec3 markerColor; uniform vec3 glowColor; -uniform vec4 markers[64]; +uniform vec4 markers[300]; uniform float markersNum; uniform float dotsBrightness; uniform float diffuse; @@ -172,7 +172,7 @@ void main() { int num = int(markersNum); float markerLight = 0.; - for (int m = 0; m < 64; m++) { + for (int m = 0; m < 300; m++) { if (m >= num) break; vec4 marker = markers[m]; vec3 c = marker.xyz; diff --git a/website/pages/docs/api.mdx b/website/pages/docs/api.mdx index 4242d9f..635e2f8 100644 --- a/website/pages/docs/api.mdx +++ b/website/pages/docs/api.mdx @@ -34,6 +34,7 @@ An object with the following properties: | scale | Scales the globe, 0 ≤ scale | | | offset | [offsetX, offsetY], offset of the globe in pixel | | | markers | An array of markers displayed | | +| maxMarkers | Control the max amount of markers on the globe (0-300), defaults to 64 | | | opacity | The transparency of the globe texture | | | onRender | A callback function called when a new frame is rendered | Required |