PENGENALAN WEB GLOBE
UNIVERSITAS BHAYANGKARA SURABAYA
WebGL ( Web Graphics Library ) adalah API JavaScript untuk merender grafik 2D dan 3D interaktif dalam browser web apa pun yang kompatibel tanpa menggunakan plug-in . WebGL sepenuhnya terintegrasi dengan standar web lainnya, memungkinkan penggunaan fisika dan pemrosesan gambar serta efek yang dipercepat GPU sebagai bagian dari kanvas halaman web. Elemen-elemen WebGL dapat dicampur dengan elemen-elemen HTML lain dan digabungkan dengan bagian-bagian lain dari halaman atau latar belakang halaman. Program WebGL terdiri dari kode kontrol yang ditulis dalam JavaScript dan kode shader yang ditulis dalam OpenGL ES Shading Language (ESSL), bahasa yang mirip dengan C atau C ++ , dan dijalankan pada unit pemrosesan grafis (GPU) komputer. WebGL dirancang dan dikelola oleh Khronos Group nirlaba .
- DESAIN
WebGL 1.0 didasarkan pada OpenGL ES 2.0 dan menyediakan API untuk grafik 3D. Ialu menggunakan elemen kanvas HTML5 dan diakses menggunakan antarmuka Document Object Model (DOM). WebGL 2.0 didasarkan pada OpenGL ES 3.0 dan membuat ketersediaan banyak ekstensi opsional WebGL 1.0 dijamin dan memperlihatkan API baru.
Manajemen memori otomatis disediakan secara implisit oleh JavaScript . Seperti OpenGL ES 2.0, WebGL tidak memiliki API fungsi tetap yang diperkenalkan di OpenGL 1.0 dan tidak digunakan lagi dalam OpenGL 3.0. Fungsionalitas ini, jika diperlukan, harus diimplementasikan oleh pengembang akhir dengan menyediakan kode shader dan mengonfigurasi binding data dalam JavaScript. Shader di WebGL diekspresikan langsung dalam GLSL dan diteruskan ke API WebGL sebagai string teks. Implementasi WebGL mengkompilasi instruksi shader ini ke kode GPU. Kode ini dieksekusi untuk masing-masing dan setiap simpul yang dikirim melalui API dan untuk setiap piksel diraster ke layar.
- SEJARAH
WebGL berevolusi dari eksperimen Canvas 3D yang dimulai oleh Vladimir Vukićević di Mozilla . Vukićević pertama kali menunjukkan prototipe Canvas 3D pada tahun 2006. Pada akhir 2007, baik Mozilla dan Opera telah membuat implementasi terpisah mereka sendiri. Pada awal 2009, konsorsium teknologi nirlaba Grup Khronos memulai Kelompok Kerja WebGL, dengan partisipasi awal dari Apple , Google , Mozilla, Opera , dan lainnya. Versi 1.0 dari spesifikasi WebGL dirilis pada Maret 2011. Pada Maret 2012, ketua kelompok kerja adalah Ken Russell. Aplikasi awal WebGL termasuk Zygote Body . Pada November 2012 Autodesk mengumumkan bahwa mereka mem-porting sebagian besar aplikasi mereka ke cloud yang berjalan di klien WebGL lokal. Aplikasi-aplikasi ini termasuk Fusion 360 dan AutoCAD 360. Pengembangan spesifikasi WebGL 2 dimulai pada 2013 dengan final pada Januari 2017. Spesifikasi ini didasarkan pada OpenGL ES 3.0. Implementasi pertama ada di Firefox 51, Chrome 56 dan Opera 43.
- IMPLEMENTASI
Mesin Lapisan Grafis Hampir Asli
Almost Native Graphics Layer Engine (ANGLE) adalah mesin grafis open source yang mengimplementasikan WebGL 1.0 (2.0 yang sangat sesuai dengan ES 3.0) dan standar OpenGL ES 2.0 dan 3.0. Ini adalah backend default untuk Google Chrome dan Mozilla Firefox pada platform Windows dan berfungsi dengan menerjemahkan panggilan WebGL dan OpenGL ke API khusus platform yang tersedia. ANGLE saat ini menyediakan akses ke OpenGL ES 2.0 dan 3.0 ke desktop OpenGL, OpenGL ES, Direct3D 9, dan Direct3D 11 API. ″ [Google] Chrome menggunakan ANGLE untuk semua gambar yang dirender di Windows, termasuk percepatan implementasi Canvas2D dan lingkungan kotak pasir Native Client. ″
- PERANGKAT LUNAK
WebGL didukung secara luas di peramban modern. Namun ketersediaannya tergantung pada faktor-faktor lain seperti GPU yang mendukungnya. Situs web resmi WebGL menawarkan halaman pengujian sederhana. Informasi lebih rinci (seperti apa yang digunakan peramban, dan ekstensi apa yang tersedia) disediakan di situs web pihak ketiga.
BROWSER DEKSTOP
- Google Chrome - WebGL 1.0 telah diaktifkan di semua platform yang memiliki kartu grafis yang mampu dengan driver yang diperbarui sejak versi 9, dirilis pada Februari 2011. Secara default pada Windows, Chrome menggunakan ANGLE (Mesin Lapisan Grafis Hampir Asli) ) renderer untuk menerjemahkan OpenGL ES ke Direct X 9.0c atau 11.0, yang memiliki dukungan driver yang lebih baik. Di Linux dan Mac OS X, penyaji default adalah OpenGL. Dimungkinkan pula untuk memaksa OpenGL sebagai pemberi render pada Windows. Sejak September 2013, Chrome juga memiliki penyaji Direct3D 11 yang lebih baru, yang bagaimanapun membutuhkan kartu grafis yang lebih baru. Chrome 56+ mendukung WebGL 2.0.
- Mozilla Firefox - WebGL 1.0 telah diaktifkan di semua platform yang memiliki kartu grafis yang mampu dengan driver yang diperbarui sejak versi 4.0. Sejak 2013 Firefox juga menggunakan DirectX pada platform Windows melalui ANGLE . Firefox 51+ mendukung WebGL 2.0.
- Safari - Safari 6.0 dan versi yang lebih baru diinstal pada OS X Mountain Lion , Mac OS X Lion dan Safari 5.1 pada Mac OS X Snow Leopard mengimplementasikan dukungan untuk WebGL 1.0, yang dinonaktifkan secara default sebelum Safari 8.0. Safari versi 12 (tersedia di MacOS Mojave) memiliki dukungan yang tersedia untuk WebGL 2.0, saat ini sebagai fitur "Eksperimental".
- Opera - WebGL 1.0 telah diterapkan di Opera 11 dan 12, meskipun dinonaktifkan secara default pada tahun 2014. Opera 43+ mendukung WebGL 2.0.
- Internet Explorer - WebGL 1.0 didukung sebagian di Internet Explorer 11 . Awalnya gagal sebagian besar tes kesesuaian WebGL resmi, tetapi Microsoft kemudian merilis beberapa pembaruan. Mesin 0,94 WebGL terbaru saat ini melewati ~ 97% dari tes Khronos. Dukungan WebGL juga dapat ditambahkan secara manual ke versi Internet Explorer yang lebih lama menggunakan plugin pihak ketiga seperti IEWebGL.
- Microsoft Edge - Rilis stabil awal mendukung WebGL versi 0.95 (nama konteks: "eksperimental-webgl") dengan open source GLSL ke HLSL transpiler .Versi 10240+ mendukung WebGL 1.0 sebagai awalan. WebGL 2.0 direncanakan dengan prioritas sedang dalam rilis mendatang.
UTILITAS
ifat rendah dari API WebGL, yang menyediakan sedikit saja untuk menghasilkan grafik 3D yang diinginkan dengan cepat, berkontribusi pada pembuatan perpustakaan yang biasanya digunakan untuk membangun berbagai hal dalam grafik 3D (mis. Transformasi tampilan untuk shader , tampilan frustrasi, dll. ). Tugas-tugas dasar seperti memuat grafik adegan dan objek 3D dalam format industri populer juga disarikan oleh perpustakaan (beberapa di antaranya kadang-kadang hanya di- porting ke JavaScript dari bahasa lain) untuk memberikan fungsionalitas tambahan. Daftar pustaka yang tidak lengkap yang menyediakan banyak fitur tingkat tinggi termasuk A-Frame (VR) , BabylonJS , PlayCanvas , three.js , OSG.JS , dan CopperLicht . X3D juga membuat proyek yang disebut X3DOM untuk membuat konten X3D dan VRML berjalan di WebGL. Model 3D akan dalam tag XML <X3D> dalam HTML5 dan skrip interaktif akan menggunakan JavaScript dan DOM. BS Content Studio dan pengekspor InstantReality X3D dapat mengekspor X3D dalam HTML dan dijalankan oleh WebGL.
- PERANGKAT LUNAK
WebGL didukung secara luas di peramban modern. Namun ketersediaannya tergantung pada faktor-faktor lain seperti GPU yang mendukungnya. Situs web resmi WebGL menawarkan halaman pengujian sederhana. Informasi lebih rinci (seperti apa yang digunakan peramban, dan ekstensi apa yang tersedia) disediakan di situs web pihak ketiga.
BROWSER DEKSTOP
- Google Chrome - WebGL 1.0 telah diaktifkan di semua platform yang memiliki kartu grafis yang mampu dengan driver yang diperbarui sejak versi 9, dirilis pada Februari 2011. Secara default pada Windows, Chrome menggunakan ANGLE (Mesin Lapisan Grafis Hampir Asli) ) renderer untuk menerjemahkan OpenGL ES ke Direct X 9.0c atau 11.0, yang memiliki dukungan driver yang lebih baik. Di Linux dan Mac OS X, penyaji default adalah OpenGL. Dimungkinkan pula untuk memaksa OpenGL sebagai pemberi render pada Windows. Sejak September 2013, Chrome juga memiliki penyaji Direct3D 11 yang lebih baru, yang bagaimanapun membutuhkan kartu grafis yang lebih baru. Chrome 56+ mendukung WebGL 2.0.
- Mozilla Firefox - WebGL 1.0 telah diaktifkan di semua platform yang memiliki kartu grafis yang mampu dengan driver yang diperbarui sejak versi 4.0. Sejak 2013 Firefox juga menggunakan DirectX pada platform Windows melalui ANGLE . Firefox 51+ mendukung WebGL 2.0.
- Safari - Safari 6.0 dan versi yang lebih baru diinstal pada OS X Mountain Lion , Mac OS X Lion dan Safari 5.1 pada Mac OS X Snow Leopard mengimplementasikan dukungan untuk WebGL 1.0, yang dinonaktifkan secara default sebelum Safari 8.0. Safari versi 12 (tersedia di MacOS Mojave) memiliki dukungan yang tersedia untuk WebGL 2.0, saat ini sebagai fitur "Eksperimental".
- Opera - WebGL 1.0 telah diterapkan di Opera 11 dan 12, meskipun dinonaktifkan secara default pada tahun 2014. Opera 43+ mendukung WebGL 2.0.
- Internet Explorer - WebGL 1.0 didukung sebagian di Internet Explorer 11 . Awalnya gagal sebagian besar tes kesesuaian WebGL resmi, tetapi Microsoft kemudian merilis beberapa pembaruan. Mesin 0,94 WebGL terbaru saat ini melewati ~ 97% dari tes Khronos. Dukungan WebGL juga dapat ditambahkan secara manual ke versi Internet Explorer yang lebih lama menggunakan plugin pihak ketiga seperti IEWebGL.
- Microsoft Edge - Rilis stabil awal mendukung WebGL versi 0.95 (nama konteks: "eksperimental-webgl") dengan open source GLSL ke HLSL transpiler .Versi 10240+ mendukung WebGL 1.0 sebagai awalan. WebGL 2.0 direncanakan dengan prioritas sedang dalam rilis mendatang.
UTILITAS
ifat rendah dari API WebGL, yang menyediakan sedikit saja untuk menghasilkan grafik 3D yang diinginkan dengan cepat, berkontribusi pada pembuatan perpustakaan yang biasanya digunakan untuk membangun berbagai hal dalam grafik 3D (mis. Transformasi tampilan untuk shader , tampilan frustrasi, dll. ). Tugas-tugas dasar seperti memuat grafik adegan dan objek 3D dalam format industri populer juga disarikan oleh perpustakaan (beberapa di antaranya kadang-kadang hanya di- porting ke JavaScript dari bahasa lain) untuk memberikan fungsionalitas tambahan. Daftar pustaka yang tidak lengkap yang menyediakan banyak fitur tingkat tinggi termasuk A-Frame (VR) , BabylonJS , PlayCanvas , three.js , OSG.JS , dan CopperLicht . X3D juga membuat proyek yang disebut X3DOM untuk membuat konten X3D dan VRML berjalan di WebGL. Model 3D akan dalam tag XML
<X3D> dalam HTML5 dan skrip interaktif akan menggunakan JavaScript dan DOM. BS Content Studio dan pengekspor InstantReality X3D dapat mengekspor X3D dalam HTML dan dijalankan oleh WebGL.Mesin permainan
Ada juga telah munculnya mesin game untuk WebGL, baik 2D maupun 3D, termasuk Unreal Engine 4 dan Unity . Pustaka tingkat tinggi Away3D berbasiskan Stage3D / Flash juga memiliki port ke WebGL melalui TypeScript . Pustaka utilitas yang lebih ringan yang hanya menyediakan utilitas vektor dan matriks matematika untuk shader adalah sylvester.js. Terkadang digunakan bersama dengan ekstensi spesifik WebGL yang disebut glUtils.js.
Ada juga beberapa perpustakaan 2D yang dibangun di atas WebGL seperti Cocos2d -x atau Pixi.js , yang diimplementasikan dengan cara ini karena alasan kinerja, dalam suatu langkah yang paralel dengan apa yang terjadi dengan Kerangka Kerja Starling terhadap Stage3D di dunia Flash. Perpustakaan 2D berbasis WebGL kembali ke kanvas HTML5 ketika WebGL tidak tersedia.
Menghapus hambatan rendering dengan memberikan akses langsung ke GPU juga memperlihatkan keterbatasan kinerja dalam implementasi JavaScript. Beberapa ditangani oleh asm.js dan WebAssembly (juga, pengenalan Stage3D memaparkan masalah kinerja dalam ActionScript , yang ditangani oleh proyek-proyek seperti CrossBridge .
pembuatan konten
Seperti halnya grafik API lainnya yang membuat konten untuk adegan WebGL memerlukan penggunaan alat pembuatan konten 3D biasa dan mengekspor adegan ke format yang dapat dibaca oleh pemirsa atau perpustakaan pembantu. Perangkat lunak pembuat 3D desktop seperti Blender , Autodesk Maya atau SimLab Composer dapat digunakan untuk tujuan ini. Khususnya, Blend4Web memungkinkan adegan WebGL dikarang seluruhnya dalam Blender dan diekspor ke browser dengan satu klik, bahkan sebagai halaman web mandiri. Ada juga beberapa perangkat lunak khusus WebGL seperti CopperCube dan editor online berbasis WebGL Clara.io . Platform online seperti Sketchfab dan Clara.io memungkinkan pengguna untuk langsung mengunggah model 3D mereka dan menampilkannya menggunakan penampil WebGL yang di-host.
Ada juga telah munculnya mesin game untuk WebGL, baik 2D maupun 3D, termasuk Unreal Engine 4 dan Unity . Pustaka tingkat tinggi Away3D berbasiskan Stage3D / Flash juga memiliki port ke WebGL melalui TypeScript . Pustaka utilitas yang lebih ringan yang hanya menyediakan utilitas vektor dan matriks matematika untuk shader adalah sylvester.js. Terkadang digunakan bersama dengan ekstensi spesifik WebGL yang disebut glUtils.js.
Ada juga beberapa perpustakaan 2D yang dibangun di atas WebGL seperti Cocos2d -x atau Pixi.js , yang diimplementasikan dengan cara ini karena alasan kinerja, dalam suatu langkah yang paralel dengan apa yang terjadi dengan Kerangka Kerja Starling terhadap Stage3D di dunia Flash. Perpustakaan 2D berbasis WebGL kembali ke kanvas HTML5 ketika WebGL tidak tersedia.
Menghapus hambatan rendering dengan memberikan akses langsung ke GPU juga memperlihatkan keterbatasan kinerja dalam implementasi JavaScript. Beberapa ditangani oleh asm.js dan WebAssembly (juga, pengenalan Stage3D memaparkan masalah kinerja dalam ActionScript , yang ditangani oleh proyek-proyek seperti CrossBridge .
pembuatan konten
Seperti halnya grafik API lainnya yang membuat konten untuk adegan WebGL memerlukan penggunaan alat pembuatan konten 3D biasa dan mengekspor adegan ke format yang dapat dibaca oleh pemirsa atau perpustakaan pembantu. Perangkat lunak pembuat 3D desktop seperti Blender , Autodesk Maya atau SimLab Composer dapat digunakan untuk tujuan ini. Khususnya, Blend4Web memungkinkan adegan WebGL dikarang seluruhnya dalam Blender dan diekspor ke browser dengan satu klik, bahkan sebagai halaman web mandiri. Ada juga beberapa perangkat lunak khusus WebGL seperti CopperCube dan editor online berbasis WebGL Clara.io . Platform online seperti Sketchfab dan Clara.io memungkinkan pengguna untuk langsung mengunggah model 3D mereka dan menampilkannya menggunakan penampil WebGL yang di-host.
0 komentar:
Posting Komentar