WebGL-based scientific visual demonstration system and method

Abstract

The invention discloses a WebGL-based scientific visual demonstration system. The system comprises a WebGL model library, a model building module and a demonstration module, the WebGL model library is a storage library which is pre-designed with graphs and images on the basis of WebGL and is used for calling construction of a basic model; the model building module is used for building a model of a dynamic scene based on WebGL; the demonstration module is used for adjustably displaying a dynamic scene; s1, building a model; and S2, exporting and demonstrating the model scene. According to the method, the basic model stored in the WebGL model library is called, then the model building module is used for carrying out dynamic scene construction based on WebGL, finally, the constructed dynamic scene is output and presented through the demonstration module, the demonstration module is adjusted, and the effect of carrying out scientific visual demonstration on the dynamic scene is enhanced.

Description

Technical Field

[0001] The present invention belongs to the field of computer technology, and in particular relates to a scientific visualization demonstration system and method based on WebGL. Background Art

[0002] WebGL is a 3D drawing protocol. This drawing technology standard allows JavaScript and OpenGL ES2.0 to be combined together. By adding a JavaScript binding to OpenGL ES2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas, so that Web developers can use the system graphics card to display 3D scenes and models more smoothly in the browser, and create complex navigation and data visualization.

[0003] When conducting a scientific dynamic scene demonstration, the scene is directly demonstrated by building it through WebGL. However, the direct demonstration cannot fully display the model scene, and the hierarchical relationship cannot be well presented during the demonstration, so there is no good demonstration effect. Summary of the invention

[0004] In view of the shortcomings of the prior art, the present invention provides a scientific visualization demonstration system and method based on WebGL. The specific technical scheme is as follows:

[0005] A scientific visualization demonstration system based on WebGL comprises a WebGL model library, a model building module and a demonstration module; the WebGL model library is a storage library pre-designed with graphics and images based on WebGL and used for calling basic model construction; the model building module is used for model construction of dynamic scenes based on WebGL; and the demonstration module is used for adjustable display of dynamic scenes.

[0006] Furthermore, the model building module includes a storage unit, a communication unit, a hierarchical unit, a timing unit, a control unit and a monitoring unit. The storage unit is used to store various data used for model construction, the communication unit is used to transmit dynamic scenes to the demonstration module in real time, the hierarchical unit is used to superimpose the constructed model, the timing unit is used to switch the scenes displayed by the hierarchical unit, the control unit is used for manual scene switching control and local scene retrieval and display, and the monitoring unit is used for node prompts for stopping and starting the display of dynamic scenes.

[0007] Furthermore, the storage unit includes a coordinate data group, a time data group, a color data group and a basic model data group, the coordinate data group is used to locate the stored model structure position, the time data group is used to locate the time of the timing unit, the color data group is used to store the model color rendering data, and the basic model data group is used to store the basic model called from the WebGL model library.

[0008] Furthermore, the hierarchical unit includes a time hierarchical group and a space hierarchical group, the time hierarchical group is used to display the model structure status of each superimposed time node, and the space hierarchical group is used to display the model structure status of each superimposed space region.

[0009] Furthermore, the demonstration module includes a PC and a multi-layer projection device, the multi-layer projection device is connected to the PC via a communication unit, and the multi-layer projection device is used to display the dynamic scene model.

[0010] Furthermore, the multi-layer projection device includes a top plate, a power supply is fixed to the bottom surface of the top plate, a bottom plate is fixed to the bottom surface of the power supply, a projection mechanism with an adjustable projection angle is connected to one side of the power supply between the top plate and the bottom plate, a second support column is fixed to the bottom surface of the bottom plate near the power supply, the first support column is connected to the inside of the bottom plate, a limit ring is sleeved on the side wall of the first support column, and the limit ring is arranged on the top of the bottom plate.

[0011] Furthermore, the projection mechanism includes a pneumatic rod, a push plate, an adapter assembly and a projector. The projector is rotatably connected between the top plate and the bottom plate. Two projectors are symmetrically arranged. The side wall of the projector is hinged with a retractable adapter assembly. The end of the adapter assembly away from the projector is hinged to one side of the push plate. The push plate is fixed to the telescopic end of the pneumatic rod, and the pneumatic rod is fixed to the side wall of the power supply.

