快速上手

IMPORTANT

请先进行下载安装再继续学习哦！

登录账号

打开 E3 会先要求登录 NOAH 账号，如果没有账号可以先注册好，传送门

TIP

目前 E3 处于公测阶段，尚未完全开放，原NOAH 同行者可率先体验，若想获取内测资格，可以申请E3 讲师培养计划

项目结构

登录后率先看到的是项目管理页面

使用从模板新建功能，快速开始

选择 Tulo Starter 模板并设置项目名称，目标平台保持默认就好。Folder 设置是一个关键，点击 Folder 按钮会要求选择一个文件夹 E3 会记住这个文件夹，下次新建项目只需要设置项目名称就好，自动保存到设置过的项目位置。

TIP

项目名称规则和系统新建文件夹规则一样，不能包含\/:*?"<>|特殊字符

包含附加内容

部分项目模板会有提供附加内容，方便理解模板怎么使用，不包含附加内容的话只做项目依赖配置

Tulo Starter 模板包含我们对几何运算相关的开源项目进行了收集和整理，形成了 Tulo 几何图形库，详情见关于 Tulo 图龙几何图形库

点击确认之后会有一个短暂的加载动画，加载完成自动打开工作区窗口。

由于 E3 采用文件夹作为一个项目单位，而不是单个文件，所以新建的项目将会保存到 Folder 设置的文件夹下的名字是项目名的文件夹内。 这样的设定方便模块化，以及资源文件的管理，刚才新建的项目结构如下所示：

<project-root>
├─ e3.lock
├─ main.ncf
└─ package.toml

package.toml

通常，一个 E3 项目会被当成一个扩展包来看待，因此，有一个项目配置文件，名为 package.toml 是必须存在的一个文件，它采用TOML标记语法。E3 会根据选择模板不同，自动创建项目配置文件，刚才新建的项目配置内容如下：

name = "hello-e3"
version = "1.0.0"
platform = "net8.0"

[dependencies]
"E3.Core" = "1.3.1"
"Tulo.Geometry" = "1.4.9"

默认一共有四个字段：

字段	名称	说明
name	名称	E3 和论坛的小伙伴会想知道你的项目叫什么
version	版本	方便项目打包发布的时候对项目做版本标记
platform	平台	说明项目是在什么平台跑，参考了解更多
dependencies	依赖	开发包，说明项目是基于哪些功能做的，参考了解更多

这几个字段除了 dependencies 以外的都是字符串的值，需要用双引号包起来，

dependencies 稍微特别一些，它需要记录更多的信息，在这个分组下，等号前是依赖名称，等号后是版本号。

e3.lock

这个文件记录了诸多与当前工作区相关的数据，由 E3 维护此文件，注意，请在分享项目的时候带上它。

main.ncf

首先，在 E3 中，后缀为 .ncf 的文件被认为是图形程序文件。文件名为 main，仅是说明他是主要的一个文件，默认项目模板会自动创建这个文件，当然也可以是别的名字，大可以删除，新建一个别的名字。这里说主要的，是为了体现他的重要性，因为万事开头难嘛，这个就是那个开头，作为一个入口文件，任何不带参的 ncf 文件都可以作为入口文件，也就是从这个文件开始的意思。

TIP

在E3中新建一个文件，在任意文件名后面跟上 .ncf 后缀，将会自动打开流程设计编辑器

接下来单击左侧main.ncf，如果顺利的话，你将会看到如下所示的画面：

图中左侧是项目资源浏览器，右侧是文件编辑器区域，当前我们打开了NCF 文件，所见编辑器为流程设计编辑器 标题栏右侧从右往左依次是，深浅切换按钮、打开数据查看窗口按钮、启动运行按钮和主文件选项。

流程设计的画布区域有一个橙色头的功能模块，它是这个流程开始的地方。

小试牛刀

在开始之前需要了解，一个算法程序可以通过若干流程和在其中流动的数据构成，受虚幻引擎的蓝图影响，E3 要求流程和数据显示表达，即：

• 流程规则

1. 白色箭头形状端口为执行端口，带执行端口的功能模块都是可执行模块。
2. 位于模块卡片右侧的为执行输出端，由它决定下一步执行谁，我们把这个输出端称为该模块的 Next。
3. 位于模块卡片左侧的为执行输入端，没连线的时候状态是空心的，空心代表不参与任何流程。
4. 流程先是单向的，方向从左往右，橙色头的功能模块是开始模块。

• 数据规则

1. 不包含任何箭头形状的功能模块是数据流。
2. 数据流是被动的，没有流程需要的时候是不会被执行的。
3. 数据流功能模块执行条件：每当某个流程被执行的时候，并且流程的输入端使用了它的输出端。

基本操作

如上所示，视频中存在两种调用方式：

1. 连线过程中，在画布空白处释放鼠标，会弹出 Library 检索，这种情况会自动连线。
2. 双击画布也能调出 Library 检索。

另外视频中还出现了另一个知识点：

当连线两端的数据类型不匹配是，E3 会自动检测两者之间存不存在一个转换，如果存在那就创建一个自动转换

