JSPM

@web-3d/tools

1.1.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 35
  • Score
    100M100P100Q68994F
  • License MIT

@web-3d/tools 是一个不依赖任何渲染引擎的高性能计算几何库, 提供了常见了计算几何算法、geometry 处理算法等;浏览器、Worker、NodeJS 中都可用

Package Exports

  • @web-3d/tools

Readme

目录


1. 背景

最初,我基于 ThreeJS 开发了一些工具库,而这些工具库中有很大一部分是计算几何相关的,这些是引擎无关的逻辑,后面来 Cesium、BabylonJS、MapLibre、Deck.gl 中也经常需要,但是由于依赖了 ThreeJS,所以不便在其它引擎中直接使用;

本库就是一个不依赖任何渲染引擎的计算几何库;

2. 简介

@web-3d/tools 是一个不依赖任何渲染引擎的高性能计算几何库, 提供了常见了计算几何算法、geometry 处理算法等;浏览器、Worker、NodeJS 中都可用

设计宗旨

本库的设计宗旨如下:

  • 渲染引擎无关:不依赖任何渲染引擎
    • 渲染引擎(如:ThreeJS、Cesium、BabylonJS)往往提供了一些工具类,但由于这些类都是服务于渲染引擎的,所以里面难免包含了渲染引擎相关的依赖 和 处理逻辑,不够纯粹;而本库的定位是纯计算任何库,与渲染引擎无关,可在任何渲染引擎中使用;
  • 高性能计算:计算几何是一个 CPU 密集型计算,为了高性能,本库是做了语句级别的优化;
  • 尽量少的数据类型转换:一般的数据库都是通过类来实现的,比如: new Vector(),而输入数据往往是 BufferArray{x:number,y:number,z:number},总需要根据输入数据创建一个对应类实例的副本,而且在一次计算过程中这种转换可能需要多次,这显然大大培训的内存占用和计算速度;所以,我的原则是尽量不做类型转换,而是基于原始数据直接计算;
  • 支持传入计算结果的参数:很多方法都会返回计算结果对象,如果在一个大量循环的场景,这里的计算结果可以利用同一个临时变量保存,这样便可以节省内存 和 提高速度,但是如果方法不支持传入用于保存结果的对象的话,就没办法做这个优化了;
  • 支持Worker和SharedWorker
  • 兼容 浏览器 和 NodeJS
    • 其实计算几何是通用计算,几乎不涉及 NodeJS 和 浏览器 的专有API
    • 后端也经常需要对模型进行处理,这样一套代码可以在前端和后端(NodeJS)*通用;
  • 支持2D和3D数据:在不影响性能的情况下,如果能同时支持 2D和3D 数据,则会在同一个API中同时支持 2D 和 3D 数据

功能特性

基于以上设计宗旨,本库具有以下功能特性:

特性:

  • 渲染引擎无关:任何渲染引擎中都可以使用
  • 高性能
  • 基于ArrayArrayBuffer来计算:直接使用ArrayArrayBuffer来作为数学类型,免去了数据转换
  • 支持传入结果参数
  • 支持 Worker 和 SharedWorker
  • 支持 Worker 池
  • 兼容 浏览器 和 NodeJS
  • 支持2D和3D数据

功能:

  • 支持点、线、射线、线段、多边形、圆 之间的关系运算、交点运算 等
  • 支持任意属性结构的 Geometry 操作:不同引擎中的 Geometry 的 attribute 的组织结构可能不一样,但灵活的 Geometry 设计可以高效表达任意组织结构的 attribute
  • 常用的类型工具:坐标轴、地理坐标、颜色、方位、几何关系 等等
  • 多维数据处理,如:Data2D(图像)、Data3D(视频 或 三维图像等)
  • 测量:面积、体积等
  • 常用的GIS工具:椭球体Ellipsoid、地形数据处理

详情请看:

如果您在使用的过程中遇到了问题,或者有好的建议和想法,您都可以通过以下方式联系我,期待与您的交流:

3. 安装方式

目前,安装方式有以下几种:

3.1. 方式1:通过 npm 安装

通过 npm (或 yarn、pnpm 等包管理器)安装

npm install @web-3d/tools

3.2. 方式3:通过<script>标签引入

您可直接从项目的 发行地址 中下载以 .iife.js 作为缀的文件,然后使用如下代码引用 和 使用 @web-3d/tools:

  1. 引用 @web-3d/tools

    <script src="path/to/package/webgl-layer.iife.js"></script>
  2. 使用全局的 Tools

    <script>
    // 使用全局的 Tools
    </script>

4. 教程

详情跳转至教程

5. API接口文档

详情跳转至API接口文档


有您的支持,我会在开源的道路上,越走越远

赞赏码