CN112347397A - Data visualization method and device based on browser and readable storage medium - Google Patents
Data visualization method and device based on browser and readable storage medium Download PDFInfo
- Publication number
- CN112347397A CN112347397A CN202011202403.6A CN202011202403A CN112347397A CN 112347397 A CN112347397 A CN 112347397A CN 202011202403 A CN202011202403 A CN 202011202403A CN 112347397 A CN112347397 A CN 112347397A
- Authority
- CN
- China
- Prior art keywords
- browser
- engine
- file
- data
- creating
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 30
- 238000013079 data visualisation Methods 0.000 title claims abstract description 23
- 238000009877 rendering Methods 0.000 claims abstract description 30
- 230000006870 function Effects 0.000 claims abstract description 24
- 230000000694 effects Effects 0.000 claims abstract description 17
- 238000007794 visualization technique Methods 0.000 claims abstract description 15
- 230000000007 visual effect Effects 0.000 claims abstract description 11
- 238000004590 computer program Methods 0.000 claims description 10
- 230000008676 import Effects 0.000 claims description 7
- 239000000463 material Substances 0.000 claims description 7
- 238000013515 script Methods 0.000 claims description 7
- 238000004422 calculation algorithm Methods 0.000 claims description 5
- 238000013507 mapping Methods 0.000 claims description 4
- 238000004891 communication Methods 0.000 description 5
- 238000012800 visualization Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/20—3D [Three Dimensional] animation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/04—Texture mapping
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/50—Lighting effects
- G06T15/55—Radiosity
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Graphics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a data visualization method and device based on a browser and a readable storage medium, wherein the visualization method comprises the following steps: creating a hypertext markup language document, and introducing a js file into the hypertext markup language document; introducing a WebGL-based browser 3D engine into the js file; creating an Atom class, and instantiating rendering scene data, font data, and animation effect data of the browser 3D engine in a constructor of the Atom class; setting an initial function, and initializing the browser 3D engine in the initial function to perform visual rendering. The invention can realize the effect of three-dimensional display in the browser, is more vivid compared with two-dimensional display, and can reflect the actual situation more truly and clearly.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a data visualization method and device based on a browser and a readable storage medium.
Background
The presentation of data is a very important part of visualization technology. The traditional display mode is mainly two-dimensional display, and particularly, data are simply displayed in a chart mode. Although the requirement of data display can be met, the data display method cannot be more vivid, and cannot truly and clearly reflect the actual situation for some application scenes.
Obviously, in a browser, the traditional two-dimensional display function cannot well meet the requirements of customers. Therefore, how to present vivid images in a browser is a technical problem to be solved by those skilled in the art.
Disclosure of Invention
Therefore, an object of the present invention is to provide a data visualization method based on a browser, so as to realize vivid and complex data display in the browser.
The invention provides a data visualization method based on a browser, which comprises the following steps:
creating a hypertext markup language document, and introducing a js file into the hypertext markup language document;
introducing a WebGL-based browser 3D engine into the js file;
creating an Atom class, and instantiating rendering scene data, font data, and animation effect data of the browser 3D engine in a constructor of the Atom class;
setting an initial function, and initializing the browser 3D engine in the initial function to perform visual rendering.
According to the data visualization method based on the browser, the js file (JavaScript file) is introduced into the hypertext markup language document (HTML document), the browser 3D engine based on the WebGL is introduced into the js file, the WebGL allows the JavaScript and the OpenGL ES 2.0 to be combined together, hardware 3D accelerated rendering can be provided for HTML5Canvas by the WebGL through adding one JavaScript binding of the OpenGL ES 2.0, 3D scenes and models can be smoothly displayed in the browser, the 3D model can be drawn by calling the API in the browser 3D engine to generate scenes, the three-dimensional display effect is finally achieved in the browser, and compared with two-dimensional display, the data visualization method based on the browser can reflect the actual situation more truly and clearly.
In addition, the browser-based data visualization method according to the present invention may further include the following additional technical features:
further, the step of introducing a js file into the hypertext markup language document specifically includes:
and introducing a js file into the hypertext markup language document by adopting a mode of taking script tag type as module.
Further, the browser 3D engine employs three.js;
the step of introducing a browser 3D engine based on WebGL into the js file specifically comprises the following steps:
a thread.js file is introduced in the js file using an import statement.
Further, the step of initializing the browser 3D engine in the initial function specifically includes:
initializing a renderer, a camera, light, a controller and an animation of the browser 3D engine in the initial function, wherein the renderer is used for rendering objects in a scene, the camera is used for observing the scene, the light is used for lighting the scene, and the controller controls movement of the camera.
Further, the step of performing visual rendering specifically includes:
drawing an outermost mask layer and adding the mask layer to the scene data;
drawing a track, wherein the track is drawn by linear materials;
drawing electrons in the trajectory.
Further, the step of drawing the outermost mask layer specifically includes:
drawing a 3D transparent sphere, and adding a honeycomb-shaped mapping to the 3D transparent sphere to form a mask layer;
adding an afterglow animation to the mask layer using a shader of the browser 3D engine.
Further, the step of drawing the track specifically includes:
placing a plurality of points on a virtual circle with a preset diameter by adopting a circle algorithm;
the points are connected using a linear geometry to form a circle with a trajectory.
Another objective of the present invention is to provide a data visualization device based on a browser, so as to realize the vivid display of complex and various data in the browser.
The invention provides a data visualization device based on a browser, which comprises:
the system comprises a first creating module, a second creating module and a third creating module, wherein the first creating module is used for creating a hypertext markup language document and introducing a js file into the hypertext markup language document;
the importing module is used for importing a browser 3D engine based on WebGL into the js file;
a second creating module for creating an Atom class in which rendering scene data, font data, and animation effect data of the browser 3D engine are instantiated in a constructor of the Atom class;
and the setting module is used for setting an initial function, and initializing the browser 3D engine in the initial function so as to perform visual drawing.
According to the data visualization device based on the browser, the js file (JavaScript file) is introduced into the hypertext markup language document (HTML document), the browser 3D engine based on the WebGL is introduced into the js file, the WebGL allows the JavaScript and the OpenGL ES 2.0 to be combined together, hardware 3D accelerated rendering can be provided for HTML5Canvas by the WebGL through adding one JavaScript binding of the OpenGL ES 2.0, 3D scenes and models can be smoothly displayed in the browser, the 3D model can be drawn by calling the API in the browser 3D engine to generate scenes, the three-dimensional display effect is finally realized in the browser, and compared with two-dimensional display, the data visualization device based on the browser can reflect the actual situation more truly and clearly.
In addition, the data visualization device based on the browser according to the present invention may further have the following additional technical features:
further, the first creating module is specifically configured to:
and introducing a js file into the hypertext markup language document by adopting a mode of taking script tag type as module.
Further, the browser 3D engine employs three.js;
the introduction module is specifically configured to:
a thread.js file is introduced in the js file using an import statement.
Further, the setting module is specifically configured to:
initializing a renderer, a camera, light, a controller and an animation of the browser 3D engine in the initial function, wherein the renderer is used for rendering objects in a scene, the camera is used for observing the scene, the light is used for lighting the scene, and the controller controls movement of the camera.
Further, the setting module is further configured to:
drawing an outermost mask layer and adding the mask layer to the scene data;
drawing a track, wherein the track is drawn by linear materials;
drawing electrons in the trajectory.
Further, the setting module is further configured to:
drawing a 3D transparent sphere, and adding a honeycomb-shaped mapping to the 3D transparent sphere to form a mask layer;
adding an afterglow animation to the mask layer using a shader of the browser 3D engine.
Further, the setting module is further configured to:
placing a plurality of points on a virtual circle with a preset diameter by adopting a circle algorithm;
the points are connected using a linear geometry to form a circle with a trajectory.
The invention also proposes a readable storage medium on which a computer program is stored which, when being executed by a processor, carries out the steps of the visualization method described above.
The invention also proposes a computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the visualization method described above when executing the program.
Additional aspects and advantages of the invention will be set forth in part in the description which follows and, in part, will be obvious from the description, or may be learned by practice of the invention.
Drawings
The above and/or additional aspects and advantages of embodiments of the present invention will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:
FIG. 1 is a flow diagram of a visualization method according to an embodiment of the invention;
FIG. 2 is a detailed flow chart of visualization rendering in an exemplary visualization method according to the present invention;
FIG. 3 is a flow chart of a visualization device according to an embodiment of the invention;
fig. 4 is an internal structural view of a computer device according to an embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application will be described and illustrated below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments provided in the present application without any inventive step are within the scope of protection of the present application. Moreover, it should be appreciated that in the development of any such actual implementation, as in any engineering or design project, numerous implementation-specific decisions must be made to achieve the developers' specific goals, such as compliance with system-related and business-related constraints, which may vary from one implementation to another.
Reference in the specification to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the specification. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of ordinary skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments without conflict.
Unless defined otherwise, technical or scientific terms referred to herein shall have the ordinary meaning as understood by those of ordinary skill in the art to which this application belongs. Reference to "a," "an," "the," and similar words throughout this application are not to be construed as limiting in number, and may refer to the singular or the plural. The present application is directed to the use of the terms "including," "comprising," "having," and any variations thereof, which are intended to cover non-exclusive inclusions; for example, a process, method, system, article, or apparatus that comprises a list of steps or modules (elements) is not limited to the listed steps or elements, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus. Reference to "connected," "coupled," and the like in this application is not intended to be limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. Reference herein to "a plurality" means greater than or equal to two. "and/or" describes an association relationship of associated objects, meaning that three relationships may exist, for example, "A and/or B" may mean: a exists alone, A and B exist simultaneously, and B exists alone. Reference herein to the terms "first," "second," "third," and the like, are merely to distinguish similar objects and do not denote a particular ordering for the objects.
Referring to fig. 1, a data visualization method based on a browser according to an embodiment of the present invention at least includes steps S101 to S104.
In S101, a hypertext markup language document is created, and a js file is introduced into the hypertext markup language document.
Specifically, the data visualization method based on the browser provided by the embodiment is applied to a chrome browser, and an html (hypertext markup language) document is created first, specifically, an html file capable of running in a browser environment is created, modularization of the whole model is realized by using an ES6import/export mode, and then a js file is introduced into the hypertext markup language document by using a script tag type as a module. The js file is a text document which contains JavaScript codes and takes 'js' as an extension name, and is used for executing JavaScript instructions in a webpage. All import js files are imported because of the use of the script tag with type as module. The code that enables the browser to read the entire model.
In S102, a WebGL-based browser 3D engine is introduced into the js file. WebGL (Web Graphics Library) is a 3D drawing protocol, the drawing technical standard allows JavaScript and OpenGL ES 2.0 to be combined together, and by adding one JavaScript binding of OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5Canvas, so that a Web developer can more smoothly display 3D scenes and models in a browser by means of a system display card, and complicated navigation and data visualization can be created. The WebGL technical standard avoids the trouble of developing a webpage-dedicated rendering plug-in, can be used for creating a website page with a complex 3D structure, and can be used for designing a 3D webpage game.
Specifically, the browser 3D engine based on WebGL introduced in this embodiment adopts three-way js, which is a WebGL third-party library written in JavaScript, and encapsulates many methods of WebGL, and can create various three-dimensional objects such as a three-dimensional scene, a camera, a light shadow, a material, and the like according to the API provided by the method. Js is used as a 3D engine of the browser, so that a user can conveniently and quickly create a three-dimensional model in the browser without using plug-ins such as Flash and the like.
In addition, this embodiment employs a WebGL-based library, namely three. Js performs very good packaging on an interface provided by the WebGL because the WebGL threshold is relatively high, and simplifies a plurality of details and is beneficial to reducing the learning cost by adopting canvas scripts.
It should be noted that when a thread.js file is introduced into a js file, an import statement is required to be used to introduce the thread.js file.
In S103, an Atom class is created, and rendering scene data, font data, and animation effect data of the browser 3D engine are instantiated in a constructor of the Atom class.
Wherein the Atom class is a container of the whole model, and a new keyword is used in a constructed function of the created Atom class to instantiate Scene, FontLoader and Fog of the THREE. Where Scene is rendered Scene data, and all page elements are placed in this Scene. The FontLoader is font data and is used for loading a local font file, so that the font is convenient to use. Fog is one of the animation effect data, which is used to add a Fog effect to a scene and a blur effect to distant objects.
In S104, an initial function is set, and the browser 3D engine is initialized in the initial function to perform visual rendering.
Specifically, a renderer, a camera, a light, a controller and an animation of a browser 3D engine three.js are initialized in an initial function, the initial function is used for enabling the whole model code to run, the renderer is used for rendering objects in a scene, the camera is used for observing the scene, the light is used for lighting the scene, the controller controls movement of the camera, the scene is conveniently observed from different angles, and the animation is used for enabling the whole scene to move.
The above-described visual rendering will be described in detail below, taking rendering of a 3D atomic model as an example.
Referring to fig. 2, the step of performing the visual rendering specifically includes steps S201 to S203:
in S201, a mask layer of the outermost layer is drawn and added to the scene data.
Specifically, a 3D transparent sphere is drawn firstly, and a honeycomb-shaped chartlet is added to the 3D transparent sphere to form a mask layer; js shader of the browser 3D engine is then used to add an afterglow animation to the mask layer, making it more stereoscopic, and finally the mask layer is then added to scene (scene data).
In S201, a track is drawn, the track being drawn from a linear material. The tracks are drawn first because the electrons have to move up the track and at most two electrons have to be placed on the track, the positions of the two electrons on the same track being opposite. The track is drawn by linear materials.
The step of drawing the track specifically comprises:
using the circle algorithm, several points are placed on a virtual circle of a preset diameter, for example 1000 points on a circle of 400 diameter.
The points are connected using a linear geometry to form a circle with a trajectory. Specifically, a plurality of circles need to be drawn according to the number of data, for example, two data are a set of two circles. The circles are then rotated at an angle so that the trajectory circles diverge.
In S203, electrons are drawn in the trajectory. The electronic drawing uses a geometric model of a ball, and a transparent picture is attached to the geometric model of the ball to serve as a map. Alternatively, the corresponding data may be presented electronically in text, all of which may use a geometric model of the text to create the text. Js is then used to create a group into which the electrons and balls are placed. Finally, the electron is moved, and all points that were originally used to draw the electron trajectory are acquired, and the electron is moved along these points in sequence.
Further, regarding the implementation of protons in the atomic nucleus of the 3D atomic model, in the implementation, the implementation of protons is similar to electrons, but a picture is replaced as a map. During drawing, the motion mode and the position of the proton (up-down vibration with small amplitude at the center of the 3D atomic model) need to be noticed, and the proton cannot be coincided.
Therefore, the drawing and the display of the 3D atom model are realized in the browser, the 3D atom model can be added with a plurality of moving protons and electrons, and the protons and the electrons can display corresponding data information, so that complex and various data are displayed vividly and vividly, and the actual situation can be reflected more truly and clearly.
In addition, it should be noted that the above visualization method needs to be applied to the chrome 9 and above, otherwise, the WebGL context cannot be obtained, and thus rendering cannot be performed.
In summary, according to the data visualization method based on the browser provided by the embodiment, by introducing the js file (JavaScript file) into the hypertext markup language document (HTML document) and introducing the browser 3D engine based on the WebGL into the js file, the WebGL allows the JavaScript and the OpenGL ES 2.0 to be combined together, and by adding one JavaScript binding of the OpenGL ES 2.0, the WebGL can provide hardware 3D accelerated rendering for the HTML5Canvas, so that the 3D scene and the model can be smoothly displayed in the browser, and the 3D model can be drawn by calling the API generated scene in the browser 3D engine, and finally, the three-dimensional display effect is realized in the browser, and the method is more vivid and more clear compared with two-dimensional display, and can reflect the actual situation more truly and clearly.
Referring to fig. 3, an embodiment of the present invention provides a data visualization apparatus based on a browser, where the apparatus includes:
a first creating module 10, configured to create a hypertext markup language document, and introduce a js file into the hypertext markup language document;
an importing module 20, configured to import a WebGL-based browser 3D engine into the js file;
a second creating module 30 for creating an Atom class in which rendering scene data, font data, and animation effect data of the browser 3D engine are instantiated in a constructor of the Atom class;
and the setting module 40 is configured to set an initial function, and initialize the browser 3D engine in the initial function to perform visual rendering.
In this embodiment, the first creating module 10 is specifically configured to:
and introducing a js file into the hypertext markup language document by adopting a mode of taking script tag type as module.
In this embodiment, the browser 3D engine employs three.js;
the lead-in module 20 is specifically configured to:
a thread.js file is introduced in the js file using an import statement.
In this embodiment, the setting module 40 is specifically configured to:
initializing a renderer, a camera, light, a controller and an animation of the browser 3D engine in the initial function, wherein the renderer is used for rendering objects in a scene, the camera is used for observing the scene, the light is used for lighting the scene, and the controller controls movement of the camera.
In this embodiment, the setting module 40 is further configured to:
drawing an outermost mask layer and adding the mask layer to the scene data;
drawing a track, wherein the track is drawn by linear materials;
drawing electrons in the trajectory.
In this embodiment, the setting module 40 is further configured to:
drawing a 3D transparent sphere, and adding a honeycomb-shaped mapping to the 3D transparent sphere to form a mask layer;
adding an afterglow animation to the mask layer using a shader of the browser 3D engine.
In this embodiment, the setting module 40 is further configured to:
placing a plurality of points on a virtual circle with a preset diameter by adopting a circle algorithm;
the points are connected using a linear geometry to form a circle with a trajectory.
According to the data visualization device based on the browser provided by the embodiment, a js file (JavaScript file) is introduced into a hypertext markup language document (HTML document), a browser 3D engine based on WebGL is introduced into the js file, the WebGL allows JavaScript and OpenGL ES 2.0 to be combined together, and by adding one JavaScript binding of OpenGL ES 2.0, the WebGL can provide hardware 3D accelerated rendering for HTML5Canvas, so that 3D scenes and models can be smoothly displayed in the browser, and a scene can be generated by calling an API in the browser 3D engine, so that the 3D model can be drawn, and finally, a three-dimensional display effect is realized in the browser, so that the data visualization device based on the browser is more vivid and more clear compared with two-dimensional display, and can reflect an actual situation more truly and clearly.
For specific definition of the visualization device, reference may be made to the definition of the visualization method above, and details are not repeated here. The various modules in the visualization device described above may be implemented in whole or in part by software, hardware, and combinations thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.
In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as shown in fig. 4. The computer device includes a processor, a memory, a communication interface, a display screen, and an input device connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless communication can be realized through WIFI, an operator network, NFC (near field communication) or other technologies. The computer program is executed by a processor to implement a video frame prediction method. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on the shell of the computer equipment, an external keyboard, a touch pad or a mouse and the like.
Those skilled in the art will appreciate that the architecture shown in fig. 4 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.
In one embodiment, a computer device is provided, comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the steps of the visualization method described above when executing the program.
The implementation principle and technical effect of the computer device provided by the above embodiment are similar to those of the above method embodiment, and are not described herein again.
In an embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when being executed by a processor, carries out the steps of the visualization method described above.
The implementation principle and technical effect of the computer-readable storage medium provided by the above embodiments are similar to those of the above method embodiments, and are not described herein again.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, storage, database or other medium used in the embodiments provided herein can include at least one of non-volatile and volatile memory. Non-volatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical storage, or the like. Volatile Memory can include Random Access Memory (RAM) or external cache Memory. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM), among others.
The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.
Claims (10)
1. A data visualization method based on a browser is characterized by comprising the following steps:
creating a hypertext markup language document, and introducing a js file into the hypertext markup language document;
introducing a WebGL-based browser 3D engine into the js file;
creating an Atom class, and instantiating rendering scene data, font data, and animation effect data of the browser 3D engine in a constructor of the Atom class;
setting an initial function, and initializing the browser 3D engine in the initial function to perform visual rendering.
2. A visualization method as recited in claim 1, wherein the step of introducing a js file in the hypertext markup language document specifically comprises:
and introducing a js file into the hypertext markup language document by adopting a mode of taking script tag type as module.
3. A visualization method as recited in claim 1, wherein the browser 3D engine employs three.js;
the step of introducing a browser 3D engine based on WebGL into the js file specifically comprises the following steps:
a thread.js file is introduced in the js file using an import statement.
4. A visualization method as recited in claim 1, wherein the step of initializing the browser 3D engine in the initial function specifically comprises:
initializing a renderer, a camera, light, a controller and an animation of the browser 3D engine in the initial function, wherein the renderer is used for rendering objects in a scene, the camera is used for observing the scene, the light is used for lighting the scene, and the controller controls movement of the camera.
5. A visualization method according to claim 1, wherein the step of performing a visual rendering specifically comprises:
drawing an outermost mask layer and adding the mask layer to the scene data;
drawing a track, wherein the track is drawn by linear materials;
drawing electrons in the trajectory.
6. A visualization method as recited in claim 1, wherein the step of drawing an outermost mask layer comprises:
drawing a 3D transparent sphere, and adding a honeycomb-shaped mapping to the 3D transparent sphere to form a mask layer;
adding an afterglow animation to the mask layer using a shader of the browser 3D engine.
7. A visualization method as claimed in claim 1, characterized in that the step of drawing a track comprises in particular:
placing a plurality of points on a virtual circle with a preset diameter by adopting a circle algorithm;
the points are connected using a linear geometry to form a circle with a trajectory.
8. A browser-based data visualization apparatus, comprising:
the system comprises a first creating module, a second creating module and a third creating module, wherein the first creating module is used for creating a hypertext markup language document and introducing a js file into the hypertext markup language document;
the importing module is used for importing a browser 3D engine based on WebGL into the js file;
a second creating module for creating an Atom class in which rendering scene data, font data, and animation effect data of the browser 3D engine are instantiated in a constructor of the Atom class;
and the setting module is used for setting an initial function, and initializing the browser 3D engine in the initial function so as to perform visual drawing.
9. A readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the method according to any one of claims 1 to 7.
10. A computer device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements the method according to any of claims 1 to 7 when executing the program.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011202403.6A CN112347397A (en) | 2020-11-02 | 2020-11-02 | Data visualization method and device based on browser and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011202403.6A CN112347397A (en) | 2020-11-02 | 2020-11-02 | Data visualization method and device based on browser and readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112347397A true CN112347397A (en) | 2021-02-09 |
Family
ID=74355331
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011202403.6A Pending CN112347397A (en) | 2020-11-02 | 2020-11-02 | Data visualization method and device based on browser and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112347397A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113282741A (en) * | 2021-03-24 | 2021-08-20 | 北京明略软件***有限公司 | Knowledge graph visualization method, device, equipment and computer readable medium |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1749957A (en) * | 2005-10-20 | 2006-03-22 | 北京航空航天大学 | Pattern-oriented engine-drawing IO intermediate device |
| CN101980154A (en) * | 2010-11-02 | 2011-02-23 | 深圳市融创天下科技发展有限公司 | Method and system for creating and drawing interface control tree and mobile terminal |
| CN102012906A (en) * | 2010-10-27 | 2011-04-13 | 南京聚社数字科技有限公司 | Three-dimensional scene management platform based on SaaS architecture and editing and browsing method |
| CN102521852A (en) * | 2011-11-24 | 2012-06-27 | 中国船舶重工集团公司第七0九研究所 | Showing method for target label independent of three-dimensional scene space |
| US20130304791A1 (en) * | 2012-05-11 | 2013-11-14 | Samsung Electronics Co., Ltd. | Browser engine interfacing for accelerated physics engine |
| CN105912314A (en) * | 2015-12-28 | 2016-08-31 | 乐视致新电子科技（天津）有限公司 | Layout method and system for user interface control, and control method and system for user interface control |
| CN107566346A (en) * | 2017-08-10 | 2018-01-09 | 腾讯科技（深圳）有限公司 | Transmission method, device and the storage medium of 3D game datas, electronic installation |
| CN108509653A (en) * | 2018-04-18 | 2018-09-07 | 苏州智在云数据科技有限公司 | A kind of BIM building WEB terminal visualization engine and its application method |
| CN108830941A (en) * | 2018-06-25 | 2018-11-16 | ***通信集团西藏有限公司 | 3D guide method |
| CN111773727A (en) * | 2020-07-22 | 2020-10-16 | 广州巧趣信息技术有限公司 | WebGL-based web game development method |
-
2020
- 2020-11-02 CN CN202011202403.6A patent/CN112347397A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1749957A (en) * | 2005-10-20 | 2006-03-22 | 北京航空航天大学 | Pattern-oriented engine-drawing IO intermediate device |
| CN102012906A (en) * | 2010-10-27 | 2011-04-13 | 南京聚社数字科技有限公司 | Three-dimensional scene management platform based on SaaS architecture and editing and browsing method |
| CN101980154A (en) * | 2010-11-02 | 2011-02-23 | 深圳市融创天下科技发展有限公司 | Method and system for creating and drawing interface control tree and mobile terminal |
| CN102521852A (en) * | 2011-11-24 | 2012-06-27 | 中国船舶重工集团公司第七0九研究所 | Showing method for target label independent of three-dimensional scene space |
| US20130304791A1 (en) * | 2012-05-11 | 2013-11-14 | Samsung Electronics Co., Ltd. | Browser engine interfacing for accelerated physics engine |
| CN105912314A (en) * | 2015-12-28 | 2016-08-31 | 乐视致新电子科技（天津）有限公司 | Layout method and system for user interface control, and control method and system for user interface control |
| CN107566346A (en) * | 2017-08-10 | 2018-01-09 | 腾讯科技（深圳）有限公司 | Transmission method, device and the storage medium of 3D game datas, electronic installation |
| CN108509653A (en) * | 2018-04-18 | 2018-09-07 | 苏州智在云数据科技有限公司 | A kind of BIM building WEB terminal visualization engine and its application method |
| CN108830941A (en) * | 2018-06-25 | 2018-11-16 | ***通信集团西藏有限公司 | 3D guide method |
| CN111773727A (en) * | 2020-07-22 | 2020-10-16 | 广州巧趣信息技术有限公司 | WebGL-based web game development method |
Non-Patent Citations (1)
| Title |
|---|
| 聂帅、秦爽、麦文: "基于WebGL技术三维模型呈现研究", 计算机产品与流通, no. 07 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113282741A (en) * | 2021-03-24 | 2021-08-20 | 北京明略软件***有限公司 | Knowledge graph visualization method, device, equipment and computer readable medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP7085012B2 (en) | Map rendering methods, equipment, computer equipment and computer programs | |
| US10026147B1 (en) | Graphics scenegraph rendering for web applications using native code modules | |
| US8675000B2 (en) | Command buffers for web-based graphics rendering | |
| CN102246146B (en) | Hardware-accelerated graphics for web applications using native code modules | |
| Cantor et al. | WebGL beginner's guide | |
| CN103713891B (en) | It is a kind of to carry out the method and apparatus that figure renders on the mobile apparatus | |
| CN112381918A (en) | Image rendering method and device, computer equipment and storage medium | |
| US9928637B1 (en) | Managing rendering targets for graphics processing units | |
| US9342322B2 (en) | System and method for layering using tile-based renderers | |
| CN107239491A (en) | For realizing method, equipment, browser and electronic equipment that user behavior is followed the trail of | |
| Cozzi et al. | OpenGL insights | |
| JP2006209108A (en) | Font cache and meta-font | |
| CN111324381B (en) | Development system, development method, development apparatus, computer device, and storage medium | |
| US20230403437A1 (en) | Graphics engine and graphics processing method applicable to player | |
| CN112748843B (en) | Page switching method and device, computer equipment and storage medium | |
| US9508108B1 (en) | Hardware-accelerated graphics for user interface elements in web applications | |
| US10067660B2 (en) | Method and apparatus for displaying attributes of plane element | |
| CN110069725A (en) | Visualize embedded browser method and apparatus | |
| CN112347397A (en) | Data visualization method and device based on browser and readable storage medium | |
| Kelly et al. | Basic introduction to pygame | |
| CN110471700A (en) | Graphic processing method, device, storage medium and electronic equipment | |
| CN108021366A (en) | Interface animation realization method, device, electronic equipment, storage medium | |
| CN112348938A (en) | Method, device and computer equipment for optimizing three-dimensional object | |
| CN116503529A (en) | Rendering, 3D picture control method, electronic device, and computer-readable storage medium | |
| CN115586893A (en) | Cross-platform software development system and method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |