D3OG

All examples By author By category About

Fil

Full window Github gist

Mars on a WebGL globe

Preparatory work for Missions to Mars.

Problems solved:

-- invert geoOrthographic (instead of geoStereographic).

-- what to do for pixels outside the globe

-- white artifacts on the boundary of the jpg image (they were on the original image!)

-- upgrade to d3 v4.

-- made sure the image's center has lonlat = [0,0]

-- got rid of the pesky dot in the center on iPhone (reported by Harry Stevens)

Forked from @mbostock's Milky Way block. License GPL-3.

Image: USGS.

<!DOCTYPE html>
<meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>

<!--

*Note to self: do not edit this block on blockbuilder*

-->

<style>

body {
  margin: 0;
  overflow: hidden;
  background: black;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}

canvas {
  cursor: move;
}

svg, canvas {
  position:absolute;
  top:0;
}

.missions path { fill: white }

.polygons path {
  fill: rgba(0,0,0,0.001); /* to receive mouseover events */
  stroke: rgba(200,255,220,0.1);
  stroke-width: 1.5;
}

.links path {
  fill: none;
  stroke: rgba(180,90,90,0.9);
  stroke-width: 3;
}

path.glow {
  fill: none;
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1;
}

</style>
<canvas></canvas>
<svg>
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:black;stop-opacity:0" />
            <stop offset="94%" style="stop-color:black;stop-opacity:0.01" />
            <stop offset="97%" style="stop-color:black;stop-opacity:0.2" />
            <stop offset="110%" style="stop-color:black;stop-opacity:0.6" />
        </radialGradient>
    </defs>
</svg>

attribute vec2 a_position;

void main(void) {
  gl_Position = vec4(a_position, 0.0, 1.0);
}

</script>
<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

uniform sampler2D u_image;
uniform vec2 u_translate;  /*  width/2, height/2 */
uniform float u_scale;  /* in pixels ! */
uniform vec3 u_rotate;  /* rotation in degrees ! */

const float c_pi = 3.14159265358979323846264;
const float c_halfPi = c_pi * 0.5;
const float c_twoPi = c_pi * 2.0;

// Inclination of the equator on Mars = 25.19°  (earth= 23.44)
const float declination = 25.19  / 90.0 * c_halfPi;

float phi0 = -u_rotate.y / 90.0 * c_halfPi;

float cosphi0 = cos(phi0);
float sinphi0 = sin(phi0);

void main(void) {
  float x = (gl_FragCoord.x - u_translate.x) / u_scale;
  float y = (u_translate.y - gl_FragCoord.y) / u_scale;

// inverse orthographic projection
  float rho = sqrt(x * x + y * y);

// color if the point (px, py) does not exist in the texture
  if (rho >= 1.0) {
      gl_FragColor = texture2D(u_image, vec2(0.0, 0.0));
      gl_FragColor[0] = 0.1*(rho-1.0+0.1);
      gl_FragColor[1] = 0.06*(rho-1.0+0.1);
      gl_FragColor[2] = 0.2*(rho-1.0+0.1);
  }
  
  
  else {

float cosc = cos(asin(rho));
  float lambda = atan(x, cosc);
  float phi = asin(y);

// inverse rotation
  float cosphi = cos(phi);
  float x0 = cos(lambda) * cosphi;
  float y0 = sin(lambda) * cosphi;
  float cosgamma = cos(u_rotate.z / 90.0 * c_halfPi);
  float singamma = sin(u_rotate.z / 90.0 * c_halfPi);
  float x1 = x0 * cosgamma - y0 * singamma;
  float y1 = y0 * cosgamma + x0 * singamma;
  float z1 = y;
  lambda = atan(y1, x1 * cosphi0 + z1 * sinphi0) - u_rotate.x / 90.0 * c_halfPi;
  phi = asin(z1 * cosphi0 - x1 * sinphi0);
  
  // pixels
  float px = (lambda + c_pi) / c_twoPi;
  float py = (phi + c_halfPi) / c_pi;
  
  gl_FragColor = texture2D(u_image, vec2(px, py));
  
  // terminator ?? see https://github.com/joergdietrich/Leaflet.Terminator/blob/master/L.Terminator.js
  // float sinh = sin(lambda)*sin(declination) + cos(lambda)*cos(declination)*cos(1.0);
  // float intensity = (sinh > 0.0) ? 1.0 + 0.1*sinh : 0.2 + 0.8 * exp(6.0*sinh);
  
  float intensity = 1.1; // boost the pixel by some factor
    gl_FragColor[0] = intensity * gl_FragColor[0] * (1.3 - 0.3 * sqrt(gl_FragColor[0]));
    gl_FragColor[1] = intensity * gl_FragColor[1];
    gl_FragColor[2] = intensity * gl_FragColor[2];

}
}

