Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Jak používat Android mediální efekty s OpenGL ES

by
Difficulty:AdvancedLength:LongLanguages:

Czech (Čeština) translation by Tereza Foretová (you can also view the original English article)

Android je efekty médií framework umožňuje vývojářům snadno použít spoustu působivých vizuálních efektů na fotografie a videa. Jak rámec používá GPU provádět všechny jeho operace pro zpracování obrazu, může přijímat pouze textury OpenGL jako vstup. V tomto kurzu budete se dozvíte, jak používat OpenGL ES 2.0 drawable zdrojů na texturu a pak použít rámec použití různých efektů.

Předpoklady

Chcete-li následovat tento návod, musíte mít:

  • IDE, která podporuje vývoj Android aplikací. Pokud jej nemáte, Stáhněte nejnovější verzi Android Studio z webu Android pro vývojáře.
  • zařízení, které běží Android 4.0 a vyšší a má GPU, která podporuje OpenGL ES 2.0.
  • základní znalost OpenGL.

1. nastavení prostředí OpenGL ES

Krok 1: Vytvoření GLSurfaceView

Chcete-li zobrazit grafiku OpenGL v aplikaci, budete muset použít objekt GLSurfaceView. Stejně jako žádný jiný názor můžete přidat jej k činnosti nebo Fragment definováním v souboru XML rozložení nebo vytvořením její instanci v kódu.

V tomto kurzu budete mít objekt GLSurfaceView jako jediný pohled v aktivitě. Vytvoření kódu je tedy jednodušší. Po vytvoření předejte do metody setContentView tak, aby vyplnil celou obrazovku. Vaše aktivity onCreate metoda by měla vypadat takto:

Protože rozhraní efekty médií podporuje pouze OpenGL ES 2.0 nebo vyšší, předejte hodnotu 2 setEGLContextClientVersion metody.

Ujistěte se, že GLSurfaceView vykreslí jeho obsah pouze v případě, že je to nezbytné, předejte hodnotu RENDERMODE_WHEN_DIRTY setRenderMode metody.

Krok 2: Vytvoření zobrazovací jednotka

GLSurfaceView.Renderer je odpovědný za vykreslení obsahu GLSurfaceView.

Vytvořte novou třídu, která implementuje rozhraní GLSurfaceView.Renderer. Budu volat této třídy EffectsRenderer. Po přidání konstruktor a přepsání metody rozhraní, třídy by měla vypadat takto:

Přejděte zpět k aktivitě a zavolejte metodu setRenderer tak, aby GLSurfaceView používá vlastní vykreslovací.

Krok 3: Upravit Manifest

Pokud máte v úmyslu publikovat vaše aplikace na Google Play, přidejte do AndroidManifest.xml následující:

Tím zajistíte, že vaše aplikace lze nainstalovat pouze na zařízeních, která podporují OpenGL ES 2.0. Nyní je připraven prostředí OpenGL.

2. vytvoření OpenGL letadlo

Krok 1: Definování vrcholy

GLSurfaceView nelze přímo zobrazit fotografie. Fotografie musí být převedeny do textury a nejdříve použita k obrazci OpenGL. V tomto kurzu budeme vytvářet 2D rovině, která má čtyři vrcholy. Pro jednoduchost Udělejme to čtverec. Vytvoření nové třídy, čtverec, představující na náměstí.

OpenGL výchozí souřadnicový systém má svůj původ v jejím středu. Souřadnice čtyř rohů našeho čtverce, jehož strany jsou dvě jednotky, které jsou dlouhé, výsledkem bude:

  • levém dolním rohu na (-1, -1)
  • v pravém dolním rohu na (1, -1)
  • pravém horním rohu na (1, 1)
  • levý horní roh na (-1, 1)

Všechny objekty, které čerpáme, pomocí OpenGL by měl být tvořen trojúhelníků. Chcete-li nakreslit čtverec, potřebujeme dva trojúhelníky se společnou hranu. To znamená, že bude mít souřadnice trojúhelníků:

trojúhelník 1: (-1, -1), (1, -1) a (-1, 1)
trojúhelník 2: (1, -1), (-1, 1) a (1, 1)

Vytvořte plovoucí pole představují tyto vrcholy.

Chcete-li mapovat textury na náměstí, je třeba zadat souřadnice vrcholů textury. Textury podle souřadnicový systém, ve kterém hodnota souřadnice y zvyšuje, jak jste jít výš. Vytvořte další pole představují vrcholy textury.

Krok 2: Vytvoření vyrovnávací paměti objektů

Pole souřadnic musí být převedeny bajtů vyrovnávací paměti předtím, než je možné použít OpenGL. Vyhlásíme první vyrovnávací paměti.

