CG[LWJGL0019] || Color

Table of contents

Bagi anda yang sering menggunakan library Color dengan cara import java.awt.Color; maupun import android.graphics.Color; maka anda akan merasa sedikit ganjil ketika menggunakan encode color dalam LWJGL/OpenGL karena dalam OpenGL warna RGBA di encode dalam tipe data float sedangkan dalam pure java kita lebih sering menggunakan format integer (interval 0 sampai 255). Sebenarnya dalam pure java juga sudah disediakan Color tipe float yang kita kenal dengan tipe HSB tetapi kita juga dapat membuat custom Class Color kita sendiri seperti contoh berikut ini dan kita dapat memanggilnya sewaktu-waktu diperlukan:

CG[LWJGL0018] || GL Texture (Texture-1)

Table of contents
Pada tutorial kali ini kita akan kembali membahas masalah Texture setelah sebelumnya pada kesempatan yang lalu kita telah membahas tentang Membuat Texture dengan bantuan library Slick Util.

Materi Dasar Citra Digital (Digital Image)
Sebuah citra (gambar) sebagaimana kita ketahui hanyalah berupa sebuah array warna yang dirender di dalam ruang dua dimensi. Mari kita simak contoh gambar sprite hati dan sprite setengah hati berikut ini:

CG[LWJGL0017] || Shader Dasar

Table of contents

GLSL adalah singkatan dari OpenGL Shading Language. Shader adalah script yang memungkinkan kita berinteraksi lebih dekat dengan processor grafis (GPU). Shader merupakan aspek penting dalam pemrograman grafis dan dapat digunakan untuk mengembangkan berbagai efek visual 2D dan 3D. Penggunaan shader semakin penting di masa depan,  jadi lebih baik memulai langsung dengan shader walaupun lebih kompleks. Jangan kaget jika code yang diperlukan cukup panjang. OpenGL sifatnya dekat dengan hardware, powerful, cepat  tetapi sayangnya jadi kompleks (pengantar shader).

CG[LWJGL0016] || Membuat Texture dengan bantuan Library Slick-Util (Texture-0)

Table of contents



Slick-Util mendukung format image PNG, JPG, GIF dan TGA. Image ini kemudian akan kita gunakan untuk membuat texture.
Untuk memuat gambar menggunakan library Slick-Util sangatlah mudah. Rincian image (gambar) akan disimpan di dalam class Texture. Class Texture akan memberikan kita akses ke atribut-atribut gambar seperti lebar, tinggi, dll. Untuk memuat file gambar ke dalam class Texture digunakan method TextureLoader.getTexture( ). method TextureLoader.getTexture( ) ini menerima input berupa tipe file gambar (PNG, JPG, dll) dan path file gambar. berikut ini contoh cara memuat (me-load) gambar ke dalam class Texture:

CG[LWJGL0015] || Library Slick-Util

Table of contents

Slick-Util Library adalah library kecil yang digunakan untuk me-load berbagai format file image, audio dan font untuk digunakan bersama LWJGL.
Agar OpenGL dapat menampilkan gambar begitupula agar OpenAL dapat memainkan suara diperlukan format data yang tepat. Disisi lain, terdapat berbagai format image dan sound yang berbeda-beda (png, jpg, xm, ogg, wav, dll). Membuat sendiri class loader untuk setiap format image maupun audio tersebut tentunya akan memakan banyak waktu. Sebagai solusinya biarkan Slick-Util Libraryyang melakukannya untuk memudahkan hidup anda selain itu Slick-Util Library adalah library Pure Java yang cukup ringan yang mudah perawatan dan penggunaannya.

Link dan Resource Belajar Java-OpenGL-LWJGL

Link

Berikut ini link resource untuk belajar Java+OpenGL menggunakan library LWJGL

• Wiki LWJGL
• Learning_LWJGL
• MattDesl's LWJGL OpenGL & Shader Tutorials
• The Ninja Cave: Tutorials
• SHC's LWJGL Tutorial Series
• Coke and Code: Tutorials
• Fabien Sanglard's: Tutorials

CG[LWJGL0014] || Fullscreen

Table of contents



