<canvas> WebGL - Introduktion

WebGL kan vise hurtig hardware accelereret 3D grafik på <canvas> med JavaScript uden brug af browser-plugins

Introduktion

webgl logo
WebGL er net udgaven af OpenGL ES 2.0 som udvidder JavaScript's muligheder for at lave 3D grafik på <canvas> i en browser uden brug af plugins.

WebGL står for Web Graphics Library.
I OpenGL ES 2.0 står ES for Embedded Systems.

Sproget skulle minde om C++.

WebGL er ikke en del af HTML5.

Jeg ved ikke særlig meget om at lave 3D grafik og om WebGL så jeg vil holde mig til at vise hvordan man får WebGL til at virke i browserne og vise nogle få simple eksempler og ellers linke til til andre hjemmesider med <canvas> + WebGL demoer.

Demo

Her ses en WebGL animation på <canvas>
Browseren understøtter ikke <canvas>
WEBGL DEMO
(PÅ EN SIDE FOR SIG SELV)
Da WebGL ikke er tilgængelig i browseren er her i stedet en video af en WebGL animation

Browsertest

Browserunderstøttelse af WebGL og extensions

Browser WebGL GetContext() WebGL extensions
Firefox logo
Firefox 30.0
ja experimental-webgl
webgl
EXT_frag_depth
EXT_texture_filter_anisotropic
OES_element_index_uint
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
WEBGL_compressed_texture_s3tc
WEBGL_depth_texture
WEBGL_lose_context
MOZ_WEBGL_lose_context
MOZ_WEBGL_compressed_texture_s3tc
MOZ_WEBGL_depth_texture
Opera logo
Opera 12.10
ja2 experimental-webgl [ingen]
Opera Mobile Classic Emulator logo
Opera (Mobile Classic Emulator)
ja experimental-webgl OES_standard_derivatives
Safari logo
Safari 5.1.7
1
Chrome logo
Chrome 23.0.1271.64 m
ja experimental-webgl
webkit-3d
OES_texture_float
OES_standard_derivatives
WEBKIT_EXT_texture_filter_anisotropic
WEBKIT_WEBGL_lose_context
WEBKIT_WEBGL_compressed_texture_s3tc
WEBKIT_WEBGL_depth_texture
Internet Explorer logo
Internet Explorer 11.0.9431.0 Developer Preview
ja experimental-webgl [ingen]
4
Internet Explorer logo
Internet Explorer 11.0.9600.16428
ja experimental-webgl OES_texture_float
EXT_texture_filter_anisotropic4
Internet Explorer logo
Internet Explorer Developer Channel DC1
ja experimental-webgl ANGLE_instanced_arrays
EXT_texture_filter_anisotropic
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
WEBGL_compressed_texture_s3tc
Alle tests er udført på Windows 7 (64-bit)


1 WebGL virker ikke i Safari på Windows. Men det skulle virke fra version 5.1 på Leopard, Snow Leopard og Lion.

2 Selvom Opera 12.10 (desktop) understøtter WebGL så understøtter den ikke nogen WebGL extensions som betyder at der er rigtig mange WebGL demoer der ikke virker.

3 Ekstra extensions kan måske slås ved at sætte about:config?filter=webgl.enable-draft-extensions til true.

4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_WEBGL]
"iexplore.exe"=dword:00000001

til at skifte fra IESL til GLSL :
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_WEBGL_HLSL_SHADERS]
"iexplore.exe"=dword:00000000

If you don’t put the second runtime registry flag (HLSL_SHADERS) to 1,
you can get OpenGL shaders working, which means much more demos
available on the web are working.

As expected, the shaders currently require(see update 4) the IESL
format (a restricted version of the HLSL format from DirectX)
instead of the GLSL format of OpenGL, which means almost no demo
you can find on the web will run unmodified in IE11 for now.

Browserunderstøttelse fra caniuse.com :

Hvis WebGL ikke virker

Dit grafikkort skal understøtte hardware acceleration.

Hvis du kan spille hardware accelereret 3D spil på din computer så vil jeg mene at du også kan få WebGL til at virke.

Hvis du af en eller anden grund ikke har en korrekt grafikkort-driver (for eksempel hvis der ikke er lavet nogen driver til det system du bruger) så er det ikke sikkert du kan få WebGL til at virke.

Download den seneste grafikkort-driver fra producentens hjemmeside

AMD, NVIDIA og Intel kan du finde software til at opdatere grafikkort-drivere.

Der er også software til at finde ud af hvad grafikkort du har i dit systemet.


Virker WebGL ikke i din browser?

Start med at download den seneste version af en browser der understøtter WebGL.
For eksempel Firefox, Opera eller Chrome.

