Page turning effect generation method and device, equipment and medium

Abstract

The embodiment of the invention discloses a page turning effect generation method and device, equipment and a medium, and relates to the technical field of virtual book page turning. The method comprises the following steps: in response to a page turning operation for a first picture, determining a target boundary point corresponding to a target pixel point on a boundary of the first picture according to a dragging direction indicated by the page turning operation; determining the curl circumference arc length from the position of the target boundary point of the curled first picture to the curl shaft, and determining the page turning boundary position corresponding to the target pixel point according to the curl circumference arc length; and performing shadow rendering on the target pixel point according to the first distance from the target pixel point to the page turning junction position. According to the technical scheme, the page turning boundary position corresponding to the target pixel point can be accurately determined through the curled circumferential arc length, so that shadow rendering is performed at the target pixel point based on the distance from the page turning boundary position to the target pixel point, a more natural shadow expression is presented, and the stereoscopic impression of page turning is enhanced.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of virtual book page turning, and in particular to a page turning effect generation method, device, equipment and medium. BACKGROUND

[0002] To enable users to obtain a better viewing experience when viewing a virtual book, many software displays a page turning animation when a user turns a page. Specifically, after the user initiates a page turning operation, a page is curled, so that the back of the page being turned gradually appears as the page turning process proceeds.

[0003] In a page turning animation, the display of a page turning shadow is a very important item. In a current page turning shadow display scheme, the approximate position at which a page is folded is first determined, and a shadow effect is then performed at the approximate position at which the page is folded. However, the precision of the page turning shadow obtained in this way is poor, which affects the viewing experience of a user. SUMMARY

[0004] The present application provides a page turning effect generation method, device, equipment and medium, which can accurately display a page turning shadow when a page is turned, enhance the stereoscopic effect of page turning, and present a more natural shadow performance.

[0005] According to an aspect of the present application, a page turning effect generation method is provided, and the method comprises:

[0006] displaying a first picture on a display device;

[0007] in response to a page turning operation on the first picture, determining a target boundary point corresponding to a target pixel point on a boundary of the first picture according to a dragging direction indicated by the page turning operation; the target pixel point is a pixel point in a shadow area to be displayed on the first picture and / or a second picture; the second picture is a picture displayed after the first picture is turned;

[0008] determining a curling circumferential arc length from a position of the target boundary point after the first picture is curled to a curling shaft, and determining a page turning junction position corresponding to the target pixel point according to the curling circumferential arc length; the page turning junction position is located at a junction of the first picture and the second picture after the first picture is turned;

[0009] performing shadow rendering on the target pixel point according to a first distance from the target pixel point to the page turning junction position, to display a shadow effect when the first picture is turned.

[0010] According to another aspect of the present application, a page turning effect generation device is provided, and the device comprises:

[0011] a first picture display module configured to display a first picture on a display device;

[0012] a target boundary point determination module configured to determine a target boundary point corresponding to a target pixel point on a boundary of the first picture according to a dragging direction indicated by a page turning operation in response to the page turning operation; the target pixel point is a pixel point in a shadow region to be displayed on the first picture and / or the second picture; the second picture is a picture displayed after the first picture is turned;

[0013] a page turning junction position determination module configured to determine an arc length of a turning circle of a turning shaft at a position of the target boundary point after the first picture is turned, and determine a page turning junction position corresponding to the target pixel point according to the arc length of the turning circle; the page turning junction position is located at a junction of the first picture and the second picture after the first picture is turned;

[0014] a shadow rendering module configured to perform shadow rendering on the target pixel point according to a first distance from the target pixel point to the page turning junction position, so as to display a shadow effect when the first picture is turned.

[0015] According to another aspect of the present application, an electronic device is provided, which comprises:

[0016] at least one processor; and

[0017] a memory connected to the at least one processor in communication; wherein

[0018] the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor to enable the at least one processor to execute the method for generating a page turning effect according to any one of the embodiments of the present application.

[0019] According to another aspect of the present application, a computer readable storage medium is provided, which stores computer instructions for enabling a processor to implement the method for generating a page turning effect according to any one of the embodiments of the present application when executed by the processor.

[0020] The technical scheme of the embodiment of the present application comprises: displaying a first picture on a display device; in response to a page turning operation for the first picture, determining a target boundary point corresponding to a target pixel point on a boundary of the first picture according to a dragging direction indicated by the page turning operation; the target pixel point is a pixel point in a to-be-displayed shadow area on the first picture and / or the second picture; the second picture is a picture displayed after the first picture is turned; determining a curling circumferential arc length from a position of the target boundary point after the first picture is curled to a curling shaft, and determining a page turning junction position corresponding to the target pixel point according to the curling circumferential arc length; the page turning junction position is located at a junction of the first picture and the second picture after the first picture is turned; performing shadow rendering on the target pixel point according to a first distance from the target pixel point to the page turning junction position, so as to display a shadow effect when the first picture is turned. The curling circumferential arc length can be used to accurately determine the page turning junction position corresponding to the target pixel point, so that shadow rendering is performed on the target pixel point based on the distance from the page turning junction position to the target pixel point, a more natural shadow performance is presented, and the stereoscopic effect of page turning is enhanced.

