Urchin Reference - Renderer

The Renderer object is used to render frames completely in the main thread of JavaScript as well as provide key static functions that enable frame drawing and screen projection. The Renderer class does not rely on WebWorkers like its child class, PerformanceRenderer, so it can offer a better level of compatibility with older browsers; however, it is NOT recommended to animate large Scenes in real time with Renderer since it has the potential to lock up the main thread and cause event loss in the event loop.

If you are planning to continuously animate a large Scene, it is recommended to use the PerformanceRenderer object instead.

Constructors

Renderer( ): Renderer

Initializes with default attribute values.

Renderer( { canvas?: HTMLCanvasElement, backgroundColor?: Color, fullscreen?: boolean, superSampling?: number, showPerformance?: boolean, suspendOnBlur?: boolean } ): Renderer

Initializes with the given attribute values. Default values are

canvas	A new canvas element (720x480) that is appended to the document body.	The HTMLCanvasElement that will be used to create a CanvasRenderingContext2D.
backgroundColor	new Color("SILVER")	The background color that will be drawn over the previous image data on the canvas. If a completely transparent color is provided, then the canvas will be cleared before drawing. See also: Color
fullscreen	false	If true, the canvas element will be resized to fit the size of the window on initialization as well as every time the window is resized.
superSampling	1	The ratio of canvas pixels to screen pixels that will be rendered. If this value is not equal to 1, then the provided canvas element will be given a fixed pixel size based on its current width and height, and then its width and height values will be multiplied by the superSampling value.
showPerformance	false	If true, the performance statistics from the Renderer's Stats object will be displayed on the window. See also: Stats
suspendOnBlur	true	If true, the renderer will not render any frames when the window is not focused by the user.

Constants

Renderer.DRAW_HEADER_SIZE = 6	The number of Float32 values that are needed for constructing the header of the frame draw data.
Renderer.DRAW_FRAG_SIZE = 14	The number of Float32 values that are needed for constructing each Fragment as frame draw data.

Variables

Public Variables

backgroundColor: Color	The background color that will be drawn over the previous image data on the canvas. If a completely transparent color is provided, then the canvas will be cleared before drawing. See also: Color

Protected Variables

canvas: HTMLCanvasElement	The HTMLCanvasElement that will be used to create a CanvasRenderingContext2D. Note: This value should not be changed after initialization.
ctx: CanvasRenderingContext2D	The CanvasRenderingContext2D that will be used to render the frame image. Note: This value should not be changed after initialization.
lastDraw: ArrayBuffer	The ArrayBuffer that stores the last frame's draw data. This is typically used to re-draw a frame if a fullscreen render is resized.
stats: Stats	The Stats object used to record and display performance statistics for the renderer. See also: Stats
superSampling: number	The ratio of canvas pixels to screen pixels that will be rendered. Note: This value should not be changed after initialization.

Functions

Public Functions

project(v: Vector, camera: Camera, superSamplePosition?: boolean): Vector	Projects a given 3D Vector onto screen coordinates as seen through the given Camera. If superSamplePosition is true, then the image pixel coordinates are returned instead of canvas screen coordinates. superSamplePosition is false by default. See also: Vector, Camera
render(scene: Scene, camera: Camera): void	Renders one frame of the Scene from the perspective of the given Camera. See also: Scene, Camera
resize(width?: number, height?: number): void	Resizes the canvas image size to the given values or the window size if values are omitted.

Static Functions

Renderer.draw(data: ArrayBuffer, ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): void

Saves the context and draws the fragment data provided to the canvas before restoring the context at the end.

data format:

Content	Size (# of Float32)	Data Order
HEADER DATA
Background Color	4	red, green, blue, alpha
Dimensions	2	width, height
FRAGMENT DATA (per fragment)
Screen Vertex 0	2	x, y
Screen Vertex 1	2	x, y
Screen Vertex 2	2	x, y
Fill Color	4	red, green, blue, alpha
Wire Color	4	red, green, blue, alpha

Renderer.getCameraInstance(scene: Scene, camera: Camera): FrameInstance

Returns the FrameInstance of the Scene as seen through the given Camera. See also: FrameInstance, Scene, Camera

Renderer.light(frag: Fragment, lights: List<Light>): Material

Returns a new Material for a Fragment after being lit by a List of Lights. See also: Fragment, List, Light

Renderer.project(v: Vector, fov: number, w: number, h: number): Vector

Projects a given 3D Vector onto screen coordinates with reference to the width (w) and height (h) given. The vector will be viewed from the origin looking down the positive X-Axis with the given fov. See also: Vector

Renderer.sortFragments(fragments: List<Fragment>): List<Fragment>

Uses a custom bucket-sort algorithm to return a sorted List of Fragments based on their priority in the List. See also: Fragment, List

Home