Lightweight virtual book page based on three-layer architecture and interactive folding simulation method

Abstract

The application discloses a kind of light virtual book page and interactive folding simulation method based on three-layer architecture, belong to virtual simulation technical field.The method includes: three-layer architecture construction, constructs three-layer architecture with page layer, back layer and wrapping layer as core logic, simulates real book page;Folding posture parameter calculation and update, solve the transformation vector of page layer, back layer and wrapping layer in core three-layer logic architecture, and eliminate visual deviation when folding at large angle by parameter correction;Visual gradient optimization, simulate real folding light and shadow effect;Three-layer model geometric transformation and rendering, complete layered space positioning and drawing based on folding posture parameter;Simulation book page turning transformation, on the basis of folding form dynamic evolution to simulate real effect of simulation book page turning.The application solves the problems of traditional Peeling 2D model simulation distortion, three-dimensional and heavy calculation of physical model, considers real feeling, fluency and stability, realizes high-quality virtual book page folding simulation.

Description

Technical Field

[0001] This invention belongs to the field of virtual simulation technology, specifically relating to a lightweight virtual book page and interactive flipping simulation method based on a three-layer architecture. Technical Background

[0002] With the iterative evolution of information technology, reading is undergoing a paradigm shift from print media to digital media. Currently, digital reading has become the mainstream reading method, and immersive digital reading and interactive virtual books are increasingly becoming research hotspots in online education, smart learning, and cultural dissemination. Virtual simulated book pages, as the core interactive carrier of virtual books, not only replicate the tactile experience of turning pages in physical books but also enhance the immersive learning experience and the efficiency of knowledge internalization, making them invaluable for improving the presentation quality of online educational resources.

[0003] Generally, based on differences in implementation mechanisms, virtual book page simulation technology can be divided into two categories: geometry-driven and physics-driven. Geometry-driven methods describe the page folding deformation using mathematical parameters, and can be further subdivided into two-dimensional and three-dimensional models. Two-dimensional models, represented by the Peeling algorithm and Shearing transformation algorithm, rely on planar coordinate mapping for lightweight rendering, but lack depth information perception, making it difficult to create stereoscopic visual feedback during folding. Three-dimensional models include Peeling3D, parametric surfaces such as cylindrical and conical surfaces, which can construct three-dimensional visual effects during folding, but cannot accurately depict the mechanical properties of the book page because they are not subject to physical constraints. Physics-driven methods are based on the principles of continuum mechanics, employing a discretization strategy for modeling, and generally use methods such as the mass-spring method and the finite element method. The mass-spring method simulates the motion of real book pages by applying forces to a mass and constraining it with a spring. It can be extended to include models for nonlinear bending and torsional reinforcement, significantly improving the physical realism and interactive stability of virtual book page folding. The finite element method, based on thin-shell theory, achieves high-precision folding calculations. The improved finite element model effectively improves the accuracy of thin-shell deformation simulation, but the overall page still incurs significant computational overhead. Geometric-driven methods offer advantages such as high computational efficiency and strong cross-platform adaptability, but their insufficient physical realism makes them unsuitable for the cognitive needs of immersive reading. While physics-driven methods can achieve high-fidelity folding simulations, their resource-intensive nature leads to real-time bottlenecks in lightweight environments such as mobile and web platforms. Finding a balance between computational efficiency and physical realism has become a crucial technical challenge for the large-scale application of virtual book simulation technology. Summary of the Invention

[0004] This invention discloses a lightweight virtual book page and interactive folding simulation method based on a three-layer architecture, using the classic Peeling 2D model. The core logical architecture uses the page layer and back layer as display containers, and the wrapping layer as a clipping container. Virtual book page folding is achieved through three core parameters: folding posture transformation, geometric deviation correction, and visual gradient control. An adaptive folding shadow rendering mechanism is integrated to enhance visual realism. Based on the dynamic evolution of the folding shape, the page-turning effect is achieved through spatial coordinate mapping and inter-layer constraint updates. The method includes the following steps: three-layer architecture construction, page-turning posture parameter calculation and update, visual gradient optimization, three-layer model geometric transformation and rendering, and simulated page-turning interaction, performing real-time updates and parameter-driven rendering. While maintaining extremely low computational resource overhead, it significantly improves the smoothness of the folding animation and ensures physical realism, efficiently adapting to lightweight real-time interactive scenarios on both web and mobile devices.

[0005] In the embodiments according to this disclosure, the three-layer architecture construction step includes a page layer, which carries and displays the content of the book pages; a back layer, which presents the corresponding content on the back of the book pages; and a wrapping layer, which precisely trims the page layer and works in conjunction with the back layer to support the realization of the book page folding effect. The three-layer architecture includes a functional architecture at the logical level and a physical container architecture at the actual implementation level. The logical architecture is used to define the folding control rules and data interaction logic, while the actual architecture is used to define the hierarchical nesting structure and component layout required for page rendering. To construct the functional architecture at the logical level, the wrapping layer is constructed first, then the page layer is superimposed on the wrapping layer, and finally the back layer is superimposed. Add it to the page layer, ensuring alignment at the top left corner; the physical container architecture for the actual implementation layer needs to be further decomposed into a page container and a back container; the page container is configured with a wrapping layer container and a nested arrangement of page layer containers, and a page shadow layer container is added to improve the visual simulation effect of the flipping process; the back container is configured with a separate back wrapping layer container, and to adapt to the different transformation characteristics when flipping left and right, a horizontal container is embedded in the back wrapping layer container and covers the vertical container, and the vertical container further wraps the back actual content container and the back shadow layer container; the aforementioned containers at all levels work together to optimize and stabilize the output of virtual page flipping, rendering and interactive effects.

[0006] In embodiments according to this disclosure, the calculation and updating of page-turning posture parameters includes: solving for the wrapping layer translation vector. Define interactive areas The coordinates are top left, bottom left, top right, bottom right, left, and right, based on the user's drag-and-drop interaction area and the resulting relative displacement vector. Calculate the reference angle of folding The coordinates of the core anchor point are dynamically solved by combining the folding position. As the center of symmetry of geometric transformation; based on and After extracting the effective folding angle of the book pages and removing invalid motion components perpendicular to the folding direction, the effective folding distance is obtained. The translation vector of the wrapping layer is solved by component mapping operation. Solve for the offset vector of the back layer container. ,based on Horizontal components and Solve for the horizontal critical coordinates of the page edge Calculate the effective length of the unobstructed side. Using the double-angle formula to Decomposed into horizontal components With vertical component Obtain the offset vector of the back layer container. This is to restore the mechanical property of the paper crease angle doubling when it is folded. Solving for the auxiliary vector... Based on the folding reference direction angle Calculate supplementary angles As a compensation angle, obtain the compensation distance in the folding over motion scenario. It is then decomposed into horizontal and vertical components to form an initial auxiliary vector. Based on page turn position Perform orientation correction to obtain the final Update the translation vector ,Will The vertical components are converted into horizontal components and superimposed to calculate the vertical projection of the horizontal translation; if the projection length is less than the page height... Then, the user's vertical position is corrected based on the Euclidean distance, and the position is reversed according to the folding position. Coordinates are used to ensure symmetry; all page-turning parameters are recalculated based on the corrected interaction positions to ensure consistency of all relevant vector parameters, and finally, the corrected page-turning parameters are output to eliminate page-turning angles. The problem of visual deviation caused by exceeding the limit.

[0007] In embodiments according to this disclosure, the visual gradient optimization step includes optimizing the effective side length of the fold. relative to the folding reference direction angle Calculate the effective size of the gradient region The effective size is used to define the gradient range of the page fold edge, and is positively correlated with the folding amplitude and folding angle; the coordinates of the endpoint of the gradient region are obtained. Calculate the Euclidean distance from the mouse's real-time position to the endpoint, and normalize the distance value to obtain the gradient transparency coefficient. When the page layer gradient mode is enabled, the gradient starting point ratio is determined based on the gradient size value. If the gradient size is greater than Then a linear shift is used. Calculated in this way, otherwise the starting ratio is... The gradient size trigonometric function value is converted into the gradient endpoint coordinates in the form of page percentage, and the corresponding gradient coordinates are reversed according to the fold position to keep the gradient direction perpendicular to the fold direction. This adapts to folding scenarios in multiple positions, restores the light and shadow changes at the crease when the paper is bent, and improves the physical realism of the folding visual.

