Modul Ajar Grafika Komputer Pada PC (Emulator) + Android

BAB 4 Viewing / Camera

4.1 Pengertian Viewing / Camera

Viewing camera adalah cara mengatur sudut pandang dari pergerakan kamera terhadap objek 2D maupun 3D, sehingga dapat memproyeksikan objek sehingga tampak riil.

4.1.1 Proyeksi Paralel Proyeksi paralel dapat dikategorikan menurut hubungan antara arah proyeksi dengan vektor normal dari bidang proyeksi, ke dalam dua macam proyeksi. Proyeksi yang di hasilkan belum membentuk object 3D yang tampak riil. Pusat proyeksi pada objek akan bertemu di titik yang tak terhingga.

A D’ C B A’ C’ B’

Pusat Proyeksi pada titik tak terhingga Bidang Proyeksi

Gambar 4.1 Proyeksi paralel

4.1.2 Syntax Proyeksi Paralel

Dalam OpenGL terdapat syntax untuk Parallel Projection. Salah satunya dapat menggunakan syntax:  glOrtho(-15.0, 20.0, -10.0, 15.0, -50.0, 70.0); Mendefinisikan besarnya sistem koordinat 3D: dengan range sumbu x adalah [-15,20], range untuk sumbu y adalah [-10,15], range untuk sumbu z adalah [-50,70]

300

 gluOrtho2D(-100,100,-200,200); Mendefinisikan besarnya sistem koordinat 2D: dengan range sumbu x adalah [-100,100] dan range untuk sumbu y adalah [- 200,200].  4.1.3 Proyeksi Perspektif

Perspective projection di gunakan untuk memodifikasi gambar 2D pada layar agar terlihat 3D seperti di dunia nyata, gambar terlihat semakin kecil di belakang, mempunyai pusat di satu titik, konsep ini seperti penglihatan di dunia nyata, ketika objek benda semakin jauh maka akan terlihat semakin kecil, ketika di lihat lebih dekat maka benda akan membesar secara konstan satu garis lurus. Untuk menciptakan pandangan perspektif, maka setting kamera perlu diubah dari glOrtho() menjadi gluPerspective(), gluLookAt(), dan glFrustum().

Gambar 4.2 Proyeksi Perspektif

4.1.4 Syntax Proyeksi Perspektif

Dalam OpenGL terdapat syntax untuk Parallel Projection. Salah satunya dapat menggunakan syntax: • gluPerspective(GLdouble fovy, GLdouble aspect, GLdouble near, GLdouble far) – Fovy adalah sudut di bidang pandang (dalam rentang dari [0.0, 180]) – Aspect adalah rasio aspek frustrum (lebar jendela di atas ketinggian jendela) – Near dan far adalah nilai antara sudut pandang dan pesawat dekat / jauh kliping

301

Gambar 4.3 gluPerspective()

• glFrustum(GLdouble left, GLdouble right, GLdouble bottom, GLdouble top, GLdouble near, GLdouble far) – left, right, top, and bottom mendefinisikan batas dari near. – near and far menentukan seberapa jauh dari sudut pandang clipping pane

Gambar 4.4 glFrustum()

• gluLookAt(GLdouble e_x, GLdouble e_y, GLdouble e_z, GLd- ouble c_x, GLdouble c_y, GLdouble c_z, GLdouble u_x, GLd- ouble u_y, GLdouble u_z) – e_x, e_y, and e_z menentukan sudut pandang yang diinginkan (mata) – c_x, c_y, c_z menentukan beberapa titik di sepanjang garis yang diinginkan sight (pusat) – u_x, u_y, and u_z mendifinisikan vector up dari camera kita (up)

Aktivasi Fungsi: • gluPerspective() : ……………………… glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(AngleView, Aspek Rasio, Near, Far);

302

……………………………………….. • gluLookAt() ……………………… glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(mata_x, mata_y, mata_z, lihat_x, lihat_y, lihat_z, atas_x, atas_y, atas_z); ………………………………………..

4.2 Matematika Synthetic Camera

Cara kerja kamera sintetik:

Gambar 4.5 Cara Kerja Kamera Sintetik Objek terletak pada sistem koordinat dunia (x, y, z), lensa terletak pada sistem koordinat UVN atau kamera sintetik (u, v, n), dan film sebagai bidang proyeksi. Sistem koordinat kamera sintetik:

Gambar 4.6 Sistem koordinat kamera sintetik  Sumbu n sebagai arah pandang kamera, dan ditentukan ber- dasarkan vektor normal (nx,ny,nz).  Sumbu v sebagai arah atas, sumbu u sebagai arah horisontal. (v ∟ n), (u ∟ n) dan (u ∟ v)  Titik tengah sumbu u,v,n disebut VRP (Viewing Reference Point), yang ditentukan oleh titik (rx,ry,rz) pada koordinat dunia.

303

Cara mendapatkan sumbu u, v, dan n:  User menentukan titik tengah view/ eye (VRP), pusat titik pandang objek /center (lookAt) dan vektor atas (UpVector).

Synthetic Camera di OpenGL : gluLookAt(eye_x, eye_y, eye_z, cen- ter_x, center_y, center_z, up_x, up_y, up_z )

 n adalah vektor dari VRP menuju lookAt. Lalu vektor n dinormalisasi. Contoh : Diketahui VRP di titik r(rx , ry , rz), lookAt di titik la(lax , lay , laz) dan UpVector di titik up(upx,upy,upz). Sehingga, n _ init n _ init  la  r, unitvektor n _ init adalah(n)  n _ init v _ init v _ init  up up n*n, unitvektor v _ init adalah(v)  v _ init u  v x n

 Memindahkan titik koordinat dunia P(Px,Py,Pz) ke koordinat kamera sintetik Q(Qu,Qv,Qn). Titik Q dapat diperoleh melalui : – t(tx,ty,tz) = P - r – Qu = t • u, Qv = t • v dan Qn = t • n Qu = (P-r) • u = (P • u)-(r • u) Contoh : Diketahui koordinat UVN dengan u=(-1,0,0), v=(0,0.8,0.6), n=(0,- 0.6,0.8) dan r = (2,3,-1). Hitunglah lokasi Q(Qu,Qv,Qn) yang merupakan transformasi dari titik P(4,7,2) di koordinat dunia ! Jawab : t(tx,ty,tz) = P - r = (4-2,7-3,2-(-1)) =(2,4,3) Qu = t • u =(2,4,3) • (-1,0,0) = 2*(-1)+4*(0)+3*(0)=-2 Qv = t • v =(2,4,3) • (0,0.8,0.6) = 2*(0)+4*(0.8)+3*(0.6)=5 Qn = t • n =(2,4,3) • (0,-0.6,0.8) = 2*(0)+4*(-0.6)+3*(0.8)=0 Jadi titik Q terletak di koordinat (-2,5,0) pada sistem koordinat UVN. Matrik transformasi dari koordinat dunia ke UVN:

Qu u x uv u z  r uPx Qv v v v  r  vPy     x y z   Qn nx n y nz  r  nPz      1   0 0 0 1 1 

304

Setelah titik Q diketahui, maka langkah berikutnya adalah melakukan proyeksi perspektif terhadap titik Q, sehingga diperoleh titik T(u*, v*). Proyeksi Q ke T dapat diperoleh dengan menggunakan rumus berikut: Q Q u*  u ,v*  v Q Q 1 n 1 n en en

Mata/ eye terletak di (0, 0, en), dengan syarat en > nz dan en != 0. Contoh: dengan menggunakan Tabel 4.1 dan 4.2 berikut: (sebagai informasi tentang vertex dan permukaan objek) Vertex X Y Z 0 0.0 -1.0 0.0 1 1.0 -1.0 0.0 2 1.0 -1.0 1.0 3 0.0 -1.0 1.0 4 0.5 0.5 0.5

Surface Index 0 1 4 1 2 4 2 3 4 3 0 4

Diketahui synthetic camera berada di (2, 3, 1) dan melihat kea rah (0, 0, 0). Arah atas didefinisikan melalui up=(0, 1, 0). Hitung dan gambarkan lokasi vertex-vertex seperti yang dilihat oleh synthetic camera apabila en=6.

305

Jawab: Mencari sistem koordinat UVN: n _ init  la  r  (0,0,0)  (2,3,1)  (2,3,1) n _ init (2,3,1)   2  3 1  n     , ,   (0.53,0.8,0.27) | n _ init | (2)2  (3)2  (1)2  14 14 14  v _ init  up  (up  n) * n  (0,1,0)  (0 * (0.53)  1* (0.8)  0 * (0.27)) * (0.53,0.8,0.27) v _ init  (0,1,0)  (0.8)(0.53,0.8,0.27)  (0,1,0)  (0.8 * (0.53),0.8 * (0.8),0.8 * (0.27)) v _ init  (0,1,0)  (0.42,0.64,0.23)  (0.42,0.36,0.23) v _ init (0.42,0.36,0.23) (0.42,0.36,0.23) (0.42,0.36,0.23) v     | v _ init | (0.42)2  (0.36)2  (0.23)2 0.18  0.13  0.05 0.36  (0.7,0.6,0.38) i j k u  v  n   0.53  0.8  0.27  0.7 0.6  0.38 u  ((0.8) * (0.38)  (0.6) * (0.27), ((0.7) * (0.27))  ((0.53) * (0.38)), ((0.53) * (0.6))  ((0.7) * (0.8))) u  ((0.3  0.16), (0.19  0.2), (0.32  0.56))  (0.46,0.01,0.88) la = (0,0,0) dan r = (2,3,1) n = (-0.53,-0.8,-0.27) v = (-0.7,0.6,-0.38) u = (0.46,-0.01,-0.88)

Transformasi vertex ke sistem UVN: Vertex t =p-r t =p-r t =p-r X Y Z 0 0-2=-2 -1-3=-4 0-1=-1 1 -1 -4 -1 2 -1 -4 0 3 -2 -4 0 4 -1.5 -2.5 -0.5

Q =t•u Q =t•v Q =t•n u v n 0 -0.62 4.53 0.46 -1.32 4 -0.42 -1.7 3.73 -0.88 -1 4.26 -0.23 -0.26 2.93

Gambar synthetic camera dari vertex hasil transformasi perspektif (u*,v*):

306

Vertex u* v* 0 0 -2.53 1 1.38 -3.96 2 -1.11 -4.49 3 -3.03 -3.45 4 -0.45 -0.51

Gambar 4.7 Gambar synthetic camera dari vertex hasil trtasformasi perspektif (u*,v*) 4.3 Membuat Multiple View Object

• Satu objek yang dapat dilihat dengan posisi mata yang berbeda yaitu posisi mata kanan dan mata kiri. • Didasarkan pada stereokopik alami dari sistem mata. • Masing-masing mata melihat objek dari lokasi yang berbeda.

Gambar 4.8 Ilustrasi Multiple View Object

307

Source Code 4.1 Code Membuat Multiple View Object

ESRender.java package com.camera_n_viewing_project; import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10;

//import android.opengl.GLU; import android.opengl.GLSurfaceView.Renderer; import android.opengl.GLU;

public class ESRender implements Renderer {

private TransObject transobject; // the primitive object to be drawn private TransPolarObject transpolarobject; private TransKubusObject kubus; private TransPiramidaObject piramida;

int RunMode=1; float CurrentAngle = 0.0f; // Angle in degrees float AnimateStep = 2.0f; // Rotation step per update

/** Constructor to set the handed over context */ public ESRender() { this.piramida = new TransPiramidaOb- ject(); }

@Override public void onDrawFrame(GL10 gl) { // clear Screen and Depth Buffer //gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); // set background dgn warna putih gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

// Reset the Modelview Matrix gl.glLoadIdentity();

// menampilkan piramida gl.glPushMatrix();

gl.glTranslatef(0.0f, 0.0f, 0.0f);

// Rotate the object gl.glTranslatef(0.0f, 0.0f, - 5.0f); gl.glScalef(0.5f, 0.5f, 0.5f); // Scale down

308

gl.glRotatef( CurrentAngle, 0.1f, 1.0f, -0.1f ); piramida.draw(gl); gl.glPopMatrix();

// Update the rotational angle after each refresh if (RunMode==1) { // re-Calculate animation parame- ters CurrentAngle += AnimateStep; if (CurrentAngle > 360.0) { //CurrentAngle -= 360.0*Math.floor(CurrentAngle/360.0); CurrentAngle=0.0f; CurrentAngle += Ani- mateStep; } }

}

@Override public void onSurfaceChanged(GL10 gl, int width, int height) {

if (height == 0) height = 1; // To prevent divide by zero float aspect = (float) width / height;

// Set the viewport (display area) to cover the entire window gl.glViewport(0, 0, width, height);

// Setup perspective projection, with aspect ratio matches viewport gl.glMatrixMode(GL10.GL_PROJECTION); // Select projection matrix gl.glLoadIdentity(); // Reset projection matrix

// Use perspective projection GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f); //gl.glOrthof(-3.0f, 3.0f, -3.0f, 3.0f, - 3.0f, 3.0f); gl.glMatrixMode(GL10.GL_MODELVIEW); // Select model-view matrix gl.glLoadIdentity(); // Reset

}

@Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // Set color's clear-value to black

309

gl.glClearDepthf(1.0f); // Set depth's clear-value to farthest gl.glEnable(GL10.GL_DEPTH_TEST); // Ena- bles depth-buffer for hidden // surface removal gl.glDepthFunc(GL10.GL_LEQUAL); // The type of depth testing to do

gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST); // nice

// perspective

// view gl.glShadeModel(GL10.GL_SMOOTH); // Ena- ble smooth shading of color gl.glDisable(GL10.GL_DITHER); // Disable dithering for better // performance }

public int getRunMode() { return RunMode; }

public void setRunMode(int mRunMode) { RunMode = mRunMode; }

public float getAnimateStep() { return AnimateStep; }

public void setAnimateStep(float mAnimateStep) { AnimateStep = mAnimateStep; }

}

ESSurfaceView.java package com.camera_n_viewing_project; import android.content.Context; import android.opengl.GLSurfaceView; import android.util.Log; import android.view.KeyEvent; import android.view.MotionEvent;

