WebGL-based normal map high-fidelity compression method and system

Abstract

The application provides a normal map high-fidelity compression method and system based on WebGL, and relates to the technical field of image compression.The method comprises the following steps: reading RGBA four-channel pixel data of a map; stripping blue channel pixel data from the RGBA four-channel pixel data; performing linear fitting on the blue channel pixel data to obtain a slope and an intercept; storing the slope and the intercept in a Uint16Array, and recombining the slope and the intercept with a red channel and a green channel to obtain new pixel data; writing compression parameters in a header file of the new pixel data, and generating a binary file according to a maximum resolution limit of a web texture; and compressing the binary file.Thus, the blue channel of the normal map is re-encoded, and a compressed binary file is synthesized, which not only reduces the file size of the map, speeds up the network transmission speed of the map, but also retains more details and guarantees data accuracy.

Description

Technical Field

[0001] This invention relates to the field of image compression technology, and more specifically, to a WebGL-based high-fidelity compression method and system for normal maps. Background Technology

[0002] WebGL (Web Graphics Library) is a 3D graphics protocol. This graphics technology standard allows JavaScript and OpenGL ES 2.0 to be combined. WebGL can provide hardware-accelerated 3D rendering for HTML5 Canvas, allowing web developers to use the system's graphics card to display 3D scenes and models more smoothly in the browser. Normal mapping, on the other hand, is a special texture that can be applied to 3D surfaces, unlike traditional textures which can only be used on 2D surfaces. As an extension of bump mapping, it gives each pixel on each plane a height value, containing a lot of detailed surface information. It can create many special stereoscopic visual effects on the shape of ordinary objects, while also requiring high image accuracy; compression primarily ensures high fidelity.

[0003] Traditional texture compression methods are mostly lossy compression. However, for normal maps, the details are magnified by the amplification effect of lighting calculations, resulting in pixelation and other distortions that severely affect rendering quality. Normal map compression typically uses normalization. While this forced normalization may not cause problems for individual vertices, in fragment shaders, the z-value is obtained by subtracting the x and y values ​​and then taking the square root. This doesn't correspond to the actual result, leading to an overall larger z-value and z-value assimilation, which fails to effectively guarantee texture accuracy.

[0004] Patent document CN108447111B discloses a method, apparatus, storage medium, processor, and terminal for processing normal maps, which uses multiple normal maps for interpolation to obtain a composite normal map. However, it does not solve the problem of high-fidelity compression of normal maps. Summary of the Invention

[0005] The purpose of this invention is to provide a WebGL-based high-fidelity compression method and system for normal maps. This method can synthesize compressed binary files by re-encoding the blue channel of the normal map, which not only reduces the file size of the map and speeds up the network transmission of the map, but also retains more details and ensures data accuracy.

[0006] The embodiments of the present invention are implemented as follows:

[0007] In a first aspect, embodiments of this application provide a WebGL-based high-fidelity normal map compression method, which includes the following steps:

[0008] Read the RGBA four-channel pixel data of the texture;

[0009] Extract the blue channel pixel data from the RGBA four-channel pixel data;

[0010] Linear fitting was performed on the blue channel pixel data to obtain the slope and intercept;

[0011] The slope and intercept are stored as a Uint16Array and then merged with the red and green channels to obtain new pixel data.

[0012] Compression parameters are written into the header file of the new pixel data, and a binary file is generated based on the maximum resolution limit of the texture on the web platform.

[0013] Compress binary files.

[0014] In some embodiments of the present invention, the step of reading the RGBA four-channel pixel data of the texture includes:

[0015] Use WebGL to render the texture onto the canvas and obtain the RGBA four-channel pixel data of the texture.

[0016] In some embodiments of the present invention, the step of extracting blue channel pixel data from RGBA four-channel pixel data includes:

[0017] Iterate through the RGBA four-channel pixel data and collect the blue channel pixel data.

[0018] In some embodiments of the present invention, the steps of linearly fitting the blue channel pixel data to obtain the slope and intercept include:

[0019] Based on the preset compression rate, the blue channel pixel data is divided into blocks of a preset number, and linear fitting is performed on each block to obtain the slope and intercept.

