SSRShaderToyConverter

About / 关于

Shader 作为可以提升游戏表现力的手段，永远是值得学习和使用的技术。

Shader 的实现基础基本都是 glsl 语言。

但是，想要将各种不同游戏引擎中的 Shader 特效，无缝的直接交叉复用，基本上是很难做到的，因为各种引擎通常都有着自己的一套约束规定。

就像音频会有各种不同的格式 .mp3 .wav .flac .... ，图片也是一样 .jpg .png .bmp ；不同格式的文件通常会有不同的使用场景，也正因为如此，存在着各种各样的 转换器 转件，将格式 A 转换为格式 B。

Shader 特效也是如此，各种游戏引擎有自己的特效文件书写格式，规范，这些特效文件，想要做到 ctrl+c / ctrl-v 到不同的环境就能直接使用的情况就必须要进行人为的移植。

这些年在不停的开发和更新完善 SSRShaderEditor 以及一些配套插件时，经常会阅读一些其他引擎的不同书写风格，格式的特效文件，因此制作一款 特效转换器 插件的想法也一直存在着。

Challenge / 挑战

做一款 转换器，就意味着，对于待转换的对象，以及被转换后的对象，都要有相当程度的了解，否则就很有可能在转换阶段就出现错误。当然有时候即使转换成功，实际使用的效果也可能存在着差异。

转换后的对象 CocosCreator 是单一的目标，这里不是什么大问题，但是待转换的对象，则有多种多样的可能性。

想要将任意特效转化最后的生成产物，已经完全具备了可悲 直接使用 的能力，而不只是 暴力的翻译转换 而已，这是一个很大的挑战。

Choice / 选择

对于这么一个复杂的课题，首先寻找一个切入点进行尝试，是一个很好的选择，在缺乏经验，很难在开始前就做到完美的设计的情况下，直接开干 是个人很喜欢的方式。

对于特效文件的来源，有着各种各样的出处，比如各种游戏引擎 Unity3D GameMaker godot ..... 各种在线特效库 ShaderToy Glsl Sandbox Vertex Shader Art Shaderfrog 等等。

挑选一个对象作为切入点，是第一件要做的事情，这里选择的是 ShaderToy。

ShaderToy 上的特效代码，都是公开的，在看到好的效果的时候，就可以对源码进行查阅
ShaderToy 中的效果大都在片断着色器中实现，和顶点着色器没关系，这对于编写转换器起手而言是一个好的简化点
ShaderToy 作为最为有名的在线先特效库，有着丰富的资源
ShaderToy 的大部分编写规范已经书写方式和 Cocos Creator还是比较相近的

Freatures / 特性

经过大量的实际特效的分析和反复的尝试，目前的插件基本已经可以对大部分的特效进行一键转换了。除此之外，为了更好的配合 Cocos Creator 的中的使用方式，还增加了一些增强性的解析功能:

一键转换 ShaderToy 的特效文件，输出 Creator 可以直接使用的 .effect + .mtl 文件
支持引擎版本 >= v2.4.0 及 >=v3.1.0
导出特效格式，支持基于 builtin-2d-sprite (>= v2.4.0) 及 builtin-sprite / builtin-unlit (>=v3.1.0)
支持自动修复 ShaderToy 特效中的 UV 计算，转换为 Creator 的形式
支持自动提取 ShaderToy 特效中的各种变量，转换为 Creator 中可以直接使用的导出属性
支持自动修复 ShaderToy 特效的透明度问题，使其可以配合各种不规则图片使用
支持自动去除 ShaderToy 特效的实体背景，使 程序纹理 类特效可以拥有 透明背景，从而更好的被应用到游戏中
支持自动修复 ShaderToy 特效的纹理翻转问题

Attention / 注意

Defect / 缺陷

插件进行了大量的用例测试，但即便如此，还是会有相当一部分特效，至少在当前版本中，还无法做到真正的一键转换，因为 Shader 的写法因人而异，想要做到能够无差别的解析这些特效，还是需要不停的优化，改进，才可能做到。

下面是一些已知的问题和缺陷 ( 当然大部分可以通过手动修正解，当然在后续的版本更新中，作者会寻找更好的解析处理方式 )。

和 GLSL 3.0 相关的特性，暂时不支持

这些特效在转换时通常会报错:

........ supported in GLSL ES 3.00 and above only

一些特有函数 texture2DLod

一些特性 位运算变量数组 ，循环次数使用变量, 数组的初始化复制 等等
多 buff 特效，这个因为 Creator 并不支持多 pass 所以无法简单的通过转换来支持这些特效
部分上下文分段的 UV 转换代码，暂时无法准确的一键转换

目前的 UV 自动转换虽然能使用于大部分特效，但是还是有无法很好支持的情况，当然通过简单的手动修改是可以做到修正的。这会在后续慢慢的优化代码解析转换的方式。

