Construirea unui joc WebGL multiplatformă cu Babylon.js

Iată o provocare pentru tine: ce zici de construirea unui joc 3D în weekend? Babylon.js este un cadru JavaScript pentru crearea de jocuri 3D cu HTML5, WebGL și Web Audio , creat de al tău cu adevărat și de echipa Babylon.js. Pentru a sărbători noua versiune 2.3 a bibliotecii, am decis să construim un nou demo numit „Sponza” pentru a evidenția ceea ce se poate face cu motorul WebGL și HTML5 atunci când vine vorba de a construi jocuri grozave în zilele noastre.

Ideea a fost de a crea o experiență consistentă, similară, dacă nu identică, pe toate platformele suportate de WebGL și de a încerca să ajungă la caracteristicile aplicațiilor native. În acest articol, voi explica cum funcționează totul împreună, împreună cu diferitele provocări cu care ne-am confruntat și lecțiile pe care le-am învățat în timp ce le construim.

Citiți suplimentare despre SmashingMag:

• Construirea de shaders cu Babylon.js
• Utilizarea API-ului Gamepad în jocurile web
• Introducere în modelarea poligonală și trei.js
• Cum să creezi o mașină de tobe receptivă de 8 biți

Pentru a atinge acest obiectiv, Sponza folosește o serie de funcții HTML5 precum WebGL, Web Audio, precum și Pointer Events (suportate pe scară largă acum datorită jQuery PEP polyfill), Gamepad API, IndexedDB, HTML5 AppCache, tranziție/animație CSS3, flexbox și Fullscreen API. Puteți testa demonstrația Sponza pe desktop, mobil sau Xbox One.

Descoperirea Demo

În primul rând, vei începe cu o secvență auto-animată, oferind meritele celui care a construit scena. Majoritatea membrilor echipei provin din scena demo. Veți descoperi că aceasta este o parte importantă a culturii dezvoltatorilor 3D. De partea mea, am fost pe Atari în timp ce David Catuhe a fost pe Amiga, care este încă o sursă obișnuită de conflicte între noi, crezi sau nu. Am codificat puțin, dar în principal compuneam muzica în grupul meu demo. Am fost un mare fan al lui Future Crew și mai precis al lui Purple Motion, compozitorul meu preferat de scene demo din toate timpurile. Dar să nu ne abatem de la subiect.

Pentru Sponza, iată contribuitorii:

• Michel Rousseau , alias „Mitch”, a realizat animații vizuale remarcabile și optimizări de randare, acționând ca artist 3D. A luat modelul Sponza oferit gratuit de Crytek pe site-ul lor și a folosit exportatorul 3DS Max pentru a genera ceea ce vedeți.
• David Catuhe, alias „deltakosh” și am făcut partea centrală a motorului Babylon.js și, de asemenea, tot codul pentru demo (încărcare personalizat, efecte speciale pentru modul demo folosind post-procesele fade to black etc.), precum și un nou tip de cameră numit „ UniversalCamera ” care gestionează toate tipurile de intrări într-un mod generic.
• Am compus muzica folosind Renoise și banca de sunet EastWest Symphonic Orchestra. Dacă sunteți interesat, mi-am împărtășit deja fluxul de lucru și procesul în articolul despre Compunerea muzicii pentru jocul World Monger Windows 8 folosind trackerul Renoise și plug-in-urile East West VST
• Julien Moreau-Mathis ne-a ajutat prin construirea unui nou instrument pentru a ajuta artiștii 3D să finalizeze munca dintre instrumentele de modelare (3DS Max, Blender) și rezultatul final. De exemplu, Michel l-a folosit pentru a testa și regla diverse camere animate și pentru a injecta particule în scenă.

Dacă așteptați până la sfârșitul secvenței automate până la „terminarea epică”, veți fi comutat automat în modul interactiv. Dacă doriți să ocoliți modul demo, faceți clic pe pictograma camerei sau apăsați A pe gamepad.

În modul interactiv, dacă sunteți pe un Mac sau PC, vă veți putea deplasa în interiorul scenei folosind tastatura/mouse-ul ca un joc FPS. Dacă sunteți pe un smartphone, vă veți putea deplasa folosind o singură atingere (și 2 pentru a roti camera). În cele din urmă, pe un Xbox One, puteți utiliza gamepad-ul (sau desktopul dacă conectați un gamepad la el). Fapt distractiv: pe un computer Windows touch, puteți utiliza 3 tipuri de intrare în același timp.

