rendering & performance

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Progressive enhancement across frames in ECharts GL

ECharts GL uses progressive enhancement by distributing sampling across multiple frames. This allows immediate visual feedback during interactive operations while progressively improving image quality after interaction stops. Techniques like temporal anti-aliasing (TAA) distribute sampling over time to improve edge quality, shadow quality, and reduce high-frequency noise.

WebGL advantages over Canvas for line drawing performance

WebGL provides significant performance advantages over Canvas for line drawing. While Canvas requires serial drawing of each line and expensive per-line calculations (especially for thick lines requiring triangle simulation), WebGL performs initial calculations once and then uses GPU parallel processing for multiple line segments. This can provide 10x or greater performance improvements for complex line scenes.

GPGPU force-directed layout acceleration with WebGL

ECharts GL uses GPGPU (General Purpose GPU computing) to accelerate force-directed graph layout. The approach stores data in textures, performs computations in shaders, and writes results back to textures. Performance comparison on GTX1070 with i7 processor and 22k nodes, 48k edges: CPU without Barnes Hut optimization takes approximately 12000ms, CPU with Barnes Hut takes approximately 300ms, while GPU achieves approximately 2ms.

Canvas advantages for visualization

Canvas was chosen for ECharts because it provides more flexible performance optimization, enables pixel manipulation capabilities, and can better integrate with WebGL. Canvas can be used directly as a texture for WebGL.

Canvas limitations for complex requirements

Canvas has limitations when dealing with complex requirements: path drawing uses vector methods that require GPU to convert circles to Bezier curves and tessellate vertices, making it slow with thousands of circles per frame. Canvas can only 'soft render' 3D graphics which fails to correctly handle triangle face intersections. Interactive rendering becomes laggy with large datasets like 65,000 airline routes.

CPU force-directed layout performance on Macbook 2012

Performance measurements on Macbook 13 2012 with 22,000 nodes and 48,000 edges: CPU without Barnes Hut optimization approximately 28,000ms per iteration, CPU with Barnes Hut optimization approximately 1,000ms per iteration.

GPU force-directed layout performance comparison

GPU-accelerated force-directed layout shows significant performance improvements on high-end hardware. On GTX1070 with i7: CPU without Barnes Hut ~12,000ms, CPU with Barnes Hut ~300ms, GPU ~2ms. GPU acceleration shows dramatic speedup on high-end graphics cards.

Physically-based rendering components

Physically-based rendering (PBR) requires: HDR environment light map, prefiltered convolution integral precalculation of environment lighting (producing blurred versions of environment maps), energy-conserving lighting formulas, and intuitive direct formula parameters instead of empirical models.

Soft shadows and SSAO for spatial depth

Soft shadows provide depth perception with soft edges (requiring multiple samples). Screen-space ambient occlusion (SSAO) calculates how much environment light reaches each point based on geometric obstruction, darkening areas surrounded by geometry. Together they provide layered visual hierarchy.

Depth of field and temporal anti-aliasing

Depth of field creates photographic effects where focused regions are sharp and unfocused regions are blurred. Temporal anti-aliasing addresses aliasing artifacts by distributing sampling across multiple frames, allowing interaction feedback while progressively enhancing image quality during non-interaction periods.

Progressive enhancement for high-quality rendering

Progressive enhancement distributes sampling across multiple frames to achieve high-quality rendering on limited hardware. Provides immediate feedback during interaction while progressively improving image quality after interaction stops.

Temporal methods limitations

Temporal anti-aliasing methods cannot resolve information loss problems: SSAO (screen-space ambient occlusion) cannot account for occluded geometry outside the screen, algorithms like shadow mapping with insufficient precision cannot be corrected through temporal methods, and temporal methods cannot handle dynamic changing scenes effectively.

Give your agent this brain