节点材质工具_点击使用s.mecg.me
材质节点
第一次在ue4中使用这个系统的时候，用起来非常流畅，特别是在实现特效的过程中，感觉他解决了一个很麻烦的事情，就是美术不会写程序，程序不知道效果对不对的问题，这个工具对于TA的同学来说，还是非常友好的，去年有段时间就想着做一个在web内的工具，来实现这个独立的功能。知乎上有讨论过这个东西到底有没有用的问题，基本是双方各执一词，说没用的，认为这个东西稍微复杂点的shader基本就没法用，说有用的就是这个东西可以甩给美术，解放程序员，就我个人而言这个的本身目的就是做个超轻量级的shader工具(打开网页就能用)，方便试验一些思路，原来还想着能共享做出来的材质(没有精力，应该不太可能实现了)
React+TypeScript+Webgl 整个工具的实现就是靠这几个东西了，在web中做工具，远远不如原来桌面开发中有各种各样的东西可以选择，找来找去，发现了React这个框架，对于web中工具的开发提供了一个利器，对我来说也算是一种尝试，但是始终没有找到合适GUI，如果有碰到比较顺手的可以推荐给我一下。TypeScript就不说了如果没有这个我觉得使用js来写工程应该就是一种灾难。最终的材质是还是基于物理的，实现过程参考我这篇文章基于物理的渲染
整个工具的还有个核心难点就是编译的过程了，因为整个节点连起来之后就是一棵tree，在编辑的过程中就把整个树给记录下来了，tree的根节点就是输出，写一个递归遍历一下整个树，从叶子开始编译就可以了，整个过程应该还有很大的优化空间(如果有时间还可以持续的迭代这一块的内容)。剩下的事情就是工程问题了，代码来一遍就好了。另外的难题对我来说就是操作奇奇怪怪的dom了(没有找到合适GUI框架)，还需要用到svg来画贝塞尔曲线等等。
说明
操作：和ue4中的操作基本一致，右键-添加节点的选项，左键拉节点，空白处拖动画布，点击节点连接处可以断开这个节点
最顶部的菜单功能：
编译：把节点更改重新编译成GLSL，并且能在右侧的材质球中查看到。
保存：数据是临时存储在localStorage里面的。
下载：把所有内容打包成一个二进制数据。
打开：从二进制中读取这个材质内容。
代码：查看编译好的glsl代码。
一些我随便写的材质效果：火液态金属地砖材质生锈金属材质石头材质
