WEB GLOVE

WebGL bersifat hardware accelerated dan spesifikasinya berdasar pada OpenGL ES 2.0. Bagian CPU diproses menggunakan javascript, sedangkan GPU menggunakan GLSL (OpenGL Shading Language). 

Secara garis besar, masing-masing tahap pada pipeline diatas adalah sebagi berikut (beberapa saya sendiri kurang yakin).

1. API (CPU) merupakan API WebGL
2. Vertex Buffer Object (CPU) adalah data vertex yang akan dikirim ke GPU
3. Promitive Processing (CPU) adalah segala proses yang dituliskan melalui javascript
4. Vertex Shader (GPU) merupakan shader yang memproses setiap vertex
5. Primitive Assembly (GPU) itu seperti pengelompokan data vertex-vertex untuk dibentuk menjadi titik, garis atau poligon (hanya segitiga)
6. Rasterizer (GPU) adalah pembentukan pixel
7. Fragment Shader (GPU) adalah tempat pewarnaan pixel.
8. Depth Stencil (GPU) merupakan proses depth test dan stencil test.
9. Colour Buffer Blend (GPU) adalah proses blending warna dari pixel-pixel yang tersisa.
10. Dither (kurang tau ini apaan)
11. Frame Buffer (GPU) adalah tempat gambar 2D hasil. Jika Framebuffer tidak ada, maka hasil akan digambar pada canvas

Vertex dan fragment shader adalah bagian yang harus anda definisikan menggunakan GLSL.

Ø  WebGL = Javascript + GLSL

Secara garis besar, Pemograman WebGL dilakukan dengan mengatur data dari CPU ke GPU. Konstruksi data dilakukan di CPU menggunakan bahasa Javascript. Data kemudian dikirim ke GPU dan diproses menggunakan bahasa GLSL pada bagian vertex shader dan fragment shader. Output dari vertex shader adalah posisi titik-titik tiga dimensi dalam clip space dan ukuran pixel untuk setiap titik, sedangkan fragment shader adalah warna untuk setiap pixel.

Ø  Inisiasi

Langkah pertama yang dilakukan untuk membuat aplikasi WebGL adalah mendapatkan konteks WebGL dari canvas element. String context untuk WebGL adalah "webgl", akan tetapi karena implementasi WebGL masih ekperimental pada beberapa browser, maka string context yang umumnya (hampir semuanya) digunakan adalah "experimental-webgl".

Ø  Vertex dan vertex shader

Vertex didefinisikan sebagai titik (point) dalam ruang 3D yang memiliki koordinat x, y, dan z. Akan tetapi dalam WebGL, pengertian vertex lebih dari sekedar titik. Vertex dapat didefinisikan sebagai sebuah objek, berupa titik, yang memiiki attibut/properti. Salah satu attribut adalah posisi, dan dapat memiliki atribut lain seperti warna dan surface normal.

Atribut vertex dalam vertex shader didefinisikan menggunakan keyword attribute. Dalam tutorial ini, vertex hanya memiliki satu atribut yaitu "a_position" yang merupakan posisi vertex dalam ruang 3D.

Ø  Data Vertex

Data vertex dibuat di CPU dan dikirim ke GPU. Untuk mengirim data ke GPU, data perlu "dipaket" dalam vertex buffer. Setting data dalam vertex buffer dilakukan dengan menggunakan ArrayBuffer atau ArrayBufferView. Terdapat 8 jenis ArrayBufferView yaitu Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array. Tutorial kali ini menggunakan 4 vertex dimana koordinat posisi (x, y, z) masing-masing vertex adalah sebagai berikut.

1.      ( 0.5,  0.5, 0)

2.      ( 0.5, -0.5, 0)

3.      (-0.5, -0.5, 0)

4.      (-0.5,  0.5, 0)

ArrayBufferView yang digunakan sebagai data posisi vertex adalah Float32Array, karena data koordinat x, y dan z berupa tipe data float. Data harus diletakkan secara "rata" dalam elemen-elemen ArrayBufferView. 

Ø  Glove

Sebuah sarung kabel (kadang-kadang disebut "dataglove" atau "cyberglove") adalah sebuah perangkat input untuk interaksi manusia-komputer yang dikenakan seperti sarung tangan.Berbagai sensor teknologi yang digunakan untuk menangkap data fisik seperti menekuk dari jari . Seringkali tracker gerak, seperti magnet alat pelacak atau perangkat pelacakan inersia , melekat untuk menangkap posisi / rotasi data global dari sarung tangan. Gerakan-gerakan ini kemudian diinterpretasikan oleh perangkat lunak yang menyertai sarung tangan, sehingga setiap gerakan yang dapat berarti banyak hal. Gestures kemudian dapat dikategorikan menjadi informasi yang berguna, seperti untuk mengenali Sign Language atau fungsi simbolis lainnya. Mahal high-end sarung kabel juga dapat memberikan haptic feedback, yang merupakan simulasi dari indera peraba. Hal ini memungkinkan sarung tangan kabel juga dapat digunakan sebagai perangkat output. Secara tradisional, sarung kabel hanya telah tersedia dengan biaya yang besar, dengan sensor tikungan jari dan perangkat pelacakan harus dibeli secara terpisah.Sarung kabel sering digunakan dalam virtual reality lingkungan.

