WEB GLOBE

WEB GL Globe(Glove)

UNIVERSITAS BHAYANGKARA SURABAYA

     WebGL (Web Graphics Library) adalah JavaScript API untuk rendering grafis 3D interaktif dan grafis 2D dalam browser web yang kompatibel tanpa menggunakan plug-in. WebGL terintegrasi sepenuhnya ke semua standar web browser yang memungkinkan penggunaan percepatan GPU fisika dan pengolahan gambar dan efek sebagai bagian dari kanvas halaman web. Elemen WebGL dapat dicampur dengan elemen HTML lainnya dan composited dengan bagian-bagian lain dari latar belakang halaman atau halaman. WebGL program terdiri dari kode kontrol ditulis dalam JavaScript dan kode shader yang dijalankan pada komputer Graphics Processing Unit (GPU). WebGL dirancang dan dipelihara oleh Kelompok Khronos non-profit.

     HTML5 melakukan standarisasi pada tag <canvas> dan mempopulerkan Canvas API untuk melakukan manipulasi gambar 2D. Selain Canvas API, <canvas> juga dapat dipakai untuk menampilkan grafis 3D dengan menggunakan WebGL API. Karena WebGL cukup rumit dan berbeda jauh dari Canvas API, pada artikel ini saya akan berusaha menuliskan cara kerja WebGL dengan hanya memakai JavaScript biasa tanpa library eksternal sama sekali.

       Salah satu subset dari OpenGL adalah Open GL ES (Embedded Systems) yang ditujukan untuk perangkat portable. Saya dapat menggunakan OpenGL ES API di Java ME melalui Java Binding for the OpenGL ES API (JSR 239). WebGL adalah API dibuat berdasarkan OpenGL ES API. Bahasa yang dipakai untuk mempogram WebGL adalah JavaScript.

WebGL biasanya digunakan untuk desain web dan game 3D yang berbasis web. WebGL juga juga digunakan oleh beberapa peneliti untuk tujuan sains. Sebagai contoh, dalam buku yang berjudul "Cellular Automata", peneliti menggunakan WebGL untuk mensimulasikan alur Debris. Sedangkan pada paper "Visualization of molecular structures using state-of-the-art techniques in WebGL", peneliti mensimulasikan molekul didalamnya. NASA juga membangun aplikasi web yang interaktif yang disebut Experience Curiosity untuk merayakan ulang tahun ketiga dimana Curiosity Rover mendarat di Mars.

Desain

WebGL didasarkan pada OpenGL ES 2.0 dan menyediakan sebuah API untuk grafis 3D. Untuk alasan keamanan, GL_ARB_robustness (OpenGL 3.x) atau GL_EXT_robustness (OpenGL ES) diperlukan. Ia menggunakan elemen kanvas HTML5 dan diakses menggunakan antarmuka Document Object Model. Manajemen memori otomatis disediakan sebagai bagian dari bahasa JavaScript.

Sejarah

WebGL tumbuh dari eksperimen Canvas 3D dimulai oleh Vladimir Vukićević di Mozilla. Vukićević pertama menunjukkan prototipe 3D kanvas pada tahun 2006. Pada akhir tahun 2007, baik Mozilla dan Opera telah membuat implementasi sendiri terpisah. Pada awal 2009, non-profit teknologi konsorsium Grup Khronos memulai Kelompok Kerja WebGL, dengan partisipasi awal dari Apple, Google, Mozilla, Opera, dan lain-lain. Versi 1.0 dari spesifikasi WebGL dirilis Maret 2011. Pada Maret 2012, ketua kelompok kerja adalah Ken Russell. Aplikasi awal Terkemuka dari WebGL termasuk Google Maps dan Zygote Body.

Kelemahan

Meskipun perhitungan grafik 3D yang diperlukan untuk WebGL ditingkatkan ke GPU, perhitungannya harus ditulis dengan baik. Jika Anda ingin menulis kode WebGL Anda dari awal, tanpa bantuan dan bantuan kerangka kerja, Anda mungkin ingin memoles Matematika Lanjut 101 Anda. Pada kenyataannya, WebGL hanyalah mesin rasterisasi. Ini menarik poin dan garis yang Anda berikan.Contoh kode di bawah ini adalah salah satu versi pertama yang kami gunakan untuk menggambar cincin dan sapuan radar di 

Hal -Hal yang dapat dibuat menggunakan WEBGL

Aplikasi augmented reality

Pertandingan

Visualisasi data waktu nyata

Peta

Pencetakan 3D

Virtualisasi

Pengolahan citra

Penggunaan dunia nyata untuk WebGL tidak terbatas .

D3Js

D3.js

UNIVERSITAS BHAYANGKARA SURABAYA

