09 Drawing in several passes
Post-processing: draw the scene, then treat the image
Drag grayscale to fade the whole rendered picture.
01
Exercise
Drag the underlined numbers left and rightDrag numbers, or edit the code
// pass 1: draw into a texturerenderer.setRenderTarget(target);renderer.render(scene, camera);// pass 2: a full-screen shader processes the coloursfloat gray = dot(color, vec3(0.2126, 0.7152, 0.0722));color = mix(color, vec3(gray), );
Post-processingThe input is the whole rendered image, not one object.JS side
Post-processing: draw the scene into a texture first, then process that image with a full-screen fragment shader.
Try it
- Drag grayscale to 1
- Think it through: a blur reads surrounding pixels — why does that need two passes?