/** * A view container where OpenGL ES graphics can be drawn on screen. * This view can also be used to capture touch events, such as a user * interacting with drawn objects. */ public class ESSurfaceView extends GLSurfaceView {

310

private final ESRender esRender;

public ESSurfaceView(Context context) { super(context);

// Set the Renderer for drawing on the GLSur- faceView esRender = new ESRender(); setRenderer(esRender);

// To enable keypad this.setFocusable(true); this.requestFocus();

// To enable touch mode this.setFocusableInTouchMode(true);

// Render the view only when there is a change in the drawing data // merender hanya ketika ada perubahan/ event

//setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY); }

//private final float TOUCH_SCALE_FACTOR = 180.0f / 320; //private float mPreviousX; //private float mPreviousY;

@Override public boolean onTouchEvent(MotionEvent v) { // MotionEvent reports input details from the touch screen // and other input controls. In this case, we are only // interested in events where the touch position changed.

/*float x = e.getX(); float y = e.getY();*/

switch (v.getAction()) {

case MotionEvent.ACTION_DOWN: Log.v("Test Action Down", "action down working"); Log.i("Test Action Nilai", ""+Math.abs(esRender.getRunMode()-1)); esRen- der.setRunMode(Math.abs(esRender.getRunMode()-1)); //break; requestRender(); //case MotionEvent.ACTION_POINTER_UP: //Log.v("Test Action ACTION_POINTER_UP", "action working"); //Log.i("Test Action Nilai", ""+Math.abs(esRender.getAnimateStep()));

311

//esRender.setAnimateStep(esRender.getAnimateStep ()+8.0f); //requestRender(); //case MotionEvent.ACTION_MOVE: //Log.v("Test Action ACTION_POINTER_DOWN", "action working"); //Log.i("Test Action Nilai", ""+Math.abs(esRender.getAnimateStep()));

//esRender.setAnimateStep(esRender.getAnimateStep ()-8.0f); //requestRender(); //case MotionEvent.ACTION_UP: //Log.v("Test Action Up", "action up working");

//esRender.setRunMode(esRender.getRunMode()); //requestRender(); //case MotionEvent.ACTION_MOVE:

//esRender.setRunMode(esRender.getRunMode()); //requestRender(); }

//mPreviousX = x; // mPreviousY = y; return true; //break; }

// Key-up event handler @Override public boolean onKeyUp(int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.KEYCODE_DPAD_RIGHT: // In- crease rightward speed Log.v("Test Action KEYCODE_DPAD_RIGHT", "action working"); Log.i("Test Action Nilai", ""+Math.abs(esRender.getAnimateStep())); esRen- der.setAnimateStep(esRender.getAnimateStep()+8.0f); requestRender(); //ballSpeedX++; break; case KeyEvent.KEYCODE_DPAD_LEFT: // In- crease leftward speed esRen- der.setAnimateStep(esRender.getAnimateStep()-8.0f); requestRender(); //ballSpeedX--; break; case KeyEvent.KEYCODE_DPAD_UP: // In- crease upward speed //ballSpeedY--; break; case KeyEvent.KEYCODE_DPAD_DOWN: // In- crease downward speed

312

//ballSpeedY++; break; case KeyEvent.KEYCODE_DPAD_CENTER: // Stop //ballSpeedX = 0; //ballSpeedY = 0; break; case KeyEvent.KEYCODE_A: // Zoom in Log.v("Test Action KEYCODE_DPAD_RIGHT", "action working"); Log.i("Test Action Nilai", ""+Math.abs(esRender.getAnimateStep())); esRen- der.setAnimateStep(esRender.getAnimateStep()+8.0f); requestRender(); // Max radius is about 90% of half of the smaller dimension //float maxRadius = (xMax > yMax) ? yMax / 2 * 0.9f : xMax / 2 * 0.9f; //if (ballRadius < maxRadius) { //ballRadius *= 1.05; // Increase radius by 5% //} break; case KeyEvent.KEYCODE_Z: // Zoom out Log.v("Test Action KEYCODE_DPAD_RIGHT", "action working"); Log.i("Test Action Nilai", ""+Math.abs(esRender.getAnimateStep())); esRen- der.setAnimateStep(esRender.getAnimateStep()-8.0f); requestRender(); //if (ballRadius > 20) { // Mini- mum radius // ballRadius *= 0.95; // De- crease radius by 5% //} break; } return true; // Event handled } }

MainActivity.java package com.camera_n_viewing_project; import android.opengl.GLSurfaceView; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.Window; import android.view.WindowManager; public class MainActivity extends Activity {

/** The OpenGL view */

313

private GLSurfaceView glSurfaceView;

@Override protected void onCreate(Bundle savedInstanceS- tate) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main);

// requesting to turn the title OFF requestWindowFeature(Window.FEATURE_NO_TITLE); // making it full screen getWin- dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREE N, WindowManag- er.LayoutParams.FLAG_FULLSCREEN);

// Initiate the Open GL view and // create an instance with this activity glSurfaceView = new ESSurfaceView(this);

// set our renderer to be the main renderer with // the current activity context //glSurfaceView.setRenderer(new ESRender()); setContentView(glSurfaceView); }

/** * Remember to resume the glSurface */ @Override protected void onResume() { super.onResume(); glSurfaceView.onResume(); }

/** * Also pause the glSurface */ @Override protected void onPause() { super.onPause(); glSurfaceView.onPause(); }

@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }

}

314

TransPiramidaObject.java package com.camera_n_viewing_project; import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import javax.microedition.khronos.opengles.GL10; public class TransPiramidaObject {

private float[] vertices = { // 5 vertices of the pyramid in (x,y,z) -1.0f, -1.0f, -1.0f, // 0. left- bottom-back 1.0f, -1.0f, -1.0f, // 1. right- bottom-back 1.0f, -1.0f, 1.0f, // 2. right- bottom-front -1.0f, -1.0f, 1.0f, // 3. left- bottom-front 0.0f, 1.0f, 0.0f // 4. top }; private float[] colors = { // Colors of the 5 vertices in RGBA 0.0f, 0.0f, 1.0f, 1.0f, // 0. blue 0.0f, 1.0f, 0.0f, 1.0f, // 1. green 0.0f, 0.0f, 1.0f, 1.0f, // 2. blue 0.0f, 1.0f, 0.0f, 1.0f, // 3. green 1.0f, 0.0f, 0.0f, 1.0f // 4. red };

private byte[] indices = { // Vertex indices of the 4 Triangles 0, 1, 4, // back face 1, 2, 4, // right face 2, 3, 4, // front face (CCW) 3, 0, 4 // left face };

// Constructor - Set up the buffers public TransPiramidaObject() {

}

// Point to our vertex buffer, return buffer holding the vertices public static FloatBuffer makeFloatBuffer(float[] arr){ ByteBuffer bb = ByteBuff- er.allocateDirect(arr.length * 4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(arr); fb.position(0); return fb; }

315

// Setup index-array buffer. Indices in byte. public static ByteBuffer makeByteBuffer(byte[] arr){ ByteBuffer bb = ByteBuff- er.allocateDirect(arr.length); bb.put(arr); bb.position(0); return bb; }

// Draw the shape public void draw(GL10 gl) { gl.glFrontFace(GL10.GL_CCW); // Front face in counter-clockwise

// orientation // Enable arrays and define their buffers

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices));

gl.glEnableClientState(GL10.GL_COLOR_ARRAY); gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(colors)); //gl.glDrawElements(GL10.GL_TRIANGLES, indices.length, //GL10.GL_UNSIGNED_BYTE, makeByteBuffer(indices)); gl.glDrawElements(GL10.GL_LINE_STRIP, indices.length, GL10.GL_UNSIGNED_BYTE, makeByteBuffer(indices));

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_COLOR_ARRAY); } }

Gambar 4.9 Multiple View Object

316

BAB 5 Texture Mapping

5.1 Pengertian Texture Mapping

Texture Mapping merupakan metode yang digunakan untuk menambah detail texture pada permukaan objek.

Gambar 5.1 Texture Mapping Texture merupakan data segi-empat sederhana yang berada pada bidang texture. Bidang texture diwakili oleh dua sumbu koordinat yaitu sumbu s dan sumbu t. Setiap texture akan memenuhi bidang koordinat (0.0,0.0) sd. (1.0,1.0). Nilai individual dari array texture biasanya dikenal dengan istilah texels (texture pixels).Yang membuat texture mapping sedikit rumit adalah bagaimana proses pemetaan antara bentuk segi empat texture ke polygon mengingat secara umum bentuk poligon biasanya non-rectangular. Beberapa contoh penggunaan texture mapping antara lain:  Mensimulasikan aspek visual dari material seperti tampakan kayu, batu bata, atau granit.  Mengurangi kompleksitas (jumlah polygon yang dibutuhkan) dari suatu obyek geometri.  Teknik pemrosesan citra seperti image wraping dan rectification, rotation, dan scaling.  Mensimulasikan berbagai efek permukaan seperti efek reflektif seperti cermin atau lantai yang telah digosok mengkilat, efek tonjolan, dan sebagainya.

317

Salah satu keuntungan dari texture mapping adalah bahwa detail visual itu berada di citra bukan di geometri. Dan sekompleks apapun citra, selama tidak merubah ukuran citra, tidak berpengaruh pada kinerja keseluruhan, yaitu kompleksitas dari citra tidak berpengaruh kepada pipeline geometric (transformasi, clipping) dari OpenGL. Texture ditambahkan saat rasterisasi ketika geometric pipeline dan pixel pipeline bertemu seperti diilustrasikan pada Gambar 5.2. Raster- isasi adalah mengubah gambar dari format vector ke format pixel atau titik.

vertices geometry pipeline rasterizer

image pixel pipeline

Gambar 5.2 Ilustrasi Rasterisasi

Ada dua cara untuk melakukan texture mapping:  Membuat extra polygon untuk membangun detail model pada objek. o Menambah kompleksitas scene sehingga memperlambat kecepatan rendering grafis. o Beberapa fitur grafis akan sulit untuk dimodelkan.  Membuat texture map pada permukaan (pendekatan yang lebih sering digunakan).

Secara konseptual ada tiga langkah dalam melakukan texture mapping, yaitu: 1. Penentuan texture  Baca image dari file  Generate texture id untuk image tersebut glGenTextures(3, &texture[0]) 2. Pemberian koordinat texture ke vertex 3. Penentuan parameter texture (wrapping / filtering) 5.2 Representasi Texture Mapping

 Bitmap Texture Gambar dua dimensi yang direpresentasikan dengan array texture dua dimensi [height][width]. Setiap pixel yang disebut dengan texel adalah terletak pada koordinat (s,t). Nilai s dan t biasanya dinormalisasi dengan range [0,1]. Untuk setiap koordinat

318

(s,t) yang telah dinormalisasi, terdapat image value [red, green, blue].

Gambar 5.3 Bitmap Texture  Procedural Texture Procedural texture adalah gambar yang dihasilkan computer yang dibuat dengan algoritma untuk menciptakan representasi realistis dari unsur-unsur alam seperti kayu, marmer, granit, logam, batu, dan sebagainya. 5.3 Parameter Texture Mapping

Texture mapping diaktifkan dan di-non-aktifkan menggunakan glEnable() atau glDisable() dengan GL_TEXTURE_1D atau GL_TEXTURE_2D untuk menandakan satu atau dua dimensi. glTexParameter*() digunakan untuk mengatur texture. Berikut merupakan contoh penggunaan glTexParameter*() untuk melakukan magnification dan minification: glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);

Gambar 5.4 Magnification dan Minification

319

Berikut merupakan contoh penggunakan glTexParameter*() untuk melakukan repeating: glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

Gambar 5.5 Repeating Texture Berikut merupakan contoh penggunakan glTexParameter*() untuk melakukan clamping: glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);

Gambar 5.6 Clamping Texture Berikut merupakan contoh penggunakan glTexParameter*() untuk melakukan repeating dan clamping: glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

320

Gambar 5.7 Repeating dan Clamping Texture

5.4 Texture Mapping Pada Segitiga

Source Code 5.1 Code Texture Mapping Pada Segitiga

ESRender.java

package com.texture_mapping;

import java.util.Formatter;

import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10;

import android.content.Context; import android.opengl.GLES20; import android.opengl.GLSurfaceView; import android.opengl.Matrix; import android.opengl.GLSurfaceView.Renderer; import android.opengl.GLU; import android.util.Log; import android.widget.TextView;

public class ESRender implements Renderer {

private ESText glText; private TextView textview; private ObjectArena objectarena; // the primitive object to be drawn private ObjectBall objectball; private ObjectBall objectball_hole; private ObjectBall objectball1; private ObjectBall objectball2; private ObjectBall objectball3; Context context;

321

private int RunMode=1; private float mAngle = 0.0f; // Angle in degrees private float AnimateStep = 2.0f; // Rotation step per update

private long startTime; private long fpsStartTime; private long numFrames;

float radius = 50.0f; // Ball's radius float x = radius; // Ball's center (x,y) float y = radius; float speedX = 5f; // Ball's speed (x,y) float speedY = 3f;

int xMin, xMax, yMin, yMax;

private int mywidth=0; private int myheight=0;

this.objectball3 = new ObjectBall(); }

@Override public void onDrawFrame(GL10 gl) {

// Draw background color gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

// segitiga gl.glPushMatrix(); //GLU.gluLookAt(gl, 0, 0, 0.01f, 0f, 0f, 0f, 0f, 1.0f, 0.0f);

gl.glTranslatef(50.0f, 60.0f, 0.0f); gl.glScalef(80.0f, 80.0f, 0.0f);

gl.glRotatef(180, 1.0f, 0.0f, 0.0f); gl.glTranslatef(5.0f, -3.5f, 0.0f); objectball1.draw_segitiga(gl);

gl.glPopMatrix();

322

// update moveWithCollisionDetection(this); set((int)-radius, (int)-radius, mywidth, myheight);

// Update the rotational angle after each refresh if (RunMode==1) { // re-Calculate animation parame- ters mAngle += AnimateStep; if (mAngle > 360.0) { //CurrentAngle -= 360.0*Math.floor(CurrentAngle/360.0); mAngle=0.0f; mAngle += AnimateStep; } }

}

@Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { gl.glClearColor(0.5f, 0.5f, 0.5f, 1.0f); // Set color's clear-value to black gl.glClearDepthf(1.0f); // Set depth's clear- value to farthest gl.glEnable(GL10.GL_DEPTH_TEST); // Ena- bles depth-buffer for hidden // surface removal gl.glDepthFunc(GL10.GL_LEQUAL); // The type of depth testing to do

gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST); // nice

// perspective

// view gl.glShadeModel(GL10.GL_SMOOTH); // Ena- ble smooth shading of color gl.glDisable(GL10.GL_DITHER); // Disable dithering for better // performance

// Create the GLText glText = new ESText( gl, context.getAssets() );

// Load the font from file (set size + padding), creates the texture // NOTE: after a successful call to this the font is ready for rendering! glText.load( "Roboto-Regular.ttf", 14, 2, 2 ); // Create Font (Height: 14 Pixels / X+Y Padding 2 Pixels)

323

//gl.glDisable(GL10.GL_DITHER); // Disa- ble dithering for better // performance

// Setup Texture, each time the surface is created (NEW) objectball_hole.loadBallTexture(gl, context,0); objectball1.loadBallTexture(gl, context,1);

objectball2.loadBallTexture(gl, context,0); objectball3.loadBallTexture(gl, context,1); gl.glEnable(GL10.GL_TEXTURE_2D); // Ena- ble texture (NEW)

}

