echarts-gl

74 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Cross-hatching stylized rendering in ECharts GL

ECharts GL supports Cross Hatching as a stylized rendering technique that mimics traditional pen drawing with cross-hatch patterns. This provides an alternative to physically realistic rendering for artistic visualization purposes.

3D visualization extends 2D data with height and depth

3D visualization in ECharts GL extends 2D charting by adding depth dimension and enabling more sophisticated visual attributes. Maps gain height representation, Cartesian coordinate systems gain depth, and additional visual dimensions are available to represent data properties through materials, lighting, and spatial position.

Procedurally generated scenes in ECharts GL

ECharts GL enables procedurally generated scenes where data, programmatic rules, and parameters combine to create visualizations. The same dataset can produce different visual effects by modifying rules or parameters. Procedurally generated scenes cannot easily incorporate time-consuming precomputation and offline processing that could improve rendering quality.

WebGL capabilities in ECharts

WebGL provides three main capabilities to ECharts: 3D scene rendering, 2D rendering performance improvements (such as rendering millions of points on maps), GPU general-purpose computing (GPGPU), and ability to create more visually impressive effects.

3D visualization consists of points, lines, and surfaces

3D visualization in ECharts can be decomposed into drawing points, lines, and surfaces (faces). Points can express color, shape, 3D position, and size. Lines connect points and can represent trajectories like airline routes or data trends. Surfaces can represent data magnitude through area or express trends on a plane.

Native WebGL point rendering with gl.POINTS

WebGL has native support for rendering points using gl.drawArrays(gl.POINTS) mode. Points can be sized using gl_PointSize in vertex shader. This approach is very fast because each data point requires only one vertex with no triangle mesh construction. Points are screen-space sized, meaning they maintain consistent pixel size regardless of projection transformation, which ensures accurate data representation through point size.

Custom point shapes using textures and gl_PointCoord

Custom point shapes (circles, triangles, etc.) can be implemented by drawing shapes in white on a Canvas and using it as a texture for the point. WebGL provides the gl_PointCoord built-in variable to access texture coordinates for each pixel on the point, allowing the texture to be properly applied to the expanded square.

Signed Distance Field for point edges and effects

Signed Distance Field (SDF) is used for rendering point outlines and effects. SDF stores the distance to the nearest image edge. In the shader, edges are rendered using: gl_FragColor.a *= smoothstep(0.5 - smoothing, 0.5 + smoothing, d). SDF advantages over traditional textures: small storage space, remains crisp when magnified, enables glow and shadow effects with minimal overhead.

Native WebGL line drawing limitations on Windows

WebGL has native line drawing modes (gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP) with gl.lineWidth() support. However, limitations exist: different graphics drivers produce slightly different line rendering, lineJoin and lineCap effects cannot be controlled, and critically on Windows maximum line width is only 1 because DirectX does not support line width configuration.

Triangulated line segments for variable width

To overcome native line drawing limitations, lines are implemented by creating two triangles per line segment. Screen-space fixed width is achieved in the vertex shader by: computing direction vectors from adjacent vertices in screen coordinates, calculating tangent by normalizing the sum of directions, adjusting vertex position by the tangent multiplied by desired line width in screen space. This allows line width to remain constant regardless of zoom level without rebuilding vertices.

GeoJSON to 3D mesh generation

3D geographic maps are created from GeoJSON by converting Polygon features to triangles through triangulation, then extruding the triangles to create thickness. This produces a 3D wireframe mesh from geographic boundary data.

Ear Clipping triangulation algorithm

Ear Clipping is used for triangulating polygons. It works by repeatedly finding and removing 'ears' (three consecutive vertices forming a triangle). The algorithm is O(n²) due to checking if each point lies inside candidate triangles. Performance can be optimized using spatial hashing (z-order curves) to only check vertices in relevant regions. Linked lists should be used for vertex storage instead of arrays because of frequent addition and deletion.

WebGL GPGPU implementation pattern

The general approach for implementing GPU general-purpose computing (GPGPU) in WebGL is: store data in textures, read data from textures in shaders, perform calculations, write results back to textures.

WebGL GPGPU limitations

WebGL GPGPU has three main limitations: requires browser WebGL support, requires floating-point texture extension support, and can cause entire system blockage when data volume is extremely large.

Give your agent this brain