Using noise in shaders (texture blending)

Подписаться 16 тыс.

Просмотров 8 тыс.

50% 1

0:00 Intro
0:30 What is noise?
1:48 Setup
3:23 Vertex Shader
3:50 Reading textures
4:27 Blending with mix
5:01 Reading noise values
5:39 Controlling the noise
7:07 Scaling the noise
7:58 Conclusion
Code from this video:
editor.p5js.org/BarneyCodes/s...
Introduction to shaders: • Introduction to shader...
Examples used:
“Base warp fBM” by trinketMage: www.shadertoy.com/view/tdG3Rd
“contour noise” by DeltaT: www.shadertoy.com/view/dsGfRz
"Cloud perturbations" by felipetovarhenao: www.shadertoy.com/view/mdcBDl
More resources on noise:
Procedural shader noise: thebookofshaders.com/11/
Some different noise algos: lodev.org/cgtutor/randomnoise...
Perlin noise wiki article: en.wikipedia.org/wiki/Perlin_...
Textures used in this video:
Dirt texture: opengameart.org/content/simpl...
Grass texture: opengameart.org/content/10-se...
Noise textures give programmers a way to introduce random and organic elements into their effects. In this video I'll show you how you can use noise textures in a shader to create a simple texture blending effect.
There are so many ways that you can use noise to create awesome looking visuals, so hopefully you find this video useful and pick up a few tricks!
Follow me:
Twitter: / barneycodes
Reddit: / barneycodes
Support the channel: www.youtube.com/@BarneyCodes/...
#glsl #p5js #shaders

Опубликовано:

19 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 16

@BarneyCodes 8 месяцев назад

If you'd like to see what else I'm working on, it would be great if you could wishlist my game Star Mining Co. on Steam! s.team/a/2584800/ What shader effect would you like to see next?

@theman7050 7 месяцев назад

Is there a way to contact you man?

@BarneyCodes 7 месяцев назад

My username is barneycodes on discord, feel free to reach out there! Otherwise you can email me at barney@barneycodes.com

@Tritoon710 6 месяцев назад

Facing Ratio & Dot Product Thanks

@BarneyCodes 6 месяцев назад

I'm planning on looking at some basic lighting in an upcoming video so should cover this then! Thanks for the comment!

@literallyaperson7125 8 месяцев назад

nice

@BarneyCodes 8 месяцев назад

Thanks!

@DeniseNepraunig 6 месяцев назад

Really great explanation. I love the way you go through this, showing all the code changes and variants! Top notch editing. Thanks man!

@BarneyCodes 6 месяцев назад

Thank you so much! Glad you liked it!

@openlink9958 4 месяца назад

0:08 it looks like a shader that replicates how cells look like. Every "cell" (circle) is separated from adjacent circles but all of them are together, on a similar way how skin cells would be (or any kind of large cell structure really)

@BarneyCodes 4 месяца назад

That's voronoi noise! It pops up in nature quite a lot which is really cool! The basic idea behind it is that each pixel is coloured based on the distance to the nearest "seed" point, which is why you get those shaded blob regions!

@theman7050 7 месяцев назад

Barney at it again!!! 🎉 Wow I used to think generating noise in code is more efficient. But using a texture for it comes as a surprise man. Thanks :)

@BarneyCodes 7 месяцев назад

It's probably slightly more nuanced then "it's always better to use a texture", but things like Perlin and Worley noise can be a bit expensive to calculate every frame. On the other hand, white noise can be really quick because you can just take a hash of the position vector to get a "random" value. Thanks for your comment!

@number3boo 8 месяцев назад

So that's how they do it

@tepiku 6 месяцев назад

Thanks for the video. Really well explained. 3:38 The thing with p5.js is that the coordinates 0,0 are located in the top left corner instead of the bottom left.

@BarneyCodes 6 месяцев назад

Thanks! I sort of assumed that the underlying image data wouldn't be affected by that but I guess I was wrong!