Forsøg så om WebGL virker ved at besøge denne side igen.
WebGL skal måske aktiveres i browseren.
Læs videre om at aktivere WebGL.


Firefox logo Firefox og WebGL

Prøv og sæt about:config?filter=webgl.force-enabled til true og prøv så om WebGL virker.
Firefox about:config webgl webgl.disabled webgl.force-enabled
Kig i Hjælp→Teknisk information... (eller skriv about:support i adressefeltet) og rul ned til hvor der står Grafik.
Firefox about:support Grafik
I min browser stod der at jeg skulle prøve at opdater min grafikkort-driver til version 10.6.
Efter at have opdateret alt muligt virker WebGL også selvom webgl.force-enabled er sat til false (standard indstilling).

Efter jeg en anden gang installerede Catalyst Control Center til mit AMD/ATI grafikkort blev WebGL 3D grafik mere hakkende end tidligere og ved Direct2D aktiveret stod der Ikke understøttet i denne grafik-driver-version. Prøv at opgradere din grafik-driver til version ATI Catalyst 14.6+ eller nyere..

På grafikort producentens hjemmeside fandt jeg link til en nyere version af Catalyst Control Center også blev WebGL grafikken glat igen.


Opera logo Opera og WebGL

I Opera kan du skrive opera:config#Enable%20WebGL i adressefeltet og sætte værdien til 1.
opera:config#Enable Hardware Acceleration sættes også til 1.
Gem og genstart eventuelt Opera.


Safari logo Safari og WebGL

WebGL virker ikke i Safari på Windows.

Jeg har læst at WebGL skulle virker fra Safari 5.1 hvis det køres på Mac OS X 10.6, Leopard, Snow Leopard eller Lion.
For at aktiver WebGL på Macintosh kan man åbne en terminal og skrive følgende.

Man kan måske også gøre sådan her...
Vælg Rediger Indstillinger...
Avanceret.
Vis udviklingsmenuen på menulinjen.
Vælg Udvikler "Enable WebGl".


Chrome logo Chrome og WebGL

WebGL virker i Chrome fra starten uden ændringer.


Internet Explorer logo Internet Explorer og WebGL

Internet Explorer 10.0.9200.16438 Pre-Release understøtter ikke WebGL.
Internet Explorer 11.0.9431.0 Developer Preview understøtter WebGL men ingen extensions.
Internet Explorer Developer Channel understøtter WebGL og nogle extensions (WEBGL_compressed_texture_s3tc, OES_texture_float, OES_texture_float_linear, EXT_texture_filter_anisotropic, OES_standard_derivatives, ANGLE_instanced_arrays).

Her er noget der måske skal ændres med regedit.exe før WebGL virker i IE11.

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_WEBGL]
"iexplore.exe"=dword:00000001

til at skifte fra IESL til GLSL :
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_WEBGL_HLSL_SHADERS]
"iexplore.exe"=dword:00000000

If you don’t put the second runtime registry flag (HLSL_SHADERS) to 1,
you can get OpenGL shaders working, which means much more demos
available on the web are working.

As expected, the shaders currently require(see update 4) the IESL
format (a restricted version of the HLSL format from DirectX)
instead of the GLSL format of OpenGL, which means almost no demo
you can find on the web will run unmodified in IE11 for now.

Simpel WebGL demo

Her er et simpelt eksempel hvor WebGL bruges til at tegne en farve på <canvas>.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

SIMPEL WEBGL DEMO
(PÅ EN SIDE FOR SIG SELV)

getContext()

Med getContext() kan man vælge at bruge WebGL til at tegne på <canvas>.

Der er flere forskellige strenge at vælge imellem indtil specifikationerne kommer på plads.

Shaders

Jeg har fået at vide at fragment-shaders og vertex-shaders normalt programmeres i et sprog som hedder GL Shading Language som vist minder om C sproget.

Flowet skulle være Appikation -> Vertex Shader -> Rasterizer -> Fragment Shader -> Frame Buffer -> Skærm.

Selvom jeg ikke fatter noget af det selv.

x-shader/x-fragment

Fragment shaders bruges til at manipulere hvert enkelt pixels... har jeg fået at vide.

x-shader/x-vertex

Vertex shaders bruges til at udregne transformationer af vertics (punkter)... har jeg fået at vide.

Ord og forklaring

Jeg ved ikke så meget om 3D grafik men der bruges nogle ord så jeg vil prøve at forklare her.

WebGL extensions

Til WebGL findes forskellige extensions.

Det er forskelligt hvilke browsere der understøtter hvilke WebGL extensions.

WEBGL EXTENSION UNDERSTØTTELSES TEST

getExtension() bruges til at teste om én bestemt WebGL extension er understøttet.


getSupportedExtensions() bruges til at hente navnene på alle understøttede WebGL extensions.

Næste side

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.