@Override public void onSurfaceChanged(GL10 gl, int width, int height) { mywidth=width; myheight=height;

gl.glViewport( 0, 0, width, height );

// Setup orthographic projection gl.glMatrixMode( GL10.GL_PROJECTION ); // Activate Projection Matrix gl.glLoadIdentity(); // Load Identity Matrix gl.glOrthof( // Set Ortho Projection (Left,Right,Bottom,Top,Front,Back) 0, width, 0, height, 1.0f, -10.0f );

// Save width and height //this.width = width; // Save Current Width //this.height = height; // Save Current Height

gl.glMatrixMode(GL10.GL_MODELVIEW); // Se- lect model-view matrix gl.glLoadIdentity(); // Reset

}

public float getxMax() { return xMax; } public void setxMax(int xmax) { xMax = xmax; }

324

public float getxMin() { return xMin; } public void setxMin(int xmin) { xMin = xmin; }

public float getyMax() { return yMax; } public void setyMax(int ymax) { yMax = ymax; }

public float getyMin() { return yMin; } public void setyMin(int ymin) { yMin = ymin; }

public float getspeedX() { return speedX; } public void setspeedX(float speedX_) { speedX = speedX_; }

public float getspeedY() { return speedY; } public void setspeedY(float speedY_) { speedY = speedY_; }

public void moveWithCollisionDetection(ESRender esRender) { // Get new (x,y) position x += speedX; y += speedY; // Detect collision and react if (x + radius > esRender.getxMax()) { speedX = -speedX; x = esRender.getxMax() - radius; } else if (x - radius < esRender.getxMin()) { speedX = -speedX; x = esRender.getxMin() + radius; } if (y + radius > esRender.getyMax()) { speedY = -speedY; y = esRender.getyMax() - radius; } else if (y - radius < esRen- der.getyMin()) { speedY = -speedY; y = esRender.getyMin() + radius; } }

325

public void set(int x, int y, int width, int height) { xMin = x; //xMax = x + width - 1; xMax = x + width; yMin = y; //yMax = y + height - 1; yMax = y + height; } }

ESSurfaceView.java

package com.texture_mapping;

import android.content.Context; import android.opengl.GLSurfaceView; import android.util.Log; import android.view.KeyEvent; import android.view.MotionEvent;

private final ESRender esRender; private float previousX; private float previousY;

public ESSurfaceView(Context context) { super(context);

// Set the Renderer for drawing on the GLSur- faceView esRender = new ESRender(context); setRenderer(esRender);

// To enable keypad this.setFocusable(true); this.requestFocus();

// To enable touch mode this.setFocusableInTouchMode(true);

// Render the view only when there is a change in the drawing data // merender hanya ketika ada perubahan/ event

326

//setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY); }

//private final float TOUCH_SCALE_FACTOR = getWidth() / getHeight(); private float mPreviousX; private float mPreviousY;

float currentX = v.getX(); float currentY = v.getY(); float deltaX, deltaY;

//float scalingFactor = 0.50f / ((esRen- der.xMax > esRender.yMax) ? esRender.yMax //: esRender.xMax);

switch (v.getAction()) { case MotionEvent.ACTION_DOWN: Log.v("Test Action Down", "action down working"); //break; requestRender(); //case MotionEvent.ACTION_POINTER_UP: //Log.v("Test Action ACTION_POINTER_UP", "action working"); //requestRender(); //case MotionEvent.ACTION_MOVE: //Log.v("Test Action ACTION_POINTER_DOWN", "action working"); //requestRender(); //case MotionEvent.ACTION_UP: //Log.v("Test Action Up", "action up working"); //requestRender(); case MotionEvent.ACTION_MOVE: // Modify rotational angles according to movement deltaX = currentX - previousX; deltaY = currentY - previousY;

//esRender.setspeedX(esRender.getspeedX()+ (del- taX/getWidth()));

//esRender.setspeedY(esRender.getspeedY()+ (del- taY/getHeight()));

esRen- der.setspeedX(esRender.getspeedX()+ deltaX/100);

327

esRen- der.setspeedY(esRender.getspeedY()+ deltaY/100);

requestRender(); }

// Save current x, y previousX = currentX; previousY = currentY; return true; // Event handled //break; }

// Key-up event handler @Override public boolean onKeyUp(int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.KEYCODE_A: // mengurangi kecepatan object if((esRender.getspeedX()- 0.05f >0) ){ esRen- der.setspeedX(esRender.getspeedX()- 0.05f); } if((esRender.getspeedX()- 0.05f <0) ){ esRender.setspeedX(0.0f); } if((esRender.getspeedY()- 0.05f >=0)){ esRen- der.setspeedY(esRender.getspeedY()- 0.05f); } if((esRender.getspeedY()- 0.05f <0) ){ esRender.setspeedY(0.0f); } Log.v("Test Action KEYCODE_A", "action working"); break; case KeyEvent.KEYCODE_Z: Log.v("Test Action KEYCODE_Z", "action working"); break; } return true; // Event handled } }

328

MainActivity.java

package com.texture_mapping;

import com.texture_mapping.R;

import android.opengl.GLSurfaceView; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.Window; import android.view.WindowManager;

public class MainActivity extends Activity {

/** The OpenGL view */ private GLSurfaceView glSurfaceView;

@Override protected void onCreate(Bundle savedInstanceS- tate) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main);

// requesting to turn the title OFF requestWindowFeature(Window.FEATURE_NO_TITLE); // making it full screen getWin- dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCR EEN, WindowManag- er.LayoutParams.FLAG_FULLSCREEN);

// Initiate the Open GL view and // create an instance with this activity glSurfaceView = new ESSurfaceView(this);

// set our renderer to be the main renderer with // the current activity context //glSurfaceView.setRenderer(new ESRender()); setContentView(glSurfaceView); }

/** * Remember to resume the glSurface */ @Override protected void onResume() { super.onResume(); glSurfaceView.onResume(); }

/** * Also pause the glSurface */

329

@Override protected void onPause() { super.onPause(); glSurfaceView.onPause(); }

@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }

}

ObjectBall.java

package com.texture_mapping;

import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer;

import javax.microedition.khronos.opengles.GL10; import javax.microedition.khronos.opengles.GL11; import javax.microedition.khronos.opengles.GL11ExtensionPack;

import com.texture_mapping.R;

import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.opengl.GLES20; import android.opengl.GLUtils; import android.util.Log;

public class ObjectBall {

private float vertices[] = { -0.5f, -0.5f, 0.0f, // V1 - first vertex (x,y,z) -0.5f, 0.5f, 0.0f, // V2 0.5f, 0.5f, 0.0f, // V3 0.5f, -0.5f, 0.0f, // V4 -0.5f, -0.5f, 0.0f // V5

330

};

private float textCoord_Triagle[]={ 1.0f, 1.0f, 0.0f, // V3 0.0f, 1.0f, 0.0f, // V2 0.5f, 0.0f, 0.0f, // V1 - first vertex (x,y,z) };

float[] texCoords = { // Texture coords for the above face (NEW) 0.0f, 1.0f, // A. left-bottom (NEW) 1.0f, 1.0f, // B. right-bottom (NEW) 0.0f, 0.0f, // C. left-top (NEW) 1.0f, 0.0f // D. right-top (NEW) };

private float vertices_color[] = { 1.0f, 0.0f, 0.0f, 1.0f, // CV1 - first color (red,green,blue) 0.0f, 1.0f, 0.0f, 1.0f, // CV2 0.0f, 0.0f, 1.0f, 1.0f, // CV3 0.0f, 1.0f, 0.0f, 1.0f, // CV4 1.0f, 0.0f, 0.0f, 1.0f // CV5 };

private float vertices_circle[]={0.0f,0.0f,0.0f}; private float verti- ces_circle_color[]={0.0f,0.0f,0.0f,0.5f}; private float textCoord[],textCoord_hole[]; private float verti- ces_circle1[],vertices_circle1_hole[];

private int[] imageFileIDs = { // Image file IDs R.drawable.nature, R.drawable.mule};

int[] textures_indek = new int[1];

private int batas_sudut=360; float jari_jari; float a,b; float x,y; float step=3.0f,step_line=0.2f; float x1,y1; float x2,y2; float teta, teta_hole; private int loop,loop_color;

public ObjectBall() {

331

// ======start to generate stetch texture coordinat ======//Inisialisasi jari_jari=0.5f;

// Titik Pusat a = 0.5f; b = 0.5f ; //x=a+jari_jari; y=b; teta = 0;

// generate stretch texture coordinat teta=0; teta_hole=0; textCoord = new float[batas_sudut * 3]; textCoord_hole = new float[batas_sudut * 3]; for (int ii = 0; ii < batas_sudut * 3; ii += 3) { // membentuk textCoord untuk circle color textCoord[ii] = (jari_jari*((float) Math.cos(-teta)))+a; textCoord[ii + 1] = (jari_jari*((float) Math.sin(-teta)))+b; textCoord[ii + 2] = 0.0f;

teta += Math.PI / 90;

// membentuk textCoord untuk circle hole textCoord_hole[ii] = (jari_jari*((float) Math.cos(-teta_hole)))+a; textCoord_hole[ii + 1] = (jari_jari*((float) Math.sin(-teta_hole)))+b; textCoord_hole[ii + 2] = 0.0f;

teta_hole += 15; }

// ======start to generate vertices to circle (Cara 1) ======//Inisialisasi jari_jari=50.0f;

// Titik Pusat a = 50.0f; b = 50.0f ;

teta=0; teta_hole=0; vertices_circle1 = new float[batas_sudut * 3]; vertices_circle1_hole = new float[batas_sudut * 3]; for (int ii = 0; ii < batas_sudut * 3; ii += 3) { // membentuk vertices_circle1 vertices_circle1[ii] = (jari_jari*((float) Math.cos(teta)))+a; vertices_circle1[ii + 1] = (jari_jari*((float) Math.sin(teta)))+b;

332

vertices_circle1[ii + 2] = 0.0f;

teta += Math.PI / 90;

// membentuk vertices_circle1 vertices_circle1_hole[ii] = (jari_jari*((float) Math.cos(teta_hole)))+a; vertices_circle1_hole[ii + 1] = (jari_jari*((float) Math.sin(teta_hole)))+b; vertices_circle1_hole[ii + 2] = 0.0f; teta_hole += 15; }

// ======start to generate vertices to circle (Cara 2) ======//Inisialisasi jari_jari=50.0f;

// Titik Pusat a = 50.0f; b = 50.0f ; x=a+jari_jari; y=b;

loop=0; loop_color=0; vertices_circle=new float[(int)(3*batas_sudut/step)*3]; vertices_circle_color=new float[(int)(3*batas_sudut/step)*4]; for(teta=0;teta<=2*batas_sudut;teta+=step){ vertices_circle[loop] = (float) ((x- a)*Math.cos((teta/180)*(22/7)) - ((y- b)*Math.sin((teta/180)*(22/7))) + a); vertices_circle[loop+1] = (float) ((x- a)*Math.sin((teta/180)*(22/7)) - ((y- b)*Math.cos((teta/180)*(22/7))) + b); vertices_circle[loop+2]=0; loop+=3;

//mengenerate warna untuk setiap vertex

//vertices_circle_color[loop_color]=(float) ((x- a)*Math.cos((teta/180)*(22/7)) - ((y- b)*Math.sin((teta/180)*(22/7))) + a);

//vertices_circle_color[loop_color+1]=(float) ((x-a)*Math.sin((teta/180)*(22/7)) - ((y- b)*Math.cos((teta/180)*(22/7))) + b);

vertices_circle_color[loop_color]=(float) (Math.cos((teta/180)*(22/7)) ); verti- ces_circle_color[loop_color+1]=(float) (Math.sin((teta/180)*(22/7)));

vertices_circle_color[loop_color+2]=0.5f; vertices_circle_color[loop_color+3]=0.5f;

333

loop_color+=4; } // ======end for generate vertices to circle ======

}

// Setup index-array buffer. Indices in byte. public static ByteBuffer makeByteBuffer(byte[] arr){ ByteBuffer bb = ByteBuff- er.allocateDirect(arr.length); bb.put(arr); bb.position(0); return bb; }

/** The draw method for the primitive object with the GL context */ public void draw_circle(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour for the object circle //gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);

//create VBO from buffer with glBuffer- Data() gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make- FloatBuffer(vertices_circle));

//memetakan warna untuk setiap vertex gl.glColorPointer(4, GL10.GL_FLOAT, 0, make- FloatBuffer(vertices_circle_color));

//draw circle as filled shape //gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 1, (int) ((int) 2*batas_sudut/step));

//draw circle contours //gl.glDrawArrays(GL10.GL_LINES, 1, (int) ((int) 2*batas_sudut/step)); // membuat garis putus- putus pada tepi lingkaran

334

//gl.glDrawArrays(GL10.GL_LINES, 1, (int) ((int) 2*batas_sudut/step)); gl.glDrawArrays(GL10.GL_LINE_STRIP, 1, (int) ((int) 2*batas_sudut/step)); //gl.glDrawArrays(GL10.GL_POINTS, 1, (int) ((int) 2*batas_sudut/step));

//Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_COLOR_ARRAY); }

public void draw_circle_hole(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

//create VBO from buffer with glBuffer- Data() gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make- FloatBuffer(vertices_circle1_hole));

//menempelkan tekstur ke objek gl.glEnable(GL10.GL_TEXTURE_2D);

gl.glEnable(GL10.GL_BLEND); gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);

gl.glBindTexture(GL10.GL_TEXTURE_2D, tex- tures_indek[0]); // gl.glTexCoordPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(textCoord_hole)); //

gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRA Y);

gl.glDrawArrays(GL10.GL_LINE_STRIP, 0, ba- tas_sudut);

//Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisable( GL10.GL_BLEND ); // Disable Alpha Blend gl.glDisable( GL10.GL_TEXTURE_2D ); // Disable Texture Mapping }

public void draw_circle_color(GL10 gl) {

335

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

//create VBO from buffer with glBuffer- Data() gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make- FloatBuffer(vertices_circle1));

//menempelkan tekstur ke objek gl.glEnable(GL10.GL_TEXTURE_2D);

gl.glEnable(GL10.GL_BLEND); gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);

gl.glBindTexture(GL10.GL_TEXTURE_2D, tex- tures_indek[0]); // gl.glTexCoordPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(textCoord)); //

gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRA Y);

gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0, ba- tas_sudut);

//Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisable( GL10.GL_BLEND ); // Disable Alpha Blend gl.glDisable( GL10.GL_TEXTURE_2D ); // Disable Texture Mapping }

public void draw_kotak(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// Point to our vertex buffer gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices));

// Draw the vertices as square

gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_color)); gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);

336

gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_color)); gl.glDrawArrays(GL10.GL_TRIANGLES, 2, 3);

//Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_COLOR_ARRAY);

}

public void draw_segitiga(GL10 gl) { gl.glFrontFace(GL10.GL_CCW); // Front face in counter-clockwise

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

//gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour for the triangle //gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);

gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(new float [] {

1.0f, 1.0f, 0.0f, // V3 0.0f, 1.0f, 0.0f, // V2 0.5f, 0.0f, 0.0f, // V1 - first vertex (x,y,z) }));

// Draw the vertices as triangle //gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_color));

//menempelkan tekstur ke objek gl.glEnable(GL10.GL_TEXTURE_2D);

gl.glEnable(GL10.GL_BLEND); gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);

gl.glBindTexture(GL10.GL_TEXTURE_2D, tex- tures_indek[0]); // gl.glTexCoordPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(textCoord_Triagle)); //

gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRA Y);

gl.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 3); //Disable the client state before leaving

