[0036] In order to make the objects, technical solutions, and advantages of the present invention, the present invention will be described in detail below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are merely intended to illustrate the invention and are not intended to limit the invention.
[0037] A method of generating a dynamic circular state described in the preferred embodiment of the present invention, such as figure 1 and figure 2 As shown, the generation method of the dynamic circular state includes the following steps:
[0038] Step S10, select the environment development tool, build a network geographic information system.
[0039] Specifically, the environmental development tool includes: Mapboxgl.js and Three.js. Mapboxgl.js and three.js are world-class open source graphics engines. Mapboxgl.js is a map open source engine in the WebGIS field to serve as a geographic letter system. Three.js is a web-side universal engine with rich community development components and accumulation, highly abstract graphical drawings and expansive interfaces.
[0040] Open source technology can build a WebGIS system (ie network geographic information system) in the shortest time, with considerable maturity and scalability. Where mapboxgl.js can render Three.js as a layer in the map, while the Three.js rich interface supports the development of the graphics base interface WebGL, using WebGL line programming, the GPU (Graphic Accelerator) parallel rendering Strength calculates the simulated water simulation effect, so that the WebGIS system built by Mapboxgl.js has the ability to direct the bottom layer, and use the GPU (graphics accelerator) to rendering high-efficiency stable effects.
[0041] Step S20, split the visual effect of the circular state in the circular state.
[0042] Specifically, the visual effects of the circular housing range are designed, and the circular trend described in the context of the context is the target, and the visualization effect of the circular situation is separated. The goal to meet the circular trend described in the background needs to meet the following requirements:
[0043] Target 1: The shape must be round, this is better understood.
[0044] Target 2: The entire circle is an effect of reflecting edge protrudes, which requires gradually deepening by the center to the edge.
[0045] Target 3: To highlight the edge, the outermost round edge must be highlighted.
[0046] Target 4: The entire circle begins with time from the center, which is an animation that diffuses outward over time, indicating a visual sensation of the situation.
[0047] Target 5: The edge of the target 3 is gradually deepened with the degree of diffusion of the diffusion described in the target 4, i.e., the higher the diffusion, the higher the edge luminance, and more can reflect the warning effect.
[0048] Use a clear effect design describe the dynamic circular trend program requirements that need to be implemented, and provide a reference basis for the next use of the program.
[0049] Step S30, using the environment development tool to control the shape is circular.
[0050] like image 3As shown, in order to achieve the target 1, it is easy to construct a circular geometry in Three.js, ie three.circ Degeometry. It directly supports the input radius to generate a circle, use it to construct the entire round shape, use After loading into mapboxgl.js, and after setting the transparency of 0.6, it can be seen that it is a half transparent circle, that is, the target 1 is completed.
[0051] Step S40, use shader programs, set different transparency depending on the center distance of the distance.
[0052] Specifically, it is necessary to use a shader program to provide different transparency to achieve this depending on the distance center distance. First, calculate the distance Distance between the position of each texture coordinate and the center position of each texture coordinator program, and then pass this distance Distance to the chip shader through the vertex shader, in the chromatogram, the distance will be Distance multiplied by transparency 0.6 set in 1, the chip shader is working in a piece-by-pieces, and the color of each piece is calculated in parallel, so that different pieces are different from the distance Distance distance from the center, so the final color distance multiplied by the end of the DISTANCE Different from 0.6, the closer to the center is smaller from Distance, so the transparency is lower, the more transparent, the greater the outside DISTANCE, so that the target 2 is realized, the effect is Figure 4 Indicated.
[0053] Step S50, set a aperture to the outermost side of the circle for displaying luminescent.
[0054] Specifically, in order to achieve the target, the outermost side of the circle is required to provide a aperture to show light. When the target 2 is completed, each textured coordinate to the center of distance Distance is now equally, this distance distance can be utilized to set the outer aperture.
[0055] Since the maximum of the texture coordinates is (1.0, 1.0), it passes from the outer side of the circle to the outside to the outer side of the other side, and the UV coordinate value span is 1.0, and the distance from the diameter is mapped to the distance. From 0.0 to 1.0 texture coordinates, we pay attention to the circular half-path, so the maximum value of the texture coordinates to the center distance is 0.5, that is, from the center of the center to the outer distance of any point from 0.0-0.5, the maximum distance 0.5.
[0056] As a result, it is possible to determine that the distance Distance is greater than a certain value, such as 0.49 (not necessarily 0.49, can also dynamically change this value by setting the aperture width, if the value is less than 0.49, the aperture will be wider, it will be wider, it will be wider, it will be wider. ), Greater than this value, add a variable of an additional transparency Opacity to 1 to the final presented chip shader color output GL_FRAGCOLOR's fourth component. Since the transparency of all the pieces is calculated in parallel, it will naturally render the transparency of the chill outside of a critical value to 1, so that the circle with aperture is obtained, that is, the target 3 is completed, the effect is as follows Figure 5 Indicated.
[0057] Step S60, control the entire circular circular state from the center starts an animation that diffuses outward over time.
[0058] Specifically, in order to complete the target 4, it is necessary to utilize the distance from the center of the center from the center of the center, but this time you need to implement an animation that fluctuate over time, you need to introduce an additional TIME property, this property is very simple, only It is a floating point that is increasing over time.
[0059] The process of achieving the target 3 said that the distance distribution from the center to the outer side of the circle is from 0.0-0.5, and it is necessary to generate a gradually diffused ripple. This belty will slowly spread from the center of the circle over time, then you can think of it. Control is performed by making a function relationship between the time TIME parameter and the distance Distance. The specific functional relationship is that the Distance is less than the decimal part of time Time, the built-in function Fract (TIME) can take time, regardless of the time accumulation to the high value, Fract (TIME) will always resemble Returns the numbers between 0.0-1.0. Multiplying 0.5, when you meet this condition, you set an additional transparency Opacity (which is the Opacity of the Anti-Aperture, this additional transparency Opacity is followed by the following rules:
[0060] Opacity = corrugated fixed transparency * distance / (per * per);
[0061] Its meaning is the final transparency Opacity equal to its fixed transparency multiplied by the distance from the distance to the TIME fractional portion PER.
[0062] Such an effect is that the diffusion distance is highest when the diffusion distance is close to the center, because the PER is very small to be small, divided by the Per square, which will get a very large transparency (initial shining), with time, PER will be The closer to 1, divided by the number of PERs, the value is getting smaller and smaller, but Distance has increasing, which will get a flat-cachable Opacity.
[0063] Since the front condition is set to the deciation of the Distance for time TIME, as the PER has increased, the chief satisfied by the condition will be spread by the center of the circle until the outer side of the circle, thereby got a gradually larger circle, and Because of the gradient Opacity, this circle will maintain a transparency change when it is constantly spread, and it is highlight that it will continue to be smooth.
[0064] Also because the Per is starting from 0.0-1.0 weeks, it will continue to repeat this animation, that is, the target 4, the effect is Figure 6 - Figure 8 Distance Image 6 Is a schematic of the beginning, Figure 7 Is a diagram of the intermediate moment, Figure 8 It is a schematic of the end.
[0065] Step S70, the control of the circular edge brightness reaches the highest value to achieve a dynamic circular state.
[0066] Specifically, in order to complete the target 5, the high-bright ring completed to the target 3 increases the effect of a decimal change of the decimal Perithns of time at time; the specific implementation is: Opacity set by the target 3 is set by PER four times. So, since PER is very small four times, it is very small, and I can't see the effect. With the PER close to 1, the growth rate of four times is very large, the closer to the edge, that is, the target 5 is completed, and all the targets are completed. Effect Figure 9 and Figure 10 Distance Figure 9 It is a schematic diagram of almost no edge at the beginning. Figure 10 It is a schematic diagram of the largest end edge brightness. The use of the program implemented five goals and completed all the work of dynamic circular trend.
[0067] Further, such as Figure 11 As shown, based on the generation method of the above-described dynamic circular state, the present invention also provides a terminal, the terminal including processor 10, memory 20, and display 30. Figure 11 Only some components of the terminal are shown, but it should be understood that all displayed components are not required to replace more or fewer components.
[0068] The memory 20 can be in some embodiments, the internal storage unit of the terminal, such as a hard disk or memory of the terminal. The memory 20 may also be an external storage device of the terminal, such as a plug-in hard disk, a smart media card, SMC, a secure number (SecureDigital, SD), secure digital, SD, SMART MEDIA CARD, SMC ) Card, flash card (Flash Card), etc. Further, the memory 20 can also include both internal storage units of the terminal also include an external storage device. The memory 20 is configured to store applications and various types of data mounted to the terminal, such as program code, etc. of the mounting terminal. The memory 20 can also be used to temporarily store data that has been output or will output. In one embodiment, the memory 20 stores a generating program 40 of a dynamic circular state, and the generating program 40 of the dynamic circular state can be performed by the processor 10, thereby implementing a method of generating a dynamic circular state in the present application.
[0069] The processor 10 may be a central processor (CPU), a microprocessor, or other data processing chip for running the program code or processing data stored in the memory 20, for example The generation method of performing the dynamic circular state, and the like.
[0070] The display 30 can be an LED display, a liquid crystal display, a touch liquid crystal display, and an OLED (Organic Light-Emitting Diode, an organic light emitting diode) touch. The display 30 is configured to display information on the terminal and to display visualized user interfaces. The components 10-30 of the terminal communicate with each other through the system bus.
[0071] In an embodiment, the following steps are achieved when the processor 10 performs a generating program 40 of the dynamic circular state in the memory 20:
[0072] Select environment development tools to build network geographic information systems;
[0073] Split the visualization effect of the circular trend in circular trend;
[0074] Use the environmental development tool to control the shape is circular;
[0075] Use shader programs to set different transparency depending on the distance center distance;
[0076] Set a aperture to the outermost side of the circle for displaying glowing;
[0077] Control the entire circular circular situation from the center begins with time to diffuse an excessive spread over time;
[0078] Control the brightness of the circular edge to achieve the highest value, realize dynamic circular state.
[0079] Among them, the environmental development tools include: Mapboxgl.js and Three.js.
[0080] Among them, through Mapboxgl.js Rendering Three.js as a layer in the map, use the webgl pipeline programming to call the parallel rendering force of the graphics accelerator to calculate the simulated conscientious water simulation effect, enabling the network geographic information built by Mapboxgl.js. The system has the ability to pass through the bottom layer.
[0081] Wherein, the circular state is gradually deepening from the center to the edge, and the edge of the outermost circle is highlighted.
[0082] Among them, the closer the diffusion, the higher the edge brightness, and it is used to represent a visualization effect of a situation diffusion coverage.
[0083] Wherein, the use of the environmental development tool is circular, specifically:
[0084] The circular geometry in Three.js is used to directly support the input radius to generate a circle.
[0085] Wherein, the use shader procedure provides different transparency depending on the center distance of the distance, specifically includes:
[0086] In the vertex shader program, the distance between the position of each texture coordinate and the center position is calculated;
[0087] The distance is passed to the chip shader through the vertex shader, and the distance is multiplied by a transparent, the smaller the distance from the center of the center, the transparency is lower, the more the outer distance is more bright. high.
[0088] Among them, the circular state generates a gradually diffusing corrugation from the outer side of the center to the outer side.
[0089] The present invention also provides a computer readable storage medium, wherein the computer readable storage medium stores a generating program with a dynamic circular state, and the generating program of the dynamic circular state is executed by the processor as described above. The step of generating a dynamic circular state.
[0090] In summary, the present invention provides a method of generating a dynamic circular state, including: selecting an environmental development tool, building a network geographic information system; a circular situation, a visualization effect of a circular situation Split; use the environmental development tool to control the shape is circular; use a shader program, set different transparency according to the distance center distance; set a aperture to the outermost side of the circle, for displaying a shining; The circular state has a movie that diffuses outward from the center of time; the control of the circular edge brightness reaches the highest value to realize the dynamic circular state. The present invention has been prepared directly using the underlying GPU language, and the performance is very powerful and the effect is good, and all the work of dynamic circular trend is completed.
[0091] It should be noted that the term "comprising", "comprising" or any other variable is intended to encompass non-exclusive contained comprising a series of elements, methods, items, or means including those elements, not only those elements. It also includes other elements that are not explicitly listed, or include elements inherent to such processes, methods, articles, or devices. In the absence of more restrictions, the elements defined by the statement "include a ...", and there is no elimination in the process, method, article, or apparatus including the element.
[0092] Of course, one of ordinary skill in the art will appreciate that all or some of the flow in the above-described embodiment method is to be completed by a computer program to direct the related hardware (such as a processor, controller, etc.), the program can be stored in one. In a computer readable computer readable storage medium, the program can include a flow of as described above when executed. The computer readable storage medium described in which the computer readable storage medium may be a memory, a disk, an optical disk, and the like.
[0093] It should be understood that the applications of the present invention are not limited to the above-described examples, and those of ordinary skill in the art can be improved or transformed in accordance with the above description, all of these improvements and transformations should belong to the scope of the appended claims.
