Zdrojový kód je k dispozici zde
Postaveno s
Ahoj 👋
Vítejte v posledním dni měsíce WebGL.
Tento článek nebude pokrývat žádná nová témata, ale spíše shrnuje předchozích 30 dní
Předchozí výukové programy:
Den 1. Úvod
Tento článek nepokrývá žádná témata WebGL, ale spíše vysvětluje, co WebGL dělá pod pokličkou. TL;DR:vypočítá barvy každého pixelu, který musí vykreslit
Den 2. Shadery a body
Úvod do WebGL API a shaderů GLSL s nejjednodušším možným primitivním typem – bod
Den 3. Shader uniformy, čáry a trojúhelníky
Tento článek popisuje více způsobů předávání dat shaderům a používá k vykreslování složitější primitiva
Den 4. Různé odstíny
Předávání dat z vertexu do fragmentového shaderu s proměnnými
Den 5. Prokládané vyrovnávací paměti
Alternativní způsoby ukládání a předávání dat vertexů do shaderů
Den 6. Indexovaná vyrovnávací paměť
Technika, která pomáhá snížit počet duplicitních vrcholů
Den 7. Čištění a nářadí
WebGL je zábava, ale když váš projekt roste, vyžaduje trochu nástrojů. Naštěstí máme úžasné nástroje jako webpack
Den 8. Textury
Úvod do textur
Den 9. Filtry obrázků
Využití fragment shaderu k implementaci jednoduchých obrazových „filtrů“ (inverzní, černobílé, sépie)
Den 10. Více textur
Jak používat více textur v jednom programu webgl
Den 11. Snížení standardu WebGL
Implementace některých obslužných tříd a funkcí ke snížení standardu WebGL
Den 12. Displeje s vysokým rozlišením a výřez WebGL
Jak zacházet s retina displeji s plátnem a používat webgl viewport
Den 13. Jednoduchá animace
Všechny předchozí příklady, kde jsou statické obrázky, tento článek přidá scéně nějaký pohyb
Den 14. Úvod do 3D
Teorie 3D výpočtů potřebných pro 3D vykreslování. Žádný kód
Den 15. Vykreslení krychle
3D teorie aplikovaná v praxi k vykreslení 3D krychle
Den 16. Hloubkový pufr. Barvy tváří kostky
Tento článek obsahuje opravy pro předchozí příklad a přidává další barvy
Den 17. Formát OBJ
Implementace jednoduchého analyzátoru pro formát OBJ
Den 18. Ploché stínování
Provádění plošného stínění
Den 19. Vykreslování více objektů
Typická 3D scéna se skládá z více objektů, tento tutoriál vás naučí, jak vykreslit více než 1 objekt
Den 20. Vykreslení kostky špíny z minecraftu
Texturování 3D objektu pomocí Blenderu a WebGL
Den 21. Vykreslení terénu minecraft
Naučili jsme se vykreslovat více objektů. Jak vykreslit 10 000 objektů?
Den 22. Snížení počtu volání webgl 5000krát
Předchozí příklad fungoval, ale ve skutečnosti to nebyl výkon. Tento článek vysvětluje instanci (technika, která pomáhá zlepšit výkon při vykreslování velkého množství stejných objektů)
Den 23. Skynox
Přidání „prostředí“ do scény
Den 24. Kombinace terénu a skyboxu
Jak používat více programů WebGL společně
Den 25. Mipmapy
Technika, která zlepšuje výkon shaderů při čtení dat z textur
Den 26. Vykreslení do textury
Rendering do textury umožňuje aplikovat některé "post-efekty" a může být použit pro různé případy použití
Den 27. Detekce kliknutí. Část I
Den 28. Detekce kliknutí. Část II
Detekce objektu pod kurzorem se může zdát obtížným úkolem, ale lze to provést bez složité 3D matematiky v JS
Den 29. Mlha
Vylepšení scény s mlhou
Den 30. Vykreslování textu ve WebGL
Přehled technik vykreslování textu ve WebGL
Užitečné odkazy
S WebGL jsem začal pracovat teprve před rokem a půl. Moje cesta WebGL začala úžasným zdrojem – https://webglfundamentals.org/
Ještě jedna důležitá věc, kterou je třeba pochopit:WebGL je pouze obal OpenGL, takže téměř vše z výukových programů OpenGL lze použít také ve WebGL:https://learnopengl.com/
Prozkoumání dalších věcí glsl:https://thebookofshaders.com/
Codepen pro shadery:https://www.shadertoy.com/
Začínáme s výukovým programem WebGL na MDN
Díky!
Děkujeme, že jste se připojili k měsíci WebGL. Doufám, že vám tyto články pomohly naučit se WebGL! 😉
Neváhejte a posílejte dotazy, návrhy, vylepšení github repo, kontaktujte mě prostřednictvím e-mailu nebo twitteru