[name]

The WebGL renderer displays your beautifully crafted scenes using WebGL, if your device supports it.

This renderer has way better performance than [page:CanvasRenderer].

Constructor

[name]( [page:Object parameters] )

parameters is an 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.

canvas — A [page:Canvas] where the renderer draws its output.
precision — shader precision. Can be *"highp"*, *"mediump"* or *"lowp"*.
alpha — [page:Boolean], default is *false*.
premultipliedAlpha — [page:Boolean], default is *true*.
antialias — [page:Boolean], default is *false*.
stencil — [page:Boolean], default is *true*.
preserveDrawingBuffer — [page:Boolean], default is *false*.
maxLights — [page:Integer], default is *4*.

Properties

.[page:DOMElement domElement]

A [page: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.

.[page:todo context]

The HTML5 Canvas's 'webgl' context obtained from the canvas where the renderer will draw.

.[page:Boolean autoClear]

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

.[page:Boolean autoClearColor]

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

.[page:Boolean autoClearDepth]

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

.[page:Boolean autoClearStencil]

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

.[page:Boolean 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 the object rendering order.

.[page:Boolean autoUpdateObjects]

Defines whether the renderer should auto update objects. Default is true.

TODO

.[page:Boolean gammaInput]

Default is false. TODO

.[page:Boolean gammaOutput]

Default is false. TODO

.[page:Boolean shadowMapEnabled]

Default is false. TODO

.[page:Boolean shadowMapAutoUpdate]

Default is true. TODO

.[page:Integer shadowMapType]

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

Options are THREE.BasicShadowMap, THREE.PCFShadowMap, THREE.PCFSoftShadowMap. Default is THREE.PCFShadowMap.

.[page:Boolean shadowMapCullFace]

Default is true. TODO

.[page:Boolean shadowMapDebug]

Default is false. TODO

.[page:Boolean shadowMapCascade]

Default is false. TODO

.[page:Integer maxMorphTargets]

Default is 8. TODO

.[page:Integer maxMorphNormals]

Default is 4. TODO

.[page:Boolean autoScaleCubemaps]

Default is true. TODO

.[page:Boolean renderPluginsPre]

An array with render plugins to be applied before rendering.

Default is an empty array, or [].

.[page:Boolean renderPluginsPost]

An array with render plugins to be applied after rendering.

Default is an empty array, or [].

.[page:Object 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:
- programs
- geometries
- textures
render:
- calls
- vertices
- faces
- points

.[page:ShadowMapPlugin shadowMapPlugin]

todo

.[page:number shadowMapCullFace]

todo

.[page:number devicePixelRatio]

todo

Methods

.getContext()

Return the WebGL context.

.supportsVertexTextures()

Return a [page:Boolean] true if the context supports vertex textures.

.setSize( [page:Integer width], [page:Integer height] )

Resizes the output canvas to (width, height), and also sets the viewport to fit that size, starting in (0, 0).

.setViewport( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )

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

.setScissor( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )

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

.enableScissorTest( [page:Boolean enable] )

Enable the scissor test. When this is enabled, only the pixels within the defined scissor area will be affected by further renderer actions.

.setClearColor( [page:Color color], [page:Float alpha] )

Sets the clear color and opacity.

// Creates a renderer with red background
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(200, 100);
		renderer.setClearColor(0xff0000, 1);

.getClearColor() [page:Color]

Returns a [page:Color THREE.Color] instance with the current clear color.

.getClearAlpha() [page:Float]

Returns a [page:Float float] with the current clear alpha. Ranges from 0 to 1.

.clear( [page:Boolean color], [page:Boolean depth], [page:Boolean stencil] )

Tells the renderer to clear its color, depth or stencil drawing buffer(s).

If no parameters are passed, no buffer will be cleared.

.addPostPlugin( plugin )

Initialises the postprocessing plugin, and adds it to the renderPluginsPost array.

.addPrePlugin( plugin )

Initialises the preprocessing plugin, and adds it to the renderPluginsPre array.

.updateShadowMap( [page:Scene scene], [page:Camera camera] )

scene — an instance of [page:Scene]
camera — an instance of [page:Camera]

Tells the shadow map plugin to update using the passed scene and camera parameters.

.renderBufferImmediate( [page:Object3D object], [page:??? program], [page:??? shading] )

object — an instance of [page:Object3D]]
program — an instance of ???
shading — an instance of ???

TODO.

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

TODO.

.renderBuffer( camera, lights, fog, material, geometryGroup, object )

TODO.

.render( [page:Scene scene], [page:Camera camera], [page:WebGLRenderTarget renderTarget], [page:Boolean 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 canvas will be cleared before rendering, even if the renderer's autoClear property is false.

.renderImmediateObject( camera, lights, fog, material, object )

TODO.

.initWebGLObjects( [page:Scene scene] )

TODO.

.initMaterial( material, lights, fog, object )

TODO.

.setFaceCulling( cullFace, frontFace )

[page:String cullFace] — "back", "front", "front_and_back", or false.
[page:String frontFace] — "ccw" or "cw

Used for setting the gl frontFace, cullFace states in the GPU, thus enabling/disabling face culling when rendering.

If cullFace is false, culling will be disabled.

.setDepthTest( depthTest )

TODO.

.setDepthWrite( depthWrite )

TODO.

.setBlending( blending, blendEquation, blendSrc, blendDst )

TODO.

.setTexture( texture, slot )

TODO.

.setRenderTarget( renderTarget )

TODO.

.supportsCompressedTextureS3TC() [page:todo]

todo

.getMaxAnisotropy() [page:todo]

todo

.getPrecision() [page:todo]

todo

.setMaterialFaces([page:todo material]) [page:todo]

material -- todo

todo

.supportsStandardDerivatives() [page:todo]

todo

.supportsFloatTextures() [page:todo]

todo

.clearTarget([page:todo renderTarget], [page:todo color], [page:todo depth], [page:todo stencil]) [page:todo]

renderTarget -- todo
color -- todo
depth -- todo
stencil -- todo

todo

.setClearColorHex([page:todo hex], [page:todo alpha]) [page:todo]

hex -- todo
alpha -- todo

todo

Source

[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]