[SSRShaderGallery] Online Shader FX Library

Cocos Creator
#1

About

SSRShaderGallery is a module separated from SSRShaderEditor.

ShaderEditor can only be found in the Chinese Cocos Store Section since
I do not have enough time to translate all the stuffs into English yet, it contains way too much features which may taken quite a long time to get it done and I am not sure if there are enough users interested in it or not.

SSRShaderGallery is much lighter and more simple to use compared to ShaderEditor which allows the users to browse Online Shader FX (over 100) listed in the Gallery as well as Testing them at realtime and Export the shaders in a format that can be used directly in Cocos Creator.

Let me introduce all the key features in SSRShaderGallery in detail in the following sections.

And here are some videos on how to use ShaderGallery you may check out first. (日本語の字幕も付き):

ShaderGallery Tutorial Part.1 on Youtube

ShaderGallery Tutorial Part.2 on Youtube

Key Features

FX Gallery

1
12042×1148 525 KB

All the Shader FX listed in Gallery are divided into different groups that have same Theme so that the users can find the Shader FX they may need quickly.

FX List

2
22044×1146 244 KB

8
82046×1150 249 KB

After entering a centain Shader FX Thema the users can find all the Shader FX related listed here with Uniform Input Paras and FX Capture and FX video preiview which will help the users to decide which Shader FX to pick for their game.

All the Shader FX by now can be watched here:

SSRShaderGallery Playlist on Youtube

Realtime Preview

3
32046×1148 203 KB

Knowing which Shader FX to pick to use is just the very first step. ShaderGallery also allows the users to preview all the Shader FX at runtime so they can have a more intuitive understanding on the Shader FX they pick.

####FX Tuner

9
92046×1148 187 KB

All the Uniforms of the Selected Shader will be listed here and the users can Modify these values and check the output of the Shader FX at realtime.

RenderComponent Support

5
52050×1146 161 KB

With ShaderGallery the user can not only previe the Shader FX with render target of cc.Sprite but also with Spine Animation.

Some UV-related Shader FX may not have the same output as with cc.Sprite so previewing the Shader FX with Spine Animation here is quite a huge feature.

To make UV-related Shader FX can work with Spine Animation you might need to take advantage of the cc.RenderTexture in Cocos Creator and you can also check another plugin I made here

QQ20210730-195103@2x
QQ20210730-195103@2x800×200 16.6 KB

DnD Update Support

10
102048×1154 199 KB

11
112048×1152 197 KB

You can simply drag-and-drop the textures you want to preview to the panel to change the Image in preview and of course Spine Animation is also supported for drag-and-drop (you need to provide .json + .png + .atlas at the same time)

What’s more, there are also some built-in cc.Sprite and Spine Animation in ShaderGallery for the users to have a quick Shader FX test.

Tween Animation Preview

12
122044×1148 182 KB

Most of the Shader FX are Static that might be a little bit boring as a matter of fact with the help of the cc.Tween built-in system in Cocos Creator we can make any Static FX into a Dynamic one.

ShaderGallery allows the user make almost any Uniforms into a Animated Value and preview it at realtime as well.

Shader Code Viewer

4
42044×1148 272 KB

Besides the preview feature the users can also browse the Shader Codes of the current Shader FX they are working on this may help those who want to discover the magic under the hood.

Multi Runtime Mode

13
132134×1472 546 KB
14
142874×1788 806 KB

ShaderGallery can be used in the following ways:

  1. Plugin Mode : Standard Creator plugin mode which means you need to run Cocos Creator first and then this plugin from the menu bar
  2. Web Mode : Which can be used without Cocos Creator in any modern browsers
  3. Native Mode: In short, running ShaderGallery in .apk or .ipa and this will introduced below

FX Exporter

15
152880×1754 262 KB

16
162880×1754 279 KB

After testing and adjusting the Shader FX the users can export the FX so that they can be used in their game.

2d

Web Mode

Will export .effect + .mtl that can be used in Cocos Creator v2.4.x ( users need to bind the .effect + .mtl mannually )

Plugin Mode

will export .effect + .mtl directly into Cocos Creator assets folder and the .effect + .mtl will be automaticlly bind so the user can use them without any setup process

Native Moed

Export FX is not supported yet

3d

Web Mode / Plugin Mode