[0021] It should be understood that the content described in this part is not intended to identify key or important features of the embodiments of the present application, nor is it used to limit the scope of the present application. Other features of the present application will become apparent from the following description. BRIEF DESCRIPTION OF DRAWINGS

[0022] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed in the embodiment description will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without creative labor.

[0023] Figure 1 is a flowchart of a page turning effect generation method according to the first embodiment of the present application;

[0024] Figure 2 is a flowchart of a page turning effect generation method according to the second embodiment of the present application;

[0025] Figure 3 is a page turning schematic diagram of a first picture according to the second embodiment of the present application;

[0026] Figure 4 is a schematic diagram of a stereoscopic curling cylinder according to the second embodiment of the present application;

[0027] Figure 5 is an enlarged schematic diagram of a page turning junction according to the second embodiment of the present application;

[0028] Figure 6 is a comparison chart of the flipping effect obtained before and after the generation method of the flipping effect according to the second embodiment of the present application is provided;

[0029] Figure 7 is a structural schematic diagram of a flipping effect generation device according to the third embodiment of the present application;

[0030] Figure 8 is a structural schematic diagram of an electronic device for implementing the generation method of the flipping effect according to the present application. DETAILED DESCRIPTION

[0031] In order to enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative labor should fall within the scope of protection of the present application.

[0032] It should be noted that the terms "first", "second", "target" and the like in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and do not necessarily have to be used to describe a specific order or sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device including a series of steps or units does not have to be limited to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0033] Embodiment One

[0034] Figure 1 A flowchart of a generation method of a flipping effect according to the first embodiment of the present application is provided, the present application can be applicable to the case of displaying a flipping animation, the method can be executed by a flipping effect generation device, the flipping effect generation device can be realized in the form of hardware and / or software, and the flipping effect generation device can be configured in an electronic device with data processing capability. As shown in the figure, the method comprises: Figure 1

[0035] S110, displaying a first picture on a display device.

[0036] ​The first picture can display text, pictures, videos and other contents, and the first picture includes two sides, one side is displayed before page turning, and the other side is displayed after page turning.

[0037] In an optional embodiment, each page of the virtual book is a picture, the first picture can be a page displayed on the virtual book on the display device, and the virtual book can be a horizontal book or a vertical book; when the virtual book is a horizontal book, the first picture can be any one of the left and right pages.

[0038] S120, in response to a page turning operation for the first picture, determining a target boundary point corresponding to a target pixel point on a boundary of the first picture according to a dragging direction indicated by the page turning operation.

[0039] The page turning operation is an operation for indicating page turning of the first picture, and in a specific example, the page turning operation can include a dragging starting point and a dragging ending point, and the dragging direction can be a direction from the dragging ending point to the dragging starting point.

[0040] The target pixel point is a pixel point in a to-be-displayed shadow area on the first picture and / or the second picture; the to-be-displayed shadow area can be set according to actual conditions, and embodiments of the present application do not limit this. The second picture is a picture displayed after the first picture is turned, for example, the page turning operation indicates turning back a page, and the second picture is a next picture of the first picture; the page turning operation indicates turning forward a page, and the second picture is a previous picture of the first picture.

[0041] Specifically, in response to a page turning operation for the first picture, a dragging starting point and a dragging ending point indicated by the page turning operation are determined, and a dragging direction is determined accordingly; if a certain pixel point on the display device is located in the to-be-displayed shadow area, it is a target pixel point, a ray is drawn through the target pixel point along the dragging direction, and an intersection of the ray and a boundary of the first picture before page turning is determined as a target boundary point.

[0042] S130, determining a curling circumferential arc length from a position of the target boundary point after the first picture is curled to a curling shaft, and determining a page turning boundary position corresponding to the target pixel point according to the curling circumferential arc length.

[0043] The page turning boundary position is located at a page turning boundary of the first picture and the second picture after turning; since a part of the first picture is a turned page and another part is a non-turned page during page turning, and the curled part of the non-turned page also has an intersection with the second picture, the page turning boundary can include a boundary of the first turned page and the second picture, and a boundary of the first non-turned page and the second picture.

[0044] Specifically, the first image can be curled based on a curled cylinder to achieve a page-turning effect. During the page-turning process of the first image (i.e., during the curling process based on the curled cylinder), since the target boundary point itself is located on the boundary of the first image, the position of the target boundary point will also change after the first image is curled. After the first image is curled to the position indicated by the drag operation, the circumferential arc length of the curled circle from the position of the target boundary point after the first image is curled to the curling axis can be calculated (it should be noted that the method described in this application embodiment realizes the display of the shadow effect on a two-dimensional plane. The curled cylinder is only a tool used to calculate the specific position of the shadow. Therefore, on the two-dimensional plane, the position of the curling axis is actually the projection position of the curling axis of the three-dimensional curled cylinder). The page-turning boundary position information corresponding to the target pixel can be determined according to the length of the circumferential arc length. For example, if the circumferential arc length is long, greater than one-quarter of the arc length of the curled cylinder, then the page-turning boundary corresponding to the target pixel is located at the boundary between the page that has been turned in the first image and the second image; otherwise, the page-turning boundary corresponding to the target pixel is located at the boundary between the page that has not been turned in the first image and the second image.