Penggunaan Mode Fullscreen
Pada tutorial sebelumnya kita telah membahas cara membuat window OpenGL menggunakan class Display dengan hanya menggunakan dua baris code:

Display.setDisplayMode(new DisplayMode(width,height));
Display.create();

untuk mengatifkan mode fullscreen dapat dilakukan dengan memanggil method Display.setFullscreen(true) seperti contoh berikut:

CG[LWJGL0013] || Timing

Table of contents



System.currentTimeMillis()
Akurasi waktu sangat diperlukan untuk performa aplikasi dan game yang baik. akurasi minimal yang dibutuhkan biasanya sekitar satu detik. System.currentTimeMillis() milik java memiliki akurasi antara 1 - 55 milisecon tergantung sistem operasi yang digunakan. hal ini mengakibatkan kecepatan berbada-beda antara aplikasi yang dijalankan pada sistem operasi yang berbeda.

System.nanoTime()
Method ini mulai disediakan pada java versi 1.5 dan dapat menghasilkan akurasi millisecond. untuk mendapatkan nilai millisecond dari nilai nanosecond kita hanya perlu membagi nilai nanosecond dengan bilangan 1000000 seperti contoh berikut:

CG[LWJGL0012] || Quad

Table of contents
Menggambar Kotak/Segi Empat (quad) OpenGL menggunakan library LWJGL ini sebenarnya telah dibahas pada tutorial sebelumnya. Pada tutorial kali ini kita akan membahasnya secara lebih mendasar.

Perlu diketahui bahwa semua method OpenGL di dalam Library LWJGL dapat kita temukan dalam paket (package) org.lwjgl.opengl.* dengan nama class yang sesuai versi OpenGL yang digunakan. Method-method dari OpenGL 1.1 dapat ditemukan pada class GL11, method-method dari OpenGL 1.2 dapat ditemukan pada class GL12 dan seterusnya.

CG[LWJGL0011] || Input Melalui Keyboard dan Mouse

Table of contents
LWJGL telah menyediakan class untuk menangani input melalui Keyboard dan Mouse. Class Keyboard dan Mouse akan menangani input yang diberikan melalui Keyboard dan mouse selanjutnya inputan itu akan dilempar (red: polled) dan akan ditangkap secara otomatis saat method Display.update() dipanggil.

Mouse
Posisi pointer mouse pada Display dapat diketahui dengan cara memanggil method berikut:

int x = Mouse.getX(); // will return the X coordinate on the Display.
int y = Mouse.getY(); // will return the Y coordinate on the Display.

CG[LWJGL0010] || The Display

Table of contents

Class Display adalah class yang sangat penting dalam library LWJGL. Class Display membuat dan mengontrol window OpenGL yang kemudian menjadi tempat semua objek grafis dirender.

Class Display memiliki tiga Method penting sebagai berikut:
- create()
- update()
- destroy()

CG[LWJGL0009] || 2D Primitives

Table of contents

objek primitive 2D adalah bentuk-bentuk 2D dasar yang telah disediakan dalam OpenGL yang dapat digunakan untuk membuat bentuk objek yang lebih kompleks melalui penggabungan beberapa bentuk primitive 2D tersebut.

Point Primitives

Untuk membuat titik di OpenGL, bisa dilakukan menggunakan perintah:
GL_POINTS

Line Primitives

Untuk membuat garis di OpenGL, bisa dilakukan menggunakan perintah:

CG[LWJGL0008] || 3D Shapes

Table of contents

Dalam tutorial kali ini kita akan membahas 3D Shape. 3D Shape adalah teknik menggambar objek 3D menggunakan beberapa shape 2D. Sebagai fakta bahwa kita dapat membuat objek kubus (objek 3D) dengan cara menggambar enam buah persegi (objek 2D) di keenam sisi kubus tersebut.

contoh dalam tutorial kali ini akan kita kembangkan dari tutorial sebelumnya dengan melakukan beberapa tambahan untuk method renderGL() sebagai berikut:

