Question related to "Shaping functions"

[ssgstarter]

Hi Patricio,

Thank you for this gorgous tutorial.

Unhappily I already stumble at the beginning (https://thebookofshaders.com/05/) when searching for explanations why the lines for the plotted green line were separted this way and what is the meaning of the lines in detail.

May I ask you for a hint?

Thanks.

[Valentin Radulescu]

Hey @ssgstarter, I've recently started reading this book and got stuck there as well so I'd like to share what helped me:

The first code example isn't very intuitive in my opinion, stuff like float y = st.x is hard to wrap your head around (y is x but we're also using st.y). I ended up rewriting the plot function so it takes in x and y instead and then it started making sense. My code and explanations on what's going on are here https://codepen.io/valentin/pen/MWWxgwr , maybe they'll prove useful.

Another thing that helped me is "running the code on paper": for different values of st.xy what does the plot function produce and how does that impact the output?

[ssgstarter]

Dear @RadValentin,

Awesome! It is exciting to have a look how you have realized this via ThreeJS. Yes, I think your code is much more readable ...

But, as for me as an absolute newbie with shaders without any C++ background, I have still some questions:

• How did you know that you have to use this vertex shader for ThreeJS like this? Here: https://threejs.org/docs/#api/en/renderers/webgl/WebGLProgram I read:
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

• When I compare your and the "original" code I realize the difference in line 24 where there is no type in the "original". Is this an error? Why the code works then? Is the type omitable?

• Similar line 16 with u_resolution

• Why is the plot function separated in such a way: one part outside, one part inside the main()

• How do you know what to use in the uniforms declaration within ThreeJS?

• Do you have any hints for my better understanding of the basics related to other shader 101s?

[Valentin Radulescu]

@ssgstarter Many of your questions are addressed in the appendix here https://thebookofshaders.com/appendix/04/ , that's what I read before starting and it helped a lot. Even if you don't have any experience with JS, it explains a lot of stuff that's taken for granted in the main book.

For the ones that the appendix doesn't answer completely:

How did you know that you have to use this vertex shader for ThreeJS like this?

I used the same Three.js setup that's described in https://thebookofshaders.com/04/ . I'm new to this myself so I don't know anything about vertex shaders yet or how position is sent :(

Why is the plot function separated in such a way: one part outside, one part inside the main()

You mean why does the plot function generate a value between [0, 1] but then we do more stuff with that value like using it to set a color in main? The author probably wanted to separate it from the main code so that you don't focus too much on it, he even says so in the book. I chose to keep that distinction but it's not mandatory. I find that the separation did help when trying to understand what's going on (subjective view).

Do you have any hints for my better understanding of the basics related to other shader 101s?

I'm still very new to this so it's hard to give advice. If I have something by the end of the month (doing shaders all of November) then I'll come back here and let you know.

Best of luck!

[ssgstarter]

@RadValentin Happy shader November! Thank you for your page four reminder. Yes, that ThreeJS example is useful but has unfortunately no comments at the lines in question why he was using this or that.

[krdh]

Hi, I'm also new to shader programming and got very confused by the following in Shaping functions - chapter5:

In the first example in chapter: 'Algorithmic drawing->Shaping functions' ,there is a line of code :
"return smoothstep(0.02, 0.0, abs(st.y - st.x));".

But according to the smoothstep() function definition in the book: quote "Results are undefined if edge0 ≥ edge1."

I think it should be replaced by something like "return ( 1.0 - smoothstep( 0.0, 0.02, abs(st.y - st.x)) )"

grtz.