ta je dobře tak vás tady vítám dneska
když už docela pozdní hodin tak zkusím to teda si trošku lekci se tam se
na začátek
takže sou
jo
takže tam se vás
kdo z vás majáky zkušeností z vývojem
schopen že jel nebo přijde aplikací zvedněte ruku
no nebojte se nikdo jinej
tak nový něj ve škole vůbec nevadí no a kdo z vás třeba
píšeme vy jo dělat si to mohl a podobně
no tak
smeaton přesně naopak protože já teda ve bass přiznám se ačkoliv mám firefox na starosti
tak vybafne jsem
takže to není úplně moje parketa takže spíš sem tu přednášku pojmu jako takže
člověk kterej zvyklej psát klasicky C plus
a chci udělat něco pro
von jako no pro nějakou dobu aplikaci obecně no
no se to taky nějakou víme
tak
vůbec proč vlastně dělat hrej na webu
jo
v podstatě největší výhoda je že to spustíte všude jo tablety telefony
kde co to dneska spustí jo ten prohlížeč
a sou protože je docela dobrý nástroje můžete používat
file back možná je takovej ten
tu konzoly teďka ve své foxu jo ve chrome taky nějaká věc na to
nevýhody jo ten že vlastně k té poměrně pomaleji
a ještě k to není tomu to není moc typovaný jo takže a to nekontroluje
může tam dělat čili kasárny
neuvěřitelný zrůdnosti jo to je nic všecko jedno všecko to ze že
vidíte že ta rychlost třeba ste plovoucí čárce není moc úžasná těch
tisíc
oproti čtyřiceti takže
tom těla sektory spustíte chtěl si dělat K na
neska nějakým I i sedum jo tak dneska s to máte sme pentium vtom
dělat textu
eště že máme ty grafický karty tento dokážou
do školy kompenzovat
tak jaksi webový aplikace neubec
tehdy
když už mluvíme jak je psát jo buďto můžete použít čísly těla skript a použít
ten hotel opět kam do vás jo
použít k tomu ještě T další knihovny jako to bylo na ty že kvéry
dokonce to kubik je koukám
nějaký předpřipravený
určitě znáte takovýhle
typy
vydala musila tady ten
brousek vést
jo taková ta
no myslela
úplně řekl bych ta první
co s co se viděla
máte tady dokonce že zvukem
naučte chodí s tím není no
jo je to čistě jenom vjede
nic
nic jako zvláštního
ta tě tady na tomhle není potřeba dělanej mega výkon jo
taková jako unk tečka demo
spoustu podobných věcí
no ten ještě vidět
slajdy který nachystala mluvila co příhodný
tak další možnost je použít ten com pile C plus to vám tady ukazoval pavel
dopoledne
je to o něco rychlejší než ten že vlastně tím nativního vidíte desetkrát pomalejší nejš
o tři optimalizovaný kvót svět se tečka
dobrá zpráva je že obsahuje přímo wrapper pro S D L
a vím že jo takže když tu aplikaci máte napsanou s C plus takový používala
zde okolo tak nemusíte nic moc řešitelem u se nám to převede
ten pana na té schopen tajfun to vám tady ukazoval nového to čipů nebudu říkat
tak když píšeme tu aplikaci že jo tak je to
musíme si uvědomit že to jeho to mohlo stránka není to prostě jako klasicky
program že spustím postupně se to provádí jo musí nahrávat data pakáž kreslit jo tady
to funguje naopak ani se nehni náhrada stránka
a pak teprve můžu něco dělat jo takže
proto aby
vo něco dělat peněz mě ta stránka vůbec nahraje
a pak teprve využiju tady tu metodu o nulou
a spustím si tu svojí hru jo teprve a šije mě až celá ta stránka
na hrana
a k tomu ten základ toho je ten ta nová ste na to mohlo pět
prvek
do kterého se vykresluje lišky a tak jazyka
tak můžeme použít buďto fire kreslení nebo to přijde kreslení přijde kreslení vozovka
a
je to v podstatě triviálního vidíte tady sinaji vezmu vyjde toho k toho
prvků s toho do dokumentu jo načtu si s toho to metodou ten kontext jaké
jsou buďto to dvě D nebo potom později to vím že jo to přijde
a tady se dvě D luštím kreslí mnou používá se ve své vox na to
knihovna kajo takže
je to standardizovaným
takhle jo když se podíváte tady ten úhel
tady tohle vám to se jakési takové čtverce o nic moc zvláštního
ale
ano je to
co to dělá no
tak
jo tady potom když byste se na to chtěli podívat třeba zkusit si to tak
tady na těch slajdech mám přímo odkazy
na specifikace a tutoriály takto nemuse nikde složitě hledat
tak vyvíjel
je to podobné zase načtu si ten
načtu si ten objekt kam dva
získám z něho ten jo kontext koše vlastně
ten
jako bývalo na jako je v céčku jo ten
ten objekt tak tady to je to funguje jako dvě pí překladač mezi
tím a prohlížečem a tím skupin želé S implementací já se používá zase jo tady
jednoduché příklad nastavím akorát
barvu a
vymažu buffer mimochodem otázka do plena víte někdo jestli se
ze ventil používá klipování nebude cluster explicitně slepovat synchronizovat
s obrazovkou kreslení
a tady
no ze nemusíte jo dělá se to automaticky
jako prostě magií každej firem kostí ale kam za vykresli jo to takže nemusíte řešit
buffery
a kam se teda řeší když vám to zmizí jo tak
to trošku podobný jako semtex
tak
ten ta nová
J defaultně jenom prostě ale menza to monstranci že jo není to žádnej full screen
takže
když se nepřejdu full screen aby tahle vypadala not aplikace jako normální teda
tak to se dá použít
zvětšení to kam hlasu takovej plus kterýmu tak olovnice třeba teďka jo že to je
přes obraz budem prohlížeč
anebo je tady nový full screen api který není eště úplně těch
není úplně ještě dodělaný nicméně
dá se použít
pro kde co
třeba pro přehrávání videí ho je to je to podstatě
nula novinka
jo texas zeptal zeptá jestli to chcete použít nebo ne protože tam se nějaký bezpečnostní
problémy
front aplikace ne nebo ta stránka nemohla prostě přepínat co chcete taky tam je problém
sestupem kláves takže
takže se tomu si
explicitně povolit jaký klávesy chcete
no ten do budoucna
tak když máme tu naší aplikaci nebo tu hru tak že jo kromě toho že
tu aplikaci vykreslíme tak ještě
je potřeba
v tom něco dělat že ho nějak tu
stránku obnovovat
zase tady sme jenom máte webové stránce takže to děláme takže si zaregistrujeme
registrem S nějakou funkci kterou nám pak pravidelně volá časovač
je tam problém s tím že na ten časovač by měl být
je otázka jeho chceme moc přesný a potom chceme taky synchronizaci s obrazovku že on
má jenom na tady se nám to vykreslí
kamsi do bufferu a ta obrazovka to nestihne vykreslit jo prostě mineme se sou synchronizaci
na ten mega kartě takže
nejlepší je použít tady to vím že upil
koše
taková knihovnička u rote chrome
a to mi ta metoda takle s daným frame a tady se za ni strupu
svojí smyčku auto u tou potom k této potom tu aplikaci kreslil
tak
taky potřebu že jo vstup z klávesnice aby tahle aby ta aplikace bylo plně jakási
ta mrtvola jo ležela tam a nemocnosti dělat takže
zase velice jednoduše
tady ten dokument
čili ta vaše stránka to mohl máte ty metody když se tiskne klávesa se úvodní
za registru si handle a pak to můžu porovnávat tady přes ty konstanty jo tady
máte nahoře odkaz na specifikaci takže nejsilnějšího nejsi porovnat že tahle kláves oblasti smutná tahle
nebyla
no
sumýši je podobnej když lehce komplikovanější
tady
může to je vlastně přímá stentu myš můžete načítat buďto s celé obrazovky to prohlížeče
a nebo jenom s toho konkrétního elementu jo což je tady sme případě ten tam
dva zase
no
to
že to je to záleží to na vás jak si ty události zaregistruje se jo
sou to sou to prostě události když se když stiskněte tlačítko voníte tlačítko když se
myš pohne
jo jsou tam můžete si načítat různý statusy temnější jestli je přitom stisknut i třeba
cottrell a shift cokoliv
jo jaký sou tlačítka stisknutí
je trošku problém s takovým tím rolovacím té vyšší s tím
s tím počít cam jo s tím prosím tatíkem protože to není standardizovaný takže
je načítá se to trošku jiná chromé pro špinavé fajn foxu můžete použít nějakou knihovnu
která vám to nějak zastřešit nebo třeba točit ve chátrá použít jo
tady to teďka pro jednoduchost nebudu říká
jo
tak dál asi do té nepotřebujete dostat nějaký data že jo to že si tam
něco vykreslíte nepěkný ale většinou je potřeba
nahrát nějaký že objekty nějaký třeba úrovně do tehdy jo
cokoli
teďka se hodně používáte ten že jsem
no co šíje
řeší jako kdyby textový vyjádření struktur že vlastně to když to řeknu takhle jednoduše
jo bohužel to není nějak komprimovaný je to prostě úplně mi čínskej tech
no
takže jediná možnost taková poměrně výhodná je zapnout řešit zatlouci kombinaci a to web serveru
pomocí tobě zipu troše nějakej standard to tehoto toto komprese
no a tady s tím objektem se práce velice dobře protože vlastně že vlastně nabízí
ten zabudované jenže jsem oběh tady tento že se on
a velice jednoduše pomocí to metody pomocí té metody pár
si prostě ty textový data předžvýkávat a rovno vám to vrátí objekt
tady se chová jako typicky dělat tak to je objekt takže to můžete mít úplně
cokoliv jo pole struktury úplně kde co
jo ten zápisu formátuje
je poměrně snadný proč u odkaz tady na to že jsem or
tady to je popsáno
tak
no to že máme ty data někde na disku jo naserou to ještě neznamená že
se nám tam dostanu jo
zase nemůže to načíst nějak
nějak synchronně že by mě ten prohlížeč
prostě čekal a čekal očekávej unicity data nahrajte by asi uživatelem a zakousni za takovou
hru
že třeba file format nevýhodu že dělat běží jenom v jednom threadu a to ještě
k tomu tom hlavním takže chvíli dívám nějaká stránka zablokuje
vytížit prostě ten že vlastně takle brouse prostě stojí jo
ten toto takle se dá se různě použít synchronně ale
je to takový no je to takový na zlost jo
částečně taky tou nečte von implementaci podívat textu F foxu
tak
jednoduchý způsob jak toho s toho jak ty data do toho pro když se dostanu
vytvořím si ten jak vést
jo což nějak jeden objekt dělat textu kterej poskytuje ty metody
jo nastavím si co vlastně chcu tady to mají data file to je prostě jak
a
to je prostě adresa
jo internetová nebo klidně lokál host nějakej to je jedno
jako když zadáte do prohlížeče
tady tím ale
tady si za registrace vlastně tu funkci
která se má zavolat
až se s tím
objektem něco stane se konkrétně si počkám natoč disku což znamená že se to vyřídilo
že mě to všecky data přišli
no a nakonec ten požadavek tady pošlu jo a
ten M neklesl obsahuje
sobě různý způsoby můžete nechat být hodně druhu
jo může to být X N L může to být kde co sme nina zajímá
ten plaintext troše vtom J snu
a proženeme tuto metodu pár zatímco ten objekt že vlastně toto je pak normálně použijeme
tak
kromě toho že ty data dělá hraju tak ještě většinou co nějak vložit jo nějak
tu
třeba uložím si stav tehdy jo
skóre co sem rád dosáhlo
moc já bych si určitě na kešování jaký data u toho klienta
třeba byste úsov roztáhla znova a znova a znova jo celý ty všecky ty úrovně
je to trošku nešťastný to ukládání protože
jak jsem tady mluvil o tom že jícnu jo tak v podstatě neexistuje nějakej elegantní
způsob jak třeba nahrát jo řekněme vezmu nějakej z i soubor ten prostě pošlu do
prohlížeče
a ten prohlížeči tenzi opakuje a použije jo dá se to použít ale sou a
to různý pro takový obezličky
jo a není to elegantní nefunguje to všude myslím že zrovna tohle po pro jenom
chrome
nějakým takovým způsobem
pěkným
no takže když už ty data nahraju
tak já mám a to jo než kdybyste na lokus to je však vidíte kdy
byl většího nejenom pět mega jo tak by to bylo bezvadný ale
takhle prostě mám svůj tady nicméně
koupí starší metoda jo uložím to do toho dokumentů T
nějakej textový řetězec
uloží se mně to na ten server nemusím se o to starat
ale to malýho pár kilobytů záleží na implementaci na tom jak máte nastavený
lokus to H
to tam si můžete dávat data jaký chcete je to jako asociativní pole tady ten
klíč může být kde co jo řetězec číslo
ty data může být binární
a ukládá se to přímo na tom lokálností na tom počítači a má to nevýhodu
nebo nevýhodu jako můžete osy data kdykoliv přijít takže jsem to nedá spolíhat
taky to nemusí podporovaný jo že se
většinou když to používáte tak prvně do tady toho testovat jestli to bez dispozici
když to není k dispozici budete do to psát takto bude
vyplývá na konzoli různý hlášky oni to
není to prostě
jo že log o strašný k dispozici a podobně
že
takže todleto možnosti jaksi uložit nějaký data na tom se
tak taková speciální ve speciální případ
sou obrázky textury
pokuď používáme na dvě D kreslení tak tady tahle kováč a
tady tohle celý není potřeba L normálně si jenom nahé u normálně synům
ten obraz nahraju atomům o nulou té funkci musím krást může pracovat
jo
ten Í ničím tak pro zajímavost ten imič objekt
to je prostě objekt A ten obrázek jako dyby obsahuje když jak by si dáte
na té potom ale stránce tak ten také o to
to
závorky imag o něco tak to je
fyzický umístění toho graf pro stránky ale každý tady ten víme byl tak má tady
přiřazeny u místo prohlížeče tady ten svojí jiných objektech ten obrázek jako fyzicky obsahuje že
tím že unáhlen tady tak
ten obrázek mně je někde v tom prohlížeči ale těsně nezobrazuje protože není zařazeno ste
domu struktury a nevykresluje se
takže tady tímhle
jo všimněte si že samotný nahrávání to obrázku se spustí tím že do toho image
se C
zapíšu adresou zase toho
toho souboru tech nahrát jo a musí sto definovat cache potom si nadefinuju tu o
nulou funkci G nakto
natáhnout se mně nespustili který by se to je napíšete do to se na co
tak už se spustí nahrávání a už to nic neřeší
tak tady neska vidíme jednoduchý způsob jak si vytvořit nějakou úplně nějakou tu ventil texturu
jo je zase přes ten že jo kontexty to sem si
ten objekt textury na bandu si ho je to stejně jako zásadě ta práce stejná
jako u první jel
s tím že používám takže objekt a ty jména těch funkcí se podobný
jo takže syntaxe syna baňku ju
a pak jsou tam
X pak sou nahraj
jo
tak
tak tady ten útěk tady to textures tady ten objekt se pak užívala
používá při vykreslování ho ten vlastně obsahuje kdyby
tu text rovnat E nebo odkazuje na to texturu
které uložená tech grafické kartě pokud teda máme štěstí
tak
to toto vím přijel je
vlastně
to by přijel je
vlastně druh tou ponížil asi co to s
a skupin že les je odlehčená verze
která je určena tady pro tyhle
platformy které jsou plně výkonný jo
oproti klasickým o pindi jel nemá tu pevnou renderovací pipelinu jo tak nemůžete tam už
se všecko kreslit cesty řešej tady
nepoužívají se vůbec žádný takový to begin N jo naposled detekci nic takovýho
jo všecko přes pole se kreslí
musíte mít nějaký ty minimální šejkr nastavený
zase výhoda že se vyhodilo tady ty starý věci který se ani v podstatě moc
nepoužívali
že to není žádná velká škoda
tak jak ty jak
ta vaše aplikace bude fungovat nebo bude kreslit jo je to tak že máte ty
přijde data
velice zjednodušeně to ty sme data
nacpete tady do těch dvou šejkr u ten vertex přijde pixlech nejde
a pak sám tolik S jenom prvku
ten letech přijde to je
procesor
který vám dělat transformace
těch vertexů uvést přijde nebo čtyři de jo
víte někdo pro čtyři de
o tato len
no neslyším
eště no
ne
že moc
cože
no tak ne
to bych lehce musí den
ne
tak tady of a já jsme není jo
revise si pozdil ten sme oblast taktu
no
že moc bodě programátorem zama není no takhle podívat totiž homogenní souřadnice
pro ty transformace takže ta poslední transformace je poslední sazenice je většinou jedna
tak to používá
připravit tři
projekčním promítání vlastně při proč matice takže
je to všechny souřadnice se vlastně zadaný čtyři dá syntaxí matice co čtyřrozměrný že jo
suma čtyři na čtyři tím že spodní řádek je vlastně příkaz nula jednu jedničkami sto
převedlo tak jak to tam přišlo tak aby to nešlo
tak výsledkem to vertex větru sou vede souřadnice jo takže když máte nějakej přijde oběh
tak se vám to budete přijdu ztransformuje tak jak vidíte na obrazovce
no a ten pixel šejdrem
to je prachsprostě rasterizer sem sám to je na pouze vykreslí
výplní vám ty vede oblasti na té obrazovce tou texturou
mimochodem
není to úplně až tak pravda není to úplně čistě dvě D stejné protože když
akce které se pro uranití tak ten ste použít jo
používá se samozřejmě perspektivní konexe textury na existence knihovny hybridy
jo
takže když máte třeba tech pro složenou třeba nějakou ze kuželový strojníku tak
tam potom dochází k takovým zkreslení no ale
tuším takovej detail
což je v tom rasterizéru
taky aplikujete že osvětlení
a podobně
takový defekty bump mapping a
a to data do
tak vertex jeden to je ten co vám transformuje to přijde nám jede
tady
tohle
možný ten že vatry je to ten bylo zcela čili
opengl šedinka pak which
což jako kdyby vyšší forma zápisu těch ignoruju normálně řešej tady
se
sepíšou jako s takovým asembleru jako kdyby jo
co na toho nějaký op jenže lexém ze kterým a to tam nacpete do té
karty
méně není to úplně nějak úžasně zábavný a
a rychlý takže jako je si myslím na vývoj jo
takže vzniklo tady ten vyšší asi něco jako céčko vidíte
aby se o trošku urychlilo a zjednodušilo
ten
vertex
tady máte atributy znamenáte něco co tam dostanete zvenku
a mění se toto jsou třeba ty pole těch vertexů které vám definuje ty přijedeš
přijde objekty s ne tak jako tady máte pole těch X pro výkony na tu
uniforem to znamená že je to
nějaká konstanta která se nemění během běhu toho programu
a varying to je něco co se pak bude poskládala bude sto štěkl interpolovat mezi
tím a
my s těma vertex sama
vidíte sou tady ty dvě matice model výlupek šum
eště bych řekl že
je výhodný si těch matic tam dat více spíš ten spíš ten výpočet tlačit na
tu kartu protože tady ten program s vám provádí
na té přijde kartě takže když máme fakt pomaleji ten že vlastně taky lepší co
nejvíc těch per těch výpočtu napsat na tu zde kartu nevýhoda je že tady vtom
vertex větru sedí vertex už nezbavíte všecky mexická tam přídou tak mu se dál poslat
toto rasterizer takže tady bohužel nemůže se dělat takové věci jako vyhoví hození objektu který
nejsou vidět a podobně jo je to tak lásku no výhoda nevýhoda je to prostě
tak
bys tady v podstatě nedalo nějak
udělat to že nepozná že jo vyšší reprezentace scény
vidíte výslednej výsledná pozice a dvě D je zapsaná rozhodil poziční soše nějaký zabudovaný objekt
který obsahuje tu dvě D pozici toho vertexu tady akorát překopíruje metru
koordinátor té textury tady mimochodem vidíte
rozšíření toho přijde vertex na to čtyři de jo tady tohle s všecko to ve
maps čtyři ve to sou nějaký zabudovaný typy tedy znamená jest trojrozměrnej vektor matice čtyř
rozměrná ten
tak tady ten pixl šejdrem ten
řídí už to samotný vyplňování těch vede oblastí a ste obrazovce
tady se prvně nastaví
jak moc
jak nastavit pracovní
je to takovýto odpovídá to možná nevím takym tomu starýmu jak se nastavuje je jakoukoli
toto mám
vykreslování
tady získáme
tu texturou koordinátů to jsme získali toho vertex chytrou tady už interpolovaná mezi ty jednotlivý
vertex i
ten sampler dvě D to je nějaké objekty vám v podstatě odpovídá se textuře
no a na color
to je v podstatě už ten
už ta barva kterou tam chceme proc pátého to už je toto s vámi ke
si obsahuje to zase to čtyřrozměrný
je to rgb a poslední eof
jo
ta
jo vidíte tady ten objekt že
času texturu kterou má použít a potom tu
rodina
tak
jaké jsou extra kroky oproti o poničil
to vím že jo tady musíte
sestavy
ten program pro ten vertex přijde pixel že jde
musíte načíst nějak ty
musíte data nějak tam dostat jo do těch do toho program takže já to se
používá tady ty funkce jo s tím si
si s tím si ten atribut a nastavím ty data
no
tak
tady mám nějaký dvěma
ukážu
tak tady takový
vidíte tady na to se používá tedy ten vršek je vtom jake vedení
toto je nějaký frames or
jo tady máte nastavit tady máte
jednotlivý ty šijte jo ten vertex ten M ale že jo protože ten takova
vide placka
méně tady ten pixl šijte
ten ještě větší
jo techto mají si to můžete si nadefinovat a
jo fakule když to se na kole
čtení tam třeba není
jo
samý jedničky
bude akorát D
no
jo ten
více prostě bílýho přepsal sem ten
snad color
ať to počítal to počítalo tak prostě to je na konci sem tam tíhu
že jo to jeho
tady tu bílou
jako jinou
to
tak
no
stejně tak tady mám takový
demo
ví
který zruš obsahuje celou tu
cenu
když to nějaká
ta úroveň tedy
jo
tady už to mail o co je ten že jsme objekt
kreslil o se to
ale to je ten vstup ste klávesnice myši
ta
jak pomoc tomu javaskriptu aby nebyl taková ale milína jo jak to trošku popohnat
dá se využít tady těch
typu
jo sou to zabudování typy floating říct že
je to
asi pětkrát rychlejší takový ty interní typ jo takovej ten
co se používá default nějaký ten
nechcete double meat takovýho jo
pak taky se snažíme ten pod napsat tak aby se dá přeložit tím šťastným tankům
kilem
takže nepoužívá tu funkci EVAL
ta se nedá přeloží tím kontrole nebo to
nepožadují miki
takže značce vyhnout automatickým konverzím york za přeteče nějakej říct že X automaticky konvertuje na
double
jo na ten s formátu plovoucí desetinnou čárkou dělat to pomocí
pomocí binárního operátoru jinak doporučuju tady tu přednášku
o toho nykolase
je rovna který měl mimochodem na most kam to velice dobrou a to má spoustu
typů jak ten že vlastně
udělat tak
aby se dál a byl co nejrychleji
tak
no jak ty webový aplikace platí jo jak na to
to máme štěstí protože to poměrně snadný
a sice jana top udělám ten chleba
takovýhle těžko nějak šíření když píšete weby tak to určitě
proti těm ste znát
takových
toto je kus
ke dvanáctku to nahodit
tady
stavy jo
ty úplně
klasický debatovat to jako prostě kdybyste tam někdo kdo bylo někde
v céčku
to ví
externí šikovná
kajaku plním že jo
no význam načli verzím firefoxu
dám ještě šanci
tak
no
a to je podstatně konec přátelé
takže
co dál
budu já pokuď
si třeba zvolíte nějakou webovou hrou nebo aplikaci jako ať už vede bod nebo tři
kde ste si vybrat samozřejmě jako třeba diplomku nebo bakalářku pak to můžete
zveřejnit
jsem to povede na mořila
market play suše
taková nic jako máte kojence nám projdu jo tak podobný připravím uživatel ty webový aplikace
jo
to je asi všetko tak nějaký otázky
no
a
no tak to nevím protože jak říkám nejsem úplně ve base ale
nevím fakt nevím bikes ale to vím tak sem se ještě v za problémy no
možna
samostudium no nějaký další dotazy
tak jestli jsou tak děkuju za pozornost a díky