Atmosfera este diferită în modul interactiv. Aveți trei surse audio de furtună poziționate aleatoriu în mediul 3D, bate de vânt și fisuri de foc în fiecare colț. Pe browserele acceptate (Chrome, Firefox, Opera și Safari), puteți chiar comuta între modul normal difuzor și modul căști făcând clic pe pictograma dedicată. Apoi va folosi redarea audio binaurală a Web Audio pentru o simulare audio mai realistă - dacă ascultați prin căști.

Pentru a avea o experiență completă asemănătoare unei aplicații, am generat pictograme și piese pentru toate platformele. Aceasta înseamnă, de exemplu, că pe Windows ⁸ ⁄ ₁₀ puteți fixa aplicația web în meniul „Start”. Avem chiar și mai multe dimensiuni disponibile:

Offline mai întâi!

Odată ce demonstrația a fost complet încărcată, puteți comuta telefonul în modul avion pentru a întrerupe conectivitatea și faceți clic pe pictograma Sponza. Aplicația web va oferi în continuare experiența completă cu redarea WebGL, audio web 3D și suport tactil. Comutați-l pe ecran complet și literalmente nu veți putea simți diferența dintre demo și o experiență de aplicație nativă.

Pentru asta folosim stratul IndexedDB disponibil nativ în Babylon.js. Scena (format JSON) și resursele (texturi JPG/PNG, precum și MP3 pentru muzică și sunete) sunt stocate în IDB. Stratul IDB cuplat cu memoria cache a aplicației HTML5 oferă apoi experiența offline. Pentru a afla mai multe despre această parte și despre cum să vă configurați jocul pentru a obține rezultate similare, puteți citi articolul despre Utilizarea IndexedDB pentru a vă gestiona activele WebGL 3D: partajarea de feedback și sfaturi despre Babylon.JS și resurse de cache în IndexedDB în Babylon.js

Xbox One se bucură de spectacol

Nu în ultimul rând, aceeași demonstrație funcționează perfect în MS Edge pe Xbox One:

Apăsați A pentru a comuta în modul interactiv . Xbox One vă va anunța că vă puteți muta acum folosind gamepad-ul în interiorul scenei 3D:

Deci, să recapitulăm pe scurt.

Aceeași bază de cod funcționează pe Mac, Linux, Windows pe MS Edge, Chrome, Firefox, Opera și Safari, pe iPhone/iPad, pe dispozitive Android cu Chrome sau Firefox, Firefox OS și pe Xbox One! Nu e tare? Ați putea viza atât de multe dispozitive cu o experiență nativă completă, direct de pe serverul dvs. web?

Mi-am împărtășit deja entuziasmul cu privire la potențialul tehnologiei într-un articol anterior pe web: următoarea frontieră a jocului?

Hackează scena cu stratul de depanare

Dacă doriți să înțelegeți cum Michel stăpânește magia modelării 3D, puteți pirata scena folosind instrumentul Babylon.js Debug Layer . Pentru a-l activa pe o mașină cu tastatură, apăsați CMD/CTRL + SHIFT + D și, dacă utilizați un gamepad pe PC sau Xbox, apăsați Y . Vă rugăm să rețineți că afișarea stratului de depanare costă puțin performanță datorită sarcinii de compoziție pe care trebuie să o facă motorul de randare. Deci, FPS-urile afișate sunt puțin mai puțin importante decât FPS-urile reale pe care le aveți fără stratul de depanare afișat.

Să-l testăm pe un PC, de exemplu.

Deplasați-vă lângă capul leului și tăiați canalul bump din conducta shader-ului nostru:

Ar trebui să vedeți că acum capul este mai puțin realist. Joacă cu celălalt canal pentru a vedea ce se întâmplă.

De asemenea, puteți tăia motorul dinamic de fulgere sau dezactivați motorul de coliziuni pentru a zbura sau a se deplasa prin pereți. De exemplu, dezactivați caseta de selectare „ coliziuni ” și zburați la primul etaj. Pune camera în fața steagurilor roșii. Le puteți vedea ușor mișcându-se. Michel a folosit suportul pentru oase/schelete de la Babylon.js pentru a le muta. Acum, dezactivați opțiunea „ schelete ” și ar trebui să nu se mai miște:

În cele din urmă, puteți afișa arborele de plase în colțul din dreapta sus. Le puteți activa sau dezactiva pentru a întrerupe complet munca efectuată de Michel:

Eliminarea geometriilor, canalelor shader-ului sau a unor opțiuni ale motorului vă poate ajuta să depanați performanțe pe un anumit dispozitiv pentru a vedea ce costă în prezent prea mult. De asemenea, puteți verifica dacă sunteți limitat de CPU sau de GPU, deși de cele mai multe ori, veți fi limitat de CPU în WebGL datorită naturii mono-threading a JavaScript. În cele din urmă, instrumentul este, de asemenea, foarte util pentru a vă ajuta să aflați cum a fost construită o scenă de către artistul 3D.

Apropo, funcționează destul de bine și pe Xbox One:

Provocări

Pe parcurs, ne-am confruntat cu o serie de probleme și provocări pentru a construi demonstrația. Să analizăm unele dintre ele în detaliu.

Performanță WebGL și compatibilitate între platforme

Partea de programare a fost probabil cea mai ușor de abordat, deoarece este complet gestionată de motorul Babylon.js în sine. Folosim o arhitectură de shader personalizată care se adaptează platformei încercând să găsim cel mai bun shader disponibil pentru browserul/GPU-ul actual, folosind diverse alternative. Ideea este să scădem calitatea și complexitatea motorului de randare până când reușim să afișăm ceva semnificativ pe ecran.

Babylon.js se bazează în principal pe WebGL 1.0 pentru a garanta că experiențele 3D construite deasupra acestuia vor rula aproape peste tot. A fost construit ținând cont de filozofia web, așa că îmbunătățim progresiv procesul de compilare a shaderului. Acest lucru este complet transparent pentru artistul 3D care nu vrea să se ocupe de aceste complexități de cele mai multe ori.

Totuși, artistul 3D are un rol foarte important în optimizarea performanței. Ea trebuie să cunoască platforma pe care o vizează, funcțiile acceptate și limitările. Nu puteți lua activele care provin de la jocurile AAA create pentru GPU-uri high-end și DirectX 12 și doar să le integrați într-un joc care rulează pe un motor WebGL. Aș susține că țintirea WebGL astăzi este destul de similară cu munca pe care va trebui să o faceți pentru a optimiza experiențele pe dispozitive mobile, cu un strop de JavaScript suplimentar care trebuie să fie extrem de mono-thread.

Mitch este extrem de bun doar la asta: optimizarea texturilor, precalcularea fulgerului pentru a-l coace în texturi, reducerea cât mai mult posibil a numărului de apeluri la extragere etc. Are ani de experiență în spate și a văzut diferitele generații de Hardware și motoare 3D (de la PowerVR/3DFX la GPU-urile de astăzi) care au ajutat cu adevărat la realizarea demonstrației.

El a împărtășit deja câteva dintre aceste elemente de bază în articolele sale despre Real Time 3D: realizarea unei demonstrații pentru WebGL Purposes–Basics și a demonstrat deja de mai multe ori că puteți crea o experiență vizuală destul de fascinantă pe web, cu performanțe ridicate pe GPU-uri integrate mici, de ex. Scene demo Mansion, Hill Valley sau Espilit. Dacă sunteți interesat, faceți-vă timp pentru a urmări discursul său despre NGF2014 – Creați elemente 3D pentru lumea mobilă și web, punctul de vedere al unui designer 3D unde și-a împărtășit experiența și cum a reușit să optimizeze scena Hill Valley din mai puțin de 1 fps până la 60 fps.

Scopul inițial pentru Sponza a fost să construiască două scene. Unul pentru desktop și unul pentru mobil cu mai puțină complexitate, texturi mai mici și rețele și geometrii mai simple. Dar în timpul testelor noastre, am descoperit în sfârșit că și versiunea desktop rula destul de bine pe mobil, deoarece poate rula până la 60 de fps pe un iPhone 6s sau un Android OnePlus 2. Atunci am decis să nu continuăm să lucrăm la versiunea mobilă mai simplă.

Dar, din nou, probabil că ar fi fost mai bine să existe o abordare curată, în primul rând pe mobil, pe Sponza, pentru a ajunge la 30 fps+ pe multe dispozitive mobile, și apoi să îmbunătățească scena pentru mobil și desktop de ultimă generație. Totuși, majoritatea feedback-urilor pe care le-am primit până acum pe Twitter pare să indice că rezultatul final funcționează foarte bine pe majoritatea dispozitivelor. Desigur, Sponza a fost optimizat pe un GPU HD4000 (Intel Core i5 integrat) care este mai mult sau mai puțin echivalent cu GPU-urile actuale ale telefoanelor mobile high-end.