337

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

//gl.glDisableClientState(GL10.GL_COLOR_ARRAY); gl.glDisable( GL10.GL_BLEND ); // Disable Alpha Blend gl.glDisable( GL10.GL_TEXTURE_2D ); // Disable Texture Mapping

} public void loadBallTexture(GL10 gl, Context context,int index_Texture) { // Bitmap bitmap = BitmapFacto- ry.decodeResource(context.getResources(), // resource);

/*Bitmap bitmap = BitmapFacto- ry.decodeStream(context.getResources()

.openRawResource(R.drawable.nature));*/

Bitmap bitmap = BitmapFacto- ry.decodeStream(context.getResources()

.openRawResource(imageFileIDs[index_Texture]));

gl.glGenTextures(1, textures_indek, 0); gl.glBindTexture(GL10.GL_TEXTURE_2D, tex- tures_indek[0]);

//gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE ); //gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE );

gl.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST); gl.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);

GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

bitmap.recycle(); } }

338

Gambar 5.8 Texture Mapping Pada Segitiga 5.5 Texture Mapping Pada Lingkaran

Source Code 5.2 Code Texture Mapping Pada Lingkaran

ESRender.java

package com.texture_mapping;

import java.util.Formatter;

import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10;

public class ESRender implements Renderer {

339

Context context;

private int RunMode=1; private float mAngle = 0.0f; // Angle in degrees private float AnimateStep = 2.0f; // Rotation step per update

private long startTime; private long fpsStartTime; private long numFrames;

float radius = 50.0f; // Ball's radius float x = radius; // Ball's center (x,y) float y = radius; float speedX = 5f; // Ball's speed (x,y) float speedY = 3f;

int xMin, xMax, yMin, yMax;

private int mywidth=0; private int myheight=0;

this.objectball3 = new ObjectBall(); }

@Override public void onDrawFrame(GL10 gl) {

// Draw background color gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

// menampilkan lingkaran only line with texture gl.glPushMatrix(); //gl.glScalef(150.0f, 150.0f, 150.0f); gl.glTranslatef(0.0f, 100.0f, 0.0f); gl.glLineWidth(1.0f); gl.glEnable(GL10.GL_LINE_SMOOTH); object- ball_hole.draw_circle_hole(gl); gl.glPopMatrix();

// menampilkan lingkaran dengan gradasi warna

340

gl.glPushMatrix();

gl.glLineWidth(1.0f); gl.glEnable(GL10.GL_LINE_SMOOTH); //bounds.set(x - radius, y - radius, x + radius, y + radius); gl.glTranslatef(x, y, 0.0f); //gl.glScalef(10.0f,10.0f,10.0f); //gl.glTranslatef(0.0f, 0.0f, - 5.0f); objectball2.draw_circle_color(gl); gl.glPopMatrix();

// menampilkan lingkaran dengan gradasi warna gl.glPushMatrix();

gl.glLineWidth(1.0f); gl.glEnable(GL10.GL_LINE_SMOOTH); //bounds.set(x - radius, y - radius, x + radius, y + radius); gl.glTranslatef(0, 200, 0.0f); //gl.glScalef(10.0f,10.0f,10.0f); //gl.glTranslatef(0.0f, 0.0f, - 5.0f); objectball3.draw_circle_color(gl); gl.glPopMatrix();

//render text gl.glPushMatrix(); // enable texture + alpha blending // NOTE: this is required for text rendering! we could incorporate it into // the GLText class, but then it would be called multiple times (which impacts performance). gl.glEnable( GL10.GL_TEXTURE_2D ); // Enable Texture Mapping gl.glEnable( GL10.GL_BLEND ); // Enable Alpha Blend gl.glBlendFunc( GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA ); // Set Alpha Blend Function

//Log.d(TAG, "Frames per second: " + fps + " (" + numFrames // + " frames in " + fpsE- lapsed + " ms)");

//}

glText.begin(1.0f, 1.0f, 1.0f, 1.0f); // Begin Text Rendering (Set Color WHITE) //glText.draw( "Posisi Bola : ("+ x + ","+y+")",150, 10); // Draw Test String

341

// Keep track of number of frames drawn numFrames++; long fpsElapsed = Sys- tem.currentTimeMillis() - fpsStartTime; //if (fpsElapsed > 1 * 1000) { // every 5 seconds float fps = (numFrames * 1000.0F) / fpsElapsed; // glText.draw( "Frames per second : "+ fps + " (" + numFrames + " frames in " + fpsElapsed + " ms)",150, 30); // Draw Test String fpsStartTime = Sys- tem.currentTimeMillis(); numFrames = 0; //}

glText.end(); // End Text Rendering

// disable texture + alpha gl.glDisable( GL10.GL_BLEND ); // Disable Alpha Blend gl.glDisable( GL10.GL_TEXTURE_2D ); // Disable Texture Mapping gl.glPopMatrix();

// // segitiga // gl.glPushMatrix(); // //GLU.gluLookAt(gl, 0, 0, 0.01f, 0f, 0f, 0f, 0f, 1.0f, 0.0f); // // gl.glTranslatef(50.0f, 60.0f, 0.0f); // gl.glScalef(80.0f, 80.0f, 0.0f);

// gl.glRotatef(180, 1.0f, 0.0f, 0.0f); // gl.glRotatef(mAngle, 0.0f, 1.0f, 0.0f); // gl.glTranslatef(-0.5f, -0.5f, 0.0f); // objectball1.draw_segitiga(gl);

// gl.glPopMatrix();

// update moveWithCollisionDetection(this); set((int)-radius, (int)-radius, mywidth, myheight);

// Update the rotational angle after each refresh if (RunMode==1) { // re-Calculate animation parame- ters mAngle += AnimateStep;

342

if (mAngle > 360.0) { //CurrentAngle -= 360.0*Math.floor(CurrentAngle/360.0); mAngle=0.0f; mAngle += AnimateStep; } } }

gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST); // nice

// perspective

// view gl.glShadeModel(GL10.GL_SMOOTH); // Ena- ble smooth shading of color gl.glDisable(GL10.GL_DITHER); // Disable dithering for better // performance

// Create the GLText glText = new ESText( gl, context.getAssets() );

//gl.glDisable(GL10.GL_DITHER); // Disa- ble dithering for better // performance

// Setup Texture, each time the surface is created (NEW) objectball_hole.loadBallTexture(gl, context,0); objectball1.loadBallTexture(gl, context,1);

objectball2.loadBallTexture(gl, context,0); objectball3.loadBallTexture(gl, context,1); gl.glEnable(GL10.GL_TEXTURE_2D); // Ena-

343

ble texture (NEW)

}

@Override public void onSurfaceChanged(GL10 gl, int width, int height) { mywidth=width; myheight=height;

/* if (height == 0) height = 1; // To prevent divide by zero float aspect = (float) width / height;

mywidth=width; myheight=height;

// Set the viewport (display area) to cover the entire window gl.glViewport(0, 0, width, height);

// Setup perspective projection, with aspect ratio matches viewport gl.glMatrixMode(GL10.GL_PROJECTION); // Select projection matrix gl.glLoadIdentity(); // Reset projection matrix

gl.glViewport( 0, 0, width, height );

// Save width and height //this.width = width; // Save Current Width //this.height = height; // Save Current Height

gl.glMatrixMode(GL10.GL_MODELVIEW); // Se- lect model-view matrix gl.glLoadIdentity(); // Reset

}

344

public float getxMax() { return xMax; } public void setxMax(int xmax) { xMax = xmax; }

public float getxMin() { return xMin; } public void setxMin(int xmin) { xMin = xmin; }

public float getyMax() { return yMax; } public void setyMax(int ymax) { yMax = ymax; }

public float getyMin() { return yMin; } public void setyMin(int ymin) { yMin = ymin; }

public float getspeedX() { return speedX; } public void setspeedX(float speedX_) { speedX = speedX_; }

public float getspeedY() { return speedY; } public void setspeedY(float speedY_) { speedY = speedY_; }

345

y = esRender.getyMax() - radius; } else if (y - radius < esRen- der.getyMin()) { speedY = -speedY; y = esRender.getyMin() + radius; } }

public void set(int x, int y, int width, int height) { xMin = x; //xMax = x + width - 1; xMax = x + width; yMin = y; //yMax = y + height - 1; yMax = y + height; } }

ESSurfaceView.java

package com.texture_mapping;

import android.content.Context; import android.opengl.GLSurfaceView; import android.util.Log; import android.view.KeyEvent; import android.view.MotionEvent;

private final ESRender esRender; private float previousX; private float previousY;

public ESSurfaceView(Context context) { super(context);

// Set the Renderer for drawing on the GLSur- faceView esRender = new ESRender(context); setRenderer(esRender);

// To enable keypad this.setFocusable(true); this.requestFocus();

346

// To enable touch mode this.setFocusableInTouchMode(true);

// Render the view only when there is a change in the drawing data // merender hanya ketika ada perubahan/ event

//setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY); }

//private final float TOUCH_SCALE_FACTOR = getWidth() / getHeight(); private float mPreviousX; private float mPreviousY;

float currentX = v.getX(); float currentY = v.getY(); float deltaX, deltaY;

//float scalingFactor = 0.50f / ((esRen- der.xMax > esRender.yMax) ? esRender.yMax //: esRender.xMax);

//esRender.setspeedX(esRender.getspeedX()+ (del-

347

taX/getWidth()));

//esRender.setspeedY(esRender.getspeedY()+ (del- taY/getHeight()));

esRen- der.setspeedX(esRender.getspeedX()+ deltaX/100); esRen- der.setspeedY(esRender.getspeedY()+ deltaY/100);

requestRender(); }

// Save current x, y previousX = currentX; previousY = currentY; return true; // Event handled //break; }

348

MainActivity.java

package com.texture_mapping;

import com.texture_mapping.R;

import android.opengl.GLSurfaceView; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.Window; import android.view.WindowManager;

public class MainActivity extends Activity {

/** The OpenGL view */ private GLSurfaceView glSurfaceView;

@Override protected void onCreate(Bundle savedInstanceS- tate) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main);

// requesting to turn the title OFF requestWindowFeature(Window.FEATURE_NO_TITLE); // making it full screen getWin- dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCR EEN, WindowManag- er.LayoutParams.FLAG_FULLSCREEN);

// Initiate the Open GL view and // create an instance with this activity glSurfaceView = new ESSurfaceView(this);

// set our renderer to be the main renderer with // the current activity context //glSurfaceView.setRenderer(new ESRender()); setContentView(glSurfaceView); }

/** * Remember to resume the glSurface */ @Override protected void onResume() { super.onResume(); glSurfaceView.onResume(); }

/** * Also pause the glSurface */

349

@Override protected void onPause() { super.onPause(); glSurfaceView.onPause(); }

@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }

}

ObjectBall.java

package com.texture_mapping;

import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer;

import javax.microedition.khronos.opengles.GL10; import javax.microedition.khronos.opengles.GL11; import javax.microedition.khronos.opengles.GL11ExtensionPack;

import com.texture_mapping.R;

import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.opengl.GLES20; import android.opengl.GLUtils; import android.util.Log;

public class ObjectBall {

private float vertices[] = { -0.5f, -0.5f, 0.0f, // V1 - first vertex (x,y,z) -0.5f, 0.5f, 0.0f, // V2 0.5f, 0.5f, 0.0f, // V3 0.5f, -0.5f, 0.0f, // V4 -0.5f, -0.5f, 0.0f // V5 };

350

private float textCoord_Triagle[]={ 1.0f, 1.0f, 0.0f, // V3 0.0f, 1.0f, 0.0f, // V2 0.5f, 0.0f, 0.0f, // V1 - first vertex (x,y,z) };

private int[] imageFileIDs = { // Image file IDs R.drawable.nature, R.drawable.mule};

int[] textures_indek = new int[1];

private int batas_sudut=360; float jari_jari; float a,b; float x,y; float step=3.0f,step_line=0.2f; float x1,y1; float x2,y2; float teta, teta_hole; private int loop,loop_color;

public ObjectBall() {

// ======start to generate stetch

351

texture coordinat ======//Inisialisasi jari_jari=0.5f;

// Titik Pusat a = 0.5f; b = 0.5f ; //x=a+jari_jari; y=b; teta = 0;

teta += Math.PI / 90;

teta_hole += 15; }

// ======start to generate vertices to circle (Cara 1) ======//Inisialisasi jari_jari=50.0f;

// Titik Pusat a = 50.0f; b = 50.0f ;

352

teta += Math.PI / 90;

// ======start to generate vertices to circle (Cara 2) ======//Inisialisasi jari_jari=50.0f;

// Titik Pusat a = 50.0f; b = 50.0f ; x=a+jari_jari; y=b;

//mengenerate warna untuk setiap vertex

//vertices_circle_color[loop_color]=(float) ((x- a)*Math.cos((teta/180)*(22/7)) - ((y- b)*Math.sin((teta/180)*(22/7))) + a);

//vertices_circle_color[loop_color+1]=(float) ((x-a)*Math.sin((teta/180)*(22/7)) - ((y- b)*Math.cos((teta/180)*(22/7))) + b);

vertices_circle_color[loop_color]=(float) (Math.cos((teta/180)*(22/7)) ); verti- ces_circle_color[loop_color+1]=(float) (Math.sin((teta/180)*(22/7)));

vertices_circle_color[loop_color+2]=0.5f; vertices_circle_color[loop_color+3]=0.5f; loop_color+=4; }

353

// ======end for generate vertices to circle ======

}

// Setup index-array buffer. Indices in byte. public static ByteBuffer makeByteBuffer(byte[] arr){ ByteBuffer bb = ByteBuff- er.allocateDirect(arr.length); bb.put(arr); bb.position(0); return bb; }

/** The draw method for the primitive object with the GL context */ public void draw_circle(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour for the object circle //gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);

//create VBO from buffer with glBuffer- Data() gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make- FloatBuffer(vertices_circle));

//memetakan warna untuk setiap vertex gl.glColorPointer(4, GL10.GL_FLOAT, 0, make- FloatBuffer(vertices_circle_color));

//draw circle as filled shape //gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 1, (int) ((int) 2*batas_sudut/step));

354

gl.glDrawArrays(GL10.GL_LINE_STRIP, 1, (int) ((int) 2*batas_sudut/step)); //gl.glDrawArrays(GL10.GL_POINTS, 1, (int) ((int) 2*batas_sudut/step));

//Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_COLOR_ARRAY); }

public void draw_circle_hole(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

//create VBO from buffer with glBuffer- Data() gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make- FloatBuffer(vertices_circle1_hole));

//menempelkan tekstur ke objek gl.glEnable(GL10.GL_TEXTURE_2D);

gl.glEnable(GL10.GL_BLEND); gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);

gl.glBindTexture(GL10.GL_TEXTURE_2D, tex- tures_indek[0]); // gl.glTexCoordPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(textCoord_hole)); //

gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRA Y);

gl.glDrawArrays(GL10.GL_LINE_STRIP, 0, ba- tas_sudut);

//Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisable( GL10.GL_BLEND ); // Disable Alpha Blend gl.glDisable( GL10.GL_TEXTURE_2D ); // Disable Texture Mapping }

public void draw_circle_color(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

355

//create VBO from buffer with glBuffer- Data() gl.glVertexPointer(3, GL10.GL_FLOAT, 0, make- FloatBuffer(vertices_circle1));

//menempelkan tekstur ke objek gl.glEnable(GL10.GL_TEXTURE_2D);

gl.glEnable(GL10.GL_BLEND); gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);

gl.glBindTexture(GL10.GL_TEXTURE_2D, tex- tures_indek[0]); // gl.glTexCoordPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(textCoord)); //

gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRA Y);

gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 0, ba- tas_sudut);

//Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisable( GL10.GL_BLEND ); // Disable Alpha Blend gl.glDisable( GL10.GL_TEXTURE_2D ); // Disable Texture Mapping }

public void draw_kotak(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// Point to our vertex buffer gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices));

// Draw the vertices as square

gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_color)); gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);

gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_color));

356

gl.glDrawArrays(GL10.GL_TRIANGLES, 2, 3);

//Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_COLOR_ARRAY);

}

public void draw_segitiga(GL10 gl) { gl.glFrontFace(GL10.GL_CCW); // Front face in counter-clockwise

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

//gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour for the triangle //gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);

gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(new float [] {

1.0f, 1.0f, 0.0f, // V3 0.0f, 1.0f, 0.0f, // V2 0.5f, 0.0f, 0.0f, // V1 - first vertex (x,y,z)

}));

// Draw the vertices as triangle //gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_color));

//menempelkan tekstur ke objek gl.glEnable(GL10.GL_TEXTURE_2D);

gl.glEnable(GL10.GL_BLEND); gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);

gl.glBindTexture(GL10.GL_TEXTURE_2D, tex- tures_indek[0]); // gl.glTexCoordPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(textCoord_Triagle)); //

gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRA Y);

gl.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 3);

357

//Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

//gl.glDisableClientState(GL10.GL_COLOR_ARRAY); gl.glDisable( GL10.GL_BLEND ); // Disable Alpha Blend gl.glDisable( GL10.GL_TEXTURE_2D ); // Disable Texture Mapping

}

public void loadBallTexture(GL10 gl, Context context,int index_Texture) { // Bitmap bitmap = BitmapFacto- ry.decodeResource(context.getResources(), // resource);

/*Bitmap bitmap = BitmapFacto- ry.decodeStream(context.getResources()

.openRawResource(R.drawable.nature));*/

Bitmap bitmap = BitmapFacto- ry.decodeStream(context.getResources()

.openRawResource(imageFileIDs[index_Texture]));

gl.glGenTextures(1, textures_indek, 0); gl.glBindTexture(GL10.GL_TEXTURE_2D, tex- tures_indek[0]);

//gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE ); //gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE );

gl.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST); gl.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);

GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

bitmap.recycle(); } }

358

Gambar 5.9 Texture Mapping Pada Lingkaran 5.6 Texture Mapping Pada Kubus

Source Code 5.3 Code Texture Mapping Pada Kubus

ESRender.java

package com.wordpress.androidfreecode;

import java.io.IOException;

import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10;

import android.content.Context; //import android.opengl.GLU; import android.opengl.GLSurfaceView.Renderer; import android.opengl.GLU;

public class ESRender implements Renderer {

private Context context; // Application context needed to read image (NEW) private TextureKubus kubus;

int RunMode=1; float CurrentAngle = 0.0f; // Angle in degrees float AnimateStep = 2.0f; // Rotation step per update

359

/** Constructor to set the handed over context */ public ESRender(Context context) { this.context = context; // Get the application context (NEW) kubus = new TextureKubus(); }

@Override public void onDrawFrame(GL10 gl) { // clear Screen and Depth Buffer //gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); // set background dgn warna putih //gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // set background dgn warna hitam

gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

// ----- Render the Kubus ----- gl.glPushMatrix(); gl.glTranslatef(0.0f, 0.9f, - 5.0f); //gl.glTranslatef(0.0f, 0.0f, - 6.0f); // Translate into the screen gl.glRotatef(CurrentAngle, 0.1f, 1.0f, 0.2f); // Rotate //gl.glRotatef(CurrentAngle, 1.0f, 1.0f, 1.0f ); gl.glTranslatef(-0.5f,-0.5f,- 0.5f); kubus.draw(gl); gl.glPopMatrix();

}

@Override public void onSurfaceChanged(GL10 gl, int width, int height) {

if (height == 0) height = 1; // To prevent divide by zero float aspect = (float) width / height;

360

// Set the viewport (display area) to cover the entire window gl.glViewport(0, 0, width, height);

// Setup perspective projection, with aspect ratio matches viewport gl.glMatrixMode(GL10.GL_PROJECTION); // Select projection matrix gl.glLoadIdentity(); // Reset projection matrix

}

@Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // Set color's clear-value to black gl.glClearDepthf(1.0f); // Set depth's clear-value to farthest gl.glEnable(GL10.GL_DEPTH_TEST); // Ena- bles depth-buffer for hidden // surface removal gl.glDepthFunc(GL10.GL_LEQUAL); // The type of depth testing to do

gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST); // nice

// perspective

// view gl.glShadeModel(GL10.GL_SMOOTH); // Ena- ble smooth shading of color gl.glDisable(GL10.GL_DITHER); // Disable dithering for better // performance

// Setup Texture, each time the surface is created (NEW) kubus.loadTexture(gl, context); gl.glEnable(GL10.GL_TEXTURE_2D); // Ena- ble texture (NEW) }

public int getRunMode() { return RunMode; }

public void setRunMode(int mRunMode) {

361

RunMode = mRunMode; }

public float getAnimateStep() { return AnimateStep; }

public void setAnimateStep(float mAnimateStep) { AnimateStep = mAnimateStep; }

}

MainActivity.java

package com.wordpress.androidfreecode;

import android.app.Activity; import android.opengl.GLSurfaceView; import android.os.Bundle; import android.view.Window; import android.view.WindowManager;

/** * Our OpenGL program's main activity */ public class MainActivity extends Activity { private GLSurfaceView glView; // Use GLSur- faceView // Call back when the activity is started, to in- itialize the view

@Override protected void onCreate(Bundle savedInstanceS- tate) { super.onCreate(savedInstanceState);

// requesting to turn the title OFF requestWindowFeature(Window.FEATURE_NO_TITLE); // making it full screen getWin- dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCR EEN, WindowManag- er.LayoutParams.FLAG_FULLSCREEN);

glView = new GLSurfaceView(this); // Al- locate a GLSurfaceView glView.setRenderer(new ESRender(this)); // Use a custom renderer this.setContentView(glView); // This activity sets to GLSurfaceView }

362

// Call back when the activity is going into the background @Override protected void onPause() { super.onPause(); glView.onPause(); }

// Call back after onPause() @Override protected void onResume() { super.onResume(); glView.onResume(); }

}

TextureKubus.java

package com.wordpress.androidfreecode;

import java.io.IOException; import java.io.InputStream; import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import javax.microedition.khronos.opengles.GL10;

import android.content.Context; import android.content.res.AssetManager; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.opengl.GLUtils;

/* * A cube with texture. * Define the vertices for only one representative face. * * Render the cube by translating and rotating the face. */ public class TextureKubus { private FloatBuffer vertexBuffer; // Buffer for vertex-array private FloatBuffer texBuffer; // Buffer for texture-coords-array (NEW) private float[] vertices = { // Vertices for a face -1.0f, -1.0f, 0.0f, // 0. left- bottom-front 1.0f, -1.0f, 0.0f, // 1. right-

363

bottom-front -1.0f, 1.0f, 0.0f, // 2. left-top- front 1.0f, 1.0f, 0.0f // 3. right-top- front }; float[] texCoords = { // Texture coords for the above face (NEW) 0.0f, 1.0f, // A. left-bottom (NEW) 1.0f, 1.0f, // B. right-bottom (NEW) 0.0f, 0.0f, // C. left-top (NEW) 1.0f, 0.0f // D. right-top (NEW) }; int[] textureIDs = new int[1]; // Array for 1 texture-ID (NEW)

// Constructor - Set up the buffers

public TextureKubus() { // Setup vertex-array buffer. Vertices in float. An float has 4 bytes ByteBuffer vbb = ByteBuff- er.allocateDirect(vertices.length * 4); vbb.order(ByteOrder.nativeOrder()); // Use native byte order vertexBuffer = vbb.asFloatBuffer(); // Convert from byte to float vertexBuffer.put(vertices); // Copy data into buffer vertexBuffer.position(0); // Rewind // Setup texture-coords-array buffer, in float. An float has 4 bytes // (NEW) ByteBuffer tbb = ByteBuff- er.allocateDirect(texCoords.length * 4); tbb.order(ByteOrder.nativeOrder()); texBuffer = tbb.asFloatBuffer(); texBuffer.put(texCoords); texBuffer.position(0);

}

// Draw the shape public void draw(GL10 gl) { gl.glFrontFace(GL10.GL_CCW); // Front face in counter-clockwise

// orientation gl.glEnable(GL10.GL_CULL_FACE); // Enable cull face gl.glCullFace(GL10.GL_BACK); // Cull the back face (don't display)

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);

364

gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRA Y); // Enable

// texture-coords-array

// (NEW) gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, texBuffer); // Define

// texture-coords

// buffer (NEW) // front gl.glPushMatrix(); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// left gl.glPushMatrix(); gl.glRotatef(270.0f, 0.0f, 1.0f, 0.0f); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// back gl.glPushMatrix(); gl.glRotatef(180.0f, 0.0f, 1.0f, 0.0f); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// right gl.glPushMatrix(); gl.glRotatef(90.0f, 0.0f, 1.0f, 0.0f); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// top gl.glPushMatrix(); gl.glRotatef(270.0f, 1.0f, 0.0f, 0.0f); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// bottom gl.glPushMatrix(); gl.glRotatef(90.0f, 1.0f, 0.0f, 0.0f);

365

gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARR AY); // Disable

// texture-coords-array

// (NEW)

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); gl.glDisable(GL10.GL_CULL_FACE); }

// Load an image into GL texture public void loadTexture(GL10 gl,Context c) { gl.glGenTextures(1, textureIDs, 0); // Generate texture-ID array gl.glBindTexture(GL10.GL_TEXTURE_2D, tex- tureIDs[0]); // Bind to texture

// ID // Set up texture filters gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);

// Construct an input stream to texture image "res\drawable\nature.png" //AssetManager assetManager = c.getAssets(); //InputStream istream = assetManag- er.open("nature.png"); InputStream istream = c.getResources().openRawResource(R.drawable.nature); Bitmap bitmap; try { // Read and decode input as bitmap bitmap = BitmapFacto- ry.decodeStream(istream); } finally { try { istream.close(); } catch (IOException e) { } } // Build Texture from loaded bitmap for the currently-bind texture ID GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0); bitmap.recycle();

366

} }

Gambar 5.10 Texture Mapping Pada Kubus 5.7 Texture Mapping Pada Bola

Source Code 5.4 Code Texture Mapping Pada Bola

ESRender.java

package com.texture_mapping;

import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10; import android.content.Context; import android.opengl.GLSurfaceView; import android.opengl.GLSurfaceView.Renderer; import android.opengl.GLU;