Will export only .effect file which is based on the builtin-unlit.effect which can be used in Cocos Creator v3.x ( users need to create a material file and bind it with the exported effect file manually )

Native Moed

Export FX is not supported yet

Native Preview (Under Development)

17
172436×1125 193 KB

Most of the expoted Shader FX will be used in game and quite an amount of them are native game ( Android / iOS ).

Therefore, being able to preview all the Shader FX in Native enviroument will be a very nice feature for this plugin as we all know that some Shader FX might act differenty in web and Native environment.

ShaderGallery plugin will serve a native app ( .apk / .ipa) which can be used in your mobile device and with almost all the features memtioned above ( except the drag-and-drop feature since it relies on the Wev Browser Event ).

This feature is still under development ( 90% is done ) and will be released after it is completely done and well tested.

Purchasing Notice

3D

This plugin supports 3d version which only means :

  1. User can find this plugin in the CocosStore v3.x Section
  2. The plugin can be started in Creator v3.x ( plugin mode) after purchasing / downloading
  3. The exported Shader Effect for 3D is based on builtin-unlit.effect which means you may need to modify the .effect if you want to apply it to some other 3D model
  4. This plugin is acturally developed with Cocos Creator v2.4.4 so it DOSE NOT SUPPORT preview with any 3D models

Plugin Mode

  1. In plugin mode ShaderGallery CAN ONLY run in float mode and dock mode is not supported and propably will not be supported in the future for technic reason

Account

  1. ShaderGallery needs to be used with network connection and an account ( for accessing the regularlly updaing Shader FX library )

  2. As for the account you can get it in the following ways :

    1. Send a direct message to ( @supersuraccoon ) in the forum with the account name you used when purchasing ShaderGallery and I will create the account for you
    2. Leave a comment right here in the comment section with your purchasing account and a email that I can send you the account information
    3. Join my Channel on Discord for further discussion
      discord
      discord646×748 34.6 KB

  3. Offline Mode might be added in future releases

Misc

  1. The purchase contents DOSE NOT contain the SOURCE CODE of ShaderGallery

  2. Native Preview feature is not released yet

  3. All the future updates will be 100% FREE

v1.1.0

====== Fix ======

  1. Fix bool type uniform setup issue
  2. Fix Tween Preview issue with vec2 type uniform

====== Feature ======

Added Shader FX:

  • Checkerboard
  • Clover
  • Color4Gradients
  • ColorInvert
  • DancingFloor
  • DoodleDistort
  • FastMotionBlur
  • FishEyeDistort
  • FlowLight
  • HeartBeat
  • Kaleidoscope
  • PixelExplosion
  • ShapeCircle
  • ShapeRectangle
  • SingleColor
  • SmoothClipping
  • SmoothRegularPolygon
  • SmoothSegment
  • SpiralCircles
  • SpiralDistort
  • UnderWaterDistort
  • UVAnimation
  • UVOffset
  • UVPolar
  • UVRadialShear
  • UVRotate
  • UVScale
  • UVSpherize
  • UVTilingAndOffset
  • UVTwirl
  • VScaneBeam
  • ZigZagCircle

v1.2.0

====== Feature ======

  1. Multi-language support added

SSRShaderEditor has been developed over the past 4+ years :

SSRShaderFX – a project I have been currently working on (English)
[2021新坑] SSRShaderFX && Creator (Chinese Only)
[SSRShaderFXEditor] Shader 可视化编辑器正式上线 (Chinese Only)

And SSRShaderGallery is also one of the projects that I really want to take it to the perfection.

Hope you all will like it and support it (there are still lots of cool features to come) .

Please feel free to contact me if you have any questions or suggestion.
(ご不明な点あるい質問がございましたら、お気軽に連絡してください。日本語の対応も多少できまので)

The next release will be even better ~~~

2 Likes
#2

Hi @supersuraccoon1,

  1. Leave a comment right here in the comment section with your purchasing account and a email that I can send you the account information

svlad1990, svlad1990@gmail.com

#3

Thanks for your support and I have sent the account information to your email, please check your mailbox :wink:

#4

Thanks! I was able to successfully log in and reset the password. Let me know once you’ll release the ShaderEditor ( if that’ll ever happen ). That one seems to be a much more powerful tool.

#5

v1.3.0 Updated

====== Feature ======

  1. New FX Export Menu
  2. Export Creator v3.x shader file based on builtin-unlit
  3. Export Creator v3.x shader file based on builtin-sprite

