28:null 29:["$","title",null,{"children":"Fast Icosphere Mesh | ucyo | Observable"}] 2e:T870,icosphere = (order = 0) => { // set up a 20-triangle icosahedron const f = (1 + 5 ** 0.5) / 2; const T = 4 ** order; const vertices = new Float32Array((10 * T + 2) * 3); vertices.set(Float32Array.of( -1, f, 0, 1, f, 0, -1, -f, 0, 1, -f, 0, 0, -1, f, 0, 1, f, 0, -1, -f, 0, 1, -f, f, 0, -1, f, 0, 1, -f, 0, -1, -f, 0, 1)); let triangles = Uint32Array.of( 0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11, 11, 10, 2, 5, 11, 4, 1, 5, 9, 7, 1, 8, 10, 7, 6, 3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9, 9, 8, 1, 4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7); let v = 12; const midCache = order ? new Map() : null; // midpoint vertices cache to avoid duplicating shared vertices function addMidPoint(a, b) { const key = Math.floor((a + b) * (a + b + 1) / 2) + Math.min(a, b); // Cantor's pairing function let i = midCache.get(key); if (i !== undefined) { midCache.delete(key); return i; } midCache.set(key, v); for (let k = 0; k < 3; k++) vertices[3 * v + k] = (vertices[3 * a + k] + vertices[3 * b + k]) / 2; i = v++; return i; } let trianglesPrev = triangles; for (let i = 0; i < order; i++) { // subdivide each triangle into 4 triangles triangles = new Uint32Array(trianglesPrev.length * 4); for (let k = 0; k < trianglesPrev.length; k += 3) { const v1 = trianglesPrev[k + 0]; const v2 = trianglesPrev[k + 1]; const v3 = trianglesPrev[k + 2]; const a = addMidPoint(v1, v2); const b = addMidPoint(v2, v3); const c = addMidPoint(v3, v1); let t = k * 4; triangles[t++] = v1; triangles[t++] = a; triangles[t++] = c; triangles[t++] = v2; triangles[t++] = b; triangles[t++] = a; triangles[t++] = v3; triangles[t++] = c; triangles[t++] = b; triangles[t++] = a; triangles[t++] = b; triangles[t++] = c; } trianglesPrev = triangles; } // normalize vertices for (let i = 0; i < vertices.length; i += 3) { const m = 1 / Math.hypot(vertices[i + 0], vertices[i + 1], vertices[i + 2]); vertices[i + 0] *= m; vertices[i + 1] *= m; vertices[i + 2] *= m; } return {vertices, triangles}; }2f:[] 2c:{"id":"139620a4a8c30ae0","slug":"fast-icosphere-mesh","title":"Fast Icosphere Mesh","thumbnail":"c9bf6bc85e5448b5f6177a68fd82201f7e221a4e3bcd08081749c60732d854b7","access_level":"public","create_time":"$D2020-10-30T12:58:51.679Z","update_time":"$D2020-10-30T12:59:26.398Z","view_time":null,"first_public_time":"$D2020-11-05T13:18:15.708Z","has_unpublished_edits":null,"fork":{"id":"db049779ee6f5817","slug":"fast-icosphere-mesh","title":"Fast Icosphere Mesh","owner":{"id":"78f29d059906819a","login":"mourner","name":"Volodymyr Agafonkin"}},"stars":1,"starred":false,"owner":{"type":"team","id":"1ea83165ade6d01c","login":"ucyo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3eb8b81bc0ec66b6fb1114c806ee7bb621505b22954075a1bb5153556e77822b","tier":"starter_2024"},"version":542,"publish_version":542,"role":null,"authored":false,"authors":[{"type":"individual","id":"82a225f231f93a65","login":"ucyo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3eb8b81bc0ec66b6fb1114c806ee7bb621505b22954075a1bb5153556e77822b","tier":null}],"members":[{"type":"individual","id":"82a225f231f93a65","login":"ucyo","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3eb8b81bc0ec66b6fb1114c806ee7bb621505b22954075a1bb5153556e77822b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Fast Icosphere Mesh","cells":[{"id":0,"value":"md`# Fast Icosphere Mesh\n\nFast JavaScript icosphere mesh generation code based on [an article by Andreas Kahler](http://blog.andreaskahler.com/2009/06/creating-icosphere-mesh-in-code.html). Icosphere is a type of [geodesic polyhedron](https://en.wikipedia.org/wiki/Geodesic_polyhedron) that provides a good quality triangular mesh of a sphere with relatively evenly distributed vertices.\n\nReleased on NPM & GitHub as [icomesh](https://github.com/mourner/icomesh) module.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"renderer.domElement","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"viewof order = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"viewof flatShading = {\n const input = html``;\n const label = html`${input} Flat Shading`;\n input.oninput = () => {\n label.value = input.checked;\n input.dispatchEvent(new CustomEvent('input'));\n }\n label.value = true;\n return label;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"md`Generated a ${order}-order icosphere (${10 * 4 ** order + 2} vertices / ${20 * 4 ** order} triangles) in ${updatedMesh.time.toLocaleString()}ms.\n\nAs you can see, with proper shading, 4 subdivisions of an icosahedron are enough to get an approximation practically indistinguishable from a perfect sphere.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"maxOrder = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"updatedMesh = {\n let geometry = scene.getObjectByName('sphere').geometry;\n const now = performance.now();\n const {vertices, triangles} = icosphere(order);\n geometry.time = performance.now() - now;\n geometry.attributes.position.array.set(vertices);\n geometry.attributes.position.needsUpdate = true;\n geometry.index.array.set(triangles);\n geometry.index.needsUpdate = true;\n geometry.setDrawRange(0, triangles.length);\n renderer.render(scene, camera);\n return geometry;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"camera = {\n const camera = new THREE.PerspectiveCamera(25, 1, 0.1, 50);\n camera.position.z = 5;\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"renderer = {\n const size = Math.min(width, 500);\n\n const renderer = new THREE.WebGLRenderer({antialias: true});\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n\n renderer.setSize(size, size);\n renderer.setPixelRatio(devicePixelRatio);\n\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n renderer.render(scene, camera);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"scene = {\n const geometry = new THREE.BufferGeometry();\n const T = 4 ** maxOrder;\n const pos = new THREE.BufferAttribute(new Float32Array(3 * (10 * T + 2)), 3);\n geometry.addAttribute('position', pos);\n geometry.addAttribute('normal', pos);\n geometry.setIndex(new THREE.BufferAttribute(new Uint32Array(3 * 20 * T), 1));\n\n const mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({\n color: 0xce6b24, \n metalness: 0.2,\n roughness: 0.4,\n flatShading\n }));\n \n mesh.name = 'sphere';\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x444444);\n\n var lights = [\n new THREE.PointLight(0xffffff, 1, 0),\n new THREE.PointLight(0xffffff, 1, 0),\n new THREE.PointLight(0xffffff, 1, 0)\n ];\n\n lights[0].position.set(0, 40, 0);\n lights[1].position.set(20, 40, 20);\n lights[2].position.set(-20, -40, -20);\n \n for (const light of lights) scene.add(light);\n \n scene.add(mesh);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.108.0/build/three.min.js\");\n await require(\"three@0.108.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"