[0012] Furthermore, the adapter assembly includes a fixed block, a sleeve, a spring and a guide rod, one end of the sleeve is fixedly connected to the fixed block, the fixed block is hinged to one side of the push plate, a guide rod is inserted into the inside of the sleeve, a spring is connected between one end of the guide rod and the inner end surface of the sleeve, and the other end of the guide rod is connected to the side wall of the projector.

[0013] A scientific visualization demonstration method based on WebGL, the demonstration method comprising the following steps:

[0014] S1, model building;

[0015] S1.1. Building a model: In the model building module, use the canvas in HTML5 to define the drawing area, and draw 3D graphics in the canvas through JavaScript embedded GLSL ES, and then call the basic model from the WebGL model library;

[0016] S1.2. Import data;

[0017] The coordinate data group, time data group, color data group and basic model data group preset in the storage unit are all imported into the hierarchical unit to construct the model scene, so as to realize the further construction of the basic model, and the model scene is displayed through the time hierarchical group and the space hierarchical group of the hierarchical unit, wherein the timing unit can switch the model scenes of each time superimposed in the time hierarchical group, and the control unit can switch the model scenes of each space area superimposed in the space hierarchical group, and the monitoring unit is used to monitor and prompt the switching of the model scenes of the time hierarchical group and the space hierarchical group;

[0018] S2, model scene export demonstration;

[0019] The constructed model scene is transmitted to the PC and the multi-layer projection device for demonstration through the communication module. When the multi-layer projection device is used for demonstration, the bottom plate is supported by the first support column and the second support column, and then the first support column on the bottom plate is rotated, and the limit ring is rotated to fix it, so as to adjust the projection height of the projection mechanism between the top plate and the bottom plate;

[0020] Then start the pneumatic rod to pull back the push plate, the push plate drives the hinged fixed block to separate the sleeve and the guide rod, and stretch the spring, the guide rod drives the hinged projector to rotate between the top plate and the bottom plate, so that the projections of the two projectors overlap;

[0021] Finally, the transmitted model scene is demonstrated by switching two projectors simultaneously according to time and space.

[0022] The beneficial effects of the present invention are: by calling the basic model stored in the WebGL model library, and then using the model building module to construct a dynamic scene based on WebGL, and finally presenting the constructed dynamic scene through the output of the demonstration module, and adjusting the demonstration module, the effect of scientific visualization demonstration of the dynamic scene is enhanced. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 A system block diagram of a WebGL-based scientific visualization demonstration system of the present invention is shown;

[0024] Figure 2 A block diagram of a storage unit system of the present invention is shown;

[0025] Figure 3 A block diagram of a hierarchical unit system of the present invention is shown;

[0026] Figure 4 Shows a system block diagram of a demonstration module of the present invention;

[0027] Figure 5 A schematic diagram of the structure of a multi-layer projection device of the present invention is shown;

[0028] Figure 6 A schematic diagram of the bottom plate top surface connection structure of the present invention is shown;

[0029] Figure 7 A cross-sectional view of the structure of the adapter assembly of the present invention is shown;

[0030] As shown in the figure: 1. WebGL model library; 2. Model building module; 21. Storage unit; 211. Coordinate data group; 212. Time data group; 213. Color data group; 214. Basic model data group; 22. Communication unit; 23. Hierarchy unit; 231. Time hierarchy group; 232. Space hierarchy group; 24. Timing unit; 25. Control unit; 26. Monitoring unit; 3. Demonstration module; 31. PC; 32. Multi-layer projection device; 321. Top plate; 322. Power supply; 323. Bottom plate; 3231. Limiting ring; 3232. First support column; 3233. Second support column; 324. Projection mechanism; 3241. Pneumatic rod; 3242. Push plate; 3243. Adapter assembly; 32431. Fixed block; 32432. Sleeve; 32433. Spring; 32434. Guide rod; 3244. Projector. DETAILED DESCRIPTION

[0031] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0032] A scientific visualization demonstration system based on WebGL, comprising a WebGL model library, a model building module and a demonstration module; the WebGL model library is a storage library pre-designed with graphics and images based on WebGL, which is used for calling basic model construction; the model building module is used for model construction of dynamic scenes based on WebGL; the demonstration module is used for adjustable display of dynamic scenes;

