shaders.ts

// Switch from geometric --> semantic zoom at this size.
const MAX_DISPLAY_SIZE = 50;

// Min picking point size, to produce "envelope" around small points.
const MIN_PICKING_SIZE = 10;

// Above this size, add a border to the point.
const BORDER_THRESHOLD_SIZE = 30;


export const GET_POINT_SIZE = `
float get_point_size(float size, float z) {
  return min(size * (100.0 / -z), ${MAX_DISPLAY_SIZE}.0);
}`;


export const DISPLAY_VERTEX_SHADER = `
uniform float pixelRatio;
attribute float size;
attribute vec3 displayColor;
varying float vPointSize;
varying vec3 vDisplayColor;

${GET_POINT_SIZE}

void main() {

  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
  gl_Position = projectionMatrix * mvPosition;
  gl_PointSize = get_point_size(size, mvPosition.z) * pixelRatio;

  vPointSize = gl_PointSize;
  vDisplayColor = displayColor;

}`;


export const DISPLAY_FRAGMENT_SHADER = `
uniform sampler2D texture;
varying float vPointSize;
varying vec3 vDisplayColor;

void main() {

  if (vPointSize > ${BORDER_THRESHOLD_SIZE}.0) {
    vec4 pixel = texture2D(texture, gl_PointCoord);
    gl_FragColor = pixel * vec4(vDisplayColor.xyz, 1.0);
  }

  else {
    vec2 cxy = 2.0 * gl_PointCoord - 1.0;
    float r = dot(cxy, cxy);
    if (r > 1.0) discard;
    gl_FragColor = vec4(vDisplayColor.xyz, 1.0);
  }

}`;