GLSL Shaders 2
- Amelia Zhu
- Dec 30, 2020
- 2 min read
Updated: Jan 13, 2021
Creative coding
Knowledge
1. noise generators
2. Vertex shaders
3. Pseudorandom numbers in fragment shaders
Work 1
- Locate the randfm function.
- Find where the function is called. Alter the frequency and amplitude. What happens
to the patterns at high amplitude? Write a short paragraph describing your
observations.
- Can you work out why this is happening? Try to reason about the process and write
it down.
The randfm function:
float randfm(float x,float freq, float amp) { return sin((cos(x*freq)*amp)); }
1. low freq, low amp
float x = randfm(pos.y,2.,2.);
float y = randfm(pos.x,2.,2.);
If freg and amp are both small, the image
looks enlarged a lot,If the value is too small,
the image will become very large, so that the
screen is gray and even white.
float x = randfm(pos.y,1.,1.);
float y = randfm(pos.x,1.,1.);
2. high freq, low amp
float x = randfm(pos.y,20.,10.);
float y = randfm(pos.x,20.,10.);
The image looks reduced and enlargedIf the
freg value increases a lot, the image will look
denser.
3. low freq, high amp
float x = randfm(pos.y,1.,10000.);
float y = randfm(pos.x,1.,10000.);
The number of matrix points increases, and
when the frequency value is low and the
amp value is very large, the screen looks
more like an image generated by noise.
4. high freq, high amp
float x = randfm(pos.y,1000.,1000.);
float y = randfm(pos.x,1000.,1000.);
The image matrix increases and becomes
denser. Make the picture look like a
uniformly distributed.
Work 2
- What are the main differences between this rand function, and the one in the
previous document?
- What it the dot product operation doing? Why is the outcome so different to that in
the first exercise? Consider how many outputs and inputs there are. Does this make
a difference?
- Alter the rand function to make sure it has frequency and amplitude arguments,
similar to the first example. Now change these values and study their effects.
- the first randfm function:
float randfm(float x,float freq, float amp) {
return sin((cos(x*freq)*amp));
}
- the second rand function:
float rand(vec2 pos) {
return sin(sin(dot(pos,vec2(mouse * 100000.)))* mouse.x * 10000000.);
}
main differences: the first one use Amplitude modulation，
the second one use Frequency modulation
2. Dot product operation controls the size of the vector
Work 3
In the example below, we have shaded a geometry using a light, exactly as I describe in the lecture.
- Fork the document and make changes so that you can rotate the lighting.
- Look at how the vertex shader is setting the value of the normal.
- Make a note of all the steps required to pass this value to the Fragment shader.
- Try to generate a random value and add it to the normal - what is another name for
this process? Add material
Now look at this document
- What's going on? Can you rotate the sphere whilst retaining the lighting characteristics correctly?
Hozzászólások