A css-based layered 3d picture rendering method

Abstract

The application discloses a layered 3D picture rendering method based on CSS and relates to the field of front-end webpage development and graphics technology.The method comprises the following steps: receiving a page request containing a layered rendering mark, obtaining an original picture and layered parameters after analysis; preprocessing the original picture according to the layered parameters, segmenting the original picture into multiple picture slice layers based on depth mapping information; creating CSS elements for each slice layer and configuring independent CSS 3D transformation attributes, placing the slice layers in different three-dimensional space depths by setting different translateZ values and rotate attributes of each layer; and finally, combining the CSS elements in a document object model to form a layered 3D picture structure with a spatial depth feeling.The application further dynamically updates the CSS transformation attributes of each layer by responding to user interaction to generate a parallax motion effect based on the depth of the layers.The application fully utilizes the browser native CSS 3D hardware acceleration capability, does not need to rely on heavy JavaScript libraries, can realize efficient and light webpage 3D picture rendering, significantly reduces the development complexity and performance overhead, and simultaneously provides rich visual and interactive experiences.

Description

Technical Field

[0001] This invention relates to the field of front-end web development graphics technology, and in particular to a method for achieving 3D layered rendering effects of images using Cascading Style Sheets (CSS). Background Technology

[0002] With the rapid development of web technology, users have placed higher demands on the visual experience and interactivity of web pages. 3D visual effects can greatly enhance the attractiveness and immersion of content and are widely used in web scenarios such as product display, storytelling, games, and artistic creation.

[0003] Currently, there are several main technical approaches to achieving 3D effects on web pages:

[0004] WebGL / Three.js: Powerful and capable of complex real-time 3D rendering, but it has a high technical threshold, large code size, significant performance overhead, is not friendly to low-end devices, and is not conducive to search engine optimization.

[0005] The Canvas 2D API can simulate 3D depth and parallax through drawing algorithms, but it also requires complex JavaScript calculations, making dynamic layering and interaction relatively cumbersome.

[0006] Pure CSS 3D Transformations: Current CSS3 provides properties like `transform` and `perspective`, enabling simple 3D rotation and translation of single HTML elements. However, existing CSS 3D technologies typically only operate on entire images or simple geometric shapes, lacking a method to intelligently and automatically deconstruct a single planar image into multiple spatial depth layers and endow them with independent and coordinated 3D transformation capabilities. To achieve effects similar to a "3D photo wall" or "parallax scrolling poster," users need to manually use image processing software to cut the image and manually write a large amount of CSS and JavaScript code to position and control each layer—a process that is extremely inefficient and difficult to maintain and reuse.

[0007] Therefore, the industry urgently needs a lightweight 3D image rendering solution that can simplify processes, improve performance, and be easily integrated into modern web development workflows. Summary of the Invention

[0008] In view of this, the purpose of this invention is to provide a CSS-based layered 3D image rendering method to solve the problems of technical complexity, high performance overhead, and low development efficiency in the existing technology for implementing 3D layered image effects within web pages.

[0009] To achieve the above objectives, the present invention provides the following technical solution:

[0010] This invention provides a CSS-based layered 3D image rendering method, comprising:

[0011] Step S1: Receive a front-end page request, wherein the front-end page contains layered image rendering tags.

[0012] Step S2: Parse the layered image rendering markers to obtain the original planar image and the corresponding N layered rendering parameters, where N is an integer greater than or equal to 2.

[0013] Step S3: Based on the layered rendering parameters, preprocess the original planar image to generate N image slice layers.

[0014] Step S4: Create corresponding CSS elements for each of the N image slice layers, and configure independent CSS 3D transformation properties for each CSS element.

[0015] Step S5: Stack and combine the CSS elements configured with the CSS 3D transformation properties in the Document Object Model (DOM) to form a layered 3D image structure with a sense of spatial depth.

[0016] Preferably, in step S3, the preprocessing of the original planar image includes: determining the target layer affiliation of each pixel region in the image based on the depth mapping information, and dividing the image into multiple non-overlapping opaque slice layers, each layer corresponding to a depth level.

[0017] Preferably, the depth mapping information may come from associated depth map files, be automatically generated by a semantic segmentation model, or be calculated by a preset algorithm.

[0018] Preferably, in step S4, configuring CSS 3D transformation properties includes: setting a translateZ displacement based on the depth value for each element corresponding to the layer, and setting the perspective and transform-style:preserve-3d properties for the container element to establish a 3D space.

[0019] Preferably, the method further includes an interactive step: responding to user interaction and dynamically updating the CSS 3D transformation properties of the layers to generate a depth-based parallax motion effect. Specifically, this can be achieved by adjusting the rotateY and rotateX property values ​​of each layer according to the depth-related parallax coefficient differences based on cursor movement data.

