|
|
# Вступ
|
|
|
|
|
|
<canvas id="custom" class="canvas" data-fragment-url="cmyk-halftone.frag" data-textures="vangogh.jpg" width="700px" height="320px"></canvas>
|
|
|
|
|
|
Наведені вище зображення були зроблені різними способами. Перше намальовано рукою Ван Гога з поступовим нанесенням фарби шар за шаром. Це зайняло в нього години. Друге було створено миттєво за допомоги комбінації чотирьох матриць пікселів різних кольорів: ціанового, пурпурового, жовтого та чорного. Ключова відмінність полягає в тому, що друге зображення отримано не послідовним чином, тобто не поступово крок за кроком, а усе одночасно.
|
|
|
|
|
|
Ця книга про революційну техніку обчислювання - *фрагментні шейдери* - яка виводить генерацію цифрових зображень на новий рівень. Ви можете думати про це як про своєрідний еквівалент преса Гутенберга для графіки.
|
|
|
|
|
|
|
|
|
|
|
|
Фрагментні шейдери дають вам повний контроль над пікселями екрану із надзвичайно високою швидкістю. Ось чому вони використовуються у самих різних випадках, від відеофільтрів на мобільних телефонах до неймовірних 3D-ігор.
|
|
|
|
|
|
|
|
|
|
|
|
У наступних розділах ви дізнаєтесь, наскільки неймовірно швидка і потужна ця техніка та як застосувати її у своїх професійних та особистих проєктах.
|
|
|
|
|
|
## Для кого ця книга?
|
|
|
|
|
|
Книга написана для творчих програмістів, розробників ігор та інженерів, які мають досвід програмування, базові знання лінійної алгебри та тригонометрії й бажають вивести свою роботу на захопливий новий рівень графічної якості. Якщо ви тільки починаєте і хочете навчитися програмувати, я наполегливо рекомендую вам почати з [Processing](https://processing.org/) і повернутися пізніше, коли освоїтесь.
|
|
|
|
|
|
Ця книга навчить вас використовувати та інтегрувати шейдери у ваші проєкти, покращуючи їхню продуктивність і графічну якість. Оскільки GLSL (OpenGL Shading Language) шейдери компілюються і працюють на різних платформах, ви зможете застосувати отримані тут знання до будь-якого середовища, яке використовує OpenGL, OpenGL ES або WebGL. Іншими словами, ви зможете застосовувати та використовувати свої знання у [Processing](https://processing.org/)-скетчах, [openFrameworks](http://openframeworks.cc/) програмах, інтерактивних інсталяціях [Cinder](http ://libcinder.org/), веб-сайтах з [Three.js](http://threejs.org/) або iOS/Android іграх.
|
|
|
|
|
|
## Про що йдеться в цій книзі?
|
|
|
|
|
|
Ця книга буде присвячена використанню піксельних GLSL шейдерів. Спочатку ми визначимо, що таке шейдери, а потім навчимося створювати за їх допомогою процедурні форми, візерунки, текстури та анімацію. Ви вивчите основи мови шейдерів та застосуєте її до більш корисних задач, таких як: обробка зображень (різні операції із зображеннями, згортання матриці, розмиття, кольорові фільтри, таблиці пошуку та інші ефекти) і симуляції ("гра життя" Конвея, реакційно-дифузійна модель Грея-Скотта, брижі води, акварельні ефекти, комірки Вороного тощо). Ближче до кінця книги ми побачимо набір передових технік, заснованих на Ray Marching (алгоритми трасування променів).
|
|
|
|
|
|
*У кожному розділі є інтерактивні приклади, з кодом яких можна взаємодіяти.* При редагуванні коду ви одразу побачите відповідні зміни. Описані поняття можуть бути абстрактними та незрозумілими, тому інтерактивні приклади будуть корисними при вивченні матеріалу. Чим швидше ви побачите концепції в дії, тим легшим буде процес навчання.
|
|
|
|
|
|
Що не розглядається в цій книзі:
|
|
|
|
|
|
* Це *не* книга з openGL або webGL. OpenGL/webGL є більш обширною темою, ніж GLSL або фрагментні шейдери. Щоб дізнатися більше про openGL/webGL, я рекомендую переглянути: [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) (також відома як червона книга) або [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)
|
|
|
|
|
|
* Це *не* підручник з математики. Хоча ми розглянемо низку алгоритмів і методів, які спираються на розуміння алгебри та тригонометрії, ми не будемо пояснювати їх докладно. Якщо у вас виникнуть запитання щодо математики, я рекомендую тримати під рукою одну з таких книг як: [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) або [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).
|
|
|
|
|
|
## Що потрібно для початку?
|
|
|
|
|
|
Не багато! Якщо у вас є сучасний браузер, який підтримує WebGL (наприклад, Chrome, Firefox або Safari) і підключення до Інтернету, просто натисніть кнопку «Next» в кінці цієї сторінки.
|
|
|
|
|
|
Окрім того, в залежності від вашого бажання, ви можете:
|
|
|
|
|
|
- [Зробити офлайн-версію книги](https://thebookofshaders.com/appendix/00/?lan=ua)
|
|
|
|
|
|
- [Запустити приклади на Raspberry Pi без браузера](https://thebookofshaders.com/appendix/01/?lan=ua)
|
|
|
|
|
|
- [Зібрати PDF-версію книги для друку](https://thebookofshaders.com/appendix/02/?lan=ua)
|
|
|
|
|
|
- Переглянути [GitHub-репозиторій книги](https://github.com/patriciogonzalezvivo/thebookofshaders) для виправлення помилок або поділитися своїми прикладами коду.
|