renderer.js

define(["esri/core/declare", "esri/views/3d/externalRenderers"], function (
  declare,
  externalRenderers
) {
  // Enforce strict mode
  "use strict";

  // Constants
  var THREE = window.THREE;
  var THRESHOLD = 1000000;
  var TRAJECTORY_SEGMENTS = 1000;

  return declare([], {
    constructor: function (satellites) {
      // All satellite and the date for computation.
      this.satellites = satellites;
      this.satelliteHover = null;
      this.satelliteIdentified = null;

      // Layers
      this.normal = null; // All satellites. Colored white.
      this.selected = null; // Colored red based on filters.
      this.hover = null; // Colored cyan when the user's mouse hovers over.
      this.trajectory = null; // Orbital trajectory of a clicked satellite.
      this.identified = null; // A clicked satellite. Colored cyan.

      // SceneView
      this.view = null;
    },
    setup: function (context) {
      // Store view
      this.view = context.view;

      // Create the THREE.js webgl renderer
      this.renderer = new THREE.WebGLRenderer({
        context: context.gl,
        premultipliedAlpha: false,
      });

      //
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(this.view.size[0], this.view.size[1]);

      // Make sure it does not clear anything before rendering
      this.renderer.autoClearDepth = false;
      this.renderer.autoClearColor = false;
      this.renderer.autoClearStencil = false;

      // The ArcGIS JS API renders to custom offscreen buffers, and not to the default framebuffers.
      // We have to inject this bit of code into the three.js runtime in order for it to bind those
      // buffers instead of the default ones.
      var originalSetRenderTarget = this.renderer.setRenderTarget.bind(
        this.renderer
      );
      this.renderer.setRenderTarget = function (target) {
        originalSetRenderTarget(target);
        if (target === null) {
          context.bindRenderTarget();
        }
      };

      //
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera();

      // Create both a directional light, as well as an ambient light
      this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
      this.ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      this.scene.add(this.directionalLight, this.ambientLight);

      // Create objects and add them to the scene
      this.normal = new THREE.Points(
        new THREE.BufferGeometry(),
        new THREE.PointsMaterial({
          color: 0xffffff,
          size: 1,
          sizeAttenuation: true,
          vertexColors: THREE.NoColors,
          fog: true,
        })
      );

      this.selected = new THREE.Points(
        new THREE.BufferGeometry(),
        new THREE.PointsMaterial({
          color: 0xff0000,
          size: 4,
          sizeAttenuation: false,
          vertexColors: THREE.NoColors,
          fog: false,
        })
      );
      this.selected.frustumCulled = false;

      this.hover = new THREE.Points(
        new THREE.BufferGeometry(),
        new THREE.PointsMaterial({
          color: 0x00ffff,
          size: 6,
          sizeAttenuation: false,
          vertexColors: THREE.NoColors,
          fog: false,
        })
      );
      this.hover.frustumCulled = false;

      this.trajectory = new THREE.Line(
        new THREE.BufferGeometry(),
        new THREE.LineBasicMaterial({
          color: 0xffffff,
          linewidth: 1,
          vertexColors: THREE.NoColors,
          fog: true,
        })
      );
      this.trajectory.frustumCulled = false;

      this.identified = new THREE.Points(
        new THREE.BufferGeometry(),
        new THREE.PointsMaterial({
          color: 0xff7f00,
          size: 6,
          sizeAttenuation: false,
          vertexColors: THREE.NoColors,
          fog: false,
        })
      );
      this.identified.frustumCulled = false;

      // Add all satellites to normal layer.
      var vertex = [];
      var valid = [];
      var date = new Date();
      for (var i = 0; i < this.satellites.length; i++) {
        var satellite = this.satellites[i];
        var eci = this.getSatelliteLocation(satellite.satrec, date);
        if (
          eci === null ||
          eci === undefined ||
          isNaN(eci.x) ||
          isNaN(eci.y) ||
          isNaN(eci.z)
        ) {
          continue;
        }
        vertex.push(eci.x * 1000, eci.y * 1000, eci.z * 1000);
        valid.push(satellite);
      }

      // Satellites that returned a computable location.
      this.satellites = valid;

      // Assign buffer.
      var position = new THREE.Float32Attribute(vertex, 3);
      position.setDynamic(true);
      this.normal.geometry.addAttribute("position", position);

      // Add to scene
      this.scene.add(
        this.normal,
        this.selected,
        this.hover,
        this.trajectory,
        this.identified
      );

      // Start web worker
      var worker = new Worker("worker.js");
      worker.onmessage = function (e) {
        // Update all satellites.
        position.set(e.data.vertex);
        position.needsUpdate = true;

        // Update selected satellites.
        var vertex = [];
        for (var i = 0; i < this.satellites.length; i++) {
          var satellite = this.satellites[i];
          if (!satellite.selected) {
            continue;
          }
          vertex.push(position.getX(i), position.getY(i), position.getZ(i));
        }
        this.selected.geometry.removeAttribute("position");
        this.selected.geometry.addAttribute(
          "position",
          new THREE.Float32Attribute(vertex, 3)
        );
        this.selected.needsUpdate = true;

        // Update hover-over satellite.
        if (this.satelliteHover !== null) {
          var index2 = this.satellites.indexOf(this.satelliteHover);
          var vertex2 = [];
          vertex2.push(
            position.getX(index2),
            position.getY(index2),
            position.getZ(index2)
          );
          this.hover.geometry.removeAttribute("position");
          this.hover.geometry.addAttribute(
            "position",
            new THREE.Float32Attribute(vertex2, 3)
          );
          this.hover.needsUpdate = true;
        }

        // Update highlighted satellite.
        if (this.satelliteIdentified !== null) {
          var index3 = this.satellites.indexOf(this.satelliteIdentified);
          var vertex3 = [];
          vertex3.push(
            position.getX(index3),
            position.getY(index3),
            position.getZ(index3)
          );
          this.identified.geometry.removeAttribute("position");
          this.identified.geometry.addAttribute(
            "position",
            new THREE.Float32Attribute(vertex3, 3)
          );
          this.identified.needsUpdate = true;
        }
      }.bind(this);
      worker.postMessage({
        satellites: this.satellites.map(function (e) {
          return {
            satrec: e.satrec,
          };
        }),
      });

      // Refresh the screen
      externalRenderers.requestRender(this.view);
    },
    render: function (context) {
      // Get Esri's camera
      var c = context.camera;

      // Update three.js camera
      this.camera.position.set(c.eye[0], c.eye[1], c.eye[2]);
      this.camera.up.set(c.up[0], c.up[1], c.up[2]);
      this.camera.lookAt(
        new THREE.Vector3(c.center[0], c.center[1], c.center[2])
      );
      this.camera.projectionMatrix.fromArray(c.projectionMatrix);

      // Get Esri's current sun settings
      this.view.environment.lighting.date = this.date;

      // Update lighting
      var direction = context.sunLight.direction;
      var diffuse = context.sunLight.diffuse;
      var ambient = context.sunLight.ambient;

      // Update the directional light color, intensity and position
      this.directionalLight.color.setRGB(
        diffuse.color[0],
        diffuse.color[1],
        diffuse.color[2]
      );
      this.directionalLight.intensity = diffuse.intensity;
      this.directionalLight.position.set(
        direction[0],
        direction[1],
        direction[2]
      );

      // Update the ambient light color and intensity
      this.ambientLight.color.setRGB(
        ambient.color[0],
        ambient.color[1],
        ambient.color[2]
      );
      this.ambientLight.intensity = ambient.intensity;

      // Render the scene
      this.renderer.resetGLState();
      this.renderer.render(this.scene, this.camera);

      // Request a re-render
      externalRenderers.requestRender(this.view);

      // Cleanup
      context.resetWebGLState();
    },
    dispose: function (content) {},
    getSatelliteLocation: function (satrec, date) {
      var position_and_velocity = satellite.propagate(
        satrec,
        date.getUTCFullYear(),
        date.getUTCMonth() + 1,
        date.getUTCDate(),
        date.getUTCHours(),
        date.getUTCMinutes(),
        date.getUTCSeconds()
      );
      return position_and_velocity.position;
    },
    getSatelliteLocationAsLatLon: function (satrec, date) {
      var prop = satellite.propagate(satrec, date);

      var gmst = satellite.gstime(date);
      console.log(gmst);
      var positionGd = satellite.eciToGeodetic(prop.position, gmst)
      return positionGd;
    },
    setSatName: function(name) {
      $('#sat-name').text(name)
    },
    updateSelection: function () {
      // Get locations of selected satellites
      var vertex = [];
      for (var i = 0; i < this.satellites.length; i++) {
        var satellite = this.satellites[i];
        if (!satellite.selected) {
          continue;
        }
        var p = this.normal.geometry.getAttribute("position");
        console.log(p)
        vertex.push(p.getX(i), p.getY(i), p.getZ(i));
      }

      // Assign location array to
      this.selected.geometry.removeAttribute("position");
      this.selected.geometry.addAttribute(
        "position",
        new THREE.Float32Attribute(vertex, 3)
      );

      // Immediately request a new redraw
      externalRenderers.requestRender(this.view);
    },
    mousemove: function (x, y) {
      // Normalize mouse
      var mouse = new THREE.Vector2(
        (x / $("#map").width()) * 2 - 1,
        (y / $("#map").height()) * -2 + 1
      );
      var raycaster = new THREE.Raycaster();
      raycaster.params.Points.threshold = THRESHOLD;
      raycaster.setFromCamera(mouse, this.camera);

      var intersections = raycaster.intersectObject(this.normal);
      //
      var satellite = null;
      var vertex = [];
      var index = null;
      if (intersections.length !== 0) {
        intersections.sort(function (a, b) {
          return a.distanceToRay - b.distanceToRay;
        });
        var intersection = intersections[0];
        index = intersection.index;
        satellite = this.satellites[index];
      }
      if (satellite === null && this.satelliteHover === null) {
        return;
      }
      if (satellite === this.satelliteHover) {
        return;
      }

      //
      this.satelliteHover = satellite;
      this.setSatName(satellite?.metadata.name);
      if (this.satelliteHover !== null) {
        var p = this.normal.geometry.getAttribute("position");
        vertex.push(p.getX(index), p.getY(index), p.getZ(index));
      }
      this.hover.geometry.removeAttribute("position");
      this.hover.geometry.addAttribute(
        "position",
        new THREE.Float32Attribute(vertex, 3)
      );

      // Immediately request a new redraw
      externalRenderers.requestRender(this.view);
    },
    hideOrbit: function () {
      // Clear orbit
      this.trajectory.geometry.removeAttribute("position");
      this.identified.geometry.removeAttribute("position");

      //
      this.satelliteIdentified = null;

      // Immediately request a new redraw
      externalRenderers.requestRender(this.view);
    },
    showOrbit: function () {
      
      if (this.satelliteHover.metadata) {
      // Exit if no satellite currently under the user's mouse.
      if (this.satelliteHover === null) {
        return;
      }
      this.satelliteIdentified = this.satelliteHover;

      // Time between orbital vertex
      var ms = this.satelliteIdentified.metadata.period * 60000;
      ms /= TRAJECTORY_SEGMENTS;

      // Show orbit
      var vertex = [];
      var start = new Date();
      for (var i = 0; i <= TRAJECTORY_SEGMENTS; i++) {
        var date = new Date(start.valueOf() + i * ms);
        var eci = this.getSatelliteLocation(
          this.satelliteIdentified.satrec,
          date
        );
        if (
          eci === null ||
          eci === undefined ||
          isNaN(eci.x) ||
          isNaN(eci.y) ||
          isNaN(eci.z)
        ) {
          continue;
        }
        vertex.push(eci.x * 1000, eci.y * 1000, eci.z * 1000);
      }
      this.trajectory.geometry.removeAttribute("position");
      this.trajectory.geometry.addAttribute(
        "position",
        new THREE.Float32Attribute(vertex, 3)
      );

      // Show satellite
      this.identified.geometry.removeAttribute("position");
      this.identified.geometry.addAttribute(
        "position",
        new THREE.Float32Attribute(vertex.slice(0, 3), 3)
      );

      // Immediately request a new redraw
      externalRenderers.requestRender(this.view);}
    },
  });
});