Learning vtkjs之Calculator

过滤器 公式计算器 Calculator

介绍

The Calculator filter is a fast way to add derived data arrays to a

dataset. These arrays can be defined over points, cells, or just field

data that is "uniform" across the dataset (i.e., constant over all of

space). Values in the array(s) you create are specified in terms of

existing arrays via a function you provide.

The Calculator filter is similar in spirit to VTK's array calculator,

so it should be familiar to VTK users but the syntax takes advantage

of JavaScript's flexibility.

chatGLM 翻译一下

计算器过滤器是一种快速向数据集中添加派生数据数组的方法。 这些数组可以定义为点、单元格,或只是数据集中的"统一"场数据(即,在整个空间中是常数)。 您创建的数组中的值是通过您提供的函数以现有数组为条件来指定的。

计算器过滤器在精神上类似于 VTK 的数组计算器,因此对 VTK 用户来说应该很熟悉,但其语法利用了 JavaScript 的灵活性。

用法

其实官方给的例子真的坑好多啊,比如interpolateScalarsBeforeMapping: false,才可以插值,useLookupTableScalarRange: false,才可以表示使用lookuptable,用起来很疑惑,你不看源码就不知道什么情况,它自己的例子也报错,运行不起来,最后需要自己debug一下

官方例子给的是setFormulaSimple方式,比较方便

核心代码

js 复制代码
// 创建一个计算器的过滤器
const simpleFilter = vtkCalculator.newInstance();
    simpleFilter.setFormulaSimple(
      FieldDataTypes.POINT, // Generate an output array defined over points.
      [], // We don't request any point-data arrays because point coordinates are made available by default.
      "z", // Name the output array "z"
      (x) => (x[0] - 0.5) * (x[0] - 0.5) + (x[1] - 0.5) * (x[1] - 0.5) + 0.125
    ); // Our formula for z
// 利用的是scalar来修改变形
    const warpScalar = vtkWarpScalar.newInstance();
    const warpMapper = vtkMapper.newInstance({
      interpolateScalarsBeforeMapping: false,
      useLookupTableScalarRange: false,
      lookupTable,
    });
    const warpActor = vtkActor.newInstance();
    // warpActor.getProperty().setEdgeVisibility(true);

    // The generated 'z' array will become the default scalars, so the plane mapper will color by 'z':
    // 数据源是来自这个平面plane
    simpleFilter.setInputConnection(planeSource.getOutputPort());

    // We will also generate a surface whose points are displaced from the plane by 'z':
    warpScalar.setInputConnection(simpleFilter.getOutputPort());
    // 设置需要对应处理的数组的key
    warpScalar.setInputArrayToProcess(0, "z", "PointData", "Scalars");


    warpMapper.setInputConnection(warpScalar.getOutputPort());
    warpActor.setMapper(warpMapper);

代码效果

一个公式效果

另外一个公式效果

这个还是挺好用的,用来按照一定规则过滤数组,这部分核心逻辑可以抽离出来

全部代码都放到github上了
新坑_Learning vtkjs_git地址

关注我,我持续更新vtkjs的example学习案例

也欢迎各位给我提意见,技术交流~

大鸿

WeChat : HugeYen

WeChat Public Account : BIM树洞

做一个静谧的树洞君

用建筑的语言描述IT事物;

用IT的思维解决建筑问题;

共建BIM桥梁,聚合团队。

本学习分享资料不得用于商业用途,仅做学习交流!!如有侵权立即删除!!

相关推荐
铅笔侠_小龙虾19 分钟前
Flutter 实战: 计算器
开发语言·javascript·flutter
大模型玩家七七38 分钟前
梯度累积真的省显存吗?它换走的是什么成本
java·javascript·数据库·人工智能·深度学习
2501_944711431 小时前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜1 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
阔皮大师2 小时前
INote轻量文本编辑器
java·javascript·python·c#
lbb 小魔仙2 小时前
【HarmonyOS实战】React Native 表单实战:自定义 useReactHookForm 高性能验证
javascript·react native·react.js
_codemonster2 小时前
Vue的三种使用方式对比
前端·javascript·vue.js
全栈前端老曹3 小时前
【MongoDB】Node.js 集成 —— Mongoose ORM、Schema 设计、Model 操作
前端·javascript·数据库·mongodb·node.js·nosql·全栈
低代码布道师3 小时前
Next.js 16 全栈实战(一):从零打造“教培管家”系统——环境与脚手架搭建
开发语言·javascript·ecmascript
一位搞嵌入式的 genius4 小时前
深入 JavaScript 函数式编程:从基础到实战(含面试题解析)
前端·javascript·函数式