</script>
<script>
// Select the canvas from the document.
var canvas = document.querySelector("canvas");

var width = +canvas.getAttribute('width') || 600,
    height = +canvas.getAttribute('height') || 400;
width = Math.max(width, self.innerWidth);
height = Math.max(height, self.innerHeight);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);

// Create the WebGL context, with fallback for experimental support.
var context = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

// Compile the vertex shader.
var vertexShader = context.createShader(context.VERTEX_SHADER);
context.shaderSource(vertexShader, document.querySelector("#vertex-shader").textContent);
context.compileShader(vertexShader);
if (!context.getShaderParameter(vertexShader, context.COMPILE_STATUS)) throw new Error(context.getShaderInfoLog(vertexShader));

// Compile the fragment shader.
var fragmentShader = context.createShader(context.FRAGMENT_SHADER);
context.shaderSource(fragmentShader, document.querySelector("#fragment-shader").textContent);
context.compileShader(fragmentShader);
if (!context.getShaderParameter(fragmentShader, context.COMPILE_STATUS)) throw new Error(context.getShaderInfoLog(fragmentShader));

// Link and use the program.
var program = context.createProgram();
context.attachShader(program, vertexShader);
context.attachShader(program, fragmentShader);
context.linkProgram(program);
if (!context.getProgramParameter(program, context.LINK_STATUS)) throw new Error(context.getProgramInfoLog(program));
context.useProgram(program);

// Define the positions (as vec2) of the square that covers the canvas.
var positionBuffer = context.createBuffer();
context.bindBuffer(context.ARRAY_BUFFER, positionBuffer);
context.bufferData(context.ARRAY_BUFFER, new Float32Array([
    -1.0, -1.0,
    +1.0, -1.0,
    +1.0, +1.0,
    -1.0, +1.0
  ]), context.STATIC_DRAW);

// Bind the position buffer to the position attribute.
var positionAttribute = context.getAttribLocation(program, "a_position");
context.enableVertexAttribArray(positionAttribute);
context.vertexAttribPointer(positionAttribute, 2, context.FLOAT, false, 0, 0);

// Extract the projection parameters.
var translateUniform = context.getUniformLocation(program, "u_translate"),
    scaleUniform = context.getUniformLocation(program, "u_scale"),
    rotateUniform = context.getUniformLocation(program, "u_rotate");

// Load the reference image.
var image = new Image;
  image.crossOrigin="anonymous";
image.src = "https://gist.githubusercontent.com/Fil/358e889380bfc9d8e4871cc9dc338cf9/raw/745cff357604fd7780b6efafec56dd7455a4a8d3/Mars_Viking_MDIM21_ClrMosaic_global_1024.jpg";
image.onload = readySoon;

var projection = d3.geoOrthographic()
    .translate([width / 2, height / 2])
    .scale(0.95 * height / 2);

var path = d3.geoPath()
    .projection(projection);

var svg = d3.select('svg')
    .attr('width', width)
    .attr('height', height);

svg._defs = svg.append("defs");
svg._clip = svg._defs.append("path")
    .datum({
        type: "Sphere"
    })
    .attr("id", "sphere");

svg._defs.append("clipPath")
    .attr("id", "clip")
    .append("use")
    .attr("xlink:href", "#sphere");

