feat: add configurable ambient lighting option

src/index.d.ts

@@ -25,6 +25,7 @@ export interface COBEOptions {
   opacity?: number;
   offset?: [number, number];
   scale?: number;
+  ambient?: number;
   context?: WebGLContextAttributes;
 }
 

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_AMBIENT = "ambient";
 
 const OPT_MAPPING = {
     [OPT_PHI]: GLSLX_NAME_PHI,
@@ -30,6 +31,7 @@ const OPT_MAPPING = {
     [OPT_SCALE]: GLSLX_NAME_SCALE,
     [OPT_OPACITY]: GLSLX_NAME_OPACITY,
     [OPT_MAP_BASE_BRIGHTNESS]: GLSLX_NAME_MAP_BASE_BRIGHTNESS,
+    [OPT_AMBIENT]: GLSLX_NAME_AMBIENT,
 };
 
 const { PI, sin, cos, sqrt, atan2, floor, max, pow, log2 } = Math;
@@ -192,6 +194,7 @@ export default (canvas, opts) => {
             [GLSLX_NAME_OFFSET]: createUniform("vec2", OPT_OFFSET, [0, 0]),
             [GLSLX_NAME_SCALE]: createUniform("float", OPT_SCALE, 1),
             [GLSLX_NAME_OPACITY]: createUniform("float", OPT_OPACITY, 1),
+            [GLSLX_NAME_AMBIENT]: createUniform("float", OPT_AMBIENT, 0.1),
         },
         mode: 4,
         geometry: {

src/shader.frag

@@ -16,8 +16,9 @@ uniform float markersNum;
 uniform float dotsBrightness;
 uniform float diffuse;
 uniform float dark;
-uniform float opacity; 
+uniform float opacity;
 uniform float mapBaseBrightness;
+uniform float ambient;
 
 uniform sampler2D uTexture;
 
@@ -164,7 +165,7 @@ void main() {
 
     float lighting = pow(dotNL,diffuse)*dotsBrightness;
     float sample = mapColor*v * lighting;
-    float colorFactor = mix((1. - sample) * pow(dotNL,.4), sample, dark) + .1;
+    float colorFactor = mix((1. - sample) * pow(dotNL,.4), sample, dark) + ambient;
     layer += vec4(baseColor * colorFactor, 1.);
 
     float markerLight = 0.;

website/pages/docs/api.mdx

@@ -25,6 +25,7 @@ An object with the following properties:
 | theta | The [θ angle](https://en.wikipedia.org/wiki/Spherical_coordinate_system), -π ≤ theta ≤ π | Required |
 | dark | Display the globe in dark or light mode, 0 ≤ dark ≤ 1 | Required |
 | diffuse | Control the [diffuse lighting](https://en.wikipedia.org/wiki/Computer_graphics_lighting#:~:text=of%20lighting%20interactions.-,Diffuse,the%20angle%20of%20incoming%20light.), 0 ≤ diffuse | Required |
+| ambient | The ambient light intensity, 0 ≤ ambient ≤ 1 | |
 | mapSamples | Number of dots displayed, 0 ≤ mapSamples ≤ 100000 | Required |
 | mapBrightness | Brightness of the dots, 0 ≤ mapBrightness | Required |
 | mapBaseBrightness | Brightness of samples that are not on the map, 0 ≤ mapBaseBrightness | |

website/pages/docs/index.mdx

@@ -1,6 +1,6 @@
 # Get Started
 
-COBE does’t rely on any external libraries or UI framework. It is a vanilla JavaScript library that can be used in any web applications. 
+COBE does’t rely on any external libraries or UI framework. It is a vanilla JavaScript library that can be used in any web applications.
 
 The easiest way to use this library is to create a canvas element and use a CDN to import the library:
 
@@ -26,6 +26,7 @@ The easiest way to use this library is to create a canvas element and use a CDN
     theta: 0,
     dark: 0,
     diffuse: 1.2,
+    ambient: 0.1,
     scale: 1,
     mapSamples: 16000,
     mapBrightness: 6,
@@ -85,7 +86,7 @@ Example: [https://codesandbox.io/s/eager-sky-r2q0g](https://codesandbox.io/s/eag
 
 Example: [https://stackblitz.com/edit/vitejs-vite-l5a8xk](https://stackblitz.com/edit/vitejs-vite-l5a8xk?file=src%2FApp.vue).
 
-### Svelte 
+### Svelte
 
 Example: [https://codesandbox.io/s/great-visvesvaraya-78yf6](https://codesandbox.io/s/great-visvesvaraya-78yf6?file=/App.svelte).
 

website/pages/index.mdx

@@ -33,6 +33,7 @@ export function Cobe() {
       theta: 0.2,
       dark: 1.1,
       diffuse: 3,
+      ambient: 0.1,
       mapSamples: 16000,
       mapBrightness: 1.8,
       mapBaseBrightness: .05,

website/pages/playground.mdx

@@ -18,6 +18,7 @@ export function Page() {
     mapBrightness: { value: 6, min: 0, max: 12 },
     mapBaseBrightness: { value: 0, min: 0, max: 1 },
     diffuse: { value: 1.2, min: 0, max: 5 },
+    ambient: { value: 0.1, min: 0, max: 1 },
     dark: { value: 1, min: 0, max: 1 },
     baseColor: { r: 60, g: 60, b: 60 },
     markerColor: { r: 255, g: 255, b: 255 },
@@ -47,6 +48,7 @@ export function Page() {
       phi: 0,
       theta: 0,
       diffuse: 1.2,
+      ambient: 0.1,
       mapSamples: paramsRef.current.mapSamples,
       mapBrightness: paramsRef.current.mapBrightness,
       baseColor: [0.3, 0.3, 0.3],
@@ -81,6 +83,7 @@ export function Page() {
         state.mapBrightness = paramsRef.current.mapBrightness
         state.mapBaseBrightness = paramsRef.current.mapBaseBrightness
         state.diffuse = paramsRef.current.diffuse
+        state.ambient = paramsRef.current.ambient
         state.baseColor = [
           paramsRef.current.baseColor.r / 255,
           paramsRef.current.baseColor.g / 255,