This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about 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! :)
To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”
Show Don’t Tell
[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.
How To Install It
You can install it via script tag
Or you can install with bower, as you wish.
How To Use It
It build the passes for the color effect.
colorPass.colorPass for a
Create an instance
Everytime you render the scene, be sure to update it
Then you add those passes to an
THREE.EffectComposer like that
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
Here is the full list of available colors adjustement : default,
There is a smooth linear transition between the old colorCube and the new colorCube. You can tune the delay like this.