[0045] This scheme is designed to obtain information about the page-turning boundary position corresponding to the target pixel. In subsequent steps, after determining the first distance from the target pixel to the page-turning boundary, shadow rendering can be performed based on the first distance, making the shadow distribution more accurate.

[0046] S140, the target pixel is shadow rendered according to the first distance from the target pixel to the page-turning boundary position, so as to display the shadow effect when the first image is turned.

[0047] Specifically, after obtaining the page-turn boundary position corresponding to the target pixel, a first distance from the target pixel to the page-turn boundary position can be determined based on the information of the page-turn boundary position. This first distance can be the distance from the target pixel to the page-turn boundary position in the drag direction. After obtaining the first distance, the first distance from each pixel in the shadow area to be displayed to the page-turn boundary can be determined. Therefore, pixel-level shadow rendering can be performed on each pixel in the display area based on the first distance. This allows for a more refined shadow distribution to be displayed when the first image is flipped to the position indicated by the page-turning operation, greatly improving the user's viewing experience.

[0048] The technical solution of this application embodiment includes: displaying a first image on a display device; responding to a page-turning operation on the first image, determining a target boundary point corresponding to a target pixel on the boundary of the first image according to the drag direction indicated by the page-turning operation; the target pixel is a pixel in a shadow area to be displayed on the first image and / or the second image; the second image is the image displayed after the first image is turned; determining the circumferential arc length from the location of the target boundary point after the first image is curled to the curling axis, and determining the page-turning boundary position corresponding to the target pixel according to the circumferential arc length; the page-turning boundary position is located at the boundary between the first image and the second image after the page is turned; and performing shadow rendering on the target pixel according to a first distance from the target pixel to the page-turning boundary position to display a shadow effect when the first image is turned. This technical solution can accurately determine the page-turning boundary position corresponding to the target pixel by using the circumferential arc length, thereby performing shadow rendering on the target pixel based on the distance from the page-turning boundary position to the target pixel, presenting a more natural shadow performance and enhancing the three-dimensionality of page turning.

[0049] Example 2

[0050] Figure 2 This is a flowchart of a method for generating a page-turning effect according to Embodiment 2 of this application. This embodiment is an optimization based on the above embodiment.

[0051] like Figure 2 As shown, the method in this embodiment of the application specifically includes the following steps:

[0052] S210 displays the first image on the display device.

[0053] S220, in response to a page-turning operation on the first image, a target boundary point corresponding to the target pixel is determined on the boundary of the first image according to the drag direction indicated by the page-turning operation.

[0054] In this embodiment of the application, optionally, the shadow area to be displayed includes at least one of the following areas: a second image area, an area on the first side of the scroll axis in the flipped page of the first image, an area on the first side of the scroll axis in the unflipped page of the first image, and an area on the second side of the scroll axis in the unflipped page of the first image; wherein, the first side of the scroll axis is the side of the first image that is curled; and the second side of the scroll axis is the side of the first image that is not curled.

[0055] For example, Figure 3 This is a page-turning illustration of the first image. Figure 3In the image, point B is the drag start point, and point A is the drag end point. The first image is curled based on a curled cylinder, with a curl radius of radius and a central axis of the cylinder as the curl axis. The shadow area to be displayed can be set according to the actual situation and may include at least one of the following areas: the second image area, the area located in the flipped page of the first image... Figure 3 The area to the right of the scroll, the area to the right of the scroll in the unflipped page of the first image, and the area to the left of the scroll in the unflipped page of the first image.

[0056] Since the focus after page turning is usually on the turned page of the first image, this embodiment can display a shadow on the right side of the scroll axis of the turned page, while leaving the left side un-shadowed, thus highlighting the content of the turned page while maintaining a good shadow effect. Furthermore, the unturned page of the first image can be given a certain shadow effect to emphasize the boundary between the turned and unturned pages of the first image.

[0057] S230: Determine the circumferential arc length of the curled circle from the location of the target boundary point after the first image is curled to the curling axis, and determine whether the circumferential arc length is greater than a preset arc length threshold. If so, execute S240; otherwise, execute S250.

[0058] For example, the preset arc length threshold is one-quarter of the arc length of the curled cylinder.

[0059] In this embodiment of the application, optionally, the process of determining the circumferential arc length of the curled circle includes: determining the drag endpoint and the drag starting point indicated by the page turning operation; determining the curling axis of the curled cylinder according to the drag endpoint and the drag direction; and determining the circumferential arc length of the curled circle according to the distance from the target boundary point to the curling axis.

[0060] Specifically, in this embodiment, the rendering of 2D book page-turning shadows can be performed based on a 3D cylindrical bonding model. The page-turning operation of the first image is based on a curled cylinder. Therefore, there is a curled portion from the location of the target boundary point after the first image is curled to the starting position of the curl (the position of the curl axis in the 2D plane). The process of determining the circumference arc length of this curled portion is as follows: in response to the page-turning operation for the first image, the drag endpoint and drag starting point indicated by the page-turning operation are determined; the straight line passing through the drag endpoint and perpendicular to the drag direction is determined as the curl axis. Since the first image is based on the location of the curl axis... The curling occurs at a position along a semi-cylinder on one side of the curling axis. Therefore, if the distance from the target boundary point to the curling axis before the first image is curled is greater than half the circumferential arc length of the curled cylinder (π × radius (where radius is the curling radius)), then the circumferential arc length from the target boundary point to the curling axis after the first image is curled is half the circumferential arc length of the curled cylinder. Otherwise, since the portion from the target boundary point to the curling axis after the first image is curled, the distance from the target boundary point to the curling axis before the first image is curled is the circumferential arc length of the curled cylinder. Figure 4 This is a schematic diagram of a three-dimensional curled cylinder. It can be seen that point P' is located at point P after curling, and the distance from point P' to the curling axis is the arc length of the curled circumference.