[0020] In some embodiments of the present invention, the compression parameters include a preset compression ratio and the original image size.

[0021] Secondly, embodiments of this application provide a WebGL-based high-fidelity normal map compression system, which includes:

[0022] The pixel data reading module is used to read the RGBA four-channel pixel data of the texture.

[0023] The blue channel pixel data stripping module is used to extract blue channel pixel data from RGBA four-channel pixel data;

[0024] The linear fitting module is used to perform linear fitting on the blue channel pixel data to obtain the slope and intercept.

[0025] The remerging module stores the slope and intercept as a Uint16Array and remerges them with the red and green channels to obtain new pixel data.

[0026] The binary file generation module is used to write compression parameters into the header file of the new pixel data, and at the same time generate binary files according to the maximum resolution limit of the web texture;

[0027] The compression module is used to compress binary files.

[0028] Thirdly, embodiments of this application provide an electronic device including a memory for storing one or more programs; and a processor. When the one or more programs are executed by the processor, they implement the methods described in any of the first aspects above.

[0029] Fourthly, embodiments of this application provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method as described in any of the first aspects above.

[0030] Compared with the prior art, the embodiments of the present invention have at least the following advantages or beneficial effects:

[0031] This invention provides a WebGL-based high-fidelity compression method and system for normal maps, comprising the following steps: reading the RGBA four-channel pixel data of the texture; extracting the blue channel pixel data from the RGBA four-channel pixel data; performing linear fitting on the blue channel pixel data to obtain the slope and intercept; thus, by performing linear fitting on the blue channel of the normal map, more texture details are preserved, ensuring the accuracy and continuity of the data, avoiding pixel color block distortion, and ensuring compression ratio without sacrificing accuracy. This avoids the pixelation defects caused by blindly normalizing normal values. The slope and intercept are stored as a Uint16Array and then merged with the red and green channels to obtain new pixel data. Compression parameters are written into the header file of the new pixel data, and a binary file is generated according to the maximum texture resolution limit of the web client. This allows users to decode according to specific parameters, providing strong scalability. Finally, the binary file is compressed, reducing the file size of the normal map and accelerating the network transmission speed of the texture. This method and system re-encode the blue channel of the normal map to synthesize a compressed binary file. This not only reduces the file size of the texture and speeds up network transmission, but also preserves more detail and ensures data accuracy. It helps to quickly load 3D models and optimize the end-user experience. Attached Figure Description

[0032] To more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present invention and should not be regarded as a limitation on the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0033] Figure 1 A flowchart illustrating a WebGL-based high-fidelity normal map compression method provided in this embodiment of the invention;

[0034] Figure 2 A flowchart illustrating another WebGL-based high-fidelity normal map compression method provided in this embodiment of the invention;

[0035] Figure 3 A comparison image of the original and encoded image provided in an embodiment of the present invention;

[0036] Figure 4 A structural block diagram of a WebGL-based high-fidelity normal mapping compression system provided in an embodiment of the present invention;

[0037] Figure 5 This is a schematic structural block diagram of an electronic device provided in an embodiment of the present invention.

[0038] Icons: 110 - Pixel data reading module; 120 - Blue channel pixel data stripping module; 130 - Linear fitting module; 140 - Re-merging module; 150 - Binary file generation module; 160 - Compression module; 101 - Memory; 102 - Processor; 103 - Communication interface. Detailed Implementation

[0039] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. The components of the embodiments of this application described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0040] Example

[0041] Please refer to Figures 1 to 3 , Figure 1 The diagram shown is a flowchart of a WebGL-based high-fidelity normal map compression method provided by an embodiment of the present invention. Figure 2 The diagram shown is a flowchart of another WebGL-based high-fidelity normal map compression method provided by an embodiment of the present invention. Figure 3 The image shown is a comparison of the original image and the encoded image provided by an embodiment of the present invention. This application provides a WebGL-based high-fidelity normal map compression method, which includes the following steps:

[0042] S110: Reads the RGBA four-channel pixel data of the texture;

