0
# WebGL & 3D Graphics
1

2
Complete 3D graphics system with primitives, lighting, materials, shaders, cameras, and advanced WebGL features for creating immersive 3D experiences.
3

4
## Capabilities
5

6
### 3D Canvas Setup
7

8
Creating 3D-enabled canvas and basic 3D functionality.
9

10
```javascript { .api }
11
/**
12
 * Create canvas with WebGL renderer for 3D graphics
13
 * @param {number} width - Canvas width
14
 * @param {number} height - Canvas height
15
 * @param {string} WEBGL - Use WEBGL constant for 3D mode
16
 */
17
function createCanvas(width, height, WEBGL);
18
```
19

20
### 3D Primitive Shapes
21

22
Basic 3D geometric primitives for building 3D scenes.
23

24
```javascript { .api }
25
/**
26
 * Draw 3D box
27
 * @param {number} [width] - Box width
28
 * @param {number} [height] - Box height  
29
 * @param {number} [depth] - Box depth
30
 * @param {number} [detailX] - X-axis detail level
31
 * @param {number} [detailY] - Y-axis detail level
32
 */
33
function box(width, height, depth, detailX, detailY);
34

35
/**
36
 * Draw sphere
37
 * @param {number} [radius] - Sphere radius
38
 * @param {number} [detailX] - Horizontal detail level
39
 * @param {number} [detailY] - Vertical detail level
40
 */
41
function sphere(radius, detailX, detailY);
42

43
/**
44
 * Draw cylinder
45
 * @param {number} [radius] - Cylinder radius
46
 * @param {number} [height] - Cylinder height
47
 * @param {number} [detailX] - Radial detail level
48
 * @param {number} [detailY] - Height detail level
49
 * @param {boolean} [bottomCap] - Include bottom cap
50
 * @param {boolean} [topCap] - Include top cap
51
 */
52
function cylinder(radius, height, detailX, detailY, bottomCap, topCap);
53

54
/**
55
 * Draw cone
56
 * @param {number} [radius] - Cone base radius
57
 * @param {number} [height] - Cone height
58
 * @param {number} [detailX] - Radial detail level
59
 * @param {number} [detailY] - Height detail level
60
 * @param {boolean} [cap] - Include base cap
61
 */
62
function cone(radius, height, detailX, detailY, cap);
63

64
/**
65
 * Draw ellipsoid
66
 * @param {number} [radiusX] - X-axis radius
67
 * @param {number} [radiusY] - Y-axis radius
68
 * @param {number} [radiusZ] - Z-axis radius
69
 * @param {number} [detailX] - X-axis detail level
70
 * @param {number} [detailY] - Y-axis detail level
71
 */
72
function ellipsoid(radiusX, radiusY, radiusZ, detailX, detailY);
73

74
/**
75
 * Draw torus
76
 * @param {number} [radius] - Torus radius
77
 * @param {number} [tubeRadius] - Tube radius
78
 * @param {number} [detailX] - Radial detail level
79
 * @param {number} [detailY] - Tubular detail level
80
 */
81
function torus(radius, tubeRadius, detailX, detailY);
82

83
/**
84
 * Draw plane
85
 * @param {number} [width] - Plane width
86
 * @param {number} [height] - Plane height
87
 * @param {number} [detailX] - Width detail level
88
 * @param {number} [detailY] - Height detail level
89
 */
90
function plane(width, height, detailX, detailY);
91
```
92

93
### 3D Transformations
94

95
Extended transformation functions for 3D space.
96

97
```javascript { .api }
98
/**
99
 * Translate in 3D space
100
 * @param {number} x - X translation
101
 * @param {number} y - Y translation
102
 * @param {number} z - Z translation
103
 */
104
function translate(x, y, z);
105

106
/**
107
 * Rotate around X-axis
108
 * @param {number} angle - Rotation angle
109
 */
110
function rotateX(angle);
111

112
/**
113
 * Rotate around Y-axis
114
 * @param {number} angle - Rotation angle
115
 */
116
function rotateY(angle);
117

118
/**
119
 * Rotate around Z-axis
120
 * @param {number} angle - Rotation angle
121
 */
122
function rotateZ(angle);
123

124
/**
125
 * Scale in 3D space
126
 * @param {number} s - Uniform scale or X scale
127
 * @param {number} [y] - Y scale
128
 * @param {number} [z] - Z scale
129
 */
130
function scale(s, y, z);
131
```
132