#UBHARA

Pengertian materi tentang PHYTON

D3.js adalah library JavaScript yang dipakai untuk memanipulasi dokumen HTML dan menggambar diagram berdasarkan data yang diberikan. Library ini menggunakan HTML, CSS, dan SVG Untuk membuat representasi visual dari kumpulan data yang bisa dilihat diberbagai browser modern.

D3.js juga memiliki fitur untuk membuat diagram yang interaktif dengan animasi-animasi menarik.

Di tutorial ini kita akan mengenal konsep dasar penggunaan D3.js. Kita akan pelajari bagaimana menggunakannya dengan me-render sebuah diagram batang, elemen HTML dan SVG, serta menerapkan transformasi dan event ke diagram tersebut.

Ø  Mulai Menggunakan D3

Karena D3.js adalah library JavaScript, untuk memakainya kita cukup menulis baris berikut di dalam file HTML.

<script src='https://d3js.org/d3.v4.min.js'></script>

Ø  DOM Selection

Dengan D3.js kita bisa memanipulasi Document Object Model (DOM), yang artinya kita bsa memilih elemen dan memberikan berbagai jenis transformasi ke elemen tersebut.

Mari mulai dengan contoh sederhana dimana kita akan memakai D3 untuk memilih dan mengubah warna dan ukuran font tag heading.

<html>

<head>

    <title>Learn D3 in 5 minutes</title>

</head>

<body>

<h3>Today is a beautiful day!!</h3>

<script src='https://d3js.org/d3.v4.min.js'></script>

<script>

    d3.select('h3').style('color', 'darkblue');

    d3.select('h3').style('font-size', '24px');

</script>

</body>

</html>

Disini kita hanya menautkan mehod select() di objek d3 yang memilih elemen tertentu, dan diikuti dengan method style(). Di method style(), parameter pertama menentukan apa yang ingin diubah dan parameter kedua memberikan nilai yang baru.

Ø  Data Binding

Konsep berikutnya yang perlu dipelajari adalah data binding karena konsep ini sangat penting di D3. Dengan menggunakannya, kita bisa mengisi atau memanipulasi elemen DOM secara realtime.

di HTML kita, tambahkan sebuah tag <ul>:

<ul> </ul>

Kita ingin mengisi unordered list tersebut dengan sebuah objek data. Berikut kode JavaScript-nya:

<script>

    var fruits = ['apple', 'mango', 'banana', 'orange'];

    d3.select('ul')

        .selectAll('li')

        .data(fruits)

        .enter()

        .append('li')

        .text(function(d) { return d; });

</script>

Pada kode JavaScript di atas, D3 membaca elemen <ul> dan seluruh elemen <li> di dalamnya menggunakan select() dan selectAll(). Agaknya aneh kita membaca elemen li yang belum kita tamahkan disana, tapi begitulah cara kerja D3.

Kita lalu mengirimkan data dengan method data(), dan memanggil enter() yang akan mengulangi (melakukan looping atau perulangan) method-method di bawahnya (append dan text) sampai isi arrray fruits habis di baca satu persatu.

Dengan kata lain, perintah tersebut, menambahkan sebuah <li> untuk setiap item di dalam array. Untuk setiap tag li, ia juga menambahkan teks didalamnya menggunakan mehod text(). Parameter d didalam text() adalah fungsi callback yang mengarah ke elemen di dalam array saat looping terjadi (apple, mango, dst satu persatu).

Ø  Membuat Elemen SVG

Scalable Vector Graphics (SVG) adalah sebuah cara untuk me-render elemen grafis dan gambar ke dalam DOM. Karena SVG berbasis vector, maka ia ringan dan scalable (bisa diperbesar/perkecil tanpa mempengaruhi kualitas). D3 menggunakan SVG untuk menciptakan gambar-gambarnya, sehingga SVG menjadi pondasi utama library ini.

Pada contoh di bawah, sebuah kotak digambar menggunakan D3 di sebuah kontainer SVG.

//Select SVG element

var svg = d3.select('svg');

//Create rectangle element inside SVG

svg.append('rect')

   .attr('x', 50)

   .attr('y', 50)

   .attr('width', 200)

   .attr('height', 100)

   .attr('fill', 'green');

