/* This is code to be shared between X3DFileFormat.js from a point cloud loader and X3DFileFormatImporter.js from MeshViewer. */ class X3DUtils { } X3DUtils.getAttributeNumberDefaulted = function(element, attrName, defaultValue) { if (element.hasAttribute(attrName)) { var v = parseFloat(element.getAttribute(attrName).trim()); if (typeof v !== 'number' || isNaN(v)) return defaultValue; else return v; } else return defaultValue; }; X3DUtils.getAttributeNumberArrayDefaulted = function(element, attrName, len, defaultValue) { if (element.hasAttribute(attrName)) { var v = X3DUtils.getNumbers(element.getAttribute(attrName)); if (v.length !== len) return defaultValue; else { return v; } } else return defaultValue; }; X3DUtils.getNumbers = function(s) { if (typeof s === 'string') s = s.split(/\s+/); return s.map(function(part) { if (typeof part === 'number' && !isNaN(part)) return part; return parseFloat(part); }).filter(function(num) { return !isNaN(num); }); }; X3DUtils.getUnitVector = function(v) { var m = Math.sqrt(v[0] * v[0], v[1] * v[1], v[2] * v[2]); if (m === 0) { m = 1; v = [1, 0, 0]; } m = 1 / m; // multiplying is often a little faster than dividing so get reciprocal. var result = []; for (var i = 0; i < 3; i++) { result.push(v[i] * m); } return result; }; X3DUtils.storeDef = function(element, defs) { if (element.hasAttribute('DEF')) { var def = element.getAttribute('DEF'); defs[def] = element; } }; X3DUtils.getSceneFromText = function(content) { var xmlDoc; if (window.DOMParser) { var parser = new DOMParser(); xmlDoc = parser.parseFromString(content, "text/xml"); } else // Internet Explorer { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.loadXML(content); } var scene = xmlDoc.getElementsByTagName('Scene'); if (!scene) { var msg = 'No Scene element found in document. Invalid X3D XML content'; console.error(msg); throw new Error(msg); } return scene[0]; }; X3DUtils.getColourAndDefsFromShape = function(element, colour, defs) { let appearance = element.querySelector(':scope > Appearance'); if (appearance) { let material = appearance.querySelector(':scope > Material[diffuseColor]'); if (!material) { if (appearance.hasAttribute('USE')) { var key = appearance.getAttribute('USE'); if (defs[key] !== undefined) { material = defs[key].querySelector(':scope > Material[diffuseColor]'); } } } if (material) { let diffuseColour = X3DUtils.getNumbers(material.getAttribute('diffuseColor')).map(function(num) { return Math.max(0, Math.min(1, num)); }); if (diffuseColour.length === 3) { colour = { 'r': diffuseColour[0], 'g': diffuseColour[1], 'b': diffuseColour[2] }; } } X3DUtils.storeDef(appearance, defs); } return colour; }; X3DUtils.subtract = function(v1, v2) { return v1.map(function(num1, index) { return num1 - v2[index]; }); }; X3DUtils.add = function(v1, v2) { return v1.map(function(num1, index) { return num1 + v2[index]; }); }; X3DUtils.getTransformer = function(transformElement) { var center = X3DUtils.getAttributeNumberArrayDefaulted(transformElement, 'center', 3, [0, 0, 0]); var scale = X3DUtils.getAttributeNumberArrayDefaulted(transformElement, 'scale', 3, [1, 1, 1]); var rotationInfo; var translation = X3DUtils.getAttributeNumberArrayDefaulted(transformElement, 'translation', 3, [0, 0, 0]); if (transformElement.hasAttribute('rotation')) { var rotation = X3DUtils.getAttributeNumberArrayDefaulted(transformElement, 'rotation', 4, [0, 0, 0, 0]); rotationInfo = ArbitraryAxisRotation.getRotateArbitraryAxisMatrices(rotation[0], rotation[1], rotation[2], rotation[3]); } var scaleOrientationInfo; var scaleOrientation; if (transformElement.hasAttribute('scaleOrientation')) { scaleOrientation = X3DUtils.getAttributeNumberArrayDefaulted(transformElement, 'scaleOrientation', 4, [0, 0, 1, 1]); scaleOrientationInfo = ArbitraryAxisRotation.getRotateArbitraryAxisMatrices(scaleOrientation[0], scaleOrientation[1], scaleOrientation[2], scaleOrientation[3]); } return function(point) { point = point.slice(0); point = X3DUtils.subtract(point, center); // scale orientation. if (scaleOrientationInfo !== undefined) { point = math.multiply(point, scaleOrientationInfo.toX); point = math.multiply(point, scaleOrientationInfo.xAxisRotation); } // scale. for (var i = 0; i < 3; i++) { point[i] = scale[i] * point[i]; } if (point.length !== 3) { console.error('point.length should be 3 but is: ' + point.length); } else { for (var i = 0; i < 3; i++) { if (isNaN(point[i]) || typeof point[i] !== 'number') { console.error('non-number found at index ' + i); } } } if (scaleOrientationInfo !== undefined) { point = math.multiply(point, scaleOrientationInfo.fromXAxisRotation); point = math.multiply(point, scaleOrientationInfo.fromX); } // rotate. if (rotationInfo !== undefined) point = ArbitraryAxisRotation.rotateArbitraryUsingInfo(rotationInfo, point); point = X3DUtils.add(point, center); // translate. for (var i = 0; i < 3; i++) { point[i] = translation[i] + point[i]; } return point; }; }; class WRLUtils { }; WRLUtils._attributeValueRegexes = [ // if starts with a real number or integer, return that. '[\\-]?\\d+(\.\\d+)?([Ee][+\\-]\\d+)?', // Float '[\\-]?\\d+(\.\\d+)?([Ee][+\\-]\\d+)?((,|,?\\s+|\\s+,|\\s+,\\s+)[\\-]?\\d+(\.\\d+)?([Ee][+\\-]\\d+)?)+', // Float array '\\"[^"]\\"', // mfString '[A-Z]+[_A-Z]*' // sfEnum ]; WRLUtils._removeComments = function(content) { var lines = content.trim().split('\n').map(function(line) { line = line.trim(); var index = line.indexOf('#'); if (index !== -1) return line.substring(0, index).trim(); else return line; }); return lines.join('\n').trim(); }; WRLUtils._getTagNameFor = function(s) { var parts = s.split(/\s+/); if (parts.length === 1) return parts[0]; else if (parts.length === 0) throw new Error('Unable to get tag name from empty string'); var partsStartingWithCapital = parts.filter(function(partName) { var c = partName.charAt(0); return c.toUpperCase() === c; }); if (partsStartingWithCapital.length === 1) return partsStartingWithCapital[0]; return parts[parts.length - 1]; }; WRLUtils._getScanTokensFromVRML = function(content) { var token = ''; var attributeValueMatches = WRLUtils._getAttributeValueTokens(content); var result = []; for (var i = 0; i < content.length; i++) { var c = content.charAt(i); if ('[]{}'.indexOf(c) !== -1) { token = token.trim(); if (token.length !== 0) { result.push(token); token = ''; } result.push(c); } else if (attributeValueMatches['' + i] !== undefined) { token = token.trim(); if (token.length !== 0) { result.push(token); token = ''; } token = attributeValueMatches['' + i]; result.push(token); i += token.length - 1; token = ''; } else { token += c; } } token = token.trim(); if (token !== '') result.push(token); return result; }; WRLUtils._vrmlToX3DAttribute = function(tokens, startIndex) { if (!WRLUtils._isAttributeToken(tokens[startIndex + 1])) throw new Error('_vrmlToX3DAttribute expects ' + tokens[startIndex + 1] + ' to be an attribute value token'); var name = tokens[startIndex]; var value; var newStartIndex; if (tokens[startIndex + 1] === '[') { if (tokens[startIndex + 2] === ']') { value = ''; newStartIndex = startIndex + 3; } else { value = tokens[startIndex + 2].replace(/,/g, ' '); newStartIndex = startIndex + 4; } } else { value = tokens[startIndex + 1]; newStartIndex = startIndex + 2; } if (/\s/.test(name)) { console.error('Parse error. Invalid attribute name(' + tokens[startIndex] + ') found near tokens: ', tokens.slice(Math.max(0, startIndex - 2), startIndex + 10)); } return { 'name': tokens[startIndex], 'value': value, 'newStartIndex': newStartIndex }; }; WRLUtils._getAttributeValueTokens = function(s) { var whitespace = /\s/; var after = /[\s\}]/; var result = {}; // structured as (start index) => (string match). WRLUtils._attributeValueRegexes.forEach(function(re) { var matches = s.matchAll(new RegExp(re, 'g')); for (const match of matches) { if (match.index === 0) continue; // there must be a white-space immediately before the match. if (!whitespace.test(s.charAt(match.index - 1))) { continue; } // there must be a white-space or ] immediately after the match. if (!after.test(s.charAt(match.index + match[0].length))) { continue; } var key = '' + match.index; if (result[key] === undefined || match[0].length > result[key].length) result[key] = match[0]; } }); return result; }; WRLUtils._isAttributeToken = function(token) { if (token === '[') return true; else if ('{}]'.indexOf(token) !== -1) return false; var matches = WRLUtils._attributeValueRegexes.filter(function(re) { return !!token.match(new RegExp('^' + re + '$', 'g')); }); return matches.length !== 0; }; WRLUtils._loadChildrenFromTokens = function(doc, parentElement, closingBracket, tokens, startIndex) { for (;startIndex < tokens.length && tokens[startIndex] !== closingBracket;) { if ('{}[]'.indexOf(tokens[startIndex]) !== -1) { var msg = 'Expected to close children section with ' + closingBracket + ' but found ' + tokens[startIndex] + ' at token index ' + startIndex; console.error(msg); throw new Error(msg); } else if (WRLUtils._isAttributeToken(tokens[startIndex + 1])) { var attrInfo = WRLUtils._vrmlToX3DAttribute(tokens, startIndex); if (attrInfo.name === 'children' && tokens[startIndex + 1] === '[') { startIndex = WRLUtils._loadChildrenFromTokens(doc, parentElement, ']', tokens, startIndex + 2); startIndex ++; } else { parentElement.setAttribute(attrInfo.name, attrInfo.value); startIndex = attrInfo.newStartIndex; } } else { var childElementInfo = WRLUtils._vrmlToX3DElement(doc, tokens, startIndex); parentElement.appendChild(childElementInfo.element); startIndex = childElementInfo.newStartIndex; } } return startIndex; } WRLUtils._vrmlToX3DElement = function(doc, tokens, startIndex) { var tagName = WRLUtils._getTagNameFor(tokens[startIndex]); if (tokens[startIndex + 1] !== '{') throw new Error('Expected { but ' + tokens[startIndex + 1] + ' found at token ' + (startIndex + 1) + '. Trying to create element with tag name ' + tagName); var resultElement = doc.createElement(tagName); startIndex += 2; startIndex = WRLUtils._loadChildrenFromTokens(doc, resultElement, '}', tokens, startIndex); return { 'element': resultElement, 'newStartIndex': startIndex + 1 }; }; WRLUtils.vrmlToX3DDocument = function(content) { content = 'Scene { ' + WRLUtils._removeComments(content) + ' }'; var tokens = WRLUtils._getScanTokensFromVRML(content); var doc = document.implementation.createDocument(null, "X3D"); var sceneInfo = WRLUtils._vrmlToX3DElement(doc, tokens, 0); return sceneInfo.element; }; /* Copied from: https://gitlab.com/taketwo/three-pcd-loader/-/blob/master/decompress-lzf.js */ function decompressLZF (inData, outLength) { var inLength = inData.length var outData = new Uint8Array(outLength) var inPtr = 0 var outPtr = 0 var ctrl var len var ref do { ctrl = inData[inPtr++] if (ctrl < (1 << 5)) { ctrl++ if (outPtr + ctrl > outLength) throw new Error('Output buffer is not large enough') if (inPtr + ctrl > inLength) throw new Error('Invalid compressed data') do { outData[outPtr++] = inData[inPtr++] } while (--ctrl) } else { len = ctrl >> 5 ref = outPtr - ((ctrl & 0x1f) << 8) - 1 if (inPtr >= inLength) throw new Error('Invalid compressed data') if (len === 7) { len += inData[inPtr++] if (inPtr >= inLength) throw new Error('Invalid compressed data') } ref -= inData[inPtr++] if (outPtr + len + 2 > outLength) throw new Error('Output buffer is not large enough') if (ref < 0) throw new Error('Invalid compressed data') if (ref >= outPtr) throw new Error('Invalid compressed data') do { outData[outPtr++] = outData[ref++] } while (--len + 2) } } while (inPtr < inLength) return outData } class PointRotator { constructor() { this.setAngle(0); } setAngle(angle) { this.cosAngle = Math.cos(angle); this.sinAngle = Math.sin(angle); } transform(pointCoords) { return [ pointCoords[0] * this.cosAngle - pointCoords[2] * this.sinAngle, pointCoords[1], pointCoords[0] * this.sinAngle + pointCoords[2] * this.cosAngle, ]; } } class PointCloudFileFormat { matches(filename) { if (typeof this.accept !== 'string') return false; filename = filename.toLowerCase(); return filename.lastIndexOf(this.accept) === filename.length - this.accept.length; } } class MOLFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.mol'; } _loadAscii(content, defaultRGB) { var lines = content.split('\n').slice(3).map(function(line) { return line.trim().replace(/\s+/g, ' '); }); var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; var parts = lines[0].split(' '); var numAtoms = parseInt(parts[0]); var result = []; for (var i = 1; i <= numAtoms; i++) { var line = lines[i]; var parts = line.split(' '); if (parts.length >= 3) { var coordinates = []; for (var coordinateIndex = 0; coordinateIndex < 3; coordinateIndex++) { var val = parseFloat(parts[coordinateIndex]); if (isNaN(val)) { console.error('Invalid .mol format. Number expected but ' + parts[coordinateIndex] + ' found. Line: ' + line); break; } else coordinates.push(val); } if (coordinates.length === 3) { result.push(new Point(coordinates, r, g, b)); } } else { console.error('Invalid .mol format. Line expected to have at least 3 numbers but only ' + parts.length + ' found.'); } } return result; } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; resolver(outer._loadAscii(content, defaultRGB)); }; }); } } class OBJFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.obj'; } _loadFromVertices(content, defaultRGB) { var lines = content.split("\n"); return lines.map(function(line) { // remove comments wherever they may appear in the line. var index = line.indexOf('#'); if (index !== -1) line = line.substring(0, index); line = line.replace(/\s+/g, ' '); return line.trim(); }).filter(function(line) { // We only care about lines starting with "v ". return line.indexOf("v ") === 0; }).map(function(line) { var parts = line.substring(2).split(' ').map(function(s) { return parseFloat(s); }).filter(function(n) { return !isNaN(n); // filter out values that are not numbers. }); var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; // if colours are specified, use them. if (parts.length >= 6) { r = parts[3]; g = parts[4]; b = parts[5]; } return new Point(parts.slice(0, 3), r, g, b); }); } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; resolver(outer._loadFromVertices(content, defaultRGB)); }; }); } } /* Object File Format is described at: https://en.wikipedia.org/wiki/OFF_(file_format) It is supported by MeshLab. */ class OFFFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.off'; } _cleanLinesOfContent(content) { var lines = content.split("\n").slice(1); // remove the first line containing "OFF". return lines.map(function(line) { // remove comments wherever they may appear in the line. var index = line.indexOf('#'); if (index !== -1) line = line.substring(0, index); line = line.replace(/\s+/g, ' '); return line.trim(); }).filter(function(line) { var parts = line.split(' '); return parts.length > 2; }); } _loadFromVertices(content, defaultRGB) { var lines = this._cleanLinesOfContent(content); var metaLine = lines[0]; var parts = metaLine.split(' '); var numPoints = parseInt(parts[0]); return lines.slice(1, numPoints + 1).map(function(line) { var parts = line.split(' ').map(function(s) { return parseFloat(s); }).filter(function(n) { return !isNaN(n); // filter out values that are not numbers. }); var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; // if colours are specified, use them. if (parts.length >= 6) { r = parts[3]; g = parts[4]; b = parts[5]; } return new Point(parts.slice(0, 3), r, g, b); }); } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; resolver(outer._loadFromVertices(content, defaultRGB)); }; }); } } /* This is for OpenStreetMap's XML format described at: https://wiki.openstreetmap.org/wiki/OSM_XML OpenStreetMap is a mapping API service and open data. The XML format is one of many formats used by OpenStreetMap to share its data. */ class OSMFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.osm'; } getOSMFromText(content) { var xmlDoc; if (window.DOMParser) { var parser = new DOMParser(); xmlDoc = parser.parseFromString(content, "text/xml"); } else // Internet Explorer { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.loadXML(content); } var osm = xmlDoc.getElementsByTagName('osm'); if (!osm) { var msg = 'No osm element found in document. Invalid OSM XML content'; console.error(msg); throw new Error(msg); } return osm[0]; } _loadFromVertices(content, defaultRGB) { var osm = this.getOSMFromText(content); var nodes = osm.querySelectorAll('node[lon][lat]'); var result = []; nodes.forEach(function(node) { var lat = parseFloat(node.getAttribute('lat').trim()); var lon = parseFloat(node.getAttribute('lon').trim()); if (!isNaN(lat) && !isNaN(lon)) result.push(new Point([lat, lon, 0], defaultRGB.r, defaultRGB.g, defaultRGB.b)); }); return result; } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; resolver(outer._loadFromVertices(content, defaultRGB)); }; }); } } /* This class represents the Point Cloud Data file format. It includes functionality for loading information from .pcd files. A PCD loader aimed at three.js is a useful reference: https://gitlab.com/taketwo/three-pcd-loader/blob/master/pcd-loader.js#L96-112 */ class PCDFileFormat extends PointCloudFileFormat { constructor() { super(); // MIME is hard to predict for PCD files. // I couldn't find any associated MIME by // searching a few file extension -> MIME listing websites. this.accept = '.pcd'; } _loadAscii(meta, content, defaultRGB) { content = content.substring(meta.dataStartIndex).trim(); var lines = content.split("\n"); var result = []; // I'm avoiding map so that invalid lines get filtered out efficiently. lines.forEach(function(line) { var parts = line.split(/[\s,]+/); if (parts.length === meta.fieldsArray.length) { result.push(PCDFileFormat._createPoint(meta.fields, parts, defaultRGB)); } }); return result; } _loadCompressedBinary(meta, arrayBuffer, defaultRGB) { // decompress the data. var sizes = new Uint32Array(arrayBuffer.slice(0, 8)) var compressedSize = sizes[0]; var decompressedSize = sizes[1]; var decompressed = decompressLZF(new Uint8Array(arrayBuffer, 8, compressedSize), decompressedSize); return this._loadBinary(meta, decompressed.buffer, defaultRGB); } _loadBinary(meta, arrayBuffer, defaultRGB) { var dataArrayView = new DataView(arrayBuffer, 0, arrayBuffer.byteLength); const littleEndian = true; var result = []; var row = 0; for (var p = 0; p < meta.points && row < arrayBuffer.byteLength; row += meta.rowSize, p++) { var x = 0, y = 0, z = 0; var i = row + meta.fieldOffsets.x; x = dataArrayView.getFloat32(i, littleEndian); y = dataArrayView.getFloat32(row + meta.fieldOffsets.y, littleEndian); z = dataArrayView.getFloat32(row + meta.fieldOffsets.z, littleEndian); var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; if (meta.fieldOffsets.rgb !== undefined) { r = dataArrayView.getUint8(row + meta.fieldOffsets.rgb + 0) / 255.0; g = dataArrayView.getUint8(row + meta.fieldOffsets.rgb + 1) / 255.0; b = dataArrayView.getUint8(row + meta.fieldOffsets.rgb + 2) / 255.0; } if (isNaN(x) || isNaN(y) || isNaN(z)) { console.error('Unable to decode float for x, y, z at index ' + p + ', x = ' + x + ', y = ' + y + ', z = ' + z); if (isNaN(x)) x = 0; if (isNaN(y)) y = 0; if (isNaN(z)) z = 0; } var newPoint = new Point([x, y, z], r, g, b); result.push(newPoint); } return new Promise(function(resolver, rejecter) { resolver(result); }); } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; var meta = outer._getMeta(content); if (meta.data === 'ascii') resolver(outer._loadAscii(meta, content, defaultRGB)); else { reader.readAsArrayBuffer(file); reader.onload = function(evt) { var data = evt.target.result; var len = meta.dataStartIndex; data = data.slice(len, data.byteLength); if (meta.data === 'binary_compressed') resolver(outer._loadCompressedBinary(meta, data, defaultRGB)); else resolver(outer._loadBinary(meta, data, defaultRGB)); } } }; }); } _sanitizeMeta(meta) { if (meta.data === undefined) meta.data = 'ascii'; // assume it is ASCII if it isn't specified. else meta.data = meta.data.toLowerCase(); if (meta.fields === undefined) meta.fields = 'x y z'; if (typeof meta.points === 'string') meta.points = parseInt(meta.points); // convert fields from string to sanitized Array of column names. meta.fieldsArray = meta.fields.split(/[\s,]+/).map(function(s) { return s.trim().toLowerCase(); }); // convert fields array into an object mapping column name to column index. meta.fields = {}; meta.fieldsArray.forEach(function(key, index) { meta.fields[key] = index; }); if (meta.size === undefined) { meta.size = ''; // assume every field takes 4 bytes because it usually does. for (var i = 0; i < meta.fieldsArray.length; i++) { meta.size += '4 '; } meta = meta.size.trim(); } var rowSize = 0; meta.fieldOffsets = {}; meta.size = meta.size.split(/[\s,]+/).map(function(s, index) { var result = parseInt(s.trim()); var key = meta.fieldsArray[index]; meta.fieldOffsets[key] = rowSize; rowSize += result; return result; }); meta.rowSize = rowSize; } _validateMeta(meta) { if (meta.fields.x === undefined || meta.fields.y === undefined || meta.fields.z === undefined) throw new Error('x, y, z are all required fields for PCD but one or more are missing in: ' + JSON.stringify(meta.fieldsArray)); if (typeof meta.points !== 'number' || isNaN(meta.points)) throw new Error('points must be an int.'); if (meta.size.length !== meta.fieldsArray.length) throw new Error('The number of sizes in size should match the number of fields. ' + meta.size.length + ' != ' + meta.fieldsArray.length); if (typeof meta.rowSize !== 'number' || isNaN(meta.rowSize)) throw new Error('Unable to calculate number of bytes in each row of uncompressed data. Specified size is invalid.'); } _getMeta(content) { var result = {}; var dataStartIndex = 0; // split lines. var lines = content.split("\n"); lines.forEach(function(line) { if (result.data === undefined) dataStartIndex += line.length + 1; line = line.trim(); var index = line.search(/\s/g); // if there is no whitespace in the line, ignore it. if (index > 0) { var key = line.substring(0, index).trim().toLowerCase(); // if the key contains anything other than letters, ignore it. if (/^[a-z]+$/i.test(key)) { var value = line.substring(index + 1).trim(); // Avoid setting if non-ASCII characters are found in value. // This is useful if compressed binary data is in the file. if (/^[\u0000-\u007f]*$/.test(value)) { result[key] = value; } } } }); result.dataStartIndex = dataStartIndex; this._sanitizeMeta(result); return result; } } PCDFileFormat._createPoint = function(fields, dataParts, defaultRGB) { var coords = [ parseFloat(dataParts[fields.x]), parseFloat(dataParts[fields.y]), parseFloat(dataParts[fields.z]) ]; var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; if (fields.rgb || fields.rgba) { var c; if (fields.rgb) c = new Float32Array([parseFloat(dataParts[fields.rgb])]); else c = new Uint32Array([parseInt(dataParts[fields.rgba])]); var dataview = new Uint8Array(c.buffer, 0); b = dataview[0] / 255.0; g = dataview[1] / 255.0; r = dataview[2] / 255.0; } return new Point(coords, r, g, b); } class PLYFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.ply'; } _sanitizeDataType(typeName) { // convert some synonymous types. const conversions = { 'float': 'float32', 'int': 'int32', 'ulong': 'uint64', 'long': 'int64', // just in case "long" shows up. long wasn't mentioned in the wikipedia article, though. 'ushort': 'uint16', 'short': 'int16', 'double': 'float64', 'uchar': 'uint8', 'char': 'int8' }; if (conversions[typeName] === undefined) return typeName; else return conversions[typeName]; } _getByteSize(typeName) { const keys = { 'float32': 4, 'float64': 8, 'int8': 1, 'uint8': 1, 'int16': 2, 'uint16': 2, 'int32': 4, 'uint32': 4, // 64-bit integers not mentioned in wikipedia article but trying to // make this loader robust enough to handle them anyway. 'int64': 8, 'uint64': 8 }; if (keys[typeName] === undefined) return 4; else return keys[typeName]; } _getHeaderInfo(context) { var lines = context.split("\n"); var properties = []; var inVertex = false; var count = 0; var headerEndOffset = 0; var format; for (var i = 0; i < lines.length; i++) { var line = lines[i]; headerEndOffset += line.length + 1; line = line.trim().toLowerCase(); var parts = line.split(/\s+/); if (parts.length > 0 && parts[0] === 'end_header') { break; } else if (parts.length > 0 && parts[0] === 'format') { format = parts[1]; } else if (!inVertex && parts.length > 2 && parts[0] === 'element' && parts[1] === 'vertex') { inVertex = true; count = parseInt(parts[2]); } else if (inVertex && parts.length > 1 && parts[0] === 'element') { inVertex = false; } else if (inVertex && parts.length > 2 && parts[0] === 'property') { var dataType = this._sanitizeDataType(parts[1]); properties.push({ 'type': dataType, 'typeSize': this._getByteSize(dataType), 'name': parts[2] }); } } var propertyIndexes = {}; var propertyObjects = {}; properties.forEach(function(property, index) { propertyIndexes[property.name] = index; propertyObjects[property.name] = property; }); return { "headerEndOffset": headerEndOffset, "vertexCount": count, "format": format, "properties": properties, "propertyIndexes": propertyIndexes, "propertyObjects": propertyObjects }; } _loadAscii(headerInfo, content, defaultRGB) { // get the vertex element definition. var lines = content.substring(headerInfo.headerEndOffset).split("\n"); var result = []; for (var i = 0; i < headerInfo.vertexCount; i++) { var line = lines[i]; var parts = line.trim().split(/\s+/); var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; // default to black. // Does each vertex have a colour specified? if (parts.length > 3 && headerInfo.properties.length > 3) { if (headerInfo.propertyIndexes.red !== undefined) r = parseFloat(parts[headerInfo.propertyIndexes.red]) / 255.0; if (headerInfo.propertyIndexes.green !== undefined) g = parseFloat(parts[headerInfo.propertyIndexes.green]) / 255.0; if (headerInfo.propertyIndexes.blue !== undefined) b = parseFloat(parts[headerInfo.propertyIndexes.blue]) / 255.0; } result.push(new Point([ parseFloat(parts[headerInfo.propertyIndexes.x]), parseFloat(parts[headerInfo.propertyIndexes.y]), parseFloat(parts[headerInfo.propertyIndexes.z]) ], r, g, b)); } return result; } _getNumber(headerInfo, propertyKey, dataView, useLittleEndian, rowOffset, defaultValue) { var property = headerInfo.propertyObjects[propertyKey]; if (property === undefined) return defaultValue; var offset = rowOffset + property.byteOffset; switch (property.type) { case 'float32': return dataView.getFloat32(offset, useLittleEndian); case 'float64': return dataView.getFloat64(offset, useLittleEndian); case 'uint8': return dataView.getUint8(offset, useLittleEndian); case 'int8': return dataView.getInt8(offset, useLittleEndian); case 'uint16': return dataView.getUint16(offset, useLittleEndian); case 'int16': return dataView.getInt16(offset, useLittleEndian); case 'uint32': return dataView.getUint32(offset, useLittleEndian); case 'int32': return dataView.getInt32(offset, useLittleEndian); case 'uint64': return dataView.getBigUInt64(offset, useLittleEndian); case 'int64': return dataView.getBigInt64(offset, useLittleEndian); default: return 0; } } _loadBinary(headerInfo, arrayBuffer, useLittleEndian, defaultRGB) { var result = []; var rowOffset = 0; var rowByteSize = 0; // loop through the properties. headerInfo.properties.forEach(function(property) { property.byteOffset = rowByteSize; rowByteSize += property.typeSize; }); var dataView = new DataView(arrayBuffer, 0, arrayBuffer.byteLength); for (var i = 0; i < headerInfo.vertexCount; i++) { var x, y, z, r, g, b; x = this._getNumber(headerInfo, 'x', dataView, useLittleEndian, rowOffset); y = this._getNumber(headerInfo, 'y', dataView, useLittleEndian, rowOffset); z = this._getNumber(headerInfo, 'z', dataView, useLittleEndian, rowOffset); r = this._getNumber(headerInfo, 'red', dataView, useLittleEndian, rowOffset, defaultRGB.r); g = this._getNumber(headerInfo, 'green', dataView, useLittleEndian, rowOffset, defaultRGB.g); b = this._getNumber(headerInfo, 'blue', dataView, useLittleEndian, rowOffset, defaultRGB.b); result.push(new Point([x, y, z], r, g, b)); rowOffset += rowByteSize; } return result; } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; var headerInfo = outer._getHeaderInfo(content); if (headerInfo.format === 'ascii') resolver(outer._loadAscii(headerInfo, content, defaultRGB)); else { reader.readAsArrayBuffer(file); reader.onload = function(evt) { var data = evt.target.result; var len = headerInfo.headerEndOffset; data = data.slice(len, data.byteLength); if (headerInfo.format === 'binary_big_endian') resolver(outer._loadBinary(headerInfo, data, false, defaultRGB)); else if (headerInfo.format === 'binary_little_endian') resolver(outer._loadBinary(headerInfo, data, true, defaultRGB)); else throw new Error('Unsupported format: ' + headerInfo.format); } } }; }); } } /* This follows file format descriptions at: https://en.wikipedia.org/wiki/STL_%28file_format */ class STLFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.stl'; } _getHeaderInfo(content) { var format = 'ascii'; var headerEndOffset = 0; if (content.indexOf("solid") !== 0) { format = 'binary'; headerEndOffset = 80; } else { headerEndOffset = content.indexOf("\n") + 1; } return { 'format': format, 'headerEndOffset': headerEndOffset }; } _loadAscii(headerInfo, content, defaultRGB) { var lines = content.substring(headerInfo.headerEndOffset).split("\n").slice(2).map(function(line) { return line.trim().replace(/\s+/g, ' '); }); var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; var result = []; for (var i = 0; i + 2 < lines.length; i += 7) { for (var vIndex = 0; vIndex < 3; vIndex++) { var coordinates = lines[i + vIndex].split(' ').slice(1).map(function(part) { return parseFloat(part); }); result.push(new Point(coordinates, r, g, b)); } } return result; } _loadBinary(headerInfo, arrayBuffer, defaultRGB) { var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; var result = []; var dataView = new DataView(arrayBuffer, 0, arrayBuffer.byteLength); var isLittleEndian = true; // get number of triangles. var numTriangles = dataView.getUint32(headerInfo.headerEndOffset, isLittleEndian); var byteOffset = headerInfo.headerEndOffset + 4; // We already read the 4 bytes for the number of triangles. for (var i = 0; i < numTriangles && byteOffset < arrayBuffer.byteLength; i++) { byteOffset += 3 * 4; // ignore bytes for the normal. for (var vIndex = 0; vIndex < 3; vIndex++) { var coordinates = []; for (var coordinateIndex = 0; coordinateIndex < 3; coordinateIndex++) { coordinates.push(dataView.getFloat32(byteOffset, isLittleEndian)); byteOffset += 4; } result.push(new Point(coordinates, r, g, b)); } byteOffset += 2; // ignore the facet attributes data. } return result; } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; var headerInfo = outer._getHeaderInfo(content); if (headerInfo.format === 'ascii') resolver(outer._loadAscii(headerInfo, content, defaultRGB)); else { reader.readAsArrayBuffer(file); reader.onload = function(evt) { var data = evt.target.result; if (headerInfo.format === 'binary') resolver(outer._loadBinary(headerInfo, data, defaultRGB)); else throw new Error('Unsupported format: ' + headerInfo.format); } } }; }); } } /* The .tri file format is described at: http://paulbourke.net/dataformats/tri/ */ class TRIFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.tri'; } _loadAscii(content, defaultRGB) { var lines = content.split('\n').map(function(line) { return line.trim().replace(/\s+/g, ' '); }); var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; var parts = lines[0].split(' '); if (parts.length !== 2) throw new Error('Invalid TRI file format. 2 integers expected on first line but found ' + parts.length); var numVertices = parseInt(parts[0]); var result = []; for (var i = 1; i <= numVertices; i++) { var line = lines[i]; var parts = line.split(' ').map(function(s) { return parseFloat(s); }); var v = new Point(parts.slice(0, 3), r, g, b); if (parts.length > 3) // this should always be the case. { v.r = parts[6]; v.g = parts[7]; v.b = parts[8]; } result.push(v); } return result; } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; resolver(outer._loadAscii(content, defaultRGB)); }; }); } } /* The .vef file format is described at: http://paulbourke.net/dataformats/vef/ */ class VEFFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.vef'; } _loadAscii(content, defaultRGB) { var lines = content.split('\n').map(function(line) { var index = line.indexOf('#'); if (index !== -1) // remove comment. line = line.substring(0, index); return line.trim().replace(/\s+/g, ' '); }); var r = defaultRGB.r, g = defaultRGB.g, b = defaultRGB.b; var parts = lines[0].split(' '); if (parts.length !== 1) throw new Error('Invalid VEF file format. 1 integer expected on first line but found ' + parts.length); var numVertices = parseInt(parts[0]); var vertices = []; for (var i = 1; i <= numVertices; i++) { var line = lines[i]; var parts = line.split(' ').map(function(s) { return parseFloat(s); }); vertices.push(new Point(parts, r, g, b)); } return vertices; } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; resolver(outer._loadAscii(content, defaultRGB)); }; }); } } class WRLFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.wrl'; } _loadAscii(content, defaultRGB) { var scene = WRLUtils.vrmlToX3DDocument(content); var x3dFormat = new X3DFileFormat(); var points = x3dFormat.getPointsFromScene(scene, defaultRGB); return points; } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; resolver(outer._loadAscii(content, defaultRGB)); }; }); } } /* The .xyz file format isn't very clearly defined. I researched it from articles like: https://stackoverflow.com/questions/41267210/point-cloud-xyz-format-specification and: https://en.wikipedia.org/wiki/XYZ_file_format */ class XYZFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.xyz'; } loadFromString(s, defaultRGB) { var lines = s.split("\n"); lines = XYZFileFormat.filterComments(lines); function isNumber(s) { s = parseFloat(s); return !isNaN(s); } function convertToNumber(s) { return parseFloat(s); } var data = []; var lengthFrequencies = {}; lines.forEach(function(line) { var parts = line.split(/[\s,]+/); parts = parts.filter(isNumber).map(convertToNumber); if (parts.length >= 3) { data.push(parts); var key = '' + parts.length; if (lengthFrequencies[key] === undefined) lengthFrequencies[key] = 0; lengthFrequencies[key]++; } }); // How many numbers are the most common per line? // Usually this is 3 but maybe there are some numbers for r, g, b. var dominantLength; for (var key in lengthFrequencies) { if (dominantLength === undefined || lengthFrequencies[dominantLength] < lengthFrequencies[key]) dominantLength = key; } dominantLength = parseInt(dominantLength); var result = data.filter(function(parts) { return parts.length === dominantLength; }).map(function(parts) { var newPoint; if (parts.length < 6) { newPoint = new Point(parts, defaultRGB.r, defaultRGB.g, defaultRGB.b); } else if (parts.length >= 6) { newPoint = new Point(parts.slice(0, 3), parts[3], parts[4], parts[5]); } return newPoint; }); return result; } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; resolver(outer.loadFromString(content, defaultRGB)); }; }); } } // The first few lines of the file might be comments. // This is based on a comment from: // https://people.math.sc.edu/Burkardt/data/xyz/xyz.html XYZFileFormat.filterComments = function(lines) { return lines.filter(function(line) { return line.trim().charAt(0) !== '#'; }); } /* This only supports some of X3D's features. The X3D format is pretty complicated. Some test .x3d files came from: https://www.web3d.org/x3d/content/examples/Basic/StudentProjects/ Official X3D specifications are at: https://www.web3d.org/specifications/X3dSchemaDocumentation3.3/x3d-3.3.html */ class X3DFileFormat extends PointCloudFileFormat { constructor() { super(); this.accept = '.x3d'; } _getPointsFromBox(boxElement, colour) { var size = X3DUtils.getAttributeNumberArrayDefaulted(boxElement, 'size', 3, [2, 2, 2]); var result = []; for (var dx = -0.5; dx <= 0.5; dx ++) { for (var dy = -0.5; dy <= 0.5; dy ++) { for (var dz = -0.5; dz <= 0.5; dz ++) { result.push(new Point([dx * size[0], dy * size[1], dz * size[2]], colour.r, colour.g, colour.b)); } } } return result; } _getPointsFromSphere(sphereElement, colour) { var radius = X3DUtils.getAttributeNumberDefaulted(sphereElement, 'radius', 1); var subdivisions = X3DUtils.getAttributeNumberArrayDefaulted(sphereElement, 'subdivisions', 2, [24, 24]); var result = []; for (var i = 0; i < subdivisions[0]; i++) { var a = i * Math.PI * 2 / subdivisions[0]; var y = radius * Math.sin(a); var r = radius * Math.cos(a); for (var j = 0; j < subdivisions[1]; j++) { var a2 = j * Math.PI / subdivisions[1]; var z = r * Math.cos(a2); var x = r * Math.sin(a2); result.push(new Point([x, y, z], colour.r, colour.g, colour.b)); } } return result; } _getPointsFromCone(coneElement, colour) { var bottomRadius = X3DUtils.getAttributeNumberDefaulted(coneElement, 'bottomRadius', 1); var height = X3DUtils.getAttributeNumberDefaulted(coneElement, 'height', 1); var topRadius = X3DUtils.getAttributeNumberDefaulted(coneElement, 'topRadius', 0); var subdivisions = X3DUtils.getAttributeNumberDefaulted(coneElement, 'subdivisions', 24); var result = []; if (topRadius === 0) { result.push(new Point([0, height/2, 0], colour.r, colour.g, colour.b)); } for (var i = 0; i < subdivisions; i++) { var a = i * Math.PI * 2 / subdivisions; var x = bottomRadius * Math.sin(a); var z = bottomRadius * Math.cos(a); result.push(new Point([x, -height/2, z], colour.r, colour.g, colour.b)); if (topRadius !== 0) { x = topRadius * Math.sin(a); z = topRadius * Math.cos(a); result.push(new Point([x, height/2, z], colour.r, colour.g, colour.b)); } } return result; } _cylinder(radius, height, r, g, b) { const numSides = 16; var result = []; height *= 0.5; for (var i = 0; i < numSides; i++) { var a = i * Math.PI * 2 / numSides; var x = radius * Math.cos(a); var z = radius * Math.sin(a); result.push(new Point([x, -height, z], r, g, b)); result.push(new Point([x, height, z], r, g, b)); } return result; } _getPointsFromCylinder(cylinderElement, colour) { var radius = X3DUtils.getAttributeNumberDefaulted(cylinderElement, 'radius', 1); var height = X3DUtils.getAttributeNumberDefaulted(cylinderElement, 'height', 1); return this._cylinder(radius, height, colour.r, colour.g, colour.b); } _getPointsFromDisk2D(diskElement, colour) { var innerRadius = X3DUtils.getAttributeNumberDefaulted(diskElement, 'innerRadius', 0); var outerRadius = X3DUtils.getAttributeNumberDefaulted(diskElement, 'outerRadius', 1); const numSides = 16; var r = colour.r, g = colour.g, b = colour.b; var result = []; for (var i = 0; i < numSides; i++) { var a = i * Math.PI * 2 / numSides; var x = outerRadius * Math.cos(a); var z = outerRadius * Math.sin(a); result.push(new Point([x, 0, z], r, g, b)); if (innerRadius > 0) { x = innerRadius * Math.cos(a); z = innerRadius * Math.sin(a); result.push(new Point([x, 0, z], r, g, b)); } } return result; } _getPointsFromCircle2D(circleElement, colour) { var radius = X3DUtils.getAttributeNumberDefaulted(circleElement, 'radius', 1); const numSides = 16; var r = colour.r, g = colour.g, b = colour.b; var result = []; for (var i = 0; i < numSides; i++) { var a = i * Math.PI * 2 / numSides; var x = radius * Math.cos(a); var z = radius * Math.sin(a); result.push(new Point([x, 0, z], r, g, b)); } return result; } _getPointsFromCoordinate(coordinateElement, colour) { if (coordinateElement.hasAttribute('point')) { var pointStr = coordinateElement.getAttribute('point'); var coords = X3DUtils.getNumbers(pointStr); var points = []; for (var j = 0; j < coords.length; j += 3) { var pointCoords = coords.slice(j, j + 3); points.push(new Point(pointCoords, colour.r, colour.g, colour.b)); } return points; } else return []; } _getPointsFromCoordinate3(coordinateElement, colour) { return this._getPointsFromCoordinate(coordinateElement, colour); } _getPointsFromExtrusion(extrusionElement, colour) { // FIXME: get points from extrusion. // Some documentation on it is at: // https://www.web3d.org/x3d/tooltips/X3dTooltips.html#Extrusion return []; } _getPointsFromTransform(transformElement, colour, defs) { var points = this._getPointsFromChildren(transformElement, colour, defs); var transformer = X3DUtils.getTransformer(transformElement); points.forEach(function(point) { point.coords = transformer(point.coords); }); return points; } _getPointsFromChildren(element, colour, defs) { var result = []; // loop through child elements. for (var child = element.firstChild; child !== null; child = child.nextSibling) { result.push(... this._getPointsFrom(child, colour, defs)); } return result; } _getPointsFromShape(element, colour, defs) { colour = X3DUtils.getColourAndDefsFromShape(element, colour, defs); var result = this._getPointsFromChildren(element, colour, defs); return result; } _getPointsFromGroup(groupElement, colour, defs) { return this._getPointsFromChildren(groupElement, colour, defs); } _getPointsFrom(element, colour, defs) { if (typeof defs !== 'object') throw new Error('defs must be an object. Not: ' + defs); var tagName = element.tagName; if (tagName === undefined || ['Viewpoint', 'Appearance', 'Background'].indexOf(tagName) !== -1) { // if tagName is undefined, element is not an element so no points. // Appearance is processed within the _getPointsFromShape method. // This script can't handle Viewpoint. It uses its own viewpoints. // Background also makes no sense for this script. It won't hold any points. return []; } else { var results = []; if (element.hasAttribute('DEF')) X3DUtils.storeDef(element, defs); else if (element.hasAttribute('USE')) { // load points from the element. var key = element.getAttribute('USE'); if (defs[key] !== undefined) { results.push(...this._getPointsFrom(defs[key], colour, defs)); } } if (typeof this['_getPointsFrom' + tagName] === 'function') { results.push(...this['_getPointsFrom' + tagName](element, colour, defs)); } else { this._getPointsFromChildren(element, colour, defs).forEach(function(p) { results.push(p); }); } return results; } } getPointsFromScene(scene, defaultRGB) { var defs = {}; return this._getPointsFrom(scene, defaultRGB, defs); } _loadFromXMLText(content, defaultRGB) { var scene = X3DUtils.getSceneFromText(content); console.log('scene is ', scene); return this.getPointsFromScene(scene, defaultRGB); } loadFromFile(file, defaultRGB) { if (typeof defaultRGB !== 'object') defaultRGB = {'r': 0, 'g': 0, 'b': 0}; var reader = new FileReader(); reader.readAsText(file, "UTF-8"); var outer = this; return new Promise(function(resolver, rejecter) { reader.onload = function (evt) { var content = evt.target.result; resolver(outer._loadFromXMLText(content, defaultRGB)); }; }); } } // These arbitrary axis rotation functions depend on math.js. // This makes use of discussions at https://www.sololearn.com/Discuss/2708222/how-to-rotate-a-3d-point-around-arbitrary-axis-in-javascript // More specifically, visph's answer. // Define a class to be used like a namespace. // I just want to reduce risk of a function name clashing with an existing function. class ArbitraryAxisRotation { } ArbitraryAxisRotation._getRotationMatrixForAxis = function(angle, axis) { var cosTheta = Math.cos(angle); var sinTheta = Math.sin(angle); var matrixData; if (axis === 0) { matrixData = [ [1, 0, 0], [0, cosTheta, -sinTheta], [0, sinTheta, cosTheta] ]; } else if (axis === 1) { matrixData = [ [cosTheta, 0, sinTheta], [0, 1, 0], [-sinTheta, 0, cosTheta] ]; } else { matrixData = [ [cosTheta, -sinTheta, 0], [sinTheta, cosTheta, 0], [0, 0, 1] ]; } return matrixData; }; /* @param axisX, axisY, axisZ would be components of a direction vector representing the arbitrary axis of rotation. The vector can be assumed to have a length of 1(a unit vector). @param radians would be an angle of rotation @param point would be something like an Array of length 3 with 3 numbers. This is the point to get rotated. */ ArbitraryAxisRotation.rotateArbitrary = function(axisX, axisY, axisZ, radians, point) { var info = ArbitraryAxisRotation.getRotateArbitraryAxisMatrices(axisX, axisY, axisZ, radians); return ArbitraryAxisRotation.rotateArbitraryUsingInfo(info, point); }; ArbitraryAxisRotation.rotateArbitraryUsingInfo = function(info, point) { point = math.multiply(point, info.toX); point = math.multiply(point, info.xAxisRotation); point = math.multiply(point, info.fromX); return point; }; ArbitraryAxisRotation.getArbitraryAxisMatrices = function(axisX, axisY, axisZ) { var toX; var fromX; var angles = []; var axis = [axisX, axisY, axisZ]; angles.push(Math.atan2(axisZ, axisX)); var rm = ArbitraryAxisRotation._getRotationMatrixForAxis(angles[angles.length - 1], 1); axis = math.multiply(axis, rm); toX = rm; angles.push(Math.atan2(axis[1], axis[0])); rm = ArbitraryAxisRotation._getRotationMatrixForAxis(angles[angles.length - 1], 2); axis = math.multiply(axis, rm); toX = math.multiply(toX, rm); fromX = ArbitraryAxisRotation._getRotationMatrixForAxis(-angles[1], 2); fromX = math.multiply(fromX, ArbitraryAxisRotation._getRotationMatrixForAxis(-angles[0], 1)); return { 'toX': toX, 'fromX': fromX }; }; ArbitraryAxisRotation.getRotateArbitraryAxisMatrices = function(axisX, axisY, axisZ, radians) { var info = ArbitraryAxisRotation.getArbitraryAxisMatrices(axisX, axisY, axisZ); var xAxisRotation = ArbitraryAxisRotation._getRotationMatrixForAxis(radians, 0); return { 'toX': info.toX, 'fromX': info.fromX, 'xAxisRotation': xAxisRotation, 'fromXAxisRotation': ArbitraryAxisRotation._getRotationMatrixForAxis(-radians, 0) }; }; class PointCloudFileFormats { constructor() { this.fileFormats = [new MOLFileFormat(), new OBJFileFormat(), new OFFFileFormat(), new OSMFileFormat(), new PCDFileFormat(), new PLYFileFormat(), new STLFileFormat(), new TRIFileFormat(), new VEFFileFormat(), new WRLFileFormat(), new X3DFileFormat(), new XYZFileFormat()]; var accept = ''; this.fileFormats.forEach(function(format) { if (accept !== '') accept += ','; accept += format.accept; }); this.accept = accept; } loadFromFile(file, defaultRGB) { // find the best file format to load the file from. var matchingFileFormats = this.fileFormats.filter(function(fileFormat) { return fileFormat.matches(file.name); }); if (matchingFileFormats.length === 1) return matchingFileFormats[0].loadFromFile(file, defaultRGB); } } class Point { constructor(coords, r, g, b) { if (!coords instanceof Array) throw new Error('coords must be an Array'); if (coords.length !== 3) throw new Error('coords must have length 3'); this._validateNumber(r, 'r'); this._validateNumber(g, 'g'); this._validateNumber(b, 'b'); this.coords = coords; this.r = r; this.g = g; this.b = b; } _validateNumber(v, key) { if (typeof v !== 'number' || isNaN(v)) throw new Error(key + ' must be a number. Not: ' + v); } } document.addEventListener("DOMContentLoaded", function() { var canvas = document.querySelector('canvas'); var g = canvas.getContext('2d'); var points = []; var filteredPointsCache; var maxRange = 0; var midX = 0; var midY = 0; var dotSize = 4; var fileSelector = document.getElementById('cloud-file'); var format = new PointCloudFileFormats(); var rotator = new PointRotator(); var dialog; fileSelector.setAttribute('accept', format.accept); fileSelector.addEventListener('input', function() { hideDialog(); var file = fileSelector.files[0]; if (file) { var filename = file.name; format.loadFromFile(file).then(function(result) { points = result; pointsUpdated(); draw(); }); } }); function getMaxRange(coordIndex) { var min = Number.MAX_VALUE; var max = - Number.MAX_VALUE; points.forEach(function(point) { min = Math.min(min, point.coords[coordIndex]); max = Math.max(max, point.coords[coordIndex]); }); var mid = (max + min) * 0.5; points.forEach(function(point) { point.coords[coordIndex] -= mid; }); return { 'len': max - min }; } function to2DigitHex(ratio) { // clamp to range 0 to 255. ratio = Math.max(0, Math.min(255, Math.round(ratio * 255))); var result = '' + ratio.toString(16); while (result.length < 2) result = '0' + result; return result; } function pointsUpdated() { var xRange = getMaxRange(0); var yRange = getMaxRange(1); var zRange = getMaxRange(2); maxRange = Math.max(xRange.len, yRange.len, zRange.len); points.forEach(function(point) { point.htmlColour = '#' + to2DigitHex(point.r) + to2DigitHex(point.g) + to2DigitHex(point.b); }); filteredPointsCache = undefined; // indicate the cache needs to be refreshed. } function comparePointZ(p1, p2) { return p2.rotatedCoords[2] - p1.rotatedCoords[2]; } function getPointsToDraw() { // skip enough points to draw only a certain number of points. // this is to avoid choppiness and responsiveness problems // when drawing the display. var roughLimitToDraw = 5000; var modulo = 1; if (points.length > roughLimitToDraw) { modulo = Math.floor(points.length / roughLimitToDraw); } if (filteredPointsCache === undefined) filteredPointsCache = points.filter(function(point, index) { return index % modulo === 0; }); filteredPointsCache.forEach(function(p) { var coords = rotator.transform(p.coords); p.rotatedCoords = coords; }); // sort by rotatedCoords[2] filteredPointsCache.sort(comparePointZ); return filteredPointsCache; } function draw() { var w = window.innerWidth; var h = canvas.clientHeight; canvas.setAttribute('width', w); canvas.setAttribute('height', h); g.clearRect(0, 0, w, h); var scale = 0.5 * ( (w + h) * 0.5) / maxRange; var xTranslation = w/2; var yTranslation = h/2; var pointsToDraw = getPointsToDraw(); pointsToDraw.forEach(function(p, index) { var x = p.rotatedCoords[0] * scale + xTranslation; var y = p.rotatedCoords[1] * scale + yTranslation; g.fillStyle = p.htmlColour; g.beginPath(); g.arc(x, y, dotSize, 0, 2 * Math.PI); g.closePath(); g.fill(); }); } function resized() { var smartSize = (window.innerWidth + window.innerHeight) * 0.003; // smaller dot sizes look better if there are lots of points. if (points.length > 500) smartSize *= 0.7; dotSize = Math.min(10, Math.max(1.5, smartSize)); // confine to range 1.5 to 10. draw(); } function updateRotation() { var t = (new Date().getTime()) * 0.0002; t = t % (Math.PI * 2); rotator.setAngle(t); draw(); requestAnimationFrame(updateRotation); } function hideDialog() { dialog.remove(); } function initDialog() { dialog = document.getElementById('dialog'); function okClicked() { hideDialog(); fileSelector.click(); } document.getElementById('dialog-ok').addEventListener('click', okClicked); } window.addEventListener('resize', resized); updateRotation(); initDialog(); resized(); });

3D Point Cloud Loader Prototype