WebGLRenderer 渲染器

这是WebGL的渲染器。在 Three.js 的早期版本里, 还有 CanvasRenderer 这种基于H5的canvas标签的渲染器, 但后来取消了。

function WebGLRenderer( parameters ) { } var renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); animate(); function animate(){ renderer.render(scene, camera); requestAnimationFrame(animate); }

Constructor: parameters

canvas

Default value : document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' )
Description : 渲染器绘制其输出的画布。 这对应于下面的domElement属性。 如果未在此处传递, 则将创建新的canvas元素。

context

Default value : null
Description : 这可用于将渲染器附加到现有的RenderingContext。

alpha

Default value : false
Description : 画布是否包含alpha(透明度)缓冲区。

depth

Default value : true
Description : 绘图缓冲区是否具有至少16位的深度缓冲区。

stencil

Default value : true
Description : 绘图缓冲区是否具有至少8位的模板缓冲区。

antialias

Default value : false
Description : 是否抗锯齿。

premultipliedAlpha

Default value : true
Description : 渲染器是否会假设颜色预乘alpha。

preserveDrawingBuffer

Default value : false
Description : 是否保留缓冲区, 直到手动清除或覆盖。

powerPreference

Default value : 'default'
Description : 向用户代理提示适用于此WebGL上下文的GPU配置。 可以是"high-performance", "low-power", "default".

Attributes

autoClear : Boolean

Default value : true
Description : 渲染器是否应在渲染帧之前自动清除其输出。

autoClearColor : Boolean

Default value : true
Description : 如果autoClear为true, 渲染器是否要清除颜色缓冲区。

autoClearDepth : Boolean

Default value : true
Description : 如果autoClear为true, 渲染器是否要清除深度缓冲区。

autoClearStencil : Boolean

Default value : true
Description : 如果autoClear为true, 渲染器是否要清除模板缓冲区。

clippingPlanes : Array

Default value : []
Description : 用户定义的剪裁平面在世界空间中指定为THREE.Plane对象, 这些平面适用于全局。 空间中与平面的点积为负的点被切掉。

context : WebGLRenderingContext

Default value : null
Description : 渲染器默认使用HTMLCanvasElement.getContext()从其domElement获取RenderingContext上下文。 您可以手动创建它, 但它必须与domElement对应才能呈现到屏幕。

domElement : DOMElement

Default value : parameters.canvas
Description : 渲染器绘制其输出的画布, 这是由构造函数中的渲染器自动创建的。你只需将它添加到你的页面就像这样: document.body.appendChild( renderer.domElement );

gammaFactor : Float

Default value : 2.0
Description : 伽玛γ因子

gammaInput : Boolean

Default value : false
Description : 是否期望纹理和颜色都是预乘伽玛γ。

gammaOutput : Boolean

Default value : false
Description : 是否期望纹理和颜色都需要以预乘伽玛γ输出。

localClippingEnabled : Boolean

Default value : false
Description : 渲染器是否启用对象级剪切平面。

maxMorphTargets : Integer

Default value : 8
Description : 着色器中允许的最大MorphTarget数。 标准材料仅允许8个MorphTarget。

maxMorphNormals : Integer

Default value : 4
Description : 着色器中允许的最大MorphNormal数。 标准材料仅允许4个MorphNormal。

physicallyCorrectLights : Boolean

Default value : false
Description : 是否使用物理校正照明模式。

shadowMap : WebGLShadowMap

Default value : new WebGLShadowMap( this, objects, capabilities.maxTextureSize )
Description : 对阴影贴图的引用。

sortObjects : Boolean

Default value : true
Description : 渲染器是否对对象进行排序。

toneMapping : Constant

Default value : THREE.LinearToneMapping
Description : 色调映射。

toneMappingExposure : Number

Default value : 1
Description : 色调映射的曝光级别。

toneMappingWhitePoint : Number

Default value : 1
Description : 色调映射白点。

Methods

allocTextureUnit( ) : Integer

尝试分配纹理单元以供着色器使用。 如果分配比GPU支持更多的纹理单元, 则会发出警告。 这主要在内部使用。

clear( color, depth, stencil ) : null
color Boolean 颜色缓冲区
depth Boolean 深度缓冲区
stencil Boolean 模板缓冲区

渲染器清除其颜色, 深度或模板绘制缓冲区。 此方法将颜色缓冲区初始化为当前的清晰颜色值。参数默认为true。

clearColor( ) : null

清除颜色缓冲区, 相当于clear( true, false, false )。

clearDepth( ) : null

清除深度缓冲区, 相当于clear( false, true, false )。

clearStencil( ) : null

清除模板缓冲区, 相当于clear( false, false, true )。

compile( scene, camera ) : null
scene Scene 场景
camera Camera 相机

用相机来编译场景中的所有材质。 这对于在第一次渲染之前预编译着色器很有用。

