GLDraw

The drawing component that provides low-level WebGL rendering capabilities for custom visualizations.

Constructor

new GLDraw(viewer: GLViewer, options?: DrawConfig)

Configuration Options

interface DrawConfig {
  shader?: string;                // Custom shader program
  blendMode?: 'normal' | 'add';   // Blending mode
  depthTest?: boolean;            // Enable depth testing
  cullFace?: boolean;             // Enable face culling
  lineWidth?: number;             // Line width for wireframe
  pointSize?: number;             // Point size for point cloud
}

Methods

drawPoints

Renders a point cloud

drawPoints(positions: Float32Array, colors: Float32Array, size: number): void

drawLines

Renders line segments

drawLines(positions: Float32Array, colors: Float32Array, width: number): void

drawTriangles

Renders triangle mesh

drawTriangles(positions: Float32Array, colors: Float32Array, indices: Uint16Array): void

setShader

Sets custom shader program

setShader(vertexShader: string, fragmentShader: string): void

Drawing Modes

Points

Point cloud visualization

Lines

Wireframe and line drawing

Triangles

Solid mesh rendering

Custom Shaders

Advanced rendering effects

Example

// Create draw component
const draw = new GLDraw(viewer, {
  blendMode: 'normal',
  depthTest: true,
  lineWidth: 2
});

// Draw points
const positions = new Float32Array([0, 0, 0, 1, 0, 0, 0, 1, 0]);
const colors = new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]);
draw.drawPoints(positions, colors, 5);

// Draw lines
const linePositions = new Float32Array([0, 0, 0, 1, 1, 1]);
const lineColors = new Float32Array([1, 1, 1, 1, 1, 1]);
draw.drawLines(linePositions, lineColors, 2);

Related Components

Learn more about other core components:

GLViewer

Main viewer component

GLShape

Basic shape rendering

GLShapeProtein Surface