[0033] By calling the basic model stored in the WebGL model library, and then using the model building module to build a dynamic scene based on WebGL, and finally presenting the constructed dynamic scene through the output of the demonstration module, and adjusting the demonstration module, the effect of scientific visualization demonstration of the dynamic scene is enhanced.

[0034] like Figure 1As shown, the model building module includes a storage unit, a communication unit, a hierarchical unit, a timing unit, a control unit and a monitoring unit. The storage unit is used to store various data used for model building, the communication unit is used to transmit dynamic scenes to the demonstration module in real time, the hierarchical unit is used for model superposition, the timing unit is used for scene switching displayed by the hierarchical unit, the control unit is used for manual scene switching control and local scene retrieval and display, and the monitoring unit is used for node prompts for display stop and start of dynamic scenes;

[0035] The timing unit switches the model of the superimposed hierarchical units in real time, realizing the dynamic effect of the model structure, and the control unit manually controls the switching of the hierarchical units, so that the demonstration scene model can be paused in real time.

[0036] like Figure 2 As shown, the storage unit includes a coordinate data group, a time data group, a color data group and a basic model data group. The coordinate data group is used to locate the stored model structure position, the time data group is used to locate the time of the timing unit, the color data group is used to store the model color rendering data, and the basic model data group is used to store the basic model called from the WebGL model library.

[0037] like Figure 3 As shown, the hierarchical unit includes a time hierarchical group and a space hierarchical group. The time hierarchical group is used to display the model structure status of each superimposed time node, and the space hierarchical group is used to display the model structure status of each superimposed space region.

[0038] like Figure 4 As shown, the demonstration module includes a PC and a multi-layer projection device, the multi-layer projection device is connected to the PC via a communication unit, and the multi-layer projection device is used to display a dynamic scene model.

[0039] like Figure 5 and Figure 6 As shown, the multi-layer projection device includes a top plate, a power supply is fixed to the bottom surface of the top plate, a bottom plate is fixed to the bottom surface of the power supply, a projection mechanism with adjustable projection angle is connected to one side of the power supply located between the top plate and the bottom plate, a second support column is fixed to the bottom surface of the bottom plate near the power supply, the inside of the bottom plate is penetrated and connected to the first support column, a limit ring is sleeved on the side wall of the first support column, and the limit ring is arranged on the top of the bottom plate;

[0040] By utilizing a projection mechanism with adjustable projection angle, the transmitted dynamic model scene can be placed at an optimal projection angle position, thereby improving the demonstration effect.

[0041] The projection mechanism includes a pneumatic rod, a push plate, an adapter assembly and a projector. The projector is rotatably connected between the top plate and the bottom plate. Two projectors are symmetrically arranged. A retractable adapter assembly is hinged on the side wall of the projector. The end of the adapter assembly away from the projector is hinged on one side of the push plate. The push plate is fixed to the telescopic end of the pneumatic rod, and the pneumatic rod is fixed to the side wall of the power supply.

[0042] The dynamic scenes are displayed by superimposing two groups of projectors at the same time, and the models in each level unit are controlled by a timing unit to directly switch and display on the two projectors, so that the demonstration efficiency is high. The pneumatic rod is used to pull the push plate at the same time, and the two groups of projectors are rotated at the same time under the connection of the adapter assembly, so that the two projectors can be superimposed according to the projection distance, which improves the flexibility of the projection position.

[0043] like Figure 6 and Figure 7 As shown, the adapter assembly includes a fixed block, a sleeve, a spring and a guide rod, one end of the sleeve is fixedly connected to the fixed block, the fixed block is hinged to one side of the push plate, the sleeve is inserted with a guide rod, a spring is connected between one end of the guide rod and the inner end surface of the sleeve, and the other end of the guide rod is connected to the side wall of the projector;

[0044] When the pneumatic rod pulls the push plate, it extends out of the guide tube through the guide rod and stretches the spring, thereby improving the stability of the rotation adjustment of the projector.

[0045] A scientific visualization demonstration method based on WebGL, the demonstration method comprising the following steps:

[0046] S1, model building;

[0047] S1.1. Building a model: In the model building module, use the canvas in HTML5 to define the drawing area, and draw 3D graphics in the canvas through JavaScript embedded GLSL ES, and then call the basic model from the WebGL model library;

[0048] S1.2. Import data;

[0049] The coordinate data group, time data group, color data group and basic model data group preset in the storage unit are all imported into the hierarchical unit to construct the model scene, so as to realize the further construction of the basic model, and the model scene is displayed through the time hierarchical group and the space hierarchical group of the hierarchical unit, wherein the timing unit can switch the model scenes of each time superimposed in the time hierarchical group, and the control unit can switch the model scenes of each space area superimposed in the space hierarchical group, and the monitoring unit is used to monitor and prompt the switching of the model scenes of the time hierarchical group and the space hierarchical group;

[0050] S2, model scene export demonstration;

[0051] The constructed model scene is transmitted to the PC and the multi-layer projection device for demonstration through the communication module. When the multi-layer projection device is used for demonstration, the bottom plate is supported by the first support column and the second support column, and then the first support column on the bottom plate is rotated, and the limit ring is rotated to fix it, so as to adjust the projection height of the projection mechanism between the top plate and the bottom plate;

[0052] Then start the pneumatic rod to pull back the push plate, the push plate drives the hinged fixed block to separate the sleeve and the guide rod, and stretch the spring, the guide rod drives the hinged projector to rotate between the top plate and the bottom plate, so that the projections of the two projectors overlap;

[0053] Finally, the transmitted model scene is demonstrated by switching two projectors simultaneously according to time and space.

[0054] When the present invention is implemented,

[0055] S1, model building;

[0056] S1.1. Building a model: In the model building module, use the canvas in HTML5 to define the drawing area, and draw 3D graphics in the canvas through JavaScript embedded GLSL ES, and then call the basic model from the WebGL model library;

[0057] S1.2. Import data;

[0058] The coordinate data group, time data group, color data group and basic model data group preset in the storage unit are all imported into the hierarchical unit to construct the model scene, so as to realize the further construction of the basic model, and the model scene is displayed through the time hierarchical group and the space hierarchical group of the hierarchical unit, wherein the timing unit can switch the model scenes of each time superimposed in the time hierarchical group, and the control unit can switch the model scenes of each space area superimposed in the space hierarchical group, and the monitoring unit is used to monitor and prompt the switching of the model scenes of the time hierarchical group and the space hierarchical group;

[0059] S2, model scene export demonstration;

[0060] The constructed model scene is transmitted to the PC and the multi-layer projection device for demonstration through the communication module. When the multi-layer projection device is used for demonstration, the bottom plate is supported by the first support column and the second support column, and then the first support column on the bottom plate is rotated, and the limit ring is rotated to fix it, so as to adjust the projection height of the projection mechanism between the top plate and the bottom plate;

[0061] Then start the pneumatic rod to pull back the push plate, the push plate drives the hinged fixed block to separate the sleeve and the guide rod, and stretch the spring, the guide rod drives the hinged projector to rotate between the top plate and the bottom plate, so that the projections of the two projectors overlap;

[0062] Finally, the transmitted model scene is demonstrated by switching two projectors simultaneously according to time and space.

[0063] The above description is only a preferred embodiment of the present invention and does not limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. A scientific visualization demonstration system based on WebGL, characterized by: It includes a WebGL model library, a model building module and a demonstration module; the WebGL model library is a storage library pre-designed with graphics and images based on WebGL, which is used for calling basic model construction; the model building module is used for model construction of dynamic scenes based on WebGL; the demonstration module is used for adjustable display of dynamic scenes.

2. A WebGL-based scientific visualization demonstration system according to claim 1, characterized in that: The model building module includes a storage unit, a communication unit, a hierarchical unit, a timing unit, a control unit and a monitoring unit. The storage unit is used to store various data used for model construction, the communication unit is used to transmit dynamic scenes to the demonstration module in real time, the hierarchical unit is used to superimpose the constructed model, the timing unit is used to switch the scenes displayed by the hierarchical unit, the control unit is used for manual scene switching control and local scene retrieval and display, and the monitoring unit is used for node prompts for stopping and starting the display of dynamic scenes.

