From 350ef55d39e92ae28ba00566149d257de32b9ded Mon Sep 17 00:00:00 2001 From: Arno Fukuda Date: Mon, 15 Apr 2024 13:33:52 +0900 Subject: [PATCH 1/5] allow configuring maxMarkers --- src/index.d.ts | 1 + src/index.js | 9 +++++---- src/shader.frag | 4 ++-- website/pages/docs/api.mdx | 1 + 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/index.d.ts b/src/index.d.ts index a4062ea..76e2ed7 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -18,6 +18,7 @@ export interface COBEOptions { markerColor: [number, number, number] glowColor: [number, number, number] markers: Marker[] + maxMarkers?: number diffuse: number devicePixelRatio: number dark: number diff --git a/src/index.js b/src/index.js index 2408e7e..a5d85c2 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,7 @@ const OPT_OFFSET = 'offset' const OPT_SCALE = 'scale' const OPT_OPACITY = 'opacity' const OPT_MAP_BASE_BRIGHTNESS = 'mapBaseBrightness' +const OPT_MAX_MARKERS = 'maxMarkers' const OPT_MAPPING = { [OPT_PHI]: GLSLX_NAME_PHI, @@ -34,9 +35,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 +140,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] || 64), }, [GLSLX_NAME_MARKERS_NUM]: { type: 'float', @@ -170,7 +171,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] || 64) 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 | From 87b187beff203db70ffb4488db7dd64dfe6ae5c4 Mon Sep 17 00:00:00 2001 From: Arno Fukuda <133849024+arno-fukuda@users.noreply.github.com> Date: Tue, 24 Dec 2024 09:54:06 +0900 Subject: [PATCH 2/5] Update src/index.d.ts Co-authored-by: Shlomi Sela <33803648+KrenTrox@users.noreply.github.com> --- src/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.d.ts b/src/index.d.ts index 76e2ed7..daa992d 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -18,10 +18,10 @@ export interface COBEOptions { markerColor: [number, number, number] glowColor: [number, number, number] markers: Marker[] - maxMarkers?: number diffuse: number devicePixelRatio: number dark: number + maxMarkers?: number opacity?: number offset?: [number, number] scale?: number From 11be8e664c9aaa5161e53f50a394bfbb58e44fc2 Mon Sep 17 00:00:00 2001 From: Arno Fukuda <133849024+arno-fukuda@users.noreply.github.com> Date: Tue, 24 Dec 2024 10:00:22 +0900 Subject: [PATCH 3/5] const default max markers --- src/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index a5d85c2..8b48dbf 100644 --- a/src/index.js +++ b/src/index.js @@ -16,6 +16,7 @@ const OPT_SCALE = 'scale' const OPT_OPACITY = 'opacity' const OPT_MAP_BASE_BRIGHTNESS = 'mapBaseBrightness' const OPT_MAX_MARKERS = 'maxMarkers' +const defaultMaxMarkers = 64 const OPT_MAPPING = { [OPT_PHI]: GLSLX_NAME_PHI, @@ -140,7 +141,7 @@ export default (canvas, opts) => { [GLSLX_NAME_DARK]: createUniform('float', OPT_DARK), [GLSLX_NAME_MARKERS]: { type: 'vec4', - value: mapMarkers(opts[OPT_MARKERS], opts[OPT_MAX_MARKERS] || 64), + value: mapMarkers(opts[OPT_MARKERS], opts[OPT_MAX_MARKERS] || defaultMaxMarkers), }, [GLSLX_NAME_MARKERS_NUM]: { type: 'float', @@ -171,7 +172,7 @@ export default (canvas, opts) => { } } if (state[OPT_MARKERS] !== undefined) { - uniforms[GLSLX_NAME_MARKERS].value = mapMarkers(state[OPT_MARKERS], opts[OPT_MAX_MARKERS] || 64) + uniforms[GLSLX_NAME_MARKERS].value = mapMarkers(state[OPT_MARKERS], opts[OPT_MAX_MARKERS] || defaultMaxMarkers) uniforms[GLSLX_NAME_MARKERS_NUM].value = state[OPT_MARKERS].length } if (state.width && state.height) { From 2094a932ba53874070ceb36279e07a8a2177b477 Mon Sep 17 00:00:00 2001 From: Arno Fukuda <133849024+arno-fukuda@users.noreply.github.com> Date: Tue, 24 Dec 2024 23:56:35 +0900 Subject: [PATCH 4/5] Update src/index.js Co-authored-by: Shlomi Sela <33803648+KrenTrox@users.noreply.github.com> --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 8b48dbf..88ff63d 100644 --- a/src/index.js +++ b/src/index.js @@ -16,7 +16,7 @@ const OPT_SCALE = 'scale' const OPT_OPACITY = 'opacity' const OPT_MAP_BASE_BRIGHTNESS = 'mapBaseBrightness' const OPT_MAX_MARKERS = 'maxMarkers' -const defaultMaxMarkers = 64 +const DEFAULT_MAX_MARKERS = 64 const OPT_MAPPING = { [OPT_PHI]: GLSLX_NAME_PHI, From 907f1577f5ef9ad1815e3b77fef7b89a5725f526 Mon Sep 17 00:00:00 2001 From: Arno Fukuda <133849024+arno-fukuda@users.noreply.github.com> Date: Tue, 24 Dec 2024 23:57:13 +0900 Subject: [PATCH 5/5] Update index.js --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 88ff63d..47b846c 100644 --- a/src/index.js +++ b/src/index.js @@ -141,7 +141,7 @@ export default (canvas, opts) => { [GLSLX_NAME_DARK]: createUniform('float', OPT_DARK), [GLSLX_NAME_MARKERS]: { type: 'vec4', - value: mapMarkers(opts[OPT_MARKERS], opts[OPT_MAX_MARKERS] || defaultMaxMarkers), + value: mapMarkers(opts[OPT_MARKERS], opts[OPT_MAX_MARKERS] || DEFAULT_MAX_MARKERS), }, [GLSLX_NAME_MARKERS_NUM]: { type: 'float', @@ -172,7 +172,7 @@ export default (canvas, opts) => { } } if (state[OPT_MARKERS] !== undefined) { - uniforms[GLSLX_NAME_MARKERS].value = mapMarkers(state[OPT_MARKERS], opts[OPT_MAX_MARKERS] || defaultMaxMarkers) + 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) {