Capítulo 281 de 859

Chapter 281: WebGLRenderer

Core Idea

This renderer uses WebGL 2 to display scenes.

WebGL 1 is not supported since r163.

Key Concepts

  • autoClear : boolean: Whether the renderer should automatically clear its output before rendering a frame or not.
  • autoClearColor : boolean: If WebGLRenderer#autoClear set to true, whether the renderer should clear the color buffer or not.
  • autoClearDepth : boolean: If WebGLRenderer#autoClear set to true, whether the renderer should clear the depth buffer or not.
  • autoClearStencil : boolean: If WebGLRenderer#autoClear set to true, whether the renderer should clear the stencil buffer or not.
  • capabilities : WebGLRenderer~Capabilities: Holds details about the capabilities of the current rendering context.
  • clippingPlanes : Array.<Plane>: User-defined clipping planes specified in world space. These planes apply globally. Points in space whose dot product with the plane is neg…
  • coordinateSystem : WebGLCoordinateSystem | WebGPUCoordinateSystem (readonly): Defines the coordinate system of the renderer.
  • debug : Object: A object with debug configuration settings.
  • domElement : HTMLCanvasElement | OffscreenCanvas: A canvas where the renderer draws its output. This is automatically created by the renderer in the constructor (if not provided already); y…
  • extensions : Object: Provides methods for retrieving and testing WebGL extensions.

Reference Tables

Constructor

Signature
new WebGLRenderer( parameters : WebGLRenderer~Options )

Properties

