Alexander Rose

@asrose.bsky.social

580 Followers 591 Following

Scientific software engineer & computational structural biologist, #molstar web molecular graphics developer.

Integration Progressive rendering Keep viewport interactive Use requestAnimationFrame Also check `gl.SYNC_GPU_COMMANDS_COMPLETE` if available Because requestAnimationFrame may fire even if GPU is still busy Adjust quality parameters based on previous iterations’ render time Adjust denoise threshold to hide graininess So instead of grainy to non-grainy it goes from blurry to non-blurry Screenshots Browsers may lose the WebGL context if render time of a single frame is too large or too many frames are submitted to the GPU Check `gl.SYNC_GPU_COMMANDS_COMPLETE` if available, otherwise use `gl.readPixels` to wait Anti-aliasing Since normals and direct-light are pre-calculated, jittering rays is not enough Recalculate normals and direct light with jittered camera, trace and blend
Thickness For tracing in screen-space we need to estimate the thickness Automatic thickness (estimate) Base thickness as max(backface depth) - min(frontface depth) Per object density factor to adjust base thickness Fixed thickness Want to avoid as we have representations with different “densities” Still support in-case user wants to do manual tweaks
Tracing Inputs Shaded color (rgba, standard pass) Normal (xyz) + emissive strength (w) Diffuse color (rgb) + “density” (a) Front depth Back depth Sampling Backwards Monte Carlo Only diffuse (“specular” from shaded input) Russian Roulette to boost non-terminated rays Tracing Hit background Return background color Hit surface, then nothing Return shaded color Hit surface, bounce x times, then nothing Return shaded color plus accumulated diffuse of bounces Hit surface, bounce more than x times Return no color
Passes On change (camera, geometry, lighting, …) Transparent geometry pass Post-processing input passes (outline, marking, transparent ssao) Tracing input pass Backface depth pass Sampling Tracing sample pass Compose Compose pass (denoise, blend transparent geometry, apply outlines, transparent ssao) Background pass Antialiasing pass Bloom pass DoF pass
About Mol* Suite of tools for 3D molecular data on the web Custom WebGL rendering engine Scales from single atoms to cells with billions Wanted nicer lighting that still scales “Path-traced” SSGI Screen-space, so OK with billions of atoms Sample-based, so good to adjust quality