[0008] The three-layer model geometric transformation and rendering steps in the embodiments according to this disclosure include: rendering the page layer statically, the page layer needs to remain visually static and does not need to participate in spatial displacement calculation, and setting the page layer displacement vector. ; Change the wrapping layer to adapt the rotation point The origin is the execution point. Limit translation components, Composite transformation with respect to rotational components; and correction based on the folding position. Direction, ensuring the left half folds when When the component is negative and the upper half is folded The component is negative; transform the back face layer, based on Perform a translation transformation. Perform a rotation transformation so that the back layer and the page layer wrap around each other. Maintain axial symmetry; when At that time, introduce Complete position calibration, re-execute the three-layer geometric transformation; render lighting and shadows, constructing an effective size that includes the gradient region. Gradual starting point ,transparency coordinates of the end point of the gradient region Based on a three-segment gradient sequence, crease shadows matching the folding trajectory are simulated, and visual consistency is achieved through wrapping layer clipping. As stated above, this research, through book simulation modeling and a three-layer collaborative architecture design, offers significant lightweight advantages compared to complex 3D models and physical simulation models. It eliminates the need for cumbersome physics calculations and mesh computations. Furthermore, the computational logic is optimized for the original Peeling2D model, and with precise attitude solving, critical correction, and lighting optimization, it addresses pain points such as distortion and large-angle offsets in traditional simulations. The overall solution is lightweight, has low hardware compatibility, and excellent multi-platform operation capabilities. The folding trajectory conforms to real physical laws, balancing visual realism, smooth interaction, and cross-platform stability, achieving high-quality virtual book folding simulation.

[0009] In embodiments according to this disclosure, the simulated page-turning interaction step specifically includes: selecting a page-turning reference point, and matching an endpoint mapping point based on the interaction point selected by the user. The page-turning interaction in the folding scene is based on six types of corner trigger points: top left, bottom left, top right, bottom right, left, and right, and the endpoint mapping point. The system performs virtual page-turning interaction based on the three-layer architecture construction steps, page-turning posture parameter calculation and update steps, visual gradient optimization steps, and three-layer model geometric transformation and rendering steps. Attached Figure Description

[0010] Figure 1 This is a schematic diagram of a three-layer container architecture of an improved Peeling 2D model according to an embodiment of the present disclosure, consisting of a page layer, a back layer, and a wrapping layer.

[0011] Figure 2 It is based on the corner page-turning principle of an embodiment of this disclosure.

[0012] Figure 3 This is a diagram showing the actual structure of a page container according to an embodiment of the present disclosure.

[0013] Figure 4 It is an interactive corner diagram according to an embodiment of the present disclosure.

[0014] Figure 5 This is a flowchart of the calculation and updating of folding posture parameters according to an embodiment of the present disclosure.

[0015] Figure 6 This is a flowchart of a reference orientation angle calculation according to an embodiment of the present disclosure.

[0016] Figure 7 This is a flowchart of the wrapping layer translation vector update according to an embodiment of the present disclosure.

[0017] Figure 8 This is a flowchart of the auxiliary layer translation vector calculation according to an embodiment of the present disclosure.

[0018] Figure 9 This is a flowchart of the back layer translation vector calculation according to an embodiment of the present disclosure.

[0019] Figure 10 This is a flowchart of visual gradient optimization calculation according to an embodiment of the present disclosure.

[0020] Figure 11 This is a flowchart of geometric transformation and rendering of a three-layer architecture model according to an embodiment of the present disclosure.

[0021] Figure labeling: 101: Initial steps of building a three-layer container; 102: Merging steps of building a three-layer container; 103: Completed steps of building a three-layer container; 201: BR corner page turning principle; 202: BL corner page turning principle; 203: TL corner page turning principle; 204: TR corner page turning principle; 205: L side page turning principle; 206: R side page turning principle; 401: Top left corner of the page; 402: Top right corner of the page; 403: Left side of the page; 404: Right side of the page; 405: Bottom left corner of the page; 406: Bottom right corner of the page. Detailed Implementation

[0022] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.

[0023] It should also be noted that the three-layer architecture described in this embodiment is a core division at the logical function level, and not a strict limitation on the number of physical rendering containers. In actual implementation, the page layer, back layer, and wrapping layer can all be split into multiple sub-containers, sub-modules, or rendering nodes according to rendering efficiency, platform adaptation, or expansion requirements. That is, the system can adopt a multi-layer physical structure to support the three-layer logical architecture of this invention. The core innovation of this invention lies in the page-turning posture calculation, layered independent translation and rotation transformation solution, and critical parameter correction method designed for the above-mentioned three-layer architecture. Regardless of whether those skilled in the art simply increase, decrease, split, or merge the number of logical or physical layers, as long as they adopt the actual layering method, page-turning parameter calculation method, and cooperative transformation rules of this invention, they should all fall within the protection scope of this patent.