public class ESRender implements Renderer {

/** Tilt the spheres a little. */ private static final int AXIAL_TILT_DEGRESS = 30;

/** Clear colour, alpha component. */ private static final float CLEAR_RED = 0.0f;

/** Clear colour, alpha component. */ private static final float CLEAR_GREEN = 0.0f;

/** Clear colour, alpha component. */ private static final float CLEAR_BLUE = 0.0f;

367

/** Clear colour, alpha component. */ private static final float CLEAR_ALPHA = 0.5f;

/** Perspective setup, field of view component. */ private static final float FOVY = 45.0f;

/** Perspective setup, near component. */ private static final float Z_NEAR = 0.1f;

/** Perspective setup, far component. */ private static final float Z_FAR = 100.0f;

/** Object distance on the screen. move it back a bit so we can see it! */ private static final float OBJECT_DISTANCE = - 15.0f;

/** The earth's sphere. */ private final MySphere mEarth;

/** The context. */ private final Context mContext;

/** The rotation angle, just to give the screen some action. */ private float mRotationAngle; /** * Constructor to set the handed over context. * @param context The context. */ public ESRender(final Context context) { this.mContext = context; //this.mEarth = new MySphere(3, 2); this.mEarth = new MySphere(5, 3); this.mRotationAngle = 0.0f; }

// Call back to draw the current frame. @Override public void onDrawFrame(GL10 gl) { // Clear color and depth buffers gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

gl.glLoadIdentity(); // ----- Render the Sphere ------gl.glPushMatrix(); gl.glTranslatef(0.0f, 0.0f, OBJECT_DISTANCE); gl.glRotatef(AXIAL_TILT_DEGRESS, 1, 0, 0); gl.glRotatef(this.mRotationAngle++, 0, 1, 0); this.mEarth.draw(gl); gl.glPopMatrix(); }

368

// Call back when the surface is first created or re-created. @Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { this.mEarth.loadGLTexture(gl, this.mContext, R.drawable.earth); gl.glEnable(GL10.GL_TEXTURE_2D); gl.glShadeModel(GL10.GL_SMOOTH); gl.glClearColor(CLEAR_RED, CLEAR_GREEN, CLEAR_BLUE, CLEAR_ALPHA); gl.glClearDepthf(1.0f); gl.glEnable(GL10.GL_DEPTH_TEST); gl.glDepthFunc(GL10.GL_LEQUAL); gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST); }

// Call back after onSurfaceCreated() or whenever the window's size changes. @Override public void onSurfaceChanged(GL10 gl, int width, int height) {

final float aspectRatio = (float) width / (float) (height == 0 ? 1 : height);

// gl.glViewport(0, 0, width, height); //gl.glMatrixMode(GL10.GL_PROJECTION); // gl.glLoadIdentity();

/*if (height == 0) height = 1; // To prevent divide by zero float aspectRatio = (float) width / height;*/

// Set the viewport (display area) to cover the entire window gl.glViewport(0, 0, width, height);

// Setup perspective projection, with aspect ratio matches viewport gl.glMatrixMode(GL10.GL_PROJECTION); // Select projection matrix gl.glLoadIdentity(); // Reset projection matrix

// Use perspective projection //GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f); // gl.glOrthof(-3.0f, 3.0f, -3.0f, 3.0f, -3.0f, 3.0f);

GLU.gluPerspective(gl, FOVY, aspectRatio, Z_NEAR, Z_FAR); gl.glMatrixMode(GL10.GL_MODELVIEW); //

369

Select model-view matrix gl.glLoadIdentity(); // Reset } }

MainActivity.java

package com.texture_mapping;

import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.app.Activity; import android.opengl.GLSurfaceView; import android.os.Bundle; import android.view.Window; import android.view.WindowManager;

public class MainActivity extends Activity {

/** The OpenGL view. */ private GLSurfaceView glSurfaceView;

@Override protected void onCreate(final Bundle savedIn- stanceState) { super.onCreate(savedInstanceState);

this.requestWindowFeature(Window.FEATURE_NO_TITLE);

/** * Remember to resume the glSurface */ @Override protected void onResume() { super.onResume(); this.glSurfaceView.onResume(); }

/** * Also pause the glSurface */ @Override protected void onPause() {

370

super.onPause(); this.glSurfaceView.onPause(); }

@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }

}

Maths.java package com.texture_mapping;

/** * @author Jim Cornmell re-edit by XTech * */ public final class Maths {

/** 180 in radians. */ public static final double ONE_EIGHTY_DEGREES = Math.PI;

/** 360 in radians. */ public static final double THREE_SIXTY_DEGREES = ONE_EIGHTY_DEGREES * 2;

/** 120 in radians. */ public static final double ONE_TWENTY_DEGREES = THREE_SIXTY_DEGREES / 3;

/** 90 degrees, North pole. */ public static final double NINETY_DEGREES = Math.PI / 2;

/** Used by power. */ private static final long POWER_CLAMP = 0x00000000ffffffffL;

/** * Constructor, although not used at the moment. */ private Maths() { }

/** * Quick integer power function. * * @param base * number to raise. * @param raise

371

* to this power. * @return base ^ raise. */ public static int power(final int base, final int raise) { int p = 1; long b = raise & POWER_CLAMP;

// bits in b correspond to values of powerN // so start with p=1, and for each set bit in b, multiply corresponding // table entry long powerN = base;

while (b != 0) { if ((b & 1) != 0) { p *= powerN; } b >>>= 1; powerN = powerN * powerN; }

return p; } }

MySphere.java

package com.texture_mapping;

import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import java.util.ArrayList; import java.util.List;

import javax.microedition.khronos.opengles.GL10;

import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.opengl.GLUtils;

/** * Render a sphere. * * @author Jim Cornmell re-edit by XTech * @since July 2013 */ public class MySphere { /** Maximum allowed depth. */ private static final int MAXIMUM_ALLOWED_DEPTH = 5;

/** Used in vertex strip calculations, related to properties of a icosahedron. */

372

private static final int VERTEX_MAGIC_NUMBER = 5;

/** Each vertex is a 2D coordinate. */ private static final int NUM_FLOATS_PER_VERTEX = 3;

/** Each texture is a 2D coordinate. */ private static final int NUM_FLOATS_PER_TEXTURE = 2;

/** Each vertex is made up of 3 points, x, y, z. */ private static final int AMOUNT_OF_NUMBERS_PER_VERTEX_POINT = 3;

/** Each texture point is made up of 2 points, x, y (in reference to the texture being a 2D image). */ private static final int AMOUNT_OF_NUMBERS_PER_TEXTURE_POINT = 2;

/** Buffer holding the vertices. */ private final List mVertexBuffer = new ArrayList();

/** The vertices for the sphere. */ private final List mVertices = new Ar- rayList();

/** Buffer holding the texture coordinates. */ private final List mTextureBuffer = new ArrayList();

/** Mapping texture coordinates for the vertices. */ private final List mTexture = new Ar- rayList();

/** The texture pointer. */ private final int[] mTextures = new int[1];

/** Total number of strips for the given depth. */ private final int mTotalNumStrips;

/** * Sphere constructor. * @param depth integer representing the split of the sphere. * @param radius The spheres radius. */ public MySphere(final int depth, final float radius) { // Clamp depth to the range 1 to MAXIMUM_ALLOWED_DEPTH; final int d = Math.max(1, Math.min(MAXIMUM_ALLOWED_DEPTH, depth));

373

final double azimuthStepAngle = Maths.THREE_SIXTY_DEGREES / this.mTotalNumStrips; double x, y, z, h, altitude, azimuth;

for (int stripNum = 0; stripNum < this.mTotalNumStrips; stripNum++) { // Setup arrays to hold the points for this strip. final float[] vertices = new float[numVerticesPerStrip * NUM_FLOATS_PER_VERTEX]; // NOPMD final float[] texturePoints = new float[numVerticesPerStrip * NUM_FLOATS_PER_TEXTURE]; // NOPMD int vertexPos = 0; int texturePos = 0;

// Calculate position of the first vertex in this strip. altitude = Maths.NINETY_DEGREES; azimuth = stripNum * azimuthStepAngle;

// Draw the rest of this strip. for (int vertexNum = 0; vertexNum < numVertices- PerStrip; vertexNum += 2) { // First point - Vertex. y = radius * Math.sin(altitude); h = radius * Math.cos(altitude); z = h * Math.sin(azimuth); x = h * Math.cos(azimuth); vertices[vertexPos++] = (float) x; vertices[vertexPos++] = (float) y; vertices[vertexPos++] = (float) z;

// First point - Texture. texturePoints[texturePos++] = (float) (1 - azimuth / Maths.THREE_SIXTY_DEGREES); texturePoints[texturePos++] = (float) (1 - (altitude + Maths.NINETY_DEGREES) / Maths.ONE_EIGHTY_DEGREES);

// Second point - Vertex. altitude -= altitudeStepAngle; azimuth -= azimuthStepAngle / 2.0; y = radius * Math.sin(altitude); h = radius * Math.cos(altitude); z = h * Math.sin(azimuth); x = h * Math.cos(azimuth); vertices[vertexPos++] = (float) x; vertices[vertexPos++] = (float) y; vertices[vertexPos++] = (float) z;

// Second point - Texture. texturePoints[texturePos++] = (float) (1 - azimuth / Maths.THREE_SIXTY_DEGREES); texturePoints[texturePos++] = (float) (1 - (altitude + Maths.NINETY_DEGREES) / Maths.ONE_EIGHTY_DEGREES);

374

azimuth += azimuthStepAngle; }

this.mVertices.add(vertices); this.mTexture.add(texturePoints);

ByteBuffer byteBuffer = ByteBuff- er.allocateDirect(numVerticesPerStrip * NUM_FLOATS_PER_VERTEX * Float.SIZE); byteBuffer.order(ByteOrder.nativeOrder()); FloatBuffer fb = byteBuffer.asFloatBuffer(); fb.put(this.mVertices.get(stripNum)); fb.position(0); this.mVertexBuffer.add(fb);

// Setup texture. byteBuffer = ByteBuff- er.allocateDirect(numVerticesPerStrip * NUM_FLOATS_PER_TEXTURE * Float.SIZE); byteBuffer.order(ByteOrder.nativeOrder()); fb = byteBuffer.asFloatBuffer(); fb.put(this.mTexture.get(stripNum)); fb.position(0); this.mTextureBuffer.add(fb); } }

/** * Load the texture for the square. * * @param gl Handle. * @param context Handle. * @param texture Texture map for the sphere. */ public void loadGLTexture(final GL10 gl, final Con- text context, final int texture) { final Bitmap bitmap = BitmapFacto- ry.decodeResource(context.getResources(), texture);

// Generate one texture pointer, and bind it to the texture array. gl.glGenTextures(1, this.mTextures, 0); gl.glBindTexture(GL10.GL_TEXTURE_2D, this.mTextures[0]);

// Create nearest filtered texture. gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);

// Use Android GLUtils to specify a two- dimensional texture image from our bitmap. GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);

// Tidy up. bitmap.recycle(); }

375

/** * The draw method for the square with the GL context. * * @param gl Graphics handle. */ public void draw(final GL10 gl) { // bind the previously generated texture. gl.glBindTexture(GL10.GL_TEXTURE_2D, this.mTextures[0]);

// Point to our buffers. gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

// Set the face rotation, clockwise in this case. gl.glFrontFace(GL10.GL_CW);

// Point to our vertex buffer. for (int i = 0; i < this.mTotalNumStrips; i++) {

gl.glVertexPointer(AMOUNT_OF_NUMBERS_PER_VERTEX_POINT, GL10.GL_FLOAT, 0, this.mVertexBuffer.get(i));

gl.glTexCoordPointer(AMOUNT_OF_NUMBERS_PER_TEXTURE_POI NT, GL10.GL_FLOAT, 0, this.mTextureBuffer.get(i));

// Draw the vertices as triangle strip. gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, this.mVertices.get(i).length / AMOUNT_OF_NUMBERS_PER_VERTEX_POINT); }

// Disable the client state before leaving. gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY); } }

376

Gambar 5.11 Texture Mapping Pada Bola

377

BAB 6 Blending

6.1 Pengertian Blending

Blending merupakan fungsi yang menggabungkan nilai warna dari sumber (source) dan tujuan (destination/object), sehingga efek akhir scene terlihat transparan. Pencampuran dapat mengontrol berapa banyak warna yang dapat dikombinasikan. Dengan demikian untuk proses membuat terang fragmen dapat menggunakan alpha pencampuran. Warna pencampuran terletak pada teknik utama, seperti transparan, digital composite dan lukisan. Operasi campuran yaitu cara yang paling alami untuk mengetahui bahwa komponen RGB adalah suatu fragmen yang mewakili warna dan komponen alfa adalah suatu fragmen yang mewakili sifat tidak tembus cahaya. Dengan demikian, transparan mempunyai permukaan lebih rendah daripada yang buram. Dengan menggunakan glBlendFunc() untuk persediaan pada dua hal utama, yang pertama menentukan bagaimana faktor sumber dan tujuan harus dihitung dan yang kedua menunjukan bagaimana faktor sumber dan tujuan dihitung. Dan untuk proses pencampurannya harus ada faktor pengaktifannya menggunakan : glEnable (GL_BLEND). Menggunakan glDisable() dengan GL_BLEND untuk menonaktifkan Pencampuran dan menggunakan konstan GL_ONE(sumber) dan GL_ZERO(tujuan) memberikan hasil yang sama seperti ketika Pencampuran dinonaktifkan. Nilai-nilai ini bersifat default dengan void glBlendFunc(GLenum sfactor, GLenum dfactor). Teknik blending juga digunakan untuk ilusi dari cerminan sebuah objek pada Gambar 6.1.

Gambar 6.1 Teknik blending untuk mendapatkan efek pantulan

378

6.2 Source and Destination Factor Pada Blending

RGBA (Red, Green, Blue, Alpha) Alpha digunakan untuk mengatur tingkat opacity objek. a = 1 → tidak transparan a = 0 → transparan 0 < a < 1 → nilai untuk mengatur tingkat opacity Blending colors Source color : (Rs, Gs, Bs, As) Destination color : (Rd, Gd, Bd, Ad) Source factor : (Sr, Sg, Sb, Sa) Destination factor : (Dr, Dg, Db, Da) Blended RGBA = (RsSr+RdDr, GsSg+GdDg, BsSb+BdDb, As- Sa+AdDa) 6.3 Matematika Blending

Contoh soal blending : Biasanya, alasan mengapa seseorang menggunakan: glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); karena ingin menggunakan nilai alpha yang baru saja diberikan. Hal Ini digunakan untuk memperbanyak warna, dan kemudian menggunakan (1 - alpha) dan menggunakannya untuk memperbanyak warna buffer saat ini dalam koordinat. Oleh karena itu, jika melukis dengan quad glColor4f (1.0f, 1.0f, 1.0f, 0.6f) dan buffer diisi dengan glColor4f (1.0f, 0.0f, 0.0f, 1.0f), operasi akhirnya akan menjadi:

(1.0f, 1.0f, 1.0f) * ALPHA (1.0f, 0.0f, 0.0f) * (1 - ALPHA) (0.6f, 0.6f, 0.6f) (0.4f, 0.0f, 0.0f)

Jadi warna akhir adalah (1.0f, 0.6f, 0.6f)

379

Berikut contohnya : Objek ke 1 (biru) dengan RGBA (10, 20, 5, 0.2)

S Objek ke 2 (merah) dengan RGBA (30, 15, 6, 0.1)

D Gabungan objek satu dan objek 2

(R G B A) ?

GL_ONE_MINUS_SRC_ALPHA S/D (1,1,1,1) = (As,As,As,As) = (1, 1, 1, 1)(0.2, 0.2, 0.2, 0.2) = (0.8, 0.8, 0.8, 0.8)

380

Blended color Rblend = 0.8*10/S + 30*0.8/D = 8/S + 24/D = 32/SD Gblend = 0.8*20/S + 15*0.8/D = 16/S + 12/D = 24/SD Bblend = 0.8*5/S + 6*0.8/D = 4/S + 4.8/D = 8.8/SD Alphablend = 0.8*0.2/S + 0.1*0.8/D = 0.16/S + 0.08/D = 0.24/SD

RGBA adalah = (32, 24, 8.8, 0.24) 6.4 Blending Dua Segitiga

Source Code 6.1 Code Blending Dua Segitiga

ESRender.java

package com.blending;

import java.util.Formatter;

import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10;

public class ESRender implements Renderer {

private ESText glText; private TextView textview;

381

private ObjectArena objectarena; // the primitive object to be drawn private ObjectBall objectball; private ObjectBall objectball2; private ObjectBall objectball3; private PrimitivesObject primob;

Context context; int Run_Mode=0; float CurrentAngle = 0.0f; // Angle in degrees float AnimateStep = 2.0f; // Rotation step per update

float radius = 50.0f; // Ball's radius float x = radius; // Ball's center (x,y) float y = radius; float speedX = 5f; // Ball's speed (x,y) float speedY = 3f;

int xMin, xMax, yMin, yMax;

private int mywidth = 0; private int myheight = 0; private int jumlah_pantulan=0;

@Override public void onDrawFrame(GL10 gl) {

// Draw background color gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

// segitiga merah gl.glPushMatrix(); gl.glColor4f(1.0f, 0.0f, 0.0f, 0.5f); gl.glTranslatef(50.0f, 60.0f, 0.0f); gl.glScalef(80.0f, 80.0f, 0.0f);

gl.glRotatef(180, 1.0f, 0.0f, 0.0f); gl.glTranslatef(5.0f, -3.5f, 0.0f); objectball.draw_segitiga(gl);

gl.glPopMatrix();

382

// segitiga hijau gl.glPushMatrix(); gl.glColor4f(0.0f, 0.0f, 1.0f, 0.5f); gl.glTranslatef(60.0f, 60.0f, 0.0f); gl.glScalef(80.0f, 80.0f, 0.0f);

gl.glRotatef(180, 1.0f, 0.0f, 0.0f); gl.glTranslatef(5.0f, -3.5f, 0.0f); objectball.draw_segitiga(gl);

gl.glPopMatrix();

// update moveWithCollisionDetection(this); set((int)-radius, (int)-radius, mywidth, myheight);

// render text gl.glPushMatrix();

// gl.glScalef(10.0f, 10.0f, 10.0f);

// enable texture + alpha blending // NOTE: this is required for text rendering! we could incorporate it // into // the GLText class, but then it would be called multiple times (which // impacts performance). gl.glEnable(GL10.GL_TEXTURE_2D); // Ena- ble Texture Mapping gl.glEnable(GL10.GL_BLEND); // Enable Al- pha Blend gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA); // Set

// Alpha

// Blend

// Function

// disable texture + alpha gl.glDisable(GL10.GL_BLEND); // Disable Alpha Blend gl.glDisable(GL10.GL_TEXTURE_2D); // Dis- able Texture Mapping

gl.glPopMatrix();

383

// Update the rotational angle after each refresh // re-Calculate animation parame- ters CurrentAngle += AnimateStep; if (CurrentAngle > 360.0) { //CurrentAngle -= 360.0*Math.floor(CurrentAngle/360.0); CurrentAngle=0.0f; CurrentAngle += Ani- mateStep; }

}

@Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { gl.glClearColor(0.5f, 0.5f, 0.5f, 1.0f); // Set color's clear-value to

// black gl.glClearDepthf(1.0f); // Set depth's clear-value to farthest gl.glEnable(GL10.GL_DEPTH_TEST); // Ena- bles depth-buffer for hidden // surface removal gl.glDepthFunc(GL10.GL_LEQUAL); // The type of depth testing to do

gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST); // nice // perspective // view gl.glShadeModel(GL10.GL_SMOOTH); // Ena- ble smooth shading of color gl.glDisable(GL10.GL_DITHER); // Disable dithering for better // performance

// Create the GLText glText = new ESText(gl, context.getAssets());

// Load the font from file (set size + padding), creates the texture // NOTE: after a successful call to this the font is ready for // rendering! glText.load("Roboto-Regular.ttf", 14, 2, 2); // Create Font (Height: 14

// Pixels / X+Y Padding

// 2 Pixels)

384

// gl.glDisable(GL10.GL_DITHER); // Disa- ble dithering for better // performance

// Setup Texture, each time the surface is created (NEW) objectball2.loadBallTexture(gl, context); gl.glEnable(GL10.GL_TEXTURE_2D); // Ena- ble texture (NEW)

}

@Override public void onSurfaceChanged(GL10 gl, int width, int height) { mywidth = width; myheight = height;

gl.glViewport(0, 0, width, height);

// Setup orthographic projection gl.glMatrixMode(GL10.GL_PROJECTION); // Activate Projection Matrix gl.glLoadIdentity(); // Load Identity Ma- trix gl.glOrthof( // Set Ortho Projection (Left,Right,Bottom,Top,Front,Back) 0, width, 0, height, 100.0f, -100.0f);

// Save width and height // this.width = width; // Save Current Width // this.height = height; // Save Current Height

gl.glMatrixMode(GL10.GL_MODELVIEW); // Select model-view matrix gl.glLoadIdentity(); // Reset

}

public float getxMax() { return xMax; }

public void setxMax(int xmax) { xMax = xmax; }

public float getxMin() { return xMin; }

public void setxMin(int xmin) { xMin = xmin; }

public float getyMax() {

385

return yMax; }

public void setyMax(int ymax) { yMax = ymax; }

public float getyMin() { return yMin; }

public void setyMin(int ymin) { yMin = ymin; }

public float getspeedX() { return speedX; }

public void setspeedX(float speedX_) { speedX = speedX_; }

public float getspeedY() { return speedY; } public void setspeedY(float speedY_) { speedY = speedY_; } public void moveWithCollisionDetection(ESRender esRender) { // Get new (x,y) position x += speedX; y += speedY; // Detect collision and react if (x + radius > esRender.getxMax()) { speedX = -speedX; x = esRender.getxMax() - radius; this.jumlah_pantulan+=1; } else if (x - radius < esRen- der.getxMin()) { speedX = -speedX; x = esRender.getxMin() + radius; this.jumlah_pantulan+=1; } if (y + radius > esRender.getyMax()) { speedY = -speedY; y = esRender.getyMax() - radius; this.jumlah_pantulan+=1; } else if (y - radius < esRen- der.getyMin()) { speedY = -speedY; y = esRender.getyMin() + radius; this.jumlah_pantulan+=1; } // pengkondisian penghitungan pantulan mulai dari nol if(Run_Mode==0){ this.jumlah_pantulan-=4;

386

this.Run_Mode=1; } } public void set(int x, int y, int width, int height) { xMin = x; // xMax = x + width - 1; xMax = x + width; yMin = y; // yMax = y + height - 1; yMax = y + height; } }

ESSurfaceView.java

package com.blending;

import android.content.Context; import android.opengl.GLSurfaceView; import android.util.Log; import android.view.KeyEvent; import android.view.MotionEvent;

private final ESRender esRender; private float previousX; private float previousY;

public ESSurfaceView(Context context) { super(context);

// Set the Renderer for drawing on the GLSur- faceView esRender = new ESRender(context); setRenderer(esRender);

// To enable keypad this.setFocusable(true); this.requestFocus();

// To enable touch mode this.setFocusableInTouchMode(true);

// Render the view only when there is a change in the drawing data // merender hanya ketika ada perubahan/ event

387

//setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY); }

//private final float TOUCH_SCALE_FACTOR = getWidth() / getHeight(); private float mPreviousX; private float mPreviousY;

float currentX = v.getX(); float currentY = v.getY(); float deltaX, deltaY;

//float scalingFactor = 0.50f / ((esRen- der.xMax > esRender.yMax) ? esRender.yMax //: esRender.xMax);

//esRender.setspeedX(esRender.getspeedX()+ (del- taX/getWidth()));

//esRender.setspeedY(esRender.getspeedY()+ (del- taY/getHeight()));

esRen- der.setspeedX(esRender.getspeedX()+ deltaX/100); esRen-

388

der.setspeedY(esRender.getspeedY()+ deltaY/100);

requestRender(); }

// Save current x, y previousX = currentX; previousY = currentY; return true; // Event handled //break; }

MainActivity.java

package com.blending;

389

import android.opengl.GLSurfaceView; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.Window; import android.view.WindowManager; public class MainActivity extends Activity {

/** The OpenGL view */ private GLSurfaceView glSurfaceView;

@Override protected void onCreate(Bundle savedInstanceS- tate) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main);

// requesting to turn the title OFF requestWindowFeature(Window.FEATURE_NO_TITLE); // making it full screen getWin- dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCR EEN, WindowManag- er.LayoutParams.FLAG_FULLSCREEN);

// Initiate the Open GL view and // create an instance with this activity glSurfaceView = new ESSurfaceView(this);

// set our renderer to be the main renderer with // the current activity context //glSurfaceView.setRenderer(new ESRender()); setContentView(glSurfaceView); }

/** * Remember to resume the glSurface */ @Override protected void onResume() { super.onResume(); glSurfaceView.onResume(); }

/** * Also pause the glSurface */ @Override protected void onPause() { super.onPause(); glSurfaceView.onPause(); }

@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to

390

the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }

}

PrimitivesObject.java

package com.blending;

import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import javax.microedition.khronos.opengles.GL10; import android.opengl.GLES20;

public class PrimitivesObject {

private float vertices[] = { -0.5f, -0.5f, 0.0f, // V1 - first vertex

// (x,y,z) -0.5f, 0.5f, 0.0f, // V2 0.5f, 0.5f, 0.0f, // V3 0.5f, -0.5f, 0.0f, // V4 -0.5f, -0.5f, 0.0f // V5 };

private float[] vertices_quad = { // Vertices for the square -1.0f, -1.0f, 0.0f, // 0. left-bottom 1.0f, -1.0f, 0.0f, // 1. right- bottom -1.0f, 1.0f, 0.0f, // 2. left-top 1.0f, 1.0f, 0.0f // 3. right-top };

private float vertices_color[] = { 1.0f, 0.0f, 0.0f, 1.0f, // CV1 - first

// color

// (red,green,blue) 0.0f, 1.0f, 0.0f, 1.0f, // CV2 0.0f, 0.0f, 1.0f, 1.0f, // CV3 0.0f, 1.0f, 0.0f, 1.0f, // CV4 1.0f, 0.0f, 0.0f, 1.0f // CV5 };

391

private float vertices_circle[] = { 0.0f, 0.0f, 0.0f }; private float vertices_circle_color[] = { 0.0f, 0.0f, 0.0f, 0.5f }; private float vertices_line[] = { 0.0f, 0.0f, 0.0f }; private float vertices_line_color[] = { 0.0f, 0.0f, 0.0f, 1.0f }; private int batas_sudut = 360; float jari_jari; float a, b; float x, y; float step = 3.0f, step_line = 0.2f; float x1, y1; float x2, y2; private int loop, loop_color, loop_line, loop_line_color;

public PrimitivesObject() {

// ======start to generate vertices to circle // ======// Inisialisasi jari_jari = 1.0f;

// Titik Pusat a = 0.0f; b = 0.0f; x = a + jari_jari; y = b;

loop = 3; loop_color = 4; vertices_circle = new float[(int) (3 * batas_sudut / step) * 3]; vertices_circle_color = new float[(int) (3 * batas_sudut / step) * 4]; for (float teta = 0; teta <= 2 * ba- tas_sudut; teta += step) { vertices_circle[loop] = (float) ((x - a) * Math.cos((teta / 180) * (22 / 7)) - ((y - b) * Math.sin((teta / 180) * (22 / 7))) + a); vertices_circle[loop + 1] = (float) ((x - a) * Math.sin((teta / 180) * (22 / 7)) - ((y - b) * Math.cos((teta / 180) * (22 / 7))) + b); vertices_circle[loop + 2] = 0; loop += 3;

// mengenerate warna untuk setiap vertex vertices_circle_color[loop_color]

392

= (float) ((x - a) * Math.cos((teta / 180) * (22 / 7)) - ((y - b) * Math.sin((teta / 180) * (22 / 7))) + a); vertices_circle_color[loop_color + 1] = (float) ((x - a) * Math.sin((teta / 180) * (22 / 7)) - ((y - b) * Math.cos((teta / 180) * (22 / 7))) + b); vertices_circle_color[loop_color + 2] = 0.5f; vertices_circle_color[loop_color + 3] = 0.5f; loop_color += 4; } // ======end for generate vertices to circle // ======

// ======start to generate vertices to line // ======x1 = -1.0f; y1 = -1.0f; x2 = 1.0f; y2 = 1.0f;

loop_line = 3; loop_line_color = 4; vertices_line = new float[(int) (2 * (x2 - x1) / step_line) * 3]; vertices_line_color = new float[(int) (2 * (x2 - x1) / step_line) * 4];

float m = (y2 - y1) / (x2 - x1); for (x = x1; x <= x2; x += step_line) { vertices_line[loop_line] = (float) (x); vertices_line[loop_line + 1] = (float) (m * (x - x1) + y1); vertices_line[loop_line + 2] = 0; loop_line += 3;

// mengenerate warna untuk setiap vertex verti- ces_line_color[loop_line_color] = (float) (0.5 * x); verti- ces_line_color[loop_line_color + 1] = (float) (0.5 * m * (x - x1) + y1); verti- ces_line_color[loop_line_color + 2] = 1.0f; verti- ces_line_color[loop_line_color + 3] = 1.0f; loop_line_color += 4; } // ======end for generate verti-

393

ces to line ======}

// Point to our vertex buffer, return buffer holding the vertices public static FloatBuffer makeFloatBuffer(float[] arr) { ByteBuffer bb = ByteBuff- er.allocateDirect(arr.length * 4); bb.order(ByteOrder.nativeOrder()); FloatBuffer fb = bb.asFloatBuffer(); fb.put(arr); fb.position(0); return fb; }

/** The draw method for the primitive object with the GL context */ public void draw_points(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); // gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour for the points (pemberian warna untuk titik) gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);

// Point to our vertex buffer (mendata nilai lokasi/posisi titik) gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(new float[] { 1.0f, 1.0f, 0.0f, // V1 - first vertex (x,y,z) 1.0f, 0.8f, 0.0f, // V2 1.0f, 0.6f, 0.0f, // V3 1.0f, 0.4f, 0.0f, // V4 1.0f, 0.2f, 0.0f, // V5 1.0f, 0.0f, 0.0f, // V6 1.0f, -0.2f, 0.0f, // V7 1.0f, -0.4f, 0.0f, // V8 1.0f, -0.6f, 0.0f, // V9 1.0f, -0.8f, 0.0f, // V10 1.0f, -1.0f, 0.0f, // V11

0.8f, -1.0f, 0.0f, // V12 0.6f, -1.0f, 0.0f, // V13 0.4f, -1.0f, 0.0f, // V14 0.2f, -1.0f, 0.0f, // V15 0.0f, -1.0f, 0.0f, // V16 -0.2f, -1.0f, 0.0f, // V17 -0.4f, -1.0f, 0.0f, // V18 -0.6f, -1.0f, 0.0f, // V19 -0.7f, -1.0f, 0.0f, // V20 -0.8f, -1.0f, 0.0f, // V21 -1.0f, -1.0f, 0.0f, // V22 }));

394

// Draw the vertices as points (menggambar titik-titik) gl.glDrawArrays(GL10.GL_POINTS, 0, 22);

// Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); // gl.glDisableClientState(GL10.GL_COLOR_ARRAY);

}

public void draw_line(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); // gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour for the line (pemberian warna untuk garis) gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);

// Point to our vertex buffer (mendata nilai lokasi/posisi titik yang // menyusun garis) gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(new float[] { 1.0f, 1.0f, 0.0f, // V1 - first vertex (x,y,z) -1.0f, -1.0f, 0.0f, // V2 - second vertex }));

// Draw the vertices as lines (menggambar garis dari titik-titik) gl.glDrawArrays(GL10.GL_LINES, 0, 2); /* * gl.glDrawElements(GL10.GL_LINES, 2, GL10.GL_UNSIGNED_SHORT, * makeFloatBuffer(new float [] { 1.0f, 1.0f, 0.0f, // V1 - first vertex * (x,y,z) -1.0f, -1.0f, 0.0f, // V2 - second vertex })); */

// Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); // gl.glDisableClientState(GL10.GL_COLOR_ARRAY);

}

public void draw_line_color(GL10 gl) {

395

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour for the line (pemberian warna untuk garis) gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);

// Point to our vertex buffer (mendata nilai lokasi/posisi titik yang // menyusun garis) gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_line));

// memetakan warna untuk setiap vertex gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuff- er(vertices_line_color));

// Draw the vertices as lines (menggambar garis dari titik-titik) gl.glDrawArrays(GL10.GL_LINE_STRIP, 0, (int) (2 * (x2 - x1) / step_line)); /* * gl.glDrawElements(GL10.GL_LINES, 2, GL10.GL_UNSIGNED_SHORT, * makeFloatBuffer(new float [] { 1.0f, 1.0f, 0.0f, // V1 - first vertex * (x,y,z) -1.0f, -1.0f, 0.0f, // V2 - second vertex })); */

// Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_COLOR_ARRAY);

}

public void draw_circle(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); // gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour for the object circle gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);

// create VBO from buffer with glBuffer- Data() gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuff- er(vertices_circle));

// draw circle as filled shape // gl.glDrawArrays(GL10.GL_TRIANGLE_FAN,

396

1, (int) ((int) // 2*batas_sudut/step));

// draw circle contours // gl.glDrawArrays(GL10.GL_LINES, 1, (int) ((int) 2*batas_sudut/step)); // // membuat garis putus-putus pada tepi lingkaran gl.glDrawArrays(GL10.GL_LINES, 1, (int) ((int) 2 * batas_sudut / step)); // gl.glDrawArrays(GL10.GL_LINE_STRIP, 1, (int) ((int) // 2*batas_sudut/step)); // gl.glDrawArrays(GL10.GL_POINTS, 1, (int) ((int) 2*batas_sudut/step));

// Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); // gl.glDisableClientState(GL10.GL_COLOR_ARRAY); }

public void draw_circle_color(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour edge for the object circle gl.glColor4f(0.0f, 0.0f, 1.0f, 1.0f);

// create VBO from buffer with glBuffer- Data() gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuff- er(vertices_circle));

// memetakan warna untuk setiap vertex gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuff- er(vertices_circle_color));

// draw circle as filled shape // gl.glDrawArrays(GL10.GL_TRIANGLE_FAN, 1, (int) ((int) // 2*batas_sudut/step)); gl.glDrawArrays(GL10.GL_LINE_STRIP, 1, (int) ((int) 2 * ba- tas_sudut / step));

// Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_COLOR_ARRAY);

397

}

public void draw_kotak(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// Point to our vertex buffer gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices));

// Draw the vertices as square gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_color)); gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);

gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_color)); gl.glDrawArrays(GL10.GL_TRIANGLES, 2, 3);

// Disable the client state before leaving

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_COLOR_ARRAY);

}

public void draw_segitiga(GL10 gl) {

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);

gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

// set the colour for the triangle gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f);

gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(new float[] { -0.5f, -0.5f, 0.0f, // V1 - first vertex (x,y,z) 0.5f, -0.5f, 0.0f, // V2 - second vertex 0.0f, 0.5f, 0.0f // V3 - third vertex

}));

// Draw the vertices as triangle gl.glColorPointer(4, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_color)); gl.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);

// Disable the client state before leaving

398

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

gl.glDisableClientState(GL10.GL_COLOR_ARRAY);

}

// Render the shape quad public void draw_quad(GL10 gl) { // Enable vertex-array and define its buffer

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glVertexPointer(3, GL10.GL_FLOAT, 0, makeFloatBuffer(vertices_quad)); // Draw the primitives from the vertex- array directly gl.glPolygonOffset(0.0f, 1.0f); gl.glScalef(0.5f, 0.5f, 0.5f); gl.glColor4f(0.5f, 0.5f, 1.0f, 1.0f); // Set the current color (NEW) gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, vertices_quad.length / 3); //gl.glDrawArrays(GL10.GL_TRIANGLES, 0, vertices_quad.length / 3); //gl.glDrawArrays(GL10.GL_LINES, 0, ver- tices_quad.length / 3);

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); }

}