copyFramebufferToTexture( position, texture, level ) : null
position Vector2 位置
texture Texture 纹理
level Number 级别

将当前WebGLFramebuffer中的像素复制到2D纹理中。 允许访问WebGLRenderingContext.copyTexImage2D.

copyTextureToTexture( position, srcTexture, dstTexture, level ) : null
position Vector2 位置
srcTexture Texture 源纹理
dstTexture Texture 目标纹理
level Number 级别

从给定位置开始, 将纹理的所有像素复制到现有的纹理。

dispose( ) : null

销毁当前渲染上下文。

forceContextLoss( ) : null

模拟WebGL上下文的丢失。 这需要支持WEBGL_lose_context扩展。

getClearAlpha( ) : Float

返回当前清除的透明值。

getClearColor( ) : Color

返回当前清除的颜色。

getContext( ) : WebGLRenderingContext

返回当前的WebGL上下文。

getContextAttributes( ) : WebGLContextAttributes

返回WebGL上下文在创建时设置了的属性对象

getCurrentViewport( ) : RenderTarget

返回当前视图。

getRenderTarget( ) : RenderTarget

返回当前的RenderTarget。

getDrawingBufferSize( ) : Object

返回包含渲染器绘图缓冲区宽度和高度的对象, 以像素为单位。

getPixelRatio( ) : Number

返回使用的当前设备像素比率。

getSize( ) : Object

返回包含渲染器输出画布的宽度和高度的对象, 以像素为单位。

readRenderTargetPixels( renderTarget, x, y, width, height, buffer ) : null
renderTarget WebGLRenderTarget 渲染目标
x Float x坐标
y Float y坐标
width Float 宽度
height Float 高度
buffer Buffer 缓冲区

将renderTarget中的像素数据读入你所传入的缓冲区。这是WebGLRenderingContext.readPixels()的包装器。

render( scene, camera, renderTarget, forceClear ) : null
scene Scene 场景
camera Camera 相机
renderTarget WebGLRenderTarget 渲染目标
forceClear Boolean 是否强制清除

使用相机渲染场景。渲染将像往常一样对renderTarget或画布完成。如果forceClear为true, 则即使autoClear属性为false, 也会在渲染之前清除深度, 模板和颜色缓冲区。但可以通过将autoClearColor, autoClearStencil或autoClearDepth属性设置为false来阻止清除某些缓冲区。

renderBufferDirect( camera, fog, geometry, material, object, group ) : null
camera Camera 相机
fog Fog
geometry Geometry 几何模型
material Material 材质
object Object3D 3D对象
group Object 对象

使用相机和指定材质渲染缓冲几何组。

renderBufferImmediate( object, program, shading ) : null
object Object3D 3D对象
program shaderProgram 着色程序
shading Material

渲染立即缓冲区。 由renderImmediateObject调用。

setAnimationLoop( callback ) : null
callback Function 回调函数

设置动画。 如果传递`null`, 它将停止任何已经在进行的动画。可以使用内置函数代替requestAnimationFrame。 对于WebVR项目, 必须使用此功能。.

setClearAlpha( alpha ) : null
alpha Float 透明度

设置清除的透明度。

setClearColor( color, alpha ) : null
color Color 颜色
alpha Float 透明度

设置清除的颜色和透明度。

setPixelRatio( value ) : null
value number 比率

设置设备的像素比。

setRenderTarget( renderTarget ) : null
renderTarget WebGLRenderTarget 渲染目标

renderTarget。 如果省略该参数, 则将画布设置为renderTarget。

setScissor( x, y, width, height ) : null
x, y, width, height Integer x坐标, y坐标, 宽度, 高度

将裁剪区域设置为(x, y)到(x + width, y + height)。

setScissorTest( boolean ) : null
boolean Boolean 是否启用

启用或禁用裁剪测试。 启用此选项后, 只有定义的裁剪区域内的像素才会受到其他渲染器操作的影响。

setSize( width, height, updateStyle ) : null
width Integer 宽度
height Integer 高度
updateStyle Boolean 是否更改样式

设置画布的大小尺寸, 并考虑设备像素比率, 并将视口设置为适合该大小, 从(0,0)开始。 将updateStyle设置为false可防止对画布进行任何样式更改。

setTexture2D( texture , slot ) : null
texture Texture 纹理
slot number

此方法将正确的纹理设置为WebGL着色器的正确插槽。 可以找到槽号作为采样器的均匀值。

setTextureCube( cubeTexture, slot ) : null
cubeTexture CubeTexture 立体纹理
slot number

此方法将正确的纹理设置为WebGL着色器的正确插槽。 可以找到槽号作为采样器的均匀值。

setViewport( x, y, width, height ) : null
x, y, width, height Integer x坐标, y坐标, 宽度, 高度

将视图设置为(x, y)到(x + width, y + height)