[three.js] WebGLRenderer

The WebGL renderer displays your beautifully crafted scenes using WebGL.

Constructor

WebGLRenderer( parameters )

parameters - (optional) object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing. The following are valid parameters:

canvas - A canvas where the renderer draws its output. This corresponds to the domElement property below. If not passed in here, a new canvas element will be created.
context - This can be used to attach the renderer to an existing RenderingContext. Default is null.
precision - Shader precision. Can be "highp", "mediump" or "lowp". Defaults to "highp" if supported by the device. See the note in "Things to Avoid" here.
alpha - whether the canvas contains an alpha (transparency) buffer or not. Default is false.
premultipliedAlpha - whether the renderer will assume that colors have premultiplied alpha. Default is true.
antialias - whether to perform antialiasing. Default is false.
stencil - whether the drawing buffer has a stencil buffer of at least 8 bits. Default is true.
preserveDrawingBuffer - whether to preserve the buffers until manually cleared or overwritten. Default is false.
depth - whether the drawing buffer has a depth buffer of at least 16 bits. Default is true.
logarithmicDepthBuffer - whether to use a logarithmic depth buffer. It may be neccesary to use this if dealing with huge differences in scale in a single scene. Default is false. See the camera / logarithmicdepthbuffer example.

Properties

#.autoClear

Defines whether the renderer should automatically clear its output before rendering a frame.

#.autoClearColor

If autoClear is true, defines whether the renderer should clear the color buffer. Default is true.

#.autoClearDepth

If autoClear is true, defines whether the renderer should clear the depth buffer. Default is true.

#.autoClearStencil

If autoClear is true, defines whether the renderer should clear the stencil buffer. Default is true.

#.capabilities

An object containing details about the capabilities of the current RenderingContext.
- #.floatFragmentTextures : whether the context supports the OES_texture_float extension. According to WebGLStats, as of February 2016 over 95% of WebGL enabled devices support this.
- #.floatVertexTextures : true if #.floatFragmentTextures and #.vertexTextures are both true.
- #.getMaxAnisotropy (): see getMaxAnisotropy below. 
- #.getMaxPrecision (): see getMaxPrecision below. 
- #.logarithmicDepthBuffer : true if the #.logarithmicDepthBuffer was set to true in the constructor and the context supports the EXT_frag_depth extension. According to WebGLStats, as of February 2016 around 66% of WebGL enabled devices support this.
- #.maxAttributes : The value of gl.MAX_VERTEX_ATTRIBS.
- #.maxCubemapSize : The value of gl.MAX_CUBE_MAP_TEXTURE_SIZE. Maximum height * width of cube map textures that a shader can use.
- #.maxFragmentUniforms : The value of gl.MAX_FRAGMENT_UNIFORM_VECTORS. The number of uniforms that can be used by a fragment shader.
- #.maxTextureSize : The value of gl.MAX_TEXTURE_SIZE. Maximum height * width of a texture that a shader use.
- #.maxTextures : The value of gl.MAX_TEXTURE_IMAGE_UNITS. The maximum number of textures that can be used by a shader.
- #.maxVaryings : The value of gl.MAX_VARYING_VECTORS. The number of varying vectors that can used by shaders.
- #.maxVertexTextures : The value of gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS. The number of textures that can be used in a vertex shader.
- #.maxVertexUniforms : The value of gl.MAX_VERTEX_UNIFORM_VECTORS. The maximum number of uniforms that can be used in a vertex shader.
- #.precision : The shader precision currently being used by the renderer.
- #.vertexTextures : true if #.maxVertexTextures is greater than 0 (i.e. vertext textures can be used).

#.clippingPlanes

User-defined clipping planes specified as THREE.Plane objects in world space. These planes apply globally. Points in space whose dot product with the plane is negative are cut away. Default is [].

#.context

The renderer obtains a RenderingContext context from its domElementdomElement by default, using HTMLCanvasElement.getContext().

You can create this manually, however it must correspond to the domElement in order to render to the screen.

#.domElement

A canvas where the renderer draws its output.
This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page like so:
document.body.appendChild( renderer.domElement );

#.extensions

A wrapper for the .extensions.get method, used to check whether various WebGL extensions are supported.