[0061] S240, determine that the page-turning boundary position is located on the edge of the curled cylinder.

[0062] Specifically, if the curvature of the curled circle is greater than a preset arc length threshold, the page-turning boundary position corresponding to the target pixel is located at the boundary between the already turned page of the first image and the second image. Since the first image is curled based on a curled cylinder, in this case, the page-turning boundary position corresponding to the target pixel is located on the edge of the curled cylinder, that is, the distance from the page-turning boundary position corresponding to the target pixel to the curling axis is the curling radius.

[0063] S250, the location of the target boundary point after the first image is curled is determined as the page-turning boundary position.

[0064] Specifically, if the arc length of the curled circle is less than or equal to a preset arc length threshold, then the target boundary point of the curled first image is located on the edge of the unflipped page of the first image, i.e. Figure 5 At the second page-turning boundary in the image, the location of the target boundary point after the first image is curled is the page-turning boundary position corresponding to the target pixel.

[0065] S260, the target pixel is shadow rendered based on the first distance from the target pixel to the page-turning boundary position, so as to display a shadow effect when the first image is turned.

[0066] Specifically, when the curvature of the curled circle is greater than a preset arc length threshold, the first distance is the distance from the target pixel to the edge of the curled cylinder in the dragging direction.

[0067] In this embodiment of the application, optionally, when the curvature of the curled circle is greater than a preset arc length threshold, the process of determining the first distance includes: determining the distance from the target pixel to the curling axis as a second distance; determining the curling radius as a third distance; and determining the first distance based on the second distance and the third distance.

[0068] Figure 5 This is an enlarged schematic diagram of the page-turning boundary. Figure 5 In the example, taking point P2 as the target pixel, if the arc length of the curled circle at the corresponding target boundary point is greater than a preset arc length threshold, then the corresponding first distance is the distance from point P2 to the edge of the curled cylinder. Figure 5 The edge of the curled cylinder is the first page-turn boundary, and the distance from the first page-turn boundary to the curling axis is the curling radius. In this case, when determining the first distance, since the second distance from the target pixel to the curling axis and the third distance from the first page-turn boundary to the curling axis are usually known, the first distance can be calculated based on the aforementioned second and third distances.

[0069] When the arc length of the curled circle is less than or equal to a preset arc length threshold, the first distance is the distance from the target pixel to the location of the target boundary point after the first image is curled in the dragging direction. Figure 5 Taking point P1 as an example, its corresponding target boundary point is point U. The distance from point U to the curling axis is the curling circumference arc length. If the curling circumference arc length is less than or equal to the preset arc length threshold, then point U will be located at point V after curling. The distance from point P to point V can be determined as the first distance.

[0070] In this embodiment of the application, optionally, when the circumferential arc length of the curled circle is less than or equal to a preset arc length threshold, the process of determining the first distance includes: determining the distance from the target pixel to the curling axis as the second distance; determining the distance between the location of the target boundary point after the first image is curled and the curling axis as the third distance; and determining the first distance based on the second distance and the third distance.

[0071] For example, if the second distance from the target pixel to the curl axis is known, and the third distance between the curled position of the target boundary point and the curl axis is calculated, the first distance can be quickly calculated based on the second and third distances.

[0072] In this embodiment of the application, optionally, the process of determining the third distance includes: determining the central angle corresponding to the arc length of the curled circle; and determining the third distance based on the sine value of the central angle and the curling radius.

[0073] Specifically, the calculation process of the third distance can be as follows: divide the arc length of the curled circle corresponding to the target boundary point by the curling radius to obtain the central angle, calculate the sine value of the central angle, and multiply the sine value by the curling radius to determine the third distance.

[0074] It should be noted that, in this embodiment, the third distance is the distance from the page-turning boundary to the scroll axis on a straight line passing through the target pixel and parallel to the dragging direction. Since part of the page-turning boundary is arc-shaped, the value of the third distance corresponding to different target pixels may be different.

[0075] In this embodiment of the application, optionally, determining the first distance based on the second distance and the third distance includes: if the target pixel is located in the second image area, then the difference between the second distance and the third distance is determined as the first distance; if the target pixel is located in the area on the first side of the curl axis in the first image, then the difference between the third distance and the second distance is determined as the first distance; if the target pixel is located in the area on the second side of the curl axis in the unflipped page of the first image, then the sum of the second distance and the third distance is determined as the first distance; wherein, the first side of the curl axis is the side of the first image where the first image is curled; the second side of the curl axis is the side of the first image where the first image is not curled.

[0076] Specifically, since the third distance is the distance from the page-turn boundary to the scroll bar on a straight line passing through the target pixel and parallel to the drag direction; and the second distance is the distance from the target pixel to the scroll bar, if the target pixel is located in the second image area, then both the target pixel and the page-turn boundary are located on one side of the scroll bar, and the target pixel is farther from the scroll bar. Therefore, the difference between the second distance and the third distance can be determined as the first distance. If the target pixel is located in the area on the first side of the scroll bar in the first image, then the target pixel is located between the scroll bar and the page-turn boundary line. Therefore, the difference between the third distance and the second distance can be determined as the first distance. If the target pixel is located in the area on the second side of the scroll bar in the unturned page of the first image, then the scroll bar is located between the target pixel and the page-turn boundary. Therefore, the sum of the second distance and the third distance can be determined as the first distance.

[0077] This scheme is designed so that, given the third and second distances, the first distance can be flexibly determined based on the location of the target pixel.

[0078] Optionally, in this embodiment of the application, the method further includes: determining the sampled pixel value based on the texture coordinates of the target pixel; correspondingly, performing shadow rendering on the target pixel based on the first distance from the target pixel to the page-turning boundary position to display the shadow effect when the first image is turned, including: determining the shadow intensity based on the first distance; and performing shadow effect rendering processing on the sampled pixel value based on the shadow intensity to display the rendered pixel value at the target pixel.

[0079] For example, the texture coordinates (UV coordinates) of the target pixel are determined and sampled to obtain the sampled pixel value (if the target pixel is located on the first unturned page, the sampled pixel value is the pixel value of the first unturned page; if the target pixel is located on the first turned page, the sampled pixel value is the pixel value of the first turned page; since the technical solution for determining the texture coordinates of the page corresponding to the target pixel is relatively mature, this application embodiment will not elaborate on it). The shadow intensity is determined according to the first distance corresponding to the target pixel (the first distance and the shadow intensity can be inversely proportional to achieve the effect that the shadow displayed is weaker the further away from the page turning boundary). The shadow effect rendering processing is performed on the sampled pixel value based on the determined shadow intensity, thereby realizing the shadow rendering of the target pixel.

[0080] In this embodiment of the application, optionally, the drag endpoint indicated by the page-turning operation and the drag starting point are located on the same side of the central axis of the page.

[0081] For example, taking a virtual book in landscape format as an example, there is an image on each side of the central axis of the page. If the first image is the image on the right, and the page-turning operation is to turn the page backward, in this case, if the drag starting point is detected to be on the right side of the central axis of the page, the position of the drag ending point is restricted so that the drag ending point is on the right side of the central axis of the page, in order to avoid abnormal page-turning situations.

[0082] In the technical solution of this application embodiment, if the arc length of the curled circle is greater than a preset arc length threshold, the page-turning boundary position is determined to be located on the edge of the curled cylinder; otherwise, the position of the target boundary point after the first image is curled is determined as the page-turning boundary position, and the first distance is calculated in two cases. Thus, when rendering the shadow of the target pixel, the shadow intensity can be calculated based on the first distance, so that the rendered shadow is distributed on both sides of the page-turning boundary, and the shadow effect weakens as the distance increases, which greatly improves the naturalness of the shadow and the three-dimensionality of the page-turning.

[0083] In a specific example Figure 5In this context, `mouseDist` represents the mouse distance: the distance from the starting point to the drag endpoint A. `origin` is the starting point: the intersection of the drag direction and the central axis of the page. `Radius` is the curl radius, which can be a custom value. The curl range refers to the range of intersections between the page and a straight line with a distance equal to the curl radius (radius) on both sides of the curl axis. `linePoint` is the intersection of the target pixel point `p` along the drag direction and the curl axis. `dist` is the distance from the target pixel point `p` to the curl axis. Figure 4 In this diagram, point P is a specific example of the target pixel, H is another pixel H that overlaps with the target pixel P, α is the radian angle of the target pixel P on the curled circle, and β is the radian angle of pixel H on the curled circle. The radian angle can be calculated from the radius and dist: β = arcsin(dist / radius), α = π – β. length is the arc length of the curled circle from P to the LinePoint point, and P' is the position of the target pixel P before curling, i.e., the sampled target pixel position.

[0084] Calculating shadows requires determining the shadow distance of the target pixel (this shadow distance is also known as the third distance). This shadow distance is within... Figure 5 The middle character is: shadowRadius. Figure 5 The pink and green dashed lines form a shadow line (the page-turning boundary). The shadow distance *shadowRadius* is the distance from the point *v* where the target pixel intersects the shadow line along the drag direction to the point *linePoint*. The shadow distance at the green dashed line (the first page-turning boundary) is the curl radius *Radius*, as shown by the purple solid line at point P2 in the figure. The shadow distance at the pink dashed line (the second page-turning boundary) needs to be calculated, as shown below. Figure 5 The solid purple line at point P1.

[0085] Further, the shadow optimization algorithm logic at the magenta dashed line is as follows: Find the intersection point U of the target pixel P with the UV space boundary in the drag direction, and the intersection point V of the shadow line in the drag direction. Point V is the position of point U on the curled circumference after curling. Calculate the distance LengthU (curved circumference arc length) from point U to LinePoint. If LengthU is greater than or equal to the curled circumference arc length corresponding to a 90-degree central angle, then the shadow distance corresponding to pixel P is located at the green dashed line, and the shadow distance is the curl radius Radius. If LengthU is less than the curled circumference arc length of 90 degrees, then the shadow distance corresponding to pixel P is located at the magenta dashed line. In this case, the shadow distance is derived from LengthU: shadowRadius = radius × sin(LengthU / radius).

