Raster Reprojection of panorama images (360°)

Raster Reprojection of panorama images — inverse colors version

This interactive canvas visualization uses Jason Davies’ d3.geo.zoom and D3 v3 to reproject a 360° panorama image onto an equirectangular projection. The code loads the panorama, draws it to an offscreen canvas, and then inversely maps each pixel of the target canvas back through the projection, inverting the RGB channels to create a negative-color version. Users can pan and zoom the reprojected image using the d3.geo.zoom behavior and projection scale extent.

PPhilippe Rivière

89% match

Raster Reprojection of panorama images (360°) with WebGL

This interactive WebGL visualization reprojects a 360-degree equirectangular panorama image into the stereographic projection, enabling smooth zoom and pan interactions. It displays the source panorama as a textured plane, with the fragment shader performing inverse stereographic projection and rotation calculations in real time. The implementation uses d3.v3 for DOM and event handling, while raw WebGL shaders manage the rendering pipeline, including a custom vertex-fragment shader pair and texture mipmapping. The code compiles shaders, sets up a position buffer for a fullscreen quad, and updates uniform variables for translation, scale, and rotation based on user input.

PPhilippe Rivière

88% match

Zoom and Rotating (Reprojecting)

This example demonstrates a dynamic equirectangular world map that is rendered onto a canvas and then applied as a texture to both a plane and a sphere in a 3D A-Frame scene, allowing for zoom and rotation. The map, sourced from a GeoJSON file, uses `d3.geoEquirectangular` projection and a `d3.geoPath` generator to draw graticules and country boundaries. A `d3.timer` drives continuous redraws to the canvas, while the A-Frame `draw-canvas` component integrates it into the virtual environment, with the sphere and camera controls enabling interactive reprojection.

75% match

Zoom and Rotating (Reprojecting)

This example demonstrates map reprojection with zoom and rotation using D3 v4 and canvas rendering. It displays geographic data from `ne_110m_admin_0_sovereignty.geojson` and a graticule, drawn with `d3.geoPath` and a `d3.geoEquirectangular` projection that rotates over time via `d3.timer`. The scene is embedded in an A-Frame 0.5.0 environment with multiple canvas textures applied to 3D entities, including a sphere and plane, using the `draw-canvas` component.

74% match

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating world map rendered on a Canvas element, with countries and a graticule drawn in grayscale against a dark sphere. Using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`, the code redefines the projected sphere each frame via a `d3.timer` that increments the rotation speed. Land polygons are loaded from a local `land.geojson` file, and the animation highlights how reprojection affects visible geography as the globe spins.

Rotating Equirectangular

This example displays the world map using an equirectangular projection that continuously rotates horizontally. The visualization is rendered on an HTML5 Canvas element using the D3.js v3 and TopoJSON libraries, with a timer-driven animation. The projection’s rotation angle updates over time based on elapsed milliseconds, clearing and redrawing the filled land polygons each frame. World geometry comes from a remote GeoJSON file of 110-meter resolution, processed with `topojson.feature` and drawn via `d3.geo.path` with Canvas context.

Mmbostock

Zoom and Rotating (Reprojecting)

This example shows a world map rendered on interactive 3D objects—a plane and a sphere—inside an A-Frame virtual reality scene, with the map rotating continuously over time. The geographic data is drawn to a 2D canvas using `d3.geoEquirectangular` for the projection, `d3.geoPath` for generating paths, and `d3.geoGraticule` for the grid lines. A `d3.timer` controls the animation loop, while an A-Frame component (`draw-canvas`) updates the canvas texture on the 3D entities. The map geojson includes country polygons from a natural earth dataset.

Zoom and Rotating (Reprojecting)

This example shows a continuously rotating and reprojecting world map rendered onto a canvas texture inside a 3D A-Frame scene. It demonstrates how geographic data can be integrated with WebVR-style environments, drawing country polygons, graticules, and the sphere outline using D3 v4’s `d3.geoMercator` projection, `d3.geoPath`, and `d3.geoGraticule`. The animation runs via `d3.timer`, updating the projection rotation each frame and clearing/redrawing the canvas context. The map uses GeoJSON world land data loaded from `land.geojson` and displays alongside a simple A-Frame box primitive.