This sample creates a depth of field (DoF) effect by implementing a custom RenderNode.
In addition to the initial setup in the introductory sample [Custom RenderNode - Color modification] (/sample-code/custom-render-node-color/), we want to be able to modify shader parameters in real time.
focus: sets the focus distance of the DoF effect. Can be controlled via slider, but also through click in scene.aperture: sets the aperture of the virtual camera, i.e. the spread of the DoF effect.
// user-controllable parameters let focus = 570; let aperture = 2.2;Beside the color textures, we also need the depth texture for the depth of field effect.
// get color and depth texture of current target const color = input.getTexture(); const depth = input.getTexture(this.gl.DEPTH_STENCIL_ATTACHMENT);Define uniform locations for the parameters and textures needed in the shader
// bind color and depth textures for access in shader programs gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, color.glName); gl.uniform1i(this.textureUniformLocation, 0); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, depth.glName); gl.uniform1i(this.depthTextureUniformLocation, 1); gl.activeTexture(gl.TEXTURE0); // Set up gl uniforms for access in shader programs gl.uniform1f(this.focusUniformLocation, focus); gl.uniform1f(this.apertureUniformLocation, aperture * 0.00001); gl.uniform2fv(this.nearFarUniformLocation, [this.camera.near, this.camera.far]);and access these in the fragment shader program
uniform sampler2D colorTex; uniform sampler2D depthTex; uniform float focus; uniform float aperture; uniform vec2 nearFar;