This code downloads a Google Street View panorama, extracts its depth map, and generates a grayscale image representing the depth information.

Run example

npm run import -- "test google depth maps"

test google depth maps

// FROM: https://github.com/sidequestlegend/GSVPanoDepth.js/blob/master/examples/example.html

var fs = require('fs')
var {createCanvas} = require('canvas')
var importer = require('../Core')
var {loadDepthMap} = importer.import("extract depth maps")
var {loadPanorama, setZoom} = importer.import("load google panorama")

setZoom( 1 )

function onDepthLoad(depthMap) {
    var x, y, canvas, context, image, w, h, c;

    w = depthMap.width
    h = depthMap.height

    canvas = createCanvas(w, h)
    context = canvas.getContext('2d')
    image = context.getImageData(0, 0, w, h)

    for(y=0; y<h; ++y) {
        for(x=0; x<w; ++x) {
            c = depthMap.depthMap[y*w + x] / 50 * 255
            image.data[4*(y*w + x)    ] = c
            image.data[4*(y*w + x) + 1] = c
            image.data[4*(y*w + x) + 2] = c
            image.data[4*(y*w + x) + 3] = 255
        }
    }

    context.putImageData(image, 0, 0)
    const buffer = canvas.toBuffer('image/png')
    fs.writeFileSync('./image.png', buffer)
}

async function onPanoramaLoad(panoId) {
    await loadDepthMap(panoId, onDepthLoad)
}

async function testPanorama() {    
    await loadPanorama([43.7369832,7.4215723], onPanoramaLoad)
}

module.exports = testPanorama

// Import required modules
const fs = require('fs').promises; // Use promises for asynchronous file operations
const { createCanvas } = require('canvas');
const { loadDepthMap, loadPanorama, setZoom } = require('../Core'); // Import all required functions

// Set default zoom level
setZoom(1);

/**
 * Callback function for depth map loading
 * @param {object} depthMap - Loaded depth map object
 */
async function onDepthLoad(depthMap) {
  // Get image dimensions
  const { width, height } = depthMap;

  // Create a new canvas element
  const canvas = createCanvas(width, height);
  const context = canvas.getContext('2d');

  // Get image data from the canvas context
  const imageData = context.getImageData(0, 0, width, height);
  const data = imageData.data;

  // Iterate over each pixel in the image
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      // Calculate pixel intensity based on depth map value
      const c = depthMap.depthMap[y * width + x] / 50 * 255;

      // Set pixel color and alpha value
      data[4 * (y * width + x)] = c; // Red
      data[4 * (y * width + x) + 1] = c; // Green
      data[4 * (y * width + x) + 2] = c; // Blue
      data[4 * (y * width + x) + 3] = 255; // Alpha
    }
  }

  // Put image data back into the canvas context
  context.putImageData(imageData, 0, 0);

  // Save the image to a file
  const buffer = await canvas.toBuffer('image/png');
  await fs.writeFile('./image.png', buffer);
}

/**
 * Callback function for panorama loading
 * @param {string} panoId - Loaded panorama ID
 */
async function onPanoramaLoad(panoId) {
  // Load depth map for the panorama
  await loadDepthMap(panoId, onDepthLoad);
}

/**
 * Test panorama loading
 */
async function testPanorama() {
  try {
    // Load panorama from the given coordinates
    await loadPanorama([43.7369832, 7.4215723], onPanoramaLoad);
  } catch (error) {
    console.error('Error loading panorama:', error);
  }
}

module.exports = testPanorama;

This code snippet downloads a Google Street View panorama and extracts its depth map, then visualizes the depth information as a grayscale image.

Here's a breakdown:

1. Dependencies:

   • It imports modules for file system operations, canvas image manipulation, and functions for loading panoramas and depth maps from the importer module.

2. Initialization:

   • It sets the initial zoom level for the panorama.

3. Depth Map Processing:

   • The onDepthLoad function takes the extracted depth map as input and converts it into a grayscale image. It iterates through each pixel, mapping the depth value to a grayscale intensity and storing it in an image data object.

4. Panorama Loading:

   • The onPanoramaLoad function is called when the panorama is loaded successfully. It then calls loadDepthMap to extract the depth map for the loaded panorama.

5. Main Function:

   • The testPanorama function initiates the process by loading a panorama at a specified location and triggering the depth map extraction and visualization.

6. Output:

   • The resulting grayscale depth map image is saved as image.png in the current directory.

Purpose:

This code snippet demonstrates how to extract and visualize depth information from Google Street View panoramas, providing a way to analyze and understand the 3D structure of the captured scenes.