Transparency and base texture

.gitignore

@@ -1,4 +1,5 @@
 dist
 node_modules
 .DS_Store
-.next
+.next
+.pnpm-debug.log

package.json

@@ -10,14 +10,16 @@
   "repository": "shuding/cobe",
   "license": "MIT",
   "scripts": {
+    "build:glslx": "glslx src/shader.frag --output=src/shader.min.js --format=js",
     "build:esm": "node scripts/build.js && cp src/index.d.ts dist/index.d.ts",
-    "build": "pnpm build:esm"
+    "build": "pnpm build:glslx && pnpm build:esm"
   },
   "dependencies": {
     "phenomenon": "^1.6.0"
   },
   "devDependencies": {
     "esbuild": "^0.13.14",
+    "glslx": "^0.2.13",
     "next": "^12.2.4",
     "nextra": "2.0.0-alpha.50",
     "nextra-theme-docs": "2.0.0-alpha.53",

src/index.js

@@ -13,6 +13,8 @@ const OPT_DPR = 'devicePixelRatio'
 const OPT_DARK = 'dark'
 const OPT_OFFSET = 'offset'
 const OPT_SCALE = 'scale'
+const OPT_OPACITY = 'opacity'
+const OPT_MAP_BASE_BRIGHTNESS = 'mapBaseBrightness'
 
 const OPT_MAPPING = {
   [OPT_PHI]: GLSLX_NAME_PHI,
@@ -26,6 +28,8 @@ const OPT_MAPPING = {
   [OPT_DARK]: GLSLX_NAME_DARK,
   [OPT_OFFSET]: GLSLX_NAME_OFFSET,
   [OPT_SCALE]: GLSLX_NAME_SCALE,
+  [OPT_OPACITY]: GLSLX_NAME_OPACITY,
+  [OPT_MAP_BASE_BRIGHTNESS]: GLSLX_NAME_MAP_BASE_BRIGHTNESS,
 }
 
 const { PI, sin, cos } = Math
@@ -53,7 +57,9 @@ export default (canvas, opts) => {
   }
 
   // See https://github.com/shuding/cobe/pull/34.
-  const contextType = canvas.getContext('webgl') ? 'webgl' : 'experimental-webgl'
+  const contextType = canvas.getContext('webgl')
+    ? 'webgl'
+    : 'experimental-webgl'
 
   const p = new Phenomenon({
     canvas,
@@ -119,6 +125,10 @@ export default (canvas, opts) => {
       [GLSLX_NAME_THETA]: createUniform('float', OPT_THETA),
       [GLSLX_NAME_DOTS]: createUniform('float', OPT_DOTS),
       [GLSLX_NAME_DOTS_BRIGHTNESS]: createUniform('float', OPT_MAP_BRIGHTNESS),
+      [GLSLX_NAME_MAP_BASE_BRIGHTNESS]: createUniform(
+        'float',
+        OPT_MAP_BASE_BRIGHTNESS
+      ),
       [GLSLX_NAME_BASE_COLOR]: createUniform('vec3', OPT_BASE_COLOR),
       [GLSLX_NAME_MARKER_COLOR]: createUniform('vec3', OPT_MARKER_COLOR),
       [GLSLX_NAME_DIFFUSE]: createUniform('float', OPT_DIFFUSE),
@@ -134,6 +144,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),
     },
     mode: 4,
     geometry: {

src/shader.frag

@@ -16,6 +16,8 @@ uniform float markersNum;
 uniform float dotsBrightness;
 uniform float diffuse;
 uniform float dark;
+uniform float opacity;
+uniform float mapBaseBrightness;
 
 uniform sampler2D uTexture;
 
@@ -40,6 +42,7 @@ const float twoPiOnPhi = 3.8832220774509327;
 const float phiMinusOne = .618033988749895;
 const float r = .8;
 const float by2P32 = 2.3283064365386963e-10;
+const vec3 CAM = vec3(0.,0.,1.);
 
 float byDots = 1./dots;
 
@@ -135,47 +138,59 @@ void main() {
   uv.x *= uResolution.x / uResolution.y;
 
   float l = dot(uv, uv);
-  float dis;
+  vec4 color = vec4(0.);
 
-  // vec3 light=normalize(vec3(0.,-.1,1.));
-  vec3 light=(vec3(0.,0.,1.));
-  vec3 p = normalize(vec3(uv, sqrt(r*r - l)));
   if (l <= r * r) {
-    vec3 rP = p * rotate(theta, phi);
-
-    float diff = -kTau * dots / kPhi;
-
-    vec3 gP = nearestFibonacciLattice(rP, dis);
-
-    float gPhi = asin(gP.y);
-    float gTheta = acos(-gP.x / cos(gPhi));
-    if (gP.z < 0.) gTheta = -gTheta;
-
-    float mapColor = texture2D(uTexture, vec2(((gTheta * .5) / PI), -(gPhi / PI + .5))).x;
-    float v = smoothstep(.008, .0, dis);
-    float dotNL = dot(p,light);
-    float lighting = pow(dotNL,diffuse)*dotsBrightness;
-    float sample = mapColor*v * lighting;
-    float colorFactor = mix((1. - sample) * pow(dotNL,.4), sample, dark) + .1;
-    gl_FragColor = vec4(baseColor*colorFactor,1.);
-
-    int num = int(markersNum);
-    float markerLight = 0.;
-    for (int m = 0; m < 64; m++) {
-      if (m >= num) break;
-      vec4 marker = markers[m];
-      vec3 c = marker.xyz;
-      vec3 l = c - rP;
-      float size = marker.w;
-      if (dot(l,l) > size * size * 4.) continue;
-      vec3 mP = nearestFibonacciLattice(c, dis);
-      dis = length(mP - rP);
-      if (dis < size) { markerLight += smoothstep(size*.5,0.,dis); }
+    for (int side = 0; side <= 1; side++) {
+      vec4 layer = vec4(0.);
+      float dis;
+
+      vec3 light = vec3(0.,0.,1.);
+      vec3 p = normalize(vec3(uv, sqrt(r*r - l)));
+
+      p.z *= side > 0 ? -1. : 1.;
+      light.z *= side > 0 ? -1. : 1.;
+
+      vec3 rP = p * rotate(theta, phi);
+
+      float diff = -kTau * dots / kPhi;
+
+      vec3 gP = nearestFibonacciLattice(rP, dis);
+
+      float gPhi = asin(gP.y);
+      float gTheta = acos(-gP.x / cos(gPhi));
+      if (gP.z < 0.) gTheta = -gTheta;
+
+      float mapColor = max(texture2D(uTexture, vec2(((gTheta * .5) / PI), -(gPhi / PI + .5))).x, mapBaseBrightness);
+      float v = smoothstep(.008, .0, dis);
+
+      float dotNL = dot(p, light);
+      float lighting = pow(dotNL,diffuse)*dotsBrightness;
+      float sample = mapColor*v * lighting;
+      float colorFactor = mix((1. - sample) * pow(dotNL,.4), sample, dark) + .1;
+      layer += vec4(baseColor * colorFactor, 1.);
+
+      int num = int(markersNum);
+      float markerLight = 0.;
+      for (int m = 0; m < 64; m++) {
+        if (m >= num) break;
+        vec4 marker = markers[m];
+        vec3 c = marker.xyz;
+        vec3 l = c - rP;
+        float size = marker.w;
+        if (dot(l,l) > size * size * 4.) continue;
+        vec3 mP = nearestFibonacciLattice(c, dis);
+        dis = length(mP - rP);
+        if (dis < size) { markerLight += smoothstep(size*.5,0.,dis); }
+      }
+      markerLight = min(1., markerLight * lighting);
+      layer.xyz = mix(layer.xyz, markerColor, markerLight);
+      layer.xyz += pow(1. - dotNL, 4.) * glowColor;
+
+      color += layer * (1. + (side > 0 ? -opacity : opacity)) / 2.;
     }
-    markerLight = min(1.,markerLight*lighting);
-    gl_FragColor.xyz = mix(gl_FragColor.xyz,markerColor,markerLight);
-    gl_FragColor.xyz += pow(1.-dot(p,light),4.)*glowColor;
   }
-  float glowFactor = pow(dot(normalize(vec3(-uv, sqrt(1.- l))),light),4.)*smoothstep(0.1,1.,.2/(l-r*r));
-  gl_FragColor += vec4(glowFactor*glowColor,glowFactor);
+
+  float glowFactor = pow(dot(normalize(vec3(-uv, sqrt(1.- l))), CAM), 4.) * smoothstep(0.1,1.,.2/(l-r*r));
+  gl_FragColor = color + vec4(glowFactor * glowColor, glowFactor);
 }

website/pages/index.mdx

@@ -30,15 +30,17 @@ export function Cobe() {
       width: width * 2,
       height: width * 2,
       phi: 0,
-      theta: 0.3,
+      theta: 0.2,
       dark: 1,
       diffuse: 3,
       mapSamples: 16000,
-      mapBrightness: 1.2,
-      baseColor: [1, 1, 1],
+      mapBrightness: 1.8,
+      // mapBaseBrightness: .05,
+      baseColor: [1, 1.1, 1.2],
       markerColor: [251 / 255, 100 / 255, 21 / 255],
-      glowColor: [1.2, 1.2, 1.2],
+      glowColor: [2., 2.1, 2.2],
       markers: [],
+      // opacity: .6,
       onRender: (state) => {
         // Called on every animation frame.
         // `state` will be an empty object, return updated params.