3. A WebGL-based scientific visualization demonstration system according to claim 2, characterized in that: The storage unit includes a coordinate data group, a time data group, a color data group and a basic model data group. The coordinate data group is used to locate the stored model structure position, the time data group is used to locate the time of the timing unit, the color data group is used to store the data of model color rendering, and the basic model data group is used to store the basic model called from the WebGL model library.

4. A WebGL-based scientific visualization demonstration system according to claim 3, characterized in that: The hierarchical unit includes a time hierarchical group and a space hierarchical group. The time hierarchical group is used to display the model structure status of each superimposed time node, and the space hierarchical group is used to display the model structure status of each superimposed space region.

5. A WebGL-based scientific visualization demonstration system according to claim 4, characterized in that: The demonstration module includes a PC and a multi-layer projection device, wherein the multi-layer projection device is connected to the PC via a communication unit, and the multi-layer projection device is used for displaying a dynamic scene model.

6. A WebGL-based scientific visualization demonstration system according to claim 5, characterized in that: The multi-layer projection device includes a top plate, a power supply is fixed to the bottom surface of the top plate, a bottom plate is fixed to the bottom surface of the power supply, a projection mechanism with an adjustable projection angle is connected to one side of the power supply between the top plate and the bottom plate, a second support column is fixed to the bottom surface of the bottom plate near the power supply, a first support column is connected to the inside of the bottom plate, a limit ring is sleeved on the side wall of the first support column, and the limit ring is arranged on the top of the bottom plate.

7. A WebGL-based scientific visualization demonstration system according to claim 6, characterized in that: The projection mechanism includes a pneumatic rod, a push plate, an adapter assembly and a projector. The projector is rotatably connected between the top plate and the bottom plate. Two projectors are symmetrically arranged. The side wall of the projector is hinged with a retractable adapter assembly. The end of the adapter assembly away from the projector is hinged to one side of the push plate. The push plate is fixed to the telescopic end of the pneumatic rod, and the pneumatic rod is fixed to the side wall of the power supply.

8. A WebGL-based scientific visualization demonstration system according to claim 7, characterized in that: The adapter assembly includes a fixed block, a sleeve, a spring and a guide rod. One end of the sleeve is fixedly connected to the fixed block, the fixed block is hinged to one side of the push plate, a guide rod is inserted into the sleeve, a spring is connected between one end of the guide rod and the inner end surface of the sleeve, and the other end of the guide rod is connected to the side wall of the projector.

9. A scientific visualization demonstration method based on WebGL, characterized by: The demonstration method comprises the following steps: S1, model building; S1.

1. Model building: In the model building module, use the canvas in HTML5 to define the drawing area, and draw three-dimensional graphics in the canvas through Javascript embedded GLSL ES, and then call the basic model from the WebGL model library; S1.

2. Import data; The coordinate data group, time data group, color data group and basic model data group preset in the storage unit are all imported into the hierarchical unit to construct the model scene, so as to realize the further construction of the basic model, and the model scene is displayed through the time hierarchical group and the space hierarchical group of the hierarchical unit, wherein the timing unit can switch the model scenes of each time superimposed in the time hierarchical group, and the control unit can switch the model scenes of each space area superimposed in the space hierarchical group, and the monitoring unit is used to monitor and prompt the switching of the model scenes of the time hierarchical group and the space hierarchical group; S2, model scene export demonstration; The constructed model scene is transmitted to the PC and the multi-layer projection device for demonstration through the communication module. When the multi-layer projection device is used for demonstration, the bottom plate is supported by the first support column and the second support column, and then the first support column on the bottom plate is rotated, and the limit ring is rotated to fix it, so as to adjust the projection height of the projection mechanism between the top plate and the bottom plate; Then start the pneumatic rod to pull back the push plate, the push plate drives the hinged fixed block to separate the sleeve and the guide rod, and stretch the spring, the guide rod drives the hinged projector to rotate between the top plate and the bottom plate, so that the projections of the two projectors overlap; Finally, the transmitted model scene is demonstrated by switching two projectors simultaneously according to time and space.

Images