Class WebGLRenderer

The WebGL renderer displays your beautifully crafted scenes using WebGL, if your device supports it. This renderer has way better performance than CanvasRenderer.

see

src/renderers/WebGLRenderer.js

Index

Constructor methods

Properties

Methods

Constructor methods

constructor(parameters?: WebGLRendererParameters): WebGLRenderer

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.

Parameters

Returns

WebGLRenderer

Properties

public autoClear: boolean

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

public autoClearColor: boolean

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

public autoClearDepth: boolean

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

public autoClearStencil: boolean

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

public autoScaleCubemaps: boolean

Default is true.

public autoUpdateObjects: boolean

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

public context: any

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

public devicePixelRatio: number

public domElement: HTMLCanvasElement

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.

public gammaInput: boolean

Default is false.

public gammaOutput: boolean

Default is false.

public info: { memory: { programs: number; geometries: number; textures: number; }; render: { calls: number; vertices: number; faces: number; points: number; }; }

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:

public info.memory: { programs: number; geometries: number; textures: number; }

public info.render: { calls: number; vertices: number; faces: number; points: number; }

public memory.geometries: number

public memory.programs: number

public memory.textures: number

public render.calls: number

public render.faces: number

public render.points: number

public render.vertices: number

public maxMorphNormals: number

Default is 4.

public maxMorphTargets: number

Default is 8.

public renderPluginsPost: RendererPlugin[]

An array with render plugins to be applied after rendering. Default is an empty array, or [].

public renderPluginsPre: RendererPlugin[]

An array with render plugins to be applied before rendering. Default is an empty array, or [].

public shadowMapAutoUpdate: boolean

Default is true.

public shadowMapCascade: boolean

Default is false.

public shadowMapCullFace: CullFace

Default is true

public shadowMapDebug: boolean

Default is false.

public shadowMapEnabled: boolean

Default is false.

public shadowMapPlugin: ShadowMapPlugin

public shadowMapType: 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.

public sortObjects: boolean

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

Methods

public addPostPlugin(plugin: RendererPlugin)

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

Parameters

public addPrePlugin(plugin: RendererPlugin)

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

Parameters

public clear(color?: boolean, depth?: boolean, stencil?: boolean)

Tells the renderer to clear its color, depth or stencil drawing buffer(s). If no parameters are passed, no buffer will be cleared.

Parameters

  • color?: boolean optional
  • depth?: boolean optional
  • stencil?: boolean optional

public clearColor()

public clearDepth()

public clearStencil()

public clearTarget(renderTarget: WebGLRenderTarget, color: boolean, depth: boolean, stencil: boolean)

Parameters

public enableScissorTest(enable: boolean)

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

Parameters

  • enable: boolean

public getClearAlpha(): number

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

Returns

number

public getClearColor(): Color

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

Returns

Color

public getContext(): WebGLRenderingContext

Return the WebGL context.

Returns

WebGLRenderingContext

public getMaxAnisotropy(): number

Returns

number

public getPrecision(): string

Returns

string

public initMaterial(material: Material, lights: Light[], fog: Fog, object: Object3D)

Parameters

public initWebGLObjects(scene: Scene)

Parameters

public render(scene: Scene, camera: Camera, renderTarget?: RenderTarget, forceClear?: boolean)

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.

Parameters

public renderBuffer(camera: Camera, lights: Light[], fog: Fog, material: Material, geometryGroup: any, object: Object3D)

Parameters

public renderBufferDirect(camera: Camera, lights: Light[], fog: Fog, material: Material, geometryGroup: any, object: Object3D)

Parameters

public renderBufferImmediate(object: Object3D, program: Object, material: Material)

Parameters

public renderImmediateObject(camera: Camera, lights: Light[], fog: Fog, material: Material, object: Object3D)

Parameters

public setBlending(blending: Blending, blendEquation: BlendingEquation, blendSrc: BlendingSrcFactor, blendDst: BlendingDstFactor)

Parameters

public setClearColor(color: Color, alpha?: number)

Sets the clear color, using color for the color and alpha for the opacity.

Parameters

  • color: Color
  • alpha?: number optional

public setClearColor(color: string, alpha?: number)

Parameters

  • color: string
  • alpha?: number optional

public setClearColor(color: number, alpha?: number)

Parameters

  • color: number
  • alpha?: number optional

public setClearColorHex(hex: number, alpha: number)

Sets the clear color, using hex for the color and alpha for the opacity.

example

// Creates a renderer with black background var renderer = new THREE.WebGLRenderer(); renderer.setSize(200, 100); renderer.setClearColorHex(0x000000, 1);

Parameters

  • hex: number
  • alpha: number

public setDepthTest(depthTest: boolean)

Parameters

  • depthTest: boolean

public setDepthWrite(depthWrite: boolean)

Parameters

  • depthWrite: boolean

public setFaceCulling(cullFace?: CullFace, frontFace?: FrontFaceDirection)

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.

Parameters

public setMaterialFaces(material: Material)

Parameters

public setRenderTarget(renderTarget: RenderTarget)

Parameters

public setScissor(x: number, y: number, width: number, height: number)

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

Parameters

  • x: number
  • y: number
  • width: number
  • height: number

public setSize(width: number, height: number, updateStyle?: boolean)

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

Parameters

  • width: number
  • height: number
  • updateStyle?: boolean optional

public setTexture(texture: Texture, slot: number)

Parameters

public setViewport(x?: number, y?: number, width?: number, height?: number)

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

Parameters

  • x?: number optional
  • y?: number optional
  • width?: number optional
  • height?: number optional

public supportsCompressedTextureS3TC(): boolean

Returns

boolean

public supportsFloatTextures(): boolean

Returns

boolean

public supportsStandardDerivatives(): boolean

Returns

boolean

public supportsVertexTextures(): boolean

Return a Boolean true if the context supports vertex textures.

Returns

boolean

public updateShadowMap(scene: Scene, camera: Camera)

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

Parameters

  • scene: Scene

    an instance of Scene

  • camera: Camera

    — an instance of Camera