Advantages/disadvantages of using WebGL2

Questions
7

Here’s my code for setting this up BTW:


const canvas = document.createElement( 'canvas' );
let context;

 if ( WEBGL.isWebGL2Available() ) {

     context = canvas.getContext( 'webgl2', { antialias: false } ); // disable AA if using post-processing

} else {

     context = canvas.getContext( 'webgl', { antialias: false } );

}

const renderer = new WebGLRenderer( { canvas, context } );

let composer;
if ( renderer.capabilities.isWebGL2 ) {

  const size = renderer.getDrawingBufferSize( new Vector2() );
    
   const parameters = {
      format: RGBFormat,
      stencilBuffer: false,
   };

   const renderTarget = new WebGLMultisampleRenderTarget( size.width, size.height, parameters );
   renderTarget.samples = 8; //default is 4 but to match the built-in AA quality 8 or 16 samples is needed

   composer = new EffectComposer( renderer, renderTarget );

} else {

   composer = new EffectComposer( renderer );
}

EDIT: I’m doing a bit more testing with this, and in general it seems to be working well.
However, for passes that create their own render targets internally (e.g. Outline), those also need to be converted to WebGLMultisampleRenderTarget, otherwise the main scene will have AA, but the post effect will not.

EDIT2: I asked over on the Khronos forum. As expected, there’s no magic solution here, however it should be OK to render once to a WebGLMultisampleRenderTarget at the start and then immediately downsample. That would save a bunch of memory and means you only need one multisample target. All the post effects can be done on a normal render target.

3 Likes