private void renderGL() {
  GL11.glClear(GL11.GL_COLOR_BUFFER_BIT | GL11.GL_DEPTH_BUFFER_BIT); // Clear The Screen And The Depth Buffer
  GL11.glLoadIdentity(); // Reset The View

  GL11.glTranslatef(-1.5f, 0.0f, -6.0f); // Move Left And Into The Screen

  GL11.glRotatef(triangleAngle, 0.0f, 1.0f, 0.0f); // Rotate The Pyramid On It's Y Axis

  GL11.glBegin(GL11.GL_TRIANGLES); // Start Drawing The Pyramid
  GL11.glColor3f(1.0f, 0.0f, 0.0f); // Red
  GL11.glVertex3f(0.0f, 1.0f, 0.0f); // Top Of Triangle (Front)
  GL11.glColor3f(0.0f, 1.0f, 0.0f); // Green
  GL11.glVertex3f(-1.0f, -1.0f, 1.0f); // Left Of Triangle (Front)
  GL11.glColor3f(0.0f, 0.0f, 1.0f); // Blue
  GL11.glVertex3f(1.0f, -1.0f, 1.0f); // Right Of Triangle (Front)

  GL11.glColor3f(1.0f, 0.0f, 0.0f); // Red
  GL11.glVertex3f(0.0f, 1.0f, 0.0f); // Top Of Triangle (Right)
  GL11.glColor3f(0.0f, 0.0f, 1.0f); // Blue
  GL11.glVertex3f(1.0f, -1.0f, 1.0f); // Left Of Triangle (Right)
  GL11.glColor3f(0.0f, 1.0f, 0.0f); // Green
  GL11.glVertex3f(1.0f, -1.0f, -1.0f); // Right Of Triangle (Right)

  GL11.glColor3f(1.0f, 0.0f, 0.0f); // Red
  GL11.glVertex3f(0.0f, 1.0f, 0.0f); // Top Of Triangle (Back)
  GL11.glColor3f(0.0f, 1.0f, 0.0f); // Green
  GL11.glVertex3f(1.0f, -1.0f, -1.0f); // Left Of Triangle (Back)
  GL11.glColor3f(0.0f, 0.0f, 1.0f); // Blue
  GL11.glVertex3f(-1.0f, -1.0f, -1.0f); // Right Of Triangle (Back)

  GL11.glColor3f(1.0f, 0.0f, 0.0f); // Red
  GL11.glVertex3f(0.0f, 1.0f, 0.0f); // Top Of Triangle (Left)
  GL11.glColor3f(0.0f, 0.0f, 1.0f); // Blue
  GL11.glVertex3f(-1.0f, -1.0f, -1.0f); // Left Of Triangle (Left)
  GL11.glColor3f(0.0f, 1.0f, 0.0f); // Green
  GL11.glVertex3f(-1.0f, -1.0f, 1.0f); // Right Of Triangle (Left)
  GL11.glEnd(); // Done Drawing The Pyramid

  GL11.glLoadIdentity(); // Reset The View
  GL11.glTranslatef(1.5f, 0.0f, -7.0f); // Move Right And Into The Screen

  GL11.glRotatef(quadAngle, 1.0f, 1.0f, 1.0f); // Rotate The Cube On X, Y & Z

  GL11.glBegin(GL11.GL_QUADS); // Start Drawing The Cube
  GL11.glColor3f(0.0f, 1.0f, 0.0f); // Set The Color To Green
  GL11.glVertex3f(1.0f, 1.0f, -1.0f); // Top Right Of The Quad (Top)
  GL11.glVertex3f(-1.0f, 1.0f, -1.0f); // Top Left Of The Quad (Top)
  GL11.glVertex3f(-1.0f, 1.0f, 1.0f); // Bottom Left Of The Quad (Top)
  GL11.glVertex3f(1.0f, 1.0f, 1.0f); // Bottom Right Of The Quad (Top)

   GL11.glColor3f(1.0f, 0.5f, 0.0f); // Set The Color To Orange
  GL11.glVertex3f(1.0f, -1.0f, 1.0f); // Top Right Of The Quad (Bottom)
  GL11.glVertex3f(-1.0f, -1.0f, 1.0f); // Top Left Of The Quad (Bottom)
  GL11.glVertex3f(-1.0f, -1.0f, -1.0f); // Bottom Left Of The Quad (Bottom)
  GL11.glVertex3f(1.0f, -1.0f, -1.0f); // Bottom Right Of The Quad (Bottom)

  GL11.glColor3f(1.0f, 0.0f, 0.0f); // Set The Color To Red
  GL11.glVertex3f(1.0f, 1.0f, 1.0f); // Top Right Of The Quad (Front)
  GL11.glVertex3f(-1.0f, 1.0f, 1.0f); // Top Left Of The Quad (Front)
  GL11.glVertex3f(-1.0f, -1.0f, 1.0f); // Bottom Left Of The Quad (Front)
  GL11.glVertex3f(1.0f, -1.0f, 1.0f); // Bottom Right Of The Quad (Front)

  GL11.glColor3f(1.0f, 1.0f, 0.0f); // Set The Color To Yellow
  GL11.glVertex3f(1.0f, -1.0f, -1.0f); // Bottom Left Of The Quad (Back)
  GL11.glVertex3f(-1.0f, -1.0f, -1.0f); // Bottom Right Of The Quad (Back)
  GL11.glVertex3f(-1.0f, 1.0f, -1.0f); // Top Right Of The Quad (Back)
  GL11.glVertex3f(1.0f, 1.0f, -1.0f); // Top Left Of The Quad (Back)

  GL11.glColor3f(0.0f, 0.0f, 1.0f); // Set The Color To Blue
  GL11.glVertex3f(-1.0f, 1.0f, 1.0f); // Top Right Of The Quad (Left)
  GL11.glVertex3f(-1.0f, 1.0f, -1.0f); // Top Left Of The Quad (Left)
  GL11.glVertex3f(-1.0f, -1.0f, -1.0f); // Bottom Left Of The Quad (Left)
  GL11.glVertex3f(-1.0f, -1.0f, 1.0f); // Bottom Right Of The Quad (Left)

  GL11.glColor3f(1.0f, 0.0f, 1.0f); // Set The Color To Violet
  GL11.glVertex3f(1.0f, 1.0f, -1.0f); // Top Right Of The Quad (Right)
  GL11.glVertex3f(1.0f, 1.0f, 1.0f); // Top Left Of The Quad (Right)
  GL11.glVertex3f(1.0f, -1.0f, 1.0f); // Bottom Left Of The Quad (Right)
  GL11.glVertex3f(1.0f, -1.0f, -1.0f); // Bottom Right Of The Quad (Right)
  GL11.glEnd(); // Done Drawing The Quad
 }

