Shader Coding: KIFS Fractals explained!
HTML-код
- Опубликовано: 11 окт 2024
- In this video I'll explain how to make a Koch Snowflake fractal. The Koch snowflake is an example of a kaleidoscopic iterated function system (KIFS) fractal.
Twitter: @The_ArtOfCode
Facebook: / theartofcode
Patreon: / theartofcode
ShaderToy: www.shadertoy....
PayPal Donation: paypal.me/thea...
If you are new to shader coding then check out my absolute beginners tutorial:
• Shadertoy for absolute...
Live version:
www.shadertoy....
Truchet mirror tiling solution:
www.shadertoy....
Music:
Verve - Assaf Ayalon
![VENEZUELA vs. ARGENTINA [1-1] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 9](http://i.ytimg.com/vi/SJfoPdeOPCQ/mqdefault.jpg)
You have just melted my brain. It's such a wildly different approach from thinking about drawing lines.
I only just discovered your channel last week and have been binging all your shader videos, they're at just the right difficulty level, please don't stop making them!
Glad you liked it!
..you said it all.. so I won't say it again
This is mind blowing. I guess I will see this video 10 times to master this concepts.
Mind blown! Came here after making my first shader following a tutorial by Kishimisu and they link you channel. This shit is crazy!! Thanks, new doors opened.
You didn't just bend lines, you've bent my mind!
Very exciting explanation! It would be interesting to watch your implementation of something like a water shader. Thank you very much!
Completely mind-blowing! You are right, These are the right words for this! 🙏
Your best teacher in webglsl , I like this!
So wonderful math, programming and art combined. Fun magic
Wow, great explanation of some pretty complicated stuff. Thanks again.
You just can't really appreciate the beauty of arts as much as when you grasp the science and math behind them...
Agreed!
Priceless as always bud.......simply amazing stuff.
Beautiful stuff! Thanks so much! That's so amazing!
Awesome stuff! I've integrated this effect in my app Mirror Lab (Android). Thanks so much for all the insights!
Love your greate videos of explaining all details in such an easy understanding way! You are so greate!
Absolutely mind-blowing stuff!!
Teenage me: Fuck maths, never gonna need all that stuff.
Me today: Well, FML.
thank you so much for this video, helped me a lot in learning shaders
this channel is gold
please make videos more often beacuse i love them
He's probably busy.
Go fund him at Patreon!
@@xazzzi yeah if i wasnt broke
fund him!
Thanks so much, this is some really good stuff here on this channel.
Check out what i did based on ideas from this video and some previous:
www.shadertoy.com/view/3sy3Dh
Nice!
Thanks for the vid. I was having a hard time interpreting code for a recursive tetrahedron. This helped bunches.
Awesome! I always look forward to your videos.
yeah this melted my brain, wow.
Oh my goodness, christmas has come early!!
Great video and introduction thanks
Kifs look incredible in 3d raymarched shaders!
Yeah they do! Be sure to share it you make something cool.
@@TheArtofCodeIsCool Will do! I'm thinking about making a standalone web page with sliders to change the values/contents of the loop so people can experiment with KIFS if they don't know how to code.
@@sneakyfatcat that's a great idea. I would love to see it.
martijn thank you so much for everything you do. I have been watching your videos for hours a day every day for the past week. you explain everything so well and make even the most abstract and convoluted concepts feel understandable. so grateful to be able to watch and absorb a fraction of your years of experience and knowledge!! just gotta ask after watching all these sips, what's your favorite tea?? :)
Aww thanks! I'm glad you get something out of my video. My fav tea? Hmm probably Earl Grey. 🤠
@@TheArtofCodeIsCool what a classic! just like your shaders, the flavours in an earl grey are much greater than the sum of its parts :) plus, earl grey with a pastry is just one of the best delights the world has to offer. have a great day!
Very cool video, you open my eyes 👀, thank you )))
like your every video, big wings!
This was incredibly helpful - thanks!
Amazing!
Awesome as always ! Thank you !
I told my girlfriend at the texture sampling part that here comes the crazy part. She asked what was it then until this point?
I said, "he's drawn a line".
Hahaha... well I hope it was an interesting and informative 30 minutes of drawing a line ;)
Amazing Tutorial! Thanks!
Beautiful stuff!
Thank you! Cheers!
As per usual, great stuff!
Mind f blowing amazing man
Thanks a lot for your video !
excelente trabajo del fractal!!!
Great tutorial! Many thanks! ^^
Awesome!! thank you
33:00 DMT hyperspace
Actually there is a function for that at 6:50 : the reflect() fuction :)
Hmmm yes.. but it wouldn't help much in this case because we still need to be able to only fold one side and not the other.
@@TheArtofCodeIsCool
uv.x=abs(uv.x)-.5;
if(dot(uv,n)
@@stephaneduhamel7706 What does it matter? Stop being picky.
@@pendergastj it doesn't matter; i was just informing people.
I don't know if you would consider it, But I would totally buy a course of yours at udemy.
Never looked into Udemy. Maybe I should?
@@TheArtofCodeIsCool there are Just one shader course there, but not very deep
Awesome
why do you make edge0 > edge1 in your smoothstep function? when the spec says doing that results in undefined behaviour?
Myeah, I do it because it works and it is neater than writing 1-smoothstep. I would imagine that they'll change the spec at some point to reflect this.
@@TheArtofCodeIsCool undefined behaviour is open to interpretation, Nvidia might choose to make it work the otherway around, AMD might decide to do something else. I would do 1 - smoothstep just to be safe especially if someone is going to copy your code and run it on god knows which platform.
@@joebhomenye You are right, but I'm not building rocket engines here so until I see this breaking things I will just do it this way.
It is very difficult!! It is very difficult for me to understand all those calculations for the reflex. And it seems impossible to me that one would come up with this out of nowhere! I'll try to watch the video more times to see if I can finish understanding it... There really comes a time when you understand it, how can you understand a length(uv)?? Thank you very much for these videos!
uv is a vector2 (x, y) that indicates a position on the screen. length(uv) is the length of that vector, which is the distance to the origin.
12:00 From this position my brain stopped
Same actually. I'm having trouble understanding what uv -= n*d*2 is for/really does. The rest of the video I can follow no problems. I think this is just one spot where the author didn't explain the context of what/why we do this step. A bit of assumed knowledge perhaps? Hard for a first time fractaller though.
Okay, I just watched this portion through a couple more times from earlier on and he does describe the mirroring over the line as the goal and the rest is clicking now.
yep me too
основа основ понята
How to fix the like button?
Source code ?
I wrote a shader to help me understand what is going on, check it out if you need some visualization of the mirroring/symmetry
www.shadertoy.com/view/wlffRj
Thanks for the tutorial!
am I the only one who went to open the door at 0:32 ?
used your noise algorithm making crude wood effect in unity
brought in world position to replace the uvs
Shader "Custom/OldPaint" {
Properties {
_Color ("_Color", Color) = (1,1,1,1)
_Color2 ("_Color2", Color) = (1,1,1,1)
_MainTex ("Albedo (RGB)", 2D) = "white" {}
_Glossiness ("_Glossiness", Range(0,1)) = 0.5
_Glossiness2 ("_Glossiness2", Range(0,1)) = 0.5
_Metallic ("Metallic", Range(0,1)) = 0.0
_Metallic2 ("Metallic2", Range(0,1)) = 0.0
_Scale("_Scale",Range(-10,10))=1
_Rough("_Rough",Range(-1,1))=1
_MorePaint("_MorePaint",Range(-1,1))=1
}
SubShader {
Tags { "RenderType"="Opaque" }
LOD 200
CGPROGRAM
// Physically based Standard lighting model, and enable shadows on all light types
#pragma surface surf Standard fullforwardshadows
// Use shader model 3.0 target, to get nicer looking lighting
#pragma target 3.0
sampler2D _MainTex;
struct Input {
float2 uv_MainTex;
float3 worldPos;
float3 worldNormal;
};
half _Glossiness,_Glossiness2;
half _Metallic,_Metallic2;
float _Scale,_Rough,_MorePaint;
fixed4 _Color,_Color2;
float N21(float3 p) {
return frac(sin(p.x*100+p.y*6574+p.z*4147)*5647);
}
float SmoothNoise(float3 uv) {
float3 lv = frac(uv);
float3 id = floor(uv);
lv = lv*lv*(3.-2.*lv);
float bl = N21(id);
float br = N21(id+float3(1,0,0));
float b = lerp(bl, br, lv.x);
float tl = N21(id+float3(0,1,0));
float tr = N21(id+float3(1,1,0));
float t = lerp(tl, tr, lv.x);
float vfront= lerp(b, t, lv.y);
float ubl = N21(id+float3(0,0,1));
float ubr = N21(id+float3(1,0,1));
float ub = lerp(ubl, ubr, lv.x);
float utl = N21(id+float3(0,1,1));
float utr = N21(id+float3(1,1,1));
float ut = lerp(utl, utr, lv.x);
float vback= lerp(ub, ut, lv.y);
return(lerp(vfront,vback,lv.z));
}
float SmoothNoise2(float3 uv) {
float c = SmoothNoise(uv*4);
// don't make octaves exactly twice as small
// this way the pattern will look more random and repeat less
c += SmoothNoise(uv*8.2)*.5;
c += SmoothNoise(uv*16.7)*.25;
c += SmoothNoise(uv*32.4)*.125;
c += SmoothNoise(uv*64.5)*.0625;
c /= 2;
return c;
}
// Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
// See docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
// #pragma instancing_options assumeuniformscaling
UNITY_INSTANCING_BUFFER_START(Props)
// put more per-instance properties here
UNITY_INSTANCING_BUFFER_END(Props)
void surf (Input IN, inout SurfaceOutputStandard o) {
float3 uv = IN.worldPos.xyz*_Scale;
uv.y*=.5;
//uv+=(_Time.z*.01);
float noise = SmoothNoise2(uv);
float paint=round((noise+_MorePaint)*2)/2;
paint=saturate(pow(paint,10));
float paint2=round((noise+_MorePaint-.1)*2)/2;
paint=saturate(paint+paint2*.5);
float noise1 = SmoothNoise2(uv+float3(.01,0.0,0));
float noise2 = SmoothNoise2(uv+float3(0,.01,0));
float noise3 = SmoothNoise2(uv+float3(0,0,.01));
float3 Rustal=lerp(_Color2*noise,_Color2,.3);
float3 Paintal=lerp(_Color,Rustal,1-(paint2));
o.Albedo = lerp(Rustal,Paintal,paint);//;
o.Metallic = lerp(_Metallic2,_Metallic,paint);
o.Smoothness = lerp(_Glossiness2,_Glossiness,paint);
float3 vNoiseMal=float3(noise1-noise,noise3-noise,noise2-noise);
vNoiseMal/=length(vNoiseMal);
vNoiseMal+=1;
vNoiseMal/=2;
vNoiseMal=lerp(vNoiseMal,float3(.5,.5,.5),paint*.95);
//vNoiseMal+=float3(noise3-noise,noise1-noise,noise2-noise);
//vNoiseMal+=float3(noise2-noise,noise3-noise,noise1-noise);
//vNoiseMal=lerp(vNoiseMal,float3(0,1,0),.9);
vNoiseMal=lerp(float3(.5,.5,.5),vNoiseMal,_Rough);
o.Normal=UnpackNormal(float4(vNoiseMal,1));
}
ENDCG
}
FallBack "Diffuse"
}
Cool, you got a screenshot?
www.jamesflowerdew.com/digital.php?artwork=woodeffect
It's actual use isn't ready yet, but here's a demo. I put it on my site, if there is a better way of getting an image to you shout.
@@TheArtofCodeIsCool your tutorial about noise answered a ten year question for me and I pretty much have a stream of shaders that used to use two animated noise textures.
In homage I've pretty much built a uv free game.
while I'm here I'm told sin is really costly but from what I can see my fairly un-optimised levels are pretty fast covered in it, begging the question how many sins are equal to a tex2d.
@@jamesfforthemasses I'm not sure, but I think a sin is much cheaper than a texture fetch. I wouldn't be surprised if you can do 20 sins for the cost of on texture fetch.
just to say can confirm this now, stuck a tex2D into a raymarcher terrain for a heightmap and some results are lovely, but compiling time goes through the roof, and the result is lovely but very low performance.