使用Webgl+React+TypeScript实现UE4中的材质节点_ZNDS问答

我爱你?

材质节点

第一次在ue4中使用这个系统的时候，用起来非常流畅，特别是在实现特效的过程中，感觉他解决了一台很麻烦的事情，就是美术不会写程序，程序不知道效果对不对的问题，这个工具对于TA的同学来说，或是非常友好的，去年有段时间就想着做一台在web内的工具，来实现这个独立的功能。资深上有讨论过这个东西到底有没有用的问题，基本是双方各执一词，说没用的，认为这个东西稍微复杂点的shader基本就没法用，说有用的就是这个东西可以甩给美术，解放程序员，就我个人而言这个的本身目的就是做个超轻量级的shader工具（打开网页就可以用），省事试验一些思路，原来还想着能共享做出来的材质（没有精力，应该不太可能实现了）
React+TypeScript+Webgl 整个工具的实现就是靠这几个东西了，在web中做工具，远远不如原来桌面开发中有各种各样的东西可以选择，找来找去，发现了React这个框架，对于web中工具的开发提供了一台利器，对我来说也算是一种尝试，但是始终没有找到合适GUI，如果有碰到比较顺手的可以推荐给我一下。TypeScript就不说了如果没有这个我觉得使用js来写工程应该就是一种灾难。最终的材质是或是基于物理的，实现过程参考我这篇文章基于物理的渲染
整个工具的还有个核心难点就是编译的过程了，因为整个节点连起来之后就是一棵tree，在编辑的过程中就把整个树给记录下来了，tree的根节点就是输出，写一台递归遍历一下整个树，从叶子开始编译就可以了，整个过程应该还有很大的优化空间（如果有时间还可以持续的迭代这一块的内容）。剩下的事情就是工程问题了，代码来一遍就好了。另外的难题对我来说就是操作奇奇怪怪的dom了（没有找到合适GUI框架），还需要用到svg来画贝塞尔曲线等等。
说明

操作：和ue4中的操作基本一致，右键-添加节点的选项，左键拉节点，空白处拖动画布，点击节点链接处可以断开这个节点
最顶部的菜单功能：
编译：把节点更改重新编译成GLSL，并且能在右侧的材质球中查看到。
保存：数据是临时存储在localStorage里面的。
下载：把所有内容打包成一台二进制数据。
打开：从二进制中读取这个材质内容。
代码：查看编译好的glsl代码。
一些我随便写的材质效果：

火

火效果_点击查看

液态金属

液态金属_点击查看

地砖材质

地砖材质_点击查看

生锈金属材质

生锈金属材质_点击查看

石头材质

石头材质_点击查看
如果有什么问题可以留言、私信我。

SVG的面板，有点难操作，不知道如何使用
[害羞]

似乎还得出个更详细教程。。。

厉害，待会看看

ue'4开始涉及到h5了吗？[吃惊]

tql,有空多交流，后面我也准备写这个。。技术栈也是在ts上的

多多交流
[干杯]

[干杯]

这种节点操作方式很有用。之前有人研究过基于用Electron做的，说是有这种节点编程的框架。

Electron本身也是用js来写桌面程序，这个东西也可以用Electron包装一下就是桌面程序啦

		自动登录	找回密码
密码			立即注册

使用Webgl+React+TypeScript实现UE4中的材质节点

相关问题更多>

最新回答