WebGL

WebGL (Web Graphics Library) adalah sebuah API JavaScript untuk merender grafis interaktif 3D dan grafis 2D dalam setiap web browser yang kompatibel tanpa menggunakan plugin. WebGL membawa grafis 3D ke Web dengan memperkenalkan sebuah API yang berkaitan erat dengan OpenGL ES 2.0 yang dapat digunakan dalam bagian-bagian HTML5 <canvas>.

Dukungan pada WebGL sekarang ada pada Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ dan Internet Explorer 11+, namun, GPU milik pengguna juga harus mendukung.

Topik-topik pengembangan

Memulai WebGL: Cara mengatur konteks WebGL.
Menambahkan konten 2D ke dalam konteks WebGL: Cara melakukan render bentuk datar sederhana menggunakan WebGL.
Menggunakan shader untuk penerapan warna dalam WebGL: Mendemonstrasikan cara untuk menambah warna ke ragam bentuk menggunakan shaders.
Menganimasikan objek-objek dengan WebGL: Menunjukan cara merotasi dan menterjemahkan objek-objek menjadi sebuah animasi sederhana.
Membuat objek 3D menggunakan WebGL: Menunjukan cara membuat dan menganimasikan objek 3D (dalam kasus ini menggunakan kubus).
Menggunakan Tekstur dalam WebGL: Menunjukan cara pemetaan tekstur ke permukaan sebuah objek.
Pencahayaan dalam WebGL: Cara mengsimulasikan efek pencahayaan dalam konteks WebGL anda.
Menganimasikan tekstur dalam WebGL: Menunjukan cara menganimasikan tekstur, dalam kasus ini memetakan sebuah Ogg video ke permukaan kubus yang berotasi.
Praktek-praktek WebGL: Tips dan saran-saran untuk meningkatkan konten WebGL
Tekstur Cross-domain: Informasi tentang pemuatan tekstur dari domain-domain selain salah satu dari konten yang termuat.
Menggunakan ekstensi-ekstensi: Cara menggunakan ekstensi-ekstensi yang tersedia dalam WebGL.

Sumber-sumber

Spesifikasi WebGL: Spesifikasi WebGL
Situs Khronos WebGL: Website utama untuk WebGL pada grup Khronos
Mempelajari WebGL: SItus dengan tutorial-tutorial cara penggunaan WebGL
Pokok-pokok WebGL: Sebuah tutorial dasar dengan pokok-pokok utama WebG
WebGL Matriks: Sebuah pengenalan penggunaan matriks dalam WebGL. Rangkaian ini juga berjalan pada penjelasan matematika dibelakang sudut pandang 3D.
Buku masak (Cookbook) WebGL: Sebuah website dengan resep ringkas untuk menulis kode WebGL.
Planet WebGL: sebuah aggregator masukan agar orang-orang dapat terlibat dalam komunitas WebGL.
Matriks-ewgl: sebuah library matriks yang sangat cepat untuk WebGL.
glMatrix: Matriks JavaScript dan librari vektor untuk performa tinggi aplikasi WebGL
mjs: Sebuah librari JavaScript vektor dan matriks matematika, mengoptimalkan penggunaan WebGL.
Sylvester: Sebuah library open source untuk memanipulas vektor dan matrik. Tidak begitu optimal pada WebGL tapi sangat kuat.
Tempat bermain WebGL: Sebuah alat bantu online untuk membuat dan berbagi proyek WebGL. Bagus untuk pembuatan prototype secara cepat dan untuk percobaan.
Akademi WebGL: Sebuah editor HTML/JavaScript dengan bahan ajar untuk mempelajari dasar-dasar pemprograman WebGL.

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari
Basic support	4.0 (2.0)	9	11	12 (experiment)	5.1 (experiment)
`OES_texture_float`	6.0 (6.0)	?	?	?	?
`OES_standard_derivatives`	10.0 (10.0)	?	?	?	?
`EXT_texture_filter_anisotropic`	13.0 (13.0)	?	?	?	?
`WEBGL_compressed_texture_s3tc`	15.0 (15.0)	?	?	?	?
`drawingBufferWidth` and `drawingBufferHeight` attributes	9.0 (9.0)	?	?	?	?

Feature	Firefox Mobile (Gecko)	Chrome for Android	IE Mobile	Opera Mobile	Safari Mobile
Basic support	4	25 (experiment)	Not supported	12 (experiment)	Not supported
`drawingBufferWidth` and `drawingBufferHeight` attributes	9.0 (9.0)	25	?	?	?
`OES_texture_float`	6.0 (6.0)	25	?	?	?
`OES_standard_derivatives`	10.0 (10.0)	25	?	?	?
`EXT_texture_filter_anisotropic`	13.0 (13.0)	25	?	?	?
`OES_element_index_uint`	?	25	?	?	?
`OES_vertex_array_object`	?	25	?	?	?
`WEBGL_compressed_texture_s3tc`	15.0 (15.0)	25 prefixed with WEBKIT_	?	?	?
`WEBKIT_EXT_texture_filter_nisotropic`	Not supported	25	Not supported	Not supported	?

Catatan kompabilitas

Selain untuk browser, GPU itu sendiri juga membutuhkan fitur pendukung. Jadi, contohnya,S3 Texture Compression (S3TC), kompresi tekstur ini hanya tersedia pada tablet berbasis Tegra. Sebagian besar browser membuat WebGL konteks tersedia diseluruh nama konteks webgl, tetapi yang lebih tua membutuhkan pula experimental-webgl.

In addition to the browser, the GPU itself also needs to support the feature. So, for example, S3 Texture Compression (S3TC) is only available on Tegra-based tablets. Most browsers make the WebGL context available through the webgl context name, but older ones need experimental-webgl as well. In addition, the upcoming WebGL 2 is fully backwards-compatible and will have the context name experimental-webgl2 in the future for testing.

Gecko notes

WebGL debugging and testing

Starting with Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), there are two preferences available which let you control the capabilities of WebGL for testing purposes:

webgl.min_capability_mode: A Boolean property that, when true, enables a minimum capability mode. When in this mode, WebGL is configured to only support the bare minimum feature set and capabilities required by the WebGL specification. This lets you ensure that your WebGL code will work on any device or browser, regardless of their capabilities. This is false by default.
webgl.disable_extensions: A Boolean property that, when true, disables all WebGL extensions. This is false by default.