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, we want to be able to modify shader parameters in realtime.
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 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;Important notes:
- Make sure to see the introductory sample Custom RenderNode - Color modification first.
- This sample shows experimental functionality, please read the documentation carefully before using it in a product.
- This sample targets expert developers familiar with WebGL and hardware-accelerated 3D rendering.