berikut ini preview hasilnya:

lihat semua tutorial

Referensi:
- http://wiki.lwjgl.org/index.php?title=Main_Page
- http://nehe.gamedev.net/
- http://computergraphicsindonesia.blogspot.com/2015/01/cglwjgl0006-rotasi.html

CG[LWJGL0007] || Rotasi

Table of contents




Tutorial kali ini akan membahas tentang salah satu operasi transformasi dalam computer graphics yaitu operasi "Rotasi". operasi rotasi adalah operasi memutar objek berdasarkan titik acuan dan sebesar sudut rotasi terntentu. Pada tutorial kali ini kita akan menggunakan objek segi tiga dan objek segi empat dari tutorial sebelumnya.

STEP 1:
tambahkan tiga buah atribut/variabel ke dalam class TutorialLWJGL0007 (note: class TutorialLWJGL0007 adalah class TutorialLWJGL0006 dari tutorial sebelumnya yang telah di-rename). berikut ini tiga variabel yang ditambahkan:

long lastFrameTime; // digunakan untuk menghitung delta
float triangleAngle; // sudut rotasi untuk segi tiga

CG[LWJGL0006] || Menggambar Segi Tiga dan Segi Empat

Table of contents


Pada postingan kali ini kita akan menggambar dua buah objek geometris yaitu sebuah segi tiga dan sebuah segi empat dalam satu window OpenGL. materi ini adalah penggabungan dari materi tentang menggambar segi tiga dan materi tentang menggambar segi empat. berikut ini source code lengkapnya:

import org.lwjgl.LWJGLException;
import org.lwjgl.Sys;
import org.lwjgl.input.Keyboard;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;

CG[LWJGL0005] || Menggambar Segi Empat

Table of contents



