WebGL and Canvas mixed rendering-based multi-thermodynamic diagram high-performance display method and system

Abstract

The invention belongs to the technical field of computer graphics, and particularly relates to a multi-thermodynamic diagram high-performance display method based on WebGL and Canvas hybrid rendering, which comprises the following steps of: 1) receiving a plurality of groups of original one-dimensional arrays, converting a data format, and arranging according to a longitudinal sequence; 2), initializing a WebGL context, and setting a Blend mixed mode; (3) creating a gray scale drawing shader program I, drawing points through a drawArrays interface, and generating a transparency channel; 4) switching to a second color mapping shader program, and drawing a triangular belt by utilizing a drawArray interface to fill the canvas; (5) after all the thermodynamic diagrams are drawn, the coordinates and the size of each thermodynamic diagram in the off-screen WebGL canvas are recorded; (6) a Canvas 2D context is used for creating a positioning canvas; and 7) performing positioning cutting on each thermodynamic diagram, and performing full-screen rendering. The system comprises a data processing module, a WebGL rendering module and a layout control module. According to the invention, a thermodynamic diagram rendering mode with both high performance and flexible layout is realized.

Images