Background Animasi Awan Bergerak

Animasi Awan Bergerak - merupakan animasi web yang menggunakan script WebGL. Animasi ini menghasilkan efek awan yang dinamis dan interaktif sehingga akan membuat latar belakang halaman web akan tampak realistis (nyata) seolah-olah berada di atas kumpulan awan yang bergerak. Sebelum kita lanjutkan tutorialnya ada baiknya kita mengenal sedikit tentang WebGL ini.

WebGL (Web Graphics Library) adalah API JavaScript untuk rendering grafis 3D interaktif dan grafis 2D dalam setiap web browser 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 halaman web kanvas. Elemen WebGL dapat dicampur dengan elemen HTML lain dan composited dengan bagian lain dari latar belakang atau halaman program WebGL. Terdiri dari kode kontrol ditulis dalam JavaScript dan kode shader yang dieksekusi pada Graphics Processing Unit sebuah komputer (GPU). WebGL dirancang dan dikelola oleh grup non-profit Khronos.

WebGL didasarkan pada OpenGL ES 2.0 dan menyediakan API untuk grafis 3D WebGL menggunakan elemen kanvas HTML5 dan diakses dengan menggunakan Document Object Model interface... Manajemen memori otomatis disediakan sebagai bagian dari bahasa JavaScript. Seperti OpenGL ES 2.0, WebGL tidak memiliki fixed-fungsi API diperkenalkan pada OpenGL 1.0 dan OpenGL 3.0 versi lama.

Biasanya untuk membuat animasi web kita menggunakan javascript, JQuery dan flash yang umumnya harus menggunakan pluggin untuk bisa me-render efek grafis, namun sekarang sudah tidak perlu menggunakan pluggin tambahan karena sudah ada teknologi WebGL yang secara default di support oleh beberapa browser seperti Chrome 10, Firefox 4 atau Safari 6.

Animasi awan bergerak saya ambil dari situs mrdoob.com kemudian saya modifikasi agar bisa diaplikasikan di halaman blog. Animasi ini tidak akan membuat halaman blog menjadi berat karena animasi ini di proses dan dan di-render langsung melalui GPU (Graphics Processing Unit). Sebagai contoh dapat dilihat pada postingan artikel ini. Pemasangan animasi awan bergerak ini cukup mudah untuk diaplikasikan di blog atau halaman web sobat... Oke sob buat yang tertarik langsung aja kita ke TKP...

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Template" setelah itu pilih "Edit HTML".


• Cari kode </Body> kemudian letakan kode berikut ini tepat diatas kode </Body>. 

• <script src='http://dl.dropboxusercontent.com/u/74044634/WebGL/Cloud/three.min.js' type='text/javascript'></script>
  <script src='http://dl.dropboxusercontent.com/u/74044634/WebGL/Cloud/Detector.js' type='text/javascript'></script>
  <script id='vs' type='x-shader/x-vertex'>
  varying vec2 vUv;
  void main(){
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
  </script>
  <script id='fs' type='x-shader/x-fragment'>
  uniform sampler2D map;
  uniform vec3 fogColor;
  uniform float fogNear;
  uniform float fogFar;
  varying vec2 vUv;
  void main() {
  float depth = gl_FragCoord.z / gl_FragCoord.w;
  float fogFactor = smoothstep( fogNear, fogFar, depth );
  gl_FragColor = texture2D( map, vUv );
  gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
  gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
  }
  </script>
  <script src='http://dl.dropboxusercontent.com/u/74044634/WebGL/Cloud/CloudEffect.js' type='text/javascript'></script>