[B·G – 27] Using – Spline

Spline 是一款基于网页平台的轻量级实时渲染 3D 设计应用,它的使用体验比以往任何一个 3D 构建应用更贴近 Sketch 和 Figma 等 UI 设计工具。这次就简单介绍一下。

最开始是 12 月 4 日在 Product Hunt 上看到的,Spline 位于第一名,很显眼。官网

在这之前,无论是 Dimension 还是 Vectary 都有一种剥离感。作为一名 C4D 逃兵,我对 3D 空间的创作始终处于一种只跨进了半条腿的感觉,最后归根于我对基本的平面创作也只是半桶水,便不再涉于模型的把玩,平面的世界还很大。

而这次试用 Spline 也不是为了重新想去走捷径地开始 3D 创作,单纯是新产品的体验——就像上次 Drama 一样,并值得一说。

请注意,目前的 Spline 虽然从今天二月份开始迭代数次,但依然处于非常早期的阶段

首先是注册和登录。

注册表单

从注册表单其实就能看出应用处于的早期阶段是有多早,基本只是完成账户建立的基本功能。不过重点在于此时就能看出文本缩放的问题,在我这里的 5120 × 2880@iMac 上显得字号都非常小,再加上文本的低对比度(目测没达到AA),非常难以长时间观看使用。

注册后需要再手动登录一遍,进入主界面。这里其实有个 onboarding 流程但是我没有截取。

标准的 3-column 结构:左边图层,中间是创作区域,右边是属性筛选器。眼神好的你可能已经看出来,目前界面上还同时保留了 macOS 和 Windows 上的窗口控制控件。中下方是各视图的切换按钮,以及选择正交还是透视视角。中上方是快捷操作功能存放区域,但很容易误认为是所有功能的区域。而真正所有可添加的模型类型在左上方图层一栏里的加号里:

除了常用的平面图形外,基本的模型也有。空对象相当于预设组的功能,还体会不到用处。相机可以理解成默认视角外的固定机位,并可以调节一些简单的参数(主要是视锥体的远近和角度等)。三种光源点光源、平行光和聚光灯则是 three.js 的同名灯光。同时 Spline 默认自带天空光源与环境光供调节,但是没有复杂到去设置 hdri 贴图等。这些最终都隶属于文档的 background 属性中。

比较迷惑的是作者在这么前期的版本里就加入了线性雾 feature,这东西使用频率并不高。最后一项是大家熟悉的导出,可以导出在线预览的 url、本地网页、当前相机下的位图(jpg/png)以及视频。而视频、Gif 等则是主要的收费点,可以说良心程度堪比 Figma。

. . .

模型的属性选择器基本满足了一定需求——

Shape 形状会依据不同模型而有所改变,但逻辑上并非统一。比如上图中的倒角功能,本应是公共操作但这里却只作为的立方体的专属属性,到多面体时这里又会变为面数设置……材质的设定应该是当前阶段最复杂的参数了,八项设置,包括了噪波、贴图材质、法线网格材质、深度网格材质、基本着色、菲涅尔反射、光照材质(五种:None、Lambert、Phong、Physical、Toon)和渐变着色。

稍微解释下五种光照材质:

  • None 即不发射光,光线全部吸收只突出自身颜色。
  • Lambert 使用基于非物理的 Lambertian 模型来计算反射率。 这可以很好地模拟一些表面(例如未经处理的木材或石材),但不能模拟具有镜面高光的光泽表面(例如涂漆木材)。(出处:three.js 文档
  • Phong 使用非物理的 Blinn-Phong 模型来计算反射率。 与 Lambertian 模型不同,该材质可以模拟具有镜面高光的光泽表面(例如涂漆木材)。(出处:three.js 文档
  • Physical 是建议和环境贴图一起使用。比如在汽车喷漆、碳纤维以及潮湿的表面上去表现反光层,并为玻璃等透明材质提供更真实的透明度,和非金属材料上更灵活的反射性。(出处:three.js 文档
  • Toon 就比较好理解了,可以给予模型卡通风格的着色。

克隆功能的加入虽好,但是由于 Spline 没有类似转为编辑对象的模型编辑逻辑,使得克隆最终停留在“只可远观不可亵玩”的程度——你可以使用较为丰富的克隆展示,但是却无法单独控制克隆体,很遗憾。

. . .

上面还提到了导出视频以及动图的功能,其实这对应着 Spline 的另一特色——原型制作。

首页你可以添加 States,默认的状态都是 Base State。下方的 Events 事件是具体描述状态变化的机制,它可以通过一个对象的事件类型控制多个对象的状态,这点和以往单个对象的事件控制单个对象不同。注意,当前版本原型这里优化程度很低,应用强制了 Base → State 1 这一方向,而无法多向或者反向变化。并且无法定义初始事件(锁死了初始为 Base State),也就是说,无论有多少种状态,目前只能制作 Base State 到某个状态的事件,想要做 State 1 到 State X 是不行的。

. . .

当前版本应用不怎么吃性能,可能也是实验场景都比较小的原因。导出的在线预览效果也比较“上相”(但是缺失了交互)。而最大的问题在于,批量修改对象属性的缺失,导致一切操作都异常繁琐。比如当你选中多个立方体时,当前不支持批量给立方体添加倒角、设置材质等(但材质可以复制粘贴),只能一个一个选中设置,包括上述的 Events 也一样。此外还有一些视角和渲染上的问题。

相信 Spline 的后面会越做越好。

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

您正在使用您的 WordPress.com 账号评论。 登出 /  更改 )

Google photo

您正在使用您的 Google 账号评论。 登出 /  更改 )

Twitter picture

您正在使用您的 Twitter 账号评论。 登出 /  更改 )

Facebook photo

您正在使用您的 Facebook 账号评论。 登出 /  更改 )

Connecting to %s

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

%d 博主赞过:
search previous next tag category expand menu location phone mail time cart zoom edit close