Pada postingan kali ini kita akan membahas tentang cara menggambar segi empat OpenGL menggunakan library LWJGL. tutorial kali ini berhubungan dengan materi yang telah dibahas sebelumnya tentang cara menggambar segi tiga openGL. berikut ini source code untuk menggambar segi empat OpenGL menggunakan library LWJGL:

import org.lwjgl.LWJGLException;
import org.lwjgl.Sys;
import org.lwjgl.input.Keyboard;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;

CG[LWJGL0004] || Menggambar Segitiga

Table of contents


Pada postingan kali kita akan membahas tentang cara menggambar segitiga OpenGL menggunakan library LWJGL. tutorial ini dikembangkan dari materi tutorial sebelumnya tentang inisialisasi jendela OpenGL. berikut ini souce code untuk menggambar segitiga:

import org.lwjgl.LWJGLException;
import org.lwjgl.Sys;
import org.lwjgl.input.Keyboard;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
import org.lwjgl.opengl.GL11;
import org.lwjgl.util.glu.GLU;

CG[LWJGL0003] || Inisialisasi Jendela OpenGL

Table of contents


Pada postingan sebelumnya kita telah membahas pembuatan window OpenGl menggunakan library LWJGL. Selanjutnya pada postingan kali ini kita akan membahas tentang inisialisasi window OpenGL. tanpa perlu banya basa-basi kita langsung ke TKP

Buatlah sebuah class java baru komudian copy-paste code berikut:

import org.lwjgl.LWJGLException;
import org.lwjgl.Sys;
import org.lwjgl.input.Keyboard;
import org.lwjgl.opengl.Display;

CG[LWJGL0002] || Membuat Jendela OpenGL

Table of contents
Pada postingan ini kita akan membahas tentang Window (Jendela) OpenGL yang dibuat menggunakan library LWJGL. Ini adalah langkah awal yang harus kita lakukan sebelum membuat aplikasi Grafis OpenGL menggunakan library LWJGL.

STEP 1:

Lakukan persiapan pembuatan project eclipse dan import library LWJGL yang diperlukan ke project eclipse. Tutorialnya dapat dilihat disini.

STEP 2:

Buatlah sebuah class baru dengan nama "TutorialLWJGL0002" jangan lupa memberikan tanda cek

CG[LWJGL0001] || Memasukkan Library LWJGL ke Project Eclipse

Table of contents


Postingan ini akan membahas tentang cara mengatur built path library LWJGL dalam project eclipse. LWJGL sendiri merupakan salah satu library OpenGL yang dapat digunakan untuk menjalankan OpenGL menggunakan Java.

Untuk dapat menggunakan library LWJGL di Eclipse tentunya anda harus mendownload eclipse terlebih dahulu, selanjutnya anda juga harus mendownload library LWJGL yang dapat anda lakukan melalui link berikut:
https://drive.google.com/file/d/0B-iYwyTfbaR2WUhTa3RwbEhBaEk/view?usp=sharing
atau melalui situs resminya:
http://www.lwjgl.org/download.php

Daftar Isi

CG[Android]

• coming soon

CG[Java2D]

• coming soon

CG[LibGDX]

• coming soon

CG[GLSL]

• coming soon

CG[LWJGL]

• CG[LWJGL0014] || Fullscreen
• CG[LWJGL0013] || Timing
• CG[LWJGL0012] || Quad
• CG[LWJGL0011] || Input Melalui Keyboard dan Mouse
• CG[LWJGL0010] || The Display
• CG[LWJGL0009] || 2D PrimitivesCG[LWJGL0008] || 3D Shapes
• CG[LWJGL0007] || Rotasi
• CG[LWJGL0006] || Menggambar Segi Tiga dan Segi Empat
• CG[LWJGL0005] || Menggambar Segi Empat
• CG[LWJGL0004] || Menggambar Segitiga
• CG[LWJGL0003] || Inisialisasi Jendela OpenGL
• CG[LWJGL0002] || Membuat Jendela OpenGL
• CG[LWJGL0001] || Memasukkan Library LWJGL ke Project Eclipse

Resource Tutorial CG[LWJGL]

• Link dan Resource Belajar Java-OpenGL-LWJGL
• https://github.com/LWJGL-SUGIARTO/SourceCodeLWJGL