视频中星号功能解释

右上角带星号的功能模块是最特殊的一种，它代表每当这个模块执行的时候，输出都会给新的实例，详见易错 QA

流程推导

跟着上面视频操作，这就是可以运行的程序了，这个程序仅包含两个可执行模块，根据上面的基本规则，推导出执行过程如下：

1. 开始模块：触发下一步
2. Display 模块：被开始模块触发
3. Display 执行的时候查到第一个数据输入端objects需要来自一个Point3 => any的一个转换出来的值，其他的则是默认值
4. Point3 => any这个自动转换需要一个来自Construct Point3输出的值
5. Construct Point3 模块输入端没有连线，直接取值，输出一个坐标为0,0,0的点
6. Display 的objects得到上游输出的且转换成所需类型any的值
7. 查到 Display 模块的输出执行端口是空心，无后续流程，终止

首次运行

我们实际跑一下验证刚才的推理，在开始跑之前，需要认识一下标题栏

右上角的功能从左往右依次是：

1. 当前执行谁，流程入口，默认值是正在编辑的 NCF 文件，这里会自动填上一次执行过的 NCF 文件。
2. 运行按钮，点击后根据签名设定的执行谁，开始执行流程。
3. 显示查看窗口，对应上述的 Display 功能，点击后打开独立的显示查看窗口。
4. 深浅色切换，当前版本推荐使用深色，浅色适配还不完整。

WARNING

仅允许无数据输出端的开始模块作为流程入口

接下来，请打开显示查看窗口，点击运行之后，可以看到：

没错，视图中心正是我们绘制的原点。

更进一步

尽管我们成功在显示窗口中画出了一个原点，但这个点看起来好无趣，好无聊，多画几个。

先前流程推导到 7 的时候，Display 再无后续便终止了，这里我们复制了两份，放在 7 之后，紧接着重复 1-7 两次。 不同之处是第二次第三次的 x 坐标值发生了变化，再次运行能看到 3 个点。

这三个 Display 通过 Next 串联起来，按照顺序执行，这样就构成顺序结构， 在 E3 中最常见的流程结构，

但是，这看起来也不太聪明的样子，显然我们不应该这样做，E3 提供一系列的流程设计功能，这个情况可以使用循环结构中的计次循环，多次触发同一个流程。

如图所示，在开始模块和 Display 模块之间，加一个 For 模块，For 的 Loop 分支就多次执行，具体执行的次数由其输入端的值决定，注意到输出端还有一个名为i的数据端口，这个端口的数据会在每次 Loop 执行的时候更新。图中的 For 设置为start=0, stop=10, step=1，意味着i从0开始数，每次增加1，直到数到10（不包含 10）停止，那i值就会是一个集合 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]。这时候运行可以看到：

INFO

For 除了 Loop 以外还有个 Done 的输出端，这个相当于先前说的 Next，因为原本应该是 Next 的位置被 Loop 占了，所以多加了一个当作 Next 用。

显然，上述流程推导的 1-7 被执行了 10 次，Display 了 10 个点，每个点的 x 坐标分别是每次 Loop 时的 i 值。

INFO

尝试修改 For 的输入端参数，试试会有什么影响？

再进一步

上一个例子中，我们通过 Loop 让 Display 多次执行，传入会变化 x 坐标的点去显示，但 y 始终为 0，不妨把 y 也用上。 已知 For 的 Loop 可以多次执行，那我们可以在先前的 For Loop 签名再套一个 For，把它的 i 值当作 y，像这样：

INFO

请思考这里的 Loop 参数为什么这么设置？

老画点好无趣，好无聊，在 Library 中搜索Box2(Plane,Interval,Interval)，这个用来画平面矩形，需要设置矩形所在平面和宽高区间。

1. 搜索Plane(Point3,Vector3)用来构造平面，传入参数为平面原点和法向量，这里我们把法向量统一为Vector3.ZAxis，平面原点就用刚才画的点
2. 搜索Interval(float,float)用来构造区间，区间长度为矩形的宽高，传给 Box2

像这样：

继续在 Library 中搜索Random(float,float)，给矩形宽高区间设置为随机，这意味着每次 Display 的矩形宽高都会有些变化。

最后一步

不妨再大胆一点，在第一个 For Loop 前再加一层， 从 Box2 升维到 Box3，搜索 Box3(Plane,Interval,Interval,Interval)用来构造三维盒子，比 Box2 多了一维，像这样：

Display 功能可以给绘制的内容设置颜色，搜索RGBColor(int,int,int)用来构造颜色，RGB 值取值范围为0-255，颜色设置为随机，如下：

扩展内容-性能调优

从刚才的的例子可以看到，方块是一排一排画的，因为 Display 是在三层 Loop 的最内层中执行的，会产生很多额外的 DrawCall（“喊” 显示窗口一声 “喂，把这个东西画到屏幕上”，每喊一次，就算一个 DrawCall），这里的情况，我们可以合并为一个 DrawCall，在最外层 For Done 后调用一次 Display。这里简单提一下，后续的章节会详细讲解这张图上目前为止没提过的功能模块。