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

13 14
		<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 已提交
15 16


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

C
cjshannon 已提交
19

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

22
		<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 已提交
23

24 25
		<div>
		canvas — A [page:Canvas] where the renderer draws its output.<br />
D
dubejf 已提交
26 27
		context — The [page:RenderingContext] context to use.<br />
		precision — Shader precision. Can be *"highp"*, *"mediump"* or *"lowp"*. Defaults to *"highp"* if supported by the device.<br />
28
		alpha — [page:Boolean], default is *false*.<br />
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 />
D
dubejf 已提交
33 34
		depth — [page:Boolean], default is *true*.<br />
		logarithmicDepthBuffer — [page:Boolean], default is *false*.<br />
35
		</div>
M
Mr.doob 已提交
36

37
		<h2>Properties</h2>
M
Mr.doob 已提交
38

39
		<h3>[property:DOMElement domElement]</h3>
S
sole 已提交
40

41 42
		<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 已提交
43

44
		<h3>[property:WebGLRenderingContext context]</h3>
S
sole 已提交
45

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

48
		<h3>[property:Boolean autoClear]</h3>
S
sole 已提交
49

50
		<div>Defines whether the renderer should automatically clear its output before rendering.</div>
S
sole 已提交
51 52


53
		<h3>[property:Boolean autoClearColor]</h3>
S
sole 已提交
54

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


58
		<h3>[property:Boolean autoClearDepth]</h3>
S
sole 已提交
59

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


63
		<h3>[property:Boolean autoClearStencil]</h3>
S
sole 已提交
64

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


68
		<h3>[property:Boolean sortObjects]</h3>
S
sole 已提交
69

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

P
PaulJacobs 已提交
72
		<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 已提交
73 74


75
		<h3>[property:Boolean gammaInput]</h3>
S
sole 已提交
76

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


80
		<h3>[property:Boolean gammaOutput]</h3>
S
sole 已提交
81

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


85
		<h3>[property:Boolean shadowMapEnabled]</h3>
S
sole 已提交
86

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


90
		<h3>[property:Integer shadowMapType]</h3>
S
sole 已提交
91

92 93
		<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 已提交
94 95


96
		<h3>[property:Integer shadowMapCullFace]</h3>
S
sole 已提交
97

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


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

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


106
		<h3>[property:Boolean shadowMapCascade]</h3>
S
sole 已提交
107