Napište kód k inicializaci vyrovnávací paměti v novou metodu s názvem initializeBuffers. Použijte metodu ByteBuffer.allocateDirect k vytvoření vyrovnávací paměti. Protože plovoucí používá 4 bajty, je třeba vynásobit velikost pole s hodnotou 4.

Dále použít ByteBuffer.nativeOrder k určení pořadí bajtů základní nativní platformy a nastavte pořadí vyrovnávacích pamětí na tuto hodnotu. Použijte metodu asFloatBuffer k převedení ByteBuffer instance na FloatBuffer. Po vytvoření FloatBuffer používejte metodu put pro načtení pole do vyrovnávací paměti. Konečně použijte metodu pozici k Ujistěte se, že vyrovnávací paměť je číst od začátku.

Obsah initializeBuffers metody by měla vypadat takto:

Krok 3: Vytvoření shadery

Je na čase napsat svůj vlastní shadery. Shadery nejsou nic jiného než jednoduché C programy, spouštěné GPU zpracování každé jednotlivé vrcholy. Pro tento kurz budete muset vytvořit dvě shader, vertex shader a shaderu pro fragmenty.

C kód vertex shader je:

C kód shaderu pro fragmenty je:

Pokud již znáte OpenGL, tento kód by měl být známý, protože je to běžné na všech platformách. Pokud tak neučiníte, pochopit tyto programy musí odkazujete v dokumentaci rozhraní OpenGL. Tady je krátké vysvětlení, které vám pomohou začít:

  • Vertex shader je odpovědný za vykreslení jednotlivých vrcholů. aPosition je proměnná, která bude vázána na FloatBuffer, který obsahuje souřadnice vrcholů. Podobně aTexPosition je proměnná, která bude být vázán na FloatBuffer, který obsahuje souřadnice textury. gl_Position je proměnná, integrovanou OpenGL a představuje pozici každého vrcholu. VTexPosition je různé proměnné, jejíž hodnota je jednoduše předána shaderu pro fragmenty.
  • V tomto kurzu je zodpovědný za barevné čtverce shaderu pro fragmenty. To zvedne barvy z textury pomocí metody texture2D a zařadí je do fragmentu pomocí předdefinované proměnné s názvem gl_FragColor.

Kód shaderu musí být reprezentován jako String objekty ve třídě.

Krok 4: Vytvoření programu

Vytvořte novou metodu s názvem initializeProgram vytvořit program používající OpenGL po kompilaci a propojování shadery.

Použití glCreateShader k vytvoření objekt shader a vrátí odkaz na něj v podobě int. Chcete-li vytvořit vertex shader, předejte hodnotu GL_VERTEX_SHADER. Podobně k vytvoření shaderu pro fragmenty, předejte hodnotu GL_FRAGMENT_SHADER. GlShaderSource dále umožňuje přidružit příslušný shader kódu shaderu. Používejte glCompileShader pro kompilaci kódu shaderu.

Po kompilaci obou shadery, vytvořte nový program pomocí glCreateProgram. Stejně jako glCreateShader to také vrátí int jako odkaz na program. Volání glAttachShader Chcete-li připojit shadery k programu. Nakonec zavolejte glLinkProgram propojení programu.

Vaše metoda a související proměnné by měl vypadat takto:

Možná jste si všimli, že OpenGL metody (metody s gl) patří do třídy GLES20. To proto, že jsme pomocí OpenGL ES 2.0. Pokud chcete použít vyšší verzi, budete muset použít třídy GLES30 nebo GLES31.

Krok 5: Nakreslete čtverec

Vytvořte novou metodu s názvem draw skutečně čerpat náměstí vrcholy a shadery, které jsme dříve definovány.

Zde je to, co je třeba udělat v této metodě:

  1. Používejte glBindFramebuffer k vytvoření pojmenovaného rámce objektu vyrovnávací paměti (často nazývané FBO).
  2. Použití glUseProgram Chcete-li začít používat program, který jsme právě spojena.
  3. Předejte hodnotu GL_BLEND glDisable zakázat mísení barev při vykreslování.
  4. Použití glGetAttribLocation k získání popisovače do proměnné aPosition a aTexPosition v kódu shaderu vertex.
  5. Použití glGetUniformLocation získat popisovač k neustálé uTexture v fragment kódu shaderu.
  6. Používejte glVertexAttribPointer přidružit úchyty aPosition a aTexPosition verticesBuffer a textureBuffer respektive.
  7. Používejte glBindTexture svázat textury (předaný jako argument metodě draw) k shaderu pro fragmenty.
  8. Vymažte obsah GLSurfaceView pomocí glClear.
  9. Konečně použijte metodu glDrawArrays k vlastně nakreslit dva trojúhelníky (a tedy na náměstí).

