forked from mrdoob/three.js
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCanvasRenderer.html
More file actions
163 lines (132 loc) · 5.32 KB
/
CanvasRenderer.html
File metadata and controls
163 lines (132 loc) · 5.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<div class="desc">
The Canvas renderer displays your beautifully crafted scenes <em>not</em> using WebGL, but draws it using the (slower) <a href="http://drafts.htmlwg.org/2dcontext/html5_canvas_CR/Overview.html">Canvas 2D Context</a> API.<br /><br />
This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:
<code>
function webglAvailable() {
try {
var canvas = document.createElement( 'canvas' );
return !!( window.WebGLRenderingContext && (
canvas.getContext( 'webgl' ) ||
canvas.getContext( 'experimental-webgl' ) )
);
} catch ( e ) {
return false;
}
}
if ( webglAvailable() ) {
renderer = new THREE.WebGLRenderer();
} else {
renderer = new THREE.CanvasRenderer();
}
</code>
Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 <canvas> tag.
The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.<br /><br />
Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
Because the Canvas renderer is not part of the three.js core, you have to include it from /examples/js/renderers/.
</div>
<h2>Constructor</h2>
<h3>[name]([page:object parameters])</h3>
<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>
<div>
canvas — A [page:Canvas] where the renderer draws its output.
</div>
<h2>Properties</h2>
<h3>[property:Object info]</h3>
<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>
<ul>
<li>render:
<ul>
<li>vertices</li>
<li>faces</li>
</ul>
</li>
</ul>
</div>
<h3>[property:DOMElement domElement]</h3>
<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>
<h3>[property:Boolean autoClear]</h3>
<div>
Defines whether the renderer should automatically clear its output before rendering.
</div>
<h3>[property:Boolean sortObjects]</h3>
<div>
Defines whether the renderer should sort objects. Default is true.<br />
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>
<h3>[property:boolean sortElements]</h3>
<div>
Defines whether the renderer should sort the face of each object. Default is true.
</div>
<h2>Methods</h2>
<h3>[method:null render]([page:Scene scene], [page:Camera camera])</h3>
<div>
scene -- The scene to render. <br />
camera -- the camera to view the scene.
</div>
<div>
Render a scene using a camera.
</div>
<h3>[method:null clear]()</h3>
<div>
Tells the renderer to clear its color drawing buffer with the clearcolor.
</div>
<h3>[method:null setClearColor]([page:Color color], [page:number alpha])</h3>
<div>
color -- The color to clear the canvas with. <br />
alpha -- The alpha channel to clear the canvas with.
</div>
<div>
This set the clearColor and the clearAlpha.
</div>
<h3>[method:null setSize]([page:Number width], [page:Number height])</h3>
<div>
width -- The width of the drawing canvas. <br />
height -- The height of the drawing canvas.
</div>
<div>
This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
</div>
<h3>[method:null setClearColorHex]([page:number hex], [page:number alpha])</h3>
<div>
hex -- The the hexadecimal value of the color to clear the canvas with. <br />
alpha -- The alpha channel to clear the canvas with.
</div>
<div>
This set the clearColor and the clearAlpha.
</div>
<h3>[method:number getClearColorHex]()</h3>
<div>
Returns the [page:number hex] color.
</div>
<h3>[method:number getClearAlpha]()</h3>
<div>
Returns the alpha value.
</div>
<h2>Empty Methods to Maintain Compatibility with [page:WebglRenderer]</h2>
<div>
[method:null clearColor]()<br/>
[method:null clearDepth]()<br/>
[method:null clearStencil]()<br/>
[method:null setFaceCulling]()<br/>
[method:null supportsVertexTextures]()<br/>
[method:number getMaxAnisotropy]() - returns 1 <br/>
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>