WebGLRenderer.html 14.6 KB
Newer Older
1 2 3
<!DOCTYPE html>
<html lang="en">
	<head>
4
		<meta charset="utf-8" />
5 6 7 8 9 10
		<script src="../../list.js"></script>
		<script src="../../page.js"></script>
		<link type="text/css" rel="stylesheet" href="../../page.css" />
	</head>
	<body>
		<h1>[name]</h1>
M
Mr.doob 已提交
11

12 13
		<div class="desc">The WebGL renderer displays your beautifully crafted scenes using WebGL, if your device supports it.</div>
		<div class="desc">This renderer has way better performance than [page:CanvasRenderer].</div>
M
Mr.doob 已提交
14 15


16
		<h2>Constructor</h2>
M
Mr.doob 已提交
17

C
cjshannon 已提交
18

19
		<h3>[name]( [page:Object parameters] )</h3>
M
Mr.doob 已提交
20

21
		<div>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.</div>
S
sole 已提交
22

23 24 25
		<div>
		canvas — A [page:Canvas] where the renderer draws its output.<br />
		precision — shader precision. Can be *"highp"*, *"mediump"* or *"lowp"*.<br />
26
		alpha — [page:Boolean], default is *false*.<br />
27 28 29 30 31 32
		premultipliedAlpha — [page:Boolean], default is *true*.<br />
		antialias — [page:Boolean], default is *false*.<br />
		stencil — [page:Boolean], default is *true*.<br />
		preserveDrawingBuffer — [page:Boolean], default is *false*.<br />
		maxLights — [page:Integer], default is *4*.<br />
		</div>
M
Mr.doob 已提交
33

34
		<h2>Properties</h2>
M
Mr.doob 已提交
35

36
		<h3>.[page:DOMElement domElement]</h3>
S
sole 已提交
37

38 39
		<div>A [page:Canvas] where the renderer draws its output.<br />
		This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.</div>
S
sole 已提交
40

C
cjshannon 已提交
41
		<h3>.[page:todo context]</h3>
S
sole 已提交
42

43
		<div>The HTML5 Canvas's 'webgl' context obtained from the canvas where the renderer will draw.</div>
S
sole 已提交
44

45
		<h3>.[page:Boolean autoClear]</h3>
S
sole 已提交
46

47
		<div>Defines whether the renderer should automatically clear its output before rendering.</div>
S
sole 已提交
48 49


50
		<h3>.[page:Boolean autoClearColor]</h3>
S
sole 已提交
51

52
		<div>If autoClear is true, defines whether the renderer should clear the color buffer. Default is true.</div>
S
sole 已提交
53 54


55
		<h3>.[page:Boolean autoClearDepth]</h3>
S
sole 已提交
56

57
		<div>If autoClear is true, defines whether the renderer should clear the depth buffer. Default is true.</div>
S
sole 已提交
58 59


60
		<h3>.[page:Boolean autoClearStencil]</h3>
S
sole 已提交
61

62
		<div>If autoClear is true, defines whether the renderer should clear the stencil buffer. Default is true.</div>
S
sole 已提交
63 64


65
		<h3>.[page:Boolean sortObjects]</h3>
S
sole 已提交
66

67
		<div>Defines whether the renderer should sort objects. Default is true.</div>
S
sole 已提交
68

P
PaulJacobs 已提交
69
		<div>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.</div>
S
sole 已提交
70 71


72
		<h3>.[page:Boolean autoUpdateObjects]</h3>
S
sole 已提交
73

74
		<div>Defines whether the renderer should auto update objects. Default is true.</div>
S
sole 已提交
75

76
		<div>TODO</div>
S
sole 已提交
77

78
		<!-- Physically based shading -->
S
sole 已提交
79

80
		<h3>.[page:Boolean gammaInput]</h3>
S
sole 已提交
81

G
gero3 已提交
82
		<div>Default is false. If set, then it expects that all textures and colors are premultiplied gamma.</div>
S
sole 已提交
83 84


85
		<h3>.[page:Boolean gammaOutput]</h3>
S
sole 已提交
86

G
gero3 已提交
87
		<div>Default is false.  If set, then it expects that all textures and colors need to be outputted in premultiplied gamma.</div>