D3 akan me-render elemen kotak di DOM. Ia pertama memeilih elemen SVG dan menggambar kotaknya di dalam elemen tersebut. Ia juga mengatur koordinat x dan y juga lebar, tinggi, dan warna isinya di method attr().

Ø  Membuat Diagram Batang

D3 memungkinkan kita untuk membuat berbagai jenis diagram agar bisa merepresentasikan data dengan lebih efisien. Pada contoh di bawah, kita membuat diagram batang sederhana dengan D3.

Mari mulai dengan membuat tag SVG di HTML.

<svg width='200' height='500'></svg>

Lalu, kita tulis kode JavaScript yang kita butuhkan untuk merender diagram tersebut di tag <svg>:

var data = [80, 120, 60, 150, 200];

var barHeight = 20;

var bar = d3.select('svg')

          .selectAll('rect')

          .data(data)

          .enter()

          .append('rect')

          .attr('width', function(d) {  return d; })

          .attr('height', barHeight - 1)

          .attr('transform', function(d, i) {

            return "translate(0," + i * barHeight + ")";

          });

Pada kode di atas, kita memiliki sebuah array yang berisi angka-angka untuk ditampilkan di diagram batang kita tadi. Setiap item di dalam array akan mengisi satu batang.

Setelah memilih elemen svg dan rect, kita mengirim data dengan method data() dan memanggil enter() untuk melakukan looping kode-kode di bawahnya sampai isi array habis di baca.

Untuk setiap item, kita menggambar sebuah kotak dan mengatur lebarnya sesuai dengan nilai yang dimiliki. Kita lalu mengatur tinggi setiap kotak dan untuk menghindari overlapping, kita memberikan padding dengan mengurangi barHeight sebesar 1.

Kita lalu memberikan sebuah transformasi agar kotak-kotak tersebut berada kotak sebelumnya. Fungsi transform() menerima fungsi callback yang mengambil data dan indeks data tersebut sebagai parameter. Kita memodifikasi nilai y kotak dengan mengalikan index dengan tinggi kotak.

Ø  Event Handling

Terakhir, mari kita lihat bagaimana event handling di D3. Pada contoh di bawah kita menghubungkan event klik dengan sebuah button lalu menambahkan sebuah tag heading ke dalam tag body di event handler-nya.

d3.select('#btn')

        .on('click', function () {

            d3.select('body')

               .append('h3')

               .text('Today is a beautiful day!!');

        })

Ø  Kesimpulan

D3.js adalah library JavaScript yang powerful, namun masih mudah untuk dipakai membuat diagram dengan HTML, CSS, dan SVG.

#UBHARA

D3JS

D3.js adalah library JavaScript yang dipakai untuk memanipulasi dokumen HTML dan menggambar diagram berdasarkan data yang diberikan. Library ini menggunakan HTML, CSS, dan SVG Untuk membuat representasi visual dari kumpulan data yang bisa dilihat diberbagai browser modern.

D3.js juga memiliki fitur untuk membuat diagram yang interaktif dengan animasi-animasi menarik.

Di tutorial ini kita akan mengenal konsep dasar penggunaan D3.js. Kita akan pelajari bagaimana menggunakannya dengan me-render sebuah diagram batang, elemen HTML dan SVG, serta menerapkan transformasi dan event ke diagram tersebut.

Ø  Mulai Menggunakan D3

Karena D3.js adalah library JavaScript, untuk memakainya kita cukup menulis baris berikut di dalam file HTML.

<script src='https://d3js.org/d3.v4.min.js'></script>

Ø  DOM Selection

Dengan D3.js kita bisa memanipulasi Document Object Model (DOM), yang artinya kita bsa memilih elemen dan memberikan berbagai jenis transformasi ke elemen tersebut.

Mari mulai dengan contoh sederhana dimana kita akan memakai D3 untuk memilih dan mengubah warna dan ukuran font tag heading.

<html>

<head>

    <title>Learn D3 in 5 minutes</title>

</head>

<body>

<h3>Today is a beautiful day!!</h3>

<script src='https://d3js.org/d3.v4.min.js'></script>

<script>

    d3.select('h3').style('color', 'darkblue');

    d3.select('h3').style('font-size', '24px');

</script>

</body>

</html>

Disini kita hanya menautkan mehod select() di objek d3 yang memilih elemen tertentu, dan diikuti dengan method style(). Di method style(), parameter pertama menentukan apa yang ingin diubah dan parameter kedua memberikan nilai yang baru.

Ø  Data Binding

Konsep berikutnya yang perlu dipelajari adalah data binding karena konsep ini sangat penting di D3. Dengan menggunakannya, kita bisa mengisi atau memanipulasi elemen DOM secara realtime.

