gallery top loads texts from each chapter
kynd
9 years ago
parent
da1e141582
commit
857340cc63
@ -0,0 +1,5 @@
|
||||
## "Hello World!"
|
||||
|
||||
Usually the "Hello world!" example is the first step to learning a new language. In GPU-land rendering text is an overcomplicated task for a first step, instead we'll choose a bright welcoming color to shout our enthusiasm!
|
||||
|
||||
Read ["Hello World!"](../02) to learn more.
|
||||
@ -0,0 +1,32 @@
|
||||
<?php
|
||||
$path = "../..";
|
||||
$subtitle = ": Gallery - Shaping functions";
|
||||
$README = "README";
|
||||
$language = "";
|
||||
|
||||
if ( !empty($_GET['lan']) ) {
|
||||
if (file_exists($README.'-'.$_GET['lan'].'.md')) {
|
||||
$language = '-'.$_GET['lan'];
|
||||
$README .= $language;
|
||||
}
|
||||
}
|
||||
|
||||
include("../header.php");
|
||||
include("../../chap-header.php");
|
||||
|
||||
echo '<div id="content">';
|
||||
include("../../src/parsedown/Parsedown.php");
|
||||
$Parsedown = new Parsedown();
|
||||
echo $Parsedown->text(file_get_contents($README.'.md'));
|
||||
$dir = basename(__DIR__);
|
||||
echo "<div class=\"glslChapterGallery\" log=\"{$dir}\"></div>";
|
||||
echo '
|
||||
</div>
|
||||
<hr>
|
||||
<ul class="navigationBar" >
|
||||
<li class="navigationBar" onclick="window.location.href=\'../index.php\'">Gallery Home </li>
|
||||
</ul>';
|
||||
|
||||
include("../../footer.php");
|
||||
?>
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
## Uniforms
|
||||
|
||||
Learn how to use Uniform variables. Uniform variables, or simply *uniforms* are the variables that carry information equally accessible from all of the threads of your shader. The [GSLS editor](http://editor.thebookofshaders.com/) has three uniforms set up for you.
|
||||
|
||||
Read [Uniforms](../03) to learn more.
|
||||
|
||||
```glsl
|
||||
uniform vec2 u_resolution; // Canvas size (width,height)
|
||||
uniform vec2 u_mouse; // mouse position in screen pixels
|
||||
uniform float u_time; // Time in seconds since load
|
||||
```
|
||||
@ -0,0 +1,32 @@
|
||||
<?php
|
||||
$path = "../..";
|
||||
$subtitle = ": Gallery - Shaping functions";
|
||||
$README = "README";
|
||||
$language = "";
|
||||
|
||||
if ( !empty($_GET['lan']) ) {
|
||||
if (file_exists($README.'-'.$_GET['lan'].'.md')) {
|
||||
$language = '-'.$_GET['lan'];
|
||||
$README .= $language;
|
||||
}
|
||||
}
|
||||
|
||||
include("../header.php");
|
||||
include("../../chap-header.php");
|
||||
|
||||
echo '<div id="content">';
|
||||
include("../../src/parsedown/Parsedown.php");
|
||||
$Parsedown = new Parsedown();
|
||||
echo $Parsedown->text(file_get_contents($README.'.md'));
|
||||
$dir = basename(__DIR__);
|
||||
echo "<div class=\"glslChapterGallery\" log=\"{$dir}\"></div>";
|
||||
echo '
|
||||
</div>
|
||||
<hr>
|
||||
<ul class="navigationBar" >
|
||||
<li class="navigationBar" onclick="window.location.href=\'../index.php\'">Gallery Home </li>
|
||||
</ul>';
|
||||
|
||||
include("../../footer.php");
|
||||
?>
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
# Shader Gallery
|
||||
|
||||
## Shaping functions
|
||||
|
||||
Shaping functions is fundamental technique that is recursively used throughout this book that let you control the variation of the value at will. Study how different functions of x are used to create different shapes and try making your own function.
|
||||
|
||||
Read [Shaping functions](../05) to learn more.
|
||||
|
||||
<div class="glslChapterGallery" data="05"></div>
|
||||
@ -1,10 +1,6 @@
|
||||
# Shader Gallery
|
||||
|
||||
## Colors
|
||||
|
||||
Familiarize yourself with how to express colors in shaders. The examples cover how to mix colors and beautifully animate them over time as well as conversion between two different models(RGB and HSB).
|
||||
In GLSL, colors are simply just vectors, which means you can easily apply the concepts and techniques you learn here to other
|
||||
|
||||
Read [Colors](../06) to learn more.
|
||||
|
||||
<div class="glslChapterGallery" data="06"></div>
|
||||
@ -1,9 +1,5 @@
|
||||
# Shader Gallery
|
||||
|
||||
## Shapes
|
||||
|
||||
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 class="glslChapterGallery" data="07"></div>
|
||||
@ -1,9 +1,5 @@
|
||||
# Shader Gallery
|
||||
|
||||
## Random
|
||||
|
||||
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 class="glslChapterGallery" data="10"></div>
|
||||
@ -1,10 +1,6 @@
|
||||
# Shader Gallery
|
||||
|
||||
## Noise
|
||||
|
||||
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 class="glslChapterGallery" data="11"></div>
|
||||
@ -1,7 +1,3 @@
|
||||
# Shader Gallery
|
||||
|
||||
## 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 class="glslChapterGallery" data="advanced"></div>
|
||||
@ -1,19 +0,0 @@
|
||||
<?php
|
||||
echo '
|
||||
<footer>
|
||||
<p> Copyright 2015 <a href="http://www.patriciogonzalezvivo.com" target="_blank">Patricio Gonzalez Vivo</a> </p>
|
||||
</footer>
|
||||
<script type="text/javascript" src="'.$path.'/src/main.js" defer></script>
|
||||
|
||||
<script> (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
|
||||
|
||||
ga("create", "UA-18824436-2", "auto");
|
||||
ga("send", "pageview");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
';
|
||||
?>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 353 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
@ -0,0 +1,3 @@
|
||||
## Featured shaders
|
||||
|
||||
Featured examples shared by our readers and students. We are looking forward to see a lot more shaders created with the [GLSL editor](http://editor.thebookofshaders.com/). Please share your masterpiecess to [@bookofshaders](https://twitter.com/bookofshaders).
|
||||
@ -0,0 +1,32 @@
|
||||
<?php
|
||||
$path = "../..";
|
||||
$subtitle = ": Gallery - Shaping functions";
|
||||
$README = "README";
|
||||
$language = "";
|
||||
|
||||
if ( !empty($_GET['lan']) ) {
|
||||
if (file_exists($README.'-'.$_GET['lan'].'.md')) {
|
||||
$language = '-'.$_GET['lan'];
|
||||
$README .= $language;
|
||||
}
|
||||
}
|
||||
|
||||
include("../header.php");
|
||||
include("../../chap-header.php");
|
||||
|
||||
echo '<div id="content">';
|
||||
include("../../src/parsedown/Parsedown.php");
|
||||
$Parsedown = new Parsedown();
|
||||
echo $Parsedown->text(file_get_contents($README.'.md'));
|
||||
$dir = basename(__DIR__);
|
||||
echo "<div class=\"glslChapterGallery\" log=\"{$dir}\"></div>";
|
||||
echo '
|
||||
</div>
|
||||
<hr>
|
||||
<ul class="navigationBar" >
|
||||
<li class="navigationBar" onclick="window.location.href=\'../index.php\'">Gallery Home </li>
|
||||
</ul>';
|
||||
|
||||
include("../../footer.php");
|
||||
?>
|
||||
|
||||
Loading…
Reference in New Issue