31:T3667,{ fnBuildGlobe(); return html`⏎ Click cell to see code that builds WebGL Globe`; function fnBuildGlobe() { let scale = d3 .scaleLinear() .domain([0, 3]) .range([0, 1]); let globe = new datGlobe(container); var data = []; allCities.map(({ lat, lng }) => { const { azimuth, altitude } = getSunPosition(Date.now(), lng, lat); const d = 180 / Math.PI; const a = d * azimuth; const h = d * altitude; data.push(lat, lng, scale(altitude)); }); globe.addData(data, { format: 'magnitude', name: "GlobeData", animated: false }); globe.createPoints(); globe.animate(); function fnInRange(measure, filter) { return measure >= filter.range[0] && measure <= filter.range[1]; } } //fnBuildGlobe //datGlobe constructor function datGlobe(container, opts) { opts = opts || {}; var colorFn = opts.colorFn || function(x) { var c = new THREE.Color(); c.setHSL(0.6 - x * 0.5, 1.0, 0.5); return c; }; //var imgDir = opts.imgDir || '/globe/'; //worldJPG_URL is string in ObservableHQ cell var imgURL = opts.imgURL || worldJPG_URL; var Shaders = { earth: { uniforms: { texture: { type: 't', value: null } }, vertexShader: [ 'varying vec3 vNormal;', 'varying vec2 vUv;', 'void main() {', 'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', 'vNormal = normalize( normalMatrix * normal );', 'vUv = uv;', '}' ].join('\n'), fragmentShader: [ 'uniform sampler2D texture;', 'varying vec3 vNormal;', 'varying vec2 vUv;', 'void main() {', 'vec3 diffuse = texture2D( texture, vUv ).xyz;', 'float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );', 'vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );', 'gl_FragColor = vec4( diffuse + atmosphere, 1.0 );', '}' ].join('\n') }, atmosphere: { uniforms: {}, vertexShader: [ 'varying vec3 vNormal;', 'void main() {', 'vNormal = normalize( normalMatrix * normal );', 'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );', '}' ].join('\n'), fragmentShader: [ 'varying vec3 vNormal;', 'void main() {', 'float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 12.0 );', 'gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;', '}' ].join('\n') } }; var camera, scene, renderer, w, h; var mesh, atmosphere, point; var overRenderer; var curZoomSpeed = 0; var zoomSpeed = 50; var mouse = { x: 0, y: 0 }, mouseOnDown = { x: 0, y: 0 }; var rotation = { x: 0, y: 0 }, target = { x: Math.PI * 1.7, y: Math.PI / 5.0 }, targetOnDown = { x: 0, y: 0 }; var distance = 100000, distanceTarget = 100000; var padding = 40; var PI_HALF = Math.PI / 2; var ROTATIONSPEED = 0.003; var k = ROTATIONSPEED; var f = false; function init() { container.style.color = '#fff'; container.style.font = '13px/20px Arial, sans-serif'; var shader, uniforms, material; w = container.offsetWidth || window.innerWidth; h = container.offsetHeight || window.innerHeight; camera = new THREE.PerspectiveCamera(26, w / h, 1, 10000); camera.position.z = distance; scene = new THREE.Scene(); var geometry = new THREE.SphereGeometry(150, 40, 30); shader = Shaders['earth']; uniforms = THREE.UniformsUtils.clone(shader.uniforms); //uniforms['texture'].value = THREE.ImageUtils.loadTexture(imgDir+'world.jpg'); const textureLoader = new THREE.TextureLoader(); uniforms['texture'].value = textureLoader.load(imgURL); material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader }); mesh = new THREE.Mesh(geometry, material); mesh.rotation.y = Math.PI; scene.add(mesh); shader = Shaders['atmosphere']; uniforms = THREE.UniformsUtils.clone(shader.uniforms); material = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: shader.vertexShader, fragmentShader: shader.fragmentShader, side: THREE.BackSide, blending: THREE.AdditiveBlending, transparent: true }); mesh = new THREE.Mesh(geometry, material); mesh.scale.set(1.1, 1.1, 1.1); scene.add(mesh); geometry = new THREE.BoxGeometry(0.75, 0.75, 1); //geometry = new THREE.CubeGeometry(0.75, 0.75, 1); geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0, -0.5)); point = new THREE.Mesh(geometry); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(w, h); renderer.domElement.style.position = 'absolute'; container.appendChild(renderer.domElement); container.addEventListener('mousedown', onMouseDown, false); //container.addEventListener('mousewheel', onMouseWheel, false); container.addEventListener('wheel', onMouseWheel, false); document.addEventListener('keydown', onDocumentKeyDown, false); //window.addEventListener('resize', onWindowResize, false); container.addEventListener( 'mouseover', function() { overRenderer = true; }, false ); container.addEventListener( 'mouseout', function() { overRenderer = false; }, false ); } //init const addData = function(data, opts) { var lat, lng, size, color, i, step, colorFnWrapper; opts.animated = opts.animated || false; this.is_animated = opts.animated; opts.format = opts.format || 'magnitude'; // other option is 'legend' //console.log(opts.format); if (opts.format === 'magnitude') { step = 3; colorFnWrapper = function(data, i) { return colorFn(data[i + 2]); }; } else if (opts.format === 'legend') { step = 4; colorFnWrapper = function(data, i) { return colorFn(data[i + 3]); }; } else { throw 'error: format not supported: ' + opts.format; } if (opts.animated) { if (this._baseGeometry === undefined) { this._baseGeometry = new THREE.Geometry(); for (i = 0; i < data.length; i += step) { lat = data[i]; lng = data[i + 1]; // size = data[i + 2]; color = colorFnWrapper(data, i); size = 0; addPoint(lat, lng, size, color, this._baseGeometry); } } if (this._morphTargetId === undefined) { this._morphTargetId = 0; } else { this._morphTargetId += 1; } opts.name = opts.name || 'morphTarget' + this._morphTargetId; } var subgeo = new THREE.Geometry(); for (i = 0; i < data.length; i += step) { lat = data[i]; lng = data[i + 1]; color = colorFnWrapper(data, i); size = data[i + 2]; size = size * 150; addPoint(lat, lng, size, color, subgeo); } if (opts.animated) { this._baseGeometry.morphTargets.push({ name: opts.name, vertices: subgeo.vertices }); } else { this._baseGeometry = subgeo; } }; function createPoints() { if (this._baseGeometry !== undefined) { if (this.is_animated === false) { this.points = new THREE.Mesh( this._baseGeometry, new THREE.MeshBasicMaterial({ color: 0xffffff, vertexColors: THREE.FaceColors, morphTargets: false }) ); } else { if (this._baseGeometry.morphTargets.length < 8) { console.log('t l', this._baseGeometry.morphTargets.length); var padding = 8 - this._baseGeometry.morphTargets.length; console.log('padding', padding); for (var i = 0; i <= padding; i++) { console.log('padding', i); this._baseGeometry.morphTargets.push({ name: 'morphPadding' + i, vertices: this._baseGeometry.vertices }); } } this.points = new THREE.Mesh( this._baseGeometry, new THREE.MeshBasicMaterial({ color: 0xffffff, vertexColors: THREE.FaceColors, morphTargets: true }) ); } scene.add(this.points); } } function addPoint(lat, lng, size, color, subgeo) { var phi = ((90 - lat) * Math.PI) / 180; var theta = ((180 - lng) * Math.PI) / 180; point.position.x = 150 * Math.sin(phi) * Math.cos(theta); point.position.y = 150 * Math.cos(phi); point.position.z = 150 * Math.sin(phi) * Math.sin(theta); point.lookAt(mesh.position); point.scale.z = Math.max(size, 0.1); // avoid non-invertible matrix point.updateMatrix(); for (var i = 0; i < point.geometry.faces.length; i++) { point.geometry.faces[i].color = color; } //THREE.GeometryUtils.merge(subgeo, point); subgeo.merge(point.geometry, point.matrix); } function onMouseDown(event) { event.preventDefault(); k = 0; f = true; container.addEventListener('mousemove', onMouseMove, false); container.addEventListener('mouseup', onMouseUp, false); container.addEventListener('mouseout', onMouseOut, false); target.y = rotation.y; mouseOnDown.x = -event.clientX; mouseOnDown.y = event.clientY; targetOnDown.x = target.x; targetOnDown.y = target.y; container.style.cursor = 'move'; } function onMouseMove(event) { mouse.x = -event.clientX; mouse.y = event.clientY; var zoomDamp = distance / 1000; target.x = targetOnDown.x + (mouse.x - mouseOnDown.x) * 0.005 * zoomDamp; target.y = targetOnDown.y + (mouse.y - mouseOnDown.y) * 0.005 * zoomDamp; target.y = target.y > PI_HALF ? PI_HALF : target.y; target.y = target.y < -PI_HALF ? -PI_HALF : target.y; } function onMouseUp(event) { k = ROTATIONSPEED; f = false; container.removeEventListener('mousemove', onMouseMove, false); container.removeEventListener('mouseup', onMouseUp, false); container.removeEventListener('mouseout', onMouseOut, false); container.style.cursor = 'auto'; } function onMouseOut(event) { k = ROTATIONSPEED; f = false; container.removeEventListener('mousemove', onMouseMove, false); container.removeEventListener('mouseup', onMouseUp, false); container.removeEventListener('mouseout', onMouseOut, false); } function onMouseWheel(event) { event.preventDefault(); if (overRenderer) { //zoom(event.wheelDeltaY * 0.3); zoom(event.deltaY * 0.3 * 10); } return false; } function onDocumentKeyDown(event) { switch (event.keyCode) { case 38: zoom(100); event.preventDefault(); break; case 40: zoom(-100); event.preventDefault(); break; } } function onWindowResize(event) { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function zoom(delta) { distanceTarget -= delta; distanceTarget = distanceTarget > 1100 ? 1100 : distanceTarget; distanceTarget = distanceTarget < 350 ? 350 : distanceTarget; } function animate() { requestAnimationFrame(animate); render(); } function render() { zoom(curZoomSpeed); target.x -= k; rotation.x += (target.x - rotation.x) * 0.2; if (f == true) { rotation.y += (target.y - rotation.y) * 0.2; } if (f == false) { target.y = Math.PI / 5.0; rotation.y += (target.y - rotation.y) * 0.02; } distance += (distanceTarget - distance) * 0.3; camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y); camera.position.y = distance * Math.sin(rotation.y); camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y); camera.lookAt(mesh.position); renderer.render(scene, camera); } init(); this.animate = animate; this.__defineGetter__('time', function() { return this._time || 0; }); this.__defineSetter__('time', function(t) { var validMorphs = []; var morphDict = this.points.morphTargetDictionary; for (var k in morphDict) { if (k.indexOf('morphPadding') < 0) { validMorphs.push(morphDict[k]); } } validMorphs.sort(); var l = validMorphs.length - 1; var scaledt = t * l + 1; var index = Math.floor(scaledt); for (var i = 0; i < validMorphs.length; i++) { this.points.morphTargetInfluences[validMorphs[i]] = 0; } var lastIndex = index - 1; var leftover = scaledt - index; if (lastIndex >= 0) { this.points.morphTargetInfluences[lastIndex] = 1 - leftover; } this.points.morphTargetInfluences[index] = leftover; this._time = t; }); this.addData = addData; this.createPoints = createPoints; this.renderer = renderer; this.scene = scene; return this; } //datGlobe }32:T85e,cities = [ ["London", -0.127758, 51.507351], ["Berlin", 13.404954, 52.520008], ["Amsterdam", 4.895168, 52.370216], ["Helsinki", 24.938379, 60.169857], ["Paris", 2.352222, 48.856613], ["Barcelona", 2.173404, 41.385063], ["Lisbon", -9.139337, 38.722252], ["Budapest", 19.040236, 47.497913], ["Prague", 14.437800, 50.075539], ["Madrid", -3.703790, 40.416775], ["Vienna", 16.373819, 48.208176], ["Dublin", -6.260310, 53.349804], ["Reykjavik", -21.942400, 64.147209], ["Copenhagen", 12.568337, 55.676098], ["Stockholm", 18.068581, 59.329323], ["Dakar", -17.467686, 14.716677], ["Kyiv", 30.542721, 50.447731], ["Moscow", 37.617298, 55.755825], ["Minsk", 27.561523, 53.904541], ["Novosibirsk", 82.933952, 55.018803], ["Rome", 12.496365, 41.902782], ["Munich", 11.581981, 48.135124], ["Istanbul", 28.978359, 41.008240], ["Baghdad", 44.361488, 33.312805], ["Tehran", 51.388973, 35.689198], ["Kabul", 69.207489, 34.555347], ["Warsaw", 21.012230, 52.229675], ["Oslo", 10.752245, 59.913868], ["Bangkok", 100.501762, 13.756331], ["Singapore", 103.819839, 1.352083], ["Kuala Lumpur", 101.686852, 3.139003], ["Tokyo", 139.691711, 35.689487], ["Hong Kong", 114.109497, 22.396427], ["Seoul", 126.977966, 37.566536], ["Taipei", 121.565414, 25.032969], ["Shanghai", 121.473701, 31.230391], ["Beijing", 116.407394, 39.904202], ["Bangalore", 77.594566, 12.971599], ["New York City", -74.005974, 40.712776], ["San Francisco", -122.419418, 37.774929], ["Los Angeles", -118.243683, 34.052235], ["Vancouver", -123.120735, 49.282730], ["Seattle", -122.332069, 47.606209], ["Boston", -71.058884, 42.360081], ["Austin", -97.743057, 30.267153], ["Toronto", -79.383186, 43.653225], ["Washington, DC", -77.036873, 38.907192], ["Montreal", -73.567253, 45.501690], ["Mexico City", -99.133209, 19.432608], ["Buenos Aires", -58.381557, -34.603683], ["Sao Paulo", -46.633308, -23.550520], ["Sydney", 151.209900, -33.865143], ["Melbourne", 144.946457, -37.840935], ["Auckland", 174.763336, -36.848461], ["Honolulu", -157.858093, 21.315603] ].sort((a, b) => a[1] - b[1])33:[] 2f:{"title":"Sun Position doubled encoded by size and color","cells":[{"id":0,"value":"md`# Sun Position doubled encoded by size and color\n\n[Webgl globe code forked from](https://observablehq.com/@mariodelgadosr/webgl-globe)\n\n[Sun position code forked from](https://observablehq.com/@mourner/sun-position-in-900-bytes)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`The function accepts a Unix timestamp (in milliseconds), longitude and latitude, and returns an object with the following properties:\n- \\`azimuth\\`: North-based Sun azimuth in radians relative to the observer (_0_ to _2π_).\n- \\`altitude\\`: Sun altitude in radians relative to the observer (_-π/2_ to _π/2_).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"getSunPosition = (date, lng, lat) => {\n const {sin, cos, asin, atan2, PI} = Math, \n r = PI / 180, t = date / 315576e7 - 0.3,\n m = r * (357.52911 + t * (35999.05029 - t * 1537e-7)), c = cos(r * (125.04 - 1934.136 * t)),\n l = r * (280.46646 + t * (36000.76983 + t * 3032e-7) + (1.914602 - t * (4817e-6 - t * 14e-6)) * sin(m) - \n 569e-5 - 478e-5 * c) + (0.019993 - 101e-6 * t) * sin(2 * m) + 289e-6 * sin(3 * m),\n e = r * (84381.448 - t * (46.815 - t * (59e-5 + 1813e-6 * t))) / 3600 + r * 256e-5 * c,\n sl = sin(l), cr = cos(r * lat), sr = sin(r * lat), d = asin(sin(e) * sl),\n h = r * (280.46061837 + 13184999.8983375 * t + lng) - atan2(cos(e) * sl, cos(l)),\n sd = sin(d), cd = cos(d), ch = cos(h);\n return {\n azimuth: PI + atan2(sin(h), ch * sr - cr * sd / cd), \n altitude: asin(sr * sd + cr * cd * ch)\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"await d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@1/world/110m.json\")\n .then(world => { return topojson.mesh(world, world.objects.land)})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"// THREE JS Module\nTHREE = {\n //const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n //return window.THREE;\n const THREE = window.THREE = await require('three');\n return THREE; \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"//Image is hosted in a comment associated with https://gist.github.com/MarioDelgadoSr/2a74c279eb984e755706940288494af3\n//worldJPG_URL is used by datGlobe constructor for the texture\nworldJPG_URL = \"https://gist.githubusercontent.com/MarioDelgadoSr/2a74c279eb984e755706940288494af3/raw/f03c3a0bc942f0835286b750a390cbbc0492bde6/world.jpg\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"md`## Example\nLet's use this to continuously calculate the current Sun position for some cities:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"allCities = d3.csv(\n \"https://gist.githubusercontent.com/jashkenas/934edd697840f7acec361b6353a809a3/raw/2cfd79e04d573a524084db55627ebcee2c3f1938/worldcities-new.csv\",\n ({ city, lat, lng, country, population }) => ({\n city,\n lat: +lat,\n lng: +lng,\n country,\n population: +population\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}