ShaderGallery_Global_Tutorial_1.3-0001
ShaderGallery_Global_Tutorial_1.3-00011920×1072 112 KB

ShaderGallery Update v1.3.0 on Youtube

1 Like
#6

Update

The upcoming update is under development :

Now you can preview the Shader FX in Cocos Creator Scene with selected Render Target so that you can know what the Shader FX you choose will affect your game without having to compile and run you game.

shadergallery_creator_scene_preview-0001
shadergallery_creator_scene_preview-00011920×1162 156 KB

shadergallery_creator_scene_preview-0002
shadergallery_creator_scene_preview-00021920×1162 143 KB

ShaderGallery Cocos Creator Scene Preview

#7

Update 2021.08.12

Today I tried a to make Gallery plugin to work with the v3.x version and here is some progress:

shadergallery_creator_scene_preview_3d-0001
shadergallery_creator_scene_preview_3d-00011920×1162 128 KB

ShaderGallery Creator Scene Preview 3d

There are still lots of works to be done but I am sure it will be a great feature for this plugin and Creator as well.

1 Like
#8

Hi, I just bought your extension, but it requires log in, what should I do?
horchynskyi@gmail.com

#9

Thanks for your support and I have sent you an email with the account information :smile:

#10

Hi, My colleague just bought your extension, but he can’t log in.
When he log in it’ll show “this app is achive, please restore …”.

This my colleague email : mccskmitl@gmail.com

#11

I can ask tech support for help.

#12

Sorry for my late reply I will contact you using email soon :slight_smile:

1 Like
#13

I have created the account for you and sent it to your email.

BTW, I have created a skype account recently you can find me on skype for quick conversation :slight_smile:

https://join.skype.com/invite/we9F5KGmbros

#14

Thank you for your help :slight_smile:

Now, He can use this extension

#15

@supersuraccoon1 how did you all buy this? The Chinese payment methods listed are not familiar to me. I’m interested in the product though! How about PayPal? :slight_smile:

#16

well I am not sure how it works in the English Store but I think the Paypal is supported there ~~

#17

Update 2021.11.02

====== Bugfix ======

  1. DnD issues fixed
  2. Sub texture size issues fixed

====== Feature ======

New effects added ( now it’s 100+ in total ) :

  1. AnimatedBokehBlue
  2. AnimatedGlow
  3. BallOfFire
  4. BinocularsMask
  5. BlockyDissolve
  6. BlockyTile
  7. BlueFlame
  8. BurningFade
  9. CartoonVideoStyle
  10. CeramicGlowMosaic
  11. ColorCycling
  12. ColorizePosterize
  13. CrosshatchFade
  14. CrossWarpFade
  15. CurlNoiseFade
  16. DimLight
  17. DisintegrationFade
  18. ElectricBall
  19. ElectricFlash
  20. ElectricSinusoine
  21. ErosionFade
  22. FilmBurnFade
  23. FloatingBubble
  24. FloatingSmoke
  25. Geyse
  26. GlitchFade
  27. GridFlipFade
  28. HeatDistortEx
  29. InfernoFire
  30. Interstellar
  31. LevelFilter
  32. LumaFade
  33. MatrixColorFilter
  34. MatrixTerminal
  35. MinimalistStyle
  36. NoiseFade
  37. PixelOffsetFade
  38. PointsHatching
  39. RadialAtmosphere
  40. RadialFlare
  41. RainbowFilter
  42. RainDropRipple
  43. RevealFade
  44. RippleFade
  45. ScatterBlue
  46. ShinyLight
  47. ShutterFade
  48. SketchyStippling
  49. SliceFade
  50. SnowFall
  51. SnowFlake
  52. SolarizationFilter
  53. SpaceRinge
  54. SpeckleCrossFade
  55. VColorization
  56. VolcanoAirFlow
  57. WaterWaveFade
  58. WindBlowFade
  59. ZoomBlurFad
#18

@supersuraccoon1
I just bought it, and just send you an email.
Pls help to check and active my account.
Thanks you for this plugin.

#19

Thanks for your support and I have replied your mail with account info, please check :grinning:

1 Like
#20

Hi @supersuraccoon1

There are 2 parts: Geometry FX and UV Basic FX, i can’t see the content inside.
Do I have to do any configuration to view the content inside?