CN111476870B - Object rendering method and device - Google Patents

Object rendering method and device Download PDF

Info

Publication number
CN111476870B
CN111476870B CN202010132731.7A CN202010132731A CN111476870B CN 111476870 B CN111476870 B CN 111476870B CN 202010132731 A CN202010132731 A CN 202010132731A CN 111476870 B CN111476870 B CN 111476870B
Authority
CN
China
Prior art keywords
rendering
rendering object
rotation
determining
rotation track
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.)
Active
Application number
CN202010132731.7A
Other languages
Chinese (zh)
Other versions
CN111476870A (en
Inventor
陈真真
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
New H3C Big Data Technologies Co Ltd
Original Assignee
New H3C Big Data Technologies Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by New H3C Big Data Technologies Co Ltd filed Critical New H3C Big Data Technologies Co Ltd
Priority to CN202010132731.7A priority Critical patent/CN111476870B/en
Publication of CN111476870A publication Critical patent/CN111476870A/en
Application granted granted Critical
Publication of CN111476870B publication Critical patent/CN111476870B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00Animation
    • G06T13/203D [Three Dimensional] animation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/003D [Three Dimensional] image rendering
    • G06T15/005General purpose rendering architectures

Abstract

The application provides an object rendering method and device, wherein the method comprises the following steps: acquiring a two-dimensional image comprising a rendering object, and determining a rotation track of the rendering object according to the rendering requirement of the rendering object; based on the rotation track and the initial position of the rendering object in the rotation track, determining a target position of the rendering object moving according to the rotation track, and determining a scaling degree and a stacking sequence of the rendering object, wherein the stacking sequence is used for representing an up-down stereoscopic relation of the rendering object in a stacking sequence; and performing three-dimensional rendering and display on the rendering object according to the target position, the zooming degree and the stacking sequence of the rendering object. Because the method and the device directly convert the two-dimensional image into the three-dimensional animation for rendering and displaying, and do not adopt the three-dimensional animation frame in the prior art for displaying the three-dimensional animation, the hardware requirement of the equipment is reduced, and the three-dimensional animation can be smoothly displayed.

Description

Object rendering method and device
Technical Field
The present application relates to the field of data processing, and in particular, to an object rendering method and apparatus.
Background
With the development of big data technology, people's attention to data in daily life is gradually promoted, and how to more intuitively show mass data becomes one of the problems to be urgently solved in the big data technology development. To solve this problem, data visualization techniques have been developed. Data visualization is the representation of large data in the form of graphical images to provide people with a more intuitive way of viewing data. Meanwhile, with the improvement of data display requirements of people, the simple two-dimensional scene display cannot meet the requirements of people, and therefore, the display development based on the three-dimensional scene is gradually rapid. At present, the three-dimensional scene display technology based on the front-end technology is rapidly developed and has more types. Including WebGL three-dimensional frameworks such as babylon. js, three. js, etc., which provide convenient and diverse solutions for the presentation of three-dimensional data. Meanwhile, in data visualization, the simple static display can not meet the requirements of people far away, the data visualization display is more colorful due to the addition of the animation, and the visualization display can stand out and attract the sight line in a plurality of schemes.
In the prior art, when three-dimensional animation display is performed, three-dimensional frame WebGL is directly used for realizing, namely 3D accelerated rendering is loaded through hardware so as to display 3D scenes and models in a browser by means of a system display card, so that the requirement on the performance of equipment is high, and more hardware resources are consumed; in addition, the fluency of animation effect can be influenced by hardware resource display, and the user experience is very poor.
Therefore, how to smoothly present the three-dimensional animation on a device with low performance is one of considerable problems.
Disclosure of Invention
In view of the foregoing, the present application provides an object rendering method and apparatus for smoothly displaying a three-dimensional animation on a device with low performance when the performance of a hardware device is not required.
Specifically, the method is realized through the following technical scheme:
according to a first aspect of the present application, there is provided an object rendering method, comprising:
acquiring a two-dimensional image comprising a rendering object, and determining a rotation track of the rendering object according to the rendering requirement of the rendering object;
based on the rotation track and the initial position of the rendering object in the rotation track, determining a target position of the rendering object moving according to the rotation track, and determining a scaling degree and a stacking sequence of the rendering object, wherein the stacking sequence is used for representing an up-down stereoscopic relation of the rendering object in a stacking sequence;
and performing three-dimensional rendering and display on the rendering object according to the target position, the zooming degree and the stacking sequence of the rendering object.
Optionally, determining the rotation angle of the rendering object based on the rotation track and the initial position of the rendering object in the rotation track includes:
and calling a sub-thread to enable the sub-thread to determine a target position of the rendering object moving according to the rotation track and determine the scaling degree and the stacking sequence of the rendering object based on the rotation track and the initial position of the rendering object in the rotation track.
Optionally, the rendering requirement comprises a trajectory parameter of the rotation trajectory; then
Based on the rotation track and the initial position of the rendering object in the rotation track, determining a target position of the rendering object moving according to the rotation track, and determining a zoom degree and a stacking order of the rendering object, including:
determining a rotation angle of the rendering object based on a position of a center point of the rotation trajectory and an initial position of the rendering object in the rotation trajectory;
determining a target position of the rendering object based on the trajectory parameter and the rotation angle;
and adjusting the scaling degree and the stacking sequence of the rendering objects according to the rotation angle.
Optionally, adjusting the zoom level and the stacking order of the rendering objects according to the rotation angle includes:
if the rendering object is determined to be close to the viewpoint based on the rotation angle, the zooming degree of the rendering object is increased so as to enlarge the rendering object and increase the stacking sequence value of the rendering object;
if the rendering object is determined to be far away from the viewpoint based on the rotation angle, the scaling degree of the rendering object is reduced so as to reduce the rendering object and reduce the stacking sequence value of the rendering object.
Optionally, three-dimensional rendering and displaying the rendered object according to the target position, the zoom level, and the stacking order of the rendered object includes:
and according to the target position, the zooming degree and the stacking sequence of the rendering object, performing three-dimensional rendering and display on the rendering object through a Cascading Style Sheet (CSS).
According to a second aspect of the present application, there is provided an object rendering apparatus comprising:
the system comprises an acquisition module, a display module and a control module, wherein the acquisition module is used for acquiring a two-dimensional image comprising a rendering object and determining a rotation track of the rendering object according to the rendering requirement of the rendering object;
the determining module is used for determining a target position of the rendering object moving according to the rotation track and determining the zoom degree and the stacking sequence of the rendering object based on the rotation track and the initial position of the rendering object in the rotation track, wherein the stacking sequence is used for representing the up-down stereoscopic relationship of the rendering object in the stacking sequence;
and the rendering module is used for performing three-dimensional rendering and display on the rendering object according to the target position, the scaling degree and the stacking sequence of the rendering object.
Optionally, the determining module is specifically configured to invoke a child thread, so that the child thread determines, based on the rotation track and an initial position of the rendering object in the rotation track, a target position where the rendering object moves according to the rotation track, and determines a scaling degree and a stacking order of the rendering object.
Optionally, the rendering requirement comprises a trajectory parameter of the rotation trajectory; then
The determining module is specifically configured to determine a rotation angle of the rendering object based on a position of a center point of the rotation track and an initial position of the rendering object in the rotation track; determining a target position of the rendering object based on the trajectory parameter and the rotation angle; and adjusting the scaling degree and the stacking sequence of the rendering objects according to the rotation angle.
Optionally, the determining module is specifically configured to, if it is determined that the rendering object is close to a viewpoint based on the rotation angle, increase a zoom level of the rendering object to enlarge the rendering object, and increase a stacking order value of the rendering object; if the rendering object is determined to be far away from the viewpoint based on the rotation angle, the scaling degree of the rendering object is reduced so as to reduce the rendering object and reduce the stacking sequence value of the rendering object.
Optionally, the rendering module is specifically configured to perform three-dimensional rendering and display on the rendered object through a cascading style sheet CSS according to the target position, the scaling degree, and the stacking order of the rendered object.
According to a third aspect of the present application, there is provided an electronic device comprising a processor and a machine-readable storage medium storing machine-executable instructions capable of being executed by the processor, the processor being caused by the machine-executable instructions to perform the method provided by the first aspect of the embodiments of the present application.
According to a fourth aspect of the present application, there is provided a machine-readable storage medium storing machine-executable instructions that, when invoked and executed by a processor, cause the processor to perform the method as provided by the first aspect of the embodiments of the present application.
The beneficial effects of the embodiment of the application are as follows:
in the object rendering method provided by the embodiment of the application, after the two-dimensional image including the rendering object is acquired, the rotation track of the rendering object is determined according to the rendering requirement of the rendering object, then, based on the rotation track and the initial position of the rendering object in the rotation track, determining a target position of the rendering object moving according to the rotation track, and a zoom level and a stacking order of the rendering object when moving, and then three-dimensionally rendering the rendered object based on the determined target position, zoom level and stacking order, therefore, rendering objects in the two-dimensional images are directly processed, smooth and real three-dimensional animation rendering effect is realized, namely the effect of simulating three-dimensional display is achieved based on the two-dimensional images, this avoids the use of three-dimensional frames of the prior art, thereby reducing the requirements for hardware devices and avoiding the waste of resources.
Drawings
Fig. 1 is a schematic structural diagram of an electronic device according to an exemplary embodiment of the present application;
FIG. 2 is a flow chart of a method of object rendering shown in an exemplary embodiment of the present application;
FIG. 3 is a schematic view of a rotational orbit illustrated in an exemplary embodiment of the present application;
FIG. 4 is a flow diagram illustrating the determination of a target position, a zoom level, and a stacking order of rendered objects according to an exemplary embodiment of the present application;
fig. 5 is a block diagram of an object rendering apparatus according to an exemplary embodiment of the present application.
Detailed Description
Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, like numbers in different drawings represent the same or similar elements unless otherwise indicated. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present application, as detailed in the appended claims.
The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used in this application and the appended claims, the singular forms "a", "an", and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise. It should also be understood that the term "and/or" as used herein refers to and encompasses any and all possible combinations of one or more of the corresponding listed items.
It is to be understood that although the terms first, second, third, etc. may be used herein to describe various information, such information should not be limited to these terms. These terms are only used to distinguish one type of information from another. For example, first information may also be referred to as second information, and similarly, second information may also be referred to as first information, without departing from the scope of the present application. The word "if" as used herein may be interpreted as "at … …" or "when … …" or "in response to a determination", depending on the context.
When three-dimensional animation display is carried out in the prior art, the requirement on the hardware performance of display equipment is high by directly adopting a three-dimensional animation frame, otherwise, the animation is blocked, and the user experience is very poor.
In order to solve the above problem, an embodiment of the present application provides an object rendering method, which is applied to an electronic device, and after a two-dimensional image including a rendering object is acquired, a rotation trajectory of the rendering object may be determined according to a rendering requirement of the rendering object; determining a target position of the rendering object moving according to the rotation track and determining a scaling degree and a stacking sequence of the rendering object based on the rotation track and an initial position of the rendering object in the rotation track; and then, three-dimensional rendering and displaying are carried out on the rendering object according to the determined target position, the zoom degree and the stacking sequence of the rendering object. Because the method directly converts the two-dimensional image into the three-dimensional animation for rendering and displaying and does not adopt a three-dimensional animation frame in the prior art for three-dimensional animation displaying, the displaying method has no higher requirement on the hardware performance of the electronic equipment, and the electronic equipment with general hardware performance can smoothly display the three-dimensional animation even by adopting the method provided by the application, thereby improving the user experience.
Fig. 1 is a block diagram of an electronic device 100 according to the present embodiment. The electronic device 100 includes a memory 110, a processor 120, and a communication module 130. The memory 110, the processor 120, and the communication module 130 are electrically connected to each other directly or indirectly to enable data transmission or interaction. For example, the components may be electrically connected to each other via one or more communication buses or signal lines.
The memory 110 is used to store programs or data. The Memory 110 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like.
The processor 120 is used to read/write data or programs stored in the memory 110 and perform corresponding functions. For example, when the computer program stored in the memory 110 is executed by the processor 120, the object rendering method disclosed in the embodiments of the present application can be implemented.
The communication module 130 is used for establishing a communication connection between the electronic device 100 and another communication terminal through a network, and for transceiving data through the network. For example, the electronic apparatus 100 may acquire a two-dimensional image including a rendering object from another communication terminal through the communication module 130.
It should be understood that the configuration shown in fig. 1 is merely a schematic diagram of the configuration of the electronic device 100, and that the electronic device 100 may include more or fewer components than shown in fig. 1, or have a different configuration than shown in fig. 1. The components shown in fig. 1 may be implemented in hardware, software, or a combination thereof. Optionally, the electronic device 100 in the embodiment of the present application may be a portable computer, a PC, or other devices capable of having a three-dimensional animation display, and may also be other devices, which is determined according to actual situations.
The object rendering method provided by the present application is explained in detail below.
Referring to fig. 2, fig. 2 is a flowchart of an object rendering method illustrated in the present application. The object rendering method is applied to the electronic equipment, and when the electronic equipment implements the method, the method can comprise the following steps:
s201, acquiring a two-dimensional image including a rendering object, and determining a rotation track of the rendering object according to a rendering requirement of the rendering object.
In specific implementation, the two-dimensional image in the application can be a UI design image, and the two-dimensional image includes an object to be rendered during display, namely a rendering object, which is also called an object for which the two-dimensional image needs to be displayed in a three-dimensional animation.
In addition, after the two-dimensional image is generated, the animation display requirement (visualization requirement) of the rendering object therein can be determined, so that the rendering requirement of the rendering object in the two-dimensional image can be obtained while the two-dimensional image is obtained, for example, at what position each time is displayed, at what size the position is displayed, and the like. The rotational trajectory of the rendering object may be determined based on the rendering requirements of the rendering object. It should be noted that, the two-dimensional image includes at least one rendering object, and when the two-dimensional image includes a plurality of rendering objects, the rotation tracks of the plurality of rendering objects may be the same or different, and may be determined according to actual situations. For convenience of description, the present application takes an example that rendering objects in a two-dimensional image all correspond to a rotation track.
It is noted that the rotation orbit in this application can be understood as: rendering objects in the two-dimensional image are rotated around a certain center in an orbit of an ellipse, a circle, or the like.
S202, based on the rotation track and the initial position of the rendering object in the rotation track, determining the target position of the rendering object moving according to the rotation track, and determining the scaling degree and the stacking sequence of the rendering object.
The stacking sequence in the application is used for representing the up-down stereoscopic relation of the rendering objects on the stacking sequence.
In practical application, in order to perform three-dimensional animation display, the rendering objects moving along the same trajectory in the UI design drawing fall on the rotation track, and an initial position of the rendering object on the rotation track needs to be determined, so that a next position when the rendering object moves along the rotation track, that is, a target position in step S202, can be determined. For example, when a rendering object is three-dimensionally displayed using a Cascading Style Sheets (CSS), the initial position and the target position refer to positions of the rendering object in the CSS.
In addition, in order to realize three-dimensional animation display, the position of the rendering object is updated in a timed or real-time manner in the embodiment of the present application, so that the target position in the present application can be understood as the position of the next time determined by using the initial position of the current time as a reference.
Specifically, the rendering requirement of the rendering object in the present application includes track parameters of a rotation track, where when the rotation track of the rendering object is an ellipse, the track parameters of the rotation track are a semi-major axis a and a semi-minor axis b of the rotation track, and if the rotation track is a circular track, the semi-major axis is equal to the semi-minor axis, that is, a is equal to b. In a visual three-dimensional animation, generally, a plurality of rendering objects (which may be relatively small) rotate around a center rendering object, the position of the center rendering object is set to (X0, Y0), and referring to an elliptical rotation track shown in fig. 3, (X0, Y0) are central points of the elliptical track, in order to implement a three-dimensional animation display, the rendering objects moving around the elliptical track are placed on the elliptical track, that is, a target position of the rendering objects moving according to the elliptical track needs to be determined.
Optionally, based on any of the above embodiments, step S202 may be implemented according to the flow shown in fig. 4, and includes the following steps:
s401, determining the rotation angle of the rendering object based on the position of the central point of the rotation track and the initial position of the rendering object in the rotation track.
The rotation angle determined in step S401 is the rotation angle at the target position when the rendering object moves at the next time.
In specific implementation, when there are a plurality of rendering objects, the initial position of each rendering object in the rotation track may be determined according to the number of the rendering objects. For example, the position of the rendering object is expressed by abscissa and ordinate, and the initial position of the ith rendering object is marked as (Xi, Yi). When the initial position of the ith rotating object is determined, the initial rotating angle of the rendering object is determined firstly and is marked as theta i An included angle between a coordinate connecting line of an initial coordinate of the rendering object and a central point and a long axis is formed, and then an initial position is determined based on the initial rotation angle; when the initial rotation angle of each rendering object is determined, the initial rotation angle may be determined based on the distribution of each rendering object on the rotation track, and the initial rotation angle of each rendering object may be calculated based on the principle. It should be noted that the initial rotation angle in the present application may be understood as an angle at which the rendering object is located at the current time (initial position).
Optionally, in order to obtain a better display effect of the three-dimensional rendering picture, the rendering objects may be uniformly distributed according to the present application, and the relationship between the initial rotation angles of the rendering objects may be represented by the following formula:
θ ii-1 =2*π/N
in the above formula, N is the number of rendering objects, θ i Initial rotation angle, θ, for the ith rendering object i-1 The initial rotation angle for the i-1 th rendering object. Then, the initial position of the ith rendering object at the current initial rotation angle is determined.
When the rendering object is moved according to the rotation track during the timing refresh, the rendering angle of the rendering object may change, and specifically, the rotation angle of the rendering object at the next time may be determined according to the following procedure: the value of the rotation angle is a sum of the initial rotation angle at the present time and a fixed offset amount Δ θ, and is expressed as: theta i + Δ θ. And the offset amount Δ θ can be calculated by the following equation:
Figure BDA0002396241640000091
where T is the rotation period and n is the timer interval.
S402, determining the target position of the rendering object based on the track parameters and the rotation angle.
In specific implementation, the description is further given by taking the elliptical orbit shown in fig. 3 as an example, the orbit parameters of the elliptical orbit are a major axis a and a minor axis b, the description is given by taking the target position of the ith rendering object as an example, and the rotation angle of the ith rendering object is determined based on step S401 as
Figure BDA0002396241640000092
The target position of the rendering object can be calculated according to the following formula:
Figure BDA0002396241640000093
wherein, the (x, y) in the formula is the target position of the ith rendering object, i.e. the position to be selected. And determining the target position of the rendering object at each moment based on the formula.
And S403, adjusting the zoom degree and the stacking sequence of the rendering objects according to the rotation angle.
In specific implementation, the scaling degree and the stacking order of the rendering objects depend on the rotation angle. The stacking order is used to represent the stereoscopic relationship of the rendering object during the display, and may also be referred to as depth of field in the image, or may also be understood as a third-dimensional coordinate, which is denoted as z-index. In three-dimensional space, objects of the same size exhibit the effect of being large and small, and based on this principle, rendering objects presented at the viewpoint should be larger, while rendering objects far from the viewpoint are smaller.
Optionally, based on any of the above embodiments, the zoom level and the stacking order of the rendered objects may be adjusted according to the following procedures:
if the rendering object is determined to be close to the viewpoint based on the rotation angle, the scaling degree of the rendering object is increased to enlarge the rendering object and increase the stacking sequence value of the rendering object;
if the rendering object is determined to be far away from the viewpoint based on the rotation angle, the scaling degree of the rendering object is reduced so as to reduce the rendering object and reduce the stacking sequence value of the rendering object.
It should be noted that the viewpoint in the embodiment of the present application may be understood as a point where the human eye has the best viewing angle and visual effect when viewing the three-dimensional animation.
Specifically, also explained in conjunction with fig. 3, point a0 on the elliptical orbit is considered to be the closest point to the viewpoint. The rotation angle of the ith rendering object
Figure BDA0002396241640000101
In the process, it is indicated that the rendering object is farthest from the viewpoint, and correspondingly, the size (display size) of the rendering object is the smallest, so that the zoom degree of the rendering object can be reduced to reduce the rendering object, so as to improve the display effect of the three-dimensional animation. When it comes to
Figure BDA0002396241640000102
When the rendering object is closest to the viewpoint, i.e. at point a0 of the rotation track in fig. 3, the size of the rendering object should be the largest, so that the rendering object may be enlarged by increasing the zoom level of the rendering object. In specific implementation, when the zoom level of the rendering object is increased or decreased, the principle is that the three-dimensional animation display effect of the adjusted rendering object is better.
Optionally, in order to obtain a better display effect, a zoom degree corresponding to each rotation angle on the elliptical track is preset, and after the rotation angle of the ith rendering object is determined, the zoom degree of the rendering object may be directly determined based on the correspondence between the rotation angle and the zoom degree. According to the embodiment of the application, the effect of the near-large and far-small is achieved by adjusting the size of the rendering object, so that the achieved three-dimensional display effect is closer to a real three-dimensional scene.
Optionally, when three-dimensional display is performed, multiple rendering objects are likely to exist, based on the scene, a rendering object close to the viewpoint and a rendering object far from the viewpoint may exist at the same time, and the rendering object close to the viewpoint may block the rendering object far from the viewpoint, and when blocking occurs, the blocking effect is not good, that is, the rendering object close to the viewpoint cannot better block the rendering object far from the viewpoint, so that the playing effect of the three-dimensional animation is affected, and therefore, in order to solve the problem, the three-dimensional display is implemented by adjusting the stacking sequence of the rendering objects. In specific implementation, if the rendering object is closer to the viewpoint, increasing the stacking sequence value of the rendering object, namely increasing the z-index value of the rendering object; and if the rendering object is far away from the viewpoint, reducing the stacking sequence value of the rendering object, namely, reducing the z-index value of the rendering object.
Referring to fig. 3, when the rendering object is closest to the viewpoint, for example, the rendering object at the viewpoint position is adjusted to have a stacking order value z-index larger, so that the adjusted rendering object can block the rendering object farther from the viewpoint, for example, the rendering object at other positions farther from the viewpoint, such as a symmetric point of the viewpoint. Correspondingly, the rendering objects farther from the viewpoint are reduced in the stacking sequence value z-index of the rendering objects farther from the viewpoint, so that the rendering objects closer to the viewpoint can better shield the rotating objects farther from the viewpoint, and a better three-dimensional display effect is achieved. Based on this, by adjusting the stacking sequence value z-index of the rendering objects on the rotation track, the effects of near and far and mutual covering in reality are presented, and the displayed three-dimensional rendering animation is closer to the actual three-dimensional effect.
And S203, performing three-dimensional rendering and display on the rendering object according to the target position, the zooming degree and the stacking sequence of the rendering object.
Specifically, after the target position, the zoom degree and the stacking sequence of the rendering object are determined, when the rendering object is subjected to three-dimensional rendering display, the three-dimensional rendering display can be realized through a Cascading Style Sheet (CSS). In specific implementation, the current position, the scaling degree and the stacking sequence of the rendering object are modified by the CSS to the target position, the scaling degree and the stacking sequence determined in step S202, so that the style of the rendering object can be modified, that is, the three-dimensional rendering of the rendering object is realized. Because the three values of the rendering object are changed in a timing or real-time manner, the rendering object in the UI design can move according to the track of the rotation track, and meanwhile, the three-dimensional animation display is realized. The timing operation is generally implemented by setting a timer at setInterval, which will be described in detail later.
Optionally, based on any of the above embodiments, step S201 and step S203 in the present application are implemented by a main thread. However, in practical applications, due to the single-thread characteristic of JS, when the main thread performs timing calculation by using the setInterval method, if the calculation is time-consuming, other work of the main thread may be blocked, especially in data visualization, there is generally more than one animation component, and if there are other operations on a page at this time, problems such as inaccurate timer and stuck animation may be caused, so in order to solve this problem, the following process is proposed in the embodiment of the present application:
and calling the sub-thread so that the sub-thread determines the target position of the rendering object moving according to the rotation track and determines the scaling degree and the stacking sequence of the rendering object based on the rotation track and the initial position of the rendering object in the rotation track.
In specific implementation, the webworker sub-thread is called to execute the relevant process in the step S202, that is, the target position, the zooming degree and the stacking sequence of the rendering object are determined, and then the three calculation results are fed back to the main thread, so that the resources of the main thread can be effectively saved.
By implementing the object rendering method provided by the application, after the two-dimensional image comprising the rendering object is obtained, the rotation track of the rendering object is determined according to the rendering requirement of the rendering object, then, based on the rotation track and the initial position of the rendering object in the rotation track, determining a target position of the rendering object moving according to the rotation track, and a zoom level and a stacking order of the rendering object when moving, and then three-dimensionally rendering the rendered object based on the determined target position, zoom level and stacking order, thereby directly processing the rendering object in the two-dimensional image, realizing smooth and real three-dimensional animation rendering effect, namely achieving the effect of simulating three-dimensional display based on the two-dimensional image, this avoids the use of three-dimensional frames of the prior art, thereby reducing the requirements for hardware devices and avoiding the waste of resources.
Based on the same inventive concept, the application also provides an object rendering device corresponding to the object rendering method. The implementation of the object rendering apparatus may refer to the above description of the object rendering method, and is not discussed here.
Referring to fig. 5, fig. 5 is a diagram illustrating an object rendering apparatus according to an exemplary embodiment of the present application, where the object rendering apparatus includes:
an obtaining module 501, configured to obtain a two-dimensional image including a rendering object, and determine a rotation trajectory of the rendering object according to a rendering requirement of the rendering object;
a determining module 502, configured to determine, based on the rotation track and an initial position of the rendering object in the rotation track, a target position where the rendering object moves according to the rotation track, and determine a scaling degree and a stacking order of the rendering object, where the stacking order is used to represent an up-down stereoscopic relationship of the rendering object in a stacking order;
and the rendering module 503 is configured to perform three-dimensional rendering and display on the rendering object according to the target position, the zoom level, and the stacking order of the rendering object.
Optionally, the determining module 502 of this embodiment is specifically configured to invoke a child thread, so that the child thread determines, based on the rotation track and an initial position of the rendering object in the rotation track, a target position where the rendering object moves according to the rotation track, and determines a scaling degree and a stacking order of the rendering object.
Optionally, the rendering requirement in the embodiment of the present application includes a track parameter of the rotation track; then the
The determining module 502 is specifically configured to determine a rotation angle of the rendering object based on a position of a center point of the rotation track and an initial position of the rendering object in the rotation track; determining a target position of the rendering object based on the trajectory parameter and the rotation angle; and adjusting the scaling degree and the stacking sequence of the rendering objects according to the rotation angle.
Optionally, the determining module 502 is specifically configured to, if it is determined that the rendering object is close to a viewpoint based on the rotation angle, increase a zoom level of the rendering object to enlarge the rendering object, and increase a stacking order value of the rendering object; if the rendering object is determined to be far away from the viewpoint based on the rotation angle, the scaling degree of the rendering object is reduced so as to reduce the rendering object and reduce the stacking sequence value of the rendering object.
Optionally, the rendering module 503 is specifically configured to perform three-dimensional rendering and displaying on the rendering object through a cascading style sheet CSS according to the target position, the scaling degree, and the stacking order of the rendering object.
Based on the same inventive concept, the embodiment of the present application further provides an electronic device, which includes a processor and a machine-readable storage medium, where the machine-readable storage medium stores machine-executable instructions capable of being executed by the processor, and the processor is caused by the machine-executable instructions to execute the object rendering method provided in any embodiment of the present application.
In addition, a machine-readable storage medium is provided, which stores machine-executable instructions, and when the machine-readable storage medium is called and executed by a processor, the machine-executable instructions cause the processor to execute the object rendering method provided by the embodiment of the application.
For the embodiments of the electronic device and the machine-readable storage medium, since the contents of the related methods are substantially similar to those of the foregoing embodiments of the methods, the description is relatively simple, and for the relevant points, reference may be made to the partial description of the embodiments of the methods.
The implementation process of the functions and actions of each unit in the above device is specifically described in the implementation process of the corresponding step in the above method, and is not described herein again.
For the device embodiments, since they substantially correspond to the method embodiments, reference may be made to the partial description of the method embodiments for relevant points. The above-described embodiments of the apparatus are merely illustrative, and the units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of the application. One of ordinary skill in the art can understand and implement it without inventive effort.
The above description is only exemplary of the present application and should not be taken as limiting the present application, as any modification, equivalent replacement, or improvement made within the spirit and principle of the present application should be included in the scope of protection of the present application.

Claims (8)

1. An object rendering method, comprising:
acquiring a two-dimensional image comprising a rendering object, and determining a rotation track of the rendering object according to the rendering requirement of the rendering object;
based on the rotation track and the initial position of the rendering object in the rotation track, determining a target position of the rendering object moving according to the rotation track, and determining a scaling degree and a stacking sequence of the rendering object, wherein the stacking sequence is used for representing an up-down stereoscopic relation of the rendering object in a stacking sequence;
performing three-dimensional rendering and display on the rendering object according to the target position, the zooming degree and the stacking sequence of the rendering object;
wherein determining the zoom level and the stacking order of the rendering objects based on the rotation track and the initial positions of the rendering objects in the rotation track comprises:
determining a rotation angle of the rendering object based on a position of a center point of the rotation track and an initial position of the rendering object in the rotation track;
according to the rotation angle, adjusting the zoom degree and the stacking sequence of the rendering objects comprises the following steps:
if the rendering object is determined to be close to the viewpoint based on the rotation angle, the zoom degree of the rendering object is increased to enlarge the rendering object and increase the stacking sequence value of the rendering object;
if the rendering object is determined to be far away from the viewpoint based on the rotation angle, the scaling degree of the rendering object is reduced so as to reduce the rendering object and reduce the stacking sequence value of the rendering object.
2. The method of claim 1, wherein determining the angle of rotation of the rendering object based on the rotational trajectory and the initial position of the rendering object in the rotational trajectory comprises:
and calling a sub-thread so that the sub-thread determines the target position of the rendering object moving according to the rotation track and determines the scaling degree and the stacking sequence of the rendering object based on the rotation track and the initial position of the rendering object in the rotation track.
3. The method of claim 1 or 2, wherein the rendering requirements include trajectory parameters of the rotational trajectory; then the
Based on the rotation track and the initial position of the rendering object in the rotation track, determining a target position of the rendering object moving according to the rotation track, and determining a zoom degree and a stacking order of the rendering object, including:
determining a rotation angle of the rendering object based on a position of a center point of the rotation track and an initial position of the rendering object in the rotation track;
determining a target position of the rendering object based on the trajectory parameter and the rotation angle.
4. The method of claim 1, wherein three-dimensionally rendering and displaying the rendered object according to the target position, the zoom level, and the stacking order of the rendered object comprises:
and according to the target position, the zooming degree and the stacking sequence of the rendering object, performing three-dimensional rendering and display on the rendering object through a Cascading Style Sheet (CSS).
5. An object rendering apparatus, comprising:
the system comprises an acquisition module, a display module and a control module, wherein the acquisition module is used for acquiring a two-dimensional image comprising a rendering object and determining a rotation track of the rendering object according to the rendering requirement of the rendering object;
the determining module is used for determining a target position of the rendering object moving according to the rotation track and determining the zoom degree and the stacking sequence of the rendering object based on the rotation track and the initial position of the rendering object in the rotation track, wherein the stacking sequence is used for representing the up-down stereoscopic relationship of the rendering object in the stacking sequence;
the determining module is specifically configured to determine a rotation angle of the rendering object based on a position of a center point of the rotation trajectory and an initial position of the rendering object in the rotation trajectory; if the rendering object is determined to be close to the viewpoint based on the rotation angle, the zoom degree of the rendering object is increased to enlarge the rendering object and increase the stacking sequence value of the rendering object; if the rendering object is determined to be far away from the viewpoint based on the rotation angle, the zoom degree of the rendering object is reduced to reduce the rendering object and reduce the stacking sequence value of the rendering object
And the rendering module is used for performing three-dimensional rendering and displaying on the rendering object according to the target position, the zooming degree and the stacking sequence of the rendering object.
6. The apparatus of claim 5,
the determining module is specifically configured to invoke a child thread, so that the child thread determines, based on the rotation trajectory and an initial position of the rendering object in the rotation trajectory, a target position where the rendering object moves according to the rotation trajectory, and determines a scaling degree and a stacking order of the rendering object.
7. The apparatus of claim 5 or 6, wherein the rendering requirements comprise trajectory parameters of the rotation trajectory; then
The determining module is specifically configured to determine a rotation angle of the rendering object based on a position of a center point of the rotation track and an initial position of the rendering object in the rotation track; determining a target position of the rendering object based on the trajectory parameter and the rotation angle.
8. The apparatus of claim 5,
the rendering module is specifically configured to perform three-dimensional rendering and display on the rendered object through a Cascading Style Sheet (CSS) according to the target position, the zoom degree, and the stacking sequence of the rendered object.
CN202010132731.7A 2020-02-29 2020-02-29 Object rendering method and device Active CN111476870B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010132731.7A CN111476870B (en) 2020-02-29 2020-02-29 Object rendering method and device

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010132731.7A CN111476870B (en) 2020-02-29 2020-02-29 Object rendering method and device

Publications (2)

Publication Number Publication Date
CN111476870A CN111476870A (en) 2020-07-31
CN111476870B true CN111476870B (en) 2022-08-30

Family

ID=71747561

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010132731.7A Active CN111476870B (en) 2020-02-29 2020-02-29 Object rendering method and device

Country Status (1)

Country Link
CN (1) CN111476870B (en)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116958389A (en) * 2022-04-14 2023-10-27 深圳市腾讯网络信息技术有限公司 Object rendering method and device, electronic equipment and storage medium

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20020063057A (en) * 2001-01-26 2002-08-01 한탁돈 parallel rendering machines supporting hardware accelerated order independent transparency
WO2003034343A1 (en) * 2001-10-15 2003-04-24 Fujitsu Limited Hierarchical sort of objects linked in virtual three-dimensional space
CN103559730A (en) * 2013-11-20 2014-02-05 广州博冠信息科技有限公司 Rendering method and device
CN104520903A (en) * 2012-01-31 2015-04-15 谷歌公司 Method for improving speed and visual fidelity of multi-pose 3D renderings
CN107038751A (en) * 2015-12-07 2017-08-11 达索系统公司 The identification of 3D modeling object is carried out from 2D images
CN107958480A (en) * 2017-11-23 2018-04-24 腾讯科技(上海)有限公司 Image rendering method, device and storage medium
CN108564646A (en) * 2018-03-28 2018-09-21 腾讯科技(深圳)有限公司 Rendering intent and device, storage medium, the electronic device of object
CN109448089A (en) * 2018-10-22 2019-03-08 美宅科技(北京)有限公司 A kind of rendering method and device
CN109543130A (en) * 2018-11-06 2019-03-29 新华三大数据技术有限公司 The display methods and device of label under three-dimensional scenic
CN109658325A (en) * 2018-12-24 2019-04-19 成都四方伟业软件股份有限公司 A kind of three-dimensional animation rendering method and device
CN109829982A (en) * 2019-01-28 2019-05-31 Oppo广东移动通信有限公司 Model matching method, device, terminal device and storage medium

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8436857B2 (en) * 2009-10-20 2013-05-07 Oracle America, Inc. System and method for applying level of detail schemes
US10424100B2 (en) * 2017-11-21 2019-09-24 Microsoft Technology Licensing, Llc Animating three-dimensional models using preset combinations of animation features

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20020063057A (en) * 2001-01-26 2002-08-01 한탁돈 parallel rendering machines supporting hardware accelerated order independent transparency
WO2003034343A1 (en) * 2001-10-15 2003-04-24 Fujitsu Limited Hierarchical sort of objects linked in virtual three-dimensional space
CN104520903A (en) * 2012-01-31 2015-04-15 谷歌公司 Method for improving speed and visual fidelity of multi-pose 3D renderings
CN103559730A (en) * 2013-11-20 2014-02-05 广州博冠信息科技有限公司 Rendering method and device
CN107038751A (en) * 2015-12-07 2017-08-11 达索系统公司 The identification of 3D modeling object is carried out from 2D images
CN107958480A (en) * 2017-11-23 2018-04-24 腾讯科技(上海)有限公司 Image rendering method, device and storage medium
CN108564646A (en) * 2018-03-28 2018-09-21 腾讯科技(深圳)有限公司 Rendering intent and device, storage medium, the electronic device of object
CN109448089A (en) * 2018-10-22 2019-03-08 美宅科技(北京)有限公司 A kind of rendering method and device
CN109543130A (en) * 2018-11-06 2019-03-29 新华三大数据技术有限公司 The display methods and device of label under three-dimensional scenic
CN109658325A (en) * 2018-12-24 2019-04-19 成都四方伟业软件股份有限公司 A kind of three-dimensional animation rendering method and device
CN109829982A (en) * 2019-01-28 2019-05-31 Oppo广东移动通信有限公司 Model matching method, device, terminal device and storage medium

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
3D Modeling and Rendering of 2D Medical Image;Avnish Patel 等;《2012 International Conference on Communication Systems and Network Technologies》;20121231;第149-152页 *
三维动画图像纹理实时渲染系统设计;孔素然 等;《现代电子技术》;20180228(第05期);第110-113页 *
基于多帧二维动画图像的三维自动生成技术;丛红艳;《现代电子技术》;20170930(第18期);第106-108页 *

Also Published As

Publication number Publication date
CN111476870A (en) 2020-07-31

Similar Documents

Publication Publication Date Title
CN106502427B (en) Virtual reality system and scene presenting method thereof
US9886102B2 (en) Three dimensional display system and use
US11282264B2 (en) Virtual reality content display method and apparatus
TWI669635B (en) Method and device for displaying barrage and non-volatile computer readable storage medium
CN109741463B (en) Rendering method, device and equipment of virtual reality scene
EP3683656A1 (en) Virtual reality (vr) interface generation method and apparatus
US11477432B2 (en) Information processing apparatus, information processing method and storage medium
CN111275801A (en) Three-dimensional picture rendering method and device
CN113206993A (en) Method for adjusting display screen and display device
CN111476870B (en) Object rendering method and device
CN109725730B (en) Head-mounted display device and driving method thereof, display system and driving method thereof
CN110548289B (en) Method and device for displaying three-dimensional control
CN116501209A (en) Editing view angle adjusting method and device, electronic equipment and readable storage medium
KR20200103278A (en) System and method for providing virtual reality contents indicated view direction
KR20160143936A (en) Method for increasing 3D rendering performance and system thereof
CN112667137B (en) Switching display method and device for house type graph and house three-dimensional model
US9875572B2 (en) Method for simulating three-dimensional display on a two-dimensional display unit
KR101741149B1 (en) Method and device for controlling a virtual camera's orientation
US11910068B2 (en) Panoramic render of 3D video
CN113332712B (en) Game scene picture moving method and device and electronic equipment
CN112529769B (en) Method and system for adapting two-dimensional image to screen, computer equipment and storage medium
CN111135576A (en) Method, device and equipment for adjusting scene view angle and storage medium
CN115155062A (en) Information processing method, information processing device, electronic equipment and storage medium
EP3547084A2 (en) Multi line trace gaze to object mapping for determining gaze focus targets
CN115564932A (en) Data processing method and data processing device

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
GR01 Patent grant
GR01 Patent grant