Suggestion / 建议

不推荐购买的朋友:

对 Shader 语法基本没有什么了解，属于纯新手
很难自行对特效代码进行一些简单的修正
希望对将所有特效都进行一键转换，直接使用

推荐购买的朋友:

有一定的 Shader 语法经验
对转换后的代码，能简单的进行修正

当然对于购买的用户，在转换时遇到任何，都可以随时联系我或加群，我都会给出修改的解决方案 ( 有问题的特效，至少 90% 特效可以通过简单的修改特效代码来解决 )

How to Use / 使用手册

首先可以看下视频，来直观的感受下实际的使用方式和所能达到的效果:

SSRShaderToyConverter >= v2.4.0 on BiliBili

SSRShaderToyConverter >= v3.1.0 on BiliBili

Basis / 基础

在开始使用前，首先要明确一个概念，ShaderToy 上的特效种类繁多，千奇百怪，但是其实可以被大致的分为两种类型:

Texture FX / 纹理特效

纹理特效，很好理解，给定一些纹理图片 (一个主纹理，多个附纹理)，再配合上各种 Shader 代码，给主纹理带来各种特效，如 灰度图，扭曲，像素化， 模糊 等等。
对于游戏中的实际应用而言，主要有:
1. 作为屏幕后期特效来使用
2. 针对一些游戏对象，个体单独使用特效
Procedure FX / 程序纹理特效所谓程序纹理，指的是通过 Shader 代码来绘制出各种纹理效果，而不是直接使用纹理图片，比如生成 跳动的爱心，四叶草 等各种奇形怪状的效果。同样对于游戏中的实际应用而言，程序纹理特效可能比较少用，但是适当的挑选一些简单高效且效果好的特效，还是可以给游戏带来一些有趣的效果。

Select FX / 挑选特效

使用插件的第一步，是从 ShaderToy 网站上挑选自己想要运用到 Creator 的特效。

这里要注意的，就是下面的几种类型，是插件所不支持的，因此请不要选择，否则会转换失败。

Multi Buffs FX / 多 buff 特效 ShaderToy 上使用到多 buff 的特效，这个就像前面建议中提到的，因为 Creator 暂时无法直接支持这类特效，所以无法正确的转换。
Warnning FX / 报警特效 ShaderToy 上有部分在预览时可以看到 警告标签 的特效，这些特效是无法被正确的转换的。
Audio FX / 音乐特效 ShaderToy 上有部分特效是需要配合 输入音频 来实现的，这些特效暂时也无法被正确的转换。

除此之外的特效，都可以被用来作为插件转换的对象。

Convert / 转换

挑选好想要转换的特效后，只要将特效内容复制

并粘贴到插件的对应位置即可。然后点击按钮，就可以进行特效的转换了。

Apply / 启用

生成的特效和 Cocos Creator 规范的特效格式完全一致，可直接使用。

Options / 选项

由于特效的内容复杂多变，因此插件提供了一些可选项，来提高转换的准确性，或是提供一些针对 Creator 的支持。

Auto UV Fix / 自动修复 UV

ShaderToy 中几乎所有的特效，采用的 UV 系统都是和 Creator 不一样的，并且还有这千奇百怪，各种各样的写法。该选项会将特效中的这些 UV 计算方式，转换为 Creator 的形式，以确保各种类型的特效都能够在 Craetor 中正常的使用。

UV 修复是非常重要但也是比较容易出现问题的步骤，虽然特效可以被正常转换但是实际使用时会发现效果有差异。对于这类问题，可以联系作者，来进行一些手动修复的指导

Macro Variables to Uniform / 宏变量转 Shader 变量

ShaderToy 中虽然有 Uniform 关键字，但是很多作者并不会使用，而是习惯用 #define 的方式来进行变量的定义，该选项会尝试将这些变量，转换为标准的 Creator 格式变量，可以在面板中调试也可以在代码中进行直接的控制。

Uniform Variables to Uniform / 原生变量转 Shader 变量

就像上面提到的 ShaderToy 中也有 Uniform 关键字，该选项会尝试将这些变量，转换为标准的 Creator 格式变量。

Global Variables to Uniform / 全局变量转 Shader 变量

除了上述两种类型，ShaderToy 中还会使用 全局变量 的形式来定义变量，该选项会尝试将这些变量，转换为标准的 Creator 格式变量。

有时会存在作者对全局变量进行赋值的操作，这时候开启此选项会造成报错的情况，可以通过关闭该选项来解决，或是手动删除赋值的代码

MainTexture Alpha Fix / 使用主纹理 alpha 通道

ShaderToy 中的大部分特效会使用实色背景，而这些特效如果相结合到游戏中的各种不规则带透明图片使用的话会发生问题，该选项会尝试使用主纹理的透明通道，对这一问题进行修复。

