29:null 2a:["$","title",null,{"children":"Find the contour of a camera visible area | Sylvain Lesage | Observable"}] 2f:T41f,md`## Function Compute the contour of the area of intersection between a perspective camera frustum and an horizontal plane (\`y=0\`). Use as ~~~js points = intersectPlaneCamera(options) ~~~ with \`options\` an object that contains the following properties:

camera: A [PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) object. Required
xExtent: An array \`[xmin, xmax]\` of the plane limits along the \`x\` axis. \`xmin\` is assumed to be lower than \`xmax\`. Required
zExtent: An array \`[zmin, zmax]\` of the plane limits along the \`z\` axis. \`zmin\` is assumed to be lower than \`zmax\`. Required
y: The \`y\` coordinate of the plane. Defaults to 0.
tolerance: Small margin around the pitch and frustum to avoid losing points that are exactly on a border due to precision error. Defaults to 0.001.

It returns an array of [Vector3](https://threejs.org/docs/#api/en/math/Vector3) objects. `30:Tac5,function intersectPlaneCamera({ camera, xExtent: [xmin, xmax], zExtent: [zmin, zmax], y = 0, tolerance = 0.001 }) { const pitchCorners = [ new THREE.Vector3(xmin, y, zmin), new THREE.Vector3(xmin, y, zmax), new THREE.Vector3(xmax, y, zmax), new THREE.Vector3(xmax, y, zmin) ]; const cameraCorners = []; for (const u of [-1, 1]) { for (const v of [-1, 1]) { const point = getTargetAtY(camera, y, u, v); if (point !== null) cameraCorners.push(point); } } const borderRays = [ new THREE.Ray(new THREE.Vector3(xmin, y, zmin), new THREE.Vector3(0, 0, 1)), new THREE.Ray(new THREE.Vector3(xmin, y, zmax), new THREE.Vector3(1, 0, 0)), new THREE.Ray( new THREE.Vector3(xmax, y, zmax), new THREE.Vector3(0, 0, -1) ), new THREE.Ray(new THREE.Vector3(xmax, y, zmin), new THREE.Vector3(-1, 0, 0)) ]; const borderIntersections = []; const frustum = new THREE.Frustum(); frustum.setFromProjectionMatrix( camera.projectionMatrix.clone().multiply(camera.matrixWorldInverse) ); const _point = new THREE.Vector3(); for (const plane of frustum.planes) { for (const ray of borderRays) { if (ray.intersectPlane(plane, _point) !== null) borderIntersections.push(_point.clone()); } } const innerIntersections = []; const pitchPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -y); for (const plane of frustum.planes) { const ray = intersectPlanes(plane, pitchPlane); if (ray !== null) { for (const plane2 of frustum.planes.filter(p => p !== plane)) { if (ray.intersectPlane(plane2, _point) !== null) innerIntersections.push(_point.clone()); } } } // adapted from https://github.com/mrdoob/three.js/blob/master/src/math/Frustum.js // to add a tolerance function containsPoint(point) { const planes = frustum.planes; for (let i = 0; i < 6; i++) { if (planes[i].distanceToPoint(point) < -tolerance) { return false; } } return true; } function ok(p) { return ( p.x > xmin - tolerance && p.x < xmax + tolerance && p.z > zmin - tolerance && p.z < zmax + tolerance && containsPoint(p) ); } const points = { pitchCorners: pitchCorners.filter(ok), cameraCorners: cameraCorners.filter(ok), borderIntersections: borderIntersections.filter(ok), innerIntersections: innerIntersections.filter(ok) }; const points2D = Object.values(points) .map(pts => pts.map(d => [d.x, d.z])) .flat(); const hull = d3.polygonHull(points2D); const contour = hull === null ? [] : hull.reverse().map(p => new THREE.Vector3(p[0], y, p[1])); contour.points = points; return contour; }31:Te4a,function showPitchAndCamera({ camera, y = 0, pitchCorners = [], cameraCorners = [], borderIntersections = [], innerIntersections = [], contour = [], radius = 1, invalidation }) { const aspect = 16 / 9; const w = width; const h = w / aspect; const renderer = new THREE.WebGLRenderer(); renderer.setSize(w, h); renderer.setPixelRatio(devicePixelRatio); const freeCamera = new THREE.PerspectiveCamera(40, aspect, 1, 1000); const controls = new THREE.OrbitControls(freeCamera, renderer.domElement); freeCamera.position.set(-lx, 150 + y, 3 * lz); controls.target.set(0, y, 0); controls.update(); const scene = new THREE.Scene(); scene.background = new THREE.Color("#888888"); const material = new THREE.MeshBasicMaterial({ color: 'lightblue', side: THREE.DoubleSide }); const pitch = new THREE.PlaneGeometry(lx, lz); pitch.rotateX(-Math.PI / 2); pitch.translate(0, y, 0); scene.add(new THREE.Mesh(pitch, material)); scene.add(new THREE.CameraHelper(camera)); function createSphere(center, color) { const geometry = new THREE.SphereGeometry(radius, 32, 32); const material = new THREE.MeshBasicMaterial({ color }); const mesh = new THREE.Mesh(geometry, material); mesh.position.copy(center); return mesh; } for (const d of pitchCorners) { scene.add(createSphere(d, 'red')); } for (const d of cameraCorners) { scene.add(createSphere(d, 'green')); } for (const d of borderIntersections) { scene.add(createSphere(d, 'blue')); } for (const d of innerIntersections) { scene.add(createSphere(d, 'brown')); } if (contour.length) { { const pairs = d3.pairs([...contour, contour[0]]); for (const pair of pairs) { const path = new THREE.LineCurve3(...pair); const geometry = new THREE.TubeGeometry( path, 1000, radius / 4, 16, true ); const material = new THREE.MeshBasicMaterial({ color: 'black' }); scene.add(new THREE.Mesh(geometry, material)); } } { const shape = new THREE.Shape(); shape.moveTo( contour[contour.length - 1].x, contour[contour.length - 1].z ); for (const p of contour) { shape.lineTo(p.x, p.z); } const geometry = new THREE.ShapeGeometry(shape); geometry.rotateX(Math.PI / 2); geometry.translate(0, y, 0); // both sides { const material = new THREE.MeshBasicMaterial({ color: 'lightyellow', // https://stackoverflow.com/questions/25165013/three-js-overlapping-layers-flickering polygonOffset: true, polygonOffsetFactor: -1 / 10, side: THREE.DoubleSide }); scene.add(new THREE.Mesh(geometry, material)); } { const material = new THREE.MeshBasicMaterial({ color: 'lightyellow', // https://stackoverflow.com/questions/25165013/three-js-overlapping-layers-flickering polygonOffset: true, polygonOffsetFactor: 1 / 10, side: THREE.DoubleSide }); scene.add(new THREE.Mesh(geometry, material)); } } } let lastRequest; function animate(timestamp) { renderer.render(scene, freeCamera); lastRequest = requestAnimationFrame(animate); } lastRequest = requestAnimationFrame(animate); invalidation.then(() => { cancelAnimationFrame(lastRequest); controls.dispose(); [...scene.children].forEach(d => { d.material && d.material.dispose(); d.geometry && d.geometry.dispose(); }); }); return renderer.domElement; }32:[] 2d:{"id":"51a10b5c6fdc42ba","slug":"find-the-contour-of-a-camera-visible-area","title":"Find the contour of a camera visible area","thumbnail":"071811370eece11fdaab6d5a81fe39266410b490af9df8a0ad400e409742fc50","access_level":"public","create_time":"$D2021-03-01T21:36:13.857Z","update_time":"$D2021-03-14T13:41:10.831Z","view_time":null,"first_public_time":"$D2021-03-02T00:18:37.954Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":459,"publish_version":459,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"82eb776e64acf8bd","slug":"three-js","title":"Three.js","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"title":"Find the contour of a camera visible area","cells":[{"id":0,"value":"md`# Find the contour of a camera visible area\n\n> A rectangular pitch is filmed with a camera. We want to get the coordinates of the visible area.\n\nLet's assume the rectangular pitch lies on the plane y=0, with the convention Y-Up.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"lx = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"lz = 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"pitch = {\n const pitch = new THREE.PlaneGeometry(lx, lz);\n pitch.rotateX(-Math.PI / 2);\n return pitch;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"camera = {\n const camera = new THREE.PerspectiveCamera(30, 16 / 9, 0.1, 100);\n camera.position.set(-lx * 0.65, 20, lz);\n camera.lookAt(-lx / 2, 0, -lz / 2);\n camera.updateMatrixWorld();\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"md`The 3D scene shows the pitch in blue, and the camera limits (called frustum) with a wireframe style. We want to find the coordinates of the area of visibility of the camera on the pitch, as a polygon which points (if any) are included inside the pitch: \\`x\\` in \\`[-lx/2, lx/2]\\`, \\`y=0\\` and \\`z\\` in \\`[-lz/2, lz/2]\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"showPitchAndCamera({ pitch, camera, invalidation })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`Our strategy is to:\n- compute all the candidate points,\n- select the points that lie inside the pitch and inside the frustum, and finally\n- compute the convex contour.\n\nThis makes two unverified assumptions: 1. we thought about all the possible points, 2. the polygon will always be convex.\n\n### Compute all the possible polygon points\nThe possible points are:\n\n- the four pitch corners\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"pitchCorners = [\n new THREE.Vector3(-lx / 2, 0, -lz / 2),\n new THREE.Vector3(-lx / 2, 0, lz / 2),\n new THREE.Vector3(lx / 2, 0, -lz / 2),\n new THREE.Vector3(lx / 2, 0, lz / 2)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`- zero to four camera corners (some corners might not intersect with the plane):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"cameraCorners = {\n const cameraCorners = [];\n for (const u of [-1, 1]) {\n for (const v of [-1, 1]) {\n const point = getTargetAtY(camera, 0, u, v);\n if (point !== null) cameraCorners.push(point);\n }\n }\n return cameraCorners;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`- zero to 24 intersections between the 6 frustum planes and the 4 plane borders`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"borderIntersections = {\n const borderRays = [\n new THREE.Ray(\n new THREE.Vector3(-lx / 2, 0, -lz / 2),\n new THREE.Vector3(0, 0, 1)\n ),\n new THREE.Ray(\n new THREE.Vector3(-lx / 2, 0, lz / 2),\n new THREE.Vector3(1, 0, 0)\n ),\n new THREE.Ray(\n new THREE.Vector3(lx / 2, 0, lz / 2),\n new THREE.Vector3(0, 0, -1)\n ),\n new THREE.Ray(\n new THREE.Vector3(lx / 2, 0, -lz / 2),\n new THREE.Vector3(-1, 0, 0)\n )\n ];\n\n const points = [];\n const frustum = new THREE.Frustum();\n frustum.setFromProjectionMatrix(\n camera.projectionMatrix.clone().multiply(camera.matrixWorldInverse)\n );\n const _point = new THREE.Vector3();\n for (const plane of frustum.planes) {\n for (const ray of borderRays) {\n if (ray.intersectPlane(plane, _point) !== null)\n points.push(_point.clone());\n }\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`- zero to 30 intersections between the 6 intersection lines between the 6 frustum planes and the pitch plane, and the 5 other frustum planes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"innerIntersections = {\n const pitchPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);\n const frustum = new THREE.Frustum();\n frustum.setFromProjectionMatrix(\n camera.projectionMatrix.clone().multiply(camera.matrixWorldInverse)\n );\n const points = [];\n const _point = new THREE.Vector3();\n for (const plane of frustum.planes) {\n const ray = intersectPlanes(plane, pitchPlane);\n if (ray !== null) {\n for (const plane2 of frustum.planes.filter(p => p !== plane)) {\n if (ray.intersectPlane(plane2, _point) !== null)\n points.push(_point.clone());\n }\n }\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"md`In the 3D scene we show the candidate points:\n\n- ${pitchCorners.length} pitch corners, in red\n- ${cameraCorners.length} camera corners, in green\n- ${borderIntersections.length} border intersections between the 4 pitch borders and the 6 frustum planes, in blue\n- ${innerIntersections.length} inner intersections between the 6 frustum planes intersections with the pitch plane, and the 5 other frustum planes, in brown\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"showPitchAndCamera({\n pitch,\n camera,\n pitchCorners,\n cameraCorners,\n borderIntersections,\n innerIntersections,\n invalidation\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`### Select the points inside the pitch and frustum`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"points = {\n const tolerance = 0.001;\n\n const frustum = new THREE.Frustum();\n frustum.setFromProjectionMatrix(\n camera.projectionMatrix.clone().multiply(camera.matrixWorldInverse)\n );\n\n // adapted from https://github.com/mrdoob/three.js/blob/master/src/math/Frustum.js\n // to add a tolerance\n function containsPoint(point) {\n const planes = frustum.planes;\n for (let i = 0; i < 6; i++) {\n if (planes[i].distanceToPoint(point) < -tolerance) {\n return false;\n }\n }\n return true;\n }\n\n function ok(p) {\n return (\n p.x > -lx / 2 - tolerance &&\n p.x < lx / 2 + tolerance &&\n p.z > -lz / 2 - tolerance &&\n p.z < +lz / 2 + tolerance &&\n containsPoint(p)\n );\n }\n return {\n pitchCorners: pitchCorners.filter(ok),\n cameraCorners: cameraCorners.filter(ok),\n borderIntersections: borderIntersections.filter(ok),\n innerIntersections: innerIntersections.filter(ok)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`In the 3D scene we show the selected points which are both in the frustum and in the pitch:\n\n- ${points.pitchCorners.length} pitch corners, in red\n- ${points.cameraCorners.length} camera corners, in green\n- ${points.borderIntersections.length} border intersections between the 4 pitch borders and the 6 frustum planes, in blue\n- ${points.innerIntersections.length} inner intersections between the 6 frustum planes intersections with the pitch plane, and the 5 other frustum planes, in brown\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"showPitchAndCamera({\n pitch,\n camera,\n ...points,\n invalidation\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`### Compute the convex contour\n\nFinally we compute the convex hull around all the remaining points and represent it as a black line in the 3D scene.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"md`${((d3.polygonArea(contour.map(d => [d.x, d.z])) / (lx * lz)) * 100).toFixed(\n 2\n)}% of the pitch area is covered by the camera.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"contour = {\n const points2D = Object.values(points)\n .map(pts => pts.map(d => [d.x, d.z]))\n .flat();\n const hull = d3.polygonHull(points2D);\n return hull == null ? [] : hull.map(p => new THREE.Vector3(p[0], 0, p[1]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"showPitchAndCamera({\n pitch,\n camera,\n ...points,\n contour,\n invalidation\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"contour2 = intersectPlaneCamera({\n camera,\n xExtent: [-lx / 2, lx / 2],\n zExtent: [-lz / 2, lz / 2],\n y\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"viewof y = Range([-50, 50], { label: 'y' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"showPitchAndCamera({\n pitch,\n camera,\n y,\n contour: contour2,\n ...contour2.points,\n invalidation\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`### CHANGELOG\n\n- 2021/03/14: add .dispose() to all the objects where this makes sense\n- 2021/03/13: always pass a target argument to Ray.intersectPlane() to remove a warning\n- 2021/03/02: add \\`y\\` parameter to intersectPlaneCamera to set the plane vertical position\n- 2021/03/02: provide the intersectPlaneCamera function\n- 2021/03/01: creation\n\n### TODO\n\n- release the assumption that the plane is y = constant\n- review, profile and optimize\n- decide what is \"visible\" (eg. if the camera is below y)\n- which order: clockwise / anticlockwise\n- extend to any Camera, instead of only PerspectiveCamera\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"import { intersectPlanes } with { THREE } from '@severo/three-js-utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"import { getTargetAtY } with {\n THREE\n} from '@severo/three-js-perspective-camera-utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"import { Range } from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"threeVersion = '0.125'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"import { THREE } with { threeVersion } from '@severo/three'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"