133
### Camera and Projection
134

135
Camera control and projection settings for 3D scenes.
136

137
```javascript { .api }
138
/**
139
 * Set camera position and orientation
140
 * @param {number} [x] - Camera X position
141
 * @param {number} [y] - Camera Y position
142
 * @param {number} [z] - Camera Z position
143
 * @param {number} [centerX] - Look-at X coordinate
144
 * @param {number} [centerY] - Look-at Y coordinate
145
 * @param {number} [centerZ] - Look-at Z coordinate
146
 * @param {number} [upX] - Up vector X component
147
 * @param {number} [upY] - Up vector Y component
148
 * @param {number} [upZ] - Up vector Z component
149
 */
150
function camera(x, y, z, centerX, centerY, centerZ, upX, upY, upZ);
151

152
/**
153
 * Set perspective projection
154
 * @param {number} [fovy] - Field of view angle in Y direction
155
 * @param {number} [aspect] - Aspect ratio (width/height)
156
 * @param {number} [near] - Near clipping plane distance
157
 * @param {number} [far] - Far clipping plane distance
158
 */
159
function perspective(fovy, aspect, near, far);
160

161
/**
162
 * Set orthographic projection
163
 * @param {number} [left] - Left clipping plane
164
 * @param {number} [right] - Right clipping plane
165
 * @param {number} [bottom] - Bottom clipping plane
166
 * @param {number} [top] - Top clipping plane
167
 * @param {number} [near] - Near clipping plane
168
 * @param {number} [far] - Far clipping plane
169
 */
170
function ortho(left, right, bottom, top, near, far);
171

172
/**
173
 * Set frustum projection
174
 * @param {number} [left] - Left clipping plane
175
 * @param {number} [right] - Right clipping plane
176
 * @param {number} [bottom] - Bottom clipping plane
177
 * @param {number} [top] - Top clipping plane
178
 * @param {number} [near] - Near clipping plane
179
 * @param {number} [far] - Far clipping plane
180
 */
181
function frustum(left, right, bottom, top, near, far);
182

183
/**
184
 * Create camera object
185
 * @returns {p5.Camera} Camera object
186
 */
187
function createCamera();
188
```
189

190
### Lighting
191

192
Lighting system for realistic 3D rendering.
193

194
```javascript { .api }
195
/**
196
 * Create ambient light
197
 * @param {...(number|string|p5.Color)} args - Light color values
198
 */
199
function ambientLight(...args);
200

201
/**
202
 * Create directional light
203
 * @param {...(number|string|p5.Color|p5.Vector)} args - Color and direction values
204
 */
205
function directionalLight(...args);
206

207
/**
208
 * Create point light
209
 * @param {...(number|string|p5.Color)} args - Color and position values
210
 */
211
function pointLight(...args);
212

213
/**
214
 * Create spot light
215
 * @param {...(number|string|p5.Color|p5.Vector)} args - Color, position, direction, angle, concentration values
216
 */
217
function spotLight(...args);
218

219
/**
220
 * Remove all lights from scene
221
 */
222
function noLights();
223
```
224

225
### Materials and Shaders
226

227
Material properties and shader system for advanced rendering.
228

