31:T4d9,{ const gutter = 40; const w = (width - 2 * gutter) / 3; const div = html`

`; for (const key of Object.keys(combinations)) { const sceneParameters = { pool_length: combinations[key].pool_length, pool_width: combinations[key].pool_width, num_lanes: combinations[key].lanes, pool_depth: 2, shininess: 0.1, parameters }; const generator = createGenerator({ width: w, height: (w * 9) / 16, sceneParameters }); const filename = `swimming-pool-${combinations[key].pool_length}x${combinations[key].pool_width}-${key}.gltf`; const card = html`

`; card.appendChild(generator.interactive(0, invalidation)); card.appendChild( html`

${key}
`${combinations[key].pool_length} x ${combinations[key].pool_width}, ${ combinations[key].lanes } lanes`

Download as glTF` ); invalidation.then(() => { generator.dipose(); }); div.appendChild(card); } return div; }32:T6dd,parameters = ({ unit: 'm', lane_width: 2.5, lane_rope_float_diameter: 0.15, lane_rope_ends_length: 5, lane_rope_ends_color: 'red', lane_rope_15m_center: 15, lane_rope_15m_length: 0.2, // not specified in the rule lane_rope_25m_center: 25, lane_rope_25m_length: 0.8, // not specified in the rule lane_marking_color: 'darkblue', // the rule mentions 'dark contrasting colour' lane_marking_width_min: 0.2, lane_marking_width: 0.25, // not specified in the rule lane_marking_width_max: 0.3, lane_marking_distance_to_end: 2, lane_marking_crossline_length: 1, lane_marking_small_crossline_length: 0.5, lane_marking_small_crossline_distance_to_end: 15, floor_color: 'lightblue', // not specified in the rule floor_margin: 10, // not specified in the rule floor_depth: 10, // not specified in the rule starting_platforms_base_width: 1.5, // not specified in the rule starting_platforms_base_height: 0.3, // not specified in the rule starting_platforms_base_color: 'white', // not specified in the rule starting_platforms_length: 0.5, // not specified in the rule starting_platforms_width: 0.5, // not specified in the rule starting_platforms_height: 0.3, // not specified in the rule starting_platforms_color: 'darkblue', // not specified in the rule lane_numbers: { eight: [1, 2, 3, 4, 5, 6, 7, 8], ten: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }, lane_rope_colors: { eight: [ 'green', 'blue', 'blue', 'yellow', 'yellow', 'yellow', 'blue', 'blue', 'green' ], ten: [ 'green', 'blue', 'blue', 'blue', 'yellow', 'yellow', 'yellow', 'blue', 'blue', 'blue', 'green' ] } })33:T736,function createGenerator({ width: w = width, height: h = (w / 16) * 9, dpr = window.devicePixelRatio, sceneParameters = {} } = {}) { const width = w; const height = h; const defaultSceneParameters = { pool_length: 50, pool_width: 25, num_lanes: 'ten', pool_depth: 2, shininess: 0.1, parameters }; const sceneParametersWithDefaults = { ...defaultSceneParameters, ...sceneParameters, parameters: { ...defaultSceneParameters.parameters, ...(sceneParameters.parameters || {}) } }; const scene = new THREE.Scene(); const cameras = createCameras(); const pool = createSwimmingPool(sceneParametersWithDefaults); scene.add(pool); scene.add(createLights()); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(dpr); renderer.setSize(width, height); const canvas = renderer.domElement; function captureFromCamera(cameraId) { renderer.render(scene, cameras[cameraId].cam); const newCanvas = html`

`; newCanvas.getContext('2d').drawImage(canvas, 0, 0); return newCanvas; } function interactive(cameraId, invalidation) { const camera = cameras[cameraId].cam.clone(); const controls = new THREE.OrbitControls(camera, renderer.domElement); function update() { renderer.render(scene, camera); } controls.addEventListener('change', update); invalidation.then(() => { controls.removeEventListener('change', update); controls.dispose(); }); // init update(); return canvas; } const dispose = () => { pool.dispose(); }; return { captureFromCamera, interactive, cameras, dispose }; }34:T5c6,function createSwimmingPool({ pool_length = 50, pool_width = 25, num_lanes = 'ten', pool_depth = 2, // TODO: follow a profile instead of a constant depth shininess = 0.1, parameters: p = parameters, polygonOffsetFactor = 0 // See https://www.opengl.org/archives/resources/faq/technical/polygonoffset.htm } = {}) { const parameters = p; const swimmingPool = new THREE.Group(); swimmingPool.add( createFloor({ parameters, pool_length, pool_width, shininess, polygonOffsetFactor }) ); swimmingPool.add( createPoolFloor({ parameters, pool_length, pool_width, profile: [[0, pool_depth], [1, pool_depth]], shininess }) ); swimmingPool.add( createPoolFloorMarks({ parameters, pool_length, pool_width, num_lanes, pool_depth, // TODO: follow a profile instead of a constant depth shininess }) ); swimmingPool.add( createStartingPlatformsBases({ parameters, pool_length, pool_width, shininess }) ); swimmingPool.add( createStartingPlatforms({ parameters, pool_length, pool_width, num_lanes, shininess }) ); swimmingPool.add( createRopes({ parameters, pool_length, pool_width, num_lanes, shininess }) ); swimmingPool.dispose = () => { [...swimmingPool.children].forEach(d => { d.dispose && d.dispose(); }); }; return swimmingPool; }35:T5bb,function createFloor({ parameters: p = parameters, pool_length = 50, pool_width = 25, shininess = 0.1, polygonOffsetFactor = 0 // See https://www.opengl.org/archives/resources/faq/technical/polygonoffset.htm } = {}) { const parameters = p; const fc = palette[parameters.floor_color]; const fm = parameters.floor_margin; const fd = parameters.floor_depth; const floor = new THREE.Group(); const material = new THREE.MeshPhongMaterial({ color: fc, shininess, // https://stackoverflow.com/questions/25165013/three-js-overlapping-layers-flickering polygonOffset: polygonOffsetFactor !== 0, polygonOffsetFactor }); { const geometry = new THREE.BoxBufferGeometry(pool_length + 2 * fm, fd, fm); const part1 = new THREE.Mesh(geometry, material); part1.position.set(0, -fd / 2, -pool_width / 2 - fm / 2); floor.add(part1); const part2 = part1.clone(); part2.position.set(0, -fd / 2, pool_width / 2 + fm / 2); floor.add(part2); } { const geometry = new THREE.BoxBufferGeometry(fm, fd, pool_width); const part1 = new THREE.Mesh(geometry, material); part1.position.set(-pool_length / 2 - fm / 2, -fd / 2, 0); floor.add(part1); const part2 = part1.clone(); part2.position.set(pool_length / 2 + fm / 2, -fd / 2, 0); floor.add(part2); } floor.dispose = () => { material.dispose(); [...floor.children].forEach(d => d.geometry.dispose()); }; return floor; }36:T40b,function createPoolFloor({ parameters: p = parameters, pool_length = 50, pool_width = 25, //profile = [[0, 5], [0.25, 5], [0.625, 2], [1, 1]], profile = [[0, 2], [1, 2]], shininess = 0.1 } = {}) { const parameters = p; const fc = palette[parameters.floor_color]; const fd = parameters.floor_depth; const material = new THREE.MeshPhongMaterial({ color: fc, shininess, side: THREE.DoubleSide }); const shape = new THREE.Shape(); shape.moveTo(0, 0); for (const point of profile) { shape.lineTo(point[0] * pool_length, fd - point[1]); } shape.lineTo(pool_length, 0); shape.lineTo(0, 0); const extrudeSettings = { steps: 2, depth: pool_width, bevelEnabled: false }; const geometry = new THREE.ExtrudeBufferGeometry(shape, extrudeSettings); const poolFloor = new THREE.Mesh(geometry, material); poolFloor.position.set(-pool_length / 2, -fd, -pool_width / 2); poolFloor.dispose = () => { material.dispose(); geometry.dispose(); }; return poolFloor; }37:T8f1,function createPoolFloorMarks({ parameters: p = parameters, pool_length = 50, pool_width = 25, num_lanes = 'ten', pool_depth = 2, // TODO: follow a profile instead of a constant depth shininess = 0.1 } = {}) { const parameters = p; const w05 = parameters.lane_marking_width / 2; const dte = parameters.lane_marking_distance_to_end; const cl05 = parameters.lane_marking_crossline_length / 2; const scl05 = parameters.lane_marking_small_crossline_length / 2; const scdte = parameters.lane_marking_small_crossline_distance_to_end; const material = new THREE.MeshPhongMaterial({ shininess, side: THREE.DoubleSide, color: palette[parameters.lane_marking_color] }); function createMarkRect(from, to, w05) { const shape = new THREE.Shape(); shape.moveTo(from, -w05); shape.lineTo(to, -w05); shape.lineTo(to, w05); shape.lineTo(from, w05); shape.lineTo(from, -w05); const geometry = new THREE.ShapeBufferGeometry(shape); const markRect = new THREE.Mesh(geometry, material); return markRect; } function createMark(laneNumber) { const mark = new THREE.Group(); mark.add(createMarkRect(dte, pool_length - dte, w05)); mark.add(createMarkRect(dte - w05, dte + w05, cl05)); mark.add(createMarkRect(scdte - w05, scdte + w05, scl05)); mark.add( createMarkRect( pool_length - scdte - w05, pool_length - scdte + w05, scl05 ) ); mark.add( createMarkRect(pool_length - dte - w05, pool_length - dte + w05, cl05) ); mark.position.x = -pool_length / 2; mark.rotateX(Math.PI * 0.5); return mark; } const laneNumbers = parameters.lane_numbers[num_lanes]; const laneCenter = i => pool_width / 2 + (4.5 - i) * parameters.lane_width; const marks = new THREE.Group(); for (const laneNumber of laneNumbers) { const mark = createMark(laneNumber); mark.position.z = laneCenter(laneNumber) - pool_width / 2; marks.add(mark); } const gapFor3DRendering = 0.1; // TODO: put as a parameter marks.position.y = -pool_depth + gapFor3DRendering; marks.dispose = () => { material.dispose(); [...marks.children].forEach(mark => [...mark.children].forEach(d => d.geometry.dispose()) ); }; return marks; }38:T5a9,function createStartingPlatforms({ parameters: p = parameters, pool_length = 50, pool_width = 25, num_lanes = 'ten', shininess = 0.1 } = {}) { const parameters = p; const spbw = parameters.starting_platforms_base_width; const spbh = parameters.starting_platforms_base_height; const spl = parameters.starting_platforms_length; const spw = parameters.starting_platforms_width; const sph = parameters.starting_platforms_height; const spc = palette[parameters.starting_platforms_color]; const material = new THREE.MeshPhongMaterial({ color: spc, shininess }); const geometry = new THREE.BoxBufferGeometry(spl, sph, spw); function createPlatform(laneNumber) { const platform = new THREE.Mesh(geometry, material); // TODO: add the numbers // TODO: blue above, the rest in white platform.position.set(-spl / 2, sph / 2, 0); return platform; } const laneNumbers = parameters.lane_numbers[num_lanes]; const laneCenter = i => pool_width / 2 + (4.5 - i) * parameters.lane_width; const platforms = new THREE.Group(); for (const laneNumber of laneNumbers) { const platform = createPlatform(laneNumber); platform.position.z += laneCenter(laneNumber) - pool_width / 2; platforms.add(platform); } platforms.position.x = -pool_length / 2; platforms.position.y = spbh; platforms.dispose = () => { material.dispose(); geometry.dispose(); }; return platforms; }39:Tc7e,function createRopes({ parameters: p = parameters, pool_length = 50, pool_width = 25, num_lanes = 'ten', shininess = 0.1 } = {}) { const parameters = p; const el = parameters.lane_rope_ends_length; const ec = parameters.lane_rope_ends_color; const c15m = parameters.lane_rope_15m_center; const l15m05 = parameters.lane_rope_15m_length / 2; const c25m = parameters.lane_rope_25m_center; const l25m05 = parameters.lane_rope_25m_length / 2; const material = new THREE.MeshPhongMaterial({ shininess, side: THREE.DoubleSide }); function createRopePart(from, to, color) { const length = to - from; const fd05 = parameters.lane_rope_float_diameter / 2; const geometry = new THREE.CylinderBufferGeometry(fd05, fd05, length, 32); const ropePart = new THREE.Mesh(geometry, material.clone()); ropePart.material.color.set(palette[color]); ropePart.rotateZ(Math.PI / 2); ropePart.position.set(from + length / 2, 0, 0); return ropePart; } function createRope(laneNumber1, laneNumber2, laneRopeColor) { const rope = new THREE.Group(); // the order is different in 25m or 50m swimming pools const c15mOrdered = [c15m, pool_length - c15m].sort((a, b) => a - b); rope.add(createRopePart(0, el, ec)); rope.add(createRopePart(el, c15mOrdered[0] - l15m05, laneRopeColor)); rope.add( createRopePart(c15mOrdered[0] - l15m05, c15mOrdered[0] + l15m05, ec) ); if (pool_length === 50) { rope.add( createRopePart(c15mOrdered[0] + l15m05, c25m - l25m05, laneRopeColor) ); rope.add(createRopePart(c25m - l25m05, c25m + l25m05, ec)); rope.add( createRopePart(c25m + l25m05, c15mOrdered[1] - l15m05, laneRopeColor) ); } else { rope.add( createRopePart( c15mOrdered[0] + l15m05, c15mOrdered[1] - l15m05, laneRopeColor ) ); } rope.add( createRopePart(c15mOrdered[1] - l15m05, c15mOrdered[1] + l15m05, ec) ); rope.add( createRopePart(c15mOrdered[1] + l15m05, pool_length - el, laneRopeColor) ); rope.add(createRopePart(pool_length - el, pool_length, ec)); rope.position.x = -pool_length / 2; return rope; } const laneRopeColors = parameters.lane_rope_colors[num_lanes]; const laneNumbers = parameters.lane_numbers[num_lanes]; const laneCenter = i => pool_width / 2 + (4.5 - i) * parameters.lane_width; const ropes = new THREE.Group(); for (const [idx, laneRopeColor] of laneRopeColors.entries()) { const laneNumber1 = idx - 1 >= 0 ? laneNumbers[idx - 1] : laneNumbers[0] - 1; const laneNumber2 = idx <= laneNumbers.length - 1 ? laneNumbers[idx] : laneNumbers[laneNumbers.length - 1] + 1; const rope = createRope(laneNumber1, laneNumber2, laneRopeColor); rope.position.z = (laneCenter(laneNumber1) + laneCenter(laneNumber2)) / 2 - pool_width / 2; ropes.add(rope); } ropes.dispose = () => { material.dispose(); [...ropes.children].forEach(rope => [...rope.children].forEach(d => { d.geometry.dispose(); d.material.dispose(); }) ); }; return ropes; }3a:[{"id":"146d98a41d2940e8037fbf18a76da5d52180cc4e34000622d776a6c717ba00ad63a1304e336880933e5371cac4a84ab96977ca41947198a04dc6a4eb7f45253f","href":"https://static.observableusercontent.com/files/146d98a41d2940e8037fbf18a76da5d52180cc4e34000622d776a6c717ba00ad63a1304e336880933e5371cac4a84ab96977ca41947198a04dc6a4eb7f45253f","name":"swimmingpool.jpg","type":"image/jpeg","lastModified":1607439245999.197,"size":274793}] 2f:{"title":"Swimming pool 3D model","cells":[{"id":0,"value":"md`# Swimming pool 3D model`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"{\n const generator = createGenerator();\n const canvas = generator.interactive(0, invalidation);\n invalidation.then(() => {\n generator.dispose();\n });\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"md`--- \nThe size and marks of competition swimming pools are officially described by the [“Fédération Internationale de Natation” (FINA)](https://www.fina.org/) in its [Facility Rules](https://www.fina.org/rules/facility-rules).\n\n[

](https://www.fina.org/sites/default/files/2017_2021_facilities_28012020_medium_ad.pdf)\n\nThere are two lengths: 25m and 50m, and the number of lanes can be 8 or 10. The color and size of the lane ropes and lane markings are fixed.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1562,"value":"md`Also see https://observablehq.com/@severo/swimming-pool-pitch to generate 2D images of the same swimming pools.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`---\n\n### Credits\n\n_Developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage._\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`\n### CHANGELOG\n\n- 2021/03/14: add .dispose() to all the objects where this makes sense\n- 2021/03/07: add polygonOffsetFactor option to avoid z-fighting on the floor\n- 2020/12/11: use Y-Up convention. This fixes the GLTF import in Blender.\n- 2020/12/08: creation\n\n### TODO\n\n- add water: https://threejs-water.sydneyzh.com/\n- set a variable depth pool floor\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"combinations = ({\n olympic_games: {\n pool_length: 50,\n pool_width: 25,\n lanes: \"eight\"\n },\n world_championships: {\n pool_length: 50,\n pool_width: 25,\n lanes: \"ten\"\n },\n world_championships_temporary: {\n pool_length: 50,\n pool_width: 26,\n lanes: \"ten\"\n },\n world_championships_25: {\n pool_length: 25,\n pool_width: 25,\n lanes: \"ten\"\n },\n eight_lanes_25: {\n pool_length: 25,\n pool_width: 21,\n lanes: \"eight\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1273,"value":"palette = ({\n red: '#C0402D',\n blue: '#4CACFF',\n yellow: '#FFFB97',\n green: '#296F7E',\n lightblue: \"#67AFED\",\n darkblue: '#084E7D',\n white: '#FFFFFF'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1096,"value":"function createCameras({ aspect = 16 / 9 } = {}) {\n const detachedCamera = new THREE.PerspectiveCamera(40, aspect, 0.1, 300);\n detachedCamera.up.set(0, 1, 0);\n detachedCamera.position.set(-40, 10, 30);\n detachedCamera.lookAt(0, 0, 0);\n detachedCamera.updateMatrixWorld();\n return [{ cam: detachedCamera, desc: 'detached camera' }];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"function createStartingPlatformsBases({\n parameters: p = parameters,\n pool_length = 50,\n pool_width = 25,\n shininess = 0.1\n} = {}) {\n const parameters = p;\n const spbw = parameters.starting_platforms_base_width;\n const spbh = parameters.starting_platforms_base_height;\n const spbc = palette[parameters.starting_platforms_base_color];\n\n const bases = new THREE.Group();\n const material = new THREE.MeshPhongMaterial({\n color: spbc,\n shininess\n });\n const geometry = new THREE.BoxBufferGeometry(spbw, spbh, pool_width);\n\n const part1 = new THREE.Mesh(geometry, material);\n part1.position.set(-pool_length / 2 - spbw / 2, spbh / 2, 0);\n bases.add(part1);\n const part2 = new THREE.Mesh(geometry, material);\n part2.position.set(pool_length / 2 + spbw / 2, spbh / 2, 0);\n bases.add(part2);\n\n bases.dispose = () => {\n material.dispose();\n geometry.dispose();\n };\n\n return bases;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1179,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"function createLights() {\n const lights = new THREE.Group();\n\n {\n const light = new THREE.AmbientLight(0xffffff, 0.2);\n lights.add(light);\n light.castShadow = true;\n }\n\n {\n const light = new THREE.DirectionalLight(0xffffff, 0.8);\n light.position.set(0, 1, 0);\n lights.add(light);\n light.castShadow = true;\n }\n\n {\n const light = new THREE.PointLight(0xffffff, 1, 100);\n light.position.set(0, 10, 0);\n lights.add(light);\n }\n\n return lights;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"function createSceneForGLTF({\n pool_length = 50,\n pool_width = 25,\n num_lanes = 'ten',\n pool_depth = 2, // TODO: follow a profile instead of a constant depth\n shininess = 0.1,\n parameters: p = parameters,\n invalidation\n} = {}) {\n const parameters = p;\n const scene = new THREE.Scene();\n const pool = createSwimmingPool({\n pool_length,\n pool_width,\n num_lanes,\n pool_depth,\n shininess,\n parameters\n });\n scene.add(pool);\n scene.add(createLights());\n scene.add(createCameras({ aspect: 16 / 9 }));\n\n scene.dispose = () => {\n pool.dispose();\n };\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1527,"value":"async function gltfURL({ filename, sceneParameters, invalidation }) {\n const exporter = new THREE.GLTFExporter();\n const scene = createSceneForGLTF(sceneParameters);\n const gltf = await new Promise(resolve =>\n exporter.parse(scene, resolve, {\n binary: false,\n truncateDrawRange: false\n })\n );\n var file = new File([JSON.stringify(gltf)], filename, {\n type: \"model/gltf+json\"\n });\n const url = URL.createObjectURL(file);\n invalidation.then(() => {\n scene.dispose();\n URL.revokeObjectURL(url);\n });\n\n return url;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"threeVersion = '0.123'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1626,"value":"modulePaths = ['controls/OrbitControls', 'exporters/GLTFExporter']","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"import { THREE } with { modulePaths } from '@severo/three'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}

${key} ${combinations[key].pool_length} x ${combinations[key].pool_width}, ${ combinations[key].lanes } lanes

${key}
`${combinations[key].pool_length} x ${combinations[key].pool_width}, ${ combinations[key].lanes } lanes`