S
sole 已提交
88 89


90
		<h3>.[page:Boolean shadowMapEnabled]</h3>
S
sole 已提交
91

G
gero3 已提交
92
		<div>Default is false. If set, use shadow maps in the scene.</div>
S
sole 已提交
93 94


95
		<h3>.[page:Boolean shadowMapAutoUpdate]</h3>
S
sole 已提交
96

G
gero3 已提交
97
		<div>Default is true. If set, autoupdate the shadowmaps every frame.</div>
S
sole 已提交
98 99


100
		<h3>.[page:Integer shadowMapType]</h3>
S
sole 已提交
101

102 103
		<div>Defines shadow map type (unfiltered, percentage close filtering, percentage close filtering with bilinear filtering in shader)</div>
		<div>Options are THREE.BasicShadowMap, THREE.PCFShadowMap, THREE.PCFSoftShadowMap. Default is THREE.PCFShadowMap.</div>
S
sole 已提交
104 105


G
gero3 已提交
106
		<h3>.[page:Integer shadowMapCullFace]</h3>
S
sole 已提交
107

G
gero3 已提交
108
		<div>Default is THREE.CullFaceFront. The faces that needed to be culled. Possible values: THREE.CullFaceFront and THREE.CullFaceBack</div>
S
sole 已提交
109 110


G
gero3 已提交
111
		<h3>[page:Boolean shadowMapDebug]</h3>
S
sole 已提交
112

G
gero3 已提交
113
		<div>Default is false. If set, then the shadowmaps get a specific color to identify which shadow is from which shadowmap.</div>
S
sole 已提交
114 115


116
		<h3>.[page:Boolean shadowMapCascade]</h3>
S
sole 已提交
117

118
		<div>Default is false. TODO</div>
S
sole 已提交
119 120


121
		<h3>.[page:Integer maxMorphTargets]</h3>
S
sole 已提交
122

G
gero3 已提交
123
		<div>Default is 8. The maximum number of MorphTargets allowed in a shader. Keep in mind that the standard materials only allow 8 MorphTargets.</div>
S
sole 已提交
124 125


126
		<h3>.[page:Integer maxMorphNormals]</h3>
S
sole 已提交
127

G
gero3 已提交
128
		<div>Default is 4. The maximum number of MorphNormals allowed in a shader. Keep in mind that the standard materials only allow 4 MorphNormals. </div>
S
sole 已提交
129 130


131
		<h3>.[page:Boolean autoScaleCubemaps]</h3>
S
sole 已提交
132

G
gero3 已提交
133
		<div>Default is true. If set, then Cubemaps are scaled, when the are bigger the the maximum size, to make sure that they aren't bigger then the maximum size.</div>
S
sole 已提交
134

M
Mr.doob 已提交
135

136
		<h3>.[page:Boolean renderPluginsPre]</h3>
S
sole 已提交
137

138 139
		<div>An array with render plugins to be applied before rendering.</div>
		<div>Default is an empty array, or [].</div>
S
sole 已提交
140 141


142
		<h3>.[page:Boolean renderPluginsPost]</h3>
S
sole 已提交
143

144 145
		<div>An array with render plugins to be applied after rendering.</div>
		<div>Default is an empty array, or [].</div>
S
sole 已提交
146 147


148
		<h3>.[page:Object info]</h3>
S
sole 已提交
149

150 151
		<div>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:</div>
		<div>
S
sole 已提交
152
		<ul>
153 154 155 156 157 158 159 160 161 162 163 164 165 166 167
			<li>memory:
				<ul>
					<li>programs</li>
					<li>geometries</li>
					<li>textures</li>
				</ul>
			</li>
			<li>render:
				<ul>
					<li>calls</li>
					<li>vertices</li>
					<li>faces</li>
					<li>points</li>
				</ul>
			</li>
S
sole 已提交
168
		</ul>
169
		</div>
M
Mr.doob 已提交
170

C
cjshannon 已提交
171 172
		<h3>.[page:ShadowMapPlugin shadowMapPlugin]</h3>
		<div>
G
gero3 已提交
173
		This contains the reference to the shadowMapPlugin.