[0043] In some embodiments of this example, the step of reading the RGBA four-channel pixel data of the texture includes: rendering the texture to the canvas using WebGL to obtain the RGBA four-channel pixel data of the texture.

[0044] S120: Extract the blue channel pixel data from the RGBA four-channel pixel data;

[0045] In some embodiments of this example, the step of extracting blue channel pixel data from RGBA four-channel pixel data includes: traversing the RGBA four-channel pixel data and collecting blue channel pixel data.

[0046] S130: Perform linear fitting on the blue channel pixel data to obtain the slope and intercept;

[0047] In some embodiments of this example, the step of linearly fitting the blue channel pixel data to obtain the slope and intercept includes: dividing the blue channel pixel data into a preset number of blocks according to a preset compression ratio, and performing linear fitting on each block to obtain the slope and intercept. In this implementation process, according to the agreed compression ratio, a certain number of blocks of blue channel pixel data are divided, and linear fitting is performed on each block to obtain the slope and intercept. Therefore, by performing linear fitting on the blue channel of the normal map, more texture details are preserved, ensuring the accuracy and continuity of the data, avoiding pixel color block distortion, and maintaining accuracy while ensuring the compression ratio. This avoids the pixelation defects caused by blindly normalizing normal values.

[0048] S140: Store the slope and intercept as a Uint16Array, and re-merge them with the red and green channels to obtain new pixel data;

[0049] Specifically, the slope and intercept are stored as a Uint16Array, with each curve occupying a total of 32 bits of storage space, and then merged with the red and green channels.

[0050] S150: Write compression parameters into the header file of the new pixel data, and generate a binary file according to the maximum resolution limit of the web texture;

[0051] In some embodiments of this example, the compression parameters include a preset compression ratio and the original image size.

[0052] Specifically, based on the actual effect, the compression ratio, original image size, and other data are stored in the header file of the data obtained in step S140. According to the maximum resolution limit of the web-based texture, the aspect ratio should be close to 1. If the data is insufficient in bytes, blank spaces are added at the end. Finally, a binary file is generated. This achieves the goal of allowing users to decode according to specific parameters, exhibiting strong scalability. Compared to other compression methods, this method has significant advantages in both texture encoding and decoding.

[0053] S160: Compress binary files.

[0054] Specifically, the binary file generated by step S160 is compressed, thereby reducing the file size of the normal map and accelerating the network transmission speed of the texture. This method re-encodes the blue channel of the normal map to synthesize a compressed binary file, which not only reduces the file size of the texture and speeds up network transmission, but also retains more detail and ensures data accuracy. This helps to quickly load 3D models and optimize the end-user experience.

[0055] Please refer to Figure 4 , Figure 4 The diagram shown is a structural block diagram of a WebGL-based high-fidelity normal mapping compression system provided in an embodiment of the present invention. This application provides a WebGL-based high-fidelity normal mapping compression system, comprising:

[0056] The pixel data reading module 110 is used to read the RGBA four-channel pixel data of the texture;

[0057] Blue channel pixel data stripping module 120 is used to strip blue channel pixel data from RGBA four-channel pixel data;

[0058] The linear fitting module 130 is used to perform linear fitting on the blue channel pixel data to obtain the slope and intercept.

[0059] The remerging module 140 is used to store the slope and intercept according to a Uint16Array and remerge them with the red channel and green channel to obtain new pixel data;

[0060] The binary file generation module 150 is used to write compression parameters into the header file of the new pixel data, and at the same time generate binary files according to the maximum resolution limit of the web texture.

[0061] Compression module 160 is used to compress binary files.

[0062] In the above implementation process, the system re-encodes the blue channel of the normal map to synthesize a compressed binary file. This not only reduces the file size of the texture and speeds up network transmission, but also retains more detail and ensures data accuracy. This facilitates faster loading of 3D models and optimizes the end-user experience.

