Skip to main content

Class: Renderable

Defined in: rendering/renderable.ts:129

Represents a renderable object in the rendering pipeline.

A Renderable encapsulates all the information needed to render a group of entities with instanced rendering. It combines geometry, material, and instance-specific callbacks to efficiently render multiple entities with the same geometry and material in a single draw call.

Example​

const renderable = new Renderable(
  quadGeometry,
  spriteMaterial,
  17, // floats per instance
  1, // render layer
  ({ position }, buffer, offset) => {
    // Bind instance data for this entity
    buffer[offset] = position.x;
    buffer[offset + 1] = position.y;
  },
  (gl, renderable) => {
    // Setup vertex attribute pointers for instanced rendering
    const posLoc = gl.getAttribLocation(renderable.material.program, 'a_position');
    gl.enableVertexAttribArray(posLoc);
    // ... configure attribute pointer
  }
);

Constructors​

Constructor​

new Renderable(geometry, material, floatsPerInstance, layer, bindInstanceData, setupInstanceAttributes): Renderable

Defined in: rendering/renderable.ts:173

Creates a new Renderable.

Parameters​

geometry​

Geometry

The geometry defining the shape to be rendered

material​

Material

The material defining how to render the geometry

floatsPerInstance​

number

The number of floats per instance in the instance buffer

layer​

number

The rendering category this renderable belongs to

bindInstanceData​

BindInstanceDataCallback

Callback to bind instance data for each entity

setupInstanceAttributes​

SetupInstanceAttributesCallback

Callback to setup instance attributes in WebGL

Returns​

Renderable

Properties​

bindInstanceData​

readonly bindInstanceData: BindInstanceDataCallback

Defined in: rendering/renderable.ts:155

Callback function that binds instance-specific data for an entity into a buffer. Called for each entity to prepare its data for instanced rendering.

category​

category: number

Defined in: rendering/renderable.ts:149

The rendering category this renderable belongs to.

floatsPerInstance​

readonly floatsPerInstance: number

Defined in: rendering/renderable.ts:146

The number of float values required per instance in the instance data buffer. This determines how much data needs to be provided for each entity being rendered.

geometry​

readonly geometry: Geometry

Defined in: rendering/renderable.ts:134

The geometry (vertex data) to be rendered. This defines the shape and structure of the mesh (e.g., a quad for sprites).

material​

readonly material: Material

Defined in: rendering/renderable.ts:140

The material (shaders and uniforms) to use for rendering. Defines how the geometry should be drawn (textures, colors, etc.).

setupInstanceAttributes​

readonly setupInstanceAttributes: SetupInstanceAttributesCallback

Defined in: rendering/renderable.ts:161

Callback function that sets up WebGL vertex attribute pointers for instanced rendering. Called to configure how instance data should be interpreted by the shader.

Methods​

bind()​

bind(gl): void

Defined in: rendering/renderable.ts:197

Prepares for drawing by binding the material and geometry for rendering.

This method binds the shader program (material) and sets up the Vertex Array Object (VAO) for the geometry. After calling this method, the renderable is ready to be drawn.

Parameters​

gl​

WebGL2RenderingContext

The WebGL2 rendering context

Returns​

void