Showing latest posts tagged in "Javascript"

Top Facebook Twitter Comments

Shdr - Online GLSL shader editor, viewer and validator

Today I'm finally releasing Shdr, a side project I've been working on for a few months that has been sitting in my GitHub for a while.

Shdr is an online GLSL (ESSL) shader editor, viewer and validator written in CoffeeScript/WebGL that I decided to code while working on HexGL. Indeed, I've been looking for a tool to help me quickly iterate over shader development and didn't find any that would fit my needs.

Head past after the break for the full release notes, info and screenshots.

Read more
Top Facebook Twitter Comments

HexGL's source code is now on GitHub!

Yup, you read it right, HexGL's source code is now available on GitHub.

Go check the code out on HexGL's GitHub page, and feel free to submit suggestions, patches or issues!

Read more
Top Facebook Twitter Comments

A quick Performance.now() polyfill

(function(w){
	var perfNow;
	var perfNowNames = ['now', 'webkitNow', 'msNow', 'mozNow'];
	if(!!w['performance']) for(var i = 0; i < perfNowNames.length; ++i)
	{
		var n = perfNowNames[i];
		if(!!w['performance'][n])
		{
			perfNow = function(){return w['performance'][n]()};
			break;
		}
	}
	if(!perfNow)
	{
		perfNow = Date.now;
	}
	w.perfNow = perfNow;
})(window);

// Usage
console.log(window.perfNow());

Just a quick performance.now() polyfill since the ones I found were producing "Illegal invocation" errors. This polyfill wraps the performance call inside a function to avoid this.

Performance.now() polyfill on GIST

Read more
Top Facebook Twitter Comments

(WebGL) Volumetric Light Approximation in Three.js

This article will be covering the technique behind the volumetric light approximation (VLA) aka godrays I used in my latest OpenGL project to simulate sun shafts, but this time in WebGL, with a point light.

Check out the demo and the code after the break.

Read more
Top Facebook Twitter Comments

(WebGL) A RenderManager to handle multiple setups

After experimenting more with Three.js, and working with more complex scenes and setups, I recently felt the need of a structured manager to handle multiple scenes, cameras and render loops.

Indeed, working with more than one scene/camera/render setup can quickly become messy, juggling with many variables for each setup.

To counter this, I developped a tiny Three.js extension: THREE.Extras.RenderManager. Head past after the break to download and learn more about it.

Read more
Top Facebook Twitter Comments

(WebGL) Animated selective glow in Three.js

This time I'm going to explain a way to make specific parts of your 3D object glow, and how to animate those. For this I'll be using THREE.EffectComposer to render the glow passes.

Check out the demo and the code after the break.

Read more
Top Facebook Twitter Comments

(WebGL) Max to Three.js workflow tips and tricks

Ever since I started working with the WebGL technology, I've been trying out a few frameworks like SpiderGL and SceneJS.

Most recently, I've been giving a try to Three.js, and it is by far the best WebGL framework I've ever tested. So as I'm advancing on my learning of this framework, I'll be giving out on this blog a few tips and tricks that I found useful when using Three.js. The first one being an advice on the Max-to-Three.js workflow, readable after the break.

Read more
Top Facebook Twitter Comments

(JS) Scroll animation with custom jScrollPane plugin

jScrollPane is a jQuery plugin written by Kelvin Luck that "converts a browser's default scrollbars into an HTML structure which can be easily skinned with CSS". It is a great peace of code I had the opportunity to work on during my recent projects, but it still lacks a bit of fanciness, particularly on scrolling animations.

This is why I came up with this custom version of the plugin, adding support for mousewheel and keyboard scroll animations.

Read more
End of items timeline.