mirror of
https://github.com/patriciogonzalezvivo/thebookofshaders
synced 2024-11-09 19:10:24 +00:00
updated introductory texts
This commit is contained in:
parent
2db090b691
commit
014504b9f5
@ -1,9 +1,8 @@
|
||||
# Shader Gallery
|
||||
|
||||
## Advanced
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
## Advanced examples
|
||||
|
||||
In this section, we gathered relatively advanced examples from different chapters. Try if you can read and understand all the examples here to test yourself.
|
||||
|
||||
<div id="advanced-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("advanced")</script>
|
||||
|
@ -2,9 +2,9 @@
|
||||
|
||||
## Shapes
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
Let's look at how to draw simple shapes in a parallel procedural way. In a nutshell, all you need to do is to determine if each pixel belongs to the shape you want to draw or not, and apply different colors accordingly. You can use coordinate system like a grid paper to draw rectangles and squares. We'll look at more advanced concept called distance field to draw more complex shapes.
|
||||
|
||||
Read the chapter [Shapes](../07/)
|
||||
Read [Shapes](../07) to learn more.
|
||||
|
||||
<div id="c07-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c07")</script>
|
||||
|
@ -1,10 +1,11 @@
|
||||
# Shader Gallery
|
||||
# Shader Gallery
|
||||
|
||||
## Matrix
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
Matrix is a very powerful tool for manipulating vectors. By mastering how to use matrices, you can freely translate, scale and rotate shapes. Since the technique can be equally applied to anything expressed by vectors, we will look at many more advanced use of matrices later in this book.
|
||||
Matrices may look complex at a first glance, but you'll find it very handy and useful as you get used to the concept. Let's practice here and learn basics with simple examples.
|
||||
|
||||
Read the chapter [Matrix](../08/)
|
||||
Read [Matrix](../08) to learn more.
|
||||
|
||||
<div id="c08-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c08")</script>
|
||||
|
@ -2,9 +2,9 @@
|
||||
|
||||
## Patterns
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
Repetitive patterns are perfect theme for computational sketching. Different from conventional way of drawing, shaders lets you draw everything parallelly at once. Instead of repeating the same procedure many times, you will wrap and repeat the "space". Sounds like Sci-Fi? Let's find out what it really means.
|
||||
|
||||
Read the chapter [Patterns](../09/)
|
||||
Read [Patterns](../09) to learn more.
|
||||
|
||||
<div id="c09-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c09")</script>
|
||||
|
@ -2,9 +2,9 @@
|
||||
|
||||
## Random
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
Life is boring if everything was predictable. Though nothing is truly random in computers, we can create pseudo-randomness that looks totally unpredictable using simple tricks to create more interesting patterns and behaviors.
|
||||
|
||||
Read the chapter [Random](../10/)
|
||||
Read [Random](../10) to learn more.
|
||||
|
||||
<div id="c10-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c10")</script>
|
||||
|
@ -2,9 +2,10 @@
|
||||
|
||||
## Noise
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
How can we create more natural looking textures like surface of the roads, rocks, trees and clouds? Noise function is the answer.
|
||||
Since Ken Perlin invented his first noise algorithm in 80s, the technique has been extensively used throughout computer graphics and simulations. Even if you have never heard of the name, it's not possible you have never seen it. Let's look step by step at how the function is built and works. We also cover more efficient version of the algorithm called simplex noise.
|
||||
|
||||
Read the chapter [Noise](../11/)
|
||||
Read [Noise](../11) to learn more.
|
||||
|
||||
<div id="c11-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c11")</script>
|
||||
|
@ -62,7 +62,9 @@ Read [Colors](../06) to learn more.
|
||||
|
||||
### Shapes
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
Let's look at how to draw simple shapes in a parallel procedural way. In a nutshell, all you need to do is to determine if each pixel belongs to the shape you want to draw or not, and apply different colors accordingly. You can use coordinate system like a grid paper to draw rectangles and squares. We'll look at more advanced concept called distance field to draw more complex shapes.
|
||||
|
||||
Read [Shapes](../07) to learn more.
|
||||
|
||||
<div id="c07-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c07", 3)</script>
|
||||
@ -70,7 +72,10 @@ Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tong
|
||||
|
||||
### Matrix
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
Matrix is a very powerful tool for manipulating vectors. By mastering how to use matrices, you can freely translate, scale and rotate shapes. Since the technique can be equally applied to anything expressed by vectors, we will look at many more advanced use of matrices later in this book.
|
||||
Matrices may look complex at a first glance, but you'll find it very handy and useful as you get used to the concept. Let's practice here and learn basics with simple examples.
|
||||
|
||||
Read [Matrix](../08) to learn more.
|
||||
|
||||
<div id="c08-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c08", 3)</script>
|
||||
@ -78,7 +83,9 @@ Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tong
|
||||
|
||||
### Patterns
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
Repetitive patterns are perfect theme for computational sketching. Different from conventional way of drawing, shaders lets you draw everything parallely at once. Instead of repeating the same procedure many times, you will wrap and repeat the "space". Sounds like Sci-Fi? Let's find out what it really means.
|
||||
|
||||
Read [Patterns](../09) to learn more.
|
||||
|
||||
<div id="c09-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c09", 3)</script>
|
||||
@ -88,7 +95,9 @@ Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tong
|
||||
## Generative designs
|
||||
### Random
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
Life is boring if everything was predictable. Though nothing is truly random in computers, we can create pseudo-randomness that looks totally unpredictable using simple tricks to create more interesting patterns and behaviors.
|
||||
|
||||
Read [Random](../10) to learn more.
|
||||
|
||||
<div id="c10-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c10", 3)</script>
|
||||
@ -96,16 +105,20 @@ Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tong
|
||||
|
||||
### Noise
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
How can we create more natural looking textures like surface of the roads, rocks, trees and clouds? Noise function is the answer.
|
||||
Since Ken Perlin invented his first noise algorithm in 80s, the technique has been extensively used throughout computer graphics and simulations. Even if you have never heard of the name, it's not possible you have never seen it. Let's look step by step at how the function is built and works. We also cover more efficient version of the algorithm called simplex noise.
|
||||
|
||||
Read [Noise](../11) to learn more.
|
||||
|
||||
|
||||
<div id="c11-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("c11", 3)</script>
|
||||
<div class="extra-container"><a href="c11.php">See All Examples</a></div>
|
||||
|
||||
|
||||
## Advanced Examples
|
||||
## Advanced examples
|
||||
|
||||
Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
|
||||
This section features relatively advanced examples from different chapters. Try if you can read and understand all the examples here to test yourself.
|
||||
|
||||
<div id="advanced-examples"></div>
|
||||
<script type="text/javascript">gallery.createExampleList("advanced", 3)</script>
|
||||
|
@ -3,6 +3,8 @@ echo '
|
||||
examples.advanced = [
|
||||
{url:"../edit.html#examples/moon.frag&examples/http://www.thebookofshaders.com/log/moon-texture.jpg", src: "http://www.thebookofshaders.com/log/160319080242.png", caption: "Moon"},
|
||||
{url:"../edit.html#08/matrix.frag", src: "http://www.thebookofshaders.com/log/160319080315.png", caption: "Matrix"},
|
||||
{url:"../edit.html?log=160208105716", src: "http://www.thebookofshaders.com/log/160320210609.png", caption: "kynd\'s cubic bezier (1)"},
|
||||
{url:"../edit.html?log=160208105702", src: "http://www.thebookofshaders.com/log/160320210634.png", caption: "kynd\'s cubic bezier (2)"},
|
||||
{url:"../edit.html#10/iching-02.frag", src: "http://www.thebookofshaders.com/log/160319075355.png", caption: "I Ching: pattern"},
|
||||
{url:"../edit.html#11/2d-gnoise.frag", src: "http://www.thebookofshaders.com/log/160319080357.png", caption: "I Ching: random"},
|
||||
{url:"../edit.html#11/iching-03.frag", src: "http://www.thebookofshaders.com/log/160319075326.png", caption: "I Ching: with noise"},
|
||||
|
Loading…
Reference in New Issue
Block a user