PropertyDescription
.autoClear : booleanWhether the renderer should automatically clear its output before rendering a frame or not.
.autoClearColor : booleanIf WebGLRenderer#autoClear set to true, whether the renderer should clear the color buffer or not.
.autoClearDepth : booleanIf WebGLRenderer#autoClear set to true, whether the renderer should clear the depth buffer or not.
.autoClearStencil : booleanIf WebGLRenderer#autoClear set to true, whether the renderer should clear the stencil buffer or not.
.capabilities : WebGLRenderer~CapabilitiesHolds details about the capabilities of the current rendering context.
.clippingPlanes : Array.<Plane>User-defined clipping planes specified in world space. These planes apply globally. Points in space whose dot product with the plane is negative are cut away.
`.coordinateSystem : WebGLCoordinateSystemWebGPUCoordinateSystem (readonly)`
.debug : ObjectA object with debug configuration settings.
`.domElement : HTMLCanvasElementOffscreenCanvas`
.extensions : ObjectProvides methods for retrieving and testing WebGL extensions.
.info : WebGLRenderer~InfoHolds a series of statistical information about the GPU memory and the rendering process. Useful for debugging and monitoring.
.isWebGLRenderer : boolean (readonly)This flag can be used for type testing.
.localClippingEnabled : booleanWhether the renderer respects object-level clipping planes or not.
`.outputColorSpace : SRGBColorSpaceLinearSRGBColorSpace`
.properties : ObjectUsed to track properties of other objects like native WebGL objects.
.renderLists : ObjectManages the render lists of the renderer.
.shadowMap : WebGLRenderer~ShadowMapInterface for managing shadows.
.sortObjects : booleanWhether the renderer should sort objects or not.
.state : ObjectInterface for managing the WebGL state.
`.toneMapping : NoToneMappingLinearToneMapping
.toneMappingExposure : numberExposure level of tone mapping.
.transmissionResolutionScale : numberThe normalized resolution scale for the transmission render target, measured in percentage of viewport dimensions. Lowering this value can result in significant performance improvements when using [M…
.xr : WebXRManagerA reference to the XR manager.

Methods

MethodDescription
.clear( color : boolean, depth : boolean, stencil : boolean )Tells the renderer to clear its color, depth or stencil drawing buffer(s). This method initializes the buffers to the current clear color values.
.clearColor()Clears the color buffer. Equivalent to calling renderer.clear( true, false, false ).
.clearDepth()Clears the depth buffer. Equivalent to calling renderer.clear( false, true, false ).
.clearStencil()Clears the stencil buffer. Equivalent to calling renderer.clear( false, false, true ).
.compile( scene : Object3D, camera : Camera, targetScene : Scene ) : Set.<Material>Compiles all materials in the scene with the camera. This is useful to precompile shaders before the first rendering. If you want to add a 3D object to an existing scene, use the third optional param…
.compileAsync( scene : Object3D, camera : Camera, targetScene : Scene ) : Promise (async)Asynchronous version of WebGLRenderer#compile.
.copyFramebufferToTexture( texture : FramebufferTexture, position : Vector2, level : number )Copies pixels from the current bound framebuffer into the given texture.
`.copyTextureToTexture( srcTexture : Texture, dstTexture : Texture, srcRegion : Box2Box3, dstPosition : Vector2
.dispose()Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
.forceContextLoss()Simulates a loss of the WebGL context. This requires support for the WEBGL_lose_context extension.
.forceContextRestore()Simulates a restore of the WebGL context. This requires support for the WEBGL_lose_context extension.
.getActiveCubeFace() : numberReturns the active cube face.
.getActiveMipmapLevel() : numberReturns the active mipmap level.
.getClearAlpha() : numberReturns the clear alpha. Ranges within [0,1].
.getClearColor( target : Color ) : ColorReturns the clear color.
.getContext() : WebGL2RenderingContextReturns the rendering context.
.getContextAttributes() : WebGLContextAttributesReturns the rendering context attributes.
.getCurrentViewport( target : Vector2 ) : Vector2Returns the current viewport definition.
.getDrawingBufferSize( target : Vector2 ) : Vector2Returns the drawing buffer size in physical pixels. This method honors the pixel ratio.
.getPixelRatio() : numberReturns the pixel ratio.
.getRenderTarget() : WebGLRenderTargetReturns the active render target.
.getScissor( target : Vector4 ) : Vector4Returns the scissor region.
.getScissorTest() : booleanReturns true if the scissor test is enabled.
.getSize( target : Vector2 ) : Vector2Returns the renderer's size in logical pixels. This method does not honor the pixel ratio.
.getViewport( target : Vector4 ) : Vector4Returns the viewport definition.
.initRenderTarget( target : WebGLRenderTarget )Initializes the given WebGLRenderTarget memory. Useful for initializing a render target so data can be copied into it using [WebGLRenderer#copyTextureToTexture](WebGLRenderer.html#copyTextureToTextur…
.initTexture( texture : Texture )Initializes the given texture. Useful for preloading a texture rather than waiting until first render (which can cause noticeable lags due to decode and GPU upload overhead).
.readRenderTargetPixels( renderTarget : WebGLRenderTarget, x : number, y : number, width : number, height : number, buffer : TypedArray, activeCubeFaceIndex : number, textureIndex : number )Reads the pixel data from the given render target into the given buffer.
.readRenderTargetPixelsAsync( renderTarget : WebGLRenderTarget, x : number, y : number, width : number, height : number, buffer : TypedArray, activeCubeFaceIndex : number, textureIndex : number ) : Promise.<TypedArray> (async)Asynchronous, non-blocking version of WebGLRenderer#readRenderTargetPixels.
.render( scene : Object3D, camera : Camera )Renders the given scene (or other type of 3D object) using the given camera.
.resetState()Can be used to reset the internal WebGL state. This method is mostly relevant for applications which share a single WebGL context across multiple WebGL libraries.
.setAnimationLoop( callback : onAnimationCallback )Applications are advised to always define the animation loop with this method and not manually with requestAnimationFrame() for best compatibility.
.setClearAlpha( alpha : number )Sets the clear alpha.
.setClearColor( color : Color, alpha : number )Sets the clear color and alpha.
.setDrawingBufferSize( width : number, height : number, pixelRatio : number )This method allows to define the drawing buffer size by specifying width, height and pixel ratio all at once. The size of the drawing buffer is computed with this formula:
.setEffects( effects : Array )Sets the post-processing effects to be applied after rendering.
.setNodesHandler( nodesHandler : WebGLNodesHandler )Sets a compatibility node builder for rendering node materials with WebGLRenderer. This enables using TSL (Three.js Shading Language) node materials to prepare for migration to WebGPURenderer.
.setOpaqueSort( method : function )Sets a custom opaque sort function for the render lists. Pass null to use the default painterSortStable function.
.setPixelRatio( value : number )Sets the given pixel ratio and resizes the canvas if necessary.
.setRenderTarget( renderTarget : WebGLRenderTarget, activeCubeFace : number, activeMipmapLevel : number )Sets the active rendertarget.
`.setScissor( x : numberVector4, y : number, width : number, height : number )`
.setScissorTest( boolean : boolean )Enable or disable the scissor test. When this is enabled, only the pixels within the defined scissor area will be affected by further renderer actions.
.setSize( width : number, height : number, updateStyle : boolean )Resizes the output canvas to (width, height) with device pixel ratio taken into account, and also sets the viewport to fit that size, starting in (0, 0). Setting updateStyle to false prevents any s…
.setTransparentSort( method : function )Sets a custom transparent sort function for the render lists. Pass null to use the default reversePainterSortStable function.
`.setViewport( x : numberVector4, y : number, width : number, height : number )`

Key Takeaways

  1. Most relevant properties: autoClear, autoClearColor, autoClearDepth, autoClearStencil.
  2. Key methods: clear, clearColor, clearDepth, clearStencil.

Connects To