«
»

Resurrecting the Blog

I loose count on how many times I’ve trying to resurrect my blog.
I wanted to do a propper devlog like all those amazing blogs I’m suscribed (I should make a post about them), but when I’m very active at coding I do not feel very communicative to write about it, so here we go again.

I plan to write at least once a week to explain how some of my projects are going and to share all those annoying bugs or problems I had discovered and which solutions did I use.

And as I always do, I cleaned my wordpress theme so at least it will help me find the strength to write.

I did a small WebGL widget to make it more interesting, I plan to do more silly 3d widgets over the time.
This one is tiny in code, and it shouldnt take too much resources (it only gets executed when the tab is visible).
I used the library lightgl to simplify the code.
Lightgl is a tiny javascript library to wrap some of the WebGL funcionalities in a more friendly code. It helps to upload textures and meshes, compile shaders and it comes with the mathematical operations common to 3D.

Check the code to make the example above

function launch3D()
{
	var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
 
	var angle = 0;
	var is_mouse_over = false;
	var scale = 1.0;
	var gl = GL.create();
	gl.clearColor(0.9,0.9,0.9,1.0);
 
	var mesh = GL.Mesh.cube();
	var shader = new GL.Shader('\
	  varying vec2 coord;\
	  void main() {\
		coord = gl_TexCoord.xy;\
		gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
	  }\
	', '\
	uniform sampler2D texture;\
    varying vec2 coord;\
	uniform vec3 u_color;\
	uniform float u_usetex;\
	void main() {\
		gl_FragColor = vec4(0.7, 0.7, 0.7, 1.0);\
		vec3 color = u_color + vec3(1.0 - gl_FragCoord.x/256.0,1.0 - gl_FragCoord.y/256.0,1.0);\
		if(u_usetex == 1.0)\
			color *= texture2D(texture,  gl_FragCoord.xy / 4.0 ).xyz;\
		gl_FragColor = vec4( color,1.0);\
	}\
	');
	var texture = GL.Texture.fromURL('data/pattern4.png', {wrap: gl.REPEAT, filter: gl.NEAREST });
 
	gl.onupdate = function(seconds) {
	  angle += 20 * seconds;
	  scale = scale * 0.9 + 0.1;
	};
 
	gl.ondraw = function() {
	  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
	  gl.loadIdentity();
	  gl.translate(0, 0, -5);
 
	  texture.bind(0);
	  gl.scale(scale,scale,scale);
 
	  //bg
	  gl.pushMatrix();
	  gl.rotate(45, 1, 0, 0);
	  gl.rotate(angle, 0, 1, 0);
	  shader.uniforms({ texture: 0, u_color: [2.0,2.0,2.0], u_usetex: is_chrome ? 0 : 1});
	  shader.draw(mesh);
 
	  gl.scale(0.9,0.9,0.9);
	  shader.uniforms({ texture: 0, u_color: [0.0,0.0,0.0], u_usetex: is_chrome ? 0 : 1});
	  shader.draw(mesh);
	  gl.popMatrix();
 
	};
 
	//set size
	$("#bgwidget").append( gl.canvas );
	  gl.canvas.width = 256;
	  gl.canvas.height = 256;
	  var options = {};
	  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
	gl.matrixMode(gl.PROJECTION);
	gl.loadIdentity();
	gl.perspective(options.fov || 45, gl.canvas.width / gl.canvas.height,
	  options.near || 0.1, options.far || 1000);
 
	setInterval(function() {
		scale += 0.05;
	},1000);
 
	//gl.loadIdentity();
	//gl.ortho(-2,2,-2,2,-10,10);
 
	gl.matrixMode(gl.MODELVIEW);
	//gl.fullscreen();
	gl.animate();
 
}

Published at Monday, April 16th, 2012 @ 4:25 pm Category coding, development, graphics, webdevelopment
Comments feed RSS 2.0 Trackback Trackback

Leave a Reply


× 3 = twenty one