Simple postprocessing in three.js

Instead of drawing all our scene directly into the screen, we render the whole scene in a texture, and then render this single texture to screen with a new mesh and shaders. That’s what postprocessing means.

There are already multiple examples and implementation in three.js.

Usually those implementation creates a new Scene with a Quad (a full screen plane) and an Orthographic camera and they support multiple passes.

I thought this may be overkill for my projects, so here’s my little light implementation.

Two main differences:

• Instead of using a Quad with 4 vertices, we’re going to use just 3. It might seems silly that will give us a performance boost, but it really does. Read here and here to find out more.
• We are not going to use a “camera”, we simply pass the values directly in clip-space coordinates. This will save some matrix multiplication in the vertex shader.
• We are not using any uvattribute, instead we use gl_FragCoord/resolution

Please note:

• Make sure to disable antialiasing when creating your WebGL context. Antialias will be performed just on the final framebuffer, so it won’t help us. Implement your own antialiasing in the postprocessing, I suggest you glsl-fxaa

Going further.

I’ve seen some clever techniques that using gl_VertexIDto draw our triangle without any attribute buffer. gl_VertexID is available in OpenGL ES 3.00, thus WebGL2, some links:

• https://www.reddit.com/r/gamedev/comments/2j17wk/a_slightly_faster_bufferless_vertex_shader_trick/
• https://web.archive.org/web/20140719063725/http://www.altdev.co/2011/08/08/interesting-vertex-shader-trick/
• https://gist.github.com/strangerintheq/27b8fc4e53432d8b9284364713ce8608