Molecular Rendering

🔬 Molecular Rendering

Strata provides specialized rendering for molecular structures, particle systems, and scientific visualization.

Quick Start

import { MoleculeRenderer } from '@strata-game-library/core';

<MoleculeRenderer
  atoms={moleculeData.atoms}
  bonds={moleculeData.bonds}
/>

Components

<MoleculeRenderer>

Render molecular structures:

import { MoleculeRenderer } from '@strata-game-library/core';

<MoleculeRenderer
  // Data
  atoms={[
    { element: 'C', position: [0, 0, 0] },
    { element: 'H', position: [1, 0, 0] },
    { element: 'H', position: [-0.5, 0.866, 0] },
    { element: 'H', position: [-0.5, -0.866, 0] },
    { element: 'H', position: [0, 0, 1] },
  ]}
  bonds={[
    { from: 0, to: 1 },
    { from: 0, to: 2 },
    { from: 0, to: 3 },
    { from: 0, to: 4 },
  ]}

  // Visual style
  style="ball-and-stick"  // or "space-fill", "wireframe", "cartoon"

  // Sizing
  atomScale={1}
  bondRadius={0.1}

  // Colors
  colorScheme="element"  // or "chain", "residue", "custom"
/>

<AtomicParticles>

GPU-instanced atomic particles:

import { AtomicParticles } from '@strata-game-library/core';

<AtomicParticles
  count={10000}

  // Particle properties
  positions={particlePositions}
  velocities={particleVelocities}

  // Visual
  size={0.1}
  color="#00ffff"
  glow

  // Physics
  physics
  gravity={[0, 0, 0]}
  charge={-1}
/>

Rendering Styles

Ball-and-Stick

Classic molecular visualization:

<MoleculeRenderer
  style="ball-and-stick"
  atomScale={0.3}       // Relative atom size
  bondRadius={0.1}      // Bond thickness
  bondStyle="cylinder"  // or "stick", "line"
/>

Space-Fill (CPK)

Atoms at van der Waals radii:

<MoleculeRenderer
  style="space-fill"
  atomScale={1}  // Full van der Waals radius
/>

Wireframe

Lines only:

<MoleculeRenderer
  style="wireframe"
  lineWidth={2}
  atomPoints  // Show atoms as points
/>

Cartoon (Proteins)

Secondary structure visualization:

<MoleculeRenderer
  style="cartoon"
  helixStyle="ribbon"
  sheetStyle="arrow"
  loopStyle="tube"
/>

Color Schemes

Element Colors (CPK)

<MoleculeRenderer
  colorScheme="element"
  // Uses standard CPK colors:
  // C: gray, H: white, O: red, N: blue, S: yellow, etc.
/>

Chain Colors

<MoleculeRenderer
  colorScheme="chain"
  chainColors={['#ff0000', '#00ff00', '#0000ff', '#ffff00']}
/>

Custom Colors

<MoleculeRenderer
  colorScheme="custom"
  colorFunction={(atom) => {
    if (atom.charge > 0) return '#ff0000';
    if (atom.charge < 0) return '#0000ff';
    return '#ffffff';
  }}
/>

Property-Based

<MoleculeRenderer
  colorScheme="property"
  property="temperature"
  colorScale={['#0000ff', '#00ff00', '#ff0000']}
  propertyRange={[0, 100]}
/>

Animation

Vibration Modes

<MoleculeRenderer
  animation="vibration"
  vibrationMode={0}       // Normal mode index
  vibrationAmplitude={0.1}
  vibrationSpeed={1}
/>

Trajectory Playback

<MoleculeRenderer
  animation="trajectory"
  trajectory={trajectoryData}
  frame={currentFrame}
  interpolate
/>

Rotation

<MoleculeRenderer
  autoRotate
  rotationSpeed={0.5}
  rotationAxis={[0, 1, 0]}
/>

Loading Molecular Data

PDB Files

import { loadPDB } from '@strata-game-library/core/molecular';

const molecule = await loadPDB('/proteins/1crn.pdb');

<MoleculeRenderer
  atoms={molecule.atoms}
  bonds={molecule.bonds}
  residues={molecule.residues}
  chains={molecule.chains}
/>

SDF/MOL Files

import { loadSDF } from '@strata-game-library/core/molecular';

const molecule = await loadSDF('/molecules/caffeine.sdf');

<MoleculeRenderer
  atoms={molecule.atoms}
  bonds={molecule.bonds}
/>

XYZ Files

import { loadXYZ } from '@strata-game-library/core/molecular';

const trajectory = await loadXYZ('/trajectories/water.xyz');

<MoleculeRenderer
  atoms={trajectory.frames[0].atoms}
/>

Particle Systems

Electron Cloud

import { ElectronCloud } from '@strata-game-library/core';

<ElectronCloud
  nucleusPosition={[0, 0, 0]}
  orbitalType="2p"
  electronCount={6}

  // Visual
  cloudDensity={1000}
  cloudOpacity={0.3}
  cloudColor="#0088ff"

  // Animation
  animated
  orbitSpeed={1}
/>

Particle Field

import { ParticleField } from '@strata-game-library/core';

<ParticleField
  count={5000}

  // Distribution
  shape="sphere"
  radius={10}

  // Properties
  velocityField={(position) => {
    return [
      -position[1],
      position[0],
      0
    ];
  }}

  // Forces
  forces={[
    { type: 'gravity', strength: -9.8, direction: [0, 1, 0] },
    { type: 'drag', strength: 0.1 }
  ]}

  // Visual
  pointSize={0.05}
  colorByVelocity
/>

Scientific Visualization

Isosurfaces

import { Isosurface } from '@strata-game-library/core';

<Isosurface
  data={volumetricData}
  isoValue={0.5}
  color="#00ffff"
  opacity={0.7}

  // Quality
  resolution={64}
  smooth
/>

Vector Fields

import { VectorField } from '@strata-game-library/core';

<VectorField
  data={vectorFieldData}

  // Display
  style="arrows"  // or "streamlines", "glyphs"
  scale={1}
  colorByMagnitude

  // Density
  sampleDensity={[10, 10, 10]}
/>

Performance

Large Molecules

// For proteins with 10,000+ atoms
<MoleculeRenderer
  atoms={largeProtein.atoms}

  // Optimization
  instancedRendering  // Use GPU instancing
  lodEnabled
  lodDistances={[50, 150, 500]}

  // Culling
  frustumCulling
  occlusionCulling
/>

Many Particles

// For simulations with 100,000+ particles
<AtomicParticles
  count={100000}

  // Use GPU compute
  gpuCompute
  computeShader={particleComputeShader}

  // Rendering
  pointSprites  // Faster than spheres
/>

Related

• Ray Marching - Volume rendering
• Volumetrics - Atmospheric effects
• Shaders - Custom visualization shaders