这一选项，主要是配合 Texture FX / 纹理特效 进行使用

Auto Transparent Background / 动态透明背景

ShaderToy 中的大部分 Procedure FX / 程序纹理特效 都会使用实色背景，这些特效如果在游戏中直接使用会出现难以融入到游戏中的问题，该选项会提供一个可调节变量，来只能修复这一问题，达到比较好的透明背景效果。

这一选项，主要是配合 Procedure FX / 程序纹理特效 进行使用

Background Auto Fix on BiliBili

Force UV FlipY / 强制 UV 垂直翻转

ShaderToy 中的部分特效会存在 纹理垂直翻转 的情况，改选项会尝试修复这一问题。

Test / 测试

测试编辑器版本

本次测试的所有特效用例都在 v2.4.6 和 v3.3.0 上进行过完全的测试。

此外，在对比下列版本后发现，v2.4.0 ~ v2.4.6 的 builtin-2d-sprite 特效格式并未改变，v3.1.0 ~ v3.3.2 的 builtin-sprite / builtin-unlit 特效格式同样没有发生改变。

在对下列版本编辑器进行随机取样测试后，所有抽查的特效都可以正常的进行转换并且被使用。

2.4.0
2.4.4

3.1.0
3.1.1
3.2.1
3.3.1
3.3.2

测试特效

本次测试随机挑选了大量的特效来进行转换准确性和各个功能点的测试。

特效的类型主要分为两大类进行测试: Texture FX / 纹理特效 以及 Procedure FX / 程序纹理特效。

目前的转换成功率还是比较可以的，部分很复杂的特效暂时还无法直接一键转换成功，但是通过简单的手动修复，就可以正常的运行起来，比如这个比较有名的蜗牛 :

Snail in CocosCreator v3.3.0 on BiliBili

下面是完成的测试用例列表，目前的总数 Texture FX / 纹理特效 + Procedure FX / 程序纹理特效 50 + 50共 100 个特效。

编号	FX	全局函数	全局变量	宏定义	宏变量	宏函数	多纹理	纹理翻转	UV 修复
1	Animated Glow	√	-	-	√	-	-	-	-
2	Thermal Visual	√	-	-	√	-	-	-	-
3	Grayscale	√	-	-	-	-	-	-	-
4	1-bit Noise	√	-	-	-	-	-	-	-
5	Points Hatching	√	-	√	-	-	-	-	-
6	Gaussian Blur	√	-	-	-	-	-	√	√
7	RGB Split	√	√	-	-	-	-	-	-
8	Glitch	√	-	-	-	-	-	√	-
9	Teal & Orange	-	-	-	-	-	-	-	-
10	Sketchy Stippling	√	-	-	-	-	√	-	√
11	Colorize Posterize	√	√	-	-	-	-	-	-
12	Radial Flare	√	-	-	√	√	-	-	-
13	Simple dissolve	√	-	-	-	-	√	-	-
14	Simple Edge Detector	-	-	-	-	-	-	-	√
15	Bokeh Blur	√	-	-	√	-	-	-	-
16	HatchingCircles	√	-	-	-	-	-	-	-
17	TrichromiePoints	√	-	-	-	-	-	-	-
18	Dot/Line/Dither	√	-	√	-	-	√	-	-
19	Raining On Your Screen	√	-	-	-	-	√	x	-
20	Sketch Book	√	-	√	√	√	-	x	x
21	Sinethresholder	-	-	-	-	-	-	-	x
22	CeramicGlassMosaic	-	-	-	-	-	√	-	√
23	Earlybird Filter	-	-	-	-	-	-	-	√
24	Speckle Cross Fade	√	-	-	-	-	√	-	√
25	Portal 2 Box Flip Rotation	√	-	√	-	-	√	√	√
26	texture flip	-	-	-	-	-	√	-	-
27	Page Curl Effect	√	√	-	-	-	-	-	√
28	Curl noise Image transition	√	-	-	-	-	√	-	√
29	basic film burn	√	-	-	-	-	√	-	√
30	Simple colorization	-	-	-	-	-	-	-	-
31	The Matrix color filter	-	-	-	-	-	-	-	-
32	Photoshop Glowing Edges	-	-	-	-	-	-	-	-
33	Filter Effects	√	-	-	-	-	-	-	-
34	Scatter Blur	√	-	-	-	-	-	-	-
35	Luma Fade	√	-	-	√	-	-	-	√
36	B&W blur filter	√	-	-	√	-	-	-	√
37	RGB separate filter	-	-	-	-	-	-	-	-
38	Melting snow filter	√	-	-	√	-	-	√	√
39	Level filter	√	-	-	-	-	-	-	√
40	Color Zebra	-	-	-	-	-	-	-	√
41	Scanline(ish) filter	-	-	-	-	-	-	√	√
42	Simple 2D Cel Shading	√	-	-	-	-	-	√	√
43	Color Reduction	-	-	-	-	-	-	-	√
44	Filter: Solarization	√	-	-	√	-	-	-	√
45	Stained Glass Filter	√	-	-	√	-	-	-	√
46	Ripple filter fork for Oil stan	√	-	-	-	-	-	-	√
47	Rainbow filter	√	-	-	√	-	-	-	√
48	Probabilistic quadtree filter	√	-	-	√	-	-	-	√
49	Night vision	√	-	-	-	-	-	-	√
50	cartoon video - test	√	-	-	√	-	-	-	√

