WebGLRenderer.html 13.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>[property: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

41
		<h3>[property:WebGLRenderingContext 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>[property: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>[property: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>[property: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>[property: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>[property: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>[property:Boolean autoUpdateObjects]</h3>
S
sole 已提交
73

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

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

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


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

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


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

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


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

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


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

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


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

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


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

G
gero3 已提交
109
		<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 已提交
110 111


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

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


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

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


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

Z
zerorzero 已提交
124
		<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 已提交
125

M
Mr.doob 已提交
126

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

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

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


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

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

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


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

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


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

G
Greg Tatum 已提交
179
		<h3>[method:null enableScissorTest]( [page:Boolean enable] )</h3>
180
		<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 已提交
181

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

M
Mr.doob 已提交
185
		<code>// Creates a renderer with red background
186 187
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(200, 100);
M
Mr.doob 已提交
188
		renderer.setClearColor(0xff0000, 1);
189
		</code>
S
sole 已提交
190

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

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

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

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


G
Greg Tatum 已提交
211
		<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 已提交
212
		<div>Render a buffer geometry group using the camera and with the correct material.</div>
S
sole 已提交
213 214


G
Greg Tatum 已提交
215
		<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 已提交
216
		<div>Render a geometry group using the camera and with the correct material.</div>
S
sole 已提交
217 218


G
Greg Tatum 已提交
219
		<h3>[method:null render]( [page:Scene scene], [page:Camera camera], [page:WebGLRenderTarget renderTarget], [page:Boolean forceClear] )</h3>
220 221
		<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 已提交
222 223
		<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 已提交
224

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


G
Greg Tatum 已提交
229
		<h3>[method:null setFaceCulling]( cullFace, frontFace )</h3>
230
		<div>
G
gero3 已提交
231 232
		[page:String cullFace] —- "back", "front", "front_and_back", or false.<br />
		[page:String frontFace] —- "ccw" or "cw<br />
233 234 235
		</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 已提交
236 237


G
Greg Tatum 已提交
238
		<h3>[method:null setDepthTest]( [page:boolean depthTest] )</h3>
G
gero3 已提交
239 240 241 242 243 244
		<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 已提交
245

G
Greg Tatum 已提交
246
		<h3>[method:null setDepthWrite]( [page:boolean depthWrite] )</h3>
G
gero3 已提交
247 248 249 250 251 252
		<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 已提交
253 254


G
Greg Tatum 已提交
255
		<h3>[method:null setBlending]( [page:number blending], [page:number blendEquation], [page:number blendSrc], [page:number blendDst] )</h3>
G
gero3 已提交
256
		<div>
G
gero3 已提交
257 258 259 260
		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 已提交
261 262
		</div>
		<div>
G
gero3 已提交
263
		This method sets the correct blending.
G
gero3 已提交
264
		</div>
265

G
Greg Tatum 已提交
266
		<h3>[method:null setTexture]( [page:Texture texture], [page:number slot] )</h3>
G
gero3 已提交
267 268 269 270 271 272 273
		<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>
274

G
Greg Tatum 已提交
275
		<h3>[method:null setRenderTarget]( [page:WebGLRenderTarget renderTarget] )</h3>
G
gero3 已提交
276 277 278 279 280 281
		<div>
		renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated.<br />
		</div>
		<div>
		This method sets the active rendertarget.
		</div>
M
Mr.doob 已提交
282

283
		<h3>[method:boolean supportsCompressedTextureS3TC]()</h3>
C
cjshannon 已提交
284
		<div>
G
gero3 已提交
285
		This method returns true if the webgl implementation supports compressed textures of the format S3TC.
C
cjshannon 已提交
286 287
		</div>

288
		<h3>[method:number getMaxAnisotropy]()</h3>
C
cjshannon 已提交
289
		<div>
G
gero3 已提交
290
		This returns the anisotropy level of the textures.
C
cjshannon 已提交
291 292
		</div>

293
		<h3>[method:string getPrecision]()</h3>
C
cjshannon 已提交
294
		<div>
G
gero3 已提交
295
		This gets the precision used by the shaders. It returns "highp","mediump" or "lowp".
C
cjshannon 已提交
296 297
		</div>

G
Greg Tatum 已提交
298
		<h3>[method:null setMaterialFaces]([page:Material material])</h3>
C
cjshannon 已提交
299
		<div>
300
		material -- The [page:Material material] with side that shouldn't be culled.
C
cjshannon 已提交
301 302
		</div>
		<div>
G
gero3 已提交
303
		This sets which side needs to be culled in the webgl renderer.
C
cjshannon 已提交
304 305
		</div>

306
		<h3>[method:boolean supportsStandardDerivatives]()</h3>
C
cjshannon 已提交
307
		<div>
G
gero3 已提交
308
		This method returns true if the webgl implementation supports standard derivatives.
C
cjshannon 已提交
309 310
		</div>

311
		<h3>[method:boolean supportsFloatTextures]()</h3>
C
cjshannon 已提交
312
		<div>
G
gero3 已提交
313
		This method returns true if the webgl implementation supports float textures.
C
cjshannon 已提交
314 315
		</div>

G
Greg Tatum 已提交
316
		<h3>[method:null clearTarget]([page:WebGLRenderTarget renderTarget], [page:boolean color], [page:boolean depth], [page:boolean stencil])</h3>
C
cjshannon 已提交
317
		<div>
G
gero3 已提交
318 319 320 321
		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 已提交
322 323
		</div>
		<div>
G
gero3 已提交
324
		This method clears a rendertarget. To do this, it activates the rendertarget.
C
cjshannon 已提交
325 326
		</div>

327
		<h2>Source</h2>
M
Mr.doob 已提交
328

329 330 331
		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
	</body>
</html>