Komme i gang med WebGL

Web Graphics Library (WebGL) er den nye standarden for 3D-gjengivelse på nettet, slik at webutviklere kan lage spillanimasjoner, datavisualiseringer, produktvisninger og mer ved hjelp av JavaScript API-er, en moderne nett- eller mobilleser og en standard webteknologi stable.

WebGL er en del av Khronos Group-konsortiet med åpne standarder for grafikk, media og parallell beregning. Organisasjonens eneste formål er å lage åpne standarder som muliggjør forfatter og akselerasjon av grafikk, rich media og parallell beregning på et bredt utvalg av plattformer og enheter. WebGL er webteknologi som bringer maskinvareakselerert 3D-grafikk til nettleseren uten å installere tilleggsprogramvare i de fleste tilfeller. WebGL er en av de femten arbeidsgruppene innen konsortiet, og er designet som en JavaScript-binding til OpenGL ES i en nettleser på en hvilken som helst plattform som støtter OpenGL- eller OpenGL ES 2.0 grafikkstandarder for nettet. WebGL avdekkes gjennom HTML5 Canvas-elementet som Document Object Model (DOM) -grensesnitt.

implementeringer

Gjeldende implementeringer inkluderer følgende stasjonære nettlesere:

  • Mozilla Firefox 8.0 og nyere versjoner
  • Google Chrome 13.0 og nyere versjoner
  • Safari 5.1 og nyere versjoner installert på Mac OS X Lion og Mac OS X Snow Leopard implementerte støtte for WebGL
  • Opera 11 og 12 alfa (forhåndsutgivelse)
  • Internet Explorer - Microsoft har ikke kunngjort noen planer om å støtte WebGL; Det er imidlertid plugins som er tilgjengelige for å legge til støtte for WebGL til Internet Explorer 6.0 og nyere versjoner.

Følgende implementeringer av mobilnettlesere inkluderer:

  • Nokia N900 - WebGL er tilgjengelig i firmwareoppdateringen PR1.2.
  • BlackBerry PlayBook - WebGL er tilgjengelig via WebWorks og nettleser i PlayBook OS 2.0
  • Firefox for mobil - WebGL er tilgjengelig for Android-enheter
  • Sony Ericsson Xperia-serien med Android-smarttelefoner har hatt WebGL-evner etter en firmwareoppgradering.
  • Opera Mobile 12 final støtter WebGL (bare på Android)

Utvikling og programmering av WebGL-innhold

Det er rikelig med ressurser for å komme i gang med WebGL-koding; faktisk de fleste online tutorials eller bøker og referanser starter med å bruke HTML5 Canvas-elementet sammen med JavaScript for å få grunnleggende grafikk i nettleseren. Det er verktøy, biblioteker og rammer som gir WebGL-utvikleren alternativer for programmering av grafikk og spill.

Tilgjengelige WebGL-verktøy:
  • WebGL Playground: Tilbyr en enkel måte å redigere og se resultatene i en nettleser. Bare skriv inn koden til redaktøren og se resultatene i "Kjør" -skjermen. Det er ikke nødvendig å bytte mellom redigereren og nettleseren, og det er ikke nødvendig å sette opp skjelettkoden. Alle nødvendige ting blir lagt bak kulissene.
JavaScript-verktøy:
  • webgl-utils.js - Vanlige WebGL-oppgaver JavaScript-verktøy
  • J3DI.js - Grunnleggende WebGL J3DI-hjelpere
  • J3DIMath.js - J3DI Math Classes-verktøyet
WebGL Matrix Libraries:
  • Sylvester - Vector and Matrix Math for JavaScript-bibliotek
  • webgl-mjs - JavaScript-vektor og matrisk matematikkbibliotek, optimalisert for WebGL-bruk
  • gl-matrix - JavaScript-matrise- og vektorbibliotek for High Performance WebGL-apper