[0024] Please refer to Figure 1 The construction of the improved Peeling 2D model's three-layer architecture container (page layer - back layer - wrapping layer) can be divided into three stages.

[0025] Step 1 (Step 101): In the initialization phase, based on the user-input page layer width, height, and page background color or image, the back layer has the same length and width as the page layer, and the wrapping layer has the same length and width as the page layer's diagonal length. Three containers—the page layer, the back layer, and the wrapping layer—are created independently to establish the basic unit for layered rendering.

[0026] In the second step (step 102), during the assembly stage, the back layer container is stacked onto the wrapping layer container with the upper left corner aligned, forming a unified whole between the back layer and the wrapping layer.

[0027] The third step (step 103) is to overlay the page layer container on top of the back layer container with the same alignment in the completion stage, thus constructing a complete three-layer rendering architecture.

[0028] For a detailed explanation of how page turning works, please refer to [link / reference]. Figure 2 The page-turning effect is constructed through the mutual transformation of a three-layer logical architecture and shadow rendering. During various page-turning processes, the page layer, back layer, and wrapping layer complete displacement, offset, and rotation actions according to preset geometric transformation rules. The wrapping layer needs to make full use of its clipping function to precisely constrain and clip the display area of ​​the page layer, effectively avoiding edge distortion, interlayer artifacts, and other problems that occur during the folding process, ultimately outputting a visually natural and structurally reasonable virtual book page-turning effect.

[0029] In actual construction, please refer to Figure 3 It should be noted that this invention adopts a three-layer core architecture consisting of a page layer, a back layer, and a wrapping layer to describe the geometric transformations and visual occlusion relationships of page folding. In actual rendering, since the transformation of the wrapping layer affects the transformation of its internal sub-components, the overall virtual page container can be decomposed into a page container (PageContainer) and a back container (BackContainer) based on the three-layer core architecture. The page container (PageContainer) is wrapped with a wrapping layer container (Wrapper), and a shadow layer container (Shadow) is added to the page container (PageContainer) to optimize the visual effect. The back container (BackContainer) uses a separate wrapping layer container (BackWrapper). To accommodate different transformations of the back container when folding left and right, a horizontal container (BackVertical) is embedded in the back wrapping layer (BackWrapper) and wraps a vertical container (BackHorizontal). The vertical container (BackHorizontal) then wraps the actual back content container (BackContent) and the back shadow layer container (BackShadow). These multiple layers coordinate with each other to improve simulation effects and rendering stability.

[0030] Please refer to Figure 5. The steps for calculating and updating the folding attitude parameters include:

[0031] Step 1 (Step 501): Obtain the page height. Page width The user's current click location Preset page-turning width and page turning range height Input parameters;

[0032] Step 2 (Step 502), please refer to Figure 4 Based on the page turning range and the user's current click position Define interactive locations , , , These correspond to the upper right, upper left, lower left, and lower right corners of the page, respectively. , These correspond to the right and left edges of the page, respectively.

[0033] The third step (step 503) is to obtain the specific interaction position based on the edge interaction position mapping. The determination of the edge interaction position is based on the page turning range. The edge interaction position range mapping table obtained according to the specific determination rules is shown in Table 1.

[0034] Table 1. Edge Interaction Location Range Mapping Table

[0035]

[0036] Determine the current click location based on the edge interaction location range mapping table shown in step 503. The corresponding interaction location;

[0037] Step 4 (Step 504): To facilitate subsequent parameter calculations, it is necessary to perform coordinate mapping on the starting points of the corners to obtain the starting mapping points. The corner starting point mapping table is obtained according to the preset mapping rules, as shown in Table 2.

[0038] Table 2. Corner Starting Point Mapping Table

[0039]

[0040] In Table 2, It is the user's current click position. For page height, This is the page width.

[0041] Step 5 (Step 505): Calculate the reference orientation angle. Please refer to Figure 6 Its sub-steps include:

[0042] The first sub-step (step 601) is based on the starting mapping point. Vertical mapping and horizontal mapping Does it exist that allows us to obtain the relative displacement vector? This vector represents the movement trend of the user's dragging behavior relative to the corner or edge interaction point of the virtual page.

[0043] The second sub-step (step 602) calculates the relative displacement. tangent angle .

[0044] The third sub-step (step 603) is based on the relative displacement vector. complementary angle .

[0045] The fourth sub-step (step 604) outputs the reference orientation angle. .

[0046] Step 6 (Step 506) requires calculating the translation vector of the wrapping layer. Please refer to Figure 7 Its sub-steps include:

[0047] The first sub-step (step 701) dynamically solves for the coordinates of the core anchor point of the fold crease. This coordinate describes the flip base point. The midpoint of the line segment leading to the effective fold endpoint is also the core positioning coordinate of the "crease" on the two-dimensional plane when the page is folded. Essentially, it is the center of symmetry of the folding geometric transformation, determining the position of the folding symmetry axis between the page layer container and the wrapping layer container. Core anchor point coordinates It is given by equation (1).

[0048]

[0049] In equation (1), These are the page widths, Indicates whether the folding direction is on the left. The interactive position adapts to change to ensure a natural and smooth folding process.

[0050] The second sub-step (step 702) is based on the dynamic midpoint. relative to the reference direction angle The algorithm extracts the effective angle between the folded page and the original plane. The included angle As an angular benchmark for simulating the bending shape of book pages, it is used to accurately characterize the degree of bending during the folding process.

[0051] The third sub-step (step 703) calculates the effective folding distance. By eliminating invalid motion components perpendicular to the folding direction, these components are used as the length reference for translation and offset operations during the folding process, providing a quantitative basis for subsequent page deformation calculations. This distance is given by equation (2).

[0052]

[0053] The fourth sub-step (step 704) outputs the core transformation vector that enables the wrapping layer to achieve the folding effect. .

[0054] Step 7 (Step 507), based on the reference direction angle Is it greater than ,when Update the wrapping layer translation vector at that time. (Step 508) and further determine whether the fold line touches the page boundary (Step 509). If the fold line touches the page boundary, update the user's current click position. (Step 510) Recalculate from step 504; if the fold line does not touch the page boundary, calculate the auxiliary translation vector. (Step 511); when At that time, calculate the translation vector of the back layer. (Step 512).

[0055] Step 8 (Step 513): Output the reference orientation angle. Translation vector of the wrapping layer Backside layer translation vector Auxiliary translation vector .

[0056] According to step 508, the wrapping layer translation vector needs to be updated. Translate the wrapping layer vector vertical component Based on the relative displacement vector The angle component is converted into a horizontal component and superimposed on the horizontal component. middle, The update expression is shown in equation (3) below.

[0057]

[0058] And vertical component Set to 0.

[0059] According to step 511, the auxiliary translation vector needs to be calculated. Please refer to Figure 8 Its sub-steps include:

[0060] The first sub-step (step 801) requires calculating the compensation angle. ,

[0061] The second sub-step (step 802) is based on the compensation angle. Obtain the compensation distance during excessive folding . The calculation formula is shown in equation (4) below.

[0062]

[0063] in The height of the encapsulation container. This represents the height of the page layer container.

[0064] Third sub-step (step 803). Decompose the compensation distance into horizontal and vertical components to obtain the initial auxiliary translation vector. The expression (6) is shown.

[0065]

[0066] Fourth sub-step (step 804): Perform orientation correction and update the auxiliary translation vector. Corrected auxiliary translation vector The calculation formula is shown in Table 3 below.

[0067] Table 3 Auxiliary translation vectors Calculation formula table

[0068]

[0069] Table 3 is based on interactive locations right The components are oriented and corrected. The right boundary (R edge) is mapped to the BR corner point, and the left boundary (L edge) is mapped to the BL corner point.

[0070] The fourth sub-step (step 805) outputs the auxiliary translation vector. .

[0071] According to step 512, the translation vector of the back layer needs to be calculated. Please refer to this. Figure 9 Its sub-steps include:

[0072] The first sub-step (step 901) is based on vertical component and By using inverse trigonometric function operations, the vertical translation is converted into an equivalent horizontal translation, and then combined with... horizontal components Find the horizontal critical coordinates of the page edges after folding. Horizontal critical coordinates The expression is shown in equation (6).

[0073]

