threex.coloradjust

threex.coloradjust is a threex game extension for three.js. It provides a color adjustement in post processing. It happens on the whole screen and changes every colors giving a whole new ambiance to your games. It includes smooth transitions between each ambiance. There are 22 ambiances going from 'sepia', to 'thermal', or 'radioactive'. I highly recommend 'nightvision' if your game is about fps shooting at night! It is very flexible, you can build your own ambiance with any image editing software. It is ported from color-adjust demo by greggman. Here is a video where you can see greggman explaining the underlying technic. It explains how to do 3d texture in webgl! :)

Show Don't Tell

• examples/basic.html [view source] : It shows how to use the THREEx.ColorAdjust.Renderer. It changes the color cube randomly every 3-seconds just to put some animations
• examples/demo.html [view source] : It show an video with the adjusted colors. You can play with it to get a better feeling of what this effect can do for you.

A Screenshot

How To Install It

You can install it via script tag

<script src='threex.coloradjust.js'></script>

Or you can install with bower, as you wish.

bower install threex.coloradjust

How To Use It

It build the passes for the color effect. It exposes colorPass.colorPass for a THREE.EffectComposer instance.

Create an instance

var colorPasses	= new THREEx.ColorAdjust.Passes();

Everytime you render the scene, be sure to update it

colorPasses.update(delta, now)		

Then you add those passes to an THREE.EffectComposer like that

colorPasses.addPassesTo(composer)

Tuning

This module comes with a set of predefined color cubes : 22 of them to be exact. You can set the color cube you want: one of the 22 already provided, or your own. It default to default. Here is the full list of available colors adjustement : default, monochrome, sepia, saturated, posterize, inverse, color-negative, high-contrast-bw, funky-contrast, nightvision, thermal, black-white, hue-plus-60, hue-plus-180, hue-minus-60, red-to-cyan, blues, infrared, radioactive, goolgey, bgy.

// set color adjustement to 'nightvision'
colorPasses.setColorCube('nightvision')

There is a smooth linear transition between the old colorCube and the new colorCube. You can tune the delay like this.

// set the transition delay to 2 seconds
colorPasses.delay	= 2;