Question Advice needed

Hi, I'm new-ish to Unity. I know enough to make scenes but am rather sketchy on finer details such as shadergraph. I'll try to be as concise as possible with my design problem, in hope that someone can suggest a route to a solution. My project is being made in the latest Unity HDRP, for VR

1. I have a scene where the player experiences a hallucinogenic episode. My initial idea was to keep things simple by attaching a semi-opaque sphere to the camera with a movie render texture. This one:

2. I know that the video quality needs to be around 2K but the clip above is only a test.

3. I suspect that rather than using a video, this effect could be performed more efficiently using shadergraph.

4.I have researched to see if shadergraph can do 'solarize', so far I haven't found any references to this effect

5. If there isn't a shadergraph solution, then I'm interested in any suggestions to overlay the kind of visual I've made over the players screen so that they have a 50/50 mix of game world and overlay. The sequence is designed to be quite short before transitioning to another scene, which is less complicated.

If anyone here can point me on the right path, I'd be very grateful. Thanks

 

two scrolling textures and 1 mesh will satisfy most of what you want

• Mesh having mirrored UV's to create patterns
• scrolling your b/w base pattern will create kaleidoscope pattern changes
  
• hue/value shift by scrolling a color pattern/gradient multiplicatively

 

Thanks for responding, would it be fair to say that the solarize effect like the one in the video isn't possible with shadergraph? I'm likely to try your suggestion, is the last point you mentioned a shadergraph technique (I'll assume that it is) If I were to look for a tutorial to get started, can you think of one which describes the method in more detail?
Thanks

 

solarize technically describes tone reversal during photographic processing and setting colors to negative or oscillating. That can be a novel algorithm using Absolute value and some simple mult/add nodes

Output = Absolute[2 * Color - 1]
this would make blacks and white both be 100% 'value' while grey would become black.
you can invert them (1 - Color) and have that LERP on/off over time.

as to what color you can compartmentalize each channel and processes them with separated variables/vectors to drive the change over time.

you can drive changes more discretely with timeline animated vectors driving some remap node
and static color overrides using a rudimentary gradient map or (LUT) lookUpTable


are you more interested in math/shader concepts and how to use/author shaders with the shadergraph nodes? (this video goes through many of em) The time node can drive the offset to pan a texture; VFX tend to just calling it scrolling

shadergraph is like any node based scripting,.. but i'm not sure how familiar you are with 3D/2D and CG scripting/maths so I can't tell how much you need to learn to use shadergraph [intermediate understanding with CG imagery basics for real-time game engines is required]. There is an RTVFX forum - Has visual breakdown thread by Shannon driving visuals artistically dealing with basic concepts such as a thumb like this

 

Thanks again for your input, I have something to dig into now and hopefully will figure something out. I'm a total shadergraph noob, so will follow the links you have recommended. Everything I've done with that function so far has just been watching youtube tutorials and doing what the person says. If I had to do it from my own experience and initiative, I wouldn't really know where to begin.

(You asked if I'm interested in the maths, the truthful answer is no, but its seemingly apparent that if I want to get the kinds of effects and skills that I need to make some of my artistic ideas working, I'm going to have to start taking more of an interest here. I was an A student for art and D for math. It's time to see if an old dog can actually learn new tricks)

 

That is pretty easy to set up in shader graph. It's just using a texture to index into a gradient and scrolling it based on time:

Just make sure to set the UV Scale to 1 to start with because it may initialize itself to 0 which will collapse the UVs to nothing and not sample the texture properly. And for the base texture since you only need the red channel, it is best to desaturate and normalize a texture in any photo editing program and then import it as a Single Channel (Red) texture so Unity will try to use a more appropriate texture compression method.

That will give you exactly what you asked for, but a more satisfying effect might be to apply the effect to the rendered scene itself, and that would look like:


The dot product is there to calculate the luminosity of the scene color which is used instead of a texture. The alpha is 1 here, but it is important to use a transparent shader so it gets rendered at a point that the render pipeline has the screen color texture available. Just render any mesh over the entire visual field. I haven't tested this one in HDRP (my project happens to be in URP which requires a checkbox be ticked) so there may be some specifics to getting HDRP to provide you the scene color, but the concept here is exactly the same as the first one.

 

Yes, that's necessary. High-level software doesn't expose artists to the low level technicality of computing but it's obviously there under the hood - Designing a shader in Shadergraph is lower-level than software like photoshop but frees artists to work visually without scripting/syntax shader hurdles.

You will be constructing the same shader logic machine through visual node based math operations and that shader drives the visual on the material mapped to your mesh.

The RTVFX forum (for now) will be a better place to explore concepts and build your toolset to learn this visual architecture.

Here: I'll include a few choice direct links to specific breakdowns to learn most of what you will be using.

This breakdown of scrolling and multiplying popularized from the Diablo 3 Bootcamp presentation at GDC 2013 (@25 min)

(be mindful that each multiplyTexture contributes overdraw, it is a texture fetch. For mobile you try to keep that <4)

It sparked a lot of verbose discussion @RTVFX since flipbooks (aka sprites sheets/video) use up a LOT of memory. That memory limit presents a problem with game scalability and at that time (2013) emerging 3D mobile games immediately hit that crux)
https://realtimevfx.com/t/i-want-to-recreate-the-shader-from-diablo-3-in-shaderforge/989/

Shader Forge in Unity (logic concepts are the same)

a Niagra post, layout is going to be a little different in Unity shadergraph but the logic is universal

You wont be needing particles; A static mesh as you imagined will suffice. It allows you to construct 1 mesh with a kaleidoscope UV layout : bilateral , rotation symmetry etc.... attach it to the camera so it fills the screen and you will have your system for delivering the visual.

Another RTVFX thread that is a great breakdown (thumbs included here for visual ref)






and this is good too for how to build complexity for motion (vertex motion but the ideas for pushing color changes is re-applicable)
https://blog.unity.com/technology/art-that-moves-creating-animated-materials-with-shader-graph


As for your initial 'kaleidoscope' hypnotic visual it is going to be portions of these concepts and actually quite a simple idea that you can easily apply.

B/W texture shape (scrolling) * color texture gradient (scrolling)
-> output -> apply material to symmetrical mesh
attached to cam

because what you want is basic execution (that's why my first post would seem so terse) once you digest the ideas your construction/scene will be surprisingly simple and artist friendly

 

You've been an excellent help and I'll be delving into your suggestions today. One thing I would like to check, before I risk venturing off on an unintended tangent, is in the context of using the cat image. Do the above paths apply to achieving the effect seen in the previously posted video? The image below is intended to be a semi transparent overlay to the scene, which hopefully will have a degree of the solarisation effect

I've made a quick mockup of the intended output as seen from the player's perspective here:

The triangular, tessellated pattern won't need to move around as it will hopefully be fixed to the camera as an overlay, but the effect of the triangular cat image shifting from colour positive to colour negative is fairly key. I'm not certain at this point whether I should focus on a single triangle or the tile which allows the pattern to tesselate.

 

the cat would just be part of your base texture; The entire thing gets manipulated by a second image to drive color shifting. Ostensibly it behaves like combining aspects of multiply/dodge layering in photoshop but with deeper access at your disposal to manipulate the outcome.

processing of the destination (e.g. imagery behind the hallucinogenic overlay) will need to go through its own processing. Your hallucinogenic overlay itself doesn't easily manipulate content it blends above with how you have depicted. Since i assume the player see's a landscape with mushrooms, the landscape/mushroom color shift is acting on their value range from a light direction which is different from a flat unlit texture of a cat... But that can be driven with extremely heavy post-process color gradating or using renderToTexture with shader processing.

you can also manually make a 'directional light' since it is a vector3 (XYZ value) and perform a Dot product to the mushroom objects surface normals. That sets up the value directionally and multiply a funky color gradient to this directional concept to make the 3D objects hypnotically strobe with colors washing across it at your discretion.

Everything you want to do is completely approachable, you will however need to dive in to the world of Real-time Computer Generated imagery and explore the tools to understand how to break down the tasks.

I'd recommend you should start with the first basic concept; the cat image on a triangle and get your mind around the paner/scrolling color texture which multiplies/adds with the image to drive a visual to your liking. that task alone will allow you to get a feel for making a shader in shadergraph.

 

Thanks again. The background scenery including the mushrooms will remain fairly plain, it's just how my photo editor blended the two layers to give an approximation of the effect. I'm about to fire up Unity so I'll take your advice and start playing with a simple triangle in order to avoid giving myself a migraine.

 

Hi folks. Torbach78, I think that there's a lot for me to learn and dive into with Shadergraph fundamentals, unfortunately due to a looming project deadline in December, with plenty of other technical issues to resolve, my deep dive into Shadergraph would be more beneficial when I have non-project time on my hands.
What I did do today was take a look at the screen-grabs provided by @Shane_Michael, as this seemed a simple enough process to follow. My end result is in the grab below:

As you can see, even though this image is static, the actual effect animates well (even though upside down) in the main preview window. It didn't actually work until I disconnected UV Scale Vector 4 from the graph, suddenly the texture appeared and the effect was very close to what I need.

On the downside, as you can see, the inspector threw up several errors. I thought I'd try and investigate the why's by deducing that maybe I should hit the compile and show code option, but this caused Unity to hang, so I needed to restart it.

Personally, in terms of getting closer to getting my animated shader problem looking closer to what I'd like it to be, this has been a productive exercise even though it's copying someone else's suggestion by rote, with little understanding of what I just did.

 

So here's test 1.
Taken wearing an Oculus Quest 2. I think it's a close enough match for the original texture effect in my initial help request. If I want to make this texture now 50% transparent so that scenery can be viewed behind it, is this something I set in the Shadergraph or in the material editor? I have taken a look at the later but obviously, when you set the material from opaque to transparent, all sorts of unwanted funky things happen, in opaque settings there aren't any options that I can see to manipulate how visible the material is or isn't.
Any pointers would be appreciated as today has got me to the 50% of what I wanted to achieve mark in problem solving. Thanks again.

 

Blending is the term for a transparent Source getting added with a Destination.

the master node Surface type in the pulldown has to be transparent for that operation to exist**
Alpha is the most straight forward that behaves like a layer in photoshop. as for other styles I did a verbose description recently here -
** The material contains surface type pulldown to choose what type in the actual scene.

Error division 0 i think could be the Mod node? Accounting for a zero being supplied before MOD would solve it but frankly I am not sure where that 0 comes from. Time = 0 any pixels from the Red channel that = black will = zero.. I guess you could add +1 to the time before it goes to the mod node, but I'm confused by that if that is where it comes from.

From a logic standpoint you can also utilize sine or 'FRAC' node in shadergraph processing the Time node (Fraction will only output the decimal portion of time). It won't be the same as Mod at all, imho mod was the more accurate choice for your visual.

i'll mention performance since this is VR - Blending adds fillrate/overdraw; Milliseconds to render a frame compounds quickly and hurt a 90FPS target for VR. This gets very hardware/software technical so learning it all is NOT artist friendly. But often it will be necessary to be aware of
https://docs.unity3d.com/Manual/OptimizingGraphicsPerformance.html

The only thing I'd now suggest is add a Float node and multiply it to Time.
Expose the Float as a property on the material (right-click 'convert to property') this tunes the speed of the cycling.

 

That is what I meant when I said to make sure you initialize that variable; it will be in the inspector. It is not strictly necessary, but I added it just so it would appear in the shader inspector so I could tweak the tiling easily in the editor.

The "division by zero" is actually in the interpolation function for the SampleGradient node. There are two errors 10 lines apart: one for the color interpolation and then again for the alpha. If you hit "View Generated Shader" you can see the code. You can safely ignore this error, but it is likely more efficient to replace the SampleGradient node with another Sample Texture 2D and then make a 1 x 4 pixel texture describing the gradient you want. With a texture you could also dispense with the Modulo (or Fraction) node entirely.

I had assumed you were on PC, but if you are targeting Quest 2, then you likely do not want to be using HDRP--the shaders are simply too complex and expensive. Stick to the basic Unlit shader graph for this effect. And as Torbach78 mentioned, transparency on mobile VR is expensive so doing a full screen transparent effect will have performance implications for your whole scene.

Just make sure in Graph Inspector the Surface option is set to Transparent so the Alpha output appears in the shader graph. Then set Alpha to 0.5 and it should work. Make sure the shader's Render Queue is set to Transparent so it renders at the correct time, but that really should be all you need.

 

i believe you may be looking for something commonly called "Mandlebrot"
this is a classic pattern with fractal spiny star effect called maxiter

cheers

 

Hi, I've just popped back. @Shane_Michael , The Quest is just the HMD being used for a PC link. The project is too graphics-heavy to be a Quest apk. I do appreciate yours and @Torbach78's input in terms of helping me get to where I have. The delay in response is purely down to working on other details which are less to do with shaders. My project is the final piece for a degree that I'm doing at present. For what it's worth, here's an image of a semi-perfomant scene I've got going on, which doesn't involve trippy pulsing cat textures.
It's been tough going honestly, learning on the job with Youtube as instructors. I've only managed to get confidence to set things up and use the Unity interface over the last month and as you are probably very aware, If I added another year of full time use, I'd have only probably scratched the surface of what it can do.

In the meanwhile, I'll have another tinker with the textures in Shadergraph sometime tomorrow.

DDEnvironment, thanks for that pointer, I'll have a little investigative dig around on that suggestion as it may well come in handy after the uni work has been handed in.

 

Hi Shane, I thought I'd drop by again as I've completed the first iteration of the project. Due to time constraints to get everything else done, I didn't get beyond making a semi successful test version of the shader. Shadergraph is still in my sights to do a proper deep-dive into, but it won't be until after project demo day (This coming Friday) Tomorrow, I'll be adding spit and polish into what I do have so far and I was wondering if you'd mind giving me an indication of how/where to add the alpha to the graph, please? You were very helpful at pointing me in the right direction, alas, with limited knowledge of Shadergraph, and limited time, a straight forward 'put this here and connect this here' kind of approach would really save hours of frustration. Thanks if you can.

 

depending on the shadergraph template (e.g. URP unlit master node), yes this can be a bit confusing because there is no indicator of a little 'pulldown' or (+) symbol button on the master nodes to let users know options can be added or removed

1. hover inside the Fragment portion of the master node output
2. (-space bar-) to bring up 'create node'
3. chose alpha to add it into the Fragment stack

often the alpha operation needs to remain outside of some complex logic; but normally just using a split towards the end helps ensure it is working cleanly.


just to be cleare on the Graph settings in the inspector make sure you have transparent and a blending mode to your liking



when/if you need a more sophisticated blend mode (which is likely) you will have to 'view generated shader' from the ShaderGraph object itself in your project folder.


from there you can save that Temp copy to your assets folder and look for the line that says "Blend" and give it the operations you want. I suscpect alpha is not what you will want..
likely you may want something like softadditive
Blend OneMinusDstColor One

 

Thanks so much. As soon as I've had my morning coffee, I'll get working on this