[0074] in, This function is used for pixel-level rounding to avoid rendering errors caused by decimal offsets.

[0075] The second sub-step (step 902) uses the page width Based on, through Calculate the effective side length of the unobstructed page after folding. .

[0076] The third sub-step (step 903) decomposes it into horizontal components based on the double-angle formula. With vertical component .

[0077] Fourth sub-step (step 904), back-side layer container offset vector The calculation formula is shown in Table 4 below.

[0078] Table 4 Backside Layer Container Offset Vector Calculation formula table

[0079]

[0080] Table 4 shows the processing strategy for the boundary region. Actual testing has verified that the right boundary (R edge) is mapped to the BR corner point, and the left boundary (L edge) is mapped to the BL corner point.

[0081] Fifth sub-step (905): Output the back layer translation amount. .

[0082] Please refer to Figure 10 The steps in the visual gradient optimization process may include:

[0083] Step 1 (Step 1001): Fold the effective side length relative to the folding reference direction angle Calculate the effective size of the gradient region. This parameter determines the range of the gradient effect at the page fold edges.

[0084] The second step (step 1002) involves using the current location. Get Endpoint Mapping Endpoint mapping The mapping table is shown in Table 5 below.

[0085] Table 5 Endpoint Mapping mapping table

[0086]

[0087] Table 5 shows the processing strategy for the boundary region. Actual testing has verified that the right boundary (R edge) is mapped to the BR corner point, and the left boundary (L edge) is mapped to the BL corner point.

[0088] Step 3 (Step 1003): Obtain the shadow distance .

[0089] Step 4 (Step 1004): Determine the shadow distance. Its relationship with page width If the value is less than 0, then the gradient transparency coefficient will be adjusted. If greater than, .

[0090] Step 5 (Step 1005): When enabling the front gradient, calculate the gradient starting point ratio by linearly shifting back 100 units if the gradient size is greater than 100, otherwise setting it to 0. .

[0091] Step 6 (Step 1006): Convert the gradient size trigonometric function values ​​into gradient endpoint coordinates in page percentage form. Gradient endpoint coordinates The calculation formula is shown in equation (7) below.

[0092]

[0093] in, For page height, Page width The reference angle for folding.

[0094] Step 7 (Step 1007), based on interactive locations Reverse the gradient coordinates to ensure the gradient direction is perpendicular to the fold direction and adapts to different fold positions. Gradient endpoint coordinates. The calculation formula is shown in Table 6 below.

[0095] Table 6 Coordinates of the Gradient End Point Calculation formula table

[0096]

[0097] Table 6 describes the coordinates of the gradual transition endpoints at different folding positions. Similarly, the right boundary (R edge) is mapped to the BR corner point, and the left boundary (L edge) is mapped to the BL corner point.

[0098] Step 8 (Step 1008): Obtain the final gradient endpoint coordinates. .

[0099] Step 9 (Step 1009): Output the effective dimensions of the calculated gradient region. Gradient starting point ratio Gradient transparency coefficient Gradient endpoint coordinates .

[0100] Please refer to Figure 11In the geometric transformation and rendering of a three-layer model, the steps may include:

[0101] The first step (step 1101) is to determine the rotation point. Rotation point It is the reference point for the rotation and displacement of all containers, the point of rotation. The location table is shown in Table 7 below.

[0102] Table 7 Rotation Points Location table

[0103]

[0104] As shown in Table 7, it should be noted that the coordinates of the reference points are all in percentage (%), that is, the percentage of the length and width. Similarly, the right boundary (R side) is mapped to the BR corner point, and the left boundary (L side) is mapped to the BL corner point.

[0105] The second step (step 1102) requires calculating the displacement offset vector. The calculation formula is shown in equation (8) below.

[0106]

[0107] The third step (step 1103) is container transformation. The transformations corresponding to different interaction points are shown in Table 8 below.

[0108] Table 8. Transformation table for different interaction points

[0109]

[0110]

[0111] In Table 7, As the reference direction angle, Let be the translation vector of the wrapping layer. The height of the page layer. The width of the page layer. This is the displacement offset vector.

[0112] Step 4 (Step 1104), shadow rendering: Shadow rendering at different interaction positions starts from the rotation points corresponding to Table 7. Start to finish Perform linear rendering.

[0113] The steps involved in virtual book page turning may include:

[0114] The first step is to determine the page-turning base point. and target location For corner-point page-turning scenarios, the corner-point page-turning base points for TL, BL, TR, and BR are... and target location As shown in Table 9.

[0115] Table 9 Corner Page Turning Base Points for TL, BL, TR, and BR and target location

[0116]

[0117] in, Width of the main page container The height of the main page container.

[0118] For left and right side page turning scenarios, the page turning base points of the L and R sides. and target location As shown in Table 10.

[0119] Table 10 L, R side page-turning base points and target location

[0120]

[0121] in, The vertical coordinate represents the user interaction point.

[0122] The second step involves performing folding transformations according to steps 501-513 and 1101-1104 to achieve the page-turning effect.

[0123] This concludes the description of all steps regarding the lightweight virtual book page and interactive folding simulation method based on a three-layer architecture.

Claims

1. A lightweight virtual book page and interactive folding simulation method based on a three-layer architecture, characterized in that, The lightweight virtual book page and interactive folding simulation method based on a three-layer architecture includes: The three-tier architecture construction steps involve building a three-tier container architecture based on the page layer, the back layer, and the wrapping layer to simulate real book pages; The page-turning posture parameter calculation and update steps include defining the interactive area in the calculation section. And based on the input parameter: page height Page width Preset page-turning width Page turning range height and the user's current click location Solve for the reference direction angle Backside layer translation vector and the translation vector of the wrapping layer This provides data support for subsequent geometric transformations; in the update part, the wrapping layer is updated by introducing auxiliary vectors. and update translation vector Eliminate folding angle greater than Visual shift during time; Visual gradient optimization steps, calculating the effective size ,transparency and starting point ratio End point coordinates Light and shadow gradient parameters simulate the light and shadow transition effect of turning pages in a book. The three-layer model geometric transformation and rendering steps integrate page-turning posture parameters and light and shadow gradient parameters to complete the layered spatial positioning and rendering of the three-layer model. The simulation page-turning interaction steps respond to the user's dragging operation on the interactive area of ​​the book page. Based on the three-layer architecture construction steps, page-turning posture parameter calculation and update steps, visual gradient optimization steps, and three-layer model geometric transformation and rendering steps, the transformation parameters are updated in real time and the rendering is driven to achieve a simulated continuous page-turning effect.

2. The lightweight virtual book page and interactive folding simulation method based on a three-layer architecture as described in claim 1, characterized in that, The three-layer architecture includes a page layer, which carries and displays the content of the book pages; and a back layer, which is used to present the corresponding content on the back of the book pages. The wrapper layer precisely trims the page layer and works in conjunction with the back layer to support the page-folding effect. The three-layer architecture can be divided into logical construction methods and practical construction methods from different perspectives. The logical construction method builds the functional architecture at the logical level and defines the folding control rules and data interaction logic, while the practical construction method builds the physical container architecture at the actual implementation level and defines the hierarchical nesting structure and component layout required for page rendering. Based on the collaborative work of these logical and practical constructions, the virtual page folding and turning are achieved.

3. The lightweight virtual book page and interactive folding simulation method based on a three-layer architecture as described in claim 2, characterized in that, The logical construction method first constructs a wrapping layer, then overlays the page layer onto the wrapping layer, and finally overlays the back layer onto the page layer, ensuring that the top left corner is aligned.

4. The lightweight virtual book page and interactive folding simulation method based on a three-layer architecture as described in claim 2, characterized in that, The actual construction method described above requires further decomposing the overall virtual book page container into a page container and a back container. The page container is equipped with a nested arrangement of wrapping layer containers and page layer containers, and a page shadow layer container is added to enhance the visual simulation effect of the folding process. The back container is equipped with a separate back wrapping layer container. To adapt to the different transformation characteristics when folding left and right, a horizontal container is embedded in the back wrapping layer container and covers the vertical container. The vertical container then wraps the actual back content container and the back shadow layer container. The aforementioned containers work together to optimize and stabilize the output of virtual book page folding, rendering, and interactive effects.

