Method for rendering of semi-transparent objects based on WebGL
By employing a two-stage rendering process and post-screen processing, the WebGL-based method for rendering translucent objects addresses the performance and effect deficiencies of existing technologies, achieving more efficient utilization of video memory and correct blending results.
Patent Information
- Application Number
- CN202211409702.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-11-09
- Publication Date
- 2026-02-27
- Estimated Expiration
- 2042-11-09
AI Technical Summary
Existing WebGL-based methods for rendering semi-transparent objects have shortcomings in performance and effect, especially in large scenes where performance is poor and the blending results are incorrect.
By employing a two-stage rendering process and screen post-processing, interval fragment cache textures and depth interval index textures are created by calculating the segmentation of depth intervals and unit distances, enabling the rendering of order-independent semi-transparent objects. Fragments are then merged and alpha blending is performed.
Compared to deep stripping and oil painter algorithms, it saves video memory and improves performance, achieving more accurate blending results with appropriate interval partitioning.
Smart Images
Figure CN115690302B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of 3D graphics rendering, and particularly relates to a rendering method of a semi-transparent object based on WebGL. BACKGROUND
[0002] Semi-transparent object rendering is very common in 3D rendering and is also a difficult problem to solve. At present, there are some order-independent semi-transparent rendering algorithms based on desktop graphics libraries such as OpenGL, such as Per-Pixel Linked Lists, Depth Peeling, Weighted Averaging and the like. In addition, the commonly used algorithm is the order-dependent painter algorithm.
[0003] WebGL implemented based on OpenGL ES does not have advanced features such as atomic operation, shader storage buffer object and the like, and cannot implement algorithms such as Per-Pixel Linked Lists. The performance problem of the Depth Peeling algorithm will be more serious on the Web side, and the Weighted Averaging algorithm cannot restore the correct color result. As for the painter algorithm, since it needs to be pre-ordered, the performance is poor for large scenes, and there are many cases of incorrect mixing results, so there is no rendering method of semi-transparent objects based on WebGL at present which is good in both effect and performance. SUMMARY
[0004] The present application aims to overcome the deficiencies of the prior art and provide a rendering method of a semi-transparent object based on WebGL.
[0005] The present application provides a rendering method of a semi-transparent object based on WebGL, comprising:
[0006] performing first rendering on all objects to obtain a maximum depth value and an interval fragment number of each pixel position;
[0007] calculating a split number of a depth interval based on the maximum depth value and the interval fragment number;
[0008] calculating a unit distance of the depth interval based on the split number and the maximum depth value;
[0009] creating an interval fragment cache texture and a depth interval index texture;
[0010] inputting the unit distance of the depth interval, the interval fragment cache texture and the depth interval index texture into a fragment shader to perform second rendering on all objects.
[0011] Output the final pixel.
[0012] Further, the maximum depth value and the interval fragment number of each pixel position are obtained, comprising:
[0013] Before the first rendering, a method depthFunc() provided by WebGL is called to set the depth comparison mode, wherein the function used for the depth comparison is greater;
[0014] In the first rendering, the source blending factor and the target blending factor of the blending mode are both set as gl.ONE, and the value written in the red channel is 1;
[0015] When a fragment passes the fragment shader stage and proceeds to the depth test stage, if the fragment passes the depth test and the test in the subsequent rendering pipeline, the depth of the fragment is written into the depth buffer;
[0016] When the depth buffer already has the depth value of a certain fragment, whether to overwrite the depth value already existing in the current buffer is determined according to the strategy provided by the depth comparison function;
[0017] After the first rendering is completed, the maximum depth value of all fragments at each pixel position is saved in the depth buffer, and the interval fragment number of the current pixel position is stored in the texture red channel of the frame buffer.
[0018] Further, the calculation formula of the split number is:
[0019] C=C b +(1+(N-N min )÷(N max -N min )×t), t∈[0,+∞), C b ∈[1,+∞)
[0020] Wherein, C is the split number, N max is the maximum interval fragment number, N min is the minimum interval fragment number, C b is the interval split base number input by the user, t is the constant value of the interval split coefficient input by the user, and N is the input numerical interval fragment number.
[0021] Further, the calculation formula of the unit distance of the depth interval is:
[0022] D=D max ÷C, D max ∈[0,1]
[0023] Wherein, D is the unit distance of the depth interval, D maxwherein D is the maximum depth value for a pixel bit, C is the number of segments.
[0024] Further, the interval fragment cache texture comprises a first texture and a second texture, wherein the first texture is used to store color values in the interval fragment cache texture, and the second texture is used to store depth values in the interval fragment cache texture.
[0025] Further, the creation of the first texture comprises:
[0026] invoking a function createTexture() provided by WebGL to create the first texture;
[0027] setting the texture format as RGBA8;
[0028] setting the texture type as UNSIGNED_BYTE;
[0029] invoking a function texImage2D() to initialize pixels, wherein a pixels parameter is set as an ArrayBuffer instance of JavaScript, thereby completing the creation of the first texture.
[0030] Further, the creation of the second texture comprises:
[0031] invoking a function createTexture() provided by WebGL to create the second texture;
[0032] setting the texture format as R16UI;
[0033] setting the texture type as UNSIGNED_INT;
[0034] invoking a function texImage2D() to initialize pixels, wherein a pixels parameter is set as an ArrayBuffer instance of JavaScript, thereby completing the creation of the second texture.
[0035] Further, the creation of the depth interval index texture comprises:
[0036] invoking a function createTexture() provided by WebGL to create the depth interval index texture;
[0037] setting the texture format as RG16F;
[0038] setting the texture type as FLOAT;
[0039] invoking a function texImage2D() to initialize pixels, wherein a pixels parameter is set as an ArrayBuffer instance of JavaScript, thereby completing the creation of the depth interval index texture.
[0040] Further, the second rendering comprises:
[0041] Obtaining the index of the start of the depth interval according to the screen coordinates and the depth interval index texture;
[0042] According to the fragment depth value and the depth interval unit distance, mapping to the corresponding depth interval, and calculating the offset value of the start index relative to the depth interval by rounding down, to obtain the actual storage position on the interval fragment cache texture;
[0043] Writing the RGBA and depth value into the actual storage position on the interval fragment cache texture to complete the writing of an interval fragment cache;
[0044] Completing the writing of all interval fragment caches based on the corresponding blending mode to complete the second rendering.
[0045] Further, the output of the final pixel comprises:
[0046] Calling the screen post-processing process to sort all interval fragments pixel by pixel on the interval fragment cache texture;
[0047] Blending all fragments in turn according to the blending mode;
[0048] Outputting all Alpha-blended pixels on the screen.
[0049] The present application has the following beneficial effects: the present application completes the rendering of sequential-independent translucent objects by using two rendering processes and two-sided screen post-processing, and compared with the depth stripping and the pixel-by-pixel linked list algorithm, since the intervals are divided, a part of fragments are pre-merged, the video memory is relatively saved, and the performance is higher than that of the depth stripping, and compared with the weighted average algorithm and the painter algorithm, in the case of selecting a suitable interval division number, or in the case of a relatively uniform depth distribution scene, the present application has a more correct blending result. BRIEF DESCRIPTION OF DRAWINGS
[0050] The accompanying drawings, which form a part of the present application, are intended to provide further understanding of the present application, and the illustrative embodiments of the present application and their descriptions serve the purpose of explaining the present application, and do not constitute improper limitations to the present application.
[0051] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the accompanying drawings needed to be used in the embodiment description will be briefly introduced. Obviously, the accompanying drawings in the following description only constitute some embodiments of the present application, and for those skilled in the art, other accompanying drawings can also be obtained without creative labor.
[0052] Figure 1 is a conceptual diagram of depth interval division in the first embodiment of the present application;
[0053] Figure 2 is a result graph of the maximum depth value of all fragments of each pixel position saved in the depth buffer in Embodiment One of the present application;
[0054] Figure 3 is a schematic diagram of the interval fragment cache texture index and the interval fragment cache texture index position in Embodiment One of the present application;
[0055] Figure 4 is a flowchart of the rendering method of the semi-transparent object based on WebGL in Embodiment One of the present application;
[0056] Figure 5 is a general flowchart of the rendering method of the semi-transparent object based on WebGL in Embodiment One of the present application;
[0057] Figure 6 is an effect diagram of a plurality of cubes rendered using a conventional rendering method;
[0058] Figure 7 is an effect diagram of a plurality of cubes rendered using the rendering method of the present application. DETAILED DESCRIPTION
[0059] The technical solutions in the embodiments of the present application will be clearly and completely described 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 work fall within the scope of protection of the present application.
[0060] Embodiment One
[0061] The rendering method of the semi-transparent object based on WebGL in Embodiment One of the present application comprises: performing first rendering on all objects to obtain the maximum depth value and the interval fragment number of each pixel position; calculating the split number of the depth interval based on the maximum depth value and the interval fragment number; calculating the unit distance of the depth interval based on the split number and the maximum depth value; creating an interval fragment cache texture and a depth interval index texture; inputting the unit distance of the depth interval, the interval fragment cache texture and the depth interval index texture into a fragment shader to perform second rendering on all objects; and outputting a final pixel. The present application completes the rendering of the sequential-independent semi-transparent object by using two rendering processes and two-side screen post-processing. Compared with the depth stripping and the pixel-by-pixel linked list algorithm, the present application is relatively more memory-saving and has higher performance than the depth stripping because of the division of the interval and the pre-merging of a part of fragments. Compared with the weighted average algorithm and the painter algorithm, the present application has a more correct mixing result in the case of selecting a suitable interval split number or a relatively uniform depth distribution scene.
[0062] It should be noted that the pixel position refers to each coordinate position in the screen coordinate system, and each pixel position corresponds to a plurality of different depth elements in actual rendering. The basic principle of the present solution is that the depth space of each pixel position is divided into a limited number of small intervals with equal intervals, which is referred to as a depth interval. The data block stored in the divided depth interval is referred to as an interval element. When rendering each element, the x and y values are indexed to the screen coordinates, and the depth value is indexed to the corresponding depth interval. The color value, Alpha value and depth value are written in the depth interval. In this way, the data of all elements at all depths is basically stored. Then, each pixel position is traversed, all interval elements belonging to the pixel position are sorted, and Alpha blending is performed using the corresponding blending mode. Finally, an output pixel is output. An exemplary conceptual diagram is shown in Figure 1
[0063] Specifically, Figures 4-5 A flowchart of a rendering method of a semi-transparent object based on WebGL in the first application embodiment is shown, which includes the following steps.
[0064] S101, first rendering is performed on all objects to obtain the maximum depth value of each pixel position and the number of interval elements;
[0065] The maximum depth value of each pixel position and the number of interval elements are obtained, including:
[0066] Before the first rendering, a method depthFunc() provided by WebGL is called to set the depth comparison mode, wherein the function used for depth comparison is greater.
[0067] In the first rendering, the source blending factor and the target blending factor of the blending mode are both gl.ONE, and the value written in the red channel is 1.
[0068] When a element passes the element shader stage and enters the depth test stage, if the element passes the depth test and the subsequent test in the rendering pipeline, the depth of the element is written into the depth buffer.
[0069] When the depth buffer already exists the depth value of a element, whether to overwrite the depth value already existing in the current buffer is determined according to the strategy provided by the depth comparison function.
[0070] After the first rendering is completed, the maximum depth value of all elements at each pixel position is saved in the depth buffer, and the number of interval elements of the current pixel position is stored in the texture red channel of the frame buffer.
[0071] Specifically, according to the rendering pipeline of WebGL, when the rendering process proceeds to the fragment shader stage, the depth value of the current fragment can be read from the built-in variable gl_FragCoord. Before rendering, the method depthFunc() provided by WebGL is called to set the depth comparison mode to greater. In this way, when a fragment passes the fragment shader stage and proceeds to the depth test stage, if it passes the depth test and subsequent tests in the rendering pipeline, the depth of the fragment is written into the depth buffer. When the depth buffer already contains a depth value of a fragment, whether to overwrite the existing depth value in the buffer is determined according to the strategy provided by the depth comparison function. Setting the depth comparison function to greater means that the depth buffer is written when the depth value of the fragment is greater than the depth value in the buffer. In this way, after rendering, the depth buffer stores the maximum depth value of all fragments at each pixel position, and the result is as shown in FIG. 1. Figure 2
[0072] S102, splitting the number of depth intervals based on the maximum depth value and the interval fragment number;
[0073] Specifically, the calculation formula of the splitting number is as follows:
[0074] C = C b + (1 + (N - N min ) ÷ (N max - N min ) × t), t ∈ [0, +∞), C b ∈ [1, +∞)
[0075] wherein C is the splitting number, N max is the maximum interval fragment number, N min is the minimum interval fragment number, C b is the interval splitting base number input by the user, t is the constant value of the interval splitting coefficient input by the user, and N is the input value interval fragment number.
[0076] It should be noted that, due to the large number of fragments, the probability of two fragments belonging to the same depth interval (referred to as depth overlap) increases. Depth overlap may cause incorrect alpha blending results. Therefore, the splitting number of the pixel position with a large number of fragments can be increased according to the parameters (which can be set by the user) to obtain higher precision. According to the interval fragment number obtained in step S101, the extreme value is calculated by traversing all interval fragment numbers at each pixel position, to obtain the maximum interval fragment number (denoted as N max ) and the minimum interval fragment number (denoted as N min ), and then provide two input values for the user, one is the interval split base (denoted as C b ), and the other is the constant value of the interval split coefficient (denoted as t), and then input the interval piece number (denoted as N), and then calculate the split number C through the split number calculation formula.
[0077] In addition, in terms of effect, the interval split coefficient N is a multiple value that can magnify the interval piece number, and the user can set a suitable magnification according to the actual object distribution situation of the scene to eliminate depth overlap.
[0078] S103, calculating the unit distance of the depth interval based on the split number and the maximum depth value;
[0079] Specifically, the calculation formula of the unit distance of the depth interval is:
[0080] D=D max ÷C, D max ∈[0, 1]
[0081] wherein D is the unit distance of the depth interval, D max is the maximum depth value of the pixel bit, and C is the split number.
[0082] It should be noted that step S103 will discretize the continuous depth value from 0 to 1, thereby realizing the segmented storage of the depth value and the color value in the subsequent steps. This process can be calculated in a post progressing process and the unit distance and the split number are output to the texture.
[0083] S104, creating an interval piece cache texture and a depth interval index texture;
[0084] Specifically, the total number of pixel bits is calculated according to the screen size, and according to the split number of the pixel bit, an interval piece cache texture that can accommodate all interval pieces is created in advance. The texture format needs to be set to store four channels of RGBA and one more channel to store the depth value. According to the maximum split number, the corresponding texture format is selected. Since the depth interval of all pixel bits is stored in one texture, the starting index of the depth interval of each pixel bit needs to be identified, that is, the texture coordinates of the starting depth interval.
[0085] It should be noted that the interval piece cache texture includes a first texture and a second texture, wherein the first texture is used to store the color value in the interval piece cache texture, and the second texture is used to store the depth value in the interval piece cache texture.
[0086] Specifically, the creation of the first texture includes:
[0087] A first texture is created by calling the function createTexture() provided by WebGL;
[0088] The texture internal format is set to RGBA8;
[0089] The texture type is set to UNSIGNED_BYTE, that is, unsigned integer is used to store each channel;
[0090] The texImage2D() function is called to initialize pixels, wherein the pixels parameter is set to the ArrayBuffer instance (type is Uint8Array) of JavaScript (js), that is, the creation of the first texture is completed.
[0091] The second texture is created, and the creation includes:
[0092] A second texture is created by calling the function createTexture() provided by WebGL;
[0093] The texture internal format is set to R16UI;
[0094] The texture type is set to UNSIGNED_INT;
[0095] The texImage2D() function is called to initialize pixels, wherein the pixels parameter is set to the ArrayBuffer instance of JavaScript, that is, the creation of the second texture is completed.
[0096] It should be noted that, considering that the interval fragment contains color values and depth values, a second texture needs to be created to store the depth values, and the first texture and the second texture are collectively referred to as interval fragment cache textures, the process of creating the texture for storing the depth values and the process of creating the texture for storing the color values are basically the same, and the difference lies in that one 16-bit unsigned integer channel is used to store the depth values for each pixel, and therefore, when the second texture is created, the texture internal format needs to be set to R16UI, and the texture type needs to be set to UNSIGNED_INT.
[0097] The depth interval index texture is created, and the creation includes:
[0098] The depth interval index texture is created by calling the function createTexture() provided by WebGL;
[0099] The texture internal format is set to RG16F;
[0100] The texture type is set to FLOAT;
[0101] Initialize the pixels by calling the texImage2D() function, wherein the pixels parameter is set to the JavaScript ArrayBuffer instance, i.e., the depth interval index texture is completed.
[0102] It should be noted that the creation process of the depth interval index texture is basically similar to the creation process of the first texture, and the difference lies in that 2 channels are needed to store 2 index values, because the uv coordinate is two floating point values, so on the basis of the first texture creation process, the texture format is set to RG16F, and the texture type is FLOAT.
[0103] S105, input the unit distance of the depth interval, the interval fragment cache texture and the depth interval index texture into the fragment shader, and perform the second rendering on all objects;
[0104] Specifically, the second rendering includes:
[0105] According to the screen coordinates and the depth interval index texture, the starting index of the depth interval is obtained;
[0106] According to the fragment depth value and the depth interval unit distance, the corresponding depth interval is mapped, and the starting index offset value relative to the depth interval is calculated by rounding down to obtain the actual storage position on the interval fragment cache texture;
[0107] It should be noted that the formula for calculating the starting index offset value is:
[0108] O = floor(d ÷ D)
[0109] Wherein, O is the starting index offset value, d is the fragment depth value, D is the depth interval unit distance, and floor represents the rounding down function;
[0110] Write the RGBA and depth value to the actual storage position on the interval fragment cache texture to complete the writing of an interval fragment cache;
[0111] Complete the writing of all interval fragment caches based on the corresponding blending mode to complete the second rendering.
[0112] Specifically, after the unit distance of the depth interval, the depth interval index texture and the interval fragment cache texture are prepared, they are input into the fragment shader, and a Pass is used to start the formal rendering of all objects; for each fragment, the index of the start of the depth interval is obtained according to the screen coordinates and the depth interval index texture, and then the offset value relative to the start index of the depth interval is calculated by mapping the depth value (denoted as d) and the unit distance of the depth interval (D) to the corresponding depth interval and taking the integer part, so that the actual storage position on the interval fragment cache texture can be calculated, and the RGBA and depth value are written to the position, thus recording an interval fragment; since depth overlap may occur, the interval fragment cache should use the corresponding blending mode (which can be set by the user).
[0113] S106, output the final pixel.
[0114] Specifically, the output of the final pixel includes:
[0115] Call the screen post-processing process to sort all interval fragments pixel by pixel on the interval fragment cache texture;
[0116] Blend all fragments in turn according to the blending mode, wherein the blending mode is set by the user;
[0117] Output all alpha-blended pixels on the screen.
[0118] The technical solution of the present application stores all fragments in a texture, solving the problem of not being able to cache all fragments on WebGL due to the lack of atomic operations and shader storage buffer objects. In addition, by dividing the depth interval, the continuous depth value is discretely divided, and all fragments can be cached under limited video memory. The maximum use of video memory is determined, and the situation of possible video memory overflow caused by the depth peeling algorithm does not occur. Secondly, in the case that the depth distribution of the object is not too concentrated or the model is not densely crossed, there is a correct blending result.
[0119] Figure 6 For the plurality of cubes rendered using the conventional rendering method, it can be seen that the cube painted in the upper right corner is very occluded and the relationship is chaotic, and it is difficult to distinguish the front and back relationship, Figure 7 is a plurality of cubes rendered using the rendering method of the technical solution. The spatial relationship between the cubes is clear and correct, and thus it can be seen that the technical solution of the present application has a more correct blending result in the case of selecting a suitable interval division number or in the case of a relatively uniform depth distribution.
[0120] Optionally, since the number of fragments of a pixel position is counted and used as one of the parameters for calculating the split number, although less depth overlap may still occur, it will inevitably lead to the inconsistency of the number of intervals of each pixel position, and the depth interval index texture is used to increase the performance consumption. Alternatively, the number of fragments of a pixel position is not counted, and a fixed split number set by a user is directly taken, so that the start index of the depth interval can be directly calculated, some steps and performance consumption are reduced, and since the size of the cache texture is determined, the memory occupation is more stable, but the possibility of mixing errors increases.
[0121] Optionally, the method of preventing depth overlap is to increase the split number, but increasing the split number will lead to an increase in cache space and an increase in memory occupation. In order to ensure correct results, and the amount of memory space is certain, at this time, the formal rendering process can be rendered in multiple Passes (rendering processes), a small part of the screen is rendered in each Pass, and the last cache position index value plus 1 of the previous Pass is input into each Pass. After the Pass is rendered, the final pixel is directly output. This is equivalent to using time to replace space, fully utilizing the GPU memory and performance to the extreme, and achieving the best effect.
[0122] Embodiment Two
[0123] Embodiment Two of the present application relates to a WebGL-based semi-transparent object rendering device, comprising:
[0124] A first rendering module is configured to perform first rendering on all objects to obtain a maximum depth value and an interval fragment number of each pixel position.
[0125] A split number calculation module is configured to calculate a split number of a depth interval based on the maximum depth value and the interval fragment number.
[0126] A unit distance calculation module is configured to calculate a unit distance of the depth interval based on the split number and the maximum depth value.
[0127] A texture creation module is configured to create an interval fragment cache texture and a depth interval index texture.
[0128] A second rendering module is configured to input the unit distance of the depth interval, the interval fragment cache texture and the depth interval index texture into a fragment shader, and perform second rendering on all objects.
[0129] An output module is configured to output a final pixel.
[0130] Embodiment Three
[0131] Embodiment three of the present application relates to a computer readable storage medium, the computer readable medium stores program code for execution by a device, the program code comprises steps for executing the method in any one of the implementation manners in embodiment one of the present application;
[0132] The computer readable storage medium can be a read only memory (ROM), a static storage device, a dynamic storage device or a random access memory (RAM). The computer readable storage medium can store program code, and when the program stored in the computer readable storage medium is executed by a processor, the processor is configured to execute the steps of the method in any one of the implementation manners in embodiment one of the present application.
[0133] The above is only a preferred specific embodiment of the present application; however, the protection scope of the present application is not limited to this. Any person skilled in the art can make equivalent replacements or changes according to the technical solution and the improvement concept of the present application within the technical range disclosed by the present application, and all of them should be covered in the protection scope of the present application.
Claims
1. A rendering method for semi-transparent objects based on WebGL, characterized in that, include: Perform an initial render of all objects to obtain the maximum depth value and number of fragments per pixel. The segmentation of the depth interval is calculated based on the maximum depth value and the number of fragments in the interval; The unit distance of the depth interval is calculated based on the cut-off value and the maximum depth value; Create a range fragment cache texture and a depth range index texture. The range fragment cache texture includes a first texture and a second texture. The first texture is used to store the color values in the range fragment cache texture, and the second texture is used to store the depth values in the range fragment cache texture. The unit distance of the depth range, the interval fragment cache texture, and the depth range index texture are input into the fragment shader to perform a second rendering of all objects; Output the final pixels.
2. The rendering method for semi-transparent objects based on WebGL according to claim 1, characterized in that, Obtain the maximum depth value and number of patches for each pixel, including: Before the first rendering, the depthFunc() method provided by WebGL is called to set the depth comparison method, where the function used for depth comparison is greater. In the first render, both the source and target blending factors of the blending mode are set to gl.ONE, and the value written to the red channel is 1; When a fragment passes the fragment shader stage and proceeds to the depth test stage, if the fragment passes the depth test and subsequent tests in the rendering pipeline, the depth of the fragment is written to the depth buffer. If the depth buffer already contains the depth value of a certain element, then the strategy provided by the depth comparison function is used to determine whether to overwrite the depth value that already exists in the buffer. After the first rendering is complete, the depth buffer will store the maximum depth value of all fragments at each pixel, and the texture red channel of the frame buffer will store the number of fragments in the current pixel range.
3. The rendering method for semi-transparent objects based on WebGL according to claim 1, characterized in that, The formula for calculating the segmentation fraction is: ； Where C is the segmentation fraction, N max N represents the maximum number of fragments in a given interval. min C is the minimum number of fragments in a given interval. b is the interval segmentation base input by the user, t is the constant value of the interval segmentation coefficient input by the user, and N is the number of fragments in the input numerical interval.
4. The rendering method for semi-transparent objects based on WebGL according to claim 3, characterized in that, The formula for calculating the unit distance within the depth range is: ； Where D is the unit distance within the depth interval, D max C represents the maximum depth value of a pixel, and C is the segmentation fraction.
5. The rendering method for semi-transparent objects based on WebGL according to claim 4, characterized in that, The creation of the first texture includes: The first texture is created by calling the `createTexture()` function provided by WebGL; Set the texture format to RGBA8; Set the texture type to UNSIGNED_BYTE; The texImage2D() function is called to initialize the pixels, where the pixels parameter is set to a JavaScript ArrayBuffer instance, thus completing the creation of the first texture.
6. The rendering method for semi-transparent objects based on WebGL according to claim 4, characterized in that, The creation of the second texture includes: A second texture is created by calling the `createTexture()` function provided by WebGL; Set the texture format to R16UI; Set the texture type to UNSIGNED_INT; The texImage2D() function is called to initialize the pixels, where the pixels parameter is set to a JavaScript ArrayBuffer instance, thus completing the creation of the second texture.
7. The rendering method for semi-transparent objects based on WebGL according to claim 1, characterized in that, The creation of the depth range indexed texture includes: The WebGL-provided function createTexture() is used to create a depth-range indexed texture; Set the texture format to RG16F; Set the texture type to FLOAT; The texImage2D() function is called to initialize the pixels, where the pixels parameter is set to a JavaScript ArrayBuffer instance, thus completing the depth range indexed texture.
8. The rendering method for semi-transparent objects based on WebGL according to claim 1, characterized in that, The second rendering includes: Obtain the starting index of the depth range based on the screen coordinates and the depth range index texture; Based on the fragment depth value and the unit distance of the depth interval, map to the corresponding depth interval, round down to calculate the starting index offset value relative to the depth interval, and obtain the actual storage location on the interval fragment cache texture; Write the RGBA and depth values to the actual storage location on the interval fragment buffer texture to complete the write of an interval fragment buffer; Write all interval fragment caches based on the corresponding hybrid mode to complete the second rendering.
9. The rendering method for semi-transparent objects based on WebGL according to claim 8, characterized in that, The output of the final pixel includes: The screen post-processing procedure is invoked to sort all fragments of the interval fragment cache texture pixel by pixel; Mix all fragments sequentially according to the mixing mode; Output all alpha-blended pixels on the screen.