读者中是否有人至少听说过有某种3D引擎,用于使用仅在浏览器中使用类似于Unity的编辑器来开发WebGL应用程序? 这个话题是非常不受欢迎的,但是差不多两年前我成为了这样的人之一。 现在我想分享我的经验,甚至是我的失望。 本文将讨论如果您开始使用此编辑器将遇到的问题。 我将立即作出保留,以免与其他现有的3D引擎(如Three.js或Babylon.js)进行比较,我只涉及编辑器和脚本API。
全部在线
当您听到几个人可以在舞台上工作并且所有其他参与者实时看到所有更改时,我想到的第一个想法是:“哇,好酷!”。
实际上,事实证明,不同的人从事不同的任务,每个人都需要自己的摄像机进行调试。 您要从中测试场景的角度。 而且非常不方便。 在论坛上,有人建议采用离线模式,但是开发人员认为这是编辑器的基石,所有更改都将立即保存在服务器上,以便您可以随时通过任何设备返回项目。 是的,很方便。 当您独自一个项目时。 好吧,如果没有互联网,那也是行不通的。
通常,编辑器完全不适合团队合作。
我仍然看不到该问题的解决方案。
变更记录
直到最近,您还是无法将项目连接到任何git,这使我感到非常痛苦。 一旦可以做到这一点 (仅适用于脚本),但是现在该功能被认为是旧版,因为 伙计们在某个时候重写了Scripting API。
但是! 再次在编辑器中按Ctrl-S,我看到了这张图片:

哇,这是对自己的git的举止吗?
好的,似乎已经解决了一个问题。 它仍然可以正常运行,但是至少您可以回滚,这一点很重要。 甚至产生早午餐。 一般来说,必须习惯它。
着色器
Playcanvas中没有着色器编辑器。 没有文字,没有节点-不。 但是,本教程中唯一提到的着色器是一个常规脚本,其中着色器文件通过属性进行传输。 好吧,即使如此。 但这是非常不便的。 但是,我准备了一个演示它的外观。
首先,您必须事先准备好着色器,否则,第一次在场景中出现材质时,会出现令人不愉快的fr。
其次,将参数引入编辑器是一个完整的故事。 您需要在至少3个地方声明它们,并订阅它们各自的更改,以便将它们传输到着色器。
第三,着色器在编辑器中不可见。
通常,编辑器中只有2种材料:标准PBR和Phong。 从令人愉快的角度出发,您可以在金属感和镜面反射之间选择管道眩光。
这就是我如何看待问题的解决方案:

在这里,您可以添加第三个选项“自定义”,您可以在其中上传带有着色器代码的文件,您可以简单地解析并提取所有统一变量,并在更改时自动将它们转移到着色器中。 就这么简单! 唯一要考虑的是vec3 / vec4不仅是矢量,而且还是颜色。
开发人员可能正在准备自己的节点编辑器,您可以在其中收集您自己的资料,因此到目前为止,尚未完成有关此主题的任何工作。 但是,我没有找到一个里程碑。
剧本
我知道为什么编辑器设置的功能很少。 但这可以通过编辑器中的可执行脚本来解决。 添加一个选中标记就足够了,这将包括在编辑器中使用脚本。 它也写在playcanvas引擎上,为什么不呢?
生活中的一个例子。
我不知何故需要从这样的高度图生成地形

好的,并不是每个人都需要在编辑器中提供这样的功能,我想出了如何在CPU级别上操纵常规板的顶点(即使用JS,而不是顶点着色器),并编写了一个接受地图并生成有效地形的脚本。 但是在编辑器中,它是不可见的! 如何在上面放房屋和树木? 这是想到的第一个例子。
代码编辑器
在撰写本文时,您只能在线编辑代码,并且选择CodeMirror 5.19.0版作为编辑器。 我不知道2年前是什么版本,但是有一种感觉,它从未更新过。 毕竟,这是2016年9月的版本。
不要期望她有什么超自然的东西。 我们必须放弃通常的Sublime-Atom-VSCode。 有几个热键和多光标支持,仅此而已。 即使在着色器文件中,也无法使用Ctrl- /注释掉一行。 通常,GLSL绝对没有任何便利设施。 悲伤
型号
根据文档判断,该编辑器仅支持3种类型的模型:
型号,例如FBX,COLLADA,obj
但是! 由于某些原因,尽管很早就有来自编辑器开发人员本身的现成的加载器,但glTF无法加载到编辑器中。 是的,如果您可以将其与引擎一起使用 受虐狂 爱Three.js。
面向对象
坏消息。
好吧,为了:
ES6
为防止编辑器发誓,必须将以下内容添加到文件的开头:
但是编辑仍然发誓
为什么在地球上?
在论坛上,开发人员清楚地表明甚至没有计划提供课堂支持。 尽管这是16-17年,但确实很重要。 我希望开发人员的想法有所改变。
档案
...一次解析一个。 这意味着在一个文件中定义基类并在另一个文件中继承基类,您会得到一个错误:

同时,场景本身运行良好。 不足为奇,因为浏览器将所有文件考虑在内,这与脚本解析器不同……
好的,我忍受了将整个类链存储在一个文件中的想法。 但是编辑仍然不满意:

我试图覆盖基本的ScriptType来创建从其继承的脚本。 我放弃了,这完全没用。 如果深入研究并查看脚本解析器在编辑器中的排列方式,则会发现一种伪造的方法来确定属性:
扰流板
和类似的东西
我的演示项目展示了具有继承关系的代码示例和自定义的Fire shader,其功能比本教程中的要复杂一些。 谁知道这一点,谁就能自己知道如何编写不良代码。
总结
通常,编辑器有很多问题,而且很严重。 我强烈建议将其用于商业开发。 但是我仍然会爱他,因为别无选择。
我什至试图基于Electron和开放的playcanvas / engine来编写脱机编辑器,但这种热情仅够一个月的工作。 也许有一天我会继续,因为每次回到这个引擎时,我都想以自己的方式去做。
PS:这个话题有趣吗? 您是否需要有关引擎,着色器,脚本..的任何教程? 也许关于这个引擎的VR / AR有什么要说的?