5. The lightweight virtual book page and interactive folding simulation method based on a three-layer architecture according to claim 1, characterized in that, The calculation and updating of the page-turning posture parameters includes: Solve for the translation vector of the wrapping layer Define interactive areas The coordinates are top left, bottom left, top right, bottom right, left, and right, based on the user's drag-and-drop interaction area and the resulting relative displacement vector. Calculate the reference angle of folding The coordinates of the core anchor point are dynamically solved by combining the folding position. As the center of symmetry of geometric transformation; based on and After extracting the effective folding angle of the book pages and removing invalid motion components perpendicular to the folding direction, the effective folding distance is obtained. The translation vector of the wrapping layer is solved by component mapping operation. ; Solve for the offset vector of the back layer container ,based on Horizontal components and Solve for the horizontal critical coordinates of the page edge Calculate the effective length of the unobstructed side. Using the double-angle formula to Decomposed into horizontal components With vertical component Obtain the offset vector of the back layer container. To restore the mechanical properties of paper when the crease angle is doubled during folding; Solving for auxiliary vectors Based on the folding reference direction angle Calculate supplementary angles As a compensation angle, obtain the compensation distance in the folding over motion scenario. It is then decomposed into horizontal and vertical components to form an initial auxiliary vector. Based on page turn position Perform orientation correction to obtain the final ; Update translation vector ,Will The vertical components are converted into horizontal components and superimposed to calculate the vertical projection of the horizontal translation; if the projection length is less than the page height... Then, the user's vertical position is corrected based on Euclidean distance, and the position is reversed according to the folding position. Coordinates are used to ensure symmetry; all page-turning parameters are recalculated based on the corrected interaction positions to ensure consistency of all relevant vector parameters, and finally, the corrected page-turning parameters are output to eliminate page-turning angles. The problem of visual deviation caused by exceeding the limit.

6. The lightweight virtual book page and interactive folding simulation method based on a three-layer architecture according to claim 1, characterized in that, The visual gradient optimization specifically includes: Based on the effective side length of the fold relative to the folding reference direction angle Calculate the effective size of the gradient region The effective size is used to define the gradient range of the page fold edge, and is positively correlated with the folding amplitude and folding angle; the coordinates of the endpoint of the gradient region are obtained. Calculate the Euclidean distance from the mouse's real-time position to the endpoint, and normalize the distance value to obtain the gradient transparency coefficient. When the page layer gradient mode is enabled, the gradient starting point ratio is determined based on the gradient size value. If the gradient size is greater than Then a linear shift is used. Calculated in this way, otherwise the starting ratio is... The gradient size trigonometric function value is converted into the gradient endpoint coordinates in the form of page percentage, and the corresponding gradient coordinates are reversed according to the fold position to keep the gradient direction perpendicular to the fold direction. This adapts to folding scenarios in multiple positions, restores the light and shadow changes at the crease when the paper is bent, and improves the physical realism of the folding visual.

7. The lightweight virtual book page and interactive folding simulation method based on a three-layer architecture according to claim 1, characterized in that, The geometric transformation and rendering of the three-layer model include: Rendering a static page layer requires the page layer to remain visually still and does not need to participate in spatial displacement calculations. Set the page layer displacement vector. ; Transform the wrapping layer to adapt the rotation point. The origin is the execution point. Limit translation components, Composite transformation with respect to rotational components; and correction based on the folding position. Direction, ensuring the left half folds when When the component is negative and the upper half is folded The component is negative; Transform the back face layer, based on Perform a translation transformation. Perform a rotation transformation so that the back layer and the page layer wrap around each other. Maintain axial symmetry; when At that time, introduce Complete the position calibration and re-execute the three-layer geometric transformation; Render lighting and shadows, constructing an effective size that includes the gradient area. Gradual starting point ,transparency coordinates of the end point of the gradient region Based on a three-segment gradient sequence, crease shadows are simulated to match the folding trajectory, and a visually consistent presentation of physical consistency is achieved through wrapping layer clipping.

8. The lightweight virtual book page and interactive folding simulation method based on a three-layer architecture according to claim 1, characterized in that, The simulated page-turning interaction specifically includes: Select a page-turning reference point and match the endpoint mapping point based on the user's selected interaction point. ; The page-turning interaction in the folding scene is based on six types of corner trigger points: top left, bottom left, top right, bottom right, left, and right, and the endpoint mapping point. And perform virtual page turning interaction according to the folding logic steps described in claims 1 to 7.

9. An electronic device, comprising: One or more processors; A storage device on which one or more programs are stored; When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1 to 8.

10. A computer-readable medium having a computer program stored thereon, wherein, When the program is executed by the processor, it implements the method as described in any one of claims 1 to 8.

Images