WebGL Frameworks:
  • Canvas 3d JS Library - Canvas 3D JS Library (C3DL) er et JavaScript-bibliotek som gjør det enklere å skrive 3D-applikasjoner ved hjelp av WebGL.
  • GLGE - GLGE er et JavaScript-bibliotek beregnet på å lette bruken av WebGL; som i utgangspunktet er en lokal nettleser JavaScript API som gir direkte tilgang til openGL ES2.
  • Jax - Jax er et komplett WebGL-utviklingsmiljø med vekt på produktivitet, og får deg til implementering med lite tid og krefter.
  • X3DOM - Uttalt X-Freedom, dette er et eksperimentelt open source-rammeverk og runtime for å støtte den pågående diskusjonen i Web3D og W3C-miljøene hvordan en integrasjon av HTML5 og deklarativt 3D-innhold kan se ut.

Eksempler på WebGL in Action

WebGL Water - Et interaktivt vannbasseng med en kule som kan flyttes rundt, og skaper krusninger og bølger. Flytting av markøren skaper også en ringvirkning. Funksjoner inkluderer strålespore refleksjoner og brytninger, analytisk omgivelseslukking, simulering av høydefeltvann, myke skygger og kaustikk. Et skjermbilde av WebGL Water som vist i Chrome 18.0.1 er sett i figur A nedenfor.

Figur A

Google Books Bookcase - En roterende karusell på flere nivåer av bøker lar deg bla gjennom tusenvis av titler fra Google Books, med søkealternativer etter emne, og standard åpnes for bestselgere. Klikk på gjeldende emneoverskrift, og velg deretter fra åtte åtte emner, inkludert biografier og memoarer, datamaskiner og internett, fantasy, fiksjon, historie, referanse og andre. Klikk på et bokomslag og volumet utvides til en større visning; Klikk deretter på forsiden, så åpnes det for å avsløre en synopsis, og en kobling for å bestille boken. Et skjermbilde av delen av Google Books Bookcase History som vist i Chrome 18.0.1 er sett i figur B nedenfor.

Figur B

ROME "3 Dreams of Black" - En interaktiv film av Chris Milk og noen venner på Google som viser det kreative potensialet til WebGL; Beveg musen rundt for å se forskjellige vinkler på filmen når den skrider frem. Et skjermbilde av filmseksjonen som vist i Chrome 18.0.1 er sett i figur C nedenfor.

Figur C

Floating Shiny Knot - Av Jaume Sanchez, er dette en demonstrasjon av en shader for å bruke likevektige panoramaer rett fra Google street view som miljøkartleggingsteksturer. Teknologien som brukes inkluderer WebGL, HTML5 lerret og JavaScript. WebGL-applikasjonen bruker millioner av miljøkartteksturer med Google Street View-panoramaer, og har et klikk-og-dra-panoramavisningsprogram. Bruk musehjulet for å zoome inn og ut, bruk søkefeltet for å finne adresser, eller klikk på kartet for å velge et nytt sted. Du kan lage dine egne miljøkart etter å ha fulgt opplæringen fra Paul Lewis. Hvert sted har en unik URL som du kan dele. For eksempel er visningen i figur D Taos, NM som vist i Chrome 18.0.1.

Figur D

WebGL Aquarium - Av Greggman og Human Engines lar det deg velge antall fisk. Bruk musen til å endre forskjellige innstillinger, klikk på * for å få frem flere innstillinger, trykk MELLOMROM for å endre visningen og trykk L for haier med lasere. Siden gir også de faktiske innrammingene per sekund. Eksempelvisningen som vist i Chrome 18.0.1 er sett i figur E nedenfor.

Figur E

Det er mange andre WebGL-eksempler og eksperimentelle applikasjoner tilgjengelig på nettet, og du kan se mange flere på Google WebGL-eksperimenter, som er et utstillingsvindu for kreative webeksperimenter som er bygd med teknologier som HTML5, Canvas, SVG og WebGL.

© Copyright 2021 | pepebotifarra.com