mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-03 23:15:23 +00:00
commit
695e602aac
@ -31,7 +31,7 @@ y = rand(i); //rand() è spiegata nel capitolo precedente
|
|||||||
//y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
//y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
||||||
"></div>
|
"></div>
|
||||||
|
|
||||||
In queste righe stiamo facendo qualcosa di simile a quello che abbiamo fatto nel capitolo precedente. Stiamo suddividendo un numero floating continuo (```x```) nel suo intero (```i```) e nelle componenti frazionarie (```f```). Usiamo [```floor()```](.../glossary/?search=floor) per ottenere ```i``` e [```fract()```](.../glossary/?search=fract) per ottenere ```f```. Poi applichiamo ```rand()``` per la parte intera di ```x```, che dà un valore random unico a ogni integer.
|
In queste righe stiamo facendo qualcosa di simile a quello che abbiamo fatto nel capitolo precedente. Stiamo suddividendo un numero floating continuo (```x```) nel suo intero (```i```) e nelle componenti frazionarie (```f```). Usiamo [```floor()```](../glossary/?search=floor) per ottenere ```i``` e [```fract()```](../glossary/?search=fract) per ottenere ```f```. Poi applichiamo ```rand()``` per la parte intera di ```x```, che dà un valore random unico a ogni integer.
|
||||||
|
|
||||||
Dopo di che si osservino le due righe commentate. La prima interpola ogni valore random in modo lineare.
|
Dopo di che si osservino le due righe commentate. La prima interpola ogni valore random in modo lineare.
|
||||||
|
|
||||||
@ -39,16 +39,16 @@ Dopo di che si osservino le due righe commentate. La prima interpola ogni valore
|
|||||||
y = mix(rand(i), rand(i + 1.0), f);
|
y = mix(rand(i), rand(i + 1.0), f);
|
||||||
```
|
```
|
||||||
|
|
||||||
Andate avanti e rimuovete il commento di questa linea per vedere che cosa succede. Utilizziamo la parte frazionale `f` per mischiare ([```mix()```](.../glossary/?search=mix)) i due valori random.
|
Andate avanti e rimuovete il commento di questa linea per vedere che cosa succede. Utilizziamo la parte frazionale `f` per mischiare ([```mix()```](../glossary/?search=mix)) i due valori random.
|
||||||
|
|
||||||
A questo punto del libro, abbiamo imparato che possiamo fare meglio d'una interpolazione lineare, giusto?
|
A questo punto del libro, abbiamo imparato che possiamo fare meglio d'una interpolazione lineare, giusto?
|
||||||
Ora provate a decommentare la riga seguente, che utilizza una interpolazione [```smoothstep()```](.../glossary/?search=smoothstep) invece di una lineare.
|
Ora provate a decommentare la riga seguente, che utilizza una interpolazione [```smoothstep()```](../glossary/?search=smoothstep) invece di una lineare.
|
||||||
|
|
||||||
```glsl
|
```glsl
|
||||||
y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
||||||
```
|
```
|
||||||
|
|
||||||
Tolto il commento, si noti che la transizione tra i picchi diventa armoniosa. In alcune implementazioni del rumore, troverete che i programmatori preferiscono creare le proprie curve cubiche (come la seguente formula) invece di utilizzare la funzione [```smoothstep()```](.../glossary/?search=smoothstep).
|
Tolto il commento, si noti che la transizione tra i picchi diventa armoniosa. In alcune implementazioni del rumore, troverete che i programmatori preferiscono creare le proprie curve cubiche (come la seguente formula) invece di utilizzare la funzione [```smoothstep()```](../glossary/?search=smoothstep).
|
||||||
|
|
||||||
```glsl
|
```glsl
|
||||||
float u = f * f * (3.0 - 2.0 * f ); // curva cubica personalizzata
|
float u = f * f * (3.0 - 2.0 * f ); // curva cubica personalizzata
|
||||||
@ -182,7 +182,7 @@ Nel seguente codice è possibile rimuovere il commento alla linea 44 per vedere
|
|||||||
|
|
||||||
<div class="codeAndCanvas" data="simplex-grid.frag"></div>
|
<div class="codeAndCanvas" data="simplex-grid.frag"></div>
|
||||||
|
|
||||||
Un altro miglioramento introdotto da Perlin con il **Rumore Simplesso**, è la sostituzione della Curva Cubica di Hermite ( _f(x) = 3x^2-2x^3_ , che è identica alla funzione [```smoothstep()```](.../glossary/?search=smoothstep) ) con una Curva Quintica di Hermite ( _f(x) = 6x^5-15x^4+10x^3_ ). In questo modo entrambe le estremità della curva sono più "piatte" così che ogni limite si unisce con grazia con quello successivo. In altre parole si ottiene una transizione più continua tra le celle. Si può osservare ciò decommentando la seconda formula nel seguente esempio grafico (o osservando le [due equazioni fianco a fianco cliccando qui](https://www.desmos.com/calculator/2xvlk5xp8b)).
|
Un altro miglioramento introdotto da Perlin con il **Rumore Simplesso**, è la sostituzione della Curva Cubica di Hermite ( _f(x) = 3x^2-2x^3_ , che è identica alla funzione [```smoothstep()```](../glossary/?search=smoothstep) ) con una Curva Quintica di Hermite ( _f(x) = 6x^5-15x^4+10x^3_ ). In questo modo entrambe le estremità della curva sono più "piatte" così che ogni limite si unisce con grazia con quello successivo. In altre parole si ottiene una transizione più continua tra le celle. Si può osservare ciò decommentando la seconda formula nel seguente esempio grafico (o osservando le [due equazioni fianco a fianco cliccando qui](https://www.desmos.com/calculator/2xvlk5xp8b)).
|
||||||
|
|
||||||
<div class="simpleFunction" data="
|
<div class="simpleFunction" data="
|
||||||
// Curva Cubica di Hermite. Identica alla funzione SmoothStep()
|
// Curva Cubica di Hermite. Identica alla funzione SmoothStep()
|
||||||
|
10
11/README.md
10
11/README.md
@ -31,7 +31,7 @@ y = rand(i); //rand() is described in the previous chapter
|
|||||||
//y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
//y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
||||||
"></div>
|
"></div>
|
||||||
|
|
||||||
In these lines we are doing something similar to what we did in the previous chapter. We are subdividing a continuous floating number (```x```) into its integer (```i```) and fractional (```f```) components. We use [```floor()```](.../glossary/?search=floor) to obtain ```i``` and [```fract()```](.../glossary/?search=fract) to obtain ```f```. Then we apply ```rand()``` to the integer part of ```x```, which gives a unique random value for each integer.
|
In these lines we are doing something similar to what we did in the previous chapter. We are subdividing a continuous floating number (```x```) into its integer (```i```) and fractional (```f```) components. We use [```floor()```](../glossary/?search=floor) to obtain ```i``` and [```fract()```](../glossary/?search=fract) to obtain ```f```. Then we apply ```rand()``` to the integer part of ```x```, which gives a unique random value for each integer.
|
||||||
|
|
||||||
After that you see two commented lines. The first one interpolates each random value linearly.
|
After that you see two commented lines. The first one interpolates each random value linearly.
|
||||||
|
|
||||||
@ -39,16 +39,16 @@ After that you see two commented lines. The first one interpolates each random v
|
|||||||
y = mix(rand(i), rand(i + 1.0), f);
|
y = mix(rand(i), rand(i + 1.0), f);
|
||||||
```
|
```
|
||||||
|
|
||||||
Go ahead and uncomment this line to see how this looks. We use the [```fract()```](.../glossary/?search=fract) value store in `f` to [```mix()```](.../glossary/?search=mix) the two random values.
|
Go ahead and uncomment this line to see how this looks. We use the [```fract()```](../glossary/?search=fract) value store in `f` to [```mix()```](../glossary/?search=mix) the two random values.
|
||||||
|
|
||||||
At this point in the book, we've learned that we can do better than a linear interpolation, right?
|
At this point in the book, we've learned that we can do better than a linear interpolation, right?
|
||||||
Now try uncommenting the following line, which uses a [```smoothstep()```](.../glossary/?search=smoothstep) interpolation instead of a linear one.
|
Now try uncommenting the following line, which uses a [```smoothstep()```](../glossary/?search=smoothstep) interpolation instead of a linear one.
|
||||||
|
|
||||||
```glsl
|
```glsl
|
||||||
y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f));
|
||||||
```
|
```
|
||||||
|
|
||||||
After uncommenting it, notice how the transition between the peaks gets smooth. In some noise implementations you will find that programmers prefer to code their own cubic curves (like the following formula) instead of using the [```smoothstep()```](.../glossary/?search=smoothstep).
|
After uncommenting it, notice how the transition between the peaks gets smooth. In some noise implementations you will find that programmers prefer to code their own cubic curves (like the following formula) instead of using the [```smoothstep()```](../glossary/?search=smoothstep).
|
||||||
|
|
||||||
```glsl
|
```glsl
|
||||||
float u = f * f * (3.0 - 2.0 * f ); // custom cubic curve
|
float u = f * f * (3.0 - 2.0 * f ); // custom cubic curve
|
||||||
@ -154,7 +154,7 @@ For you to practice:
|
|||||||
|
|
||||||
## Improved Noise
|
## Improved Noise
|
||||||
|
|
||||||
An improvement by Perlin to his original non-simplex noise **Simplex Noise**, is the replacement of the cubic Hermite curve ( _f(x) = 3x^2-2x^3_ , which is identical to the [```smoothstep()```](.../glossary/?search=smoothstep) function) with a quintic interpolation curve ( _f(x) = 6x^5-15x^4+10x^3_ ). This makes both ends of the curve more "flat" so each border gracefully stitches with the next one. In other words, you get a more continuous transition between the cells. You can see this by uncommenting the second formula in the following graph example (or see the [two equations side by side here](https://www.desmos.com/calculator/2xvlk5xp8b)).
|
An improvement by Perlin to his original non-simplex noise **Simplex Noise**, is the replacement of the cubic Hermite curve ( _f(x) = 3x^2-2x^3_ , which is identical to the [```smoothstep()```](../glossary/?search=smoothstep) function) with a quintic interpolation curve ( _f(x) = 6x^5-15x^4+10x^3_ ). This makes both ends of the curve more "flat" so each border gracefully stitches with the next one. In other words, you get a more continuous transition between the cells. You can see this by uncommenting the second formula in the following graph example (or see the [two equations side by side here](https://www.desmos.com/calculator/2xvlk5xp8b)).
|
||||||
|
|
||||||
<div class="simpleFunction" data="
|
<div class="simpleFunction" data="
|
||||||
// Cubic Hermite Curve. Same as SmoothStep()
|
// Cubic Hermite Curve. Same as SmoothStep()
|
||||||
|
Loading…
Reference in New Issue
Block a user