D3.js (juga dikenal sebagai D3 , kependekan dari Data-Driven Documents ) adalah perpustakaan JavaScript untuk menghasilkan visualisasi data interaktif dan dinamis di browser web . Itu menggunakan standar Scalable Vector Graphics (SVG), HTML5 , dan Cascading Style Sheets (CSS). D3.js digunakan pada ratusan ribu situs web. Beberapa kegunaan populer termasuk membuat grafik interaktif untuk situs web berita online, dasbor informasi untuk melihat data, dan menghasilkan peta dari data pembuatan peta GIS . Selain itu, sifat SVG yang dapat diekspor memungkinkan grafik yang dibuat oleh D3 untuk digunakan dalam publikasi cetak.

Ada berbagai upaya sebelumnya untuk membawa visualisasi data ke browser web. Contoh yang paling menonjol adalah toolkit Prefuse, Flare, dan Protovis, yang semuanya dapat dianggap sebagai pendahulu langsung dari D3.js.

Prefuse adalah tool visualisasi yang dibuat pada 2005 yang mengharuskan penggunaan Java , dan visualisasi diberikan di dalam browser dengan plug-in Java. Flare adalah toolkit serupa dari 2007 yang menggunakan ActionScript , dan membutuhkan plug-in Flash untuk rendering.

Pada tahun 2009, berdasarkan pengalaman mengembangkan dan menggunakan Prefuse dan Flare, Jeff Heer, Mike Bostock , dan Vadim Ogievetsky dari Stanford Visualization Group dari Stanford menciptakan Protovis, perpustakaan JavaScript untuk menghasilkan grafik SVG dari data. Perpustakaan itu dikenal oleh praktisi visualisasi data dan akademisi. 

Pada 2011, pengembangan Protovis dihentikan untuk fokus pada proyek baru, D3.js. Diinformasikan oleh pengalaman dengan Protovis, Bostock, bersama dengan Heer dan Ogievetsky, mengembangkan D3.js untuk menyediakan kerangka kerja yang lebih ekspresif yang, pada saat yang sama, berfokus pada standar web dan memberikan peningkatan kinerja.

Prinsip Teknis

Tertanam dalam halaman web HTML , pustaka JavaScript D3.js menggunakan fungsi JavaScript yang sudah dibuat sebelumnya untuk memilih elemen, membuat objek SVG, gaya mereka, atau menambahkan transisi, efek dinamis atau tooltips kepada mereka. Objek-objek ini juga dapat ditata secara luas menggunakan CSS. Kumpulan data besar dapat dengan mudah diikat ke objek SVG menggunakan fungsi D3.js sederhana untuk menghasilkan grafik dan diagram teks / grafik yang kaya. Data dapat dalam berbagai format, paling umum JSON , nilai yang dipisah koma (CSV) atau geoJSON , tetapi, jika diperlukan, fungsi JavaScript dapat ditulis untuk membaca format data lainnya.

Pilihan

Prinsip utama dari desain D3.js adalah untuk memungkinkan programmer untuk pertama kali menggunakan pemilih gaya CSS untuk memilih satu set node Document Object Model (DOM), kemudian menggunakan operator untuk memanipulasi mereka dengan cara yang mirip dengan jQuery . ^[9] Misalnya, dengan menggunakan D3.js, seseorang dapat memilih semua elemen HTML <p>...</p> , dan kemudian mengubah warna teksnya, misalnya menjadi lavender:

  d3 .  selectAll ( "p" ) // pilih semua elemen <p>


 .  style ( "color" , "lavender" ) // setel style "color" ke nilai "lavender"


    .  attr ( "class" , "squares" ) // set atribut "class" menjadi nilai "squares"



    .  attr ( "x" , 50 );  // atur atribut "x" (posisi horizontal) ke nilai 50px

Pilihan dapat didasarkan pada tag (seperti dalam contoh di atas), kelas, pengidentifikasi, atribut, atau tempat dalam hierarki. Setelah elemen dipilih, seseorang dapat menerapkan operasi padanya. Ini termasuk mendapatkan dan mengatur atribut, menampilkan teks, dan gaya (seperti pada contoh di atas). Elemen juga dapat ditambahkan dan dihapus. Proses memodifikasi, membuat, dan menghapus elemen HTML ini dapat dibuat bergantung pada data, yang merupakan konsep dasar D3.js.

Transisi

Dengan mendeklarasikan transisi, nilai untuk atribut dan gaya dapat diinterpolasi dengan lancar selama waktu tertentu. Kode berikut akan membuat semua elemen HTML <p>...</p> pada halaman secara bertahap mengubah warna teks menjadi pink:

  d3 .  selectAll ( "p" ) // pilih semua elemen <p>


 .  transisi ( "trans_1" ) // transisi dengan nama "trans_1"


      .  delay ( 0 ) // transisi mulai 0ms setelah pemicu



      .  durasi ( 500 ) // transisi untuk 500 ms



      .  easy ( d3 . easyLinear ) // progres pelonggaran transisi adalah linear ...



    .  gaya ( "warna" , "merah muda" );  // ... untuk mewarnai: merah muda

