Skip to main content

Class: Renderable

Defined in: rendering/renderable.ts:61

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,
  cameraEntity,
  17, // floats per instance
  (entity, buffer, offset) => {
    // Bind instance data for this entity
    const position = entity.getComponent(PositionComponent);
    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:105

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

bindInstanceData​

BindInstanceDataCallback

Callback to bind instance data for each entity

setupInstanceAttributes​

SetupInstanceAttributes

Callback to setup instance attributes in WebGL

Returns​

Renderable

Properties​

bindInstanceData​

readonly bindInstanceData: BindInstanceDataCallback

Defined in: rendering/renderable.ts:87

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

floatsPerInstance​

readonly floatsPerInstance: number

Defined in: rendering/renderable.ts:78

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:66

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

layer​

layer: number

Defined in: rendering/renderable.ts:81

The rendering layer this renderable belongs to.

material​

readonly material: Material

Defined in: rendering/renderable.ts:72

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

setupInstanceAttributes​

readonly setupInstanceAttributes: SetupInstanceAttributes

Defined in: rendering/renderable.ts:93

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:129

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