Smooth Gradient Effect With Three.js Shaders (GLSL) For Beginners

Рет қаралды 4,999

Жыл бұрын

In this video we'll create a smooth gradient effect with shaders. We'll try to replicate the Blender's Color Ramp Node. This can be a fantastic exercise if you're a beginner in shaders.
Starter Files:
github.com/visionary-3d/blend...
Final Color Ramp Macro:
github.com/visionary-3d/utils...
Interesting Related Shaders 😋:
www.shadertoy.com/view/mslXDH
www.shadertoy.com/view/tdGBDt
Visionary 3D:
Twitter Account:
/ 3d_visionary
Shaders Crash Course:
• Three.js Shaders (GLSL...
My Shaders Playlist:
• Shaders
Three.js Boilerplate:
github.com/visionary-3d/three...
#threejs
#3d
#3danimation
#glsl

Пікірлер: 17

@visionary_3_d Жыл бұрын

Interesting Related Shaders 😋: www.shadertoy.com/view/mslXDH www.shadertoy.com/view/tdGBDt You can further improve the implementation by replacing line 6 of the macro with this (Replace the if statement with mix for better performance) index = int(mix(float(index), float(i), float(isInBetween))); \ You can checkout my other shader related videos here: kzfaq.info/sun/PLTEbuqk52pICikiHfD-a52dxEav5UqMLy

@Sepkov 9 ай бұрын

Dude this is awesome. Thanks for the video.

@ssshen5807 Жыл бұрын

I look forward to you converting common Blender nodes into GLSL code.

@visionary_3_d Жыл бұрын

Great idea for a series... 😉

@reecedevs Жыл бұрын

Loving these videos bro... really helping me out with learning shaders 👌

@visionary_3_d Жыл бұрын

I'm happy to hear that 😃

@PetrandoRichard 17 күн бұрын

Hi, there. Thank you for the nice tutorial. Edit : problem fixed. 😊

@visionary_3_d 16 күн бұрын

I'm glad my videos are somewhat helpful. Macros are supported in GLSL. So perhaps you're not using them correctly. To understand macros in the best possible way see how macros are used in C++. They work exactly the same in GLSL. See this: kzfaq.info/get/bejne/oJmdjM6alrnWe3k.html

@ryuske_edits Жыл бұрын

hey can you please answer me when I import a glowing cube with gradient effect on it into from blender to three js, it appears white, what might be the broblem?

@visionary_3_d Жыл бұрын

Checkout this video: kzfaq.info/get/bejne/oLJ7ZLZh38fXin0.html Join these discord servers and ask technicall questions in their help channels. People will help 😇

@richardramirez5746 2 ай бұрын

just a question... you know a distance function that allows to show a transition between a material color and a predefined color, so that it allows changing color with a mouseover event... in other words, once I position my mouse on the mesh (let's say it's blue), it turns into red only in a portion (circular portion centered in mouse position), so having a transition between both colors ...

@atomauro Жыл бұрын

i love you papito lindo

@-________9732 Жыл бұрын

Hello. Please tell me - I'm trying to study shaders in order to learn how to divide a video into many randomly mixed pieces like an unassembled mosaic, and for this I was advised on the touch designer forum to study shaders and I started studying them in GLSL, but something doesn't work out. Do I need to learn Java or is it better to learn GLSL?

@visionary_3_d Жыл бұрын

Ok understood. You need to pick a good workflow in order to achieve this effect. I'm pretty sure there are plugins out there that do this kind of thing in after effects or some other video editing software. But if you want to write the mathematical algorithm for this yourself you need to learn shaders. Shaders can be used in different workflows. You might be able to ahieve the effect that you want in blender with geometry nodes for example. The math is the same but you won't need to write code. All of this depends on what you already know. And also the effect that you want to achieve.

@-________9732 Жыл бұрын

@@visionary_3_d In general, I used to want to achieve this in any way, but over time, as I studied shaders, I realized that the shaders themselves became interesting to me. I hope that I will learn how to do it in shaders =).

@visionary_3_d Жыл бұрын

@@-________9732 Cool. To learn shaders, you can explore vornoi noise as a start and see how it's implemented in shaders (use shadertoy.com) for reference. Voronoi Noise allows you to break the video into smaller pieces.

@-________9732 Жыл бұрын

@@visionary_3_d Thank you very much for the advice, I will try to study it.👍