[0086] Specifically, if the target pixel P is located to the right of the curled area, only the shadow and transparency need to be calculated. The shadow effect of the current pixel can be calculated using dist-shadowRadius. In software that creates page-turning effects, the next page's image can be placed on the next layer (the second image), so the shader does not need to sample the texture.

[0087] If the target pixel P is located to the right of the curl axis within the curled area, the arc length needs to be calculated based on the radian angle. First, it is necessary to determine whether point P is located above or below the circumference (corresponding to...). Figure 4 (Whether it's point P or point H), that is, calculate the pixel P' before curling for each of the two positions. =linePoint+mouseDir×(π–β)×radius, =linePoint+mouseDir×β×radius. like If the coordinates of the target pixel point P exceed the UV space boundary, then the target pixel point P is located below the circumference. Figure 4 The location of point H in the middle), the location of the target pixel being sampled is If the image is determined to be unobstructed, the sampled texture is the front of this page, and the shadow effect can be calculated using shadowRadius-dist; otherwise, the target pixel P is located above the circumference. Figure 4 (P-point position), the target pixel position for sampling is If the image is determined to be occluded, the sampled texture is the reverse side of this page, and the shadow effect can be calculated using radius-dist.

[0088] If the target pixel P is located to the left of the curl axis, then P is not located on the curled circumference. The length is the sum of the semicircular arc length of the curled circumference and dist. That is, the pixel position before curling corresponding to P is: P' = linePoint + mouseDir × (abs(dist) + pi × radius); where pi is π. If the coordinates of P' exceed the UV space boundary, the sampled target pixel position is P itself, and the sampled texture is the front of this page. The shadow effect can be calculated by saturate(radius-dist). If the coordinates of P' do not exceed the UV space boundary, the sampled target pixel position is P', and the sampled texture is the back of this page. There is no shadow effect. Figure 6 A comparison diagram of the page-turning effects obtained before and after implementing the page-turning effect generation method described in the embodiments of this application.

[0089] Example 3

[0090] Figure 7This is a schematic diagram of a page-turning effect generation device provided in Embodiment 3 of this application. This device can execute the page-turning effect generation method provided in any embodiment of the present invention, and possesses the corresponding functional modules and beneficial effects of the method. For example... Figure 7 As shown, the device includes:

[0091] The first image display module 310 is used to display a first image on a display device;

[0092] The target boundary point determination module 320 is used to determine, in response to a page-turning operation on the first image, a target boundary point corresponding to a target pixel on the boundary of the first image according to the drag direction indicated by the page-turning operation; the target pixel is a pixel in the shadow area to be displayed on the first image and / or the second image; the second image is the image displayed after the first image is turned;

[0093] The page-turning boundary position determination module 330 is used to determine the circumferential arc length of the curling circle from the location of the target boundary point after the first image is curled to the curling axis, and to determine the page-turning boundary position corresponding to the target pixel point based on the circumferential arc length; the page-turning boundary position is located at the boundary between the first image and the second image after the image is turned.

[0094] The shadow rendering module 340 is used to perform shadow rendering on the target pixel based on a first distance from the target pixel to the page-turning boundary position, so as to display a shadow effect when the first image is turned.

[0095] The technical solution of this application embodiment includes: a first image display module 310, used to display a first image on a display device; a target boundary point determination module 320, used to determine a target boundary point corresponding to a target pixel on the boundary of the first image according to the drag direction indicated by the page turning operation in response to a page turning operation of the first image; the target pixel is a pixel in the shadow area to be displayed on the first image and / or the second image; the second image is the image displayed after the first image is turned; a page turning boundary position determination module 330, used to determine the circumferential arc length from the location of the target boundary point after the first image is curled to the curling axis, and determine the page turning boundary position corresponding to the target pixel according to the circumferential arc length; the page turning boundary position is located at the boundary between the first image and the second image after the page is turned; and a shadow rendering module 340, used to perform shadow rendering on the target pixel according to a first distance from the target pixel to the page turning boundary position, so as to display a shadow effect when the first image is turned. This technical solution can accurately determine the page-turning boundary position corresponding to the target pixel by using the arc length of the curled circle. Then, based on the distance from the page-turning boundary position to the target pixel, shadow rendering is performed at the target pixel, presenting a more natural shadow performance and enhancing the three-dimensionality of page turning.

[0096] Optionally, in this embodiment of the application, the page-turning boundary position determination module 330 includes:

[0097] The page-turning boundary position determination unit is used to determine that the page-turning boundary position is located on the edge of the curled cylinder if the circumferential arc length of the curled circle is greater than a preset arc length threshold.

[0098] Otherwise, the location of the target boundary point after the first image is curled is determined as the page-turning boundary position.

[0099] Optionally, in this embodiment of the application, when the curvature of the circumference is greater than a preset arc length threshold, the device further includes: a first distance determination module, comprising:

[0100] The second distance determination unit is used to determine the distance from the target pixel to the scroll axis as the second distance;

[0101] The third distance determination unit is used to determine the curling radius as the third distance;

