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: false,
                        vertexColors: THREE.NoColors,
                        fog: false
                    })
                );

                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: false
                    })
                );
                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;
            },
            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');
                    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;
                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 () {
                // 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);
            }
        });
    }
);