G
gero3 已提交
108
		<div>Default is false. If Set, use cascaded shadowmaps. See [link:http://developer.download.nvidia.com/SDK/10.5/opengl/src/cascaded_shadow_maps/doc/cascaded_shadow_maps.pdf cascaded shadowmaps] for more information.</div>
S
sole 已提交
109 110


111
		<h3>[property:Integer maxMorphTargets]</h3>
S
sole 已提交
112

G
gero3 已提交
113
		<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 已提交
114 115


116
		<h3>[property:Integer maxMorphNormals]</h3>
S
sole 已提交
117

G
gero3 已提交
118
		<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 已提交
119 120


121
		<h3>[property:Boolean autoScaleCubemaps]</h3>
S
sole 已提交
122

Z
zerorzero 已提交
123
		<div>Default is true. If set, then Cubemaps are scaled, when they are bigger than the maximum size, to make sure that they aren't bigger than the maximum size.</div>
S
sole 已提交
124

M
Mr.doob 已提交
125

126
		<h3>[property:Object info]</h3>
S
sole 已提交
127

128 129
		<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 已提交
130
		<ul>
131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
			<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 已提交
146
		</ul>
147
		</div>
M
Mr.doob 已提交
148

149
		<h3>[property:ShadowMapPlugin shadowMapPlugin]</h3>
C
cjshannon 已提交
150
		<div>
G
gero3 已提交
151
		This contains the reference to the shadowMapPlugin.
152
		</div>
C
cjshannon 已提交
153 154


155
		<h2>Methods</h2>
M
Mr.doob 已提交
156

G
Greg Tatum 已提交
157
		<h3>[method:WebGLRenderingContext getContext]()</h3>
158 159 160
		<div>
		Return the WebGL context.
		</div>
M
Mr.doob 已提交
161

162 163 164 165 166
		<h3>[method:WebGLContextAttributes getContextAttributes]()</h3>
		<div>
		Returns an object that describes the attributes set on the WebGL context when it was created.
		</div>

G
Greg Tatum 已提交
167
		<h3>[method:Boolean supportsVertexTextures]()</h3>
168 169 170
		<div>
		Return a [page:Boolean] true if the context supports vertex textures.
		</div>
S
sole 已提交
171

G
Greg Tatum 已提交
172
		<h3>[method:null setSize]( [page:Integer width], [page:Integer height] )</h3>
173
		<div>Resizes the output canvas to (width, height), and also sets the viewport to fit that size, starting in (0, 0).</div>
S
sole 已提交
174

G
Greg Tatum 已提交
175
		<h3>[method:null setViewport]( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
176
		<div>Sets the viewport to render from (x, y) to (x + width, y + height).</div>
S
sole 已提交
177 178


G
Greg Tatum 已提交
179
		<h3>[method:null setScissor]( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
180
		<div>Sets the scissor area from (x, y) to (x + width, y + height).</div>
181

182
		<div>NOTE: The point (x, y) is the lower left corner of the area to be set for both of these methods. The area is defined from left to right in width but bottom to top in height. The sense of the vertical definition is opposite to the fill direction of an HTML canvas element.</div>
S
sole 已提交
183

184 185
		<h3>[method:null setScissorTest]( [page:Boolean boolean] )</h3>
		<div>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.</div>
S
sole 已提交
186

G
Greg Tatum 已提交
187
		<h3>[method:null setClearColor]( [page:Color color], [page:Float alpha] )</h3>
M
Mr.doob 已提交
188
		<div>Sets the clear color and opacity.</div>
S
sole 已提交
189

M
Mr.doob 已提交
190
		<code>// Creates a renderer with red background
191
		var renderer = new THREE.WebGLRenderer();
M
Mr.doob 已提交
192 193
		renderer.setSize( 200, 100 );
		renderer.setClearColor( 0xff0000 );
194
		</code>
S
sole 已提交
195

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

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

G
Greg Tatum 已提交
202
		<h3>[method:null clear]( [page:Boolean color], [page:Boolean depth], [page:Boolean stencil] )</h3>
203
		<div>Tells the renderer to clear its color, depth or stencil drawing buffer(s).</div>
A
abiro 已提交
204
		<div>Arguments default to true.</div>
S
sole 已提交
205

G
Greg Tatum 已提交
206
		<h3>[method:null renderBufferImmediate]( [page:Object3D object], [page:shaderprogram program], [page:Material shading] )</h3>
207
		<div>object — an instance of [page:Object3D]]<br />
G
gero3 已提交
208 209
		program — an instance of shaderProgram<br />
		shading — an instance of Material<br />
210
		</div>
G
gero3 已提交
211
		<div>
M
Mr.doob 已提交
212 213
		Render an immediate buffer. Gets called by renderImmediateObject.
		</div>
S
sole 已提交
214 215


G
Greg Tatum 已提交
216
		<h3>[method:null renderBufferDirect]( [page:Camera camera], [page:Array lights], [page:Fog fog], [page:Material material], [page:Object geometryGroup], [page:Object3D object] )</h3>
G
gero3 已提交
217
		<div>Render a buffer geometry group using the camera and with the correct material.</div>
S
sole 已提交
218 219


G
Greg Tatum 已提交
220
		<h3>[method:null renderBuffer]( [page:Camera camera], [page:Array lights], [page:Fog fog], [page:Material material], [page:Object geometryGroup], [page:Object3D object] )</h3>
G
gero3 已提交
221
		<div>Render a geometry group using the camera and with the correct material.</div>
S
sole 已提交
222 223


G
Greg Tatum 已提交
224
		<h3>[method:null render]( [page:Scene scene], [page:Camera camera], [page:WebGLRenderTarget renderTarget], [page:Boolean forceClear] )</h3>
225 226
		<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>
M
Mr.doob 已提交
227 228
		<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 已提交
229

230 231 232
		<h3>[method:null readRenderTargetPixels]( [page:WebGLRenderTarget renderTarget], [page:Float x], [page:Float y], [page:Float width], [page:Float height], buffer )</h3>
		<div>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.</div>

G
Greg Tatum 已提交
233
		<h3>[method:null renderImmediateObject]( camera, lights, fog, material, object )</h3>
G
gero3 已提交
234
		<div>Renders an immediate Object using a camera.</div>
S
sole 已提交
235 236


G
Greg Tatum 已提交
237
		<h3>[method:null setFaceCulling]( cullFace, frontFace )</h3>
238
		<div>
G
gero3 已提交
239 240
		[page:String cullFace] —- "back", "front", "front_and_back", or false.<br />
		[page:String frontFace] —- "ccw" or "cw<br />
241 242 243
		</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 已提交
244 245


G
Greg Tatum 已提交
246
		<h3>[method:null setTexture]( [page:Texture texture], [page:number slot] )</h3>
G
gero3 已提交
247 248 249 250 251 252 253
		<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>
254

G
Greg Tatum 已提交
255
		<h3>[method:null setRenderTarget]( [page:WebGLRenderTarget renderTarget] )</h3>
G
gero3 已提交
256 257 258 259 260 261
		<div>
		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated.<br />
		</div>
		<div>
		This method sets the active rendertarget.
		</div>
M
Mr.doob 已提交
262

263
		<h3>[method:boolean supportsCompressedTextureS3TC]()</h3>
C
cjshannon 已提交
264
		<div>
G
gero3 已提交
265
		This method returns true if the webgl implementation supports compressed textures of the format S3TC.
C
cjshannon 已提交
266 267
		</div>

268
		<h3>[method:number getMaxAnisotropy]()</h3>
C
cjshannon 已提交
269
		<div>
G
gero3 已提交
270
		This returns the anisotropy level of the textures.
C
cjshannon 已提交
271 272
		</div>

273
		<h3>[method:string getPrecision]()</h3>
C
cjshannon 已提交
274
		<div>
G
gero3 已提交
275
		This gets the precision used by the shaders. It returns "highp","mediump" or "lowp".
C
cjshannon 已提交
276 277
		</div>

G
Greg Tatum 已提交
278
		<h3>[method:null setMaterialFaces]([page:Material material])</h3>
C
cjshannon 已提交
279
		<div>
280
		material -- The [page:Material material] with side that shouldn't be culled.
C
cjshannon 已提交
281 282
		</div>
		<div>
G
gero3 已提交
283
		This sets which side needs to be culled in the webgl renderer.
C
cjshannon 已提交
284 285
		</div>

286
		<h3>[method:boolean supportsStandardDerivatives]()</h3>
C
cjshannon 已提交
287
		<div>
G
gero3 已提交
288
		This method returns true if the webgl implementation supports standard derivatives.
C
cjshannon 已提交
289 290
		</div>

291
		<h3>[method:boolean supportsFloatTextures]()</h3>
C
cjshannon 已提交
292
		<div>
G
gero3 已提交
293
		This method returns true if the webgl implementation supports float textures.
C
cjshannon 已提交
294 295
		</div>

G
Greg Tatum 已提交
296
		<h3>[method:null clearTarget]([page:WebGLRenderTarget renderTarget], [page:boolean color], [page:boolean depth], [page:boolean stencil])</h3>
C
cjshannon 已提交
297
		<div>
G
gero3 已提交
298 299 300 301
		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 已提交
302 303
		</div>
		<div>
G
gero3 已提交
304
		This method clears a rendertarget. To do this, it activates the rendertarget.
C
cjshannon 已提交
305 306
		</div>

307
		<h2>Source</h2>
M
Mr.doob 已提交
308

309 310 311
		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
	</body>
</html>