di HTML kita, tambahkan sebuah tag <ul>:

<ul> </ul>

Kita ingin mengisi unordered list tersebut dengan sebuah objek data. Berikut kode JavaScript-nya:

<script>

    var fruits = ['apple', 'mango', 'banana', 'orange'];

    d3.select('ul')

        .selectAll('li')

        .data(fruits)

        .enter()

        .append('li')

        .text(function(d) { return d; });

</script>

Pada kode JavaScript di atas, D3 membaca elemen <ul> dan seluruh elemen <li> di dalamnya menggunakan select() dan selectAll(). Agaknya aneh kita membaca elemen li yang belum kita tamahkan disana, tapi begitulah cara kerja D3.

Kita lalu mengirimkan data dengan method data(), dan memanggil enter() yang akan mengulangi (melakukan looping atau perulangan) method-method di bawahnya (append dan text) sampai isi arrray fruits habis di baca satu persatu.

Dengan kata lain, perintah tersebut, menambahkan sebuah <li> untuk setiap item di dalam array. Untuk setiap tag li, ia juga menambahkan teks didalamnya menggunakan mehod text(). Parameter d didalam text() adalah fungsi callback yang mengarah ke elemen di dalam array saat looping terjadi (apple, mango, dst satu persatu).

Ø  Membuat Elemen SVG

Scalable Vector Graphics (SVG) adalah sebuah cara untuk me-render elemen grafis dan gambar ke dalam DOM. Karena SVG berbasis vector, maka ia ringan dan scalable (bisa diperbesar/perkecil tanpa mempengaruhi kualitas). D3 menggunakan SVG untuk menciptakan gambar-gambarnya, sehingga SVG menjadi pondasi utama library ini.

Pada contoh di bawah, sebuah kotak digambar menggunakan D3 di sebuah kontainer SVG.

//Select SVG element

var svg = d3.select('svg');

//Create rectangle element inside SVG

svg.append('rect')

   .attr('x', 50)

   .attr('y', 50)

   .attr('width', 200)

   .attr('height', 100)

   .attr('fill', 'green');

D3 akan me-render elemen kotak di DOM. Ia pertama memeilih elemen SVG dan menggambar kotaknya di dalam elemen tersebut. Ia juga mengatur koordinat x dan y juga lebar, tinggi, dan warna isinya di method attr().

Ø  Membuat Diagram Batang

D3 memungkinkan kita untuk membuat berbagai jenis diagram agar bisa merepresentasikan data dengan lebih efisien. Pada contoh di bawah, kita membuat diagram batang sederhana dengan D3.

Mari mulai dengan membuat tag SVG di HTML.

<svg width='200' height='500'></svg>

Lalu, kita tulis kode JavaScript yang kita butuhkan untuk merender diagram tersebut di tag <svg>:

var data = [80, 120, 60, 150, 200];

var barHeight = 20;

var bar = d3.select('svg')

          .selectAll('rect')

          .data(data)

          .enter()

          .append('rect')

          .attr('width', function(d) {  return d; })

          .attr('height', barHeight - 1)

          .attr('transform', function(d, i) {

            return "translate(0," + i * barHeight + ")";

          });

Pada kode di atas, kita memiliki sebuah array yang berisi angka-angka untuk ditampilkan di diagram batang kita tadi. Setiap item di dalam array akan mengisi satu batang.

Setelah memilih elemen svg dan rect, kita mengirim data dengan method data() dan memanggil enter() untuk melakukan looping kode-kode di bawahnya sampai isi array habis di baca.

Untuk setiap item, kita menggambar sebuah kotak dan mengatur lebarnya sesuai dengan nilai yang dimiliki. Kita lalu mengatur tinggi setiap kotak dan untuk menghindari overlapping, kita memberikan padding dengan mengurangi barHeight sebesar 1.

Kita lalu memberikan sebuah transformasi agar kotak-kotak tersebut berada kotak sebelumnya. Fungsi transform() menerima fungsi callback yang mengambil data dan indeks data tersebut sebagai parameter. Kita memodifikasi nilai y kotak dengan mengalikan index dengan tinggi kotak.

Ø  Event Handling

Terakhir, mari kita lihat bagaimana event handling di D3. Pada contoh di bawah kita menghubungkan event klik dengan sebuah button lalu menambahkan sebuah tag heading ke dalam tag body di event handler-nya.

d3.select('#btn')

        .on('click', function () {

            d3.select('body')

               .append('h3')

               .text('Today is a beautiful day!!');

        })

Ø  Kesimpulan

D3.js adalah library JavaScript yang powerful, namun masih mudah untuk dipakai membuat diagram dengan HTML, CSS, dan SVG.

#UBHARA