229
```javascript { .api }
230
/**
231
 * Set ambient material properties
232
 * @param {...(number|string|p5.Color)} args - Material color values
233
 */
234
function ambientMaterial(...args);
235

236
/**
237
 * Set emissive material properties
238
 * @param {...(number|string|p5.Color)} args - Material color values
239
 */
240
function emissiveMaterial(...args);
241

242
/**
243
 * Set specular material properties
244
 * @param {...(number|string|p5.Color)} args - Material color values
245
 */
246
function specularMaterial(...args);
247

248
/**
249
 * Set material shininess
250
 * @param {number} shine - Shininess value
251
 */
252
function shininess(shine);
253

254
/**
255
 * Apply normal material (shows surface normals as colors)
256
 */
257
function normalMaterial();
258

259
/**
260
 * Apply texture to geometry
261
 * @param {p5.Image|p5.MediaElement|p5.Graphics} tex - Texture image
262
 */
263
function texture(tex);
264

265
/**
266
 * Set texture coordinate mode
267
 * @param {string} mode - NORMAL or IMAGE
268
 */
269
function textureMode(mode);
270

271
/**
272
 * Set texture wrapping behavior
273
 * @param {string} wrapX - Horizontal wrap mode (CLAMP, REPEAT, MIRROR)
274
 * @param {string} [wrapY] - Vertical wrap mode
275
 */
276
function textureWrap(wrapX, wrapY);
277

278
/**
279
 * Load shader from files
280
 * @param {string} vertFilename - Vertex shader file path
281
 * @param {string} fragFilename - Fragment shader file path
282
 * @param {function} [callback] - Success callback
283
 * @param {function} [errorCallback] - Error callback
284
 * @returns {p5.Shader} Shader object
285
 */
286
function loadShader(vertFilename, fragFilename, callback, errorCallback);
287

288
/**
289
 * Create shader from source code
290
 * @param {string} vertSource - Vertex shader source
291
 * @param {string} fragSource - Fragment shader source
292
 * @returns {p5.Shader} Shader object
293
 */
294
function createShader(vertSource, fragSource);
295

296
/**
297
 * Apply shader to geometry
298
 * @param {p5.Shader} s - Shader to apply
299
 */
300
function shader(s);
301

302
/**
303
 * Reset to default shader
304
 */
305
function resetShader();
306
```
307

308
### 3D Classes
309

310
Key classes for advanced 3D graphics programming.
311

312
```javascript { .api }
313
/**
314
 * 3D camera with position, orientation, and projection controls
315
 */
316
class p5.Camera {
317
  /**
318
   * Move camera to position
319
   * @param {number} x - X position
320
   * @param {number} y - Y position
321
   * @param {number} z - Z position
322
   */
323
  move(x, y, z);
324
  
325
  /**
326
   * Set camera look-at target
327
   * @param {number} x - Target X coordinate
328
   * @param {number} y - Target Y coordinate
329
   * @param {number} z - Target Z coordinate
330
   */
331
  lookAt(x, y, z);
332
  
333
  /**
334
   * Orbit camera around point
335
   * @param {number} radius - Orbit radius
336
   * @param {number} theta - Horizontal angle
337
   * @param {number} phi - Vertical angle
338
   */
339
  orbit(radius, theta, phi);
340
  
341
  /**
342
   * Copy camera state from another camera
343
   * @param {p5.Camera} cam - Camera to copy from
344
   */
345
  copy(cam);
346
}
347

348
/**
349
 * GLSL shader program wrapper
350
 */
351
class p5.Shader {
352
  /**
353
   * Set uniform variable value
354
   * @param {string} uniformName - Uniform variable name
355
   * @param {*} data - Uniform value
356
   */
357
  setUniform(uniformName, data);
358
}
359

360
/**
361
 * 3D geometry container with vertices, faces, normals, UVs
362
 */
363
class p5.Geometry {
364
  /** Array of vertex positions */
365
  vertices;
366
  /** Array of face indices */
367
  faces;
368
  /** Array of normal vectors */
369
  vertexNormals;
370
  /** Array of UV coordinates */
371
  uvs;
372
  
373
  /**
374
   * Compute face and vertex normals
375
   */
376
  computeNormals();
377
  
378
  /**
379
   * Normalize geometry to unit size
380
   * @returns {p5.Geometry} This geometry for chaining
381
   */
382
  normalize();
383
}
384

385
/**
386
 * WebGL texture wrapper for images, videos, graphics
387
 */
388
class p5.Texture {
389
  /**
390
   * Update texture from source
391
   */
392
  update();
393
}
394

395
/**
396
 * Off-screen rendering target
397
 */
398
class p5.Framebuffer {
399
  /** Framebuffer width */
400
  width;
401
  /** Framebuffer height */
402
  height;
403
  
404
  /**
405
   * Begin drawing to framebuffer
406
   */
407
  begin();
408
  
409
  /**
410
   * End drawing to framebuffer
411
   */
412
  end();
413
  
414
  /**
415
   * Get framebuffer as texture
416
   * @returns {p5.Texture} Framebuffer texture
417
   */
418
  color;
419
  
420
  /**
421
   * Get depth buffer as texture
422
   * @returns {p5.Texture} Depth texture
423
   */
424
  depth;
425
}
426
```
427

428
See complete 3D graphics examples, shader tutorials, and WebGL-specific documentation in the p5.js reference.