Gambar 6.2 Blending Dua Segitiga

399

6.5 Blending Pada Kubus

Source Code 6.2 Code Blending Pada Kubus

ESRender.java

package com.blending;

import java.io.IOException;

import javax.microedition.khronos.egl.EGLConfig; import javax.microedition.khronos.opengles.GL10;

import android.content.Context; //import android.opengl.GLU; import android.opengl.GLSurfaceView.Renderer; import android.opengl.GLU;

public class ESRender implements Renderer {

private Context context; // Application context needed to read image (NEW) private TextureKubus kubus;

int RunMode = 1; float CurrentAngle = 0.0f; // Angle in degrees float AnimateStep = 2.0f; // Rotation step per update

// Lighting boolean lightingEnabled = false; private float[] lightAmbient = { 0.5f, 0.5f, 0.5f, 1.0f }; private float[] lightDiffuse = { 1.0f, 1.0f, 1.0f, 1.0f }; private float[] lightPosition = { 0.0f, 0.0f, 2.0f, 1.0f };

// Blending (NEW) boolean blendingEnabled = false; // Is blending on? (NEW)

/** Constructor to set the handed over context */ public ESRender(Context context) { this.context = context; // Get the application context (NEW) kubus = new TextureKubus(); }

@Override public void onDrawFrame(GL10 gl) { // clear Screen and Depth Buffer // gl.glClearColor(1.0f, 1.0f, 1.0f, 1.0f); // set background dgn warna // putih

400

// gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // set background dgn warna // hitam gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

// Enable lighting? if (lightingEnabled) { gl.glEnable(GL10.GL_LIGHTING); } else { gl.glDisable(GL10.GL_LIGHTING); }

// Blending Enabled? (NEW) if (blendingEnabled) { gl.glEnable(GL10.GL_BLEND); // Turn blending on (NEW) gl.glDisable(GL10.GL_DEPTH_TEST); // Turn depth testing off (NEW) } else { gl.glDisable(GL10.GL_BLEND); // Turn blending off (NEW) gl.glEnable(GL10.GL_DEPTH_TEST); // Turn depth testing on (NEW) }

//gl.glLoadIdentity();

// ----- Render the Kubus ----- gl.glPushMatrix(); gl.glTranslatef(0.0f, 0.9f, - 5.0f); // gl.glTranslatef(0.0f, 0.0f, - 6.0f); // Translate into the screen gl.glRotatef(CurrentAngle, 0.1f, 1.0f, 0.2f); // Rotate // gl.glRotatef(CurrentAngle, 1.0f, 1.0f, 1.0f ); gl.glTranslatef(-0.5f, -0.5f, - 0.5f); //gl.glScalef(0.5f, 0.5f, 0.5f); kubus.draw(gl); gl.glPopMatrix();

// Update the rotational angle after each refresh if (RunMode == 1) { // re-Calculate animation parame- ters CurrentAngle += AnimateStep; if (CurrentAngle > 360.0) { // CurrentAngle -= 360.0*Math.floor(CurrentAngle/360.0); CurrentAngle = 0.0f; CurrentAngle += Ani- mateStep; } }

401

}

@Override public void onSurfaceChanged(GL10 gl, int width, int height) {

if (height == 0) height = 1; // To prevent divide by zero float aspect = (float) width / height;

// Set the viewport (display area) to cover the entire window gl.glViewport(0, 0, width, height);

// Setup perspective projection, with aspect ratio matches viewport gl.glMatrixMode(GL10.GL_PROJECTION); // Select projection matrix gl.glLoadIdentity(); // Reset projection matrix

// Use perspective projection GLU.gluPerspective(gl, 45, aspect, 0.1f, 100.f); // gl.glOrthof(-3.0f, 3.0f, -3.0f, 3.0f, -3.0f, 3.0f); gl.glMatrixMode(GL10.GL_MODELVIEW); // Select model-view matrix gl.glLoadIdentity(); // Reset

}

@Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { gl.glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // Set color's clear-value to

// Setup Texture, each time the surface

402

is created (NEW) kubus.loadTexture(gl, context); gl.glEnable(GL10.GL_TEXTURE_2D); // Ena- ble texture (NEW)

// Setup lighting GL_LIGHT1 with ambient and diffuse lights gl.glLightfv(GL10.GL_LIGHT1, GL10.GL_AMBIENT, lightAmbient, 0); gl.glLightfv(GL10.GL_LIGHT1, GL10.GL_DIFFUSE, lightDiffuse, 0); gl.glLightfv(GL10.GL_LIGHT1, GL10.GL_POSITION, lightPosition, 0); gl.glEnable(GL10.GL_LIGHT1); // Enable Light 1 gl.glEnable(GL10.GL_LIGHT0); // Enable the default Light 0

// Setup Blending (NEW) gl.glColor4f(1.0f, 1.0f, 1.0f, 0.5f); // Full brightness, 50% alpha (NEW) gl.glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE); // Select blending function (NEW) }

public int getRunMode() { return RunMode; }

public void setRunMode(int mRunMode) { RunMode = mRunMode; }

public float getAnimateStep() { return AnimateStep; }

public void setAnimateStep(float mAnimateStep) { AnimateStep = mAnimateStep; }

}

ESSurfaceView.java

package com.blending;

import android.content.Context; import android.opengl.GLSurfaceView; import android.util.Log; import android.view.KeyEvent; import android.view.MotionEvent;

403

/** * A view container where OpenGL ES graphics can be drawn on screen. This view * can also be used to capture touch events, such as a user interacting with * drawn objects. */ public class ESSurfaceView extends GLSurfaceView {

private final ESRender esRender;

public ESSurfaceView(Context context) { super(context);

// Set the Renderer for drawing on the GLSurfaceView esRender = new ESRender(context); setRenderer(esRender);

// To enable keypad this.setFocusable(true); this.requestFocus();

// To enable touch mode this.setFocusableInTouchMode(true);

// Render the view only when there is a change in the drawing data // merender hanya ketika ada perubahan/ event // setRender- Mode(GLSurfaceView.RENDERMODE_WHEN_DIRTY); }

private float mPreviousX; private float mPreviousY;

float x = v.getX(); float y = v.getY();

switch (v.getAction()) {

case MotionEvent.ACTION_DOWN: Log.v("Test Action Down", "action down working"); break; // case MotionEvent.ACTION_POINTER_UP: // Log.v("Test Action ACTION_POINTER_UP", "action working"); // requestRender();

404

// case MotionEvent.ACTION_MOVE: // Log.v("Test Action ACTION_POINTER_DOWN", "action working"); // requestRender(); // case MotionEvent.ACTION_UP: // Log.v("Test Action Up", "action up working"); // requestRender(); case MotionEvent.ACTION_MOVE: Log.v("Test Action move", "action down working"); float dx = (x - mPreviousX); float dy = (y - mPreviousY); mPreviousX = x; mPreviousY = y;

esRender.blendingEnabled = !esRen- der.blendingEnabled;

requestRender(); }

return true; }

// Key-up event handler @Override public boolean onKeyUp(int keyCode, KeyEvent event) { float x=getHeight();

switch (keyCode) { case KeyEvent.KEYCODE_DPAD_RIGHT: // In- crease rightward speed Log.v("Test Action KEYCODE_DPAD_RIGHT", "action working"); requestRender(); break; case KeyEvent.KEYCODE_DPAD_LEFT: // In- crease leftward speed requestRender(); break; case KeyEvent.KEYCODE_DPAD_UP: // In- crease upward speed break; case KeyEvent.KEYCODE_DPAD_DOWN: // In- crease downward speed break; case KeyEvent.KEYCODE_DPAD_CENTER: // Stop break; case KeyEvent.KEYCODE_B: // enable blending Log.v("Test Action B", "action working"); esRender.blendingEnabled = !esRen- der.blendingEnabled; requestRender(); break;

405

} return true; // Event handled } }

MainActivity.java

package com.blending;

import android.opengl.GLSurfaceView; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.Window; import android.view.WindowManager;

public class MainActivity extends Activity {

/** The OpenGL view */ private GLSurfaceView glSurfaceView;

@Override protected void onCreate(Bundle savedInstanceS- tate) { super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main);

// requesting to turn the title OFF requestWindowFeature(Window.FEATURE_NO_TITLE); // making it full screen getWin- dow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCR EEN, WindowManag- er.LayoutParams.FLAG_FULLSCREEN);

// Initiate the Open GL view and // create an instance with this activity glSurfaceView = new ESSurfaceView(this);

// set our renderer to be the main renderer with // the current activity context //glSurfaceView.setRenderer(new ESRender()); setContentView(glSurfaceView); }

/** * Remember to resume the glSurface */ @Override protected void onResume() { super.onResume();

406

glSurfaceView.onResume(); }

/** * Also pause the glSurface */ @Override protected void onPause() { super.onPause(); glSurfaceView.onPause(); }

@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }

}

TextureKubus.java

package com.blending;

import java.io.IOException; import java.io.InputStream; import java.nio.ByteBuffer; import java.nio.ByteOrder; import java.nio.FloatBuffer; import javax.microedition.khronos.opengles.GL10; import android.content.Context; import android.content.res.AssetManager; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.opengl.GLUtils;

407

face -1.0f, -1.0f, 0.0f, // 0. left- bottom-front 1.0f, -1.0f, 0.0f, // 1. right- bottom-front -1.0f, 1.0f, 0.0f, // 2. left-top- front 1.0f, 1.0f, 0.0f // 3. right-top- front }; float[] texCoords = { // Texture coords for the above face (NEW) 0.0f, 1.0f, // A. left-bottom (NEW) 1.0f, 1.0f, // B. right-bottom (NEW) 0.0f, 0.0f, // C. left-top (NEW) 1.0f, 0.0f // D. right-top (NEW) }; int[] textureIDs = new int[1]; // Array for 1 texture-ID (NEW)

// Constructor - Set up the buffers

}

// Draw the shape public void draw(GL10 gl) { gl.glFrontFace(GL10.GL_CCW); // Front face in counter-clockwise

// orientation //gl.glEnable(GL10.GL_CULL_FACE); // Ena- ble cull face / disable transparan object gl.glCullFace(GL10.GL_BACK); // Cull the back face (don't display)

408

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer);

gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRA Y); // Enable

// texture-coords-array

// (NEW) gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, texBuffer); // Define

// texture-coords

// buffer (NEW) // front gl.glPushMatrix(); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// left gl.glPushMatrix(); gl.glRotatef(270.0f, 0.0f, 1.0f, 0.0f); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// back gl.glPushMatrix(); gl.glRotatef(180.0f, 0.0f, 1.0f, 0.0f); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// right gl.glPushMatrix(); gl.glRotatef(90.0f, 0.0f, 1.0f, 0.0f); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// top gl.glPushMatrix(); gl.glRotatef(270.0f, 1.0f, 0.0f, 0.0f); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

// bottom

409

gl.glPushMatrix(); gl.glRotatef(90.0f, 1.0f, 0.0f, 0.0f); gl.glTranslatef(0.0f, 0.0f, 1.0f); gl.glDrawArrays(GL10.GL_TRIANGLE_STRIP, 0, 4); gl.glPopMatrix();

gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARR AY); // Disable

// texture-coords-array

// (NEW)

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); //gl.glDisable(GL10.GL_CULL_FACE); }

// Build Texture from loaded bitmap for

410

the currently-bind texture ID GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0); bitmap.recycle(); } }

Gambar 6.3 Blending Pada Kubus (Blending tidak terlihat jika belum ada gerakan sentuhan ke sembarang arah pada layarnya) 6.6 Blending Pada Bola

Source Code 6.3 Code Blending Pada Bola

ESRender.java

package com.blending;

public class ESRender implements Renderer {

/** Tilt the spheres a little. */ private static final int AXIAL_TILT_DEGRESS = 30;

411