[0102] The first distance determination unit is used to determine the first distance based on the second distance and the third distance.

[0103] Optionally, in this embodiment of the application, when the arc length of the curled circumference is less than or equal to a preset arc length threshold, the device further includes: a first distance determination module, comprising:

[0104] The second distance determination unit is used to determine the distance from the target pixel to the scroll axis as the second distance;

[0105] The third distance determination unit is used to determine the distance between the location of the target boundary point after the first image is rolled up and the roll axis as the third distance.

[0106] The first distance determination unit is used to determine the first distance based on the second distance and the third distance.

[0107] Optionally, in this embodiment of the application, the third distance determining unit is specifically used for:

[0108] Determine the central angle corresponding to the arc length of the curled circle;

[0109] The third distance is determined based on the sine of the central angle and the radius of curvature.

[0110] Optionally, in this embodiment of the application, the shadow area to be displayed includes at least one of the following areas:

[0111] The second image area, the area on the first side of the scroll bar in the flipped page of the first image, the area on the first side of the scroll bar in the unflipped page of the first image, and the area on the second side of the scroll bar in the unflipped page of the first image.

[0112] Wherein, the first side of the curling shaft is the side of the first image that is curled; the second side of the curling shaft is the side of the first image that is not curled.

[0113] Optionally, in this embodiment of the application, the first distance determining unit is specifically used for:

[0114] If the target pixel is located in the second image region, the difference between the second distance and the third distance is determined as the first distance;

[0115] If the target pixel is located in the region on the first side of the scroll axis in the first image, then the difference between the third distance and the second distance is determined as the first distance;

[0116] If the target pixel is located in the region on the second side of the scroll axis in the unflipped page of the first image, then the sum of the second distance and the third distance is determined as the first distance;

[0117] Wherein, the first side of the curling shaft is the side of the first image that is curled; the second side of the curling shaft is the side of the first image that is not curled.

[0118] In this embodiment of the application, optionally, the drag endpoint indicated by the page-turning operation and the drag starting point are located on the same side of the central axis of the page.

[0119] Optionally, in this embodiment of the application, the device further includes:

[0120] The sampling pixel value determination module is used to determine the sampling pixel value based on the texture coordinates of the target pixel.

[0121] Correspondingly, the shadow rendering module 340 includes:

[0122] A shadow intensity determination unit is used to determine the shadow intensity based on the first distance;

[0123] The shadow rendering unit is used to render shadow effects on the sampled pixel values ​​based on the shadow intensity, so as to display the rendered pixel values ​​at the target pixel.

[0124] Optionally, in this embodiment of the application, the device further includes: a module for determining the arc length of the curled circumference, comprising:

[0125] The drag point determination unit is used to determine the drag endpoint and drag start point indicated by the page turning operation;

[0126] A curling axis determining unit is used to determine the curling axis of the curled cylinder based on the drag endpoint and the drag direction;

[0127] The unit for determining the arc length of the curled circle is used to determine the arc length of the curled circle based on the distance from the target boundary point to the curling axis.

[0128] The page-turning effect generation device provided in this application embodiment can execute the page-turning effect generation method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of executing the method.

[0129] Example 4

[0130] Figure 8 A schematic diagram of an electronic device 10, which can be used to implement embodiments of the present invention, is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices (e.g., helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the invention described and / or claimed herein.

[0131] like Figure 8As shown, the electronic device 10 includes at least one processor 11 and a memory, such as a read-only memory (ROM) 12 or a random access memory (RAM) 13, communicatively connected to the at least one processor 11. The memory stores computer programs executable by the at least one processor. The processor 11 can perform various appropriate actions and processes based on the computer program stored in the ROM 12 or loaded from storage unit 18 into the RAM 13. The RAM 13 can also store various programs and data required for the operation of the electronic device 10. The processor 11, ROM 12, and RAM 13 are interconnected via a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.

[0132] Multiple components in electronic device 10 are connected to I / O interface 15, including: input unit 16, such as keyboard, mouse, etc.; output unit 17, such as various types of displays, speakers, etc.; storage unit 18, such as disk, optical disk, etc.; and communication unit 19, such as network card, modem, wireless transceiver, etc. Communication unit 19 allows electronic device 10 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0133] Processor 11 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. Processor 11 performs the various methods and processes described above, such as the method for generating page-turning effects.

[0134] In some embodiments, the method for generating the page-turning effect can be implemented as a computer program tangibly contained in a computer-readable storage medium, such as storage unit 18. In some embodiments, part or all of the computer program can be loaded and / or installed on the electronic device 10 via ROM 12 and / or communication unit 19. When the computer program is loaded into RAM 13 and executed by processor 11, one or more steps of the method for generating the page-turning effect described above can be performed. Alternatively, in other embodiments, processor 11 can be configured to perform the method for generating the page-turning effect by any other suitable means (e.g., by means of firmware).

[0135] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), system-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0136] Computer programs used to implement the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be performed. The computer programs may be executed entirely on a machine, partially on a machine, or as a standalone software package, partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0137] In the context of this invention, a computer-readable storage medium can be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination thereof. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0138] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the electronic device. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0139] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or middleware components (e.g., application servers), or frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.