Am fost destul de mulțumiți de performanța pe care am reușit să o obținem. Sponza folosește shaderul nostru cu ambient , difuz , bump , specular și reflection activate. Avem câteva particule pentru a simula mici incendii în fiecare colț, oase animate pentru steagurile roșii, sunete poziționate 3D și coliziuni când vă deplasați folosind modul interactiv.

Tehnic vorbind, avem 98 de mesh-uri folosite în scenă , generând până la 377781 de vârfuri, 16 oase active, peste 60 de particule care ar putea genera până la 36 de apeluri draw. Ce am învățat? Un lucru sigur: a avea mai puține apeluri la extragere este cheia performanței optime, cu atât mai mult pe web.

Încărcătorul

Pentru Sponza, am vrut să creăm un încărcător nou, diferit de cel implicit pe care îl folosim pe site-ul web BabylonJS, pentru a avea o aplicație web curată și șlefuită. L-am rugat apoi pe Michel să sugereze ceva nou.

Mai întâi mi-a trimis următorul ecran:

Într-adevăr, ecranul arată foarte frumos atunci când îl arunci prima ocazie. Dar atunci s-ar putea să începi să te întrebi cum îl vei face să funcționeze pe toate dispozitivele, într-un mod cu adevărat receptiv? Să ne dăm seama.

Să vorbim mai întâi despre fundal. Efectul neclar creat de Michel a fost drăguț, dar nu a funcționat bine în toate dimensiunile ferestrelor și rezoluțiile, generând ceva moire. Apoi l-am înlocuit cu o captură de ecran „clasică” a scenei. Cu toate acestea, am vrut ca fundalul să umple complet ecranul fără bare negre și fără a întinde imaginea pentru a rupe raportul.

Soluția vine în principal de la background-size: cover + centrarea imaginii pe axele X și Y. Drept urmare, avem experiența pe care o căutam, indiferent de raportul de ecran folosit:

Celelalte părți folosesc buna poziționare CSS bazată pe procente. Bine, cu asta sortată, cum gestionăm tipografia - dimensiunea fontului ar trebui să se bazeze pe dimensiunea ferestrei de vizualizare. Evident, putem folosi unități de vizualizare pentru asta. vw și vh (unde 1vw este 1% din lățimea ferestrei de vizualizare și 1vh este 1% din înălțimea ferestrei de vizualizare) sunt destul de bine acceptate în toate browserele, în special în toate browserele compatibile cu WebGL. (Există, de asemenea, un articol despre Viewport Sized Typography pe Smashing Magazine pe care vă recomand cu căldură să-l citiți.)

În cele din urmă, ne jucăm cu proprietatea de opacity a imaginii de fundal pentru a o muta de la 0 la 1 pe baza procesului curent de descărcare care se mișcă de la 0 la 100%.

Apropo, animațiile text sunt pur și simplu realizate folosind tranziții CSS sau animații combinate cu un aspect flexbox pentru a avea o modalitate simplă, dar eficientă de afișare în centru sau în fiecare colț.

Gestionarea tuturor intrărilor într-un mod transparent

Motorul nostru WebGL face toată munca pe partea de randare pentru a afișa imaginile corect pe toate platformele. Dar cum putem garanta că utilizatorul se va putea deplasa în interiorul scenei, indiferent de tipul de intrare folosit?

În versiunea anterioară a Babylon.js, acceptăm toate tipurile de introducere și interacțiuni ale utilizatorului: tastatură/mouse, atingere, joystick-uri virtuale tactile, gamepad, orientare dispozitiv VR (pentru Card Board) și WebVR, fiecare prin intermediul unei camere dedicate. Puteți citi documentația noastră pentru a afla mai multe despre ele.

Touch este gestionat universal cu specificația Pointer Events propagată la toate platformele prin jQuery PEP polyfill (generând Touch Events pentru aplicație atunci când este necesar). Pentru a afla mai multe despre Evenimentele Pointer, puteți citi despre Unificarea tactile și a mouse-ului: cum va face Pointer Events să ușureze suportul tactil între browsere

Înapoi la demo atunci. Ideea pentru Sponza a fost să aibă o cameră unică, care să gestioneze toate scenariile utilizatorilor simultan: desktop, mobil și consolă.

