Tumgik
#ShaderGraph
andbloom · 4 months
Text
Tumblr media
I really like chunky clouds.
15 notes · View notes
uberthemeh · 11 months
Text
youtube
Some Unity Stencil Shader testssssss
Its the Spider-Verse Portal!!
I miiight use it for like, a VRChat Spawn animation
But we'll see!!!
11 notes · View notes
clamtime · 1 year
Text
Don't know how to write shaders but want cool effects in your games? Here's a simple "toon" water shader made using Unity's Shadergraph, explanation (for beginners) below.
Using separate Tiling and Offset nodes allows us to control the movement rate for the foam and water color (light vs dark water) separately via UV. We use a time value (which is always changing!) multiplied by a rate value to control how fast we want the water or foam to move.
Voronoi Noise will power most of our shader. In simple terms, Voronoi Noise is a type of procedural noise which takes an arbitrary amount of points to and colors the distance between them with a black-white gradient. The amount of points is defined in the "cell density" field.
This is useful as black is equal to 0 and white is equal to 1 so we can use these values to do some simple calculations later. The "angle offset" field allows us to "randomly" move the defined points. We use our always moving UV's from the respective tiling and offset for this.
Using these Voronoi's, we can define regions for our Water & Foam. Starting with Water, we take the "out" field of the Voronoi and use a OneMinus node to flip the values (this only flips because Voronoi output is between 0-1) so we have white (1) only where we want color.
Using a Lerp node (lerp or "linear interpolate" blends values A and B with "opacity" T. T is between 0-1 instead of 0-100 as you may be used to) we blend our Voronoi with a Gradient Noise to break up the shape slightly. Gradient noise looks like this. It's only input is scale.
Tumblr media
Gradient Noise plugs into A and the inverted Voronoi plugs into B. The blend "percentage" or T will be a user defined value. The output of this Lerp will become our T value to blend between a Light and Dark water color you've defined!
For foam we're going to take a slightly different approach. Before plugging in the foam Voronoi into a Lerp T field, it goes into a power node. This gives control over the "amount" of blackness. In the below example the left has an exponent of 2 and the right has 5.
Tumblr media
This lets us control how much foam there will be as wherever there is white, there will be foam. Simply connect the output of the power node as the T value to a final Lerp node where A is the final water Lerp and B is the foam color you've defined. This is our composite!
Plug your composite into the base color field for your shader and set some user defined alpha (opacity) value if you'd like and that's it :)
An idea for expanding on this are using the Voronoi's to create heightmaps (or using heightmaps of any sort) to procedurally create verticalness or even waves in the water!
9 notes · View notes
adambelievesinyou · 1 year
Text
Tumblr media
background smoke for a client
3 notes · View notes
alittleredpanda · 8 hours
Text
Tumblr media
It's been a good while since I've posted anything, and I've wanted to post some little effects from projects I have been working on, so this is the first one! This is a little shader to create a sound wave in Unity, I used a similar one when I was working on the Wallace and Gromit project, The Big Fix up, a couple of years ago, as one of the characters talked to the player through radios, and we needed a visual representation of that!
Tumblr media
Start off by adding a rectangle node, make sure it's thing and centred in the middle of the image.
Tumblr media
Add a UV node. Put the X straight into the X of a Vector 2 node. Create some stripes by multiplying the X axis (x10) and running it through a sine wave. Then multiply it by the height (0.2) then add this to the Y axis, and put it in the Y of the vector 2.
This gives us a sine wave.
Tumblr media
Now grab another UV node, use the smoothstep node to fade this on each edge and multiply these together. Multiply this with the height node, and stick a saturate in there somewhere, to keep the value under one.
The result of this should be plugged into where the height was previously.
Tumblr media
To animate the wave you can add a time node, and multiply it by speed (0.2), then add this to the X axis right at the start, before it's multiplied by the density.
Tumblr media
Then you can use a lerp node to add colour, and hook the result into the BaseColor and Emission
Tumblr media
And you're done! You can animate the values with an animation or timeline, change colours, add more effects, anything you like!
Tumblr media
0 notes
supertask-jp · 1 year
Photo
Tumblr media
VFXGraph samples
GitHub
Tumblr media Tumblr media Tumblr media
1 note · View note
nucleiaster · 3 months
Note
Having some trouble progressing with shaders, I feel there's a lack of reference material (tutorials etc). Could you guide me to some materials that you used to progress in this field?
Yes, of course ! I don't know your degree of familiarity with shaders, or what platform you're writing them on, so these resources are going to be very Unity-centric, since that what I'm familiar with ! But a shader is a shader, no matter where you create it, so it should not be complicated to adapt these resources to your needs. I personally started with Gabriel Aguiar Prod's Shadergraph tutorials. He doesn't go in depth into the how and whys of shaders, but it's a good starting point to get a feel of how it works.
For learning how to write shaders, both Xibanya and Cyanilux are very good resources : Xibanya's Shaders for people who don't know ho to shader focuses on writing shaders for Unity's Built In Render Pipeline; and Cyanilux has a very detailed article on writing shader code for the Universal Render Pipeline, and a more general intro to the shader pipeline that goes into how shaders work in general. The book of shaders is not attached to any particular engine and provides interactive examples of the concepts they present.
When it comes to tutorials, I really like the work of Ronja's tutorials, Harry Alisavakis, Minions Art, Roystan and Alan Zucconi. Also, Simon Schreibt makes a lot of game effects breakdown and has a series of posts explaining render pipelines from an artist's perspective.
I also want to mention Catlike Coding, Inigo Quilez and Acerola who are on the more technical side of things. Reddit and the Unity forums can also be really useful if you're stuck. Oh, and don't hesitate to dive into Unity's shadergraph documentation when you need a specific function (remap, gradient, blend mode...) : each node comes with a code snippet and it's a lifesaver.
For the maths, I unfortunately don't have a lot of resources. You can go without for a while, but eventually you'll have to know some vector maths and matrices, either for more complicated effects or if you want a better understanding of what's going on in your shaders. The book 3D Math Primer for Graphics and Game Development by Fletcher Dunn and Ian Parberry has really helped me link abstract maths concepts to what happens on my screen. I also got Mathematics fo 3D Game Programming and Computer Graphics (third edition) by Eric Lengyel (it has a skeleton on the cover, how cool is that) but I haven't gotten through it yet.
I probably forgot a few blogs or youtube channels, but these are the ones I always come back to ! I hope these will be useful to you, have fun creating shaders !
7 notes · View notes
etheria-game · 2 months
Text
Tumblr media Tumblr media
Ladies, gentlemen and people who prefer to go by anything else, I present to you, what is quite possibly my finest work of shader code yet! I, thejinxedartist, also known as Folly, have added shadows to the fog!
OK, OK, enough with the fancy talk. But yes, I have spent quite a while re-writing the fog shader from scratch in its own shader, rather than as a custom function in shadergraph. I was planning to anyway as auto-generated code from node-based editors is generally not the fastest, but I also had no way to access lighting information where I needed it in order to add shadows. If anyone was wondering, in the raymarching loop, before I accumulate the fog density, I check if the point in space is in shadow using mainLight.shadowAttenuation.
Anyway, now that this whole thing is over, I can get back to- oh wait! The ambient sky light isn't working properly you say? Well, I can't just leave it unfinished, can I! Just leave me a few weeks and I'll have it done! (This is a joke, It'll only take 6 days ;)
[UPDATE]
So I forgot that I was rendering this at 512 samples for the screenshots and I was wondering why my my fps had dropped from ~250 to ~150 and so I spent a while adding every optimisation I could, and then I realized "Oh wait, why am I rendering this with 512 samples" so now its back to 64 samples and is running even faster.
3 notes · View notes
andbloom · 1 year
Text
Tumblr media
If we could see gravity waves this is what I hope they would look like.
13 notes · View notes
luelly · 2 years
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
an intro-to-shaders workshop i ran at AR House to teach residents how to use Unity’s shadergraph.
we started by using some flower models from sketchfab, then i showed everyone how to use UV scrolling and clipping to add movement into the material without needing to change the mesh. 
then we added a simple particle system and post processing at the end to add depth and pretty effects :)
52 notes · View notes
uberthemeh · 11 months
Text
youtube
[Across the Spider-Verse Portal]
I just wanted to do for fun so I probably wont be expanding on this too much
Since it is using Unity Version 2019, as well as the Vanilla Unity Render pipeline,
It SHOULD be compatible with VRChat? IDK
GIT HUB LINK:
2 notes · View notes
ninootny · 11 months
Note
Any silly Gary thoughts?
Mmmmm,,,,, I love the artsy side of Gary!! I think he doodles a lot when he thinks about his inventions (just like when he explains his plans)- It helps him to put words on things/process his ideas better?
Tumblr media
Also i think he would love Shadergraphs/nodes, aka maths with pictures (or art with maths :T), idk, it's very nerdy + he seems to like things with (a lot of) steps (like the thingamajig)
Tumblr media
Like, he could def use this kind of things to create some graphs while he's developing a simulator for agents and he would be like "GADZOOKS!! LOOK AT THIS AMAZING WAVE THAT IS ANIMATED THANKS TO THE SCIENCE!! THAT'S AMAZING!!" with 3 cups of coffee in the body and no sleep. a very gary thing. (Also it's very satisfying when your shader does something cool so yeah 👍)- also he will talk about how it works for hours because hum. yeah. goofy aaah nerd emoji penguin
Also, I want Gary to listen to Hatsune Miku. I really like this thought.
btw thank you for asking it made me really happy!!! 🫡
7 notes · View notes
canmom · 1 year
Text
Tumblr media
I'm doing a gamedev course, paid for by Her Majesty's Government, because I guess they think more game developers is more taxes or something. I'll take it lol. Am I going to be come a game developer? Unclear as yet! I'll be as surprised as you. But I need 'money' to 'eat food', I understand, and this is looking like the best bet.
A lot of it is about one big project that I'll be working on over the next ~14 weeks, so I thought maybe people would be interested in what I'm trying to make. Which is THRUST//DOLL, a game about darting and grappling your posthuman shell through hundreds of missiles. You can see some visual inspirations here...
For reasons best known to Past Bryn (ok, it's to learn the tech), I'm trying to do this entire project within Unity's new(ish) Data Oriented Technology Stack (DOTS), which gives you the magic of an Entity Component System, meaning you can shove data in and out of the CPU cache at speeds previously unknown to humanity. DOTS is a paradigm that's supposed to replace the old object-oriented world of GameObjects with something sleek and modern and compiled (using 'Burst', we're still in C# sadly).
So the core idea of ECS is that, instead of storing data on class instances, you put that data in tightly packed arrays of component strcts indexed by the same 'entities', and you iterate over these rapidly with 'systems'. If you've heard of e.g. the Rust game engine Bevy, it's the same idea, just... awkwardly jammed into Unity. (Many other engines are following the same sort of idea).
But... it's had a really rocky history, the API has only just stablised after most of a decade, and half the DOTS-related information you'll find on the internet is plain out of date, and the rest is either a little inscrutable or long video tutorials.
Tumblr media
The first task I've been set by the powers that be at "Mastered" is to make a 'configurator'. The assessment task they had me do to get into the course was also a configurator, I guess someone there really likes configuring things. Anyway, for me that's going to be the character creation screen of THRUST//DOLL, where you swap out bits of your body to get new abilities.
So, have the first of some devlogs where I describe the design decisions I've been making so far. At first all I wanted to do was create a system where there are UI elements that you can click on with a little toggleable circle in the UI that is attached to them. Unity has like three ways of doing everything you can think of, so that involved a lot of digging. Eventually I settled on doing it a fourth way using none of Unity's built-in UI systems, using shader magic.
So I made a noodly looking thing for drawing circles:
Tumblr media
Why shadergraph and not the cool hardcore HLSL text editor way? Because sigh DOTS has a bunch of weird boilerplate I didn't have the energy to figure out. 'Because DOTS has a bunch of weird boilerplate' is gonna be the recurring thing in this story I suspect. Anyway Unity ShaderGraph is almost the same as Blender Material Nodes, except you need to know a little bit about rasterisation. Luckily I made a rasteriser in 2017, so I have a decent understanding of this stuff.
A billboard shader it turns out is hilariously simple. What you basically want to do is have a polygon that matches the rotation of the camera. However, in a shadergraph, Unity will apply the full MVP matrix no matter what. So the solution is that you do is you take the View matrix, which is the camera's transformation, and invert it, and apply that before the MVP matrix with 0 in the w component to make sure any translation still gets applied. As long as the model isn't rotated at all, it all cancels out.
Anyway I figured out how to do overrides with DOTS components, which is neat, so I can feed in numbers into my shader per entity. The next step was to figure out how to create entities and components to display these little circles... which is the subject of devlog #2.
This one's basically a DOTS cheat sheet where I boil down the main things you'd want to know how to do. If you ever felt like trying out Unity DOTS, I really, really hope it will save you some of the misery I've had. There are so many weird gotchas (you fool, you saved a temporary negative entity index!) but the good part is that it really forces you to learn what's going on in this thing.
That is a good part, right?
Anyway here's the milestone I reached today: cubes you can click on at like 200FPS. It will revolutionise gaming, I think.
Yeah so that looks like shit, but the code is cool, and now the code's there I can make something that looks cool instead of bad!
More updates soon, I have to work pretty hard at this thing. Have another concept sketch!
Tumblr media
19 notes · View notes
the-64th-gamer · 4 months
Text
Tumblr media
Ok so, explanation on how I'm gonna theoretically do cel shading (I know general shader stuff but I'm entering into an area that if I take the wrong step here its gonna be like 2fps)
So, my game is completely pathtraced besides certain objects being cel shaded. Due to this, there's no default lighting values I can clip the shading to and have it look natural. I need something that can dynamically decide what is gonna be the light and shaded parts of an object every frame.
First is to render the object in the path tracer without any textures.
Next is to, per object, render out a mask of just the mesh.
Third is to then use the mask on the original rendered image, and figure out the average color to use as the seperator between the light and dark spots (This can be additionally adjusted before being sent to the shader)
Lastly is to push this final color to the cel shader. The shader will then check the pathtraced pixels again and determine whether its lighter or darker than the final color, allowing it to be dynamically cel shaded.
Theres still a few additional things to implement. One is additionally checking for the average color value in the bright and dark areas after determining the midtone so that the light and dark areas can be tinted correctly. This doesn't technically need to be done in the same frame, nor does the average color need to be exactly checked every frame- as this won't change too often. Due to noise in the pathtracer, its also best that these checked values be Lerped over time.
So this is just my notes to take before my brain explodes. I have no clue if this is gonna tank performance on implementation. If this is gonna be on like 100 objects then I'm gonna have to downsample textures, schedule each object for checks on different frames, ect. I also gotta completely rewrite my ShaderGraph Min-Max shader in standard hlsl with these additional parameters. Whew its gonna be a lot.
Tumblr media
Fun fact, this dynamic cel shading was stupidly easy to do for Min-Max. I'd just sample the nearest reflection probe at its lowest LOD to get the average midtone.
5 notes · View notes
riku-log · 1 year
Text
模様生成の試行錯誤
ようやく模様生成の規則を決まりました。
Tumblr media
ShaderGraphで2つの模様を重ねて新しい模様を作るという仕組みになっています。
そこで、マテリアルのパラメータをすべてランダムにし、鯉の模様を生成してみました。
Tumblr media
まさに近寄りがたい雰囲気の持つ鯉が生成されました。
そして、三原色をベースにし、明度の高い色のみを使用というルールにしました。
Tumblr media
だいぶ明るい印象になりましたが、補色対比によって鮮やかすぎるように見えます。特に赤の色を持つ鯉と緑の色を持つ鯉が一緒に泳いでいると、チカチカする現象が発生します。
進化の初期集団として、色の種類が多いほど生成される鯉のバリエーションも豊富だと思いますが、全体の統一感を保つために、また調整を行いました。具体的にどういうふうになったのは、展示の際にお楽しみに。
2022.12.02
5 notes · View notes
antoinelhl · 4 months
Text
Someone asked me details on a shader I made for Bomb Club, that emulates choppy hand-drawn animations. So I made a Unity Shadergraph version of it, very appropriately named "Wobbly Sprite":
https://icloud.com/iclouddrive/0b61pV8iCR5qG1rchcNXWOYsw#Wobbly_Sprite
You can download it to see how it's made, or use it as-is in your game. An efficient way to spice up your sprites!
It's a very simple shader so perfs shouldn't be an issue. It works for both scene sprites and UI. Made for URP but should be easy to adapt.
For best results, keep the "Amplitude" parameter low, and consider adding a few pixels of padding around your sprites.
1 note · View note