No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

FeatureExamplesDescriptions.json 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. {
  2. "introduction":
  3. """The Shader Graph Feature Examples sample content is a collection of Shader Graph assets that demonstrate how to achieve common techniques and effects in Shader Graph. The goal of this sample pack is to help users see what is required to achieve specific effects and provide examples to make it easier to learn. Select the sample you want to see from the dropdown below.
  4. """,
  5. "samples": [
  6. {
  7. "title": "Height Mask",
  8. "prefabName": "Height Mask",
  9. "description":
  10. """<ignore><link="HeightMask.shadergraph">Open the example shader</link>
  11. </ignore>A <b>Height Mask</b> is useful for blending between two materials based on the height or depth data of the materials. Height Masks create a much more realistic-looking transition than other types of blending.
  12. Here we're blending between the cobblestones and gold material based on the height of the cobblestones. The gold material fills in the cracks around the stones first before slowly covering the tops as we make the transition.
  13. """
  14. },
  15. {
  16. "title": "Angle Mask",
  17. "prefabName": "Angle Mask",
  18. "description":
  19. """<ignore><link="AngleMask.shadergraph">Open the example shader</link>
  20. </ignore>The <b>Angle Mask</b> blends between black and white based on the direction the surface is pointing.
  21. In this example, we use the angle mask to apply a snow material to the top of our object. Because the mask is applied in world space, the snow will stay on top, even if the object is rotated. Other environmental materials - such as moss, sand, or wetness could also be used.
  22. """
  23. },
  24. {
  25. "title": "Camera Distance Mask",
  26. "prefabName": "Camera Distance Mask",
  27. "description":
  28. """<ignore><link="CameraDistanceMask.shadergraph">Open the example shader</link>
  29. </ignore>The <b>Camera Distance Mask</b> blends between black and white based on the object's distance from the camera. Try zooming the camera in and out and notice that the material changes from cobblestones when close up to gold when further away.
  30. Camera Distance Masks are useful for applying effects that only appear close to the camera and then fade out further away - or vice versa.
  31. """
  32. },
  33. {
  34. "title": "Altitude Mask",
  35. "prefabName": "Altitude Mask",
  36. "description":
  37. """<ignore><link="AltitudeMask.shadergraph">Open the example shader</link>
  38. </ignore>
  39. The <b>Altitude Mask</b> blends between black and white based on the height - either in object space or world space. In this example, we transition from a cobblestone material to a gold material based on height, but you can use the black-to-white mask for all kinds of things.
  40. It can be used to place snow at a higher altitude on a mountain, or make a character get subtly brighter toward the top."""
  41. },
  42. {
  43. "title": "Interpolation Artifacts",
  44. "prefabName": "Interpolation Artifacts",
  45. "description":
  46. """<ignore><link="CustomInterpolatorNdotL.shadergraph">Open the example shader</link>
  47. </ignore>You can use the Custom Interpolator Master Stack block and node to do any calculations in the vertex stage and then pass the results to the fragment stage. It's usually cheaper to do math in the vertex stage rather than the fragment stage.
  48. However, some effects don't work well when computed per-vertex as we can see in this example. Notice that the edges of the specular highlight are triangular shaped and the transition from light to dark is quite rough. If you change the InFragStage parameter in <link="CustomInterpolatorNdotL.mat">the material</link>, you'll see these artifacts go away - indicating the per-pixel math is required for better results.
  49. """
  50. },
  51. {
  52. "title": "Interpolation Savings",
  53. "prefabName": "Interpolation Savings",
  54. "description":
  55. """<ignore><link="CustomInterpolatorUVScrolling.shadergraph">Open the example shader</link>
  56. </ignore>This is a great illustration of how some math can be done in the vertex stage without quality loss. Here, we're scrolling two sets of UVs and combining the result to create the pattern. It's significantly cheaper to do this math in the vertex stage.
  57. If you change the InFragStage parameter in <link="CustomInterpolatorUVScrolling.mat">the material</link>, you'll see no difference at all, which means these calculations are a good candidate to be done in the vertex stage to save on performance.
  58. """
  59. },
  60. {
  61. "title": "Color Detail Map",
  62. "prefabName": "Color Detail Map",
  63. "description":
  64. """<ignore><link="DetailMappingColor.shadergraph">Open the example shader</link>
  65. </ignore>The most basic form of detail mapping (shown here) is to just darken the color map with a detail pattern. While this does add extra detail, the effect is subtle and doesn't break up the magnification artifacts on the base texture that happen because we're so close to the surface.
  66. You can change the Detail parameter in <link="DetailMappingColor.mat">the material</link> to turn the effect on and off and see the difference.
  67. """
  68. },
  69. {
  70. "title": "Normal Detail Map",
  71. "prefabName": "Normal Detail Map",
  72. "description":
  73. """<ignore><link="DetailMappingNormal.shadergraph">Open the example shader</link>
  74. </ignore>In this example, we're adding additional detail to the surface normal. This is much more effective and works well to hide the texture magnification artifacts in the base texture.
  75. You can change the Detail parameter in <link="DetailMappingNormal.mat">the material</link> to turn the effect on and off and see the difference."""
  76. },
  77. {
  78. "title": "Full Detail Map",
  79. "prefabName": "Full Detail Map",
  80. "description":
  81. """<ignore><link="DetailMappingFull.shadergraph">Open the example Shader</link>
  82. </ignore>In this example, we add detail to the color, normal, ambient occlusion, and smoothness - so all of the surface properties receive additional detail. This is the best way to set up a detail map, but also a little more expensive than the other examples.
  83. You can change the Detail parameter in <link="DetailMappingFull.mat">the material</link> to turn the effect on and off and see the difference.
  84. """
  85. },
  86. {
  87. "title": "Hexagon Grid",
  88. "prefabName": "Hexagon Grid",
  89. "description":
  90. """<ignore><link="HexGrid.shadergraph">Open the example shader</link>
  91. </ignore>This example shows how to generate a hexagon grid using math. In addition to just the grid shown here, the subgraph we're using also outputs Tile ID data as well as a signed distance field for the tiles. Together, these outputs can be used to create all kinds of hexagon grid effects.
  92. """
  93. },
  94. {
  95. "title": "Procedural Brick",
  96. "prefabName": "Procedural Brick",
  97. "description":
  98. """<ignore><link="ProceduralBrick.shadergraph">Open the example shader</link>
  99. </ignore>This is a great example of how math can be used to generate a pattern instead of sampling a texture. This shader isn't using any textures at all. Instead, it creates the bricks procedurally using math. In some cases, this can be cheaper than using texture samples.
  100. """
  101. },
  102. {
  103. "title": "SDF Shapes",
  104. "prefabName": "SDF Shapes",
  105. "description":
  106. """<ignore><link="SDFShapes.shadergraph">Open the example shader</link>
  107. </ignore>SDFs or Signed Distance Fields are really useful because you can modify them and combine them in all sorts of interesting ways. They provide more flexibility than just solid shapes. So in this example, we're providing SDFs for all of the shape nodes that ship with the base version of Shader Graph.
  108. You can use the Shape dropdown in <link="SDFShapes.mat">the material</link> to select the shape you want. All of the shapes are available as subgraphs.
  109. """
  110. },
  111. {
  112. "title": "Flipbook",
  113. "prefabName": "Flipbook",
  114. "description":
  115. """<ignore><link="Flipbook.shadergraph">Open the example shader</link>
  116. </ignore>Here, we're using Shader Graph's built-in Flipbook node to create an animated effect. However, notice that the playback is not smooth. This is because only a limited number of frames can fit on the texture and we're switching instantly from one frame to the next. Normally, improving this would require us to either drop the resolution to fit more frames on the texture, or make the texture larger. Neither of these is a great option. However, there is a third option!
  117. In <link="Flipbook.mat">the material</link>, switch FlipMode from Flip to Blend and notice that the playback becomes much more smooth! Take a look at the shader to see how this is done.
  118. """
  119. },
  120. {
  121. "title": "Flow Mapping",
  122. "prefabName": "Flow Mapping",
  123. "description":
  124. """<ignore><link="FlowMapping.shadergraph">Open the example shader</link>
  125. </ignore>The continuous motion you see here is an illusion called flow mapping. We're warping the UV coordinates for the pattern along directions defined in a texture - similar to a normal map. Notice that this sample exhibits a strobing artifact where it appears that the sample is fading in and out.
  126. This can be fixed by selecting <link="FlowMapping.mat">the material</link> and setting the Temporal Mode dropdown to Flow Map Time instead of Time Only. This change introduces phase variation that breaks up the strobing effect.
  127. """
  128. },
  129. {
  130. "title": "Interior Cubemapping",
  131. "prefabName": "Interior Cubemapping",
  132. "description":
  133. """<ignore><link="InteriorCubemapping.shadergraph">Open the example shader</link>
  134. </ignore>Creating the interiors of buildings with lighting, furniture, and other details could be very expensive and heavy. Instead, we use this technique - Interior Cube Mapping - to create the illusion of an interior where none exists.
  135. This method traces a ray into the non-existent interior space and uses it to look up a value in a cubemap texture that represents the interior.
  136. """
  137. },
  138. {
  139. "title": "Parallax Mapping",
  140. "prefabName": "Parallax Mapping",
  141. "description":
  142. """<ignore><link="ParallaxMapping.shadergraph">Open the example shader</link>
  143. </ignore>Parallax Mapping is a term that represents a family of effects that are all used to create the illusion that a surface has more detail than is actually there.
  144. Select <link="Shader Graphs_ParallaxMapping.mat">the material</link> and change the options in the Bump Type dropdown to see how the three techniques compare with each other. They're listed in order of performance cost with Normal Only being the cheapest and Parallax Occlusion being the most expensive.
  145. """
  146. },
  147. {
  148. "title": "Lat Long Projection",
  149. "prefabName": "Lat Long Projection",
  150. "description":
  151. """<ignore><link="LatLongProjection.shadergraph">Open the example shader</link>
  152. </ignore>What appears to be a reflection demo is actually showing how to properly create UV coordinates to sample a Latitude Longitude map. Usually, reflections are created with a Cube Map, but in this case, our texture is in Latitude Longitude format, so we need to create UV coordinates that work with that layout. The subgraph included in this example does that for you.
  153. """
  154. },
  155. {
  156. "title": "Sphere Mapping",
  157. "prefabName": "Sphere Mapping",
  158. "description":
  159. """<ignore><link="MatCap.shadergraph">Open the example shader</link>
  160. </ignore>Here we see the cheapest form of reflections - a sphere map. The illusion of reflections is easy to break because the map looks the same from all sides, but if used carefully so the flaws aren't obvious, this technique uses less math AND less texture memory than cube map reflections. It's a great candidate for use on mobile platforms.
  161. """
  162. },
  163. {
  164. "title": "Triplanar Projection",
  165. "prefabName": "Triplanar Projection",
  166. "description":
  167. """<ignore><link="TriplanarProjection.shadergraph">Open the example shader</link>
  168. </ignore>This example demonstrates <b>Triplanar Projection</b> - a technique for projecting textures onto a surface from the front, top, and sides.
  169. Select <link="TriplanarProjection.mat">the material</link> and use the ProjectionType dropdown to try out the different methods.
  170. Texture Projection samples the texture 3 times and blends the results. It's the most expensive. Biplanar projection uses a clever trick to create a similar result with just two texture samples. UV projection creates a set of UV coordinates that switch from top to front to side and then uses them to sample the texture once. It's less expensive, but also has seams along the edges where the coordinates switch. The last option - UV - is just using standard texture coordinates. Notice that it has stretching and pinching artifacts on the top and bottom.
  171. """
  172. },
  173. {
  174. "title": "Animated Flag",
  175. "prefabName": "Animated Flag",
  176. "description":
  177. """<ignore><link="AnimatedFlag.shadergraph">Open the example shader</link>
  178. </ignore>Here we see a simple animated flag. It's using a sine wave to animate the vertices and the animation is scaled based on the distance the verts are from the left edge where the flag would be attached to the pole.
  179. """
  180. },
  181. {
  182. "title": "Bend Deformer",
  183. "prefabName": "Deformer",
  184. "description":
  185. """<ignore><link="BendDeformer.shadergraph">Open the example shader</link>
  186. </ignore>This example demonstrates the math required to bend a flat triangle strip so that it correctly maintains its length.
  187. Open <link="BendDeformer.mat">the material</link> and drag the BendAmount slider to see the bend in action. This technique could be used to animate grass blades or an antenna.
  188. """
  189. },
  190. {
  191. "title": "Gerstner Wave",
  192. "prefabName": "Gerstner Wave",
  193. "description":
  194. """<ignore><link="GerstnerWave.shadergraph">Open the example shader</link>
  195. </ignore>Here we're animating a surface using several Gerstner waves. The Gerstner formula is designed to simulate the behavior of a single wave. By combining several different size waves together, we create a realistic-behaving water surface."""
  196. },
  197. {
  198. "title": "Billboard",
  199. "prefabName": "Billboard",
  200. "description":
  201. """<ignore><link="Billboard.shadergraph">Open the example shader</link>
  202. </ignore>This material is using a subgraph that's designed to be applied to a plane. The subgraph rotates the plane so that it's always facing the camera.
  203. Try moving the camera around to see this in action. This effect is useful for particles, imposters, and other cases where we want to create the illusion of a volume simply by mapping a texture to a plane that always faces the camera.
  204. """
  205. },
  206. {
  207. "title": "Mist Particles",
  208. "prefabName": "Mist Particles",
  209. "description":
  210. """<ignore><link="ParticleEffect.shadergraph">Open the example shader</link>
  211. </ignore>This example shows how the particle shader can be used to create subtle mist. The particle movement is slow and drifting. The particle lifetime is long, and the particles slowly fade out over time as new ones slowly fade in.
  212. Take a look at <link="Mist.mat">the material</link> settings to see how this was made.
  213. """
  214. },
  215. {
  216. "title": "Smoke Particles",
  217. "prefabName": "Smoke Particles",
  218. "description":
  219. """<ignore><link="ParticleEffect.shadergraph">Open the example shader</link>
  220. </ignore>This particle example creates a smoke plume. The smoke particles move in the up direction and then the wind settings push the particles to the right over time. The flipbook effect makes the smoke appear to slowly rise and swirl.
  221. Take a look at <link="Smoke.mat">the material</link> settings to see how this was made.
  222. """
  223. },
  224. {
  225. "title": "Particle Fountain",
  226. "prefabName": "Particle Fountain",
  227. "description":
  228. """<ignore><link="ParticleEffect.shadergraph">Open the example shader</link>
  229. </ignore>This fountain is created by spawning the particles in the up direction and then letting gravity pull them down again. The particles grow in size and fade out over their lifetime to give the illusion that the water is turning to mist.
  230. Take a look at <link="Fountain.mat">the material</link> settings to see how this was made.
  231. """
  232. },
  233. {
  234. "title": "Waterfall",
  235. "prefabName": "Waterfall",
  236. "description":
  237. """<ignore><link="ParticleEffect.shadergraph">Open the example shader</link>
  238. This waterfall effect is created by pushing out the particles to the right and then letting gravity pull them down. The flipbook effect and random particle rotation give the appearance of whitewater.
  239. Take a look at <link="Waterfall.mat">the material</link> settings to see how this was made.
  240. </ignore>
  241. """
  242. },
  243. {
  244. "title": "BranchOnRP",
  245. "prefabName": "Branch on RP",
  246. "description":
  247. """<ignore><link="BranchOnRP.shadergraph">Open the example shader</link>
  248. </ignore>This graph shows a way to determine the currently active render pipeline, using branch nodes that result in a GREEN output when the project is in URP, BLUE in HDRP, and YELLOW in BiRP.
  249. """
  250. },
  251. {
  252. "title": "BranchOnMaterialQuality",
  253. "prefabName": "Branch on Material Quality",
  254. "description":
  255. """<ignore><link="BranchOnMaterialQuality.shadergraph">Open the example shader</link>
  256. </ignore>This graph shows how to use the Material Quality Keyword node to switch between three normal map blending methods that cost differently performance-wise, based on the current Material Quality setting.
  257. """
  258. },
  259. {
  260. "title": "Custom Lighting PBR",
  261. "prefabName": "CustomLightingSpherePBR",
  262. "description":
  263. """<ignore><link="CustomLightingPBR.shadergraph">Open the example shader</link>
  264. This example shows a physically-based shader created in Shader Graph. It includes GGX specular, and ambient values that use the scene's reflection probes for both diffuse and specular ambient. Distance Fog is also included. Note that the lighting model used in the HLSL code for the additional lights is cheaper - so the main light and ambient lighting are PBR, but other light sources use a simpler Blin shading model.
  265. </ignore>
  266. """
  267. },
  268. {
  269. "title": "Custom Lighting Simple",
  270. "prefabName": "CustomLightingSphereSimple",
  271. "description":
  272. """<ignore><link="CustomLightingSimple.shadergraph">Open the example shader</link>
  273. This example shows a more basic lighting model that uses the Blinn model for specular, and a static color for ambient. It does not compute fog. This lighting model should be significantly cheaper than the PBR version.
  274. </ignore>
  275. """
  276. },
  277. {
  278. "title": "Custom Lighting Cel Shader",
  279. "prefabName": "CustomLightingSphereCelShaded",
  280. "description":
  281. """<ignore><link="CustomLightingCelShader.shadergraph">Open the example shader</link>
  282. This example shows how a cel shader can be created in URP - including support for multiple light sources and shadows. Ink outlines could also be added using the post-process effect (not included here).
  283. </ignore>
  284. """
  285. }
  286. ]
  287. }