31:T1d15,VisualizationSpace = /** @class */ (function () { function VisualizationSpace(containerDom, stockDimensions) { this.containerDom = containerDom; this.scene = this.initScene(); this.envelopeGroup = this.createEnvelopeGroup(stockDimensions); this.vizGroupWrapper = new THREE.Group(); this.scene.add(this.envelopeGroup); this.scene.add(this.vizGroupWrapper); this.camera = this.initCamera( this.scene, this.envelopeGroup.position, true ); this.renderRequested = false; this.initPostDomLoadLogistics(); // For debugging window.vs = this; } VisualizationSpace.prototype.componentWillUnmount = function () { this.removeAllViz(); }; VisualizationSpace.prototype.cloneCamera = function () { return this.camera.clone(); }; VisualizationSpace.prototype.cloneScene = function () { return this.scene.clone(); }; Object.defineProperty(VisualizationSpace.prototype, "domElement", { get: function () { if (!this.threeRenderer) { return undefined; } return this.threeRenderer.domElement; }, enumerable: false, configurable: true }); VisualizationSpace.prototype.addVizWithName = function ( vizGroup, interpreterName ) { // if (this.vizGroupWrapper.children.length >= 1) { // console.error( // "Cannot add another vizGroup without clearing the" + " existing one." // ); // return; // } vizGroup.name = interpreterName; this.vizGroupWrapper.add(vizGroup); this.threeRenderScene(); }; VisualizationSpace.prototype.getCurrentVizNames = function () { return this.vizGroupWrapper.children.map(function (alsoCalledVizGroup) { return alsoCalledVizGroup.name; }); }; VisualizationSpace.prototype.removeAllViz = function () { // TODO: cast as THREE.Mesh and call dispose on geom and mat var wrappedVizGroup = this.vizGroupWrapper.children[0]; if (!wrappedVizGroup) { return; } wrappedVizGroup.children.forEach(function (child) { child.geometry.dispose(); child.material.dispose(); child.remove(); }); this.vizGroupWrapper.children = []; this.threeRenderScene(); }; VisualizationSpace.prototype.createExampleToolpath = function () { var line = new THREE.LineCurve3( new THREE.Vector3(0, 0, 0), new THREE.Vector3(100, 100, 40) ); var geom = new THREE.TubeBufferGeometry(line, 64, 1, 64, false); var material = new THREE.MeshToonMaterial({ color: 0xe44242, side: THREE.DoubleSide }); var mesh = new THREE.Mesh(geom, material); return mesh; }; VisualizationSpace.prototype.initPostDomLoadLogistics = function () { this.threeRenderer = this.initThreeRenderer(); this.controls = this.initControls(this.camera, this.threeRenderer); this.threeRenderScene(); // let animate = () => { // let maxFramerate = 20; // setTimeout(() => { // requestAnimationFrame(animate); // }, 1000 / maxFramerate); // this.threeRenderScene(); // }; // animate(); }; VisualizationSpace.prototype.initScene = function () { var scene = new THREE.Scene(); // scene.background = new THREE.Color(0x23241f); scene.background = new THREE.Color(0xffffff); var topDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.25); var leftDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.5); var rightDirectionalLight = new THREE.DirectionalLight(0xffffff, 0.75); var ambientLight = new THREE.AmbientLight(0x404040); topDirectionalLight.position.set(0, -50, 0); leftDirectionalLight.position.set(-50.0, 12.0, 0.0); rightDirectionalLight.position.set(0.0, 2.0, 50.0); scene.add(topDirectionalLight); scene.add(leftDirectionalLight); scene.add(rightDirectionalLight); scene.add(ambientLight); return scene; }; VisualizationSpace.prototype.initCamera = function ( scene, centerPoint, isOrtho ) { var camera; // var aspect = window.innerWidth / window.innerHeight; var aspect = 1; var viewSize = 50; if (isOrtho) { camera = new THREE.OrthographicCamera( -viewSize * aspect, viewSize * aspect, viewSize, -viewSize, 1, 1000 ); camera.up = new THREE.Vector3(0, -1, 0); camera.zoom = 2; camera.updateProjectionMatrix(); camera.frustumCulled = false; camera.position.set(-50, -50, -50); // I don't know why this works camera.lookAt(centerPoint); } else { var fov = 50; camera = new THREE.PerspectiveCamera(fov, aspect, 0.01, 30000); camera.lookAt(centerPoint); camera.position.set(-500, 500, 500); camera.updateProjectionMatrix(); } return camera; }; VisualizationSpace.prototype.initControls = function (camera, renderer) { var controls = new OrbitControls(camera, renderer.domElement); controls.rotateSpeed = 1.0; controls.zoomSpeed = 0.8; controls.panSpeed = 0.8; controls.addEventListener("change", this.requestRenderScene.bind(this)); controls.enableDamping = true; controls.dampingFactor = 0.5; return controls; }; VisualizationSpace.prototype.initThreeRenderer = function () { var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(720, 480); if (this.containerDom) { this.containerDom.appendChild(renderer.domElement); } else { throw new Error("No container DOM element provided."); } return renderer; }; VisualizationSpace.prototype.requestRenderScene = function () { if (!this.renderRequested) { this.renderRequested = true; requestAnimationFrame(this.threeRenderScene.bind(this)); } }; VisualizationSpace.prototype.threeRenderScene = function () { // this.controls.update(); // let deltaSeconds = this.clock.getDelta(); // this.mixers.forEach((mixer) => { // mixer.update(deltaSeconds); // }); if (!this.controls || !this.threeRenderer) { return; } this.renderRequested = false; this.controls.update(); this.threeRenderer.render(this.scene, this.camera); }; VisualizationSpace.prototype.createEnvelopeGroup = function ( stockDimensions ) { // FIXME: eventually have work envelopes be a 3-vector var dimensions = { width: stockDimensions.width, height: stockDimensions.thickness, length: stockDimensions.height }; var whitesmoke = 0xf5f5f5; var boxGeom = new THREE.BoxBufferGeometry( dimensions.width, dimensions.height, dimensions.length, 2, 2, 2 ); var edgesGeom = new THREE.EdgesGeometry(boxGeom); var material = new THREE.LineDashedMaterial({ color: 0x111111, linewidth: 1, scale: 1, dashSize: 0.25, gapSize: 0.25 }); var mesh = new THREE.LineSegments(edgesGeom, material); mesh.computeLineDistances(); var envelopeGroup = new THREE.Group(); envelopeGroup.add(mesh); envelopeGroup.position.set( dimensions.width / 2, dimensions.height / 2, dimensions.length / 2 ); return envelopeGroup; }; VisualizationSpace.prototype.toString = function () { return ""); }; return VisualizationSpace; })()32:Tadf,VisualizationInterpreters = /** @class */ (function () { function VisualizationInterpreters() {} VisualizationInterpreters.sbpBasicViz = function ( toolpath, materialParams, providedOrigin ) { const SCALE_FACTOR = 25; let currentPosition; if (providedOrigin) { currentPosition = new THREE.Vector3( providedOrigin.x, providedOrigin.y, providedOrigin.z ); } else { currentPosition = new THREE.Vector3(0, 0, 0); } var newPosition = currentPosition.clone(); var tokens, opcode, duration; var posChange; let positions = []; let colors = []; toolpath.forEach(function (instruction) { if (instruction.trim()[0] === "'") { return; } let tokens = instruction.trim().split(","); let opcode = tokens[0]; let opX, opY, opZ; if (opcode === "M2" || opcode === "J2") { opX = parseFloat(tokens[1]); opY = parseFloat(tokens[2]); newPosition = new THREE.Vector3(opX, opY, currentPosition.z); } else if (opcode === "M3" || opcode === "J3") { opX = parseFloat(tokens[1]); opY = parseFloat(tokens[2]); opZ = parseFloat(tokens[3]); newPosition = new THREE.Vector3(opX, opY, opZ); } else if (opcode === "MZ" || opcode === "JZ") { opZ = parseFloat(tokens[1]); newPosition = new THREE.Vector3( currentPosition.x, currentPosition.y, opZ ); } else { // Unrecognized opcode return; } positions.push(newPosition); let isTravelMove = currentPosition.z > 0 && newPosition.z > 0; if (false) { let green = [0, 0, 255]; colors.push(...green); } else { let red = [255, 0, 0]; colors.push(...red); } currentPosition = newPosition; }); mutable test = positions; let positionsFlat = positions.map((vec) => [vec.x, vec.y, vec.z]).flat(); let lineGeom = new LineGeometry(); lineGeom.setPositions(positionsFlat); lineGeom.setColors(colors); let material = new LineMaterial({ linewidth: 1, vertexColors: true, //resolution: // to be set by renderer, eventually // Hmmm the below vector works? It was never set on its own and // crashed the browser resolution: new THREE.Vector2(640, 480), dashed: false }); let line = new Line2(lineGeom, material); line.scale.set(1, 1, 1); line.computeLineDistances(); let wrapperGroup = new THREE.Group(); const initialZDrop = 0.6996; // line.translateZ(-initialZDrop * SCALE_FACTOR); wrapperGroup.add(line); // wrapperGroup.rotateX(Math.PI / 2); return wrapperGroup; }; return VisualizationInterpreters; })()33:T5d6,LineGeometry = (function () { class LineGeometry extends LineSegmentsGeometry { constructor() { super(); this.isLineGeometry = true; this.type = "LineGeometry"; } setPositions(array) { // converts [ x1, y1, z1, x2, y2, z2, ... ] to pairs format const length = array.length - 3; const points = new Float32Array(2 * length); for (let i = 0; i < length; i += 3) { points[2 * i] = array[i]; points[2 * i + 1] = array[i + 1]; points[2 * i + 2] = array[i + 2]; points[2 * i + 3] = array[i + 3]; points[2 * i + 4] = array[i + 4]; points[2 * i + 5] = array[i + 5]; } super.setPositions(points); return this; } setColors(array) { // converts [ r1, g1, b1, r2, g2, b2, ... ] to pairs format const length = array.length - 3; const colors = new Float32Array(2 * length); for (let i = 0; i < length; i += 3) { colors[2 * i] = array[i]; colors[2 * i + 1] = array[i + 1]; colors[2 * i + 2] = array[i + 2]; colors[2 * i + 3] = array[i + 3]; colors[2 * i + 4] = array[i + 4]; colors[2 * i + 5] = array[i + 5]; } super.setColors(colors); return this; } fromLine(line) { const geometry = line.geometry; this.setPositions(geometry.attributes.position.array); // assumes non-indexed // set colors, maybe return this; } } return LineGeometry; })()34:T1425,LineSegmentsGeometry = (function () { const _box = new THREE.Box3(); const _vector = new THREE.Vector3(); class LineSegmentsGeometry extends THREE.InstancedBufferGeometry { constructor() { super(); this.isLineSegmentsGeometry = true; this.type = "LineSegmentsGeometry"; const positions = [ -1, 2, 0, 1, 2, 0, -1, 1, 0, 1, 1, 0, -1, 0, 0, 1, 0, 0, -1, -1, 0, 1, -1, 0 ]; const uvs = [-1, 2, 1, 2, -1, 1, 1, 1, -1, -1, 1, -1, -1, -2, 1, -2]; const index = [0, 2, 1, 2, 3, 1, 2, 4, 3, 4, 5, 3, 4, 6, 5, 6, 7, 5]; this.setIndex(index); this.setAttribute( "position", new THREE.Float32BufferAttribute(positions, 3) ); this.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)); } applyMatrix4(matrix) { const start = this.attributes.instanceStart; const end = this.attributes.instanceEnd; if (start !== undefined) { start.applyMatrix4(matrix); end.applyMatrix4(matrix); start.needsUpdate = true; } if (this.boundingBox !== null) { this.computeBoundingBox(); } if (this.boundingSphere !== null) { this.computeBoundingSphere(); } return this; } setPositions(array) { let lineSegments; if (array instanceof Float32Array) { lineSegments = array; } else if (Array.isArray(array)) { lineSegments = new Float32Array(array); } const instanceBuffer = new THREE.InstancedInterleavedBuffer( lineSegments, 6, 1 ); // xyz, xyz this.setAttribute( "instanceStart", new THREE.InterleavedBufferAttribute(instanceBuffer, 3, 0) ); // xyz this.setAttribute( "instanceEnd", new THREE.InterleavedBufferAttribute(instanceBuffer, 3, 3) ); // xyz // this.computeBoundingBox(); this.computeBoundingSphere(); return this; } setColors(array) { let colors; if (array instanceof Float32Array) { colors = array; } else if (Array.isArray(array)) { colors = new Float32Array(array); } const instanceColorBuffer = new THREE.InstancedInterleavedBuffer( colors, 6, 1 ); // rgb, rgb this.setAttribute( "instanceColorStart", new THREE.InterleavedBufferAttribute(instanceColorBuffer, 3, 0) ); // rgb this.setAttribute( "instanceColorEnd", new THREE.InterleavedBufferAttribute(instanceColorBuffer, 3, 3) ); // rgb return this; } fromWireframeGeometry(geometry) { this.setPositions(geometry.attributes.position.array); return this; } fromEdgesGeometry(geometry) { this.setPositions(geometry.attributes.position.array); return this; } fromMesh(mesh) { this.fromWireframeGeometry(new THREE.WireframeGeometry(mesh.geometry)); // set colors, maybe return this; } fromLineSegments(lineSegments) { const geometry = lineSegments.geometry; this.setPositions(geometry.attributes.position.array); // assumes non-indexed // set colors, maybe return this; } computeBoundingBox() { if (this.boundingBox === null) { this.boundingBox = new THREE.Box3(); } const start = this.attributes.instanceStart; const end = this.attributes.instanceEnd; if (start !== undefined && end !== undefined) { this.boundingBox.setFromBufferAttribute(start); _box.setFromBufferAttribute(end); this.boundingBox.union(_box); } } computeBoundingSphere() { if (this.boundingSphere === null) { this.boundingSphere = new THREE.Sphere(); } if (this.boundingBox === null) { this.computeBoundingBox(); } const start = this.attributes.instanceStart; const end = this.attributes.instanceEnd; if (start !== undefined && end !== undefined) { const center = this.boundingSphere.center; this.boundingBox.getCenter(center); let maxRadiusSq = 0; for (let i = 0, il = start.count; i < il; i++) { _vector.fromBufferAttribute(start, i); maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared(_vector) ); _vector.fromBufferAttribute(end, i); maxRadiusSq = Math.max( maxRadiusSq, center.distanceToSquared(_vector) ); } this.boundingSphere.radius = Math.sqrt(maxRadiusSq); if (isNaN(this.boundingSphere.radius)) { console.error( "THREE.LineSegmentsGeometry.computeBoundingSphere(): Computed radius is NaN. The instanced position data is likely to have NaN values.", this ); } } } toJSON() { // todo } applyMatrix(matrix) { console.warn( "THREE.LineSegmentsGeometry: applyMatrix() has been renamed to applyMatrix4()." ); return this.applyMatrix4(matrix); } } return LineSegmentsGeometry; })()35:T7137,OrbitControls = (function () { // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). // // Orbit - left mouse / touch: one-finger move // Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish // Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move const _changeEvent = { type: "change" }; const _startEvent = { type: "start" }; const _endEvent = { type: "end" }; class OrbitControls extends THREE.EventDispatcher { constructor(object, domElement) { super(); if (domElement === undefined) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' ); if (domElement === document) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' ); this.object = object; this.domElement = domElement; this.domElement.style.touchAction = "none"; // disable touch scroll // Set to false to disable this control this.enabled = true; // "target" sets the location of focus, where the object orbits around this.target = new THREE.Vector3(); // How far you can dolly in and out ( PerspectiveCamera only ) this.minDistance = 0; this.maxDistance = Infinity; // How far you can zoom in and out ( OrthographicCamera only ) this.minZoom = 0; this.maxZoom = Infinity; // How far you can orbit vertically, upper and lower limits. // Range is 0 to Math.PI radians. this.minPolarAngle = 0; // radians this.maxPolarAngle = Math.PI; // radians // How far you can orbit horizontally, upper and lower limits. // If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ) this.minAzimuthAngle = -Infinity; // radians this.maxAzimuthAngle = Infinity; // radians // Set to true to enable damping (inertia) // If damping is enabled, you must call controls.update() in your animation loop this.enableDamping = false; this.dampingFactor = 0.05; // This option actually enables dollying in and out; left as "zoom" for backwards compatibility. // Set to false to disable zooming this.enableZoom = true; this.zoomSpeed = 1.0; // Set to false to disable rotating this.enableRotate = true; this.rotateSpeed = 1.0; // Set to false to disable panning this.enablePan = true; this.panSpeed = 1.0; this.screenSpacePanning = true; // if false, pan orthogonal to world-space direction camera.up this.keyPanSpeed = 7.0; // pixels moved per arrow key push // Set to true to automatically rotate around the target // If auto-rotate is enabled, you must call controls.update() in your animation loop this.autoRotate = false; this.autoRotateSpeed = 2.0; // 30 seconds per orbit when fps is 60 // The four arrow keys this.keys = { LEFT: "ArrowLeft", UP: "ArrowUp", RIGHT: "ArrowRight", BOTTOM: "ArrowDown" }; // Mouse buttons this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN }; // Touch fingers this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN }; // for reset this.target0 = this.target.clone(); this.position0 = this.object.position.clone(); this.zoom0 = this.object.zoom; // the target DOM element for key events this._domElementKeyEvents = null; // // public methods // this.getPolarAngle = function () { return spherical.phi; }; this.getAzimuthalAngle = function () { return spherical.theta; }; this.getDistance = function () { return this.object.position.distanceTo(this.target); }; this.listenToKeyEvents = function (domElement) { domElement.addEventListener("keydown", onKeyDown); this._domElementKeyEvents = domElement; }; this.saveState = function () { scope.target0.copy(scope.target); scope.position0.copy(scope.object.position); scope.zoom0 = scope.object.zoom; }; this.reset = function () { scope.target.copy(scope.target0); scope.object.position.copy(scope.position0); scope.object.zoom = scope.zoom0; scope.object.updateProjectionMatrix(); scope.dispatchEvent(_changeEvent); scope.update(); state = STATE.NONE; }; // this method is exposed, but perhaps it would be better if we can make it private... this.update = (function () { const offset = new THREE.Vector3(); // so camera.up is the orbit axis const quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3(0, 1, 0) ); const quatInverse = quat.clone().invert(); const lastPosition = new THREE.Vector3(); const lastQuaternion = new THREE.Quaternion(); const twoPI = 2 * Math.PI; return function update() { const position = scope.object.position; offset.copy(position).sub(scope.target); // rotate offset to "y-axis-is-up" space offset.applyQuaternion(quat); // angle from z-axis around y-axis spherical.setFromVector3(offset); if (scope.autoRotate && state === STATE.NONE) { rotateLeft(getAutoRotationAngle()); } if (scope.enableDamping) { spherical.theta += sphericalDelta.theta * scope.dampingFactor; spherical.phi += sphericalDelta.phi * scope.dampingFactor; } else { spherical.theta += sphericalDelta.theta; spherical.phi += sphericalDelta.phi; } // restrict theta to be between desired limits let min = scope.minAzimuthAngle; let max = scope.maxAzimuthAngle; if (isFinite(min) && isFinite(max)) { if (min < -Math.PI) min += twoPI; else if (min > Math.PI) min -= twoPI; if (max < -Math.PI) max += twoPI; else if (max > Math.PI) max -= twoPI; if (min <= max) { spherical.theta = Math.max(min, Math.min(max, spherical.theta)); } else { spherical.theta = spherical.theta > (min + max) / 2 ? Math.max(min, spherical.theta) : Math.min(max, spherical.theta); } } // restrict phi to be between desired limits spherical.phi = Math.max( scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi) ); spherical.makeSafe(); spherical.radius *= scale; // restrict radius to be between desired limits spherical.radius = Math.max( scope.minDistance, Math.min(scope.maxDistance, spherical.radius) ); // move target to panned location if (scope.enableDamping === true) { scope.target.addScaledVector(panOffset, scope.dampingFactor); } else { scope.target.add(panOffset); } offset.setFromSpherical(spherical); // rotate offset back to "camera-up-vector-is-up" space offset.applyQuaternion(quatInverse); position.copy(scope.target).add(offset); scope.object.lookAt(scope.target); if (scope.enableDamping === true) { sphericalDelta.theta *= 1 - scope.dampingFactor; sphericalDelta.phi *= 1 - scope.dampingFactor; panOffset.multiplyScalar(1 - scope.dampingFactor); } else { sphericalDelta.set(0, 0, 0); panOffset.set(0, 0, 0); } scale = 1; // update condition is: // min(camera displacement, camera rotation in radians)^2 > EPS // using small-angle approximation cos(x/2) = 1 - x^2 / 8 if ( zoomChanged || lastPosition.distanceToSquared(scope.object.position) > EPS || 8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS ) { scope.dispatchEvent(_changeEvent); lastPosition.copy(scope.object.position); lastQuaternion.copy(scope.object.quaternion); zoomChanged = false; return true; } return false; }; })(); this.dispose = function () { scope.domElement.removeEventListener("contextmenu", onContextMenu); scope.domElement.removeEventListener("pointerdown", onPointerDown); scope.domElement.removeEventListener("pointercancel", onPointerCancel); scope.domElement.removeEventListener("wheel", onMouseWheel); scope.domElement.removeEventListener("pointermove", onPointerMove); scope.domElement.removeEventListener("pointerup", onPointerUp); if (scope._domElementKeyEvents !== null) { scope._domElementKeyEvents.removeEventListener("keydown", onKeyDown); } //scope.dispatchEvent( { type: 'dispose' } ); // should this be added here? }; // // internals // const scope = this; const STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_PAN: 4, TOUCH_DOLLY_PAN: 5, TOUCH_DOLLY_ROTATE: 6 }; let state = STATE.NONE; const EPS = 0.000001; // current position in spherical coordinates const spherical = new THREE.Spherical(); const sphericalDelta = new THREE.Spherical(); let scale = 1; const panOffset = new THREE.Vector3(); let zoomChanged = false; const rotateStart = new THREE.Vector2(); const rotateEnd = new THREE.Vector2(); const rotateDelta = new THREE.Vector2(); const panStart = new THREE.Vector2(); const panEnd = new THREE.Vector2(); const panDelta = new THREE.Vector2(); const dollyStart = new THREE.Vector2(); const dollyEnd = new THREE.Vector2(); const dollyDelta = new THREE.Vector2(); const pointers = []; const pointerPositions = {}; function getAutoRotationAngle() { return ((2 * Math.PI) / 60 / 60) * scope.autoRotateSpeed; } function getZoomScale() { return Math.pow(0.95, scope.zoomSpeed); } function rotateLeft(angle) { sphericalDelta.theta -= angle; } function rotateUp(angle) { sphericalDelta.phi -= angle; } const panLeft = (function () { const v = new THREE.Vector3(); return function panLeft(distance, objectMatrix) { v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix v.multiplyScalar(-distance); panOffset.add(v); }; })(); const panUp = (function () { const v = new THREE.Vector3(); return function panUp(distance, objectMatrix) { if (scope.screenSpacePanning === true) { v.setFromMatrixColumn(objectMatrix, 1); } else { v.setFromMatrixColumn(objectMatrix, 0); v.crossVectors(scope.object.up, v); } v.multiplyScalar(distance); panOffset.add(v); }; })(); // deltaX and deltaY are in pixels; right and down are positive const pan = (function () { const offset = new THREE.Vector3(); return function pan(deltaX, deltaY) { const element = scope.domElement; if (scope.object.isPerspectiveCamera) { // perspective const position = scope.object.position; offset.copy(position).sub(scope.target); let targetDistance = offset.length(); // half of the fov is center to top of screen targetDistance *= Math.tan( ((scope.object.fov / 2) * Math.PI) / 180.0 ); // we use only clientHeight here so aspect ratio does not distort speed panLeft( (2 * deltaX * targetDistance) / element.clientHeight, scope.object.matrix ); panUp( (2 * deltaY * targetDistance) / element.clientHeight, scope.object.matrix ); } else if (scope.object.isOrthographicCamera) { // orthographic panLeft( (deltaX * (scope.object.right - scope.object.left)) / scope.object.zoom / element.clientWidth, scope.object.matrix ); panUp( (deltaY * (scope.object.top - scope.object.bottom)) / scope.object.zoom / element.clientHeight, scope.object.matrix ); } else { // camera neither orthographic nor perspective console.warn( "WARNING: OrbitControls.js encountered an unknown camera type - pan disabled." ); scope.enablePan = false; } }; })(); function dollyOut(dollyScale) { if (scope.object.isPerspectiveCamera) { scale /= dollyScale; } else if (scope.object.isOrthographicCamera) { scope.object.zoom = Math.max( scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( "WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled." ); scope.enableZoom = false; } } function dollyIn(dollyScale) { if (scope.object.isPerspectiveCamera) { scale *= dollyScale; } else if (scope.object.isOrthographicCamera) { scope.object.zoom = Math.max( scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( "WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled." ); scope.enableZoom = false; } } // // event callbacks - update the object state // function handleMouseDownRotate(event) { rotateStart.set(event.clientX, event.clientY); } function handleMouseDownDolly(event) { dollyStart.set(event.clientX, event.clientY); } function handleMouseDownPan(event) { panStart.set(event.clientX, event.clientY); } function handleMouseMoveRotate(event) { rotateEnd.set(event.clientX, event.clientY); rotateDelta .subVectors(rotateEnd, rotateStart) .multiplyScalar(scope.rotateSpeed); const element = scope.domElement; rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, height rotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight); rotateStart.copy(rotateEnd); scope.update(); } function handleMouseMoveDolly(event) { dollyEnd.set(event.clientX, event.clientY); dollyDelta.subVectors(dollyEnd, dollyStart); if (dollyDelta.y > 0) { dollyOut(getZoomScale()); } else if (dollyDelta.y < 0) { dollyIn(getZoomScale()); } dollyStart.copy(dollyEnd); scope.update(); } function handleMouseMovePan(event) { panEnd.set(event.clientX, event.clientY); panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed); pan(panDelta.x, panDelta.y); panStart.copy(panEnd); scope.update(); } function handleMouseWheel(event) { if (event.deltaY < 0) { dollyIn(getZoomScale()); } else if (event.deltaY > 0) { dollyOut(getZoomScale()); } scope.update(); } function handleKeyDown(event) { let needsUpdate = false; switch (event.code) { case scope.keys.UP: pan(0, scope.keyPanSpeed); needsUpdate = true; break; case scope.keys.BOTTOM: pan(0, -scope.keyPanSpeed); needsUpdate = true; break; case scope.keys.LEFT: pan(scope.keyPanSpeed, 0); needsUpdate = true; break; case scope.keys.RIGHT: pan(-scope.keyPanSpeed, 0); needsUpdate = true; break; } if (needsUpdate) { // prevent the browser from scrolling on cursor keys event.preventDefault(); scope.update(); } } function handleTouchStartRotate() { if (pointers.length === 1) { rotateStart.set(pointers[0].pageX, pointers[0].pageY); } else { const x = 0.5 * (pointers[0].pageX + pointers[1].pageX); const y = 0.5 * (pointers[0].pageY + pointers[1].pageY); rotateStart.set(x, y); } } function handleTouchStartPan() { if (pointers.length === 1) { panStart.set(pointers[0].pageX, pointers[0].pageY); } else { const x = 0.5 * (pointers[0].pageX + pointers[1].pageX); const y = 0.5 * (pointers[0].pageY + pointers[1].pageY); panStart.set(x, y); } } function handleTouchStartDolly() { const dx = pointers[0].pageX - pointers[1].pageX; const dy = pointers[0].pageY - pointers[1].pageY; const distance = Math.sqrt(dx * dx + dy * dy); dollyStart.set(0, distance); } function handleTouchStartDollyPan() { if (scope.enableZoom) handleTouchStartDolly(); if (scope.enablePan) handleTouchStartPan(); } function handleTouchStartDollyRotate() { if (scope.enableZoom) handleTouchStartDolly(); if (scope.enableRotate) handleTouchStartRotate(); } function handleTouchMoveRotate(event) { if (pointers.length == 1) { rotateEnd.set(event.pageX, event.pageY); } else { const position = getSecondPointerPosition(event); const x = 0.5 * (event.pageX + position.x); const y = 0.5 * (event.pageY + position.y); rotateEnd.set(x, y); } rotateDelta .subVectors(rotateEnd, rotateStart) .multiplyScalar(scope.rotateSpeed); const element = scope.domElement; rotateLeft((2 * Math.PI * rotateDelta.x) / element.clientHeight); // yes, height rotateUp((2 * Math.PI * rotateDelta.y) / element.clientHeight); rotateStart.copy(rotateEnd); } function handleTouchMovePan(event) { if (pointers.length === 1) { panEnd.set(event.pageX, event.pageY); } else { const position = getSecondPointerPosition(event); const x = 0.5 * (event.pageX + position.x); const y = 0.5 * (event.pageY + position.y); panEnd.set(x, y); } panDelta.subVectors(panEnd, panStart).multiplyScalar(scope.panSpeed); pan(panDelta.x, panDelta.y); panStart.copy(panEnd); } function handleTouchMoveDolly(event) { const position = getSecondPointerPosition(event); const dx = event.pageX - position.x; const dy = event.pageY - position.y; const distance = Math.sqrt(dx * dx + dy * dy); dollyEnd.set(0, distance); dollyDelta.set(0, Math.pow(dollyEnd.y / dollyStart.y, scope.zoomSpeed)); dollyOut(dollyDelta.y); dollyStart.copy(dollyEnd); } function handleTouchMoveDollyPan(event) { if (scope.enableZoom) handleTouchMoveDolly(event); if (scope.enablePan) handleTouchMovePan(event); } function handleTouchMoveDollyRotate(event) { if (scope.enableZoom) handleTouchMoveDolly(event); if (scope.enableRotate) handleTouchMoveRotate(event); } // // event handlers - FSM: listen for events and reset state // function onPointerDown(event) { if (scope.enabled === false) return; if (pointers.length === 0) { scope.domElement.setPointerCapture(event.pointerId); scope.domElement.addEventListener("pointermove", onPointerMove); scope.domElement.addEventListener("pointerup", onPointerUp); } // addPointer(event); if (event.pointerType === "touch") { onTouchStart(event); } else { onMouseDown(event); } } function onPointerMove(event) { if (scope.enabled === false) return; if (event.pointerType === "touch") { onTouchMove(event); } else { onMouseMove(event); } } function onPointerUp(event) { removePointer(event); if (pointers.length === 0) { scope.domElement.releasePointerCapture(event.pointerId); scope.domElement.removeEventListener("pointermove", onPointerMove); scope.domElement.removeEventListener("pointerup", onPointerUp); } scope.dispatchEvent(_endEvent); state = STATE.NONE; } function onPointerCancel(event) { removePointer(event); } function onMouseDown(event) { let mouseAction; switch (event.button) { case 0: mouseAction = scope.mouseButtons.LEFT; break; case 1: mouseAction = scope.mouseButtons.MIDDLE; break; case 2: mouseAction = scope.mouseButtons.RIGHT; break; default: mouseAction = -1; } switch (mouseAction) { case THREE.MOUSE.DOLLY: if (scope.enableZoom === false) return; handleMouseDownDolly(event); state = STATE.DOLLY; break; case THREE.MOUSE.ROTATE: if (event.ctrlKey || event.metaKey || event.shiftKey) { if (scope.enablePan === false) return; handleMouseDownPan(event); state = STATE.PAN; } else { if (scope.enableRotate === false) return; handleMouseDownRotate(event); state = STATE.ROTATE; } break; case THREE.MOUSE.PAN: if (event.ctrlKey || event.metaKey || event.shiftKey) { if (scope.enableRotate === false) return; handleMouseDownRotate(event); state = STATE.ROTATE; } else { if (scope.enablePan === false) return; handleMouseDownPan(event); state = STATE.PAN; } break; default: state = STATE.NONE; } if (state !== STATE.NONE) { scope.dispatchEvent(_startEvent); } } function onMouseMove(event) { if (scope.enabled === false) return; switch (state) { case STATE.ROTATE: if (scope.enableRotate === false) return; handleMouseMoveRotate(event); break; case STATE.DOLLY: if (scope.enableZoom === false) return; handleMouseMoveDolly(event); break; case STATE.PAN: if (scope.enablePan === false) return; handleMouseMovePan(event); break; } } function onMouseWheel(event) { if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return; event.preventDefault(); scope.dispatchEvent(_startEvent); handleMouseWheel(event); scope.dispatchEvent(_endEvent); } function onKeyDown(event) { if (scope.enabled === false || scope.enablePan === false) return; handleKeyDown(event); } function onTouchStart(event) { trackPointer(event); switch (pointers.length) { case 1: switch (scope.touches.ONE) { case THREE.TOUCH.ROTATE: if (scope.enableRotate === false) return; handleTouchStartRotate(); state = STATE.TOUCH_ROTATE; break; case THREE.TOUCH.PAN: if (scope.enablePan === false) return; handleTouchStartPan(); state = STATE.TOUCH_PAN; break; default: state = STATE.NONE; } break; case 2: switch (scope.touches.TWO) { case THREE.TOUCH.DOLLY_PAN: if (scope.enableZoom === false && scope.enablePan === false) return; handleTouchStartDollyPan(); state = STATE.TOUCH_DOLLY_PAN; break; case THREE.TOUCH.DOLLY_ROTATE: if (scope.enableZoom === false && scope.enableRotate === false) return; handleTouchStartDollyRotate(); state = STATE.TOUCH_DOLLY_ROTATE; break; default: state = STATE.NONE; } break; default: state = STATE.NONE; } if (state !== STATE.NONE) { scope.dispatchEvent(_startEvent); } } function onTouchMove(event) { trackPointer(event); switch (state) { case STATE.TOUCH_ROTATE: if (scope.enableRotate === false) return; handleTouchMoveRotate(event); scope.update(); break; case STATE.TOUCH_PAN: if (scope.enablePan === false) return; handleTouchMovePan(event); scope.update(); break; case STATE.TOUCH_DOLLY_PAN: if (scope.enableZoom === false && scope.enablePan === false) return; handleTouchMoveDollyPan(event); scope.update(); break; case STATE.TOUCH_DOLLY_ROTATE: if (scope.enableZoom === false && scope.enableRotate === false) return; handleTouchMoveDollyRotate(event); scope.update(); break; default: state = STATE.NONE; } } function onContextMenu(event) { if (scope.enabled === false) return; event.preventDefault(); } function addPointer(event) { pointers.push(event); } function removePointer(event) { delete pointerPositions[event.pointerId]; for (let i = 0; i < pointers.length; i++) { if (pointers[i].pointerId == event.pointerId) { pointers.splice(i, 1); return; } } } function trackPointer(event) { let position = pointerPositions[event.pointerId]; if (position === undefined) { position = new THREE.Vector2(); pointerPositions[event.pointerId] = position; } position.set(event.pageX, event.pageY); } function getSecondPointerPosition(event) { const pointer = event.pointerId === pointers[0].pointerId ? pointers[1] : pointers[0]; return pointerPositions[pointer.pointerId]; } // scope.domElement.addEventListener("contextmenu", onContextMenu); scope.domElement.addEventListener("pointerdown", onPointerDown); scope.domElement.addEventListener("pointercancel", onPointerCancel); scope.domElement.addEventListener("wheel", onMouseWheel, { passive: false }); // force an update at start this.update(); } } // This set of controls performs orbiting, dollying (zooming), and panning. // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default). // This is very similar to OrbitControls, another set of touch behavior // // Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate // Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish // Pan - left mouse, or arrow keys / touch: one-finger move class MapControls extends OrbitControls { constructor(object, domElement) { super(object, domElement); this.screenSpacePanning = false; // pan orthogonal to world-space direction camera.up this.mouseButtons.LEFT = THREE.MOUSE.PAN; this.mouseButtons.RIGHT = THREE.MOUSE.ROTATE; this.touches.ONE = THREE.TOUCH.PAN; this.touches.TWO = THREE.TOUCH.DOLLY_ROTATE; } } return OrbitControls; })()36:Ta80,ParametricGeometry = (function () { /** * Parametric Surfaces Geometry * based on the brilliant article by @prideout https://prideout.net/blog/old/blog/index.html@p=44.html */ class ParametricGeometry extends THREE.BufferGeometry { constructor( func = (u, v, target) => target.set(u, v, Math.cos(u) * Math.sin(v)), slices = 8, stacks = 8 ) { super(); this.type = "ParametricGeometry"; this.parameters = { func: func, slices: slices, stacks: stacks }; // buffers const indices = []; const vertices = []; const normals = []; const uvs = []; const EPS = 0.00001; const normal = new THREE.Vector3(); const p0 = new THREE.Vector3(), p1 = new THREE.Vector3(); const pu = new THREE.Vector3(), pv = new THREE.Vector3(); // generate vertices, normals and uvs const sliceCount = slices + 1; for (let i = 0; i <= stacks; i++) { const v = i / stacks; for (let j = 0; j <= slices; j++) { const u = j / slices; // vertex func(u, v, p0); vertices.push(p0.x, p0.y, p0.z); // normal // approximate tangent vectors via finite differences if (u - EPS >= 0) { func(u - EPS, v, p1); pu.subVectors(p0, p1); } else { func(u + EPS, v, p1); pu.subVectors(p1, p0); } if (v - EPS >= 0) { func(u, v - EPS, p1); pv.subVectors(p0, p1); } else { func(u, v + EPS, p1); pv.subVectors(p1, p0); } // cross product of tangent vectors returns surface normal normal.crossVectors(pu, pv).normalize(); normals.push(normal.x, normal.y, normal.z); // uv uvs.push(u, v); } } // generate indices for (let i = 0; i < stacks; i++) { for (let j = 0; j < slices; j++) { const a = i * sliceCount + j; const b = i * sliceCount + j + 1; const c = (i + 1) * sliceCount + j + 1; const d = (i + 1) * sliceCount + j; // faces one and two indices.push(a, b, d); indices.push(b, c, d); } } // build geometry this.setIndex(indices); this.setAttribute( "position", new THREE.Float32BufferAttribute(vertices, 3) ); this.setAttribute("normal", new THREE.Float32BufferAttribute(normals, 3)); this.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2)); } } return ParametricGeometry; })()37:T33a5,LineMaterial = (function () { /** * parameters = { * color: , * linewidth: , * dashed: , * dashScale: , * dashSize: , * dashOffset: , * gapSize: , * resolution: , // to be set by renderer * } */ THREE.UniformsLib.line = { worldUnits: { value: 1 }, linewidth: { value: 1 }, resolution: { value: new THREE.Vector2(1, 1) }, dashOffset: { value: 0 }, dashScale: { value: 1 }, dashSize: { value: 1 }, gapSize: { value: 1 } // todo FIX - maybe change to totalSize }; THREE.ShaderLib["line"] = { uniforms: THREE.UniformsUtils.merge([ THREE.UniformsLib.common, THREE.UniformsLib.fog, THREE.UniformsLib.line ]), vertexShader: /* glsl */ ` #include #include #include #include #include uniform float linewidth; uniform vec2 resolution; attribute vec3 instanceStart; attribute vec3 instanceEnd; attribute vec3 instanceColorStart; attribute vec3 instanceColorEnd; #ifdef WORLD_UNITS varying vec4 worldPos; varying vec3 worldStart; varying vec3 worldEnd; #ifdef USE_DASH varying vec2 vUv; #endif #else varying vec2 vUv; #endif #ifdef USE_DASH uniform float dashScale; attribute float instanceDistanceStart; attribute float instanceDistanceEnd; varying float vLineDistance; #endif void trimSegment( const in vec4 start, inout vec4 end ) { // trim end segment so it terminates between the camera plane and the near plane // conservative estimate of the near plane float a = projectionMatrix[ 2 ][ 2 ]; // 3nd entry in 3th column float b = projectionMatrix[ 3 ][ 2 ]; // 3nd entry in 4th column float nearEstimate = - 0.5 * b / a; float alpha = ( nearEstimate - start.z ) / ( end.z - start.z ); end.xyz = mix( start.xyz, end.xyz, alpha ); } void main() { #ifdef USE_COLOR vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd; #endif #ifdef USE_DASH vLineDistance = ( position.y < 0.5 ) ? dashScale * instanceDistanceStart : dashScale * instanceDistanceEnd; vUv = uv; #endif float aspect = resolution.x / resolution.y; // camera space vec4 start = modelViewMatrix * vec4( instanceStart, 1.0 ); vec4 end = modelViewMatrix * vec4( instanceEnd, 1.0 ); #ifdef WORLD_UNITS worldStart = start.xyz; worldEnd = end.xyz; #else vUv = uv; #endif // special case for perspective projection, and segments that terminate either in, or behind, the camera plane // clearly the gpu firmware has a way of addressing this issue when projecting into ndc space // but we need to perform ndc-space calculations in the shader, so we must address this issue directly // perhaps there is a more elegant solution -- WestLangley bool perspective = ( projectionMatrix[ 2 ][ 3 ] == - 1.0 ); // 4th entry in the 3rd column if ( perspective ) { if ( start.z < 0.0 && end.z >= 0.0 ) { trimSegment( start, end ); } else if ( end.z < 0.0 && start.z >= 0.0 ) { trimSegment( end, start ); } } // clip space vec4 clipStart = projectionMatrix * start; vec4 clipEnd = projectionMatrix * end; // ndc space vec3 ndcStart = clipStart.xyz / clipStart.w; vec3 ndcEnd = clipEnd.xyz / clipEnd.w; // direction vec2 dir = ndcEnd.xy - ndcStart.xy; // account for clip-space aspect ratio dir.x *= aspect; dir = normalize( dir ); #ifdef WORLD_UNITS // get the offset direction as perpendicular to the view vector vec3 worldDir = normalize( end.xyz - start.xyz ); vec3 offset; if ( position.y < 0.5 ) { offset = normalize( cross( start.xyz, worldDir ) ); } else { offset = normalize( cross( end.xyz, worldDir ) ); } // sign flip if ( position.x < 0.0 ) offset *= - 1.0; float forwardOffset = dot( worldDir, vec3( 0.0, 0.0, 1.0 ) ); // don't extend the line if we're rendering dashes because we // won't be rendering the endcaps #ifndef USE_DASH // extend the line bounds to encompass endcaps start.xyz += - worldDir * linewidth * 0.5; end.xyz += worldDir * linewidth * 0.5; // shift the position of the quad so it hugs the forward edge of the line offset.xy -= dir * forwardOffset; offset.z += 0.5; #endif // endcaps if ( position.y > 1.0 || position.y < 0.0 ) { offset.xy += dir * 2.0 * forwardOffset; } // adjust for linewidth offset *= linewidth * 0.5; // set the world position worldPos = ( position.y < 0.5 ) ? start : end; worldPos.xyz += offset; // project the worldpos vec4 clip = projectionMatrix * worldPos; // shift the depth of the projected points so the line // segments overlap neatly vec3 clipPose = ( position.y < 0.5 ) ? ndcStart : ndcEnd; clip.z = clipPose.z * clip.w; #else vec2 offset = vec2( dir.y, - dir.x ); // undo aspect ratio adjustment dir.x /= aspect; offset.x /= aspect; // sign flip if ( position.x < 0.0 ) offset *= - 1.0; // endcaps if ( position.y < 0.0 ) { offset += - dir; } else if ( position.y > 1.0 ) { offset += dir; } // adjust for linewidth offset *= linewidth; // adjust for clip-space to screen-space conversion // maybe resolution should be based on viewport ... offset /= resolution.y; // select end vec4 clip = ( position.y < 0.5 ) ? clipStart : clipEnd; // back to clip space offset *= clip.w; clip.xy += offset; #endif gl_Position = clip; vec4 mvPosition = ( position.y < 0.5 ) ? start : end; // this is an approximation #include #include #include } `, fragmentShader: /* glsl */ ` uniform vec3 diffuse; uniform float opacity; uniform float linewidth; #ifdef USE_DASH uniform float dashOffset; uniform float dashSize; uniform float gapSize; #endif varying float vLineDistance; #ifdef WORLD_UNITS varying vec4 worldPos; varying vec3 worldStart; varying vec3 worldEnd; #ifdef USE_DASH varying vec2 vUv; #endif #else varying vec2 vUv; #endif #include #include #include #include #include vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) { float mua; float mub; vec3 p13 = p1 - p3; vec3 p43 = p4 - p3; vec3 p21 = p2 - p1; float d1343 = dot( p13, p43 ); float d4321 = dot( p43, p21 ); float d1321 = dot( p13, p21 ); float d4343 = dot( p43, p43 ); float d2121 = dot( p21, p21 ); float denom = d2121 * d4343 - d4321 * d4321; float numer = d1343 * d4321 - d1321 * d4343; mua = numer / denom; mua = clamp( mua, 0.0, 1.0 ); mub = ( d1343 + d4321 * ( mua ) ) / d4343; mub = clamp( mub, 0.0, 1.0 ); return vec2( mua, mub ); } void main() { #include #ifdef USE_DASH if ( vUv.y < - 1.0 || vUv.y > 1.0 ) discard; // discard endcaps if ( mod( vLineDistance + dashOffset, dashSize + gapSize ) > dashSize ) discard; // todo - FIX #endif float alpha = opacity; #ifdef WORLD_UNITS // Find the closest points on the view ray and the line segment vec3 rayEnd = normalize( worldPos.xyz ) * 1e5; vec3 lineDir = worldEnd - worldStart; vec2 params = closestLineToLine( worldStart, worldEnd, vec3( 0.0, 0.0, 0.0 ), rayEnd ); vec3 p1 = worldStart + lineDir * params.x; vec3 p2 = rayEnd * params.y; vec3 delta = p1 - p2; float len = length( delta ); float norm = len / linewidth; #ifndef USE_DASH #ifdef USE_ALPHA_TO_COVERAGE float dnorm = fwidth( norm ); alpha = 1.0 - smoothstep( 0.5 - dnorm, 0.5 + dnorm, norm ); #else if ( norm > 0.5 ) { discard; } #endif #endif #else #ifdef USE_ALPHA_TO_COVERAGE // artifacts appear on some hardware if a derivative is taken within a conditional float a = vUv.x; float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; float len2 = a * a + b * b; float dlen = fwidth( len2 ); if ( abs( vUv.y ) > 1.0 ) { alpha = 1.0 - smoothstep( 1.0 - dlen, 1.0 + dlen, len2 ); } #else if ( abs( vUv.y ) > 1.0 ) { float a = vUv.x; float b = ( vUv.y > 0.0 ) ? vUv.y - 1.0 : vUv.y + 1.0; float len2 = a * a + b * b; if ( len2 > 1.0 ) discard; } #endif #endif vec4 diffuseColor = vec4( diffuse, alpha ); #include #include gl_FragColor = vec4( diffuseColor.rgb, alpha ); #include #include #include #include } ` }; class LineMaterial extends THREE.ShaderMaterial { constructor(parameters) { super({ type: "LineMaterial", uniforms: THREE.UniformsUtils.clone(THREE.ShaderLib["line"].uniforms), vertexShader: THREE.ShaderLib["line"].vertexShader, fragmentShader: THREE.ShaderLib["line"].fragmentShader, clipping: true // required for clipping support }); this.isLineMaterial = true; Object.defineProperties(this, { color: { enumerable: true, get: function () { return this.uniforms.diffuse.value; }, set: function (value) { this.uniforms.diffuse.value = value; } }, worldUnits: { enumerable: true, get: function () { return "WORLD_UNITS" in this.defines; }, set: function (value) { if (value === true) { this.defines.WORLD_UNITS = ""; } else { delete this.defines.WORLD_UNITS; } } }, linewidth: { enumerable: true, get: function () { return this.uniforms.linewidth.value; }, set: function (value) { this.uniforms.linewidth.value = value; } }, dashed: { enumerable: true, get: function () { return Boolean("USE_DASH" in this.defines); }, set(value) { if (Boolean(value) !== Boolean("USE_DASH" in this.defines)) { this.needsUpdate = true; } if (value === true) { this.defines.USE_DASH = ""; } else { delete this.defines.USE_DASH; } } }, dashScale: { enumerable: true, get: function () { return this.uniforms.dashScale.value; }, set: function (value) { this.uniforms.dashScale.value = value; } }, dashSize: { enumerable: true, get: function () { return this.uniforms.dashSize.value; }, set: function (value) { this.uniforms.dashSize.value = value; } }, dashOffset: { enumerable: true, get: function () { return this.uniforms.dashOffset.value; }, set: function (value) { this.uniforms.dashOffset.value = value; } }, gapSize: { enumerable: true, get: function () { return this.uniforms.gapSize.value; }, set: function (value) { this.uniforms.gapSize.value = value; } }, opacity: { enumerable: true, get: function () { return this.uniforms.opacity.value; }, set: function (value) { this.uniforms.opacity.value = value; } }, resolution: { enumerable: true, get: function () { return this.uniforms.resolution.value; }, set: function (value) { this.uniforms.resolution.value.copy(value); } }, alphaToCoverage: { enumerable: true, get: function () { return Boolean("USE_ALPHA_TO_COVERAGE" in this.defines); }, set: function (value) { if ( Boolean(value) !== Boolean("USE_ALPHA_TO_COVERAGE" in this.defines) ) { this.needsUpdate = true; } if (value === true) { this.defines.USE_ALPHA_TO_COVERAGE = ""; this.extensions.derivatives = true; } else { delete this.defines.USE_ALPHA_TO_COVERAGE; this.extensions.derivatives = false; } } } }); this.setValues(parameters); } } return LineMaterial; })()38:T2676,LineSegments2 = (function () { const _start = new THREE.Vector3(); const _end = new THREE.Vector3(); const _start4 = new THREE.Vector4(); const _end4 = new THREE.Vector4(); const _ssOrigin = new THREE.Vector4(); const _ssOrigin3 = new THREE.Vector3(); const _mvMatrix = new THREE.Matrix4(); const _line = new THREE.Line3(); const _closestPoint = new THREE.Vector3(); const _box = new THREE.Box3(); const _sphere = new THREE.Sphere(); const _clipToWorldVector = new THREE.Vector4(); let _ray, _instanceStart, _instanceEnd, _lineWidth; // Returns the margin required to expand by in world space given the distance from the camera, // line width, resolution, and camera projection function getWorldSpaceHalfWidth(camera, distance, resolution) { // transform into clip space, adjust the x and y values by the pixel width offset, then // transform back into world space to get world offset. Note clip space is [-1, 1] so full // width does not need to be halved. _clipToWorldVector .set(0, 0, -distance, 1.0) .applyMatrix4(camera.projectionMatrix); _clipToWorldVector.multiplyScalar(1.0 / _clipToWorldVector.w); _clipToWorldVector.x = _lineWidth / resolution.width; _clipToWorldVector.y = _lineWidth / resolution.height; _clipToWorldVector.applyMatrix4(camera.projectionMatrixInverse); _clipToWorldVector.multiplyScalar(1.0 / _clipToWorldVector.w); return Math.abs(Math.max(_clipToWorldVector.x, _clipToWorldVector.y)); } function raycastWorldUnits(lineSegments, intersects) { for (let i = 0, l = _instanceStart.count; i < l; i++) { _line.start.fromBufferAttribute(_instanceStart, i); _line.end.fromBufferAttribute(_instanceEnd, i); const pointOnLine = new THREE.Vector3(); const point = new THREE.Vector3(); _ray.distanceSqToSegment(_line.start, _line.end, point, pointOnLine); const isInside = point.distanceTo(pointOnLine) < _lineWidth * 0.5; if (isInside) { intersects.push({ point, pointOnLine, distance: _ray.origin.distanceTo(point), object: lineSegments, face: null, faceIndex: i, uv: null, uv2: null }); } } } function raycastScreenSpace(lineSegments, camera, intersects) { const projectionMatrix = camera.projectionMatrix; const material = lineSegments.material; const resolution = material.resolution; const matrixWorld = lineSegments.matrixWorld; const geometry = lineSegments.geometry; const instanceStart = geometry.attributes.instanceStart; const instanceEnd = geometry.attributes.instanceEnd; const near = -camera.near; // // pick a point 1 unit out along the ray to avoid the ray origin // sitting at the camera origin which will cause "w" to be 0 when // applying the projection matrix. _ray.at(1, _ssOrigin); // ndc space [ - 1.0, 1.0 ] _ssOrigin.w = 1; _ssOrigin.applyMatrix4(camera.matrixWorldInverse); _ssOrigin.applyMatrix4(projectionMatrix); _ssOrigin.multiplyScalar(1 / _ssOrigin.w); // screen space _ssOrigin.x *= resolution.x / 2; _ssOrigin.y *= resolution.y / 2; _ssOrigin.z = 0; _ssOrigin3.copy(_ssOrigin); _mvMatrix.multiplyMatrices(camera.matrixWorldInverse, matrixWorld); for (let i = 0, l = instanceStart.count; i < l; i++) { _start4.fromBufferAttribute(instanceStart, i); _end4.fromBufferAttribute(instanceEnd, i); _start4.w = 1; _end4.w = 1; // camera space _start4.applyMatrix4(_mvMatrix); _end4.applyMatrix4(_mvMatrix); // skip the segment if it's entirely behind the camera const isBehindCameraNear = _start4.z > near && _end4.z > near; if (isBehindCameraNear) { continue; } // trim the segment if it extends behind camera near if (_start4.z > near) { const deltaDist = _start4.z - _end4.z; const t = (_start4.z - near) / deltaDist; _start4.lerp(_end4, t); } else if (_end4.z > near) { const deltaDist = _end4.z - _start4.z; const t = (_end4.z - near) / deltaDist; _end4.lerp(_start4, t); } // clip space _start4.applyMatrix4(projectionMatrix); _end4.applyMatrix4(projectionMatrix); // ndc space [ - 1.0, 1.0 ] _start4.multiplyScalar(1 / _start4.w); _end4.multiplyScalar(1 / _end4.w); // screen space _start4.x *= resolution.x / 2; _start4.y *= resolution.y / 2; _end4.x *= resolution.x / 2; _end4.y *= resolution.y / 2; // create 2d segment _line.start.copy(_start4); _line.start.z = 0; _line.end.copy(_end4); _line.end.z = 0; // get closest point on ray to segment const param = _line.closestPointToPointParameter(_ssOrigin3, true); _line.at(param, _closestPoint); // check if the intersection point is within clip space const zPos = THREE.MathUtils.lerp(_start4.z, _end4.z, param); const isInClipSpace = zPos >= -1 && zPos <= 1; const isInside = _ssOrigin3.distanceTo(_closestPoint) < _lineWidth * 0.5; if (isInClipSpace && isInside) { _line.start.fromBufferAttribute(instanceStart, i); _line.end.fromBufferAttribute(instanceEnd, i); _line.start.applyMatrix4(matrixWorld); _line.end.applyMatrix4(matrixWorld); const pointOnLine = new THREE.Vector3(); const point = new THREE.Vector3(); _ray.distanceSqToSegment(_line.start, _line.end, point, pointOnLine); intersects.push({ point: point, pointOnLine: pointOnLine, distance: _ray.origin.distanceTo(point), object: lineSegments, face: null, faceIndex: i, uv: null, uv2: null }); } } } class LineSegments2 extends THREE.Mesh { constructor( geometry = new THREE.LineSegmentsGeometry(), material = new THREE.LineMaterial({ color: Math.random() * 0xffffff }) ) { super(geometry, material); this.isLineSegments2 = true; this.type = "LineSegments2"; } // for backwards-compatibility, but could be a method of THREE.LineSegmentsGeometry... computeLineDistances() { const geometry = this.geometry; const instanceStart = geometry.attributes.instanceStart; const instanceEnd = geometry.attributes.instanceEnd; const lineDistances = new Float32Array(2 * instanceStart.count); for (let i = 0, j = 0, l = instanceStart.count; i < l; i++, j += 2) { _start.fromBufferAttribute(instanceStart, i); _end.fromBufferAttribute(instanceEnd, i); lineDistances[j] = j === 0 ? 0 : lineDistances[j - 1]; lineDistances[j + 1] = lineDistances[j] + _start.distanceTo(_end); } const instanceDistanceBuffer = new THREE.InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1 geometry.setAttribute( "instanceDistanceStart", new THREE.InterleavedBufferAttribute(instanceDistanceBuffer, 1, 0) ); // d0 geometry.setAttribute( "instanceDistanceEnd", new THREE.InterleavedBufferAttribute(instanceDistanceBuffer, 1, 1) ); // d1 return this; } raycast(raycaster, intersects) { const worldUnits = this.material.worldUnits; const camera = raycaster.camera; if (camera === null && !worldUnits) { console.error( 'LineSegments2: "Raycaster.camera" needs to be set in order to raycast against LineSegments2 while worldUnits is set to false.' ); } const threshold = raycaster.params.Line2 !== undefined ? raycaster.params.Line2.threshold || 0 : 0; _ray = raycaster.ray; const matrixWorld = this.matrixWorld; const geometry = this.geometry; const material = this.material; _lineWidth = material.linewidth + threshold; _instanceStart = geometry.attributes.instanceStart; _instanceEnd = geometry.attributes.instanceEnd; // check if we intersect the sphere bounds if (geometry.boundingSphere === null) { geometry.computeBoundingSphere(); } _sphere.copy(geometry.boundingSphere).applyMatrix4(matrixWorld); // increase the sphere bounds by the worst case line screen space width let sphereMargin; if (worldUnits) { sphereMargin = _lineWidth * 0.5; } else { const distanceToSphere = Math.max( camera.near, _sphere.distanceToPoint(_ray.origin) ); sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, material.resolution ); } _sphere.radius += sphereMargin; if (_ray.intersectsSphere(_sphere) === false) { return; } // check if we intersect the box bounds if (geometry.boundingBox === null) { geometry.computeBoundingBox(); } _box.copy(geometry.boundingBox).applyMatrix4(matrixWorld); // increase the box bounds by the worst case line width let boxMargin; if (worldUnits) { boxMargin = _lineWidth * 0.5; } else { const distanceToBox = Math.max( camera.near, _box.distanceToPoint(_ray.origin) ); boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, material.resolution ); } _box.expandByScalar(boxMargin); if (_ray.intersectsBox(_box) === false) { return; } if (worldUnits) { raycastWorldUnits(this, intersects); } else { raycastScreenSpace(this, camera, intersects); } } } return LineSegments2; })()39:[] 2f:{"title":"Goldstein-Price Exploration","cells":[{"id":0,"value":"# Goldstein-Price Exploration","pinned":false,"hidden":false,"mode":"md"},{"id":775,"value":"## ${textcolor('Design', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Let's make a function.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"viewof fVizSpace = new Promise((resolve) => {\n resolve(html`

`);\n}).then((domElement) => {\n let materialParams = {\n width: fAxesDim,\n height: fAxesDim,\n thickness: thickness\n };\n let vizSpace = new VisualizationSpace(domElement, materialParams);\n invalidation.then(() => vizSpace.removeAllViz());\n domElement.value = vizSpace;\n return domElement;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1279,"value":"viewof meshGridIndex = Inputs.radio([0, 1, 2, 3, 4, 5, 6, 7, 8], {\n label: \"Which mesh to show\",\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"viewof renderSurfaceMeshes = Inputs.toggle({\n label: \"render subset surface meshes?\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"yOffset = 1.85","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"viewof division = Inputs.range([1, 5], {\n label: \"GP division\",\n step: 0.25,\n value: 1,\n disabled: fChoice !== \"goldsteinPrice\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"viewof clipFn = Inputs.toggle({\n label: \"clip bounds?\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"viewof sliceEnd = Inputs.range([0, toolpath.length], {\n label: \"slice toolpath\",\n step: 1,\n value: toolpath.length\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"viewof uFreq = Inputs.range([0, 24], {\n label: \"u freq\",\n step: 1,\n value: 24,\n disabled: fChoice !== \"radialWave\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"viewof vFreq = Inputs.range([0, 24], {\n label: \"v freq\",\n step: 1,\n value: 24,\n disabled: fChoice !== \"radialWave\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"viewof sincFreq = Inputs.range([0, 24], {\n label: \"sinc frequency\",\n step: 1,\n value: 8,\n disabled: fChoice !== \"sinc\" && fChoice !== \"p3sinc\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"viewof major = Inputs.radio([\"row\", \"column\"], {\n label: \"major\",\n value: \"row\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"viewof fChoice = Inputs.radio(\n [\"sinc\", \"radialWave\", \"goldsteinPrice\", \"CUSTOM_p3\", \"CUSTOM_p5\"],\n {\n label: \"2D function\",\n value: \"goldsteinPrice\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"## These parameters control the material size","pinned":false,"hidden":false,"mode":"md"},{"id":884,"value":"Edit them to your liking.","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"fAxesDim = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"thickness = 2.0","pinned":true,"hidden":false,"mode":"ojs"},{"id":882,"value":"### Here are the actual functions we sample","pinned":false,"hidden":false,"mode":"md"},{"id":886,"value":"If you want to modify the math, or define a new one!","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"function radialWave(u, v, optionalTarget) {\n // TODO: parameterize constants\n var result = optionalTarget || new THREE.Vector3();\n let yOffset = thickness * (1 / 4);\n var x = u * fAxesDim;\n var z = v * fAxesDim;\n var y =\n (Math.sin(u * uFreq * Math.PI) + Math.cos(v * vFreq * Math.PI)) *\n (thickness / 8) +\n yOffset;\n\n if (clipFn) {\n if (y < 0) {\n y = 0;\n } else if (y > thickness - baseThickness) {\n y = thickness - baseThickness;\n }\n }\n\n return result.set(x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"function sinc(u, v, optionalTarget) {\n const eps = 0.000001;\n var result = optionalTarget || new THREE.Vector3();\n var x = u * fAxesDim;\n var z = v * fAxesDim;\n let xShift = (u - 0.5) * fAxesDim;\n let zShift = (v - 0.5) * fAxesDim;\n let amplitude = 0.2;\n let r = Math.sqrt(xShift ** 2 + zShift ** 2) || eps;\n let y = (amplitude * Math.sin(Math.PI + sincFreq * r)) / (2 * r) + yOffset;\n\n if (clipFn) {\n if (y < minDepth) {\n y = minDepth;\n } else if (y > maxToolDepth) {\n y = maxToolDepth;\n }\n }\n\n return result.set(x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"function goldsteinPrice(u, v, optionalTarget) {\n const eps = 0.000001;\n var result = optionalTarget || new THREE.Vector3();\n var xOrig = u * fAxesDim;\n var zOrig = v * fAxesDim;\n let x = (u - xBreadth / 2 - 0.5) * xBreadth;\n let z = (v - zBreadth / 2 - 0.5) * zBreadth;\n let y =\n (1 +\n (x + z + 1) ** 2 *\n (19 - 14 * x + 3 * x ** 2 - 14 * z + 6 * x * z + 3 * z ** 2)) *\n (30 +\n (2 * x - 3 * z) ** 2 *\n (18 - 32 * x + 12 * x ** 2 + 48 * z - 36 * x * z + 27 * z ** 2));\n\n // y = y / division;\n y = -Math.log(y);\n y = y + yOffset;\n //x = x + xOffset;\n //z = z + zOffset;\n\n // Major scaledown\n if (clipFn) {\n if (y < minDepth) {\n y = minDepth;\n } else if (y > maxToolDepth) {\n y = maxToolDepth;\n }\n }\n\n return result.set(xOrig, y, zOrig);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"function CUSTOM_p3(u, v, optionalTarget) {\n const eps = 0.000001;\n var result = optionalTarget || new THREE.Vector3();\n var x = u * fAxesDim;\n var z = v * fAxesDim;\n let xShift = (u - 0.5) * fAxesDim;\n let zShift = (v - 0.5) * fAxesDim;\n let phaseShift = Math.PI / 2;\n let r = Math.sqrt(xShift ** 2 + zShift ** 2) || eps;\n let y = Math.sin(phaseShift + sincFreq * r) / r ** 0.5 + yOffset;\n\n if (clipFn) {\n if (y < 0) {\n y = 0;\n } else if (y > thickness - baseThickness) {\n y = thickness - baseThickness;\n }\n }\n\n return result.set(x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"function CUSTOM_p5(u, v, optionalTarget) {\n // TODO: parameterize constants\n let sinc = (x) => {\n let amplitude = 1;\n let eps = 0.001;\n let r = Math.sqrt(x ** 2 + x ** 2) || eps;\n return (amplitude * Math.sin(Math.PI + sincFreq * r)) / (2 * r);\n };\n var result = optionalTarget || new THREE.Vector3();\n let yOffset = thickness * (1 / 4);\n var x = u * fAxesDim;\n var z = v * fAxesDim;\n var y = Math.sin(u * 3 * Math.PI) * Math.cos(v * 4 * Math.PI) + yOffset;\n\n if (clipFn) {\n if (y < 0) {\n y = 0;\n } else if (y > thickness - baseThickness) {\n y = thickness - baseThickness;\n }\n }\n\n return result.set(x, y, z);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"function2d = ({\n sinc,\n CUSTOM_p3,\n radialWave,\n goldsteinPrice,\n CUSTOM_p5\n}[fChoice])","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"### Tooling parameters which affect the design","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"toolDiameter = 0.125","pinned":true,"hidden":false,"mode":"ojs"},{"id":914,"value":"minDepth = 0.25","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"maxToolDepth = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":898,"value":"If you imagine a \"base\" that's not cut at all, this is how thick it would be.","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"baseThickness = thickness - maxToolDepth","pinned":true,"hidden":false,"mode":"ojs"},{"id":895,"value":"By default, the function is defined at the top of the material, so we need to change the y-offset (confusing: the y direction is up) to get it at the right depth in the material. A logical choice would be half of the max tool depth, but you can set it to whatever looks best.","pinned":false,"hidden":false,"mode":"md"},{"id":659,"value":"stepover = 0.65","pinned":true,"hidden":false,"mode":"ojs"},{"id":842,"value":"## ${textcolor('Below here, we calculate the samples', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":893,"value":"You shouldn't have to touch these (or at least that much).","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"samplesPerAxis = Math.ceil(fAxesDim / (toolDiameter * (1 - stepover)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"samples = {\n let xSamples = range(samplesPerAxis).map((s) => s / samplesPerAxis);\n let ySamples = range(samplesPerAxis).map((s) => s / samplesPerAxis);\n return xSamples\n .map((u) => {\n return ySamples.map((v) => {\n return currGridFunc(u, v, null);\n });\n })\n .flat();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"packedPoints = samples.map((s) => [s.x, s.y, s.z]).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"packedColors = samples.map((s) => [s.y * 255, 0, 0]).flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"samplePoints = {\n let geometry = new THREE.BufferGeometry();\n geometry.setAttribute(\n \"position\",\n new THREE.Float32BufferAttribute(packedPoints, 3)\n );\n geometry.setAttribute(\n \"color\",\n new THREE.Float32BufferAttribute(packedColors, 3)\n );\n geometry.computeBoundingSphere();\n let material = new THREE.PointsMaterial({\n size: 2,\n vertexColors: true,\n side: THREE.DoubleSide\n });\n return new THREE.Points(geometry, material);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"paraMesh = {\n let material = new THREE.MeshPhongMaterial({\n color: 0xff0000,\n side: THREE.DoubleSide,\n transparent: true,\n opacity: 0.85\n });\n let geom = new ParametricGeometry(function2d, 120, 120, false);\n let mesh = new THREE.Mesh(geom, material);\n invalidation.then((_) => {\n geom.dispose();\n material.dispose();\n });\n return mesh;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"xBreadth = 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":1187,"value":"zBreadth = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1234,"value":"function makeMeshWithFunc(func) {\n let material = new THREE.MeshPhongMaterial({\n color: 0xff0000,\n side: THREE.DoubleSide,\n transparent: true,\n opacity: 0.85\n });\n let geom = new ParametricGeometry(func, 120, 120, false);\n let mesh = new THREE.Mesh(geom, material);\n mesh.rotateY(Math.PI);\n invalidation.then((_) => {\n geom.dispose();\n material.dispose();\n });\n return mesh;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1219,"value":"function gpWithOrigin(xOrigin, zOrigin) {\n function goldsteinPrice(u, v, optionalTarget) {\n const eps = 0.000001;\n var result = optionalTarget || new THREE.Vector3();\n var xOrig = u * fAxesDim;\n var zOrig = v * fAxesDim;\n let x = (u - xBreadth / 2 - xOrigin) * xBreadth;\n let z = (v - zBreadth / 2 - zOrigin) * zBreadth;\n let y =\n (1 +\n (x + z + 1) ** 2 *\n (19 - 14 * x + 3 * x ** 2 - 14 * z + 6 * x * z + 3 * z ** 2)) *\n (30 +\n (2 * x - 3 * z) ** 2 *\n (18 - 32 * x + 12 * x ** 2 + 48 * z - 36 * x * z + 27 * z ** 2));\n\n y = -Math.log10(y);\n y = y / division;\n y = y + yOffset;\n //x = x + xOffset;\n //z = z + zOffset;\n\n // Major scaledown\n if (clipFn) {\n if (y < minDepth) {\n y = minDepth;\n } else if (y > maxToolDepth) {\n y = maxToolDepth;\n }\n }\n\n return result.set(xOrig, y, zOrig);\n }\n return goldsteinPrice;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1224,"value":"meshGrid = {\n let spaceOffset = fAxesDim + 0.5;\n let meshes = [-1, 0, 1]\n .map((xOrig) => {\n return [0, 1, 2].map((zOrig) => {\n let f = gpWithOrigin(xOrig, zOrig);\n let mesh = makeMeshWithFunc(f);\n mesh.position.set(xOrig * spaceOffset, 0, zOrig * spaceOffset);\n return mesh;\n });\n })\n .flat();\n let tests = meshes.map((m) => {\n m.geometry.computeBoundingBox;\n let idk = m.position;\n return idk;\n });\n mutable test = tests;\n let group = new THREE.Group();\n meshes.forEach((m) => group.add(m));\n return group;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1285,"value":"gridGpFunctions = {\n return [-1, 0, 1]\n .map((xOrig) => {\n return [0, 1, 2].map((zOrig) => {\n let f = gpWithOrigin(xOrig, zOrig);\n return f;\n });\n })\n .flat();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1289,"value":"currGridFunc = gridGpFunctions[meshGridIndex]","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"// Uncomment if you want to render intermediate steps to the space\n{\n if (renderSurfaceMeshes) {\n fVizSpace.scene.add(meshGrid);\n fVizSpace.threeRenderScene();\n invalidation.then((_) => {\n fVizSpace.scene.remove(meshGrid);\n fVizSpace.threeRenderScene();\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"toolpath = range(samplesPerAxis)\n .map((iRow) => {\n let rowInsts = range(samplesPerAxis)\n .map((iCol) => {\n let sample;\n if (major === \"row\") {\n sample = samples[iRow * samplesPerAxis + iCol];\n } else {\n sample = samples[iCol * samplesPerAxis + iRow];\n }\n return `M3,${sample.x},${sample.y},${sample.z}`;\n })\n .flat();\n if (iRow % 2 !== 0) {\n rowInsts = rowInsts.slice().reverse();\n }\n return rowInsts;\n })\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"toolpathSlice = toolpath.slice(0, sliceEnd)","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"populateVizSpace(fVizSpace, [toolpathSlice])","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"function range(n) {\n return [...Array(n).keys()];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"function populateVizSpace(vizSpace, toolpaths) {\n if (!vizSpace || !vizSpace.removeAllViz) {\n return htl.html`⛔️ Could not find Visualization Space.`;\n }\n vizSpace.removeAllViz();\n let materialParams = {\n width: fAxesDim,\n height: fAxesDim,\n thickness: thickness\n };\n toolpaths.forEach((toolpath, index) => {\n let tpGroup = VisualizationInterpreters.sbpBasicViz(\n toolpath,\n materialParams\n );\n vizSpace.addVizWithName(tpGroup, `toolpath ${index}`);\n });\n return htl.html`✨ Populated Visualization Space at ${new Date().toLocaleString()}.`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"mutable test = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":844,"value":"## Some Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"THREE = {\n const THREE = (window.THREE = await require(\"three@0.146.0/build/three.js\"));\n // await require(\"three@0.108.0/examples/js/controls/OrbitControls.js\").catch(\n // () => {}\n // );;\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"Line2 = (function () {\n class Line2 extends LineSegments2 {\n constructor(\n geometry = new THREE.LineGeometry(),\n material = new THREE.LineMaterial({\n color: Math.random() * 0xffffff\n })\n ) {\n super(geometry, material);\n this.isLine2 = true;\n this.type = \"Line2\";\n }\n }\n\n return Line2;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"function goldsteinPrice2(x, y) {\n return (\n (1 +\n Math.pow(x + y + 1, 2) *\n (19 - 14 * x + 3 * x * x - 14 * y + 6 * x * x + 3 * y * y)) *\n (30 +\n Math.pow(2 * x - 3 * y, 2) *\n (18 - 32 * x + 12 * x * x + 48 * y - 36 * x * y + 27 * y * y))\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"gp2Points = {\n var n = 256,\n m = 256,\n values = new Array(n * m);\n for (var j = 0.5, k = 0; j < m; ++j) {\n for (var i = 0.5; i < n; ++i, ++k) {\n values[k] = goldsteinPrice((i / n) * 4 - 2, 1 - (j / m) * 3);\n }\n }\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"contours = d3\n .contours()\n .size([256, 256])\n .thresholds(Array.from({ length: 19 }, (_, i) => Math.pow(2, i + 2)))(\n gp2Points\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"[Just take from this notebook](https://observablehq.com/@d3/contours)","pinned":false,"hidden":false,"mode":"md"},{"id":554,"value":"## ${textcolor('Connecting to the Machine', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":558,"value":"import {\n serverUrl,\n socket,\n latestMessage,\n toggleSocketButton,\n availableEndMills,\n invalidEndMillsForMaterial,\n setMachineStateParameter,\n sendRegionDims,\n sendThickness,\n sbpButton,\n sendInstsToOverlay,\n sendParamsToOverlay,\n feedSpeedTable,\n generateChecklist\n // VisualizationSpace,\n // VisualizationInterpreters\n} from \"@jtranoleary/woodgrain-authoring\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"socket","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"toggleSocketButton","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"sbpButton(\n \"Send Test\",\n [\"MX,5\"],\n () => true,\n () => {}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"## ${textcolor('Toolpaths parameters', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"flippedToolpath = toolpath\n .map((inst) => flipYZCoords(inst))\n .map((inst) => reverseZSign(inst))","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"numFlutes = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"surfaceSpeed = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"**Assuming foam as the material.**","pinned":false,"hidden":false,"mode":"md"},{"id":679,"value":"chipload = ({\n 0.125: 0.005,\n 0.25: 0.012\n}[toolDiameter])","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"feed = (speed * numFlutes * chipload) / 60","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"speed = surfaceSpeed / ((Math.PI / 12) * toolDiameter)","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"rampSpeed = 1.0","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"## ${textcolor('Generating the toolpaths', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":615,"value":"completeInstructions = {\n // NOTE: the second argument sets the Z-feedrate, which we might normally half\n // of the XY-feedrate, but here we found that unintentionally limiting for 3d\n // milling of foam, so we set it to equal the XY-feedrate.\n const setFeed = `MS,${feed},${feed},,,`;\n const setSpeed = `TR,${speed}`;\n const setRamps = `VR,${rampSpeed},${rampSpeed},,,,,,,,`;\n const spindleOn = \"C6\";\n const spindleOff = \"C7\";\n const moveHome = \"MH\";\n let firstXy = extractXy(flippedToolpath[0]);\n let moveToFirstPoint = `M2,${firstXy.x},${firstXy.y}`;\n let initialPlunge = `MZ,${extractZ(flippedToolpath[0]).z}`;\n let preamble = [\n setFeed,\n setSpeed,\n setRamps,\n spindleOn,\n moveToFirstPoint,\n initialPlunge\n ];\n let epilogue = [spindleOff, moveHome];\n return preamble.concat(flippedToolpath).concat(epilogue);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"function extractXy(inst) {\n let toks = inst.split(\",\");\n let op = toks[0];\n if (!(op === \"M2\" || op === \"M3\" || op === \"J2\" || op === \"J3\")) {\n throw Error(\"Incompatible command\");\n }\n return { x: toks[1], y: toks[2] };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":633,"value":"function extractZ(inst) {\n let toks = inst.split(\",\");\n let op = toks[0];\n if (!(op === \"M2\" || op === \"M3\" || op === \"J2\" || op === \"J3\")) {\n throw Error(\"Incompatible command\");\n }\n return { z: toks[3] };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":645,"value":"function flipYZCoords(inst) {\n let toks = inst.split(\",\");\n let op = toks[0];\n if (!(op === \"M3\" || op === \"J3\")) {\n return inst;\n }\n let x = toks[1];\n let y = toks[2];\n let z = toks[3];\n return `${op},${x},${z},${y}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"function reverseZSign(inst) {\n let toks = inst.split(\",\");\n let op = toks[0];\n if (!(op === \"M3\" || op === \"J3\")) {\n return inst;\n }\n let x = toks[1];\n let y = toks[2];\n let z = toks[3];\n return `${op},${x},${y},${-z}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"sbpButton(\n \"DISPATCH\",\n completeInstructions,\n () => true,\n () => {}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"## ${textcolor('Imports', 'blue')}","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"import { toc } from \"@mbostock/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W39","stdlib":"1","titling":"auto"}