Three.js Post Processing
Post-Processing is the addition of image effects or filters to your entire scene. This can effect the style and simulate other visual effects on the scene. Some examples are applying a sepia tone, or animated static effect to the rendered scene, giving it the feel of an older television set. To achieve this in Three.js we utilize shaders to create these effects. The process involves creating an
EffectComposer and then chaining together the rendering and effects by adding passes to it. Passes are how we define the sequence of the rendering and effects occurring in the composer. There are different kinds of passes that achieve different results in the composer. I should also not that the classes and files used such as
EffectComposer and the built in passes are not technically part of Three.js, but can be found in the examples included with the library.
Three.js Lights and Cameras
Lights can really make the difference between a seemingly flat scene and a visual masterpiece. Think of any photo-realistic painting or photograph and then imagine it with poor lighting and the impact is just not the same. Cameras change the way we view our scenes altogether, think of the different types of lenses photographers use and how they can influence the perspective and depth of a photo. Lights do not work on all materials. Lights do work with
Three.js Custom Materials with ShaderMaterial
Three.js comes with many materials built in. All these materials drawn in WebGL utilize shaders. Shaders are small programs that run on the GPU written in GLSL. We can create our own custom materials in Three.js by writing our own shaders and passing them into a
ShaderMaterial, which we can then use in our scene.
Materials determine how the surface of our geometry is drawn in Three.js. If the Geometry is our skeleton, defining the shape, then the Material is our skin. There are a variety of different types of materials in Three.js all of which have different properties, like responding to lights, mapping textures, and adjusting opacity.Read more...
Geometry defines the shape of the objects we draw in Three.js. Geometry is made up of a collection of vertices and often faces which combine three vertices into a triangle face. You can create your own custom geometry by defining these vertices and faces yourself, but Three.js also has a variety of common shapes for you to access and set properties of built in.Read more...
Scripting SVG in Animate CC
Masking in GLSL
WebGL is complicated. Libraries like Three.js have made it more approachable but to do advanced effects you still need to understand the inner workings of WebGL, this includes GLSL shaders. Shaders are small programs that run on the GPU and they consist of two types, vertex shaders which draw the geometry and fragment shaders which draw the colors to present the final output.Read more...