2c:null 2d:["$","title",null,{"children":"All-Sky Textures | David Kirkby | Observable"}] 32:T524,viewof options=view`

Use your mouse / touch to zoom and rotate.

${["obj",Inputs.radio(["sphere", "knot", "none"], {value:"sphere", label: "Shape:"})]}

${["mat",Inputs.radio(["reflect","refract"], {value:"reflect", label:"Material:"})]}

${["bg",Inputs.radio(["GAIA", "unWISE", "WISE", "SFD", "CMB"], {value:"GAIA", label: "Background:"})]}

Background image credits:

SFD Schlafly & Finkbeiner (2011) and Schlegel, Finkbeiner & Davis (1998)
WISE © NASA/JPL-Caltech/UCLA `33:T752,universe = { // WebGL rendering engine const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(viewWidth, viewHeight); renderer.setPixelRatio(devicePixelRatio); renderer.outputEncoding = THREE.sRGBEncoding; // Camera const fov = 90; const aspect = viewWidth / viewHeight; const near = 1; const far = 100000; const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 0, 1000); // Interactive mouse/touch controls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.minDistance = 500; controls.maxDistance = 4000; controls.addEventListener("change", () => renderer.render(scene, camera)); invalidation.then(() => (controls.dispose(), renderer.dispose())); // Shapes const sphereGeom = new THREE.IcosahedronGeometry(320, 15); const knotGeom = new THREE.TorusKnotGeometry(180,80,1500,200); const mat = new THREE.MeshLambertMaterial({ envMap: textures[0], reflectivity:1.0, refractionRatio:0.9 }); const sphere = new THREE.Mesh(sphereGeom, mat); const knot = new THREE.Mesh(knotGeom, mat); knot.visible = false; // Scene const scene = new THREE.Scene(); const ambient = new THREE.AmbientLight(0xffffff); scene.add(ambient); scene.add(sphere); scene.add(knot); scene.background = textures[0]; // Initial render renderer.render(scene, camera); // Callbacks return Object.assign(renderer.domElement, { setOptions(opts) { const texture=textures[opts.bg]; texture.mapping = opts.mat=="reflect" ? THREE.EquirectangularReflectionMapping: THREE.EquirectangularRefractionMapping; scene.background = texture; mat.envMap = texture; sphere.visible = opts.obj=="sphere"; knot.visible = opts.obj=="knot"; mat.needsUpdate = true; renderer.render(scene, camera); } }); }34:[] 30:{"id":"7463fdfa382b6f88","slug":"all-sky-textures","title":"All-Sky Textures","thumbnail":"4f88aee7647c7999d1d89ca13e84cf22fab8e631dd34c21392b0d7d71d30af9b","access_level":"public","create_time":"$D2021-12-21T22:25:28.358Z","update_time":"$D2022-05-24T23:43:08.404Z","view_time":null,"first_public_time":"$D2021-12-21T22:57:45.972Z","fork":{"id":"4d9b7665f00a916c","slug":"three-js","title":"Three.js","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":5,"starred":false,"owner":{"type":"team","id":"82762c8496f321fe","login":"dkirkby","name":"David Kirkby","avatar_url":"https://avatars-next.observableusercontent.com/5b2c32ac920111620eb8369d40c1cd0353430f60391a4e246bc9822ab20f6f2f","tier":"starter_2024"},"version":593,"publish_version":593,"role":null,"authored":false,"authors":[{"type":"individual","id":"b31e222c78b643d7","login":"dkirkby","name":"David Kirkby","avatar_url":"https://avatars-next.observableusercontent.com/5b2c32ac920111620eb8369d40c1cd0353430f60391a4e246bc9822ab20f6f2f","tier":null}],"members":[{"type":"individual","id":"b31e222c78b643d7","login":"dkirkby","name":"David Kirkby","avatar_url":"https://avatars-next.observableusercontent.com/5b2c32ac920111620eb8369d40c1cd0353430f60391a4e246bc9822ab20f6f2f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"5fa8f9e238592f8c","slug":"desi","title":"DESI","owner":{"id":"82762c8496f321fe","login":"dkirkby","name":"David Kirkby"}},"type":"notebook","body":{"title":"All-Sky Textures","cells":[{"id":242,"value":"# All-Sky Textures\n\nTry the standalone version [here](https://dkirkby.github.io/allsky/).\n\nDemonstrate the use of all-sky astronomical images that have been assembled into an equirectangular projection suitable for use as a WebGL texture. Based on this [THREE.js example](https://threejs.org/examples/#webgl_materials_envmaps).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":440,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":465,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":500,"value":"live = {\n universe.setOptions(options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"viewHeight = Math.round(0.7*viewWidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"viewWidth = Math.min(width, 1200)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"textures = {\n const loader = new THREE.TextureLoader();\n const load = url => new Promise(async resolve => loader.load(url, resolve));\n const base = \"https://dkirkby.github.io/allsky/img/\";\n const URLs = {\n GAIA: base+\"Gaia_EDR3_flux.jpg\",\n unWISE: base+\"unwise-neo6.jpg\",\n WISE: base+\"WISE-equi.jpg\",\n SFD: base+\"sfd.jpg\",\n CMB: base+\"Planck2018.jpg\",\n };\n const entries = Object.entries(URLs).map(async ([name,url]) => {\n const texture = await load(url);\n texture.mapping = THREE.EquirectangularReflectionMapping;\n texture.encoding = THREE.sRGBEncoding;\n return [name,texture];\n });\n return Object.fromEntries(await Promise.all(entries));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":433,"value":"import {view} from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"