Якщо ви хочете працювати з OpenGL ES 2.0, то вам слід знати деякі основи шейдеров. Libgdx поставляється зі стандартним шейдером, який подбати про візуалізації деякі речей через SpriteBatch. Однак, якщо ви хочете зробити візуалізацію полігональної сітки (Mesh) в Opengl ES 2.0, то вам потрібно надати свій, правильний шейдер. В основному, вся візуалізація в Opengl ES 2.0 робиться за допомогою шейдеров. Ось чому це називається програмованим конвеєром. Думка про втручання в область шейдеров, може відлякати деяких людей від використання ES 2.0, але варто добре почитати про них, як шейдери дозволяють вам робити неймовірно красиві речі. Зрозуміти основи насправді досить просто.
Що таке шейдери
вершинні шейдери
Виходячи з назви, вершинні Вейдер відповідають за виконання операцій на вершинами. Більш конкретно, кожне виконання програми діє рівно на одну вершину. Це важлива для розуміння концепція. Все, що ви робите в вершинні шейдери, відбувається тільки рівно з однією вершиною.
Ось простий приклад вершинного шейдера:
Тепер все виглядає непогано, чи не так? Спочатку ви повинні мати атрибут вершини a_position. Цей атрибут є vec4. що означає вектор з 4 вимірами. Цьому прикладі він містить інформацію про позиції вершини.
Далі у вас є u_projectionViewMatrix. Цей матриця 4x4, яка утримуємо дані для перетворення проекції і виду. Якщо ці терміни вам не ясні, то рекомендується прочитати про перспективу і ізометричної проекції.
Усередині main методу ми виконуємо операції над вершиною. В даному випадку, все що робить шейдер, це примножує позицію вершини на матрицю і привласнює результат gl_Position. gl_Position це ключове слово зумовлене OpenGL і не може бути використано для нічого, крім передачі обробленої вершини.
фрагментного шейдери
Функції фрагментного шейдера дуже схожі на верховий шейдер, але замість обробки вершин, він обробляє як кожен фрагмент один раз. Для простоти, вважайте фрагмент як один піксель. Тепер ви розумієте, що ця дуже суттєва різниця.
Давайте припустимо, що трикутник займає площу в 300 пікселів. Верховий шейдер для цього трикутника буде виконаний 3 рази. Фрагментний шейдер буде виконаний 300 разів. Тому, майте це на увазі при написанні шейдеров. Все що робиться в фрагментного шейдера, буде експоненціально більш дорожче.
Ось дуже простий Фрагментний шейдер:
Цей Фрагментний шейдер буде просто малювати кожен фрагмент суцільним червоним кольором. gl_FragColor це інше зумовлене ключове слово. Воно використовується для виведення остаточного кольору фрагмента. Зверніть увагу, як ми використовуємо vec4 (x, y, z, w). щоб визначити вектор всередині шейдера. В даному випадку, вектор використаний для визначення кольору фрагмента.
ShaderProgram
Тепер у нас є спільне розуміння того, що робить шейдер і як він працює. Давайте створимо його в libgdx. Це робиться за допомогою ShaderProgram класу. ShaderProgram складається з вершинного і фрагментного шейдеров. Ви можете робити завантаження з файлу або просто передати рядок і містити код шейдера всередині ваших java файлів.
Ось установка шейдера, з якої будемо працювати:
Це досить стандартна установка для шейдера, який використовує атрибут позиції, атрибут кольору і атрибут текстурних координат. Зверніть увагу на перші два зміни, вироблені шейдером. Вони видають результат, який ми передаємо в Фрагментний шейдер.
У фрагментного шейдера у нас є sampler2D. це спеціальний форма використовується для текстур. Як ви можете бачити в main функції, ми множимо колір вершини на знайдений колір з текстури для отримання остаточного висновку кольору.
Щоб створити ShaderProgram ми робимо наступне:
Ми можете переконатися в тому, що шейдер скомпільовано правильно за допомогою shader.isCompiled (). Лог компілювання можна вивести використовуючи shader.getLog ().
Ми також створюємо відповідну полигональную сітку і завантажуємо текстуру:
У методі візуалізації ми просто викликаємо shader.begin () і передаємо Uniform змінні, потім робимо візуалізацію сітки з шейдером.
Хороша річ в шейдерах в OpenGL ES 2.0 в тому, що ви маєте величезну доступну бібліотеку шейдеров. Майже все, що робиться в WebGL може бути легко перенесено на мобільні пристрої.