#.gammaFactor

Default is 2.

#.gammaInput

If set, then it expects that all textures and colors are premultiplied gamma. Default is false.

#.gammaOutput

If set, then it expects that all textures and colors need to be outputted in premultiplied gamma. Default is false.

#.info

An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:

• memory:
  • geometries
  • textures
• render:
  • calls
  • vertices
  • faces
  • points
• programs

#.localClippingEnabled

Defines whether the renderer respects object-level clipping planes. Default is false.

#.maxMorphTargets

Default is 8. The maximum number of MorphTargets allowed in a shader. Keep in mind that the standard materials only allow 8 MorphTargets.

#.maxMorphNormals

Default is 4. The maximum number of MorphNormals allowed in a shader. Keep in mind that the standard materials only allow 4 MorphNormals.

#.physicallyCorrectLights

Whether to use physically correct lighting mode. Default is false. See the lights / physical example.

#.properties

Used internally by the renderer to keep track of various sub object properties.

#.renderLists

Used internally to handle ordering of scene object rendering.

#.shadowMap

This contains the reference to the shadow map, if used.

#.shadowMap.enabled

If set, use shadow maps in the scene. Default is false.

#.shadowMap.type

Defines shadow map type (unfiltered, percentage close filtering, percentage close filtering with bilinear filtering in shader)

Options are THREE.BasicShadowMap, THREE.PCFShadowMap (default), THREE.PCFSoftShadowMap. See WebGLRenderer constants for details.

#.shadowMap.renderReverseSided

Whether to render the opposite side as specified by the material into the shadow map. When disabled, an appropriate shadow.bias must be set on the light source for surfaces that can both cast and receive shadows at the same time to render correctly. Default is true.

#.shadowMap.renderSingleSided

Whether to treat materials specified as double-sided as if they were specified as front-sided when rendering the shadow map. When disabled, an appropriate shadow.bias must be set on the light source for surfaces that can both cast and receive shadows at the same time to render correctly. Default is true.

#.sortObjects

Defines whether the renderer should sort objects. Default is true.

Note: Sorting is used to attempt to properly render objects that have some degree of transparency. By definition, sorting objects may not work in all cases. Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining each object's rendering order.

#.state

Contains functions for setting various properties of the WebGLRenderer.context state.

#.toneMapping

Default is LinearToneMapping. See the Renderer constants for other choices.

#.toneMappingExposure

Exposure level of tone mapping. Default is 1.

#.toneMappingWhitePoint

Tone mapping white point. Default is 1.

Methods

#.allocTextureUnit

Attempt to allocate a texture unit for use by a shader. Will warn if trying to allocate more texture units than the GPU supports. This is mainly used internally. See capabilities.maxTextures.

#.clear ( color, depth, stencil )

Tells the renderer to clear its color, depth or stencil drawing buffer(s). This method initializes the color buffer to the current clear color value.
Arguments default to true.

#.clearColor ( )

Clear the color buffer. Equivalent to calling .clear( true, false, false ).

#.clearDepth ( )

Clear the depth buffer. Equivalent to calling .clear( false, true, false ).

#.clearStencil ( )

Clear the stencil buffers. Equivalent to calling .clear( false, false, true ).

#.clearTarget (renderTarget, color, depth, stencil)

renderTarget -- The renderTarget that needs to be cleared.
color -- If set, then the color gets cleared. 
depth -- If set, then the depth gets cleared. 
stencil -- If set, then the stencil gets cleared.

This method clears a rendertarget. To do this, it activates the rendertarget.

#.compile ( scene, camera )

Compiles all materials in the scene with the camera. This is useful to precompile shaders before the first rendering.

#.dispose ( )

Dispose of the current rendering context.

#.extensions.get ( extensionName )

Used to check whether various extensions are supported and returns an object with details of the extension if available. This method can check for the following extensions:

- WEBGL_depth_texture
- EXT_texture_filter_anisotropic
- WEBGL_compressed_texture_s3tc
- WEBGL_compressed_texture_pvrtc
- WEBGL_compressed_texture_etc1

#.forceContextLoss ( )

