Skip to content
vgai Learn

Rendering, cameras & meshes

vgai’s primary render surface is Three.js 3D over WebGL. There’s no abstraction layer — ctx.scene, ctx.camera, and ctx.composer are the real Three.js objects.

Scene and camera render through the EffectComposer to the screen
The render pipeline.

The renderer

Section titled “The renderer”

Setup (packages/engine/src/setup/setup-renderer.ts) creates a THREE.WebGLRenderer with:

  • antialias: true, powerPreference: 'high-performance';
  • PCF soft shadow maps (shadowMap.type = PCFSoftShadowMap, enabled);
  • ACES Filmic tone mapping with exposure 1.0;
  • pixel ratio clamped to Math.min(devicePixelRatio, 2).

Rendering goes through an EffectComposer rather than a bare renderer.render(), so the post-processing stack can insert passes.

Cameras

Section titled “Cameras”

The camera schema (packages/engine/src/scene/schema/camera.ts) supports two projections:

typeKey fields
perspectivefov (vertical FOV in degrees), near, far
orthographicorthoSize (half-height of the frustum), near, far

Both accept optional width / height (defaulting to the viewport). Camera precedence is editor viewport < scene-defined camera < a camera GameComponent — a component can drive the camera each frame (follow cams, orbit cams).

Mesh geometries

Section titled “Mesh geometries”

The mesh schema (packages/engine/src/scene/schema/mesh.ts) builds geometry from a type:

typeargs
box[w, h, d]
sphere[radius]
plane[w, h]
cylinder[rTop, rBot, h]
capsule[radius, length]
gltf(none — set src to a .gltf/.glb)

Beyond primitives, a mesh can be produced by a registered geometry generator (generator

  • generatorParams, e.g. Terrain) or rendered as a single InstancedMesh via an instancer (instancer + instancerParams). See Geometry: instancing & terrain.

See also

Section titled “See also”