temporalSuperSampling object overview
Temporal supersampling is an anti-aliasing method for WebGL rendering. When postEffect is enabled, WebGL's default MSAA (MultiSampling Anti-Aliasing) does not work, so temporal supersampling solves the aliasing problem by continuing to sample multiple times after the picture is still, sampling at several instances inside the pixel and calculating an average color value to achieve anti-aliasing. Temporal supersampling also progressively enhances postEffect features that require sampling guarantees, including SSAO, Depth of Field, and shadows.
zlevel animation and performance optimization
Elements with animations should be placed to a separate zlevel for performance optimization. However, too many Canvases will increase memory cost, and zlevel should be used carefully on mobile phones to avoid crashes.
zlevel parameter default value
The zlevel parameter has a default value of -10.
zlevel separation between echarts-gl and echarts Canvas
The layers of components in echarts-gl need to be separated from the layers of components in echarts. The same zlevel cannot be used for both WebGL and Canvas drawing at the same time.
zlevel canvas stacking order
Canvases with bigger zlevel values will be placed on top of Canvases with smaller zlevel values.
zlevel purpose and layer separation
zlevel is used to make layers with Canvas. Graphical elements with different zlevel values will be placed in different Canvases. This is a common optimization technique.
echarts-gl performance-optimized series types
ECharts-gl provides scatterGL and graphGL series types which are performance-optimized variants designed to speed up drawing and operations for scatter charts and diagrams with large amounts of data.
ECharts GL per-item itemStyle customization
Individual data items in ECharts GL can have their own itemStyle property to apply customization only to that specific item. The itemStyle property in a data item overrides the series-level itemStyle for that particular item. Example: [{name: '数据1', value: [12, 14, 10]}, {name: '数据2', value: [34, 50, 15], itemStyle: {}}].
ECharts GL data structure with object items
When you need to name individual data items in ECharts GL series, each data item must be an object containing at least a name property (string) and a value property (array). This allows per-item naming and per-item property overrides like itemStyle.
geo3DIndex option for geo3D series
The geo3DIndex option specifies which geo3D component to use for a series with geo3D coordinate system. It takes a number value and defaults to 0, using the first geo3D component.
grid3DIndex option for cartesian3D series
The grid3DIndex option specifies which grid3D component to use for a series with cartesian3D coordinate system. It takes a number value and defaults to 0, using the first grid3D component.
globeIndex option for globe series
The globeIndex option specifies which globe component to use for a series with globe coordinate system. It takes a number value and defaults to 0, using the first globe component.
coordinateSystem option for GL series
The coordinateSystem option specifies which coordinate system a series uses in ECharts GL. Possible values are 'cartesian3D' for 3D Cartesian coordinates, 'geo3D' for 3D geographic coordinates, 'globe' for Earth coordinates, or null for no coordinate system. The default value is ${defaultCoordinateSystem}.
temporalSuperSampling.enable option
The enable option is a boolean parameter with default value 'auto'. It controls whether temporal super sampling is enabled. By default, it will be automatically enabled when postEffect is enabled.
temporalSuperSampling purpose and function
temporalSuperSampling is a method used to solve aliasing (jagged edges) problems in WebGL. When postEffect is enabled, the default MSAA anti-aliasing becomes unavailable, so temporal super sampling is needed. After the screen becomes static, it continuously performs per-frame jittered sampling on a pixel multiple times to achieve anti-aliasing effects. During this per-frame sampling process, echarts-gl also progressively enhances certain post effects that require sampling for quality assurance, including SSAO (Screen Space Ambient Occlusion), depthOfField (depth of field), and shadows.
orthographicSize controls orthographic projection scale
The orthographicSize option (default 150) specifies the scale/size of the orthographic projection. Only applies when projection is 'orthographic'.
maxOrthographicSize limits orthographic zoom maximum
The maxOrthographicSize option (default 20) sets the maximum value for orthographic projection scaling during zoom operations. Only applies when projection is 'orthographic'.
minOrthographicSize limits orthographic zoom minimum
The minOrthographicSize option (default 400) sets the minimum value for orthographic projection scaling during zoom operations. Only applies when projection is 'orthographic'.
alpha controls vertical viewing angle (X axis rotation)
The alpha option (default 0) specifies the vertical rotation angle around the X axis (up/down rotation in degrees). Works in conjunction with beta to control the complete viewing direction.
beta controls horizontal viewing angle (Y axis rotation)
The beta option (default 0) specifies the horizontal rotation angle around the Y axis (left/right rotation in degrees).
center defines the point around which 3D view rotates
The center option (default [0, 0, 0]) specifies the 3D center point around which rotation and view operations are performed.
minAlpha limits minimum vertical rotation angle
The minAlpha option (default -90) sets the minimum alpha angle the view can rotate to, which limits how far up the user can look at the 3D object.
maxAlpha limits maximum vertical rotation angle
The maxAlpha option (default 90) sets the maximum alpha angle the view can rotate to, which limits how far down the user can look at the 3D object.
minBeta limits minimum horizontal rotation angle
The minBeta option (default -Infinity) sets the minimum beta angle the view can rotate to, which limits how far left the user can rotate around the 3D object.
maxBeta limits maximum horizontal rotation angle
The maxBeta option (default Infinity) sets the maximum beta angle the view can rotate to, which limits how far right the user can rotate around the 3D object.
viewControl animation updates with cubicInOut easing and 1000ms duration
Animation for viewControl updates uses 'cubicInOut' as the default easing and 1000 milliseconds as the default duration.
minDistance limits how close camera can zoom to object
The minDistance option (default 40) sets the minimum distance the viewpoint can be zoomed to via mouse control. Only applies when projection is 'perspective'.
rotateMouseButton selects which mouse button triggers rotation
The rotateMouseButton option accepts 'left', 'middle' (default), or 'right' to specify which mouse button triggers rotation operations. Setting to 'right' will prevent the browser's default right-click context menu.
viewControl object for 3D mouse interactions
The viewControl option in ECharts GL controls mouse interactions for 3D visualizations including rotation, zoom, and pan operations on 3D objects.
projection option for perspective and orthographic views
The projection option accepts either 'perspective' (default) or 'orthographic' to control how the 3D scene is projected onto the 2D screen. Perspective creates depth perception while orthographic provides a flat parallel projection.
autoRotate option enables automatic rotation around 3D object
The autoRotate option is a boolean (default false) that enables automatic rotation of the viewpoint around the 3D object when set to true.
autoRotateDirection controls rotation clockwise or counterclockwise
The autoRotateDirection option accepts 'cw' (clockwise, default) or 'ccw' (counterclockwise) to control the direction of automatic rotation when viewed from above.
autoRotateSpeed controls rotation rate in degrees per second
The autoRotateSpeed option specifies the rotation speed in degrees per second. Default is 10 degrees per second, which means the object completes a full rotation in 36 seconds.
autoRotateAfterStill resumes auto-rotation after mouse stops
The autoRotateAfterStill option (default 3, unit not specified but implies milliseconds) sets the time interval after which automatic rotation resumes once the mouse stops moving. This option only takes effect when autoRotate is enabled.
damping factor provides inertial continuation after mouse release
The damping option (default 0.8, range greater than 0) is an inertia factor that determines how much the view continues to rotate and zoom after the user stops mouse operations. Higher damping values create more pronounced inertial effects.
rotateSensitivity controls rotation responsiveness
The rotateSensitivity option accepts a number (default 1) or an array [horizontal, vertical] to control how sensitive rotation is to mouse movement. Higher values increase sensitivity. Setting to 0 disables rotation. Setting to [1, 0] enables only horizontal rotation; [0, 1] enables only vertical rotation.
zoomSensitivity controls zoom responsiveness
The zoomSensitivity option is a number (default 1) that controls how sensitive zoom operations are to mouse input. Higher values increase sensitivity. Setting to 0 disables zoom.
panSensitivity controls pan/translate responsiveness
The panSensitivity option accepts a number (default 1) or an array [horizontal, vertical] to control how sensitive pan operations are. Higher values increase sensitivity. Setting to 0 disables pan operations.
panMouseButton selects which mouse button triggers pan
The panMouseButton option accepts 'left' (default), 'middle', or 'right' to specify which mouse button triggers pan operations. Setting to 'right' will prevent the browser's default right-click context menu.
distance sets initial view distance from 3D object
The distance option (default 150) specifies the initial distance of the camera viewpoint from the 3D object. For globe it means distance from the Earth's surface; for grid3D and geo3D it means distance from the center origin. Only applies when projection is 'perspective'.
maxDistance limits how far camera can zoom from object
The maxDistance option (default 400) sets the maximum distance the viewpoint can be zoomed to via mouse control. Only applies when projection is 'perspective'.
ECharts GL rendering technologies overview
ECharts GL employs three main rendering technologies: lighting (光影), materials (材质), and post-processing effects (后期). Lighting provides spatial depth through directional light and shadows. Materials enable both realistic and stylized visual presentation. Post-processing adds photographic and digital art effects to enhance scene quality.
ECharts GL lighting types
ECharts GL scenes use two primary light sources: directional light (日光) which establishes overall scene contrast between light and shadow areas, and ambient light (环境光) which provides supplementary omnidirectional illumination. Objects can also have self-emission (自发光) that makes them visible regardless of shadows.
Metalness parameter in PBR
Metalness is a normalized parameter ranging from 0 to 1, where 0 represents non-metal materials and 1 represents metallic materials. Values between 0 and 1 represent interpolations between the two material types. Metallic materials have different Fresnel reflection behavior than non-metals, reflecting consistently across viewing angles.
Roughness parameter in PBR
Roughness is a normalized parameter ranging from 0 to 1, where 0 represents completely smooth surfaces and 1 represents completely rough surfaces. This parameter controls surface reflection characteristics in physically-based rendering.
Depth of field effect in ECharts GL
ECharts GL implements depth of field (景深) as a post-processing effect that creates miniature model appearance and photographic bokeh effects, adding visual appeal and compositional focus to scenes.
Color grading in ECharts GL
ECharts GL includes color grading capabilities for color correction and adjustment of overall scene tone, allowing warm or cool color adjustments and other tonal modifications similar to photography post-processing.
Parametric surface visualization in ECharts GL
ECharts GL supports parametric surfaces defined by u and v parameters with min, max, and step values, and x, y, z functions. Example: a sphere is defined with u range [-PI, PI] step PI/20, v range [0, PI] step PI/20, with x = sin(v)*sin(u), y = sin(v)*cos(u), z = cos(v).
ECharts GL is a WebGL-based extension of ECharts
ECharts GL is an extension of ECharts that uses WebGL as the underlying graphics interface instead of Canvas. It allows components using WebGL to be housed together. As of the documentation date, ECharts GL is at version 1.0.0-alpha.5, with plans for an official release by late June.
ECharts GL supports parametric surfaces
ECharts GL can render parametric surfaces defined by parameter equations. Parametric surfaces are 3D curves defined by u and v parameters with corresponding x, y, and z coordinate functions. Configuration includes specifying u and v ranges with step values, and defining the x(u,v), y(u,v), and z(u,v) functions.
ECharts GL supports geographic 3D visualization with GeoJSON
ECharts GL can render 3D maps using GeoJSON data that stores administrative region or country contours. The 2D polygons from GeoJSON are converted to 3D triangulated surfaces suitable for WebGL rendering using triangulation algorithms.
Directional light provides main illumination in ECharts GL scenes
Directional light (日光) serves as the primary light source in ECharts GL scenes. It effectively distinguishes the bright and dark areas of the overall scene and is the main source of depth perception through shadows.
Environment light uses image-based lighting in ECharts GL
ECharts GL uses Image Based Lighting (IBL) for environment light as a supplement to directional light. It provides light sources from various directions and prevents backlit surfaces from appearing completely black. The environment light map is typically HDR format.
Self-emissive material in ECharts GL
Objects in ECharts GL can have self-emissive (自发光) properties that make them glow independently of shadow effects. Self-emissive objects remain visible and bright even in shadowed areas, useful for highlighting elements like neon lights or city lights on night maps.
Screen Space Ambient Occlusion (SSAO) in ECharts GL
ECharts GL implements Screen Space Ambient Occlusion (SSAO) to compute ambient light shadows in real-time. SSAO samples a hemisphere around each surface point to estimate how much ambient light reaches that point. Areas surrounded by other objects appear darker. Real-time rendering typically uses 10-50 samples, resulting in noise that requires bilateral filtering to reduce.
Physically Based Rendering (PBR) in ECharts GL
ECharts GL uses Physically Based Rendering with the following characteristics: HDR environment lighting maps, prefiltered environment light integral computation for performance, energy-conserving lighting formulas, and intuitive formula parameters rather than empirical models.
Metalness parameter in ECharts GL PBR materials
The metalness parameter in ECharts GL ranges from 0 to 1, where 0 represents non-metal and 1 represents pure metal. Intermediate values interpolate between the two. Metalness affects Fresnel reflectance properties: non-metals show stronger reflection at grazing angles and weaker reflection when viewed directly, while metals maintain consistent reflection across all viewing angles.
Roughness parameter in ECharts GL PBR materials
The roughness parameter in ECharts GL ranges from 0 to 1, where 0 represents completely smooth surfaces and 1 represents completely rough surfaces. This parameter controls surface reflection characteristics in the physically based rendering model.
Material maps for detailed surface properties in ECharts GL
ECharts GL supports texture maps to describe complex material properties with pixel-level precision. Metalness maps and roughness maps allow different parts of a surface to have different material properties, enabling realistic representation of complex materials like rusted metal.
Depth of field effect in ECharts GL
ECharts GL supports depth of field (景深) photography effect that can make scenes appear like miniature models. It can also create lens flare and light caustics that enhance visual appeal and realism.