Simulate loss of the WebGL context. This requires support for the WEBGL_lose_context extensions. According to WebGLStats, as of February 2016 90% of WebGL enabled devices support this.

#.getClearAlpha ()

Returns a float with the current clear alpha. Ranges from 0 to 1.

#.getClearColor ()

Returns a THREE.Color instance with the current clear color.

#.getContext ()

Return the current WebGL context.

#.getContextAttributes ()

Returns an object that describes the attributes set on the WebGL context when it was created.

#.getCurrentRenderTarget ( )

Returns the current RenderTarget, if any.

#.getMaxAnisotropy ()

This returns the anisotropy level of the textures.

#.getDrawingBufferSize ()

Returns an object containing the width and height of the renderer's drawing buffer, in pixels.

#.getPixelRatio ()

Returns current device pixel ratio used.

#.getPrecision ()

This gets the precision used by the shaders. It returns "highp","mediump" or "lowp".

#.getSize ()

Returns an object containing the width and height of the renderer's output canvas, in pixels.

#.resetGLState ( )

Reset the GL state to default. Called internally if the WebGL context is lost.

#.readRenderTargetPixels ( renderTarget, x, y, width, height, buffer )

Reads the pixel data from the renderTarget into the buffer you pass in. Buffer should be a Javascript Uint8Array instantiated with new Uint8Array( renderTargetWidth * renderTargetWidth * 4 ) to account for size and color information. This is a wrapper around gl.readPixels.
See the interactive / cubes / gpu example.

#.render ( scene, camera, renderTarget, forceClear )

Render a scene using a camera.
The render is done to the renderTarget (if specified) or to the canvas as usual.
If forceClear is true, the depth, stencil and color buffers will be cleared before rendering even if the renderer's autoClear property is false.
Even with forceClear set to true you can prevent certain buffers being cleared by setting either the autoClearColor, autoClearStencil or autoClearDepth properties to false.

#.renderBufferDirect ( camera, lights, fog, material, geometryGroup, object )

Render a buffer geometry group using the camera and with the specified material.

#.renderBufferImmediate ( object, program, shading )

object - an instance of Object3D
program - an instance of shaderProgram
shading - an instance of Material

Render an immediate buffer. Gets called by renderImmediateObject.

#.setClearAlpha ( alpha )

Sets the clear alpha. Valid input is a float between 0.0 and 1.0.

#.setClearColor ( color, alpha )

Sets the clear color and opacity.

#.setFaceCulling ( cullFace, frontFace )

See WebGLRenderer constants for all possible values for cullFace and frontFace.
Used for setting the gl.frontFace and gl.cullFace states in the GPU, thus enabling/disabling face culling when rendering.
If cullFace is set to CullFaceNone, culling will be disabled.

#.setPixelRatio ( value )

Sets device pixel ratio. This is usually used for HiDPI device to prevent bluring output canvas.

#.setRenderTarget ( renderTarget )

renderTarget -- The renderTarget that needs to be activated (optional).

This method sets the active rendertarget. If the parameter is omitted the canvas is set as the active rendertarget.

#.setScissor ( x, y, width, height )

Sets the scissor area from (x, y) to (x + width, y + height)

#.setScissorTest ( 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.

#.supportsVertexTextures ()

Return a Boolean true if the context supports vertex textures. This has been deprecated in favour of capabilities.vertexTexures.

#.setSize ( width, height, updateStyle )

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 true adds explicit pixel units to the output canvas style.

#.setTexture2D ( texture, slot )

texture -- The texture that needs to be set.
slot -- The number indicating which slot should be used by the texture.

This method sets the correct texture to the correct slot for the WebGL shader. The slot number can be found as a value of the uniform of the sampler.

Note: This method replaces the older #.setTexture method.

#.setTextureCube ( cubeTexture, slot )

texture -- The cubeTexture that needs to be set.
slot -- The number indicating which slot should be used by the texture.

This method sets the correct texture to the correct slot for the WebGL shader. The slot number can be found as a value of the uniform of the sampler.

#.setViewport ( x, y, width, height )

Sets the viewport to render from (x, y) to (x + width, y + height).

Source

src/renderers/WebGLRenderer.js

 

[출처] https://threejs.org/docs/#api/renderers/WebGLRenderer