mirror
/
thebookofshaders
mirror of https://github.com/patriciogonzalezvivo/thebookofshaders.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into master

This commit is contained in:
Patricio Gonzalez Vivo 2025-03-04 08:54:27 -08:00 committed by GitHub
parent dd84fc93ab 262f5068af
commit 152eeb19bb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
81 changed files with 1048 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
00/README-ch.md
View File

@ -42,10 +42,10 @@ Fragment shaders（片段着色器）可以让你控制像素在屏幕上的快
此外，基于你有的条件或需求你可以：
* [制作一个离线版的本书](https://thebookofshaders.com/appendix/)
* [制作一个离线版的本书](https://thebookofshaders.com/appendix/00/?lan=ch)
* [用树莓派而不是浏览器来运行书中示例](https://thebookofshaders.com/appendix/)
* [用不带浏览器的树莓派来运行书中示例](https://thebookofshaders.com/appendix/01/?lan=ch)
* [做一个PDF版的书用于打印](https://thebookofshaders.com/appendix/)
* [做一个PDF版的书用于打印](https://thebookofshaders.com/appendix/02/?lan=ch)
* 用[github仓库](https://github.com/patriciogonzalezvivo/thebookofshaders)来帮助解决问题和分享代码

18
00/README-pl.md
View File

@ -2,14 +2,14 @@
<canvas id="custom" class="canvas" data-fragment-url="cmyk-halftone.frag" data-textures="vangogh.jpg" width="700px" height="320px"></canvas>
Powyższe obrazy zostały stworzone na różny sposób. Pierwszy stworzył Van Gogh, aplikując farbę warstwa po wartwie. Zajęło mu to godziny. Drugi z nich stworzono poprzez połączenie czterech macierzy zawierających piksele koloru niebieskozielonego (cyjan), magenty, żółtego i czarnego. Kluczowa różnicę stanowi fakt, że drugi obraz stworzny został natychmiastowo (przez komputer), a nie seryjnie, krok po kroku (przez malarza).
Powyższe obrazy zostały stworzone na różne sposoby. Pierwszy z nich stworzył Van Gogh, aplikując farbę warstwa po warstwie. Zajęło mu to godziny. Drugi stworzono poprzez połączenie czterech macierzy pikseli odpowiadających kolorom: cyjan, magenta, żółty i czarny. Kluczową różnicę stanowi fakt, że drugi obraz stworzony został natychmiastowo (przez komputer), a nie seryjnie, krok po kroku (przez malarza).
Ta książka jest o rewolucyjnej technice obliczeniowej, tzw. *fragment shaderach* (zwanych też *pixel shaderami*), które wznoszą cyfrowo generowane obrazy na wyższy poziom. Możesz o nich myśleć jak o ekwiwalencie maszyny drukarskiej Gutenberga dla zastosowań graficznych.
![Gutenberg's press](gutenpress.jpg)
Fragment shadery dają ci pełnię kontroli nad błyskawicznym renderowaniem pikseli na ekranie. Właśnie dlatego są one używane w przeróżnych sytuacjach: od filtrów wideo w telefonach do niesamowitych twójwymiarowych gier wideo.
Fragment shadery dają ci pełnię kontroli nad błyskawicznym renderowaniem pikseli na ekranie. Właśnie dlatego są one używane w przeróżnych sytuacjach: od filtrów wideo w telefonach do niesamowitych trójwymiarowych gier wideo.
![Journey by That Game Company](journey.jpg)
@ -17,21 +17,21 @@ W następujących rozdziałach odkryjesz jak niewiarygodnie szybkie i potężne
## Dla kogo jest ta książka?
Ta książka jest napisana dla osób zainteresowanych *creative coding*'iem, game developerów i inżynierów, którzy posiadają doświadczenie programistyczne, podstawową wiedzę z algebry liniowej i trygonometrii, i którzy chcą podnieść jakość swoich prac graficzny na wyższy poziom. (Jeżeli chcesz nauczyć się programować, polecam zacząć od [Processing](https://processing.org/) i wrócić, gdy opanujesz go do komfortowego poziomu.
Ta książka jest napisana dla osób zainteresowanych *creative coding*iem, game developerów i inżynierów, którzy posiadają doświadczenie programistyczne, podstawową wiedzę z algebry liniowej i trygonometrii, i którzy chcą podnieść jakość swoich prac graficznych na wyższy poziom. (Jeżeli chcesz nauczyć się programować, polecam zacząć od [Processing](https://processing.org/) i wrócić, gdy opanujesz go do komfortowego poziomu.)
Ta książka nauczy cię jak używać shadery w celu polepszenia wydajności i wyglądu twoich projektów. Ponieważ shadery GLSL (OpenGL Shading Language) kompilują i uruchamiają się na różnorodnych platformach, będziesz w stanie zaaplikować tutaj zdobytą wiedzę do jakiegokolwiek środowiska wykorzystującego OpenGL, OpenGL ES lub WebGL. Innymi słowy, będziesz w stanie wykorzystać tę wiedzę przy tworzeniu szkiców z [Processing](https://processing.org/), aplikacji z [openFrameworks](http://openframeworks.cc/), interaktywnych instalacji z [Cinder](http://libcinder.org/) czy stron internetowych z [Three.js](http://threejs.org/) i gier iOS/Android.
## Jaki materiał pokrywa ta książka?
Ta książka skupia się na użyciu fragment shaderów GLSL. Wpierw zdefiniujemy czym shadery są; potem dowiemy się jak, z ich pomocą, tworzyć proceduralne kształty, wzory, tekstury i animacje. Nauczysz się podstaw języka shadingowego i jego przydatnych aplikacji w przetwarzaniu obrazów (operacje na obrazach, sploty macierzowe, rozmycia, filtry koloru, "lookup tables" i inne efekty) czy symulacji ("Gra w życie" Conwaya, model reakcji-dyfuzji Graya-Scotta, plusk wody, efekt akwareli, komórki Voronoi, itp.). Pod koniec książki zobaczymy kilka zaawansowanych technik opartych o Ray Marching.
Ta książka skupia się na użyciu fragment shaderów GLSL. Najpierw zdefiniujemy czym shadery są; potem dowiemy się jak, z ich pomocą, tworzyć proceduralne kształty, wzory, tekstury i animacje. Nauczysz się podstaw języka shadingowego i jego przydatnych aplikacji w przetwarzaniu obrazów (operacje na obrazach, sploty macierzowe, rozmycia, filtry koloru, "lookup tables" i inne efekty) czy symulacji ("Gra w życie" Conwaya, model reakcji-dyfuzji Graya-Scotta, plusk wody, efekt akwareli, komórki Voronoi, itp.). Pod koniec książki zobaczymy kilka zaawansowanych technik opartych o Ray Marching.
*W każdym rozdziale znajdziesz interaktywne przykłady do wypróbowania.* Kiedy zmodyfikujesz kod, natychmiastowo zobaczysz zmiany. Zagadnienia mogą być abstrakcyjne i mylące, więc takie interkatywne przykłady stanowią konieczną pomoc w zrozumieniu materiału. Im szybciej złapiesz praktykę, tym prostsza będzie dalsza nauka.
*W każdym rozdziale znajdziesz interaktywne przykłady do wypróbowania.* Kiedy zmodyfikujesz kod, natychmiastowo zobaczysz zmiany. Zagadnienia mogą być abstrakcyjne i mylące, więc takie interaktywne przykłady stanowią konieczną pomoc w zrozumieniu materiału. Im szybciej złapiesz praktykę, tym prostsza będzie dalsza nauka.
Materiał, którego ta książka nie pokrywa:
* To *nie jest* książka o OpenGL lub WebGL. OpenGL/WebGL jest większym tematem niż GLSL czy fragment shadery. Jeśli chcesz wiedzieć więcej o OpenGL i WebGL, polecam zajrzeć do [OpenGL Introduction](https://open.gl/introduction), [the 8th edition of the OpenGL Programming Guide](http://www.amazon.com/OpenGL-Programming-Guide-Official-Learning/dp/0321773039/ref=sr_1_1?s=books&ie=UTF8&qid=1424007417&sr=1-1&keywords=open+gl+programming+guide) (zwana również "czerwoną książką") lub [WebGL: Up and Running](http://www.amazon.com/WebGL-Up-Running-Tony-Parisi/dp/144932357X/ref=sr_1_4?s=books&ie=UTF8&qid=1425147254&sr=1-4&keywords=webgl)
* To *nie jest* książka do nauki matematyki. Choć opisane są w niej algorytmy i techniki, które opierają się zrozumieniu algebry i trygonometrii, to nie będziemy ich szczegółowo tłumaczyć. Z pytaniami dotyczącymi matematyki polecam zajrzeć do następujących książek:
* To *nie jest* książka do nauki matematyki. Choć opisane są w niej algorytmy i techniki, które opierają się na zrozumieniu algebry i trygonometrii, to nie będziemy ich szczegółowo tłumaczyć. Z pytaniami dotyczącymi matematyki polecam zajrzeć do następujących książek:
[3rd Edition of Mathematics for 3D Game Programming and computer Graphics](http://www.amazon.com/Mathematics-Programming-Computer-Graphics-Third/dp/1435458869/ref=sr_1_1?ie=UTF8&qid=1424007839&sr=8-1&keywords=mathematics+for+games) lub [2nd Edition of Essential Mathematics for Games and Interactive Applications](http://www.amazon.com/Essential-Mathematics-Games-Interactive-Applications/dp/0123742978/ref=sr_1_1?ie=UTF8&qid=1424007889&sr=8-1&keywords=essentials+mathematics+for+developers).
## Co potrzeba, żeby zacząć?
@ -40,11 +40,11 @@ Niewiele! Jeśli masz współczesną przeglądarkę, która obsługuje WebGL (ja
Alternatywnie, w zależności od tego, co masz albo co potrzebujesz od tej książki, możesz:
- [Stworzyć wersję off-line tej książki](https://thebookofshaders.com/appendix/00/?lan=pl)
- [Stworzyć wersję offline tej książki](https://thebookofshaders.com/appendix/00/?lan=pl)
- [Uruchomić przykłady na Raspberry PI bez przeglądarki](https://thebookofshaders.com/appendix/01/?lan=pl)
- [Uruchomić przykłady na Raspberry Pi bez przeglądarki](https://thebookofshaders.com/appendix/01/?lan=pl)
- [Stworzyć wersję PDF tej książki do wydrukowania](https://thebookofshaders.com/appendix/02/?lan=pl)
- Sprawdź [repozytorium GitHub](https://github.com/patriciogonzalezvivo/thebookofshaders) tej książki, by pomóc rożwiązać issues i podzielić się swoim kodem.
- Sprawdź [repozytorium GitHub](https://github.com/patriciogonzalezvivo/thebookofshaders) tej książki, by pomóc w rozwiązywaniu problemów (issues) i podzielić się swoim kodem.

2
00/README-pt.md
View File

@ -34,7 +34,7 @@ O que esse livro não cobre:
## O que você precisa para começar?
Não muito! Se você tem um browser modernos que possa rodar WebGL (como Chrome, Firefox ou Safari) e uma conexão à internet, clique no botão para o próximo capítulo no fim desta página para começar.
Não muito! Se você tem um browser moderno que possa rodar WebGL (como Chrome, Firefox ou Safari) e uma conexão à internet, clique no botão para o próximo capítulo no fim desta página para começar.
Alternativamente, baseado no que você tem, ou no que você precisa deste livro você pode:

8
01/README-pl.md
View File

@ -28,7 +28,7 @@ Wyobraź sobie procesor twojego komputera jako potok przetwarzania (ang. "pipeli
![CPU](00.jpeg)
Gry video i inne aplikacje graficzne wymagają zdecydowanie więcej mocy obliczeniowej niż większość programów, gdyż muszą wykonywać ogromne ilości operacji piksel po pikselu. Nie dość, że każdy pojedynczy piksel musi być obliczony, to w wypadku gier 3D dochodzą do tego obliczenia geometryczne i obliczenie perspektywy.
Gry wideo i inne aplikacje graficzne wymagają zdecydowanie więcej mocy obliczeniowej niż większość programów, gdyż muszą wykonywać ogromne ilości operacji piksel po pikselu. Nie dość, że każdy pojedynczy piksel musi być obliczony, to w przypadku gier 3D dochodzą do tego obliczenia geometryczne i obliczenie perspektywy.
<!-- Video games and other graphic applications require a lot more processing power than other programs. Because of their graphic content they have to do huge numbers of pixel-by-pixel operations. Every single pixel on the screen needs to be computed, and in 3D games geometries and perspectives need to be calculated as well. -->
@ -44,7 +44,7 @@ Z pomocą przychodzi przetwarzanie równoległe. Zamiast kilku dużych, potężn
![GPU](04.jpeg)
Wyobraź sobie mały mikroprocesor jako tablicę rur (spójrz na obrazek powyżej), a dane jako piłeczki ping pongowe. 14.400.000 piłeczek ping pongowych na sekundę może zablokować prawie każdą pojedynczą rurę. Ale tabela 800x600 malutkich rur przyjmująca co sekundę 30 fal po 480.000 piłeczek poradzi sobie z nimi bez problemu. Tak samo działa to na wyższych rozdzielczościach - im więcej równolegle pracującego hardware'u, tym większy potok, z którymi GPU sobie poradzi.
Wyobraź sobie mały mikroprocesor jako tablicę rur (spójrz na obrazek powyżej), a dane jako piłeczki ping pongowe. 14.400.000 piłeczek ping pongowych na sekundę może zablokować prawie każdą pojedynczą rurę. Ale tabela 800x600 malutkich rur przyjmująca co sekundę 30 fal po 480.000 piłeczek poradzi sobie z nimi bez problemu. Tak samo działa to na wyższych rozdzielczościach - im więcej równolegle pracującego hardware'u, tym większy potok, z którym GPU sobie poradzi.
<!-- Picture the tiny microprocessors as a table of pipes, and the data of each pixel as a ping pong ball. 14,400,000 ping pong balls a second can obstruct almost any pipe. But a table of 800x600 tiny pipes receiving 30 waves of 480,000 pixels a second can be handled smoothly. This works the same at higher resolutions - the more parallel hardware you have, the bigger the stream it can manage. -->
@ -64,7 +64,7 @@ Jak to mówią: "with great power comes great responsibility". Stosuje się to r
<!-- As Uncle Ben said “with great power comes great responsibility,” and parallel computation follows this rule; the powerful architectural design of the GPU comes with its own constraints and restrictions. -->
Aby wątki mogły działać równolegle, muszą być od siebie niezależne. Mówimy, że wątki są *ślepe* na to, co robi reszta wątków. Ograniczenie to implikuje, że dane muszą "płynąć w ten samą stronę" - nie jest możliwe sprawdzić dane wyjściowe innego wątku, zmodyfikować jego dane wejściowe albo przekazać dane wyjściowe jednego wątku jako dane wejściowe innego.
Aby wątki mogły działać równolegle, muszą być od siebie niezależne. Mówimy, że wątki są *ślepe* na to, co robi reszta wątków. Ograniczenie to implikuje, że dane muszą "płynąć w tę samą stronę" - nie jest możliwe sprawdzić dane wyjściowe innego wątku, zmodyfikować jego dane wejściowe albo przekazać dane wyjściowe jednego wątku jako dane wejściowe innego.
<!-- In order to run in parallel every pipe, or thread, has to be independent from every other thread. We say the threads are *blind* to what the rest of the threads are doing. This restriction implies that all data must flow in the same direction. So it’s impossible to check the result of another thread, modify the input data, or pass the outcome of a thread into another thread. Allowing thread-to-thread communications puts the integrity of the data at risk. -->
@ -72,6 +72,6 @@ Poza tym GPU odpowiada za to, żeby każdy wątek miał coś do roboty, i żeby
<!-- Also the GPU keeps the parallel micro-processor (the pipes) constantly busy; as soon as they get free they receive new information to process. It's impossible for a thread to know what it was doing in the previous moment. It could be drawing a button from the UI of the operating system, then rendering a portion of sky in a game, then displaying the text of an email. Each thread is not just **blind** but also **memoryless**. Besides the abstraction required to code a general function that changes the result pixel by pixel depending on its position, the blind and memoryless constraints make shaders not very popular among beginning programmers. -->
Ale nie martw się! W następnych rozdziałąch nauczymy się, krok po kroku, prostych i zaawansowanych obliczeń shadingowych. Jeżeli czytasz to we współczesnej przeglądarce, to z pewnością docenisz zabawę z interaktywnymi przykładami. Ale nie przedłużajmy! Naciśnij *Next>>* aby przejść dalej.
Ale nie martw się! W następnych rozdziałach nauczymy się, krok po kroku, prostych i zaawansowanych obliczeń shadingowych. Jeżeli czytasz to we współczesnej przeglądarce, to z pewnością docenisz zabawę z interaktywnymi przykładami. Ale nie przedłużajmy! Naciśnij *Next>>* aby przejść dalej.
<!-- Don't worry! In the following chapters, we will learn step-by-step how to go from simple to advanced shading computations. If you are reading this with a modern browser, you will appreciate playing with the interactive examples. So let's not delay the fun any longer and press *Next >>* to jump into the code! -->

14
02/README-pl.md
View File

@ -1,6 +1,6 @@
## Witaj świecie!
Zazwyczaj przykład "Hello world!" stanowi pierwszy krok przy nauce nowego języka. Jest to prosty jednolinijkowy programy, który zwraca pełną entuzjazmu wiadomość powitalną i tym samym zapowiada nadchodzące przygody.
Zazwyczaj przykład "Hello world!" stanowi pierwszy krok przy nauce nowego języka. Jest to prosty jednolinijkowy program, który zwraca pełną entuzjazmu wiadomość powitalną i tym samym zapowiada nadchodzące przygody.
<!-- Usually the "Hello world!" example is the first step to learning a new language. It's a simple one-line program that outputs an enthusiastic welcoming message and declares opportunities ahead. -->
@ -10,7 +10,7 @@ W świecie GPU renderowanie tekstu jest jednak zbyt skomplikowanym zadaniem dla
<div class="codeAndCanvas" data="hello_world.frag"></div>
Jeżeli czytasz tę książkę w przeglądarce: powyższy blok kodu jest interaktywny. Oznacza to, że możesz edytować dowolną linijkę kodu w celach eksploracyjnych. Shader kompiluje się na bieżąco, więc zmiany widoczne będą natychmiast. Spróbuj pozmieniać wartości w linijce 8.
Jeżeli czytasz tę książkę w przeglądarce, powyższy blok kodu jest interaktywny. Oznacza to, że możesz edytować dowolną linijkę kodu w celach eksploracyjnych. Shader kompiluje się na bieżąco, więc zmiany widoczne będą natychmiast. Spróbuj pozmieniać wartości w linijce 8.
<!-- If you are reading this book in a browser the previous block of code is interactive. That means you can click and change any part of the code you want to explore. Changes will be updated immediately thanks to the GPU architecture that compiles and replaces shaders *on the fly*. Give it a try by changing the values on line 8. -->
@ -24,7 +24,7 @@ Choć kod jest prosty, to możemy wyciągnąć z niego ważne wnioski:
4. Patrząc na typ `vec4`, możemy wywnioskować, że jego cztery argumenty odnoszą się do kanałów CZERWONEGO, ZIELONEGO, NIEBIESKIEGO i ALPHA. Widać też, że jego wartości są *znormalizowane*, więc znajdują się w zakresie od `0.0` do `1.0`. Później zobaczymy, jak normalizowanie wartości pomaga w *mapowaniu* wartości między zakresami.
5. Kolejną ważną C-podobną własnością w tym przykładzie jest obecność makr preprocessora. Dzięki nim można definiować zmienne globalne za pomocą `#define` oraz operacje warunkowe za pomocą `#ifdef` ("if defined"), `#ifndef` ("if not defined") i `#endif`. Wszystkie makra zaczynają się od płotka `#` i ewaluowane są podczas procesu prekompilacji poprzedzającego kompilację. W naszym powyższym przykładzie linijka 2 kompilowana jest tylko wtedy, gdy zmienna `GL_ES` jest zdefiniowana (co występuje na urządzeniach mobilnych i w przeglądarkach).
5. Kolejną ważną C-podobną własnością w tym przykładzie jest obecność makr preprocessora. Dzięki nim można definiować zmienne globalne za pomocą `#define` oraz operacje warunkowe za pomocą `#ifdef` ("if defined"), `#ifndef` ("if not defined") i `#endif`. Wszystkie makra zaczynają się od płotka `#` i ewaluowane są podczas procesu prekompilacji poprzedzającego kompilację. W naszym powyższym przykładzie linijka 2 kompilowana jest tylko wtedy, gdy zmienna `GL_ES` jest zdefiniowana (co występuje na urządzeniach mobilnych i w przeglądarkach).
<!-- Although these simple lines of code don't look like a lot, we can infer substantial knowledge from them:
@ -38,9 +38,9 @@ Choć kod jest prosty, to możemy wyciągnąć z niego ważne wnioski:
5. Another important *C feature* we can see in this example is the presence of preprocessor macros. Macros are part of a pre-compilation step. With them it is possible to `#define` global variables and do some basic conditional operation (with `#ifdef` and `#endif`). All the macro commands begin with a hashtag (`#`). Pre-compilation happens right before compiling and copies all the calls to `#defines` and check `#ifdef` (is defined) and `#ifndef` (is not defined) conditionals. In our "hello world!" example above, we only insert the line 2 if `GL_ES` is defined, which mostly happens when the code is compiled on mobile devices and browsers. -->
6. Typy zmiennoprzecinkowe są kluczowe w shaderach, więc ich poziom precyzji (ang. *precision*) jest kluczowy. Niższa precyzja oznacza szybsze renderowanie, ale kosztem jakości. Możesz być wybredny i określać precyzję każdej zmiennej zmiennoprzecinkowej z osobna. W linijce 2 (`precision mediump float;`) ustawiamy średnią precyzję zmiennych zmiennoprzecinkowych ("mediump", bo "medium precision"). Możemy też ustawić ją jako niską (`precision lowp float;`) lub wysoką (`precision highp float;`).
6. Typy zmiennoprzecinkowe są kluczowe w shaderach, więc ich poziom precyzji (ang. *precision*) ma ogromne znaczenie. Niższa precyzja oznacza szybsze renderowanie, ale kosztem jakości. Możesz być wybredny i określać precyzję każdej zmiennej zmiennoprzecinkowej z osobna. W linijce 2 (`precision mediump float;`) ustawiamy średnią precyzję zmiennych zmiennoprzecinkowych ("mediump", bo "medium precision"). Możemy też ustawić ją jako niską (`precision lowp float;`) lub wysoką (`precision highp float;`).
7. Ostatni i chyba najważniejszy szczegół specyfikacji GLSL: nie ma gwaracji, że zmienne będą automatycznie castowane (np. z `int` do `float` przy dzieleniu liczby 5 przez 2). Producenci GPU mogą stosować przeróżne optymalizacje w kartach graficzncyh, ale muszą przy tym przestrzegać pewnych wytycznych. Automatyczne castowanie nie jest jednym z nich. W naszym przykładzie `vec4` ma precyzję zmiennoprzecinkową i dlatego jego argumenty wymagają `float`ów. Przezwyczaj się do stawiania kropek (`.`) we `float`ach (`1.` lub `1.0`, a nie `1`), jeżeli nie chcesz spędzić godzin przy debugowaniu. Poniższy kod nie zawsze będzie, zatem, działał:
7. Ostatni i chyba najważniejszy szczegół specyfikacji GLSL: nie ma gwarancji, że zmienne będą automatycznie castowane (np. z `int` do `float` przy dzieleniu liczby 5 przez 2). Producenci GPU mogą stosować przeróżne optymalizacje w kartach graficznych, ale muszą przy tym przestrzegać pewnych wytycznych. Automatyczne castowanie nie jest jednym z nich. W naszym przykładzie `vec4` ma precyzję zmiennoprzecinkową i dlatego jego argumenty wymagają `float`ów. Przyzwyczaj się do stawiania kropek (`.`) we `float`ach (`1.` lub `1.0`, a nie `1`), jeżeli nie chcesz spędzić godzin przy debugowaniu. Poniższy kod nie zawsze będzie, zatem, działał:
```glsl
void main() {
@ -54,7 +54,7 @@ Czas na ćwiczenia! Pamiętaj, że w wypadku błędu kompilacji pokaże się inf
* Zakomentuj linię 8
* Stwórz osobną funckję, która zwraca dowolny kolor i użyj jej w `main()`. Wskazówka: poniższy kod zwraca kolor czerwony:
* Stwórz osobną funkcję, która zwraca dowolny kolor i użyj jej w `main()`. Wskazówka: poniższy kod zwraca kolor czerwony:
```glsl
vec4 red(){
@ -68,4 +68,4 @@ vec4 red(){
vec4 color = vec4(vec3(1.0,0.0,1.0),1.0);
```
Choć przykład ten nie jest zbyt ekscytujący, ale stanowi ważną podstawę. W następnych rozdziałach zobaczymy, jak zmienić kolor piksela z pomocą inputu przestrzennego (położenie piksela na ekranie) i temporalnego (okres czasu od momentu załadowania się strony).
Choć przykład ten nie jest zbyt ekscytujący, stanowi ważną podstawę. W następnych rozdziałach zobaczymy, jak zmienić kolor piksela z pomocą inputu przestrzennego (położenie piksela na ekranie) i temporalnego (okres czasu od momentu załadowania się strony).

26
03/README-pl.md
View File

@ -4,7 +4,7 @@ Do tej pory widzieliśmy jak GPU zarządza wieloma równoległymi wątkami, z kt
<!-- So far we have seen how the GPU manages large numbers of parallel threads, each one responsible for assigning the color to a fraction of the total image. Although each parallel thread is blind to the others, we need to be able to send some inputs from the CPU to all the threads. Because of the architecture of the graphics card those inputs are going to be equal (*uniform*) to all the threads and necessarily set as *read only*. In other words, each thread receives the same data which it can read but cannot change. -->
Inputy te nazywamy `uniform`ami i mogę być większości wspieranych typów: `float`, `vec2`, `vec3`, `vec4`, `mat2`, `mat3`, `mat4`, `sampler2D` i `samplerCube`. Uniformy definiowane są zwykle na górze shaderu zaraz po przypisaniu domyślnej precyzji float'ów.
Inputy te nazywamy `uniform`ami i mogą być większości wspieranych typów: `float`, `vec2`, `vec3`, `vec4`, `mat2`, `mat3`, `mat4`, `sampler2D` i `samplerCube`. Uniformy definiowane są zwykle na górze shaderu zaraz po przypisaniu domyślnej precyzji floatów.
<!-- These inputs are called `uniform` and come in most of the supported types: `float`, `vec2`, `vec3`, `vec4`, `mat2`, `mat3`, `mat4`, `sampler2D` and `samplerCube`. Uniforms are defined with the corresponding type at the top of the shader right after assigning the default floating point precision. -->
@ -18,34 +18,34 @@ uniform vec2 u_mouse; // pozycja myszy na kanwie (wyrażona w pikselach)
uniform float u_time; // czas w sekundach od załadowania shadera
```
Wyobraź sobie te uniformy jak małe mosty między CPU i GPU. Ich nazwy bywają różne, ale w tej książce używam: `u_time`, `u_resolution` i `u_mouse` (przeczytaj komentarze w kodzie, aby wiedzieć, co robią). Podążam za konwencją dodawnaia `u_` przed nazwą uniformów, aby było wiadomo, że nie są to zwykłe zmienne, ale ostatecznie jest to kwestia gustu. Przykładowo, [ShaderToy.com](https://www.shadertoy.com/) używa takich samych uniformów, ale z następującym nazewnictwem:
Wyobraź sobie te uniformy jak małe mosty między CPU i GPU. Ich nazwy bywają różne, ale w tej książce używam: `u_time`, `u_resolution` i `u_mouse` (przeczytaj komentarze w kodzie, aby wiedzieć, co robią). Podążam za konwencją dodawania `u_` przed nazwą uniformów, aby było wiadomo, że nie są to zwykłe zmienne, ale ostatecznie jest to kwestia gustu. Przykładowo, [ShaderToy.com](https://www.shadertoy.com/) używa takich samych uniformów, ale z następującym nazewnictwem:
<!-- You can picture the uniforms like little bridges between the CPU and the GPU. The names will vary from implementation to implementation but in this series of examples I’m always passing: `u_time` (time in seconds since the shader started), `u_resolution` (billboard size where the shader is being drawn) and `u_mouse` (mouse position inside the billboard in pixels). I’m following the convention of putting `u_` before the uniform name to be explicit about the nature of this variable but you will find all kinds of names for uniforms. For example [ShaderToy.com](https://www.shadertoy.com/) uses the same uniforms but with the following names: -->
```glsl
uniform vec3 iResolution;
uniform vec4 iMouse;
uniform float iTime;
uniform vec3 iResolution; // rozdzielczość obszaru widoku (w pikselach)
uniform vec4 iMouse; // współrzędne piksela myszy: xy – bieżąca pozycja, zw – kliknięcie
uniform float iTime; // czas działania shadera (w sekundach)
```
(zwróć uwagę, że `iResolution` jest typu `vec3`, a `iMouse` typu `vec4`; uniformy te zawierają po prostu dodatkowe informacje, np.: stosunek szerokości do wysokości pikseli na ekranie, czy któryś z przycisków myszy został kliknięty albo czy jest przytrzymywany)
Koniec gadania, czas zobaczyć uniformy w akcji. W pożniszym kodzie używamy `u_time` (liczby sekund od uruchomienia shadera) razem z funkcją sinus, aby stworzyć animację przejścia od koloru czerwonego do czarnego.
Koniec gadania, czas zobaczyć uniformy w akcji. W poniższym kodzie używamy `u_time` (liczby sekund od uruchomienia shadera) razem z funkcją sinus, aby stworzyć animację przejścia od koloru czerwonego do czarnego.
<!-- Enough talking, let's see the uniforms in action. In the following code we use `u_time` - the number of seconds since the shader started running - together with a sine function to animate the transition of the amount of red in the billboard. -->
<div class="codeAndCanvas" data="time.frag"></div>
Jak widać GLSL skrywa wiele niespodzianek, na przykład w postaci specjalnych, zaimplementowanych w hardware'rze, funkcji trygonometryczne czy wykładniczych. Tutaj podaję część z nich: [`sin()`](../glossary/?search=sin), [`cos()`](../glossary/?search=cos), [`tan()`](../glossary/?search=tan), [`asin()`](../glossary/?search=asin), [`acos()`](../glossary/?search=acos), [`atan()`](../glossary/?search=atan), [`pow()`](../glossary/?search=pow), [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log), [`sqrt()`](../glossary/?search=sqrt), [`abs()`](../glossary/?search=abs), [`sign()`](../glossary/?search=sign), [`floor()`](../glossary/?search=floor), [`ceil()`](../glossary/?search=ceil), [`fract()`](../glossary/?search=fract), [`mod()`](../glossary/?search=mod), [`min()`](../glossary/?search=min), [`max()`](../glossary/?search=max) i [`clamp()`](../glossary/?search=clamp).
Jak widać GLSL skrywa wiele niespodzianek, na przykład w postaci specjalnych, zaimplementowanych w hardwarze, funkcji trygonometryczne czy wykładniczych. Tutaj podaję część z nich: [`sin()`](../glossary/?search=sin), [`cos()`](../glossary/?search=cos), [`tan()`](../glossary/?search=tan), [`asin()`](../glossary/?search=asin), [`acos()`](../glossary/?search=acos), [`atan()`](../glossary/?search=atan), [`pow()`](../glossary/?search=pow), [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log), [`sqrt()`](../glossary/?search=sqrt), [`abs()`](../glossary/?search=abs), [`sign()`](../glossary/?search=sign), [`floor()`](../glossary/?search=floor), [`ceil()`](../glossary/?search=ceil), [`fract()`](../glossary/?search=fract), [`mod()`](../glossary/?search=mod), [`min()`](../glossary/?search=min), [`max()`](../glossary/?search=max) i [`clamp()`](../glossary/?search=clamp).
<!--
As you can see GLSL has more surprises. The GPU has hardware accelerated angle, trigonometric and exponential functions. Some of those functions are: [`sin()`](../glossary/?search=sin), [`cos()`](../glossary/?search=cos), [`tan()`](../glossary/?search=tan), [`asin()`](../glossary/?search=asin), [`acos()`](../glossary/?search=acos), [`atan()`](../glossary/?search=atan), [`pow()`](../glossary/?search=pow), [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log), [`sqrt()`](../glossary/?search=sqrt), [`abs()`](../glossary/?search=abs), [`sign()`](../glossary/?search=sign), [`floor()`](../glossary/?search=floor), [`ceil()`](../glossary/?search=ceil), [`fract()`](../glossary/?search=fract), [`mod()`](../glossary/?search=mod), [`min()`](../glossary/?search=min), [`max()`](../glossary/?search=max) and [`clamp()`](../glossary/?search=clamp). -->
Pobawmy się powyższym kodem:
* Zmniejsz częstotliwość tak bardzo, aby zmiany koloru stały się nie zauważalne.
* Zmniejsz częstotliwość tak bardzo, aby zmiany koloru stały się niezauważalne.
* Zwiększ częstotliwość do takiego stopnia, aby ujrzeć stały kolor bez migotania.
* Wstaw funkcje sinus o różnych częstotliowściach do pozostałych kanałów (zielonego i niebieskiego), aby uzyskać ciekawe efekty.
* Wstaw funkcje sinusoidalne o różnych częstotliwościach do pozostałych kanałów (zielonego i niebieskiego), aby uzyskać ciekawe efekty.
<!-- Now it is time again to play with the above code.
@ -63,11 +63,11 @@ GLSL daje nam nie tylko domyślny output `vec4 gl_FragColor`, ale również domy
<div class="codeAndCanvas" data="space.frag"></div>
W powyższy kodzie, *normalizujemy* współrzędne fragmentu poprzez podzielenie go przez rozdzielczość kanwy. W ten sposó otrzymujemy wartości z przedziału od `0.0` do `1.0`, co ułatwia zmapowanie współrzędnych x i y do, odpowiednio, czerwonego i zielonego kanału.
W powyższym kodzie, *normalizujemy* współrzędne fragmentu poprzez podzielenie go przez rozdzielczość kanwy. W ten sposób otrzymujemy wartości z przedziału od `0.0` do `1.0`, co ułatwia zmapowanie współrzędnych x i y do, odpowiednio, czerwonego i zielonego kanału.
<!-- In the above code we *normalize* the coordinate of the fragment by dividing it by the total resolution of the billboard. By doing this the values will go between `0.0` and `1.0`, which makes it easy to map the X and Y values to the RED and GREEN channel. -->
W świecie shaderów nie mamy zbyt dużo sposóbów debuggowania poza przypisywaniem jaskrawych kolorów do zmiennych i wyciągania wniosków o działaniu shadera, na podstawie tego, co widzimy. Odkryjesz, że programowania GLSL jest często jak wkładanie miniaturowych statków do butelki - jest to trudne, ale tez piękne i satysfakcjonujące.
W świecie shaderów nie mamy zbyt dużo sposóbów debuggowania poza przypisywaniem jaskrawych kolorów do zmiennych i wyciągania wniosków o działaniu shadera, na podstawie tego, co widzimy. Odkryjesz, że programowanie GLSL jest często jak wkładanie miniaturowych statków do butelki - jest to trudne, ale też piękne i satysfakcjonujące.
<!-- In shader-land we don’t have too many resources for debugging besides assigning strong colors to variables and trying to make sense of them. You will discover that sometimes coding in GLSL is very similar to putting ships inside bottles. Is equally hard, beautiful and gratifying. -->
@ -77,13 +77,13 @@ Czas przetestować nasze rozumienie kodu:
* Czy jesteś w stanie powiedzieć, gdzie na naszej kanwie znajduje się fragment o znormalizowanych współrzędnych `(0.0, 0.0)`?
* Co z framgentami o znormalizowanych współrzędnych `(1.0, 0.0)`, `(0.0, 1.0)`, `(0.5, 0.5)` i `(1.0, 1.0)`?
* Co z fragmentami o znormalizowanych współrzędnych `(1.0, 0.0)`, `(0.0, 1.0)`, `(0.5, 0.5)` i `(1.0, 1.0)`?
* Czy jesteś w stanie użyć uniforma `u_mouse` wiedząc, że wartości są nieznormalizowane? Spróbuj użyć go do manipulacji kolorem za pomocą ruchów myszki.
* Czy jesteś sobie w stanie wyobrazić ciekawy sposób zmieniania koloru, łącząc współrzędne `u_mouse` z `u_time`?
Po wykonaniu tych ćwiczeń, zapewne zastanawiasz się, gdzie jeszcze można użyć twoich nowych shaderowych mocy. W następnym rozdziale zobaczymy jak stworzyć swój własny shader w three.js, Processing i openFrameworks.
Po wykonaniu tych ćwiczeń, zapewne zastanawiasz się, gdzie jeszcze można użyć twoich nowych shaderowych mocy. W następnym rozdziale zobaczymy, jak stworzyć swój własny shader w three.js, Processing i openFrameworks.
<!-- Now it is time to try and challenge our understanding of this code.

22
04/README-fa.md
View File

@ -208,25 +208,3 @@ void ofApp::draw(){
برای اطلاعات بیشتر در مورد استفاده از شیدر ها در openFrameworks سری به [excellent tutorial](http://openframeworks.cc/ofBook/chapters/shaders.html) ساخته شده توسط [Joshua Noble](http://thefactoryfactory.com/) بزنید.
### در **Blender**
[GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) یک افزونه است که امکان می‌دهد با برنامه نویسی و استفاده از GLSL، تکستچر تولید کنید. همچنین با بقیه محیط هم سازگار است. اینگونه کار می‌کند:
1. در سرچ بار: `F3` (یا spaceBar). تایپ کنید `GlslTexture`
![](blender/00.png)
2. طول و عرض و منبع را تغییر دهید (که میتواند مسیری به فایل خارجی باشد).
![](blender/01.png)
3. از این تصویر روی متریال خود اسفاده کنید. اسم عکس بر پایه اسم منبع تعریف می‌شود.
![](blender/02.png)
4. به Text Editor بروید (یا یک ادیتور خارجی در صورت تمایل) و شیدر را تغییر دهید. به صورت آنی(هات ریلود) تغییرات را مشاهده خواهید کرد.
![](blender/03.png)

21
04/README-gr.md
View File

@ -210,24 +210,3 @@ void ofApp::draw(){
Για περισσότερες πληροφορίες για τους shaders σε openFrameworks δείτε αυτό το [εξαιρετικό μάθημα](http://openframeworks.cc/ofBook/chapters/shaders.html) από τον [Joshua Noble](http://thefactoryfactory.com/).
### Σε **Blender**
Το [GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) είναι ένα addon που επιτρέπει να παράξετε textures (υφές) προγραμματιστικά χρησιμοποιώντας GLSL Shaders, και είναι πλήρως συμβατό με τα υπόλοιπα απο τα sandboxes (περιβάλλοντα) αυτού του κεφαλαίου. Να πως λειτουργεί:
1. Αναζήτηση Operator: `F3` (ή `SpaceBar (διάστημα)` ανάλογα με τις επιλογές περιβάλλοντος του Blender). Γράψτε `GlslTexture`
![](blender/00.png)
2. Αλλάξτε τα μεγέθη `width` και `height` και το αρχείο `Source` (όπου μπορείτε να βάλετε το path -τοποθεσία- ενός εξωτερικού αρχείου).
![](blender/01.png)
3. Χρησιμοποιήστε την Εικόνα στα υλικά σας. Το όνομα της Εικόνας βασίζεται στο όνομα του αρχείου source (βλ. 2)
![](blender/02.png)
4. Πηγαίνετε στον Text Editor (επεξεργαστή κειμένου - ή έναν εξωτερικό επεξεργαστή κειμένου αν το source αρχείο είναι εξωτερικό) και αλλάξτε τον shader. Οι αλλαγές είναι άμεσα ορατές.
![](blender/03.png)

18
04/README-id.md
View File

@ -209,22 +209,4 @@ void ofApp::draw(){
Untuk informasi lebih lanjut mengenai shader dalam openFrameworks lihatlah [tutorial bagus ini](https://processing.org/tutorials/pshader/).
### Dalam **Blender**
[GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) adalah addon yang memperbolehkan menghasilkan tekstur menggunakan shader GLSL secara terprogram dan kompatibel sepenuhnya dengan sandbox lainnya di bab ini. Bagaimana itu bekerja:
1. Operator Search: `F3` (atau `SpaceBar` tergantung pada setup). Cari `GlslTexture`
![](blender/00.png)
2. Ganti ukuran `width` and `height` dan berkas sumber `Source` (dapat menggunakan path file eksternal).
![](blender/01.png)
3. Gunakan gambar pada materialmu. Nama gambar akan berdasarkan pada nama file sumber.
![](blender/02.png)
4. Pergi ke Text Editor (atau eksternal editor jika file sumbermu di luar) dan edit shadernya. Ini akan memuat ulang.
![](blender/03.png)

25
04/README-pl.md
View File

@ -249,28 +249,3 @@ void ofApp::draw(){
Po więcej informacji na temat shaderów w openFrameworks zajrzyj do znakomitego [tutoriala](http://openframeworks.cc/ofBook/chapters/shaders.html) autorstwa [Joshua Noble](http://thefactoryfactory.com/).
<!-- For more information about shaders in openFrameworks go to this [excellent tutorial](http://openframeworks.cc/ofBook/chapters/shaders.html) made by [Joshua Noble](http://thefactoryfactory.com/). -->
### W **Blender**
[GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) to addon pozwalający programistycznie generować textury z użyciem shaderów GLSL. Jest on w pełni kompatybilny z resztą sandboxów w tym rozdziale. Jak go użyć?
<!-- [GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) is an addon that allows you to programmatically generate textures using GLSL Shaders and is fully compatible with the rest of the sandboxes on this chapter. How it works: -->
1. Operator Search: `F3` (lub `Spacja`, w zależności od twojego setupu ). Wpisz `GlslTexture`
![](blender/00.png)
2. Zmień pola `width` (szerokość), `height` (wysokość) oraz `Source` (ścieżka pliku źródłowego; może być ścieżką do zewnętrznego pliku).
![](blender/01.png)
3. Wykorzystaj węzeł Image w zakładce Materials. Nazwa węzła Image będzie taka sama jak nazwa pliku źródłowego.
<!-- 3. Use the Image on your materials. The Image name will be based on the name of the source file. -->
![](blender/02.png)
4. Idź do zakładki Scripting (lub zewnętrznego edytora, jeśli twój plik źródłowy jest zewnętrzny) i zacznij edytować shader. Będzie hot reload'owany.
<!-- 4. Go to the Text Editor (or an external editor if your source file is external) and edit the shader. It will hot reload. -->
![](blender/03.png)

21
04/README-ua.md
View File

@ -210,24 +210,3 @@ void ofApp::draw(){
Щоб дізнатися більше про шейдери в openFrameworks, перегляньте цей [чудовий посібник](http://openframeworks.cc/ofBook/chapters/shaders.html), створений [Joshua Noble](http://thefactoryfactory.com/).
### **Blender**
[GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) — це доповнення, яке дозволяє програмно генерувати текстури за допомогою шейдерів GLSL і повністю сумісне з рештою прикладів даного розділу. Як це працює:
1. Ввімкніть пошук: `F3` або `пробіл`, залежно від налаштувань. Введіть `GlslTexture`:
![](blender/00.png)
2. Змініть значення розмірів для полів `width`, `height` та `Source`-шлях до зовнішнього файлу, якщо такий є.
![](blender/01.png)
3. Використовуйте зображення у своїх матеріалах. Ім’я зображення базуватиметься на назві вихідного файлу.
![](blender/02.png)
4. Перейдіть до текстового редактора (або зовнішнього редактора, якщо ваш вихідний файл також зовнішній) і відредагуйте шейдер. Після чого відбудеться оновлення результату.
![](blender/03.png)

21
04/README-vi.md
View File

@ -210,24 +210,3 @@ void ofApp::draw(){
Để tìm hiểu thêm về shader trong openFrameworks hãy đọc [bài hướng dẫn tuyệt vời này](http://openframeworks.cc/ofBook/chapters/shaders.html) của [Joshua Noble](http://thefactoryfactory.com/).
### Với **Blender**
[GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) là một addon giúp bạn tạo ra các texture theo công thức của GLSL và hoàn toàn tương thích với các sandbox khác trong chương này. Cách mà nó hoạt động:
1. Operator Search: `F3` (hoặc gõ phím `Space` tuỳ theo chỉnh sửa của bạn). Gõ `GlslTexture`
![](blender/00.png)
2. Đổi kích thước `width` và `height` và tên file shader ở `Source` (có thể là đường dẫn tới 1 file khác)
![](blender/01.png)
3. Sử dụng ảnh trong chất liệu. Tên của ảnh sẽ dựa trên tên của file shader.
![](blender/02.png)
4. Mở phần Text Editor và viết shader (hoặc sửa từ bên ngoài). Nó sẽ được cập nhật ngay lập tức.
![](blender/03.png)

21
04/README.md
View File

@ -210,24 +210,3 @@ void ofApp::draw(){
For more information about shaders in openFrameworks go to this [excellent tutorial](http://openframeworks.cc/ofBook/chapters/shaders.html) made by [Joshua Noble](http://thefactoryfactory.com/).
### In **Blender**
[GlslTexture](https://github.com/patriciogonzalezvivo/glslTexture) is an addon that allows you to programmatically generate textures using GLSL Shaders and is fully compatible with the rest of the sandboxes on this chapter. How it works:
1. Operator Search: `F3` (or `SpaceBar` depending on your setup). Type `GlslTexture`
![](blender/00.png)
2. Change `width` and `height` size and `Source` file (which can be a path to an external file).
![](blender/01.png)
3. Use the Image on your materials. The Image name will be based on the name of the source file.
![](blender/02.png)
4. Go to the Text Editor (or an external editor if your source file is external) and edit the shader. It will hot reload.
![](blender/03.png)

BIN
04/blender/00.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
04/blender/01.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.7 KiB

BIN
04/blender/02.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 41 KiB

BIN
04/blender/03.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 436 KiB

4
05/README.md
View File

@ -125,10 +125,10 @@ Take a look at the following table of equations made by [Kynd](http://www.kynd.i
#### For your toolbox
Here are some tools that will make it easier for you to visualize these types of functions.
* [LYGIA](https://lygia.xyz/) is a shader library of reusable functions that can be include easily on your projects. It's very granular, designed for reusability, performance and flexibility. And can be easily be added to any projects and frameworks. It's divided in different sections and it have an entire one for [math operations](https://lygia.xyz/math)
* [GraphToy](http://www.iquilezles.org/apps/graphtoy/): once again [Iñigo Quilez](http://www.iquilezles.org) made a tool to visualize GLSL functions in WebGL.
![Iñigo Quilez - GraphToy (2010)](graphtoy.png)
* [LYGIA Shader Library](https://lygia.xyz/) a shader library of reusable functions that can be include easily on your projects. It's very granular, designed for reusability, performance and flexibility. And can be easily be added to any projects and frameworks.

5
06/README.md
View File

@ -132,3 +132,8 @@ int newFunction(in vec4 aVec4, // read-only
```
You may not believe it but now we have all the elements to make cool drawings. In the next chapter we will learn how to combine all our tricks to make geometric forms by *blending* the space. Yep... *blending* the space.
#### For your toolbox
* [LYGIA's color shader functions ](https://lygia.xyz/color) are set of reusable functions to manipulate colors in GLSL. It includes functions to convert between color spaces, to blend colors, to create gradients, and to apply color transformations. It's very granular library, designed for reusability, performance and flexibility. And it can be easily be added to any projects and frameworks.

6
07/README.md
View File

@ -228,6 +228,10 @@ The trick will use the number of edges of a polygon to construct the distance fi
Congratulations! You have made it through the rough part! Take a break and let these concepts settle - drawing simple shapes in Processing is easy but not here. In shader-land drawing shapes is twisted, and it can be exhausting to adapt to this new paradigm of coding.
Down at the end of this chapter you will find a link to [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/) this deck of cards will help you learn new SDF functions, compose them into your designs and use on your shaders. The deck has a progressive learning curve, so taking one card a day and working on it will push and challenge your skills for months.
#### For your toolbox
* [LYGIA's draw functions ](https://lygia.xyz/draw) are set of reusable functions to draw 2D shapes and patterns. You can also explore [LYGIA's SDF functions folder](https://lygia.xyz/sdf) to combine more complex shapes through distance fields. It's very granular library, designed for reusability, performance and flexibility. And it can be easily be added to any projects and frameworks.
* Down at the end of this chapter you will find a link to [PixelSpirit Deck](https://patriciogonzalezvivo.github.io/PixelSpiritDeck/) this deck of cards will help you learn new SDF functions, compose them into your designs and use on your shaders. The deck has a progressive learning curve, so taking one card a day and working on it will push and challenge your skills for months.
Now that you know how to draw shapes I'm sure new ideas will pop into your mind. In the following chapter you will learn how to move, rotate and scale shapes. This will allow you to make compositions!

4
08/README.md
View File

@ -99,3 +99,7 @@ The following code is an interesting opportunity to use matrix operations in GLS
As you can see we are treating colors as vectors by multiplying them with matrices. In that way we “move” the values around.
In this chapter we've learned how to use matrix transformations to move, rotate and scale vectors. These transformations will be essential for making compositions out of the shapes we learned about in the previous chapter. In the next chapter we'll apply all we've learned to make beautiful procedural patterns. You will find that coding repetition and variation can be an exciting practice.
#### For your toolbox
* [LYGIA's space functions ](https://lygia.xyz/space) are set of reusable functions to manipulate space in GLSL. It's a great resource to learn how to use matrices to manipulate space. It's very granular library, designed for reusability, performance and flexibility. And it can be easily be added to any projects and frameworks.

4
10/README.md
View File

@ -90,3 +90,7 @@ Take a look at [Ikeda](http://www.ryojiikeda.com/)'s work and try the following
Using random aesthetically can be problematic, especially if you want to make natural-looking simulations. Random is simply too chaotic and very few things look ```random()``` in real life. If you look at a rain pattern or a stock chart, which are both quite random, they are nothing like the random pattern we made at the begining of this chapter. The reason? Well, random values have no correlation between them what so ever, but most natural patterns have some memory of the previous state.
In the next chapter we will learn about noise, the smooth and *natural looking* way of creating computational chaos.
#### For your toolbox
* [LYGIA's generative functions ](https://lygia.xyz/generative) are a set of reusable functions to generate patterns in GLSL. It's a great resource to learn how to use randomness and noise to create generative art. It's very granular library, designed for reusability, performance and flexibility. And it can be easily be added to any projects and frameworks.

4
11/README.md
View File

@ -218,3 +218,7 @@ In the following chapters we will see some well known techniques to perfect your
<p style="text-align:center; font-style: italic;">"Talk to the tree, make friends with it." Bob Ross
</p>
#### For your toolbox
* [LYGIA's generative functions ](https://lygia.xyz/generative) are a set of reusable functions to generate patterns in GLSL. It's a great resource to learn how to use randomness and noise to create generative art. It's very granular library, designed for reusability, performance and flexibility. And it can be easily be added to any projects and frameworks.

4
12/README.md
View File

@ -188,3 +188,7 @@ Now it's time for you to look closely at things, be inspired by nature and find
![Deyrolle glass film - 1831](DeyrolleFilm.png)
<div class="glslGallery" data="12/metaballs,12/stippling,12/cell,12/tissue,12/cracks,160504143842" data-properties="clickRun:editor,openFrameIcon:false"></div>
#### For your toolbox
* [LYGIA's generative functions ](https://lygia.xyz/generative) are a set of reusable functions to generate patterns in GLSL. It's a great resource to learn how to use randomness and noise to create generative art. It's very granular library, designed for reusability, performance and flexibility. And it can be easily be added to any projects and frameworks.

4
13/README.md
View File

@ -109,3 +109,7 @@ A less extreme example of this technique is the following code where the wrap is
<div class='codeAndCanvas' data='clouds.frag'></div>
Warping the texture coordinates with noise in this manner can be very useful, a lot of fun, and fiendishly difficult to master. It's a powerful tool, but it takes quite a bit of experience to use it well. A useful tool for this is to displace the coordinates with the derivative (gradient) of the noise. [A famous article by Ken Perlin and Fabrice Neyret called "flow noise"](http://evasion.imag.fr/Publications/2001/PN01/) is based on this idea. Some modern implementations of Perlin noise include a variant that computes both the function and its analytical gradient. If the "true" gradient is not available for a procedural function, you can always compute finite differences to approximate it, although this is less accurate and involves more work.
#### For your toolbox
* [LYGIA's generative functions ](https://lygia.xyz/generative) are a set of reusable functions to generate patterns in GLSL. It's a great resource to learn how to use randomness and noise to create generative art. It's very granular library, designed for reusability, performance and flexibility. And it can be easily be added to any projects and frameworks.

2
LICENSE
View File

@ -1,4 +1,4 @@
Copyright (c) 2015 Patricio Gonzalez Vivo - http://patriciogonzalezvivo.com/
Copyright (c) 2025 Patricio Gonzalez Vivo - http://patriciogonzalezvivo.com/
All rights reserved.
I am the sole copyright owner of this Work.

10
README-ch.md
View File

@ -60,10 +60,12 @@
* 环境贴图 (spherical and cube)
* 折射和反射
* [附录:](appendix/) 其他阅读本书的方式
* [如何离线阅读此书?](appendix/?lan=ch)
* [如何在树莓派上运行示例程序?](appendix/?lan=ch)
* [如何打印这本书](appendix/?lan=ch)
* [附录:](appendix/?lan=ch) 其他阅读本书的方式
* [如何离线阅读此书?](appendix/00/?lan=ch)
* [如何在树莓派上运行示例程序?](appendix/01/?lan=ch)
* [如何打印这本书](appendix/02/?lan=ch)
* [我怎样共创这本书](appendix/03/?lan=ch)
* [给那些从JS语言过来的人的介绍](appendix/04/?lan=ch) by [Nicolas Barradeau](http://www.barradeau.com/)
* [example gallery](examples/?lan=ch)

4
README-pl.md
View File

@ -38,7 +38,7 @@
* Image operations
* Kernel convolutions
* Filters
* Others effects
* Other effects
* Simulation
* Pingpong
@ -80,7 +80,7 @@ Patricio studiował i praktykował psychoterapię oraz arteterapię. Otrzymał t
## Podziękowania
Podziękowania dla [Scott Murray](http://alignedleft.com/) za porady i inspriację.
Podziękowania dla [Scott Murray](http://alignedleft.com/) za porady i inspirację.
Podziękowania dla [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo), [Nicolas Barradeau](https://twitter.com/nicoptere), [Karim Naaji](http://karim.naaji.fr/) za wsparcie, dobre pomysły i kod.

2
README.md
View File

@ -38,7 +38,7 @@ This is a gentle step-by-step guide through the abstract and complex universe of
* Image operations
* Kernel convolutions
* Filters
* Others effects
* Other effects
* Simulation
* Pingpong

448
appendix/04/README-pl.md Normal file
View File

@ -0,0 +1,448 @@
## Wprowadzenie dla osób przychodzących z JS
przez [Nicolas Barradeau](http://www.barradeau.com/)
Jeśli jesteś programistą JavaScript, prawdopodobnie nieco zaskoczy Cię treść tej książki.
Rzeczywiście, istnieje wiele różnic pomiędzy manipulowaniem wysokopoziomowym kodem JS a zagłębianiem się w świat shaderów.
Jednak w przeciwieństwie do niskopoziomowego języka asemblerowego, GLSL jest czytelny dla człowieka i jestem pewien, że po zrozumieniu jego specyfiki szybko zaczniesz go używać.
Zakładam, że masz podstawową (choć może płytką) wiedzę o JavaScript, ale także o Canvas API.
Jeśli nie, nie martw się – większość tej sekcji będzie dla Ciebie zrozumiała.
Nie będę zagłębiać się zbytnio w szczegóły, a niektóre kwestie mogą być _półprawdziwe_; nie oczekuj "wyczerpującego przewodnika", ale raczej
### WIELKI UŚCISK
JavaScript świetnie nadaje się do szybkiego prototypowania; wrzucasz garść losowych, nieotypowanych zmiennych i metod, możesz dynamicznie dodawać i usuwać członków klas, odświeżać stronę i sprawdzać, czy wszystko działa,
wprowadzać zmiany, odświeżać stronę, powtarzać – życie jest proste.
Możesz się więc zastanawiać, jaka jest różnica między JavaScriptem a GLSL.
W końcu oba działają w przeglądarce, oba służą do rysowania różnych efektownych rzeczy na ekranie i pod tym względem JS jest łatwiejszy w użyciu.
Główna różnica polega jednak na tym, że JavaScript jest językiem **interpretowanym**, podczas gdy GLSL jest językiem **kompilowanym**.
**Kompilowany** program jest wykonywany natywnie przez system operacyjny, jest niskopoziomowy i zazwyczaj szybki.
**Interpretowany** program wymaga [wirtualnej maszyny](https://en.wikipedia.org/wiki/Virtual_machine) (VM) do wykonania, jest wysokopoziomowy i zazwyczaj wolniejszy.
Gdy przeglądarka (czyli _JavaScriptowa **VM**_) **wykonuje** lub **interpretuje** fragment kodu JS, nie wie, jaka zmienna czym jest i jaka funkcja co robi (z wyjątkiem oczywistych przypadków, takich jak **TypedArrays**).
Dlatego nie może nic zoptymalizować _z góry_, więc potrzebuje trochę czasu, aby przeczytać Twój kod, **wywnioskować** (dedukować na podstawie użycia) typy Twoich zmiennych i metod,
a kiedy to możliwe, przekształci _część_ Twojego kodu w kod asemblerowy, który wykona się znacznie szybciej.
To powolny, mozolny i niesamowicie skomplikowany proces – jeśli interesują Cię szczegóły, polecam przyjrzeć się działaniu [silnika V8 w Chrome](https://developers.google.com/v8/).
Najgorsze jest to, że każda przeglądarka optymalizuje JS na swój sposób, a cały proces jest _ukryty_ przed użytkownikiem; jesteś bezsilny.
**Kompilowany** program nie jest interpretowany; system operacyjny go uruchamia, a jeśli program jest poprawny, zostaje wykonany.
To duża zmiana; jeśli zapomnisz o średniku na końcu linii, Twój kod jest niepoprawny i nie skompiluje się: Twój kod w ogóle nie przekształci się w program.
To surowe, ale tak właśnie działa **shader**: _skompilowany program wykonywany na GPU_.
Nie bój się! **Kompilator**, czyli część programu, która dba o to, aby Twój kod był poprawny, stanie się Twoim najlepszym przyjacielem.
Przykłady z tej książki oraz [edytor towarzyszący](http://editor.thebookofshaders.com/) są bardzo przyjazne użytkownikowi.
Powiedzą Ci, gdzie i dlaczego Twój program nie skompilował się, a następnie będziesz musiał wprowadzić poprawki – i za każdym razem, gdy shader będzie gotowy do kompilacji, zostanie on natychmiast wyświetlony.
To świetny sposób na naukę, ponieważ jest bardzo wizualny i tak naprawdę niczego nie możesz zepsuć.
Ostatnia uwaga: **shader** składa się z dwóch programów, **vertex shader** i **fragment shader**.
W skrócie, **vertex shader**, pierwszy program, otrzymuje geometrię jako dane wejściowe i przekształca ją w serię **pikseli** (lub *fragmentów*), które następnie przekazuje do
**fragment shader**, drugiego programu, który decyduje, jaki kolor nadać pikselom.
Ta książka koncentruje się głównie na tym drugim – we wszystkich przykładach geometria to prosty czworobok pokrywający cały ekran.
Więc! Gotowy?
No to ruszamy!
### Silne typowanie
![pierwszy wynik wyszukiwania dla 'strong type' w Google Images, 20.05.2016](vector.jpg)
Dla osób przychodzących z JS lub innego języka bez typów, **typowanie** zmiennych jest obcym konceptem, co sprawia, że **typowanie** stanowi najtrudniejszy krok w kierunku nauki GLSL.
**Typowanie**, jak sama nazwa wskazuje, oznacza, że musisz przypisać **typ** każdej zmiennej (oraz funkcjom, oczywiście).
To zasadniczo oznacza, że słowo **`var`** przestaje istnieć.
Polityka myślenia GLSL wymazała je z powszechnego języka i nie jesteś w stanie go używać, ponieważ... po prostu nie istnieje.
Zamiast używać magicznego słowa **`var`**, będziesz musiał _jawnie określić typ każdej używanej zmiennej_, dzięki czemu kompilator będzie widział tylko obiekty i prymitywy, które wie, jak efektywnie obsługiwać.
Minusem braku możliwości użycia słowa **`var`** i konieczności _jawnego określania wszystkiego_ jest to, że musisz znać typ wszystkich zmiennych i dobrze je rozumieć.
Spokojnie – jest ich niewiele, a do tego są dość proste (GLSL nie jest frameworkiem Java).
Może to brzmieć strasznie, ale ogólnie nie różni się to bardzo od tego, co robisz w JavaScript; jeśli zmienna jest typu `boolean`, oczekujesz, że będzie przechowywać `true` lub `false` i nic więcej.
Jeśli zmienna jest zadeklarowana jako `var uid = XXX;`, prawdopodobnie przechowasz w niej wartość całkowitą, a `var y = YYY;` _może_ odnosić się do wartości zmiennoprzecinkowej.
Co więcej, dzięki **silnemu typowaniu** nie będziesz tracił czasu na zastanawianie się, czy `X == Y` (albo czy `typeof X == typeof Y`? ... albo `typeof X !== null && Y...`... w każdym razie) – po prostu będziesz tego wiedział, a jeśli nie, kompilator Cię o tym poinformuje.
Oto **typy skalarne** (**skalar** określa ilość), których możesz używać w GLSL: `bool` (Boolean), `int` (liczba całkowita), `float` (liczba zmiennoprzecinkowa).
Istnieją też inne typy, ale nie ma co się przejmować – poniższy fragment pokazuje, jak deklarować **zmienne (`vars`)** (tak, użyłem zakazanego słowa) w GLSL:
```glsl
// wartość typu Boolean:
JS: var b = true; GLSL: bool b = true;
// wartość typu Integer
JS: var i = 1; GLSL: int i = 1;
// wartość typu Float (liczba)
JS: var f = 3.14159; GLSL: float f = 3.14159;
```
Nie jest to trudne, prawda? Jak wspomniałem, ułatwia to kodowanie, ponieważ nie tracisz czasu na sprawdzanie typu danej zmiennej.
W razie wątpliwości pamiętaj, że robisz to po to, aby Twój program działał o wiele szybciej niż w JS.
#### void
Istnieje typ `void`, który w przybliżeniu odpowiada `null`; jest on używany jako typ zwracany przez funkcję, która nic nie zwraca.
Nie możesz przypisać go do zmiennej.
#### boolean
Jak wiesz, wartości logiczne (Boolean) są najczęściej używane w testach warunkowych, np. `if( myBoolean == true ){}else{}`.
Choć rozgałęzianie warunkowe jest możliwe na CPU, [równoległa natura](http://thebookofshaders/01/) GLSL czyni to mniej sensownym.
Używanie instrukcji warunkowych jest często wręcz zniechęcane – książka przedstawia kilka alternatywnych technik rozwiązania tego problemu.
#### rzutowanie typów
Jak powiedział [Boromir](https://pl.wikipedia.org/wiki/Boromir): "Nie łączy się po prostu otypowanych prymitywów". W przeciwieństwie do JavaScript, GLSL nie pozwala na wykonywanie operacji pomiędzy zmiennymi o różnych typach.
This for instance:
```glsl
int i = 2;
float f = 3.14159;
// próba pomnożenia liczby całkowitej przez wartość zmiennoprzecinkową:
float r = i * f;
```
nie zadziała, ponieważ próbujesz połączyć **_kota_** z **_żyrafą_**.
Rozwiązaniem jest użycie rzutowania typów; to _sprawi, że kompilator uwierzy_, że *`i`* jest typu `float`, nie zmieniając faktycznie typu *`i`*.
```glsl
// rzutowanie typu zmiennej całkowitej 'i' na float:
float r = float( i ) * f;
```
Co jest ściśle równoważne przebraniu **_kota_** w **_żyrafi_ strój** i zadziała zgodnie z oczekiwaniami (`r` będzie wynikiem `i` x `f`).
Można **rzutować** dowolny z wymienionych typów na inny; zauważ, że rzutowanie `float` na `int` działa jak `Math.floor()`, ponieważ usuwa część dziesiętną.
Rzutowanie `float` lub `int` na `bool` zwróci `true`, jeśli wartość zmiennej nie wynosi zero.
#### konstruktor
**Typy** zmiennych są również swoimi własnymi **konstruktorami klas**; w rzeczywistości zmienna typu `float` może być traktowana jako _`instancja`_ klasy _`Float`_.
Następujące deklaracje są równie poprawne:
```glsl
int i = 1;
int i = int( 1 );
int i = int( 1.9995 );
int i = int( true );
```
Może się to nie wydawać znaczące dla typów `skalarnych`, ale nie różni się to zbytnio od **rzutowania** – nabierze sensu, gdy przejdziemy do sekcji dotyczącej *przeciążania*.
Ok, więc te trzy to `typy prymitywne`, rzeczy, bez których nie możesz żyć – ale oczywiście GLSL ma do zaoferowania więcej.
### Wektory
![pierwszy wynik wyszukiwania dla 'vector villain' w Google Images, 05.20.2016](vector.jpg)
W JavaScript, podobnie jak w GLSL, potrzebujesz bardziej zaawansowanych sposobów obsługi danych, dlatego przydają się **wektory**.
Przypuszczam, że już napisałeś klasę `Point` w JavaScript, która przechowuje razem wartość `x` i `y`, kod wyglądałby mniej więcej tak:
```glsl
// definicja 'klasy':
var Point = function( x, y ){
this.x = x || 0;
this.y = y || 0;
}
// i instancjonowałoby się ją tak:
var p = new Point( 100,100 );
```
Jak właśnie widzieliśmy, to jest TAK niepoprawne na TYLU poziomach! Po pierwsze, użycie słowa kluczowego **`var`**, potem okropne **`this`**, a następnie znowu **nieotypowane** wartości `x` i `y`...
Nie, to nie zadziała w świecie shaderów.
Zamiast tego GLSL udostępnia wbudowane struktury danych, które służą do przechowywania danych razem, mianowicie:
* `bvec2`: 2-wymiarowy wektor Boolean, `bvec3`: 3-wymiarowy wektor Boolean, `bvec4`: 4-wymiarowy wektor Boolean
* `ivec2`: 2-wymiarowy wektor Integer, `ivec3`: 3-wymiarowy wektor Integer, `ivec4`: 4-wymiarowy wektor Integer
* `vec2`: 2-wymiarowy wektor Float, `vec3`: 3-wymiarowy wektor Float, `vec4`: 4-wymiarowy wektor Float
Natychmiast zauważyłeś, że dla każdego typu prymitywnego istnieje odpowiedni **wektor**, spryciarzu.
Z tego, co właśnie widzieliśmy, można wywnioskować, że `bvec2` przechowa dwie wartości typu `bool`, a `vec4` cztery wartości typu `float`.
Inną rzeczą wprowadzoną przez wektory jest liczba **wymiarów**; nie oznacza to, że do renderowania grafiki 2D używasz 2-wymiarowego wektora, a do 3D – 3-wymiarowego.
Co by wtedy reprezentował 4-wymiarowy wektor? (właściwie nazywa się tesseraktem lub hiperkostką)
Nie, **wymiary** oznaczają liczbę oraz typ **składowych** lub **zmiennych** przechowywanych w **wektorze**:
```glsl
// stwórzmy 2-wymiarowy wektor Boolean
bvec2 b2 = bvec2 ( true, false );
// stwórzmy 3-wymiarowy wektor Integer
ivec3 i3 = ivec3( 0,0,1 );
// stwórzmy 4-wymiarowy wektor Float
vec4 v4 = vec4( 0.0, 1.0, 2.0, 1. );
```
`b2` przechowuje dwie różne wartości logiczne, `i3` przechowuje trzy różne wartości całkowite, a `v4` cztery różne wartości zmiennoprzecinkowe.
Ale jak odczytać te wartości?
w przypadku `skalarów` odpowiedź jest oczywista – przy `float f = 1.2`; zmienna `f` przechowuje wartość `1.2`.
W przypadku **wektorów** jest to nieco inne i całkiem piękne.
#### akcesory
Istnieją różne sposoby dostępu do wartości
```glsl
// stwórzmy 4-wymiarowy wektor Float
vec4 v4 = vec4( 0.0, 1.0, 2.0, 3.0 );
```
Aby odczytać te 4 wartości, możesz zrobić następująco:
```glsl
float x = v4.x; // x = 0.0
float y = v4.y; // y = 1.0
float z = v4.z; // z = 2.0
float w = v4.w; // w = 3.0
```
bułka z masłem; ale poniższe sposoby są równie poprawne w dostępie do Twoich danych:
```glsl
float x = v4.x = v4.r = v4.s = v4[0]; // x = 0.0
float y = v4.y = v4.g = v4.t = v4[1]; // y = 1.0
float z = v4.z = v4.b = v4.p = v4[2]; // z = 2.0
float w = v4.w = v4.a = v4.q = v4[3]; // w = 3.0
```
I spryciarzu, już zauważyłeś trzy rzeczy:
* `X`, `Y`, `Z` i `W` są używane w programach 3D do reprezentacji wektorów 3D
* `R`, `G`, `B` i `A` służą do kodowania kolorów oraz kanału alfa
* `[0]`, `[1]`, `[2]` i `[3]` oznaczają, że mamy dostęp do wartości w sposób losowy (tablica indeksowana)
W zależności od tego, czy manipulujesz współrzędnymi 2D czy 3D, kolorem z lub bez kanału alfa, czy też po prostu różnymi zmiennymi, możesz wybrać najbardziej odpowiedni typ i rozmiar **wektora**.
Zazwyczaj współrzędne 2D i wektory (w sensie geometrycznym) przechowywane są jako `vec2`, `vec3` lub `vec4`, kolory jako `vec3` lub `vec4` (jeśli potrzebujesz kanału alfa), ale nie ma ograniczeń co do sposobu użycia wektorów.
Na przykład, jeśli chcesz przechować tylko jedną wartość logiczną w `bvec4`, jest to możliwe, ale to marnotrawstwo pamięci.
**uwaga**: w shaderze wartości kolorów (`R`, `G`, `B` i `A`) są normalizowane, mieszczą się w przedziale od 0 do 1, a nie od 0 do 0xFF, dlatego lepiej użyć Float `vec4` niż Integer `ivec4` do ich przechowywania.
Już nieźle, ale to nie wszystko!
#### swizzle
Można zwrócić więcej niż jedną wartość jednocześnie; powiedzmy, że potrzebujesz tylko składowych `X` i `Y` z `vec4`, w JavaScript musiałbyś napisać coś takiego:
```glsl
var needles = [0, 1]; // pozycja 'x' i 'y' w naszej strukturze danych
var a = [ 0,1,2,3 ]; // nasza struktura danych 'vec4'
var b = a.filter( function( val, i, array ) {
return needles.indexOf( array.indexOf( val ) ) != -1;
});
// b = [ 0, 1 ]
// albo bardziej bezpośrednio:
var needles = [0, 1];
var a = [ 0,1,2,3 ]; // our 'vec4' data structure
var b = [ a[ needles[ 0 ] ], a[ needles[ 1 ] ] ]; // b = [ 0, 1 ]
```
Brzydko. W GLSL możesz je uzyskać w ten sposób:
```glsl
// stwrórz 4-wymiarowy wektor Float
vec4 v4 = vec4( 0.0, 1.0, 2.0, 3.0 );
// i odczytaj tylko 'x' i 'y'
vec2 xy = v4.xy; // xy = vec2( 0.0, 1.0 );
```
Co tu się stało?! Gdy **skonkatenujesz akcesory**, GLSL elegancko zwraca podzbiór wartości, o które prosiłeś, w najbardziej odpowiednim formacie **wektora**.
Rzeczywiście, wektor to struktura danych o **losowym dostępie**, podobna do tablicy w JavaScript.
Tak więc, nie tylko możesz pobrać podzbiór swoich danych, ale także określić **kolejność**, w jakiej mają być zwrócone – może to odwrócić kolejność składowych wektora:
```glsl
// stwórz 4-wymiarowy wektor: R,G,B,A
vec4 color = vec4( 0.2, 0.8, 0.0, 1.0 );
// i odczytaj go w kolejności: A,B,G,R
vec4 backwards = color.abgr; // backwards = vec4( 1.0, 0.0, 0.8, 0.2 );
```
I oczywiście, możesz zapytać o tę samą składową wielokrotnie:
```glsl
// stwórz 4-wymiarowy wektor: R,G,B,A
vec4 color = vec4( 0.2, 0.8, 0.0, 1.0 );
// i odczytaj GAG (Green, Alpha, Green) vec3 z kanałów G i A
vec3 GAG = color.gag; // GAG = vec4( 0.8, 1.0, 0.8 );
```
Jest to niezwykle przydatne, aby łączyć części wektorów, wyodrębniać tylko kanały rgb z koloru RGBA itp.
#### przeciążaj wszystko!
W sekcji o typach wspomniałem o **konstruktorze** i tu mamy kolejną świetną cechę GLSL – **przeciążanie**.
Dla tych, którzy nie wiedzą, **przeciążanie** operatora lub funkcji oznacza mniej więcej: _"zmianę zachowania danego operatora lub funkcji w zależności od operandów/argumentów"_.
Przeciążanie nie jest dozwolone w JavaScript, więc na początku może to wydawać się dziwne, ale jestem pewien, że gdy się do tego przyzwyczaisz, zastanowisz się, dlaczego nie zostało to zaimplementowane w JS (krótka odpowiedź, *typowanie*).
Najprostszy przykład przeciążania operatorów wygląda następująco:
```glsl
vec2 a = vec2( 1.0, 1.0 );
vec2 b = vec2( 1.0, 1.0 );
// przeciążone dodawanie
vec2 c = a + b; // c = vec2( 2.0, 2.0 );
```
CO? Czyli można dodawać rzeczy, które nie są liczbami?!
Tak, dokładnie. Oczywiście dotyczy to wszystkich operatorów (`+`, `-`, `*` oraz `/`), ale to dopiero początek.
Rozważ poniższy fragment:
```glsl
vec2 a = vec2( 0.0, 0.0 );
vec2 b = vec2( 1.0, 1.0 );
// przeciążony konstruktor
vec4 c = vec4( a , b ); // c = vec4( 0.0, 0.0, 1.0, 1.0 );
```
Zbudowaliśmy `vec4` z dwóch `vec2`, przy czym nowy `vec4` użył `a.x` i `a.y` jako składowych `X` i `Y` wektora `c`.
Następnie wziął `b.x` i `b.y` i użył ich jako składowych `Z` i `W`.
Tak właśnie działa przeciążony konstruktor vec4, który akceptuje różne argumenty.
Oznacza to, że wiele wersji tej samej funkcji o różnych sygnaturach może współistnieć w jednym programie, na przykład następujące deklaracje są wszystkie poprawne:
```glsl
vec4 a = vec4(1.0, 1.0, 1.0, 1.0);
vec4 a = vec4(1.0);// x, y, z, w wszystkie są równe 1.0
vec4 a = vec4( v2, float, v4 );// vec4( v2.x, v2.y, float, v4.x );
vec4 a = vec4( v3, float );// vec4( v3.x, v3.y, v3.z, float );
etc.
```
Jedyne, na co musisz zwrócić uwagę, to dostarczenie wystarczającej liczby argumentów, aby wypełnić Twój **wektor**.
Ostatnia rzecz, możesz przeciążać wbudowane funkcje w swoim programie, aby przyjmowały argumenty, dla których nie zostały zaprojektowane (choć nie powinno się to zdarzać zbyt często).
#### inne typy
Wektory są fajne, to sedno Twojego shadera.
Istnieją inne prymitywy, takie jak macierze (Matrices) i próbki tekstur (Texture samplers), które zostaną omówione później w książce.
Możemy także używać tablic (Arrays). Oczywiście muszą być typowane, a przy tym występują pewne pułapki:
* mają ustalony rozmiar
* nie możesz używać metod push(), pop(), splice() itp., a właściwość ```length``` nie istnieje
* nie możesz od razu zainicjalizować ich wartościami
* musisz przypisywać wartości pojedynczo
to nie zadziała:
```glsl
int values[3] = [0,0,0];
```
ale to zadziała:
```glsl
int values[3];
values[0] = 0;
values[1] = 0;
values[2] = 0;
```
To jest w porządku, gdy znasz swoje dane lub masz małe tablice wartości.
Jeśli chcesz bardziej ekspresyjnego sposobu deklaracji zmiennej,
możesz użyć również typu ```struct```. Są one jak _obiekty_ bez metod;
pozwalają przechowywać i uzyskiwać dostęp do wielu zmiennych w jednym obiekcie.
```glsl
struct ColorStruct {
vec3 color0;
vec3 color1;
vec3 color2;
}
```
następnie możesz ustawiać i odczytywać wartości _kolorów_ w następujący sposób:
```glsl
// zainicjuj struct z jakimiś wartościami
ColorStruct sandy = ColorStruct( vec3(0.92,0.83,0.60),
vec3(1.,0.94,0.69),
vec3(0.95,0.86,0.69) );
// odczytaj wartość ze struct
sandy.color0 // vec3(0.92,0.83,0.60)
```
To lukier składniowy, ale może pomóc w pisaniu bardziej przejrzystego kodu, przynajmniej takiego, do którego jesteś przyzwyczajony.
#### instrukcje i warunki
Struktury danych są przydatne, ale może będziesz musiał iterować lub wykonywać testy warunkowe w pewnym momencie.
Na szczęście składnia jest bardzo zbliżona do tej w JavaScript.
Warunek wygląda tak:
```glsl
if( warunek ){
// prawda
}else{
// fałsz
}
```
Pętla for zazwyczaj wygląda tak:
```glsl
const int count = 10;
for( int i = 0; i <= count; i++){
// zrób coś
}
```
lub z iteratorem typu float:
```glsl
const float count = 10.;
for( float i = 0.0; i <= count; i+= 1.0 ){
// zrób coś
}
```
Zauważ, że `count` musi być zdefiniowane jako stała.
Oznacza to, że poprzedzasz typ kwalifikatorem `const`, o czym opowiem za chwilę.
Mamy również instrukcje ```break``` i ```continue```:
```glsl
const float count = 10.;
for( float i = 0.0; i <= count; i+= 1.0 ){
if( i < 5. )continue;
if( i >= 8. )break;
}
```
Miej na uwadze, że na niektórych urządzeniach instrukcja ```break``` może nie działać zgodnie z oczekiwaniami i pętla nie przerwie iteracji wcześniej.
Ogólnie rzecz biorąc, powinieneś utrzymywać liczbę iteracji na możliwie najniższym poziomie i unikać pętli oraz instrukcji warunkowych tak często, jak to możliwe.
#### kwalifikatory
Oprócz typów zmiennych, GLSL używa **kwalifikatorów**.
Krótko mówiąc, kwalifikatory pomagają kompilatorowi zrozumieć, jaka jest rola danej zmiennej.
Na przykład, niektóre dane mogą być dostarczane tylko przez CPU do GPU, nazywamy je **atrybutami** i **uniformami**.
**Atrybuty** są zarezerwowane dla vertex shaderów, a **uniformy** mogą być używane zarówno w vertex, jak i fragment shaderach.
Jest też kwalifikator ```varying```, służący do przekazywania zmiennych między vertex a fragment shaderem.
Nie będę zagłębiać się tutaj w szczegóły, ponieważ skupiamy się głównie na **fragment shaderze**, ale później w książce zobaczysz coś takiego:
```glsl
uniform vec2 u_resolution;
```
Widzisz, co zrobiliśmy? Dodaliśmy kwalifikator ```uniform``` przed typem zmiennej.
Oznacza to, że rozdzielczość kanwy, nad którą pracujemy, jest przekazywana do shadera z CPU.
Szerokość kanwy zapisana jest w komponencie x, a wysokość w komponencie y 2-wymiarowego wektora.
Gdy kompilator napotka zmienną poprzedzoną tym kwalifikatorem, upewni się, że nie możesz zmieniać tych wartości w czasie wykonywania programu.
To samo dotyczy naszej zmiennej ```count```, która była limitem w pętli ```for```:
```glsl
const float count = 10.;
for( ... )
```
Kiedy używamy kwalifikatora ```const```, kompilator upewni się, że wartość zmiennej zostanie ustawiona tylko raz, w przeciwnym razie nie jest to stała.
Istnieją trzy dodatkowe kwalifikatory używane w sygnaturach funkcji: in, out oraz inout.
W JavaScript, gdy przekazujesz prymitywne argumenty do funkcji, ich wartość jest tylko do odczytu, a jeśli zmienisz ich wartość wewnątrz funkcji,
zmiany nie mają wpływu na zmienną poza funkcją.
```glsl
function banana( a ){
a += 1;
}
var value = 0;
banana( value );
console.log( value );// > 0 ; zmiany nie są brane pod uwagę poza funkcją
```
With arguments qualifiers, you can specify the behaviour of the arguments:
* ```in``` will be read-only ( default )
* ```out``` write-only: you can't read the value of this argument but you can set it
* ```inout``` read-write: you can both get and set the value of this variable
Przepisanie funkcji banana do GLSL wyglądałoby tak:
```glsl
void banana( inout float a ){
a += 1.;
}
float A = 0.;
banana( A ); // teraz A = 1.;
```
To bardzo różni się od JS i jest również potężne, ale nie musisz jawnie określać kwalifikatorów w sygnaturze (domyślnie są one tylko do odczytu).
#### przestrzeń i współrzędne
Ostatnia uwaga: w DOM oraz w 2D Canvas jesteśmy przyzwyczajeni, że oś Y wskazuje w dół.
Ma to sens w kontekście DOM, ponieważ odpowiada sposobowi, w jaki rozwija się strona internetowa – pasek nawigacyjny na górze, zawartość rozciągająca się ku dołowi.
W kanwie WebGL oś Y jest odwrócona: Y wskazuje w górę.
Oznacza to, że punkt początkowy, czyli (0,0), znajduje się w lewym dolnym rogu kontekstu WebGL, a nie w lewym górnym, jak ma to miejsce w 2D Canvas.
Współrzędne tekstur podlegają tej zasadzie, co na początku może być nieintuicyjne.
## I to wszystko!
Oczywiście moglibyśmy zagłębić się w różne koncepcje, ale jak wspomniano wcześniej, chodziło o to, aby dać WIELKI UŚCISK nowoprzybyłym.
To sporo materiału do przyswojenia, ale z cierpliwością i praktyką stanie się to coraz bardziej naturalne.
Mam nadzieję, że część z tego okaże się przydatna. A teraz, co powiesz na rozpoczęcie swojej podróży przez tę książkę?

5
examples/README-pl.md Normal file
View File

@ -0,0 +1,5 @@
# Galeria przykładów
<p class="gallery_author">Stworzone przez <a href="https://www.kynd.info">kynd</a>(<a href="https://x.com/kyndinfo">@kyndinfo</a>) oraz Patricio Gonzalez Vivo (<a href="https://x.com/patriciogv">@patriciogv</a>)</p>
To jest zbiór przykładów wyciągniętych z rozdziałów tej książki, wraz z udostępnionymi shaderami hojnie przekazanymi przez innych czytelników korzystających z [edytora online](http://editor.thebookofshaders.com/). Zachęcamy do eksplorowania i modyfikowania ich krok po kroku. Gdy stworzysz coś, z czego będziesz dumny, kliknij "Export", a następnie skopiuj "URL do kodu...". Prześlij go do [@bookofshaders](https://x.com/bookofshaders) lub [@kyndinfo](https://x.com/kyndinfo). Nie możemy się doczekać, aby to zobaczyć!

6
footer.php
View File

@ -3,6 +3,12 @@
<footer>
<p> Copyright 2015 <a href="http://www.patriciogonzalezvivo.com" target="_blank">Patricio Gonzalez Vivo</a> </p>
</footer>
<script type="text/javascript">
// Setting the theme immediately inside the inline script prevents flicker
document.body.dataset.theme = localStorage.getItem('theme') || 'light';
</script>
<?php
echo '
<script type="text/javascript" src="'.$path.'/src/main.js" defer></script>';

21
glossary/abs/README-pl.md Normal file
View File

@ -0,0 +1,21 @@
## abs
Zwraca wartość bezwzględną z parametru.
### Deklaracja
```glsl
float abs(float x)
vec2 abs(vec2 x)
vec3 abs(vec3 x)
vec4 abs(vec4 x)
```
### Parametry
```x``` określa wartość, z której ma zostać zwrócona wartość bezwzględna.
### Opis
```abs()``` zwraca wartość bezwzględną z x.
<div class="simpleFunction" data="y = abs(x); "></div>
### Zobacz też
[sign()](/glossary/?lan=pl&search=sign), [min()](/glossary/?lan=pl&search=min), [max()](/glossary/?lan=pl&search=max), [Rozdział 05: Shaping Functions](../05/?lan=pl)

2
glossary/abs/README.md
View File

@ -10,7 +10,7 @@ vec4 abs(vec4 x)
```
### Parameters
```x``` specify the value of which to return the absolute.
```x``` specifies the value of which to return the absolute.
### Description
```abs()``` returns the absolute value of ```x```.

21
glossary/acos/README-pl.md Normal file
View File

@ -0,0 +1,21 @@
## acos
Zwraca arcus cosinus podanego argumentu
### Deklaracja
```glsl
float acos(float x)
vec2 acos(vec2 x)
vec3 acos(vec3 x)
vec4 acos(vec4 x)
```
### Parametry
```x``` wartość, której arcus cosinus ma zostać zwrócony.
### Opis
```acos()``` zwraca kąt, którego cosinus jest równy ```x```.
<div class="simpleFunction" data="y = acos(x); "></div>
### Zobacz też
[cos()](/glossary/?lan=pl&search=cos), [sin()](/glossary/?lan=pl&search=sin), [asin()](/glossary/?lan=pl&search=asin), [tan()](/glossary/?lan=pl&search=tan), [atan()](/glossary/?lan=pl&search=atan), [Rozdział 05: Shaping Functions](/05/?lan=pl)

2
glossary/acos/README.md
View File

@ -10,7 +10,7 @@ vec4 acos(vec4 x)
```
### Parameters
```x``` specify the value whose arccosine to return.
```x``` specifies the value whose arccosine to return.
### Description
```acos()``` returns the angle whose trigonometric cosine is ```x```.

29
glossary/all/README-pl.md Normal file
View File

@ -0,0 +1,29 @@
## all
Sprawdza, czy wszystkie elementy wektora logicznego są prawdziwe
### Deklaracja
```glsl
bool all(bvec2 x)
bool all(bvec3 x)
bool all(bvec4 x)
```
### Parametry
```x``` określa wektor, który ma zostać sprawdzony pod kątem prawdy.
### Opis
```all()``` zwraca ```true```, jeśli wszystkie elementy ```x``` są ```true``` i ```false``` w przeciwnym razie. Jest to funkcjonalnie równoważne:
```glsl
bool all(bvec x){ // bvec może być bvec2, bvec3 lub bvec4
bool result = true;
int i;
for (i = 0; i < x.length(); ++i)
{
result &= x[i];
}
return result;
}
```
### Zobacz też
[any()](/glossary/?lan=pl&search=any), [not()](/glossary/?lan=pl&search=not)

29
glossary/any/README-pl.md Normal file
View File

@ -0,0 +1,29 @@
## any
Sprawdza, czy choć jeden element wektora logicznego jest prawdziwy
### Deklaracja
```glsl
bool all(bvec2 x)
bool all(bvec3 x)
bool all(bvec4 x)
```
### Parametry
```x``` określa wektor, który ma zostać sprawdzony pod kątem prawdy.
### Opis
```all()``` zwraca ```true```, jeśli którykolwiek element ```x``` jest ```true``` i ```false``` w przeciwnym razie. Jest to funkcjonalnie równoważne:
```glsl
bool any(bvec x) { // bvec może być bvec2, bvec3 lub bvec4
bool result = false;
int i;
for (i = 0; i < x.length(); ++i) {
result |= x[i];
}
return result;
}
```
### Zobacz też
[any()](/glossary/?lan=pl&search=any), [not()](/glossary/?lan=pl&search=not)

21
glossary/asin/README-pl.md Normal file
View File

@ -0,0 +1,21 @@
## asin
Zwraca arcsin parametru
### Deklaracja
```glsl
float asin(float x)
vec2 asin(vec2 x)
vec3 asin(vec3 x)
vec4 asin(vec4 x)
```
### Parametry
```x``` określa wartość, której arcsin ma zostać zwrócony.
### Opis
```asin()``` zwraca kąt, którego sinus trygonometryczny to ```x```.
<div class="simpleFunction" data="y = asin(x); "></div>
### Zobacz też
[cos](/glossary/?lan=pl&search=cos), [sin](/glossary/?lan=pl&search=sin), [acos](/glossary/?lan=pl&search=acos), [tan](/glossary/?lan=pl&search=tan), [atan](/glossary/?lan=pl&search=atan), [Rozdział 05: Shaping Functions](/05/?lan=pl)

2
glossary/asin/README.md
View File

@ -10,7 +10,7 @@ vec4 asin(vec4 x)
```
### Parameters
```x``` specify the value whose arcsine to return.
```x``` specifies the value whose arcsine to return.
### Description
```asin()``` returns the angle whose trigonometric sine is ```x```.

32
glossary/atan/README-pl.md Normal file
View File

@ -0,0 +1,32 @@
## atan
Zwraca arcus tangens parametrów
### Deklaracja
```glsl
float atan(float y, float x)
vec2 atan(vec2 y, vec2 x)
vec3 atan(vec3 y, vec3 x)
vec4 atan(vec4 y, vec4 x)
float atan(float y_over_x)
vec2 atan(vec2 y_over_x)
vec3 atan(vec3 y_over_x)
vec4 atan(vec4 y_over_x)
```
### Parametry
```y``` określa licznik ułamka, którego arcus tangens ma zostać zwrócony.
```x``` określa mianownik ułamka, którego arcus tangens ma zostać zwrócony.
```y_over_x``` określa ułamek, którego arcus tangens ma zostać zwrócony.
### Opis
```atan()``` zwraca kąt, którego trygonometryczny arcus tangens jest równy ```y,x``` lub ```y_over_x```, w zależności od tego, który przeciążenie jest wywoływane. W pierwszym przeciążeniu znaki ```y``` i ```x``` są używane do określenia ćwiartki, w której znajduje się kąt. Wartości zwracane przez ```atan``` w tym przypadku mieszczą się w zakresie -PI i PI. Wyniki są niezdefiniowane, jeśli ```x``` wynosi zero.
Dla drugiego przeciążenia, ```atan()``` zwraca kąt, którego tangens wynosi ```y_over_x```. Wartości zwracane w tym przypadku mieszczą się w zakresie -PI do PI.
### Zobacz też
[cos](/glossary/?lan=pl&search=cos), [acos](/glossary/?lan=pl&search=acos), [sin](/glossary/?lan=pl&search=sin), [asin](/glossary/?lan=pl&search=asin), [atan](/glossary/?lan=pl&search=atan), [Rozdział 05: Shaping Functions](/05/), [Rozdział 06: Kolory](/06/)
[]: # (end)
[]: # (end)

8
glossary/atan/README.md
View File

@ -15,14 +15,14 @@ vec4 atan(vec4 y_over_x)
```
### Parameters
```y``` specify the numerator of the fraction whose arctangent to return.
```y``` specifies the numerator of the fraction whose arctangent to return.
```x``` specify the denominator of the fraction whose arctangent to return.
```x``` specifies the denominator of the fraction whose arctangent to return.
```y_over_x``` specify the fraction whose arctangent to return.
```y_over_x``` specifies the fraction whose arctangent to return.
### Description
```atan()``` returns the angle whose trigonometric arctangent is ```y,x``` or ```y_over_x```, depending on which overload is invoked. In the first overload, the signs of ```y``` and ```x``` are used to determine the quadrant that the angle lies in. The values returned by atan in this case are in the range -PI and PI. Results are undefined if ```x``` is zero.
```atan()``` returns the angle whose trigonometric arctangent is ```y,x``` or ```y_over_x```, depending on which overload is invoked. In the first overload, the signs of ```y``` and ```x``` are used to determine the quadrant that the angle lies in. The values returned by ```atan``` in this case are in the range -PI and PI. Results are undefined if ```x``` is zero.
For the second overload, ```atan()``` returns the angle whose tangent is ```y_over_x```. Values returned in this case are in the range -PI to PI.

15
glossary/attribute/README-pl.md Normal file
View File

@ -0,0 +1,15 @@
## attribute
Dane atrybutów wierzchołka.
### Przykład
```glsl
attribute vec4 v_color;
```
### Opis
`attribute` to zmienne tylko do odczytu, zawierające dane udostępniane z środowiska WebGL/OpenGL do vertex shadera.
Ponieważ vertex shader jest uruchamiany raz dla każdego wierzchołka, atrybuty określają dane specyficzne dla poszczególnych wierzchołków, takie jak: pozycja w przestrzeni, kolor, kierunek wektora normalnego czy współrzędne tekstury.
### Zobacz też
[const](/glossary/?lan=pl&search=const), [uniform](/glossary/?lan=pl&search=uniform), [varying](/glossary/?lan=pl&search=varying), [Rozdział 03: Uniformy](/03/?lan=pl)

15
glossary/bool/README-pl.md Normal file
View File

@ -0,0 +1,15 @@
## bool
Typ zmiennej logicznej
### Deklaracja
```glsl
bool aBool = true;
bool bBool = bool(aInt);
bool cBool = bool(aFloat);
```
### Opis
`bool` może przyjmować dwie wartości: `true` lub `false`.
### Zobacz też
[void](/glossary/?lan=pl&search=void), [bool](/glossary/?lan=pl&search=bool), [int](/glossary/?lan=pl&search=int), [float](/glossary/?lan=pl&search=float), [bvec2](/glossary/?lan=pl&search=bvec2), [bvec3](/glossary/?lan=pl&search=bvec3), [bvec4](/glossary/?lan=pl&search=bvec4), [struct](/glossary/?lan=pl&search=struct)

21
glossary/bvec2/README-pl.md Normal file
View File

@ -0,0 +1,21 @@
## bvec2
2-wymiarowy wektor `bool`owski
### Deklaracja
```glsl
bvec2 aBvec2 = bvec2(true, true);
bvec2 bBvec2 = bvec2(true);
bvec2 cBvec2 = bvec2(aBvec3);
bvec2 dBvec2 = bvec2(aBvec3.x, aBvec3.y);
```
### Opis
`bvec2` to wektor `bool`owski z dwoma komponentami. Można go zainicjalizować:
- Podając wartość skalarną dla każdego komponentu.
- Podając jedną wartośś skalarną. Zostanie ona przypisana do wszystkich komponentów.
- Podając wektor o wyższym wymiarze. Odpowiednie wartości zostaną użyte do inicjalizacji komponentów.
### Zobacz też
[bool](/glossary/?lan=pl&search=bool), [int](/glossary/?lan=pl&search=int), [float](/glossary/?lan=pl&search=float), [bvec2](/glossary/?lan=pl&search=bvec2), [bvec3](/glossary/?lan=pl&search=bvec3), [bvec4](/glossary/?lan=pl&search=bvec4), [ivec2](/glossary/?lan=pl&search=ivec2), [ivec3](/glossary/?lan=pl&search=ivec3), [ivec4](/glossary/?lan=pl&search=ivec4), [vec2](/glossary/?lan=pl&search=vec2), [vec3](/glossary/?lan=pl&search=vec3), [vec4](/glossary/?lan=pl&search=vec4), [mat2](/glossary/?lan=pl&search=mat2), [mat3](/glossary/?lan=pl&search=mat3), [mat4](/glossary/?lan=pl&search=mat4)

25
glossary/bvec3/README-pl.md Normal file
View File

@ -0,0 +1,25 @@
## bvec3
3-wymiarowy wektor `bool`owski
### Deklaracja
```glsl
vec3 aBvec3 = bvec3(true, true, true);
vec3 bBvec3 = bvec3(true);
vec3 cBvec3 = bvec3(aBvec4);
vec3 dBvec3 = bvec3(aBvec4.x, aBvec4.y, aBvec4.z);
vec3 eBvec3 = bvec3(aBvec2, aBool);
vec3 fBvec3 = bvec3(aBvec2.x, aBvec2.y, aBool);
```
### Opis
`bvec3` to wektor `bool`owski z trzema komponentami. Można go zainicjalizować:
- Podając wartość skalarną dla każdego komponentu.
- Podając jedną wartość skalarną – zostanie ona przypisana do wszystkich komponentów.
- Podając wektor o wyższym wymiarze – odpowiednie wartości zostaną użyte do inicjalizacji komponentów.
- Podając kombinację wektorów i/lub skalarów – odpowiednie wartości zostaną użyte do inicjalizacji wektora. Argumenty konstruktora muszą zawierać co najmniej tyle komponentów, ile ma inicjalizowany wektor.
### Zobacz też
[bool](/glossary/?lan=pl&search=bool), [int](/glossary/?lan=pl&search=int), [float](/glossary/?lan=pl&search=float), [bvec2](/glossary/?lan=pl&search=bvec2), [bvec3](/glossary/?lan=pl&search=bvec3), [bvec4](/glossary/?lan=pl&search=bvec4), [ivec2](/glossary/?lan=pl&search=ivec2), [ivec3](/glossary/?lan=pl&search=ivec3), [ivec4](/glossary/?lan=pl&search=ivec4), [vec2](/glossary/?lan=pl&search=vec2), [vec3](/glossary/?lan=pl&search=vec3), [vec4](/glossary/?lan=pl&search=vec4), [mat2](/glossary/?lan=pl&search=mat2), [mat3](/glossary/?lan=pl&search=mat3), [mat4](/glossary/?lan=pl&search=mat4)

21
glossary/bvec4/README-pl.md Normal file
View File

@ -0,0 +1,21 @@
## bvec4
4-wymiarowy wektor `bool`owski
### Deklaracja
```glsl
vec4 aBvec4 = bvec4(true, true, true, true);
vec4 bBvec4 = bvec4(true);
vec4 cBvec4 = bvec4(aBvec2, aBool, aBvec3);
vec4 dBvec4 = bvec4(aBvec2.x, aBvec2.y, aBool, aBvec3.x);
```
### Opis
`bvec4` to wektor `bool`owski mający cztery składowe. Można go zainicjalizować:
- Podając osobną wartość skalarną dla każdej składowej.
- Podając jedną wartość skalarną. Wartość ta zostanie użyta dla wszystkich składowych.
- Podając kombinację wektorów i skalarów. Odpowiednie wartości zostaną użyte do inicjalizacji składowych. Argumenty konstruktora muszą mieć przynajmniej tyle składowych, ile wynosi rozmiar inicjalizowanego wektora.
### Zobacz też
[bool](/glossary/?lan=pl&search=bool), [int](/glossary/?lan=pl&search=int), [float](/glossary/?lan=pl&search=float), [bvec2](/glossary/?lan=pl&search=bvec2), [bvec3](/glossary/?lan=pl&search=bvec3), [bvec4](/glossary/?lan=pl&search=bvec4), [ivec2](/glossary/?lan=pl&search=ivec2), [ivec3](/glossary/?lan=pl&search=ivec3), [ivec4](/glossary/?lan=pl&search=ivec4), [vec2](/glossary/?lan=pl&search=vec2), [vec3](/glossary/?lan=pl&search=vec3), [vec4](/glossary/?lan=pl&search=vec4), [mat2](/glossary/?lan=pl&search=mat2), [mat3](/glossary/?lan=pl&search=mat3), [mat4](/glossary/?lan=pl&search=mat4)

21
glossary/ceil/README-pl.md Normal file
View File

@ -0,0 +1,21 @@
## ceil
Znajduje najbliższą liczbę całkowitą, która jest większa lub równa podanemu parametrowi
### Deklaracja
```glsl
float ceil(float x)
vec2 ceil(vec2 x)
vec3 ceil(vec3 x)
vec4 ceil(vec4 x)
```
### Parametry
```x``` określa wartość do ewaluacji
### Opis
```ceil()``` zwraca wartość równą najbliższej liczbie całkowitej, która jest większa bądź równa ```x```.
<div class="simpleFunction" data="y = ceil(x);"></div>
### Zobacz też
[floor](/glossary/?lan=pl&search=floor), [fract](/glossary/?lan=pl&search=fract), [mod](/glossary/?lan=pl&search=mod), [Rozdział 05: Shaping Functions](/05/?lan=pl)

2
glossary/ceil/README.md
View File

@ -10,7 +10,7 @@ vec4 ceil(vec4 x)
```
### Parameters
```x``` specify the value to evaluate.
```x``` specifies the value to evaluate.
### Description
```ceil()``` returns a value equal to the nearest integer that is greater than or equal to ```x```.

29
glossary/clamp/README-pl.md Normal file
View File

@ -0,0 +1,29 @@
## clamp
Ogranicza wartość, aby mieściła się między dwoma skrajnymi wartościami
### Deklaracja
```glsl
float clamp(float x, float minVal, float maxVal)
vec2 clamp(vec2 x, vec2 minVal, vec2 maxVal)
vec3 clamp(vec3 x, vec3 minVal, vec3 maxVal)
vec4 clamp(vec4 x, vec4 minVal, vec4 maxVal)
vec2 clamp(vec2 x, float minVal, float maxVal)
vec3 clamp(vec3 x, float minVal, float maxVal)
vec4 clamp(vec4 x, float minVal, float maxVal)
```
### Parametry
```x``` określa wartość, którą należy ograniczyć.
```minVal``` określa dolną granicę zakresu, w którym będzie ograniczana wartość x.
```maxVal``` określa górną granicę zakresu, w którym będzie ograniczana wartość x.
### Opis
```clamp()``` zwraca wartość ```x``` ograniczoną do zakresu od ```minVal``` do ```maxVal```. Zwrócona wartość obliczana jest jako ```min(max(x, minVal), maxVal)```.
<div class="simpleFunction" data="y = clamp(x,0.,1.);"></div>
### Zobacz też
[min](/glossary/?lan=pl&search=min), [abs](/glossary/?lan=pl&search=abs), [max](/glossary/?lan=pl&search=max)

6
glossary/clamp/README.md
View File

@ -14,11 +14,11 @@ vec4 clamp(vec4 x, float minVal, float maxVal)
```
### Parameters
```x``` specify the value to constrain.
```x``` specifies the value to constrain.
```minVal``` specify the lower end of the range into which to constrain x.
```minVal``` specifies the lower end of the range into which to constrain x.
```maxVal``` specify the upper end of the range into which to constrain x.
```maxVal``` specifies the upper end of the range into which to constrain x.
### Description
```clamp()``` returns the value of ```x``` constrained to the range ```minVal``` to ```maxVal```. The returned value is computed as ```min(max(x, minVal), maxVal)```.

13
glossary/const/README-pl.md Normal file
View File

@ -0,0 +1,13 @@
## const
Kwalifikator stały
### Przykład
```glsl
const float PI = 3.14159265359;
```
### Opis
Kwalifikator ```const``` może być zastosowany do deklaracji dowolnej zmiennej, aby określić, że jej wartość nie ulegnie zmianie.
### Zobacz też
[attribute](/glossary/?lan=pl&search=attribute), [uniform](/glossary/?lan=pl&search=uniform), [varying](/glossary/?lan=pl&search=varying)

21
glossary/cos/README-pl.md Normal file
View File

@ -0,0 +1,21 @@
## cos
Zwraca cosinus podanego parametru
### Deklaracja
```glsl
float cos(float angle)
vec2 cos(vec2 angle)
vec3 cos(vec3 angle)
vec4 cos(vec4 angle)
```
### Parametry
```angle``` określa wartość (w radianach), dla której ma zostać zwrócony cosinus.
### Opis
```cos()``` zwraca trygonometryczny cosinus podanego kąta.
<div class="simpleFunction" data="y = cos(x); "></div>
### Zobacz też
[acos](/glossary/?lan=pl&search=acos), [sin](/glossary/?lan=pl&search=sin), [asin](/glossary/?lan=pl&search=asin), [tan](/glossary/?lan=pl&search=tan), [atan](/glossary/?lan=pl&search=atan), [Rozdział 05: Shaping Functions](/05/?lan=pl)

18
glossary/cross/README-pl.md Normal file
View File

@ -0,0 +1,18 @@
## cross
Oblicza iloczyn wektorowy dwóch wektorów
### Deklaracja
```glsl
vec3 cross(vec3 x, vec3 y)
```
### Parametry
```x``` określa pierwszy z dwóch wektorów
```y``` określa drugi z dwóch wektorów
### Opis
```cross()``` zwraca iloczyn wektorowy dwóch wektorów, ```x``` i ```y```. Parametry wejściowe mogą być wyłącznie 3-składowymi wektorami zmiennoprzecinkowymi. Iloczyn wektorowy jest równoważny iloczynowi długości tych wektorów pomnożonemu przez sinus (mniejszego) kąta między ```x``` i ```y```.
### Zobacz też
[dot](/glossary/?lan=pl&search=dot)

16
glossary/dFdx/README-pl.md Normal file
View File

@ -0,0 +1,16 @@
## dFdx
Zwraca pochodną cząstkową podanego wyrażenia względem x
### Deklaracja
```glsl
genType dFdx(float x);
```
### Parametry
```p``` określa wyrażenie, dla którego chcemy obliczyć pochodną cząstkową.
### Opis
Dostępna wyłącznie w fragment shaderze , ```dFdx``` zwraca pochodną cząstkową wyrażenia ```p``` względem ```x```. Pochodne obliczane są poprzez lokalne różnicowanie. Wyrażenia oznaczające pochodne wyższego rzędu, takie jak ```dFdx(dFdx(n))```, zwracają niezdefiniowane wyniki, podobnie jak mieszane pochodne, np. ```dFdx(dFdy(n))```. Przyjmuje się, że wyrażenie ```p``` jest ciągłe, więc wyrażenia oceniane w warunkowym przepływie sterowania (non-uniform control flow) mogą być niezdefiniowane.
### Zobacz też
[dFdy](/glossary/?lan=pl&search=dFdy)

16
glossary/dFdy/README-pl.md Normal file
View File

@ -0,0 +1,16 @@
## dFdy
Zwraca pochodną cząstkową podanego wyrażenia względem y
### Deklaracja
```glsl
genType dFdy(float y);
```
### Parametry
```p``` określa wyrażenie, dla którego chcemy obliczyć pochodną cząstkową.
### Opis
Dostępna wyłącznie w fragment shaderze, ```dFdy``` zwraca pochodną cząstkową wyrażenia ```p``` względem ```y```. Pochodne obliczane są poprzez lokalne różnicowanie. Wyrażenia oznaczające pochodne wyższego rzędu, takie jak ```dFdy(dFdy(n))```, zwracają niezdefiniowane wyniki, podobnie jak mieszane pochodne, np. ```dFdy(dFdx(n))```. Przyjmuje się, że wyrażenie ```p``` jest ciągłe, więc wyrażenia oceniane w warunkowym przepływie sterowania (non-uniform control flow) mogą być niezdefiniowane.
### Zobacz też
[dFdx](/glossary/?lan=pl&search=dfdx)

19
glossary/degrees/README-pl.md Normal file
View File

@ -0,0 +1,19 @@
## degrees
Konwertuje wielkość w radianach na stopnie
### Deklaracja
```glsl
float degrees(float radians)
vec2 degrees(vec2 radians)
vec3 degrees(vec3 radians)
vec4 degrees(vec4 radians)
```
### Parametry
```radians``` określa wielkość (w radianach), która ma zostać zamieniona na stopnie.
### Opis
```degrees()``` konwertuje wielkość wyrażoną w radianach na stopnie. Oznacza to, że wartość zwracana to ```(180.0*radians)/PI```.
### Zobacz też
[radians](/glossary/?lan=pl&search=radians)

2
glossary/degrees/README.md
View File

@ -10,7 +10,7 @@ vec4 degrees(vec4 radians)
```
### Parameters
```radians``` specify the quantity, in radians, to be converted to degrees.
```radians``` specifies the quantity, in radians, to be converted to degrees.
### Description
```degrees()``` converts a quantity, specified in radians into degrees. That is, the return value is ```(180.0*radians)/PI```

23
glossary/distance/README-pl.md Normal file
View File

@ -0,0 +1,23 @@
## distance
Oblicza odległość między dwoma punktami
### Deklaracja
```glsl
float distance(float p0, float p1)
float distance(vec2 p0, vec2 p1)
float distance(vec3 p0, vec3 p1)
float distance(vec4 p0, vec4 p1)
```
### Parametry
```p0``` określa pierwszy z dwóch punktów
```p1``` określa drugi z dwóch punktów
### Opis
```distance()``` zwraca odległość pomiędzy dwoma punktami ```p0``` i ```p1```.
<div class="codeAndCanvas" data="../07/circle-making.frag"></div>
### Zobacz też
[length](/glossary/?lan=pl&search=length), [normalize](/glossary/?lan=pl&search=normalize), [Rozdział 07: Kształty](/07/?lan=pl)

24
glossary/dot/README-pl.md Normal file
View File

@ -0,0 +1,24 @@
## dot
Oblicza iloczyn skalarny (dot product) dwóch wektorów
### Deklaracja
```glsl
float dot(float x, float y)
float dot(vec2 x, vec2 y)
float dot(vec3 x, vec3 y)
float dot(vec4 x, vec4 y)
```
### Parametry
```x``` określa pierwszy z dwóch wektorów
```y``` określa drugi z dwóch wektorów
### Opis
```dot()``` zwraca iloczyn skalarny dwóch wektorów, ```x``` i ```y```, tzn. ```x[0]⋅y[0] + x[1]⋅y[1] + ...```
Jeśli ```x``` i ```y``` są identyczne, wówczas pierwiastek kwadratowy z iloczynu skalarnego jest równoważny długości wektora. Parametry wejściowe mogą być skalarnymi wartościami zmiennoprzecinkowymi lub wektorami zmiennoprzecinkowymi. W przypadku skalarów obliczenia sprowadzają się do pomnożenia ```x``` przez ```y```.
<div class="codeAndCanvas" data="../07/circle.frag"></div>
### Zobacz też
[cross](/glossary/?lan=pl&search=cross), [Rozdział 07: Kształty](/07/?lan=pl)

4
glossary/equal/README.md
View File

@ -13,9 +13,9 @@ bvec4 equal(ivec4 x, ivec4 y)
```
### Parameters
```x``` Specifies the first vector to be used in the comparison operation.
```x``` specifies the first vector to be used in the comparison operation.
```y``` Specifies the second vector to be used in the comparison operation.
```y``` specifies the second vector to be used in the comparison operation.
### Description
```equal()``` returns a boolean vector in which each element ```i``` is computed as ```x[i] == y[i]```.

2
glossary/exp/README.md
View File

@ -10,7 +10,7 @@ vec4 exp(vec4 x)
```
### Parameters
```x``` specify the value to exponentiate.
```x``` specifies the value to exponentiate.
### Description
```exp()``` returns the natural exponentiation of ```x```.

2
glossary/exp2/README.md
View File

@ -10,7 +10,7 @@ vec4 exp2(vec4 x)
```
### Parameters
```x``` specify the value of the power to which 2 will be raised.
```x``` specifies the value of the power to which 2 will be raised.
### Description
```exp2()``` returns 2 raised to the power of ```x```.

2
glossary/floor/README.md
View File

@ -10,7 +10,7 @@ vec4 floor(vec4 x)
```
### Parameters
```x``` specify the value to evaluate.
```x``` specifies the value to evaluate.
### Description
```floor()``` returns a value equal to the nearest integer that is less than or equal to ```x```.

2
glossary/fract/README.md
View File

@ -10,7 +10,7 @@ vec4 fract(vec4 x)
```
### Parameters
```x``` specify the value to evaluate.
```x``` specifies the value to evaluate.
### Description
```fract()``` returns the fractional part of ```x```. This is calculated as ```x - floor(x)```.

2
glossary/inversesqrt/README.md
View File

@ -10,7 +10,7 @@ vec4 inversesqrt(vec4 x)
```
### Parameters
```x``` specify the value of which to take the inverse of the square root.
```x``` specifies the value of which to take the inverse of the square root.
### Description
```inversesqrt()``` returns the inverse of the square root of ```x```.

2
glossary/log/README.md
View File

@ -10,7 +10,7 @@ vec4 log(vec4 x)
```
### Parameters
```x``` specify the value of which to take the natural logarithm.
```x``` specifies the value of which to take the natural logarithm.
### Description
```log()``` returns the natural logarithm of ```x```.

2
glossary/log2/README.md
View File

@ -10,7 +10,7 @@ vec4 log2(vec4 x)
```
### Parameters
```x``` specify the value of which to take the base 2 logarithm.
```x``` specifies the value of which to take the base 2 logarithm.
### Description
```log2()``` returns the base 2 logarithm of ```x```.

4
glossary/max/README.md
View File

@ -14,9 +14,9 @@ vec4 max(vec4 x, float y)
```
### Parameters
```x``` specify the first value to compare.
```x``` specifies the first value to compare.
```y``` specify the second value to compare.
```y``` specifies the second value to compare.
### Description
```max()``` returns the maximum of the two parameters. It returns ```y``` if ```y``` is greater than ```x```, otherwise it returns ```x```.

4
glossary/min/README.md
View File

@ -14,9 +14,9 @@ vec4 min(vec4 x, float y)
```
### Parameters
```x``` specify the first value to compare.
```x``` specifies the first value to compare.
```y``` specify the second value to compare.
```y``` specifies the second value to compare.
### Description
```min()``` returns the minimum of the two parameters. It returns ```y``` if ```y``` is less than ```x```, otherwise it returns ```x```.

6
glossary/mix/README.md
View File

@ -14,11 +14,11 @@ vec4 mix(vec4 x, vec4 y, float a)
```
### Parameters
```x``` Specify the start of the range in which to interpolate.
```x``` specifies the start of the range in which to interpolate.
```y``` Specify the end of the range in which to interpolate.
```y``` specifies the end of the range in which to interpolate.
```a``` Specify the value to use to interpolate between x and y.
```a``` specifies the value to use to interpolate between x and y.
### Description
```mix()``` performs a linear interpolation between ```x``` and ```y``` using ```a``` to weight between them. The return value is computed as ```x×(1−a)+y×a```.

4
glossary/mod/README.md
View File

@ -14,8 +14,8 @@ vec4 mod(vec4 x, float y)
```
### Parameters
```x``` specify the value to evaluate.
```y``` specify the value to obtain the modulo of.
```x``` specifies the value to evaluate.
```y``` specifies the value to obtain the modulo of.
### Description
```mod()``` returns the value of ```x``` modulo ```y```. This is computed as ```x - y * floor(x/y)```.

4
glossary/pow/README.md
View File

@ -10,9 +10,9 @@ vec4 pow(vec4 x, vec4 y)
```
### Parameters
```x``` specify the value to raise to the power ```y```.
```x``` specifies the value to raise to the power ```y```.
```y``` specify the power to which to raise ```x```.
```y``` specifies the power to which to raise ```x```.
### Description
```pow()``` returns the value of ```x``` raised to the ```y``` power.

2
glossary/radians/README.md
View File

@ -10,7 +10,7 @@ vec4 radians(vec4 degrees)
```
### Parameters
```degrees``` specify the quantity, in degrees, to be converted to radians.
```degrees``` specifies the quantity, in degrees, to be converted to radians.
### Description
```radians()``` converts a quantity, specified in degrees into radians. That is, the return value is ```(PI * degrees)/180```.

2
glossary/sign/README.md
View File

@ -10,7 +10,7 @@ vec4 sign(vec4 x)
```
### Parameters
```x``` specify the value from which to extract the sign.
```x``` specifies the value from which to extract the sign.
### Description
```sign()``` returns -1.0 if x is less than 0.0, 0.0 if x is equal to 0.0, and +1.0 if x is greater than 0.0.

21
glossary/sin/README-pl.md Normal file
View File

@ -0,0 +1,21 @@
## Sin
Zwraca sinus podanego argumentu
### Deklaracja
```glsl
float sin(float angle)
vec2 sin(vec2 angle)
vec3 sin(vec3 angle)
vec4 sin(vec4 angle)
```
### Parametry
```angle``` określa wartość kąta (w radianach), dla którego ma zostać obliczony sinus.
### Opis
```sin()``` zwraca trygonometryczny sinus podanego kąta.
<div class="simpleFunction" data="y = sin(x); "></div>
### Zobacz także
[acos](/glossary/?lan=pl&search=acos), [cos](/glossary/?lan=pl&search=cos), [asin](/glossary/?lan=pl&search=asin), [tan](/glossary/?lan=pl&search=tan), [atan](/glossary/?lan=pl&search=atan), [Rozdział 05: Shaping Functions](/05/?lan=pl)

2
glossary/sin/README.md
View File

@ -10,7 +10,7 @@ vec4 sin(vec4 angle)
```
### Parameters
```angle``` specify the quantity, in radians, of which to return the sine.
```angle``` specifies the quantity, in radians, of which to return the sine.
### Description
```sin()``` returns the trigonometric sine of angle.

2
glossary/sqrt/README.md
View File

@ -10,7 +10,7 @@ vec4 sqrt(vec4 x)
```
### Parameters
```x``` specify the value of which to take the square root.
```x``` specifies the value of which to take the square root.
### Description
```sqrt()``` returns the square root of ```x```.

2
glossary/step/README.md
View File

@ -16,7 +16,7 @@ vec4 step(float edge, vec4 x)
### Parameters
```edge``` specifies the location of the edge of the step function.
```x``` specify the value to be used to generate the step function.
```x``` specifies the value to be used to generate the step function.
### Description
```step()``` generates a step function by comparing ```x``` to ```edge```.

2
glossary/struct/README.md
View File

@ -17,4 +17,4 @@ newMaterial = matStruct(vec4(0.1, 0.1, 0.1, 1.0),
```
### Description
```struct``` declare a custom data structures based on standard types. A constructor for the structure with the same name is created automatically. The declaration of a variable (in this case "newMaterial") is optional.
```struct``` declares a custom data structure based on standard types. A constructor for the structure with the same name is created automatically. The declaration of a variable (in this case "newMaterial") is optional.

2
glossary/tan/README.md
View File

@ -10,7 +10,7 @@ vec4 tan(vec4 angle)
```
### Parameters
```angle``` specify the quantity, in radians, of which to return the tangent.
```angle``` specifies the quantity, in radians, of which to return the tangent.
### Description
```tan()``` returns the trigonometric tangent of angle.