[0063] Please refer to Figure 5 , Figure 5 This is a schematic structural block diagram of an electronic device provided in an embodiment of this application. The electronic device includes a memory 101, a processor 102, and a communication interface 103. The memory 101, processor 102, and communication interface 103 are electrically connected to each other directly or indirectly to realize data transmission or interaction. For example, these components can be electrically connected to each other through one or more communication buses or signal lines. The memory 101 can be used to store software programs and modules, such as the program instructions / modules corresponding to a WebGL-based normal mapping high-fidelity compression system provided in an embodiment of this application. The processor 102 executes various functional applications and data processing by executing the software programs and modules stored in the memory 101. The communication interface 103 can be used to communicate with other node devices for signaling or data.

[0064] The memory 101 may be, but is not limited to, random access memory (RAM), read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), etc.

[0065] The processor 102 can be an integrated circuit chip with signal processing capabilities. The processor 102 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0066] Understandable. Figure 5 The structure shown is for illustrative purposes only; the electronic device may also include components that are more advanced than those shown. Figure 5 The more or fewer components shown, or having the same Figure 5 The different configurations shown. Figure 5 The components shown can be implemented using hardware, software, or a combination thereof.

[0067] In the embodiments provided in this application, it should be understood that the disclosed apparatus and methods can also be implemented in other ways. The apparatus embodiments described above are merely illustrative. For example, the flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram and / or flowchart, and combinations of blocks in block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0068] In addition, the functional modules in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0069] If the aforementioned functions are implemented as software functional modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0070] It will be apparent to those skilled in the art that this application is not limited to the details of the exemplary embodiments described above, and that this application can be implemented in other specific forms without departing from the spirit or essential characteristics of this application. Therefore, the embodiments should be considered illustrative and non-limiting in all respects, and the scope of this application is defined by the appended claims rather than the foregoing description. Thus, all variations falling within the meaning and scope of equivalents of the claims are intended to be included within this application. No reference numerals in the claims should be construed as limiting the scope of the claims.

Claims

1. A high-fidelity compression method for normal maps based on WebGL, characterized in that, Includes the following steps: Read the RGBA four-channel pixel data of the texture; Extract the blue channel pixel data from the RGBA four-channel pixel data; Linear fitting is performed on the blue channel pixel data to obtain the slope and intercept; The slope and intercept are stored as a Uint16Array and then merged with the red and green channels to obtain new pixel data. Compression parameters are written into the header file of the new pixel data, and a binary file is generated based on the maximum resolution limit of the texture on the web platform. The binary file is compressed.

2. The WebGL-based high-fidelity normal mapping compression method according to claim 1, characterized in that, The steps for reading the RGBA four-channel pixel data of the texture include: Use WebGL to render the texture onto the canvas and obtain the RGBA four-channel pixel data of the texture.

3. The WebGL-based high-fidelity normal map compression method according to claim 1, characterized in that, The step of extracting the blue channel pixel data from the RGBA four-channel pixel data includes: Traverse the RGBA four-channel pixel data and collect the blue channel pixel data.

4. The WebGL-based high-fidelity normal map compression method according to claim 1, characterized in that, The steps of performing linear fitting on the blue channel pixel data to obtain the slope and intercept include: Based on the preset compression rate, the blue channel pixel data is divided into blocks of a preset number, and linear fitting is performed on each block to obtain the slope and intercept.

5. The WebGL-based high-fidelity normal mapping compression method according to claim 4, characterized in that, The compression parameters include a preset compression ratio and the original image size.

6. A high-fidelity compression system for normal maps based on WebGL, characterized in that, include: The pixel data reading module is used to read the RGBA four-channel pixel data of the texture. The blue channel pixel data stripping module is used to extract blue channel pixel data from RGBA four-channel pixel data; The linear fitting module is used to perform linear fitting on the blue channel pixel data to obtain the slope and intercept. The remerging module stores the slope and intercept as a Uint16Array and remerges them with the red and green channels to obtain new pixel data. The binary file generation module is used to write compression parameters into the header file of the new pixel data, and at the same time generate binary files according to the maximum resolution limit of the web texture; A compression module is used to compress the binary file.

7. An electronic device, characterized in that, include: Memory, used to store one or more programs; processor; When the one or more programs are executed by the processor, the method as described in any one of claims 1-5 is implemented.

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

Images