svg._earth = svg.append('g')
    .attr("xlink:href", "#sphere")
    .style('cursor', '-webkit-grab');

svg._earth.append('use')
    .attr("xlink:href", "#sphere")
    .attr('fill', 'rgba(0,0,0,0.001)'); /* to receive mouseover events */

svg._shade = svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere")
    .attr("stroke", "black")
    .attr("stroke-width", 3)
    .attr("fill", "url(#grad1)")
    .attr('pointer-events', 'none');

// Hack to ensure correct inference of window dimensions.
function readySoon() {
        setTimeout(function () {
            resize();
            ready();
        }, 10);
}

function resize() {
    canvas.setAttribute("width", width);
    canvas.setAttribute("height", height);
    context.uniform2f(translateUniform, width / 2, height / 2);
    context.viewport(0, 0, width, height);
}

function ready() {

// Create a texture and a mipmap for accurate minification.
    var texture = context.createTexture();
    context.bindTexture(context.TEXTURE_2D, texture);
    context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MAG_FILTER, context.LINEAR);
    context.texParameteri(context.TEXTURE_2D, context.TEXTURE_MIN_FILTER, context.LINEAR_MIPMAP_LINEAR);
    context.texImage2D(context.TEXTURE_2D, 0, context.RGBA, context.RGBA, context.UNSIGNED_BYTE, image);
    context.generateMipmap(context.TEXTURE_2D);

// The current rotation
    var scale = scale0 = projection.scale(),
        rotate = [0, 0, 0];

// Rotate and redraw!
    function redraw() {
        projection.scale(scale).rotate(rotate);
        svg._clip.attr('d', path);

context.uniform1f(scaleUniform, scale);
        context.uniform3fv(rotateUniform, rotate);
        context.bindTexture(context.TEXTURE_2D, texture); // XXX Safari
        context.drawArrays(context.TRIANGLE_FAN, 0, 4);

}

svg._earth
        .on('mousemove', function () {
            var p = d3.mouse(this),
                c = projection.invert(p);
            /* do something with coords c */
        });

var lambda = d3.scaleLinear()
        .domain([-width / 2, width / 2])
        .range([-180, 180]);

var phi = d3.scaleLinear()
        .domain([0, height])
        .range([90, -90]);

var q, r, transform, d;

zoom = d3.zoom()
        .scaleExtent([.8, 1.5])
        .on("start", function () {
            q = rotate, d = [0, 0, 0]; // accumulate change in d
            r = d3.mouse(this);
            svg._earth.style('cursor', '-webkit-grabbing');
        })
        .on("zoom.redraw", function () {
            scale = scale0 * d3.event.transform.k;
            var p = d3.mouse(this);
            var dr = [lambda(p[0]) - lambda(r[0]), phi(p[1]) - phi(r[1])];
            r = p;

// inverse dr[0] if the mouse is beyond one of the poles
            var a = (phi(p[1]) - rotate[1]) * Math.PI / 180,
                ca = Math.cos(a),
                sa = Math.sin(a);

d = [d[0] + dr[0] * (ca < 0 ? -1 : 1),
                        d[1] + dr[1], d[2] + dr[0] * -sa];

rotate = [q[0] + d[0], q[1] + d[1], q[2] + 0 * d[2]];

redraw();
        })
        .on("end", function() {
            svg._earth.style('cursor', '-webkit-grab');
        });

d3.select("svg")
        .call(zoom);

redraw();

var elapsed = null;

function animate(t) {
        elapsed = t;
        //d3.select("canvas").transition().call(zoom.transform, d3.zoomIdentity);
        requestAnimationFrame(animate);
    }
    //animate();

}

// A polyfill for requestAnimationFrame.
    if (!self.requestAnimationFrame) requestAnimationFrame =
        self.webkitRequestAnimationFrame || self.mozRequestAnimationFrame || self.msRequestAnimationFrame || self.oRequestAnimationFrame || function (f) {
            setTimeout(f, 17);
        };
</script>

https://d3js.org/d3.v5.min.js