Am ajuns să creăm UniversalCamera . Sincer să fiu, a fost atât de evident și simplu de creat încât încă nu știu de ce nu am făcut-o înainte. UniversalCamera este mai mult sau mai puțin o cameră gamepad care extinde TouchCamera care extinde FreeCamera .

FreeCamera oferă logica tastaturii/mouse-ului; TouchCamera oferă logica tactilă, iar extinderea finală oferă logica gamepad-ului.

UniversalCamera este acum folosită implicit în Babylon.js. Dacă răsfoiți demo-urile, vă puteți deplasa în interiorul scenelor folosind mouse-ul, atingerea și gamepad-ul pe toate. Din nou, puteți studia codul pentru a vedea exact cum se face.

Sincronizarea tranzițiilor cu muzica

Acum, această parte este locul în care ne-am pus cele mai multe întrebări. Este posibil să fi observat că secvența de introducere este sincronizată cu anumite zone ale melodiei de redare . Primele linii sunt afișate atunci când unele dintre tobe pornesc, iar secvența finală de final trece rapid de la o cameră la alta la fiecare notă a instrumentului de corn pe care îl folosim.

Sincronizarea sunetului cu bucla de randare WebGL nu este ușoară. Din nou, aceasta este natura mono-threaded a JavaScript care generează această complexitate. Articolele despre Introducere în lucrătorii web HTML5: abordarea JavaScript multithreading împărtășesc câteva perspective în spatele acesteia. Este foarte important să înțelegem problema pentru a înțelege problema globală cu care ne confruntăm, dar intrarea în detalii aici nu intră în domeniul de aplicare al acestui articol.

De obicei, în scenele demonstrative (și jocurile video), dacă doriți să sincronizați imaginile cu sunetele/muzica, veți fi condus de stiva audio. Sunt adesea folosite două abordări:

1. Generați metadate care ar fi injectate în fișierele audio și care apoi ar putea „apela” unele evenimente când ajungeți la o anumită parte a acestora,
2. Analiza în timp real a fluxului audio prin FFT sau tehnologii similare pentru a detecta vârfuri interesante sau modificări BPM care ar genera din nou evenimente pentru motorul vizual.

Aceste abordări funcționează deosebit de bine în medii cu mai multe fire precum C++. Dar în JavaScript, cu Web Audio, avem două probleme:

1. JavaScript, care este mono-threaded și, din păcate, de cele mai multe ori lucrătorii web nu ne vor ajuta cu adevărat,
2. Web Audio nu are niciun eveniment care ar putea fi trimis înapoi la firul UI, chiar dacă Web Audio este gestionat pe un fir separat de către browser.

Web Audio are un temporizator mult mai precis decât JavaScript. Ar fi fost fantastic să poți folosi acest temporizator separat pe un fir separat pentru a conduce evenimentele înapoi la firul de UI. Dar astăzi, nu poți face asta (încă?).

Pe de altă parte, redăm scena folosind WebGL și metoda requestAnimationFrame . Aceasta înseamnă că, în „cele mai bune cazuri”, avem un interval de timp Windows de 16 ms. Dacă vă lipsește unul, va trebui să așteptați până la 16 ms pentru a putea acționa asupra următorului cadru pentru a reflecta sincronizarea sunetului (de exemplu, pentru a lansa un efect de „fade-to-black”).

Atunci mă gândeam să injectez logica de sincronizare în bucla requestAnimationFrame . Am studiat timpul petrecut de la începutul secvenței și am analizat opțiunea de a ajusta vizualul pentru a reacționa la un eveniment audio. Vestea bună este că audio Web va reda sunetul, indiferent ce se întâmplă în firul principal de UI. De exemplu, puteți fi sigur că marcajul de timp de 12 secunde al muzicii va ajunge exact la 12 secunde după ce muzica a început să fie redată, chiar dacă GPU-ul are dificultăți în redarea scenei.

În cele din urmă, am ales probabil cea mai simplă soluție vreodată: folosirea apelurilor setTimeout() ! Da, stiu. Dacă te uiți la majoritatea articolelor de acolo, inclusiv pe cel la care am făcut link mai sus, vei descoperi că este destul de nesigur. Dar, în cazul nostru, odată ce scena este gata să fie redată, știm că ne-am descărcat toate resursele (texturi și sunete) și am compilat shaders-urile. Nu ar trebui să fim prea enervați de evenimentele neașteptate care saturează firul UI. GC ar putea fi o problemă , dar am petrecut mult timp luptăm împotriva lui în motor: reducerea presiunii asupra colectorului de gunoi prin utilizarea barei de dezvoltatori F12 a Internet Explorer 11.

