Trouble mapping an image to a point material buffer geometry in Three.js

Question

I've been using Three.js to make a project that creates a point material object which can then be interacted with. I'm trying to map the pixels of an image to the vertexes of a buffer geometry so it shows the image as a set of points (point cloud like). The image in question being a map of the earth (downscaled to 106 x 53 pixels).

I'm doing this by drawing the image on a canvas, extracting the image data, setting the colour from the image data (based on pixel coordinates) and then setting the colour attribute of my geometry (in this case a sphere buffer geometry). Where am I going wrong with the mapping?

This is code for extracting colours and placing them in an array for the geometry:

let colors = [];
let color = new THREE.Color();
let positionAttribute = g.attributes.position; // g being geometry

for (let x = 0; x < img.width; x++) {
  for (let y = 0; y < img.height; y++) {
    let c = earthCanvas.getContext("2d");
    let p = c.getImageData(x, y, 1, 1).data;
    let hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);

    color.set(hex);
    console.log("set");

    colors.push(color.r, color.g, color.b);
  }
}
g.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));

Which results in this happening:

Is there any way to make this look like earth as a globe? Am I just placing the coordinates of the pixels wrong?

The code for the geometry itself looks like this:

g = new THREE.SphereBufferGeometry(3, 104, 52);

count = g.attributes.position.count;
console.log(count);
g.center();

let pointShape = new THREE.TextureLoader().load("./models/particle.png");

m = new THREE.PointsMaterial({
  size: pointSize,
  map: pointShape,
  vertexColors: true,
  //blending: THREE.AdditiveBlending,
  depthTest: false,
  opacity: 1
});

And the HTML and JavaScript for the canvas looks like this:

function drawImageSource(source, canvas) {
  img = new Image();

  img.addEventListener("load", function () {
    // The image can be drawn from any source
    canvas
      .getContext("2d")
      .drawImage(
        img,
        0,
        0,
        img.width,
        img.height,
        0,
        0,
        canvas.width,
        canvas.height
      );
  });
  img.crossOrigin = "Anonymous";
  img.setAttribute("src", source);
}

<div id="canvasDiv">
    <canvas id="earthCanvas", width="106", height="53" hidden />
</body>

The link to the code sandbox project is here: https://codesandbox.io/s/small-hill-mvhgc?file=/src/index.js:5956-6389 (I apologise for messy code. It's a prototype.)

Answer 1

I would go with a different approach: modify the existing PointsMaterial, using .onBeforeCompile(), and pass a texture in a uniform.

body{
  overflow:hidden;
  margin:0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {OrbitControls} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let g = new THREE.SphereGeometry(4, 360, 180);
let m = new THREE.PointsMaterial({
  size: 0.05,
  onBeforeCompile: shader => {
    shader.uniforms.tex = {value: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg")};
    shader.vertexShader = `
      varying vec2 vUv;
      ${shader.vertexShader}
    `.replace(
      `#include <begin_vertex>`,
      `#include <begin_vertex>
        vUv = uv;
      `
    );
    //console.log(shader.vertexShader);
    shader.fragmentShader = `
      uniform sampler2D tex;
      varying vec2 vUv;
      ${shader.fragmentShader}
    `.replace(
      `vec4 diffuseColor = vec4( diffuse, opacity );`,
      `
      vec3 col = texture2D(tex, vUv).rgb;
      col *= diffuse;
      vec4 diffuseColor = vec4( col, opacity );`
    );
    //console.log(shader.fragmentShader);
  }
});
let p = new THREE.Points(g, m);
scene.add(p);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});
</script>