Menggabungkan WebGL Dalam HTML – Final

by

Pada modul ini kita akan bereksperimen membuat animasi yang keren. Contoh script di ambil dari github https://github.com/akella/webGLImageTransitions/blob/master/js/demo2.js

Untuk menggunakan animasi ini, kita cukup buka file js/shaders/fragment.glsl, lalu ubah menjadi code seperti berikut.

varying float vNoise;
varying vec2 vUv;
uniform sampler2D uImage;
uniform float time;
uniform float hoverState;

void main(){
	vec2 newUV = vUv;
	
	vec2 p = newUV;
	float x = hoverState;
	x = smoothstep(.0,1.0,(x*2.0+p.y-1.0));
	vec4 f = mix(
		texture2D(uImage, (p-.5)*(1.-x)+.5), 
		texture2D(uImage, (p-.5)*x+.5), 
		x);
	gl_FragColor = f;

	vec4 oceanView = texture2D(uImage, newUV);

	gl_FragColor = f;
	gl_FragColor.rgb += 0.06*vec3(vNoise);
}

Jika Anda jalankan, efeknya cukup keren.

Kesimpulan

Untuk menggabungkan WebGL dengan HTML, hal yang perlu diperhatikan adalah

  • Menyamakan dimensi WebGL dengan HTML.
  • Membuat custom scroll event listener karena jika menggunakan native listener, akan terjadi lagging.
  • Mendapatkan kordinat mouse dan gunakan pada raycaster.

Jika ketiga hal diatas sudah berhasil, maka selanjutnya adalah kreatifitas Anda dalam berkreasi membuat animasi-animasi keren.

Final File

File project final dapat di download disini https://drive.google.com/file/d/1t_rnnrijoOdFnKfBfDyEPfLspgkKl60z/view?usp=sharing

Semoga bermanfaat.

Sharing is caring:

Leave a Comment