Cu toate acestea, știm că această soluție este departe de a fi ideală. Trecerea la o altă filă sau blocarea telefonului și deblocarea acestuia câteva secunde mai târziu ar putea genera unele probleme în partea de sincronizare a demonstrației. Am putea rezolva aceste probleme folosind API-ul Page Visibility, de exemplu, întrerupând bucla de redare, diverse sunete și recalculând următoarele intervale de timp pentru apelurile setTimeout() .

Dar poate că am ratat ceva; poate, și chiar probabil, a existat o abordare mai bună pentru a gestiona această problemă. Ne-ar plăcea să auzim gândurile și sugestiile dvs. în secțiunea de comentarii dacă credeți că există o modalitate mai bună de a rezolva aceeași problemă.

Gestionarea Web Audio pe iOS

Ultima provocare pe care aș dori să vă împărtășesc este modul în care Web Audio este gestionat de iOS pe iPhone și iPad. Dacă sunteți în căutarea articolelor despre „web audio + iOS”, veți găsi mulți oameni care au dificultăți în a reda sunete pe iOS. Acum, ce se întâmplă acolo?

iOS are un suport remarcabil pentru Web Audio - chiar și modul audio binaural. Dar Apple a decis că o pagină web nu poate reda niciun sunet în mod implicit fără interacțiunea unui anumit utilizator. Această decizie a fost probabil luată pentru a evita reclamele sau orice altceva care să deranjeze utilizatorul prin redarea de sunete nesolicitate.

Ce înseamnă pentru dezvoltatorii web? Ei bine, mai întâi trebuie să deblocați contextul audio web al iOS după atingerea unui utilizator - înainte de a încerca să redați orice sunet. În caz contrar, aplicația dvs. web va rămâne cu disperare mută.

Din păcate, singura modalitate pe care am găsit-o să fac această verificare dacă fac o abordare de adulmecare a platformei utilizatorului, deoarece nu am găsit o modalitate de detectare a caracteristicilor pentru a face acest lucru. Nu e nimic mai puțin decât o tehnici oribile și nu antiglonț, dar nu am putut găsi nicio altă soluție care să rezolve problema. Codul? Poftim!

Dacă nu sunteți pe iPad/iPhone/iPod, contextul audio este disponibil imediat pentru utilizare. În caz contrar, deblochăm contextul audio al iOS redând un sunet gol generat de cod pe evenimentul touchnd . Vă puteți înregistra la evenimentul onAudioUnlocked dacă doriți să îl așteptați înainte de a vă lansa jocul. Deci, dacă lansați Sponza pe un iPhone/iPad, veți avea acest ecran final la sfârșitul secvenței de încărcare:

Atingerea oriunde pe ecran va debloca stiva audio din iOS și va lansa „emisiunea”.

Deci iată-ne! Sper că v-ați bucurat de câteva informații din spatele dezvoltării demo-ului. Pentru a afla mai multe, citiți codul sursă complet al acestei demonstrații pe GitHub. Evident, totul este open source și puteți găsi fișiere principale pe GitHub: index.js și babylon.demo.ts.

În cele din urmă, sper cu adevărat că veți fi acum și mai convins că web-ul este cu siguranță o platformă grozavă pentru jocuri! Rămâneți pe fază, deoarece lucrăm la noi demonstrații chiar în acest moment și sperăm că vor fi și ele destul de impresionante.

Acest articol face parte din seria de dezvoltare web a evangheliștilor și inginerilor din tehnologie Microsoft despre învățarea practică JavaScript, proiecte open source și cele mai bune practici de interoperabilitate, inclusiv browserul Microsoft Edge.

Vă încurajăm să testați pe browsere și dispozitive, inclusiv Microsoft Edge – browserul implicit pentru Windows 10 – cu instrumente gratuite pe dev.microsoftedge.com, inclusiv instrumente pentru dezvoltatori F12 – șapte instrumente distincte, complet documentate, pentru a vă ajuta să depanați, să testați și accelerați paginile dvs. web. De asemenea, vizitați blogul Edge pentru a fi la curent și informat de la dezvoltatorii și experții Microsoft.