pengikatan data

Untuk penggunaan yang lebih lanjut, data yang dimuat mendorong pembuatan elemen. D3.js memuat dataset yang diberikan, kemudian, untuk setiap elemennya, membuat objek SVG dengan properti terkait (bentuk, warna, nilai) dan perilaku (transisi, peristiwa).

  // Data


 var countryData = [


      { nama : "Irlandia" , penghasilan : 53000 , hidup : 78 , pop : 6378 , warna : "hitam" },



      { nama : "Norwegia" , penghasilan : 73000 , kehidupan : 87 , pop : 5084 , warna : "biru" },



      { nama : "Tanzania" , penghasilan : 27000 , kehidupan : 50 , pop : 3407 , warna : "abu-abu" }



   ];


// Buat wadah SVG


   var svg = d3 .  pilih ( "#hook" ).  append ( "svg" )



         .  attr ( "width" , 120 )



         .  attr ( "height" , 120 )



         .  style ( "background-color" , "# D0D0D0" );


// Buat elemen SVG dari data


     svg .  selectAll ( "circle" ) // buat template lingkaran virtual



       .  data ( countryData ) // mengikat data



        .  gabung ( "lingkaran" ) // gabungkan data ke dalam seleksi dan buat elemen lingkaran untuk setiap data individual



         .  attr ( "id" , function ( d ) { return d . name }) // atur id lingkaran sesuai dengan nama negara



         .  attr ( "cx" , function ( d ) { return d . income / 1000 }) // atur posisi horizontal lingkaran sesuai dengan pendapatan



         .  attr ( "cy" , function ( d ) { return d . life }) // mengatur posisi vertikal lingkaran sesuai dengan harapan hidup



         .  attr ( "r" , function ( d ) { return d . pop / 1000 * 2 }) // mengatur jari-jari lingkaran sesuai dengan populasi negara



         .  attr ( "fill" , function ( d ) { return d . color });  // mengatur warna lingkaran sesuai dengan warna negara

Grafik SVG yang dihasilkan dirancang sesuai dengan data yang disediakan.

Menambahkan node menggunakan data

Setelah dataset terikat pada dokumen, penggunaan D3.js biasanya mengikuti pola di mana fungsi .enter() eksplisit, fungsi "update," implisit dan eksplisit .exit() dipanggil untuk setiap item dalam dataset terikat. . Setiap metode yang dirantai setelah perintah .enter() akan dipanggil untuk setiap item dalam dataset yang belum diwakili oleh simpul DOM dalam seleksi ( selectAll() sebelumnya selectAll() ). Demikian juga, fungsi pembaruan implisit dipanggil pada semua node yang dipilih yang ada item yang sesuai dalam dataset, dan .exit() dipanggil pada semua node terpilih yang ada yang tidak memiliki item dalam dataset untuk mengikatnya. Dokumentasi D3.js memberikan beberapa contoh cara kerjanya.

Struktur API D3.js

API D3.js berisi beberapa ratus fungsi, dan mereka dapat dikelompokkan ke dalam unit logis berikut:

• Pilihan
• Transisi
• Array
• Matematika
• Warna
• Sisik
• SVG
• Waktu
• Tata letak
• Geografi
• Geometri
• Perilaku

Matematika

• Generasi angka pseudorandom dengan distribusi normal , log-normal , Bates , dan Irwin-Hall .
• Transformasi dalam 2D: terjemahan , rotasi , miring, dan penskalaan.

Array

Operasi array D3.js dibangun untuk melengkapi dukungan array yang ada dalam JavaScript (metode mutator: sort, reverse, splice, shift, dan unshift; metode accessor: concat, join, slice, indexOf dan lastIndexOf; metode iterasi: filter, setiap, untuk setiap mesin, map, sebagian, kurangi dan perkecilRight). D3.js memperluas fungsi ini dengan:

• Fungsi untuk menemukan minimum, maksimum, luas, jumlah, rata-rata, median, dan kuantil dari suatu array.
• Fungsi untuk memesan, mengocok, mengganti-ganti, menggabungkan, dan membagi dua array.
• Fungsi untuk array bersarang.
• Fungsi untuk memanipulasi array asosiatif.
• Dukungan untuk peta dan mengatur koleksi.

Geometri

• Menghitung lambung cembung satu set poin.
• Menghitung Voronoi tesselation dari satu set poin.
• Dukungan untuk struktur data titik quadtree .
• Dukungan untuk operasi dasar pada poligon.