编号	Procedure	全局函数	全局变量	宏定义	宏变量	宏函数	多纹理	纹理翻转	UV 修复
1	TBOS	√	-	-	-	-	-	-	-
2	Sphere Tracing	√	-	-	-	-	-	-	√
3	Ball Of Fire	√	-	-	-	-	-	-	√
4	Combustible Voronoi	√	-	-	-	-	-	-	√
5	Geyser (Fast Water)	√	-	-	-	-	-	√	√
6	Pyroclastic fireball	√	-	-	√	√	-	√	√
7	Heart - 2D	-	-	-	-	-	-	√	√
8	Total Noob	-	-	-	-	-	-	-	√
9	Bubbles	-	-	-	-	-	-	-	√
10	Noise animation - Electric	√	-	-	√	√	-	-	√
11	Planetary gears	√	-	-	√	-	-	-	√
12	Shiny Circle	√	-	-	-	-	-	-	√
13	Foamy water	√	-	-	√	-	-	-	√
14	Blobs	√	-	-	-	√	-	-	√
15	Flakes	-	-	-	-	-	-	-	-
16	NEON LOVE	√	-	-	√	-	-	-	√
17	Electric Sinusoid	-	-	-	-	-	-	-	√
18	The Blue Flame	√	-	-	√	√	-	-	√
19	A Spiral of Circles	√	-	-	-	-	-	-	√
20	Clover	-	-	-	-	-	-	-	√
21	Interstellar	√	-	-	-	√	-	-	√
22	Snow	-	-	-	-	-	-	-	√
23	301's Fire Shader - Remix 3	√	-	-	-	-	-	√	√
24	Flame in the wind	√	-	-	-	-	-	√	√
25	The cat is a glitch	√	-	-	√	√	-	√	√
26	Color Grid	-	-	-	-	-	-	-	√
27	Bokeh Paralax	√	-	-	-	-	-	-	√
28	Sakura Bliss	√	-	-	-	√	-	√	√
29	Wind Experiment	√	-	-	-	√	-	-	√
30	multicolored 2D metaballs	√	-	-	-	-	-	-	√
31	D2 Style Portal	√	-	-	-	√	-	-	√
32	Electro	√	-	-	-	-	-	-	√
33	Electric Ball	√	√	-	-	-	-	-	√
34	space rings	√	-	-	-	-	-	-	√
35	Radial Energ	√	-	-	-	-	-	-	√
36	Colourful Squares	√	-	-	-	-	-	-	√
37	Squares Background	√	√	-	-	-	-	-	√
38	heart G	√	-	-	-	√	-	-	√
39	Another Galaxy	√	-	-	-	-	-	-	√
40	Fall Guys Menu Background	-	-	-	-	-	-	-	√
41	minimalist starfield	√	√	√	-	-	-	-	√
42	Topologica	√	-	-	-	-	-	-	√
43	rays shader	√	-	-	-	-	-	-	√
44	FakeLightMove	√	-	√	-	-	-	-	√
45	Circular noise movement	√	-	-	-	-	-	-	√
46	Star Rider	√	-	-	-	-	-	-	√
47	Tiled rainbow explosions	√	-	-	-	-	-	-	√
48	Blocky tile	√	-	-	-	-	-	-	√
49	Airy Disk	√	-	-	-	√	-	-	√
50	Heart of Fire	√	-	-	-	√	-	-	√

Summary / 总结

SSRShaderToyConverter 是一个非常有趣同时也是作者话费了很多心血的插件项目，不仅可以帮助更多的开发者把更多的特效带到 Creator 中，方便的使用，同时也能够为开发者节省大量的特效移植时间。虽然这个项目现在还只能称得上是个 半自动 插件，但是相信随着后续的不断优化，它的自动化程度会一点一点的提高。

如果有需要的朋友，欢迎支持这个项目，购买插件后，记得加我的 QQ: 453951749，对于使用插件再转换过程中碰到的任何问题，都可以随时找我，我都会尽最大可能来帮助解决问题，同时也近一步完善这个插件。