[0020] Preferably, smooth animations can be added to layer state changes using CSS transition or animation properties.

[0021] The technical solution provided by this invention has the following beneficial effects:

[0022] Lightweight and efficient: Core rendering relies on browser-native CSS 3D hardware acceleration, eliminating the need for heavy JavaScript 3D libraries, significantly reducing performance overhead, improving page loading and rendering speed, and ensuring compatibility with mobile devices.

[0023] Easy to develop: Through declarative "layered image rendering markup" and automated preprocessing, developers are freed from manual image slicing, tedious positioning and complex mathematical calculations, which greatly improves development efficiency and code maintainability.

[0024] Rich effects: By deconstructing a single image into multiple layers and controlling them independently, it is possible to easily achieve sophisticated visual effects such as parallax, 3D rotation, and focus shift that are difficult to achieve with traditional methods, and smooth animations can be achieved naturally through CSS.

[0025] Easy to integrate: The output is in standard HTML / CSS structure, which can be seamlessly integrated with existing front-end frameworks, content management systems and development toolchains, making it easy for SEO, and the styles can be flexibly customized through CSS.

Claims

1. A layered 3D image rendering method based on CSS, characterized in that, include: Receive a front-end page request, wherein the front-end page contains layered image rendering tags; Parse the layered image rendering markers to obtain the original planar image and the corresponding N layered rendering parameters, where N is an integer greater than or equal to 2; Based on the layered rendering parameters, the original planar image is preprocessed to generate N image slice layers; Create corresponding Cascading Style Sheets (CSS) elements for each of the N image slice layers, and configure independent CSS 3D transformation properties for each CSS element; CSS elements configured with the CSS 3D transformation properties are layered and combined in the Document Object Model (DOM) to form a layered 3D image structure with a sense of spatial depth.

2. The method according to claim 1, characterized in that, The preprocessing of the original planar image to generate N image slice layers includes: Based on the depth mapping information in the layered rendering parameters, the target layer affiliation of each pixel region in the original planar image is determined; Based on the target layer affiliation, the original planar image is divided into N non-overlapping opaque image slice layers, where each image slice layer represents a spatial depth level.

3. The method according to claim 2, characterized in that, The depth mapping information is obtained through any of the following methods: Receive the depth map file associated with the original planar image; The original planar image is semantically segmented and recognized to automatically generate depth mapping information; Based on a preset rule algorithm, the original planar image is calculated to generate depth mapping information.

4. The method according to claim 1, characterized in that, The configuration of independent CSS3D transformation properties for each CSS element includes: Configure the translateZ property for the i-th CSS element. The property value is the displacement value calculated based on the depth value z_i of the i-th image slice layer, where i=1,2,...,N, and at least two z_i values ​​are different. Configure the perspective and / or transform-style: preserve-3d property for the i-th CSS element to enable a 3D rendering context in its parent or its own container.

5. The method according to claim 4, characterized in that, The method further includes: It acquires viewpoint change data in response to user cursor movement events or device posture sensing events; Based on the perspective change data, the CSS 3D transformation property of at least one of the CSS elements is dynamically calculated and updated to produce a parallax motion effect in the layered 3D image structure.

6. The method according to claim 5, characterized in that, The dynamic calculation and updating of CSS 3D transformation properties includes: Based on the horizontal coordinate offset Δx and vertical coordinate offset Δy of the cursor in the viewport, the transformation adjustment value of the i-th layer is calculated according to the predefined disparity coefficient k_i, wherein the disparity coefficient k_i is associated with the depth value z_i. The transformation adjustment values ​​are applied to the rotateY and rotateX properties of the i-th CSS element to achieve differential rotation based on layer depth.

7. The method according to claim 1, characterized in that, The method further includes: Configure CSS transition or CSS animation properties for at least one of the CSS elements to produce smooth 3D deformation animations during the initialization, state transition, or interactive response of the layered 3D image structure.

8. A CSS-based layered 3D image rendering device, characterized in that, include: The request receiving module is used to receive requests from the front-end page, which contains layered image rendering tags; The parameter parsing module is used to parse the layered image rendering markers to obtain the original planar image and the corresponding N layered rendering parameters. The layer processing module is used to preprocess the original planar image according to the layer rendering parameters to generate N image slice layers; The CSS configuration module is used to create corresponding CSS elements for the N image slice layers, and configure independent CSS 3D transformation properties for each CSS element; The structure composition module is used to layer and combine CSS elements configured with the CSS 3D transformation properties in the DOM to form a layered 3D image structure.

9. An electronic device, characterized in that, It includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the program, implements the method as described in any one of claims 1 to 7.

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