[0140] A computing system can include clients and servers. Clients and servers are generally located far apart and typically interact through communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a hosting product within the cloud computing service system to address the shortcomings of traditional physical hosts and VPS services, such as high management difficulty and weak business scalability.

[0141] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps described in this invention can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this invention can be achieved, and this is not limited herein.

[0142] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A method for generating a page-turning effect, characterized in that, include: Display the first image on the display device; In response to a page-turning operation on the first image, a target boundary point corresponding to the target pixel is determined on the boundary of the first image according to the drag direction indicated by the page-turning operation; the target pixel is a pixel in the shadow area to be displayed on the first image and / or the second image; the second image is the image displayed after the first image is turned; Determine the circumferential arc length of the curled circle from the location of the target boundary point after the first image is curled to the curling axis, and determine the page-turning boundary position corresponding to the target pixel point based on the circumferential arc length; The page-turning boundary position is located at the boundary between the first and second images after the page has been turned; The target pixel is shaded based on a first distance from the target pixel to the page-turning boundary to display a shadow effect when the first image is turned.

2. The method according to claim 1, characterized in that, Determining the page-turning boundary position corresponding to the target pixel point based on the arc length of the curled circumference includes: If the curvature of the curled circle is greater than a preset arc length threshold, then the page-turning boundary position is determined to be located on the edge of the curled cylinder; Otherwise, the location of the target boundary point after the first image is curled is determined as the page-turning boundary position.

3. The method according to claim 2, characterized in that, When the length of the curled circular arc is greater than a preset arc length threshold, the process of determining the first distance includes: The distance from the target pixel to the scroll axis is defined as the second distance; The curl radius is defined as the third distance; The first distance is determined based on the second distance and the third distance.

4. The method according to claim 2, characterized in that, When the length of the curled circular arc is less than or equal to a preset arc length threshold, the process of determining the first distance includes: The distance from the target pixel to the scroll axis is defined as the second distance; The distance between the location of the target boundary point after the first image is curled and the curling axis is determined as the third distance; The first distance is determined based on the second distance and the third distance.

5. The method according to claim 4, characterized in that, The process of determining the third distance includes: Determine the central angle corresponding to the arc length of the curled circle; The third distance is determined based on the sine of the central angle and the radius of curvature.

6. The method according to claim 1, characterized in that, The shadow area to be displayed includes at least one of the following areas: The second image area, the area on the first side of the scroll bar in the flipped page of the first image, the area on the first side of the scroll bar in the unflipped page of the first image, and the area on the second side of the scroll bar in the unflipped page of the first image. Wherein, the first side of the curling shaft is the side of the first image that is curled; the second side of the curling shaft is the side of the first image that is not curled.

7. The method according to claim 3 or 4, characterized in that, Determining the first distance based on the second distance and the third distance includes: If the target pixel is located in the second image region, the difference between the second distance and the third distance is determined as the first distance; If the target pixel is located in the region on the first side of the scroll axis in the first image, then the difference between the third distance and the second distance is determined as the first distance; If the target pixel is located in the region on the second side of the scroll axis in the unflipped page of the first image, then the sum of the second distance and the third distance is determined as the first distance; Wherein, the first side of the curling shaft is the side of the first image that is curled; the second side of the curling shaft is the side of the first image that is not curled.

8. The method according to claim 1, characterized in that, The drag endpoint indicated by the page-turning operation is located on the same side of the central axis of the page as the drag starting point.

9. The method according to claim 1, characterized in that, The method further includes: The sampled pixel value is determined based on the texture coordinates of the target pixel. Accordingly, shadow rendering is performed on the target pixel based on the first distance from the target pixel to the page-turning boundary position, so as to display a shadow effect when the first image is turned, including: The shadow intensity is determined based on the first distance; The sampled pixel values ​​are rendered with shadow effects based on the shadow intensity to display the rendered pixel values ​​at the target pixel.

10. The method according to claim 1, characterized in that, The process of determining the arc length of the curled circle includes: Determine the drag endpoint and drag start point indicated by the page-turning operation; The curling axis of the curled cylinder is determined based on the drag endpoint and the drag direction; The length of the curled circumference is determined based on the distance from the target boundary point to the curling axis.

11. A device for generating a page-turning effect, characterized in that, include: The first image display module is used to display the first image on the display device; The target boundary point determination module is used to determine, in response to a page-turning operation on the first image, a target boundary point corresponding to a target pixel on the boundary of the first image according to the drag direction indicated by the page-turning operation; the target pixel is a pixel in the shadow area to be displayed on the first image and / or the second image; the second image is the image displayed after the first image is turned; The page-turning boundary position determination module is used to determine the curvature circumference arc length from the location of the target boundary point after the first image is curled to the curling axis, and to determine the page-turning boundary position corresponding to the target pixel point based on the curvature circumference arc length. The page-turning boundary position is located at the boundary between the first and second images after the page has been turned; The shadow rendering module is used to render a shadow on the target pixel based on a first distance from the target pixel to the page-turning boundary position, so as to display a shadow effect when the first image is turned.

12. An electronic device, characterized in that, The electronic device includes: At least one processor; and A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the page-turning effect generation method according to any one of claims 1-10.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that, when executed by a processor, implement the method for generating the page-turning effect according to any one of claims 1-10.

Images