2d:null 2e:["$","title",null,{"children":"WEB3D 2020 DEMO (Andreas Plesch) | Andreas Plesch | Observable"}] 33:Ta6f,mutable geodom = { const globe = html` `; yield globe; }34:[{"id":"134f034794909881d3bce866326bd60b19da641119d7ba7f4179f2ad1c1ecea29a38d440f1aa598d3ad5dd01dd2281e985fa6800aa15e77c10565be2f3c4ee0e","href":"https://static.observableusercontent.com/files/134f034794909881d3bce866326bd60b19da641119d7ba7f4179f2ad1c1ecea29a38d440f1aa598d3ad5dd01dd2281e985fa6800aa15e77c10565be2f3c4ee0e","name":"600x300GlobeGeoElevationGrid.x3d","type":"model/x3d+xml","lastModified":1577813774514.406,"size":948799}] 31:{"id":"8c0b7dd93fa7476b","slug":"sea-level-past-present-and-future","title":"WEB3D 2020 DEMO (Andreas Plesch)","thumbnail":"22d10a1fbdb46be391530e743ba0846a961aabc3e1b3f7953528896e3b3f0fa9","access_level":"public","create_time":"$D2018-06-02T19:51:48.983Z","update_time":"$D2020-10-27T23:50:46.196Z","view_time":null,"first_public_time":"$D2018-08-01T13:31:19.782Z","has_unpublished_edits":null,"fork":{"id":"be265093be09146f","slug":"geospatial-3d-dom-stretch-the-globe","title":"geospatial 3D DOM: Stretch the globe","owner":{"id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch"}},"stars":12,"starred":false,"owner":{"type":"team","id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":"starter_2024"},"version":1243,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null}],"members":[{"type":"individual","id":"171053d51d09c7fc","login":"andreasplesch","name":"Andreas Plesch","avatar_url":"https://avatars-next.observableusercontent.com/4da1ba746a4b25e755d1c9b71ca1c72165a9c40e02aee1f3fcae880584d70c9c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"fad18253ee738559","slug":"x3dom","title":"x3dom","owner":{"id":"3a7167e5e638bcd0","login":"andreasplesch","name":"Andreas Plesch"}},"type":"notebook","body":{"title":"WEB3D 2020 DEMO (Andreas Plesch)","cells":[{"id":1217,"value":"md`# WEB3D 2020 DEMO (Andreas Plesch)\n\n__The challenge: Learn and use modern web technology to visualize sea level change in 3D.__\n\n__solution: mesh Observable for easy publishing and programming with X3D for declarative 3D.__\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`## Sea Level 3D: Past, Present (and Future?)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\n\nSea levels are rising. Get a global feel for what it means if sea level rises by 1m, 10m, or hundreds of meters. Or drops, as it has in the past, by about 120m during the last glacial maximum (ice age). The plots below shows the magnitude of fluctuations over geologic time. Keep in mind that - due to plate tectonics - prior to the Cretaceous today's continents and oceans would be hard to recognize.\n\nThe globe above has very limited resolution, about 0.5° and is therefore only an approximation. It cannot be used to predict the impact of sea level rise on coastal communities, for example.\n\nDrag with left, zoom with right, and shift with middle mouse button. 'r' resets to initial view. This kind of navigation is built into the viewer [(x3dom)](http://x3dom.org/ \"x3dom's homepage\").\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"x3delement={\n return html`\n

\n\n\n\n \n \n \n \n \n \n \n\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"viewof oceanlevel = slider({\n style: 'width: 66%',\n min: -500,\n prefix: '-500m',\n max: 500,\n postfix: '500m |',\n value: 100,\n step: 0.1,\n title: 'ocean level',\n description: 'level in meters above modern level'\n //submit: 'do it!',\n \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"viewof ve = slider({\n min: 1,\n max: 300,\n value: 50,\n step: 0.1,\n title: 'vertical exaggeration of globe',\n submit: 'do it!'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"viewof oceantransparency = slider({\n min: 0,\n max: 1,\n value: 0.3,\n title: 'ocean transparency'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"viewof oceancolor = color ({\n title: 'ocean color',\n value: '#000d33'\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"viewof globecolor = color ({\n title: 'globe color',\n value: '#edede0'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"viewof globeperiod = slider({\n _style: 'width: 800px',\n min: 1,\n prefix: '1s',\n max: 500,\n postfix: '500s',\n value: 60,\n step: 0.5,\n title: 'globe day length',\n description: 'duration of one full rotation in seconds'\n //submit: 'do it!',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"md`\n# Figures\nThese plots provide estimates of sea level changes in the distant and more recent geologic past. The vertical axis shows the range of changes in meters.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"html`

\n $\"Phanerozoic$ \nhover for attribution

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"html`

\n $\"Post-Glacial$ \nhover for attribution

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md`\n# Plans\n- find Pleistocene curve, perhaps animate\n- high res for Florida\n- async for v.e.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`-----\n# Infrastructure\n## Let's make a globe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"md`\ngeodom is mutable. This is to avoid inserting the globe into the scene each time it is updated.\n\nThe x3d content includes the initial viewpoint and wrapper transform, apart from a template globe. The wrapper transform is there to align the geospatial content (the geo-nodes) with a horizon defined by the background node. However, then the viewpoint orientation needs to follow accordingly. This works by just rotating the viewpoint the same amount as the globe. Unfortunately, doing that breaks mobile navigation of the scene. This is why the viewpoint now has precomputed orientation and position fields and is not affected by the wrapper transform.` \n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"addglobetoscene = {\n const scene = x3delement.querySelector('scene');\n if (mutable geodom.parentNode != scene) scene.appendChild(mutable geodom); // avoid guard somehow\n //if (x3dom) x3delement.querySelector('x3d').runtime.fitAll();\n return true\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"md`\nIt took while to get the incantation of the await fetch sequence correct. Finally borrowed from an example.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"geogridele = html`${await FileAttachment('600x300GlobeGeoElevationGrid.x3d').text()}`.querySelector('geoelevationgrid')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"replaceglobe = {\n \n function updateGrid (shape, newgrid) {\n let grid = shape.querySelector('geoelevationgrid');\n shape.replaceChild(newgrid, grid);\n }\n \n geogridele.setAttribute('yScale', ve);\n updateGrid(mutable geodom.querySelector('shape[def=globe]'), geogridele); \n \n //do ocean as well\n let ocean = geogridele.cloneNode(true);\n let heights = ocean.getAttribute('xDimension') * ocean.getAttribute('zDimension');\n ocean.setAttribute('height', '0 '.repeat(heights));\n updateGrid(mutable geodom.querySelector('shape[def=oceanlevel]'), ocean);\n return ve;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"md`It was best to combine the yScale update and replacing the element into one cell.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"scaleocean = {\n let scale=1+oceanlevel*ve/6378137.0;\n geodom.querySelector('transform [def=oceanscale]')\n .setAttribute('scale',scale+\" \"+scale+\" \"+scale);\n return scale\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"md`### initialization and variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"x3dom = require('https://x3dom.org/download/dev/x3dom-full.js').catch(() => window.x3dom)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md` I could not figure out how to combine the require cell and the stylesheet cell into one cell`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"import {slider, color, checkbox} from \"@andreasplesch/inputsap\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`#### observable compatible css`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"x3dstyleforobservable = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"md`#### reactive infrastructure`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"color2x3dcolor = function (color) {\n const n = 4;\n return [1, 3, 5]\n .map(p => (('0x' + color.slice(p, p + 2)) / 255.0).toFixed(n))\n .join(' ');\n // const r = ('0x' + color.slice(1,3)) * 1.0/255;\n // const g = ('0x' + color.slice(3,5)) * 1.0/255;\n // const b = ('0x' + color.slice(5,7)) * 1.0/255;\n // return r.toFixed(n)+' '+g.toFixed(n)+' '+b.toFixed(n);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"oceanmaterial = {\n return geodom.querySelector('[def=ocean_mat]');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"spherematerial = {\n return geodom.querySelector('[def=globe_mat]');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"timesensor = {return geodom.querySelector('[DEF=time');}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"updateOcean = {\n oceanmaterial.setAttribute('diffuseColor', color2x3dcolor(oceancolor));\n oceanmaterial.setAttribute('transparency', oceantransparency);\n return oceanmaterial.diffuseColor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"updateGlobe = {\n spherematerial.setAttribute('diffusecolor', color2x3dcolor(globecolor)); \n return spherematerial.diffusecolor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"updateCycle = {\n timesensor.setAttribute('enabled', false);\n timesensor.setAttribute('cycleInterval', globeperiod);\n timesensor.setAttribute('enabled', true);\n return globeperiod;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"reloader = {\n //not required if require is at the bottom it seems\n x3dom.reload(x3delement);//x3delement only to help Observable\n //x3delement; // just to make reactive\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"