DeMol

High-performance 3D graphics rendering using WebGL technology for molecular visualization.

Features

Hardware Acceleration

GPU-accelerated rendering for complex molecular structures

Custom Shaders

Flexible shader system for advanced visualization effects

Performance Optimization

Efficient rendering techniques for large molecular systems

Cross-platform

Compatible with modern web browsers and devices

Architecture

interface WebGLConfig {
  canvas: HTMLCanvasElement;      // WebGL canvas element
  context?: {                     // WebGL context settings
    alpha?: boolean;              // Enable alpha channel
    antialias?: boolean;          // Enable antialiasing
    depth?: boolean;              // Enable depth testing
    stencil?: boolean;            // Enable stencil testing
  };
  renderer?: {                    // Renderer settings
    precision?: 'highp' | 'mediump' | 'lowp';
    maxLights?: number;           // Maximum number of lights
    shadowMap?: boolean;          // Enable shadow mapping
  };
}

Core Components

GLViewer

Main WebGL viewer component

class GLViewer {
  constructor(config: WebGLConfig);
  render(): void;
  resize(width: number, height: number): void;
  dispose(): void;
}

GLModel

3D model management

class GLModel {
  constructor(viewer: GLViewer);
  load(data: ModelData): Promise<void>;
  update(): void;
  dispose(): void;
}

GLShape

Basic shape rendering

class GLShape {
  constructor(viewer: GLViewer);
  setGeometry(geometry: Geometry): void;
  setMaterial(material: Material): void;
  render(): void;
}

Example

// Create WebGL viewer
const viewer = new GLViewer({
  canvas: document.getElementById('gl-canvas'),
  context: {
    alpha: true,
    antialias: true,
    depth: true
  },
  renderer: {
    precision: 'highp',
    maxLights: 8,
    shadowMap: true
  }
});

// Create model
const model = new GLModel(viewer);

// Load molecular data
await model.load(molecularData);

// Create shape
const shape = new GLShape(viewer);
shape.setGeometry(new SphereGeometry(1, 32, 32));
shape.setMaterial(new PhongMaterial({
  color: '#ff0000',
  shininess: 100
}));

// Render loop
function animate() {
  viewer.render();
  requestAnimationFrame(animate);
}
animate();

WebGL Overview