DeMol

Advanced rendering techniques for molecular visualization.

Rendering Techniques

Forward Rendering

Standard rendering pipeline with multiple passes

Deferred Rendering

Advanced lighting with multiple render targets

Render Configuration

interface RenderConfig {
  technique: 'forward' | 'deferred';  // Rendering technique
  passes: {                          // Render passes
    [key: string]: {
      enabled: boolean;              // Enable/disable pass
      order: number;                 // Pass execution order
      shader?: string;               // Custom shader for pass
    };
  };
  postProcessing?: {                 // Post-processing effects
    enabled: boolean;
    effects: string[];              // List of effects to apply
  };
  optimization?: {                   // Performance optimization
    culling: boolean;               // Enable frustum culling
    occlusion: boolean;             // Enable occlusion culling
    instancing: boolean;            // Enable instanced rendering
  };
}

Render Passes

Geometry Pass

Render geometry and material properties

// Geometry pass shader
varying vec3 vPosition;
varying vec3 vNormal;
varying vec4 vColor;

void main() {
  // Store position, normal, and color in G-buffer
  gl_FragData[0] = vec4(vPosition, 1.0);
  gl_FragData[1] = vec4(vNormal, 1.0);
  gl_FragData[2] = vColor;
}

Lighting Pass

Calculate lighting using G-buffer data

// Lighting pass shader
uniform sampler2D gPosition;
uniform sampler2D gNormal;
uniform sampler2D gColor;

void main() {
  vec3 position = texture2D(gPosition, vUv).rgb;
  vec3 normal = texture2D(gNormal, vUv).rgb;
  vec4 color = texture2D(gColor, vUv);
  
  // Calculate lighting
  vec3 lightDir = normalize(lightPosition - position);
  float diff = max(dot(normal, lightDir), 0.0);
  vec3 lighting = color.rgb * diff;
  
  gl_FragColor = vec4(lighting, 1.0);
}

Post-processing Pass

Apply visual effects and filters

// Post-processing shader
uniform sampler2D sceneTexture;
uniform float time;

void main() {
  vec4 color = texture2D(sceneTexture, vUv);
  
  // Apply effects
  float vignette = smoothstep(0.5, 0.8, length(vUv - 0.5));
  float pulse = sin(time * 2.0) * 0.1 + 0.9;
  
  gl_FragColor = color * vignette * pulse;
}

Example

// Configure renderer
const renderer = new GLRenderer({
  technique: 'deferred',
  passes: {
    geometry: {
      enabled: true,
      order: 0,
      shader: geometryShader
    },
    lighting: {
      enabled: true,
      order: 1,
      shader: lightingShader
    },
    post: {
      enabled: true,
      order: 2,
      shader: postShader
    }
  },
  postProcessing: {
    enabled: true,
    effects: ['bloom', 'ssao']
  },
  optimization: {
    culling: true,
    occlusion: true,
    instancing: true
  }
});

// Render loop
function render() {
  // Update camera and scene
  camera.update();
  scene.update();
  
  // Execute render passes
  renderer.render(scene, camera);
  
  requestAnimationFrame(render);
}
render();

WebGL Rendering