C
cjshannon 已提交
174 175 176 177 178
		</div> 


		<h3>.[page:number devicePixelRatio]</h3>
		<div>
G
gero3 已提交
179
		The pixel ration of the devices. 
C
cjshannon 已提交
180 181
		</div> 

182
		<h2>Methods</h2>
M
Mr.doob 已提交
183

184 185 186 187
		<h3>.getContext()</h3>
		<div>
		Return the WebGL context.
		</div>
M
Mr.doob 已提交
188

189 190 191 192
		<h3>.supportsVertexTextures()</h3>
		<div>
		Return a [page:Boolean] true if the context supports vertex textures.
		</div>
S
sole 已提交
193 194


195 196
		<h3>.setSize( [page:Integer width], [page:Integer height] )</h3>
		<div>Resizes the output canvas to (width, height), and also sets the viewport to fit that size, starting in (0, 0).</div>
S
sole 已提交
197

198 199
		<h3>.setViewport( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
		<div>Sets the viewport to render from (x, y) to (x + width, y + height).</div>
S
sole 已提交
200 201


202 203
		<h3>.setScissor( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
		<div>Sets the scissor area from (x, y) to (x + width, y + height).</div>
S
sole 已提交
204

205 206
		<h3>.enableScissorTest( [page:Boolean enable] )</h3>
		<div>Enable the scissor test. When this is enabled, only the pixels within the defined scissor area will be affected by further renderer actions.</div>
S
sole 已提交
207

M
Mr.doob 已提交
208 209
		<h3>.setClearColor( [page:Color color], [page:Float alpha] )</h3>
		<div>Sets the clear color and opacity.</div>
S
sole 已提交
210

M
Mr.doob 已提交
211
		<code>// Creates a renderer with red background
212 213
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(200, 100);
M
Mr.doob 已提交
214
		renderer.setClearColor(0xff0000, 1);
215
		</code>
S
sole 已提交
216

217 218
		<h3>.getClearColor() [page:Color]</h3>
		<div>Returns a [page:Color THREE.Color] instance with the current clear color.</div>
S
sole 已提交
219

220 221
		<h3>.getClearAlpha() [page:Float]</h3>
		<div>Returns a [page:Float float] with the current clear alpha. Ranges from 0 to 1.</div>
S
sole 已提交
222

223 224 225
		<h3>.clear( [page:Boolean color], [page:Boolean depth], [page:Boolean stencil] )</h3>
		<div>Tells the renderer to clear its color, depth or stencil drawing buffer(s).</div>
		<div>If no parameters are passed, no buffer will be cleared.</div>
S
sole 已提交
226

227 228
		<h3>.addPostPlugin( plugin )</h3>
		<div>Initialises the postprocessing plugin, and adds it to the renderPluginsPost array.</div>
S
sole 已提交
229

230 231
		<h3>.addPrePlugin( plugin )</h3>
		<div>Initialises the preprocessing plugin, and adds it to the renderPluginsPre array.</div>
S
sole 已提交
232

233 234 235 236
		<h3>.updateShadowMap( [page:Scene scene], [page:Camera camera] )</h3>
		<div>scene — an instance of [page:Scene]<br />
		camera — an instance of [page:Camera]</div>
		<div>Tells the shadow map plugin to update using the passed scene and camera parameters.</div>
S
sole 已提交
237 238


G
gero3 已提交
239
		<h3>.renderBufferImmediate( [page:Object3D object], [page:shaderprogram program], [page:Material shading] )</h3>
240
		<div>object — an instance of [page:Object3D]]<br />
G
gero3 已提交
241 242
		program — an instance of shaderProgram<br />
		shading — an instance of Material<br />
243 244
		</div>
		<div>TODO.</div>
S
sole 已提交
245 246


247 248
		<h3>.renderBufferDirect(  camera, lights, fog, material, geometryGroup, object )</h3>
		<div>TODO.</div>
S
sole 已提交
249 250


251 252
		<h3>.renderBuffer( camera, lights, fog, material, geometryGroup, object )</h3>
		<div>TODO.</div>
S
sole 已提交
253 254


255 256 257
		<h3>.render( [page:Scene scene], [page:Camera camera], [page:WebGLRenderTarget renderTarget], [page:Boolean forceClear] )</h3>
		<div>Render a scene using a camera.</div>
		<div>The render is done to the renderTarget (if specified) or to the canvas as usual.</div>
258 259
        <div>If forceClear is true the depth, stencil and color buffers will be cleared before rendering even if the renderer's autoClear property is false.</div>
        <div>Even with forceClear set to true you can prevent certain buffers being cleared by setting either the .autoClearColor, .autoClearStencil or .autoClearDepth properties to false.</div>
S
sole 已提交
260

261 262
		<h3>.renderImmediateObject( camera, lights, fog, material, object )</h3>
		<div>TODO.</div>
S
sole 已提交
263 264


265
		<h3>.initWebGLObjects( [page:Scene scene] )</h3>
G
gero3 已提交
266 267 268 269 270 271
		<div>
		[page:Scene scene] -- The scene to initialize.
		</div>
		<div>
		This method initializes the scene. This means adding and removing all objects from the scene and updating them to make sure we have the correct webgl buffers. 
		</div>
S
sole 已提交
272 273


G
gero3 已提交
274 275 276 277 278 279 280 281
		<h3>.initMaterial( [page:Material material], [page:Array lights], [page:Fog fog], [page:Object3D object])</h3>
		<div>
		[page:Material material] -- The material to initialize.<br />
		[page:Array lights] -- An array of lights that influence the material.<br />
		[page:Fog fog] -- The fog of the scene.<br />
		[page:Object3D object] -- The object of the material that needs init.
		</div>
		<div>
G
gero3 已提交
282
		This method initializes the material as a webgl program to be used.
G
gero3 已提交
283
		</div>
S
sole 已提交
284

285 286
		<h3>.setFaceCulling( cullFace, frontFace )</h3>
		<div>
G
gero3 已提交
287 288
		[page:String cullFace] —- "back", "front", "front_and_back", or false.<br />
		[page:String frontFace] —- "ccw" or "cw<br />
289 290 291
		</div>
		<div>Used for setting the gl frontFace, cullFace states in the GPU, thus enabling/disabling face culling when rendering.</div>
		<div>If cullFace is false, culling will be disabled.</div>
S
sole 已提交
292 293


G
gero3 已提交
294 295 296 297 298 299 300
		<h3>.setDepthTest( [page:boolean depthTest] )</h3>
		<div>
		depthTest -- The boolean to decide if depth of a fragment needs to be tested against the depth buffer . <br />
		</div>
		<div>
		This sets, based on depthTest, whether or not the depth data needs to be tested against the depth buffer.
		</div>
S
sole 已提交
301

G
gero3 已提交
302 303 304 305 306 307 308
		<h3>.setDepthWrite( [page:boolean depthWrite] )</h3>
		<div>
		depthWrite -- The boolean to decide if depth of a fragment needs to be kept. <br />
		</div>
		<div>
		This sets, based on depthWrite, whether or not the depth data needs to be written in the depth buffer.
		</div>
S
sole 已提交
309 310


G
gero3 已提交
311
		<h3>.setBlending( [page:number blending], [page:number blendEquation], [page:number blendSrc], [page:number blendDst] )</h3>
G
gero3 已提交
312
		<div>
G
gero3 已提交
313 314 315 316
		blending -- A number indicating the blending mode. Possible value are THREE.NoBlending, THREE.NormalBlending, THREE.AdditiveBlending, THREE.SubtractiveBlending, THREE.MultiplyBlending or THREE.CustomBlending <br />
		blendEquation -- When blending is THREE.CustomBlending, then you can set the blendEquation. Possible values are THREE.AddEquation, THREE.SubtractEquation or THREE.ReverseSubtractEquation.<br />
		blendSrc -- When blending is THREE.CustomBlending, then you can set the blendSrc. Possible values are THREE.ZeroFactor, THREE.OneFactor,THREE.SrcColorFactor, THREE.OneMinusSrcColorFactor, THREE.SrcAlphaFactor, THREE.OneMinusSrcAlphaFactor, THREE.DstAlphaFactor, THREE.OneMinusDstAlphaFactor, THREE.DstColorFactor,THREE.OneMinusDstColorFactor or THREE.SrcAlphaSaturateFactor<br />
		blendDst -- When blending is THREE.CustomBlending, then you can set the blendDst. Possible values are THREE.ZeroFactor, THREE.OneFactor,THREE.SrcColorFactor, THREE.OneMinusSrcColorFactor, THREE.SrcAlphaFactor, THREE.OneMinusSrcAlphaFactor, THREE.DstAlphaFactor, THREE.OneMinusDstAlphaFactor, THREE.DstColorFactor,THREE.OneMinusDstColorFactor or THREE.SrcAlphaSaturateFactor
G
gero3 已提交
317 318
		</div>
		<div>
G
gero3 已提交
319
		This method sets the correct blending.
G
gero3 已提交
320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337
		</div>
		
		<h3>.setTexture( [page:Texture texture], [page:number slot] )</h3>
		<div>
		texture -- The [page:Texture texture] that needs to be set.<br />
		slot -- The number indicating which slot should be used by the texture.
		</div>
		<div>
		This method sets the correct texture to the correct slot for the wegl shader. The slot number can be found as a value of the uniform of the sampler.
		</div>
		
		<h3>.setRenderTarget( [page:WebGLRenderTarget renderTarget] )</h3>
		<div>
		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated.<br />
		</div>
		<div>
		This method sets the active rendertarget.
		</div>
M
Mr.doob 已提交
338

G
gero3 已提交
339
		<h3>.supportsCompressedTextureS3TC() [page:boolean]</h3>
C
cjshannon 已提交
340
		<div>
G
gero3 已提交
341
		This method returns true if the webgl implementation supports compressed textures of the format S3TC.
C
cjshannon 已提交
342 343
		</div>

G
gero3 已提交
344
		<h3>.getMaxAnisotropy() [page:number]</h3>
C
cjshannon 已提交
345
		<div>
G
gero3 已提交
346
		This returns the anisotropy level of the textures.
C
cjshannon 已提交
347 348
		</div>

G
gero3 已提交
349
		<h3>.getPrecision() [page:string]</h3>
C
cjshannon 已提交
350
		<div>
G
gero3 已提交
351
		This gets the precision used by the shaders. It returns "highp","mediump" or "lowp".
C
cjshannon 已提交
352 353
		</div>

G
gero3 已提交
354
		<h3>.setMaterialFaces([page:Material material])</h3>
C
cjshannon 已提交
355
		<div>
G
gero3 已提交
356
		material -- The [page:Material material] with side that shouldn't be culled.  
C
cjshannon 已提交
357 358
		</div>
		<div>
G
gero3 已提交
359
		This sets which side needs to be culled in the webgl renderer.
C
cjshannon 已提交
360 361
		</div>

G
gero3 已提交
362
		<h3>.supportsStandardDerivatives() [page:boolean]</h3>
C
cjshannon 已提交
363
		<div>
G
gero3 已提交
364
		This method returns true if the webgl implementation supports standard derivatives.
C
cjshannon 已提交
365 366
		</div>

G
gero3 已提交
367
		<h3>.supportsFloatTextures() [page:boolean]</h3>
C
cjshannon 已提交
368
		<div>
G
gero3 已提交
369
		This method returns true if the webgl implementation supports float textures.
C
cjshannon 已提交
370 371
		</div>

G
gero3 已提交
372
		<h3>.clearTarget([page:WebGLRenderTarget renderTarget], [page:boolean color], [page:boolean depth], [page:boolean stencil]) </h3>
C
cjshannon 已提交
373
		<div>
G
gero3 已提交
374 375 376 377
		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be cleared.<br />
		color -- If set, then the color gets cleared. <br />
		depth -- If set, then the depth gets cleared. <br />
		stencil -- If set, then the stencil gets cleared.
C
cjshannon 已提交
378 379
		</div>
		<div>
G
gero3 已提交
380
		This method clears a rendertarget. To do this, it activates the rendertarget.
C
cjshannon 已提交
381 382
		</div>

383
		<h2>Source</h2>
M
Mr.doob 已提交
384

385 386 387
		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
	</body>
</html>