Kód pro metodu kreslení by měl vypadat takto:

Přidejte konstruktor třídy k inicializaci vyrovnávací paměti a program v době vytvoření objektu.

3. vykreslování OpenGL letadlo a textury

V současné době naše zobrazovací jednotka neprovede žádnou akci. Musíme změnit tak, že letadlo, které jsme vytvořili v předchozích krocích, může způsobit.

Ale za prvé, pojďme vytvořit rastrový obrázek. Přidáte fotografii do složky res/drawable vašeho projektu. Soubor, který používám se nazývá les.jpg. BitmapFactory můžete převést fotografii do bitmapového objektu. Uložte také Rozměry bitmapového objektu v samostatných proměnných.

Změna konstruktoru třídy EffectsRenderer, tak, aby následující obsah:

Vytvořte novou metodu s názvem generateSquare k převedení bitmapy na texturu a inicializace obdélníkového objektu. Budete také potřebovat pole celých čísel k udržení odkazů na textury OpenGL. Pomocí glGenTextures k inicializaci pole a glBindTexture k aktivaci textury v indexu 0.

GlTexParameteri dále, můžete nastavit různé vlastnosti, které se rozhodnout, jak vykreslení textury:

  • Nastavit GL_TEXTURE_MIN_FILTER (minifying funkce) a GL_TEXTURE_MAG_FILTER (zvětšovací funkci) GL_LINEAR Ujistěte se, že textura vypadá hladký, i když má roztaženy nebo zmenšeny.
  • Nastavit GL_TEXTURE_WRAP_S a GL_TEXTURE_WRAP_T na GL_CLAMP_TO_EDGE, aby textury se nikdy opakovat.

Konečně použijte metodu texImage2D k mapování rastrového obrázku textury. Implementace generateSquare metody by měla vypadat takto:

Kdykoliv změnit rozměry GLSurfaceView, se nazývá onSurfaceChanged metoda vykreslení. Tady, kde budete muset volat glViewPort Chcete-li určit nové rozměry výřezu. Také volejte glClearColor malovat GLSurfaceView černé. Dále zavolejte generateSquare inicializujte textury a letadlo.

Nakonec zavolejte metodu kreslení obdélníkového objektu uvnitř onDrawFrame metoda vykreslení.

Nyní můžete spustit aplikaci a vidět na fotografii, kterou jste zvolili, jsou vykresleny jako texturu OpenGL v letadle.

4. pomocí rozhraní účinky médií

Složitý kód napsali jsme až dosud byla jen předpoklad používat efekty médií rámce. Nyní je čas začít používat samotný rámec. Přidejte následující pole do třídy Renderer.

Inicializace pole effectContext pomocí EffectContext.createWithCurrentGlContext. Je zodpovědný za správu informací o vizuální efekty uvnitř kontext OpenGL. Chcete-li optimalizovat výkon, to by měla být volána pouze jednou. Přidejte následující kód na začátku své metody onDrawFrame.

Vytvoření efektu je velmi jednoduché. Používejte effectContext vytvořit EffectFactory a použít EffectFactory vytvořit objekt efekt. Jakmile je k dispozici objekt efekt, můžete volat platí a předat odkaz na původní textury, v našem případě je to textury [0], spolu s odkazem na objekt prázdný textury, v našem případě to je textury [1]. Po apply metoda je volána, textury [1] bude obsahovat výsledek efektu.

Můžete například vytvořit a aplikovat efekt ve stupních šedi, zde kód musíte napsat:

Tuto metodu volat v onDrawFrame a předat metodu kreslení obdélníkového objektu textury [1]. OnDrawFrame metoda by měla mít následující kód:

Release metoda se používá k uvolnění všech prostředků držených efekt. Když spustíte aplikaci, měli byste vidět následující výsledek:

Stejný kód lze použít jiné efekty. Například zde je kód, který chcete použít dokumentární efekt:

Výsledek vypadá takto:

Některé účinky se parametry. Například efekt úprava jasu má parametr jas, který přebírá hodnotu float. SetParameter lze změnit hodnotu parametru. Následující kód ukazuje, jak ji používat:

Účinek bude vaše aplikace způsobit následující výsledek:

Závěr

V tomto kurzu se naučili, jak používat rámec účinky médií k aplikovat různé efekty na vaše fotky. Přitom také naučili, jak nakreslit rovinu pomocí OpenGL ES 2.0 a aplikovat různé textury na něj.

Rámec lze použít na fotografie a videa. V případě videa stačí použít efekt jednotlivých snímků videa v metodě onDrawFrame.

Už jste viděli tři účinky v tomto kurzu a rámec má desítky dalších pro vás experimentovat s. Chcete-li vědět víc o nich, naleznete Android Developer webové stránky.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.