Method for realizing highlighted rendering and enhancement of three-dimensional model based on off-screen rendering

Abstract

The invention provides a method for realizing highlighted rendering and enhancement of a three-dimensional model based on off-screen rendering, and belongs to the technical field of model rendering, and the method comprises the following steps: a three-dimensional scene module: obtaining a screen image and a screen image texture sampling coordinate UV according to a virtual scene restored by a real scene in a three-dimensional engine at a ratio of 1: 1; the off-screen rendering texture generation module is used for creating an off-screen rendering texture and rendering the selected model object to the off-screen rendering texture by using a specified material; the edge detection module is used for carrying out convolution sampling on the off-screen rendering texture according to the obtained real-time stroking width data and the screen image texture sampling coordinate UV obtained in the step 1 to obtain a texture stroking width; the problems that the global contour rendering effect is disordered, the rendering efficiency is low and a single object or multiple objects selected in a three-dimensional scene cannot be precisely highlighted and enhanced in the highlighted rendering and enhancement of the three-dimensional model in the virtual scene in the prior art are solved.

Description

Technical Field

[0001] The present invention belongs to the technical field of model rendering, and in particular relates to a method for realizing prominent rendering and enhancement of a three-dimensional model based on off-screen rendering. Background Art

[0002] In the field of 3D scene rendering, highlighting or outlining specific models (often referred to as "outline rendering" or "edge enhancement") is a key technical means of enhancing the user interaction experience. This technology is widely used in scenarios such as character selection in game development, component focusing in industrial design, and lesion localization in medical visualization. Its core goal is to quickly guide users' attention to the target object through visual enhancement.

[0003] Traditional implementations rely primarily on algorithms such as geometric expansion, depth detection, and normal edge detection. However, in practical applications, these solutions suffer from issues such as insufficient accuracy, high performance overhead, and poor scene adaptability, as exemplified by the following: Contour generation technology based on geometric expansion. This technique achieves a stroke effect by expanding the model's vertices along the normal direction and rendering them as a solid color, overwriting the original model. This technique is prone to outline breakage when rendering non-closed meshes or models with complex topological structures (such as regular cubes, broken surfaces, and hollow structures), and requires at least two renderings of the model, which significantly strains the real-time rendering performance of mobile devices or large-scale scenes. Edge detection technology based on depth / normal textures. This technology uses a post-processing pipeline to analyze gradient changes in the scene's depth map (DepthBuffer) or normal map (NormalBuffer) to detect edges. However, the depth / normal textures stored in this technology represent full-scene data, making it difficult to accurately trace the edges of single objects. Furthermore, using depth maps to calculate contours can prevent effective contour extraction if the object and its surroundings are at similar depths. Using normal maps to detect edges based on differences in normal orientation has poor adaptability to curved surface models (such as spheres) and is unable to distinguish true contours from surface details.

[0004] Edge detection technology based on image processing. This technology uses a post-processing pipeline to analyze image color and perform convolution operations on the image using edge detection operators to achieve edge detection. However, this technology also detects rendered textures based on full-scene data, making it difficult to accurately trace the edges of single objects. Furthermore, because the textures rendered by the scene are complex, many undesirable edges are generated. In other words, any area with significant color changes will be traced, making the final rendering very messy.

[0005] In summary, existing technologies find it difficult to achieve a balance between real-time performance, accuracy, and scene adaptability. There is an urgent need for a new architecture based on off-screen rendering that can achieve lightweight and highly robust 3D model highlight rendering and enhancement solutions through material replacement, efficient convolution, and dynamic anti-occlusion mechanisms. Summary of the Invention

[0006] In view of the problems in the prior art, the present invention provides a method for realizing prominent rendering and enhancement of a three-dimensional model based on off-screen rendering, which comprises the following steps: Step 1: 3D scene module: Based on the real scene, a virtual scene is restored in a 1:1 ratio in the 3D engine to obtain the screen image and the screen image texture sampling coordinates UV.

[0007] Step 2: Off-screen rendering texture generation module: Create an off-screen rendering texture and render the selected model object onto the off-screen rendering texture with the specified material; Step 3: Edge Detection Module: Based on the real-time stroke width data and the screen image texture sampling coordinates (UV) obtained in Step 1, convolution sampling is performed on the off-screen rendered texture to obtain the texture stroke width. The Sobel algorithm is then used in conjunction with the texture stroke width to detect the horizontal and vertical edge information of the off-screen rendered texture. The gradients in both directions are obtained, and the overall gradient strength of the off-screen rendered texture is calculated.

[0008] Step 4: Post-processing real-time rendering module: This module obtains the color and brightness of the stroke in real time, performs a quadrature calculation, and obtains the color pattern of the stroke. Based on the comprehensive gradient intensity obtained in step 3, it performs a mixed rendering effect on the screen image obtained in step 1 and the stroke pattern, thereby achieving highly accurate and flexible 3D model highlight rendering and enhancement effects. Furthermore, the specific steps in step 2 include: S21: Create an off-screen rendering texture to store the GPU rendering result as a texture; S22: Set the transparency of the off-screen rendering texture background color to 0; S23: Create material M1, and use the shader language to output the material's base color as black and its transparency as 1. This ensures that the model rendered based on this material is ultimately output as black, i.e. (0.0, 0.0, 0.0, 0.0). S24: assign the material M1 created in S23 to the selected model as a new model material; S25: Push the model rendered based on the M1 material obtained in S24 to the rendering queue of the off-screen rendering texture, and generate the final off-screen rendering texture of the selected model with the selected object being black and the background color being transparent.

[0009] Furthermore, the specific steps in step 3 include: S31: Obtain real-time stroke width data, combine it with the 9 positions of the 3x3 convolution kernel, and generate the corresponding offset UV coordinates.

[0010] S32: Obtain an off-screen rendering texture, and sample the off-screen rendering texture using the offset UV coordinates generated in S31 to obtain the transparency of the pixel points, thereby obtaining the texture stroke width; S33: Apply the horizontal convolution kernel of the Sobel operator and the pixel transparency obtained in S31 to calculate the product and accumulate the horizontal gradient; S34: Apply the vertical convolution kernel of the Sobel operator and the pixel transparency obtained in S31 to calculate the product and accumulate the vertical gradient; S35: Calculate the comprehensive gradient intensity based on the horizontal gradient calculated in S33 and the vertical gradient calculated in S34. The comprehensive intensity calculation formula is: 1.0-the absolute value of the accumulated horizontal gradient-the absolute value of the accumulated vertical gradient.

[0011] Furthermore, the screen image texture sampling coordinates UV are used to locate the pixel position and obtain the width and height of the screen rendering canvas in real time. Regardless of how the screen resolution changes, UV is always in the range of [0, 1], and the entire screen viewport is normalized to a unit plane. The horizontal direction is the U axis, and the U value is the range from 0~1920 to 0.0 to 1.0. The vertical direction is the V axis, and the V value is the range from 0~1080 to 0.0 to 1.0. The screen viewport resolution will be dynamically obtained according to the actual viewport size, and the screen viewport will be dynamically normalized to a unit plane.

[0012] Furthermore, the steps to create an off-screen render texture include: 1.1 Create a frame buffer object in WebGL to buffer the real-time rendering results of the GPU; 1.2 Creating off-screen render textures in WebGL; 1.3 Allocate memory for the created off-screen rendering texture; 1.4 Attach the offscreen render texture to the FBO's color attachment.

[0013] Compared with the prior art, the advantages and positive effects of the present invention are: 1. The off-screen rendering technology is used to achieve accurate capture of 3D scene model rendering, which can meet the selection and rendering of one independent or multiple models, and can accurately capture the outer contour of the selected 3D model for rendering enhancement. It overcomes the problems of chaotic global contour rendering effect, low rendering efficiency, and inability to accurately highlight and enhance single or multiple objects selected in the 3D scene in the existing technology for highlighting and enhancing 3D models in virtual scenes.

[0014] 2. The technology of the present invention can break through the conventional depth occlusion problem. Even if the selected model object is obscured by depth on the screen, the edge of the model object can be accurately presented on the screen, overcoming the problem that objects in three-dimensional scenes are obscured by depth and even the edges are obscured when they need to be highlighted.

[0015] 3. The present invention can accurately highlight three-dimensional scene models, and is very suitable for scenes that require high-precision and high-accuracy positioning or focusing on specific components, such as component focusing in industrial design and lesion localization in medical visualization. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following is a brief introduction to the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0017] Figure 1 A flowchart for realizing prominent rendering and enhancement of three-dimensional models based on off-screen rendering; Figure 2 The effect diagram of the edge break of the stroke for the outline generation technique based on geometric expansion; Figure 3 This is a messy rendering based on the full scene data; Figure 4 The rendering of the outer contour of a single object, multiple objects or complex objects realized based on the present invention; Figure 5 The image is an off-screen rendering texture obtained based on a three-dimensional scene and an effect image of the three-dimensional scene stroked based on the off-screen rendering texture. DETAILED DESCRIPTION

[0018] In order to more clearly understand the above-mentioned objects, features and advantages of the present invention, the present invention is further described below in conjunction with the accompanying drawings and embodiments. It should be noted that the embodiments of the present application and the features therein can be combined with each other without conflict.

[0019] In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention may also be implemented in other ways than those described herein. Therefore, the present invention is not limited to the specific embodiments disclosed below.

[0020] Explanation of terms: Off-screen rendering is a graphics rendering technique that focuses on rendering graphics content to an invisible off-screen buffer rather than directly displaying them on the screen. Render to Texture (RTT), a typical application of off-screen rendering, renders scene content directly to a texture object rather than traditionally outputting it to the screen. This technique provides greater flexibility and efficiency for graphics processing, playing a vital role in complex visual effects, post-processing, and multi-screen display scenarios.

[0021] Screen Image Texture Sample Coordinates (UV): In the post-processing pipeline of graphics rendering, screen image texture sample coordinates (UV) specifically refer to the screen-space texture coordinate system, used to accurately map full-screen effects to the display. This UV coordinate system normalizes the entire screen viewport to a unit plane, with the horizontal axis (U) (ranging from 0.0 to 1.0 from left to right) and the vertical axis (ranging from 0.0 to 1.0 from bottom to top). This standardized design allows post-processing shaders to be universal regardless of the actual resolution. After the rendering engine completes the main scene drawing, it inputs the framebuffer contents as a texture into the post-processing stage. At this point, the UV coordinates of each pixel become the critical bridge between the screen position and the texture sample. Post-processing effects such as blur, depth of field, and color correction are achieved by calculating the relationship between the current pixel's UV coordinate and the surrounding UV offsets. For example, a Gaussian blur requires symmetrically sampling the color values of multiple UV coordinates around the current UV.

[0022] Post-processing is a general term for the secondary processing of images in computer graphics after the main scene is rendered. After the 3D scene passes through the rendering pipeline to generate the initial frame buffer image, the post-processing stage applies a series of special effects to these pixel data, similar to a digital darkroom. These operations occur in screen space rather than 3D space, hence the term "screen-space effects." The core principle of post-processing is to use the entire frame buffer as an input texture, and then use shader programs to perform mathematical operations and image processing on each pixel, ultimately outputting an enhanced image.

[0023] Example 1, as Figures 1 to 3 As shown, this embodiment provides a method for achieving prominent rendering and enhancement of a three-dimensional model based on off-screen rendering, using the client-side three-dimensional engine Volli Code Cloud.J3D Digital Twin Designer, using the GLSL language, and the method includes the following steps: Step 1: 3D scene module: Based on the real scene, a virtual scene is restored in the J3D Digital Twin Designer at a 1:1 ratio to obtain the screen image and the screen image texture sampling coordinate UV. UV is used to change the resolution of the screen image to the range of 0.0 to 1.0, which needs to conform to the calculation range of 0 to 1 in the shader calculation.

[0024] Through CAD drawings of real factory sites, or by visiting the real factory sites to take photos or take aerial photos using drones, the space, buildings, and equipment in the factory are modeled and restored in 1:1 proportions in modeling software based on the actual photos or aerial photos, and a virtual scene corresponding to the real scene is built in the virtual space.

[0025] (1) Data collection: Collect CAD engineering or design drawings: The main view, top view, and side view in the drawings serve as the basis for the spatial structure. The marked linear / angular dimensions serve as the key parameter data of the 3D model.

[0026] Real-life photography / aerial photography: Use drones or cameras to shoot the factory area from multiple angles to obtain high-resolution photos and videos.

[0027] Key data: building dimensions, equipment layout, texture details (such as wall material, pipe color).

[0028] Laser scanning (optional): Use a lidar scanner to perform 3D point cloud scanning to accurately restore complex structures (such as pipes and robotic arms).

[0029] (2) Modeling process, basic modeling: In the modeling software, create a 1:1 model based on photos and dimension data.

[0030] Key operation: Use reference drawings to align to the actual scale (for example, if a wall is known to be 10 meters long, directly enter 10 units of length when modeling).

[0031] Hierarchical modeling of buildings and equipment (such as factory structures, assembly line equipment, and piping systems).

[0032] Texture mapping: Use the photos you take as textures to assign the model the corresponding material (such as metal, concrete). UV unwrapping: Unwrap the surface of a 3D model into a 2D plane to ensure that the texture is not stretched.

[0033] Scene Integration: Import all models into the J3D engine and arrange them according to the real layout. Add lighting (based on real lighting data or HDR environment maps) and rendering materials to achieve a 1:1 restoration of the real scene to the virtual scene.

[0034] The screen image texture sampling coordinates (UVs) are used to locate pixel positions and obtain the width and height of the screen rendering canvas, specifically the screen's horizontal and vertical resolutions, in real time. This allows for dynamic resolution adaptation, ensuring that UVs remain in the [0, 1] range regardless of screen resolution changes, ensuring consistent results. The implementation process normalizes the entire screen viewport to a unit plane. The horizontal axis is the U-axis (range 0.0 to 1.0 from left to right). For example, if the horizontal resolution is 1920, the U-axis converts 0-1920 to a range of 0.0 to 1.0. The vertical axis is the V-axis (range 0.0 to 1.0 from bottom to top). For example, if the vertical resolution is 1080, the V-axis converts 0-1080 to a range of 0.0 to 1.0. The screen viewport resolution is dynamically obtained based on the actual viewport size, dynamically normalizing the screen viewport to a unit plane.

[0035] Step 2: Off-screen rendering texture generation module: Create an off-screen rendering texture and render the selected model object onto the off-screen rendering texture with the specified material; Step 3: Edge Detection Module: Based on the real-time stroke width data and the screen image texture sampling coordinates (UV) obtained in Step 1, convolution sampling is performed on the off-screen rendered texture to obtain the texture stroke width. The Sobel algorithm is then used in conjunction with the texture stroke width to detect the horizontal and vertical edge information of the off-screen rendered texture. The gradients in both directions are obtained, and the overall gradient strength of the off-screen rendered texture is calculated.

[0036] Step 4: Post-processing real-time rendering module: This module obtains the color and brightness of the stroke in real time, performs a quadrature calculation, and obtains the color pattern of the stroke. Based on the comprehensive gradient intensity obtained in step 3, it performs a mixed rendering effect on the screen image obtained in step 1 and the stroke pattern, thereby achieving highly accurate and flexible 3D model highlight rendering and enhancement effects. 4.1 The final output color of the stroke is the stroke color multiplied by the stroke brightness. The specific calculation method is: edgeColor = stroke color * stroke brightness; 4.2 Determine whether the rendered color is the stroke color or the screen image obtained in step 1 based on the comprehensive gradient strength. In this embodiment, when the comprehensive gradient strength is less than 0.1, the stroke color is drawn. When the comprehensive gradient strength is greater than or equal to 0.1, the screen image obtained in step 1 is drawn, thereby performing a mixed drawing effect on the screen image obtained in step 1 and the stroke style. The specific calculation process is: vec3 EColor = integrated gradient strength < 0.1; edgeColor: color.rgb; The specific steps in step 2 include: S21: Create an off-screen rendering texture to store the GPU rendering results; The core function of OffscreenRenderTexture is to store the GPU rendering results into a texture instead of outputting them directly to the screen.

[0037] Create a framebuffer object (FBO) and an off-screen render texture: 1.1 Create a frame buffer object in WebGL to buffer the real-time rendering results of the GPU.

[0038] constframebuffer=gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); 1.2 Creating an off-screen render texture in WebGL constrenderTargetTexture=gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, renderTargetTexture); 1.3 Allocate memory for the created off-screen rendering texture (the off-screen rendering texture format is RGBA format, and the size is the dynamically obtained screen horizontal resolution x the dynamically obtained screen vertical resolution); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, ScreenResolutionX ,ScreenResolutionY,0,gl.RGBA,gl.UNSIGNED_BYTE,null); 1.4 Attach the off-screen render texture to the FBO's color attachment; gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, renderTargetTexture, 0); 1. Bind FBO (subsequent rendering will be stored in renderTargetTexture); gl.bindFramebuffer(gl.FRAMEBUFFER,framebuffer); 2. In subsequent rendering, renderTargetTexture can be used as a normal texture; gl.activeTexture(gl.TEXTURE); gl.bindTexture(gl.TEXTURE_2D, renderTargetTexture); S22: Set the transparency of the off-screen rendering texture background color to 0 to ensure that the transparency of the output off-screen rendering texture is 0.0 in areas where no objects are rendered; renderTargetTexture.clearColor = new J3D.Color4(0, 0, 0, 0); S23: Create material M1, and use shader language to output the material base color as black and the transparency output as 1. It is not affected by light or environment, and ensures that the model rendered based on this material is ultimately output as black, i.e. (0.0, 0.0, 0.0, 1.0). Ensure that the output off-screen rendering texture is black in the area with rendered objects and the transparency is 1.0. finalColor =vec4(0.0, 0.0, 0.0, 1.0); S24: Monitor the selected state of objects in the scene in real time. If an object is detected to be in the selected state, assign the material M1 created in S23 to the selected object as the material of the selected object. renderTargetTexture.setMaterialForRendering(selectMeshes, M1); S25: Push the selected object obtained in S24 and rendered based on the M1 material to the rendering queue of the off-screen rendering texture, and generate a final off-screen rendering texture of the selected model with the selected object being black and the background color being transparent.

[0039] renderTargetTexture.renderList.push(selectMeshes); The specific steps in step 3 include: S31: Obtain real-time stroke width data, combine it with the 9 directions of the 3x3 convolution kernel, and generate the corresponding offset UV coordinates.

[0040] Get real-time stroke width data: Stroke width is an externally input real-time variable that indicates the thickness of the current stroke.

[0041] The 9 directions of the 3x3 convolution kernel are the 9 offset directions relative to the current screen pixel coordinates. These directions represent the relative positions of the 8 neighboring pixels around the current pixel (including the center pixel), specifically: [along the current pixel to the upper left: (-1.0, 1.0), along the current pixel to the upper direction: (0.0, 1.0), along the current pixel to the upper right: (1.0, 1.0), along the current pixel to the left: (-1.0, 0.0), current pixel: (0.0, 0.0), along the current pixel to the right: (1.0, 0.0), along the current pixel to the lower left: (-1.0, -1.0), along the current pixel to the lower direction: (0.0, -1.0), along the current pixel to the lower right: (1.0, -1.0); Calculate the offset of UV coordinates according to the direction. For each convolution kernel direction (dirX, dirY), the calculation formula for the offset UV coordinates is: convolution kernel direction dirX * stroke width, convolution kernel direction dirY * stroke width; Add the offset of the UV coordinate according to the direction to the original UV value, and limit the offset UV to the range of 0.0~1.0, and finally generate the corresponding offset UV coordinate.

[0042] / / Get the proportion of each pixel on UV according to the screen resolution: invSize = 1.0 / screen resolution; Calculate the UV offset based on the direction offset and stroke width, and obtain the proportion of each pixel on the UV based on the screen resolution. Convert the offset distance into a range of 0 to 1 and add it to the original UV to obtain the final offset UV value.

[0043] 1. Along the current pixel to the upper left: EdgeUV1 = clamp(uv + vec2(convolution kernel direction - 1.0 * stroke width, convolution kernel direction 1.0 * stroke width) * invSize, 0.0, 1.0); 2. Along the upward direction of the current pixel: EdgeUV2 = clamp(uv + vec2(convolution kernel direction 0.0 * stroke width, convolution kernel direction 1.0 * stroke width) * invSize, 0.0, 1.0); 3. Along the current pixel to the upper right: EdgeUV3 = clamp(uv + vec2(convolution kernel direction 1.0 * stroke width, convolution kernel direction 1.0 * stroke width) * invSize, 0.0, 1.0); 4. Along the current pixel to the left: EdgeUV4 = clamp(uv + vec2(convolution kernel direction -1.0 * stroke width, convolution kernel direction 0.0 * stroke width) * invSize, 0.0, 1.0); 5. Current pixel: EdgeUV5 = clamp(uv + vec2(convolution kernel direction 0.0 * stroke width, convolution kernel direction 0.0 * stroke width) * invSize, 0.0, 1.0); 6. Along the current pixel to the right: EdgeUV6 = clamp(uv + vec2(convolution kernel direction 1.0 * stroke width, convolution kernel direction 0.0 * stroke width) * invSize, 0.0, 1.0); 7. Along the current pixel to the lower left: EdgeUV7 = clamp(uv + vec2(convolution kernel direction - 1.0 * stroke width, convolution kernel direction - 1.0 * stroke width) * invSize, 0.0, 1.0); 8. Along the current pixel in the downward direction: EdgeUV8 = clamp(uv + vec2(convolution kernel direction 0.0 * stroke width, convolution kernel direction -1.0 * stroke width) * invSize, 0.0, 1.0); 9. Along the current pixel to the lower right direction: EdgeUV9 = clamp(uv + vec2(convolution kernel direction 1.0 * stroke width, convolution kernel direction -1.0 * stroke width) * invSize, 0.0, 1.0); S32: Obtain an off-screen rendering texture, and sample the off-screen rendering texture using the offset UV coordinates generated in S31 to obtain the transparency of the pixel points, thereby obtaining the texture stroke width; 1. Get the transparency of the off-screen rendering texture at the pixel along the upper left direction of the current pixel: texAlpha1 = texture(offscreen render texture, EdgeUV1).a; 2. Get the transparency of the off-screen rendering texture at the pixel in the upward direction along the current pixel: texAlpha2 = texture(offscreen render texture, EdgeUV2).a; 3. Get the transparency of the off-screen rendering texture at the pixel along the direction of the current pixel to the upper right: texAlpha3 = texture(offscreen render texture, EdgeUV3).a; 4. Get the transparency of the off-screen rendering texture at the pixel in the direction directly below the current pixel: texAlpha4 = texture(offscreen render texture, EdgeUV4).a; 5. The current pixel gets the transparency of the off-screen rendering texture at that pixel: texAlpha5 = texture(offscreen render texture, EdgeUV5).a; 6. Get the transparency of the off-screen rendering texture at the pixel to the right of the current pixel: texAlpha6 = texture(offscreen render texture, EdgeUV6).a; 7. Get the transparency of the off-screen rendering texture at the pixel along the direction to the lower left of the current pixel: texAlpha7 = texture(offscreen render texture, EdgeUV7).a; 8. Get the transparency of the off-screen rendering texture at the pixel in the direction directly below the current pixel: texAlpha8 = texture(offscreen render texture, EdgeUV8).a; 9. Get the transparency of the off-screen rendering texture at the pixel along the direction to the lower right of the current pixel: texAlpha9 = texture(offscreen render texture, EdgeUV9).a; The off-screen sampling texture is sampled according to the offset UV coordinates, because the offset UV coordinates are generated according to the stroke width. Because the off-screen sampling texture is sampled within the stroke width of the current pixel, the transparency of the rendered object in the off-screen sampling texture is 1.0, and the transparency of the other parts is 0.0. Therefore, when obtaining the transparency of the pixel point and performing the product with the horizontal convolution kernel and vertical convolution kernel of the sobel operator respectively, only the part with the rendered object and within the stroke width will have horizontal gradient and vertical gradient values. The horizontal gradient and vertical gradient values of the part without the rendered object are both 0, so the texture stroke width can be obtained.

[0044] 1. In the off-screen texture, the area where the object is rendered has Alpha = 1.0 (opaque).

[0045] 2. The area without rendered objects has Alpha = 0.0 (completely transparent).

[0046] 3. Sampling points within the stroke width will cover the transparent-opaque transition area at the edge of the object.

[0047] S33: Apply the horizontal convolution kernel of the Sobel operator and the pixel transparency obtained in S31 to calculate the product and accumulate the horizontal gradient; float Gx[9] = float[9](-1.0, 0.0, 1.0, -2.0, 0.0, 2.0, -1.0, 0.0, 1.0); / / Calculate the horizontal gradient Gx (detect vertical edges): floatedgeX=texAlpha1*-1.0+texAlpha2*0.0+texAlpha3*1.0+texAlpha4*-2.0+texAlpha5*0.0+texAlpha6*2.0+texAlpha7*-1.0+texAlpha8*0.0+texAlpha9*1.0; 1. Spatial variation of transparency: Inside the object: Alpha=1.0→Gx=Gy=0 for all sampling points (no gradient).

[0048] Outside the object: All sampling points Alpha=0.0→Gx=Gy=0 (no gradient).

[0049] Edge area: some sampling points have Alpha=1.0, some sampling points have Alpha=0.0→Gx / Gy is non-zero (significant gradient); Ambient occlusion calculation: The influence of ambient light is calculated by calculating the geometric occlusion relationship around the object. The basic idea is to estimate the ambient light attenuation based on the degree of occlusion around the shading point.

[0050] 2. Detect the horizontal gradient Gx according to the Sobel horizontal operator: detect the vertical Alpha mutation (left and right edges).

[0051] S34: Apply the vertical convolution kernel of the Sobel operator and the pixel transparency obtained in S31 to calculate the product and accumulate the vertical gradient; float Gy[9] = float[9](-1.0,-2.0,-1.0,0.0,0.0,0.0,1.0,2.0,1.0); / / Calculate vertical gradient Gx (detect vertical edges) floatedgeY=texAlpha1*-1.0+texAlpha2*-2.0+texAlpha3*-1.0+texAlpha4*0.0+texAlpha5*0.0+texAlpha6*0.0+texAlpha7*1.0+texAlpha8*2.0+texAlpha9*1.0; 1. Spatial variation of transparency: Inside the object: Alpha=1.0→Gx=Gy=0 for all sampling points (no gradient); Outside the object: all sampling points Alpha=0.0→Gx=Gy=0 (no gradient); Edge area: some sampling points have Alpha=1.0, some sampling points have Alpha=0.0→Gx / Gy is non-zero (significant gradient); Ambient occlusion calculation: The influence of ambient light is calculated by calculating the geometric occlusion relationship around the object. The basic idea is to estimate the ambient light attenuation based on the degree of occlusion around the shading point.

[0052] The most important thing in ambient occlusion calculation is to determine the ambient occlusion relationship of the scene. In complex microstructure scenes, since the scenes around the objects are continuous, the impact of the occluders on them has a certain relationship with the distance from the occluder to the point. The closer the occluder is to the object, the greater its occlusion weight on the object. Due to the distance, the occlusion ability of distant objects is not as good as that of nearby occluders, and they account for a very small proportion when calculating the occlusion relationship. Therefore, as the maximum distance of the points for calculating ambient occlusion sampling decreases, the quality of the calculated ambient occlusion is only slightly reduced. In scenes with objects with high levels of detail, most of the ambient occlusion is caused by occluders close to the objects, and the ambient occlusion relationship of the scene can be approximated by close occluders.

[0053] The ambient occlusion calculation of a point P in the scene is as follows: , Where Ω is the unit hemisphere centered on the normal direction n at the point P being sought; V is the visibility function of the light on the hemisphere. If it is 1, it means that the direction is completely visible, and if it is 0, it means that the direction is completely blocked; ω is the light direction, which is a straight line representing the direction of light propagation. The line represents the path, and the arrow represents the direction. If it represents the actual light, draw a solid line. If it represents the reverse extension line and the light passing through the mirror, draw a dotted line.

[0054] For each pixel P in the depth texture, take the N directions around it, iterate along the direction to get the value, index nstep points according to the step size dstep, and calculate the occlusion angle arcsinΔzl of point A relative to point P obtained in each iteration, where Δz represents the difference in z coordinates between points A and z; l represents the distance between the two points; thus, the maximum occlusion angle in this direction is obtained. , use the same method to get the maximum occlusion angle in the reverse direction of the direction , so the visibility function of the light shading degree of point P on this semicircular surface is: , By calculating the average of the occlusion degrees obtained in N directions, the occlusion degree of point P can be approximately obtained.

[0055] Assuming that the occlusion of the ambient light receiving point P comes from the continuous obstructions around it, its occlusion relationship A(ψ, Ω) can be obtained by the ratio of the area of the unobstructed part ψ of the hemisphere near the point to the area of the entire hemisphere Ω around it, as shown in the following formula: , , Where: ΔP is a constant used to correct the calculated occlusion relationship value; and are the maximum occlusion angles in the positive and negative directions respectively; r is the radius of the hemisphere, the unit sphere is taken as 1, and ψ is the area of the unobstructed part; In the actual rendering process, the occlusion relationship of visible points in the scene is important. The occlusion relationship of visible points in the scene is largely due to close-range occluders, that is, objects visible from the same viewpoint. Therefore, the ambient light occlusion relationship of the entire scene can be approximated as the impact caused by the occluders seen by the viewpoint.

[0056] The depth value texture in the scene can be quickly obtained in the visual space, and this texture corresponds to the point in the world coordinate system. Through this texture, the depth information of the points around a certain point can be quickly obtained, and the occlusion relationship of the surrounding points to the point can be further calculated.

[0057] The scene's depth texture is created by projecting three-dimensional points into two-dimensional space. Points that are close in world coordinates have corresponding points in the depth texture that are also close. Therefore, points surrounding that point in the depth texture can be used as closer occluders, reducing texture storage space and improving rendering efficiency. Furthermore, since the occlusion relationship is approximated as being caused by nearby occluders, the distances between these occluders are essentially the same, and the relationship between the occlusion relationship caused by these occluders and their distances can be ignored. In other words, only the occluded direction of the point needs to be considered.

[0058] A point in a scene can only be occluded by objects that are relatively taller than it. Therefore, the occlusion relationship for that point can be approximated as the occlusion relationship on the inverse hemisphere in the direction of the line of sight: that is, the ratio of the unobstructed area on that hemisphere. We can then calculate the unobstructed angle on each slice of the hemisphere and find its ratio to the angle of the entire slice. By summing up the angle ratios of all slices, we can obtain the desired area ratio.

[0059] The following steps are used to calculate the occlusion relationship: 1) Draw the scene under the viewpoint, get the depth value and store it in the depth texture.

[0060] 2) For each pixel P in the depth texture, take N directions around it, iterate along the direction and index nstep points according to the step size dstep, and calculate the occlusion angle arcsinΔzl of point A relative to point P obtained in each iteration, where Δz represents the difference in z coordinates between points A and z; l represents the distance between the two points; thus, the maximum occlusion angle in that direction is obtained. , use the same method to get the maximum occlusion angle in the reverse direction of the direction , so the visibility function of the degree of occlusion of point P on this semicircular surface is: , By calculating the average of the occlusion degrees obtained in N directions, we can approximate the occlusion degree of point P, and thus obtain the ambient occlusion value of the point: , Among them, L represents the illumination information received by point P. It is assumed here that L can be effectively obtained from a point light source or an environment map. The illumination information is the luminous flux per unit area. B represents the bidirectional reflectance distribution function of point P. The bidirectional reflectance distribution function is a function used to describe the proportional relationship between the reflected light and the incident light of the reflective surface. Suppose there is an opaque, non-luminous surface.

[0061] According to Wikipedia, some representative illumination values for everyday environment maps are: The bidirectional reflectance distribution function is defined as: , in: is the bidirectional reflectance distribution function, is the incident light direction, is the viewing direction, is the brightness of the reflected light in the viewing direction; is the component of light received by the facet in the direction of the incident light; The calculation of ambient occlusion is related to the number of sampling directions N and the visibility function V(ω). The selection of these two parameters directly affects the rendering effect and efficiency. First, consider the number of sampling directions N. Because the area of the occluding hemisphere is approximated by the angle calculation of a spherical section, the number of sampling directions directly affects the accuracy of the result. However, as the number of sampling directions increases, the number of sampling points required for calculation also increases, resulting in a decrease in rendering frame rate. Choosing the appropriate number of sampling directions has a significant impact on the final rendering effect.

[0062] V(ω) is related to the maximum angle in the sampling direction, and the calculation of the angle is related to the sampling step size and the number of sampling points. The sampling step size affects the sampling accuracy. The smaller the sampling step size, the more compact the points in the direction are selected, and the higher the accuracy of the obtained angle. Similarly, the number of sampling points also affects the sampling accuracy. The larger the number of sampling points, the greater the sampling distance, and the more likely the actual maximum angle in that direction will be calculated at the sampling points. However, increasing the number of samples in each direction will increase the actual amount of calculation, resulting in a decrease in the rendering frame rate. Therefore, to achieve the ideal rendering effect, it is necessary to select an appropriate sampling step size and sampling distance.

[0063] It has certain efficiency advantages in determining occlusion relationships, enabling better rendering efficiency for complex scenes while ensuring a certain level of rendering quality. The algorithm is screen-space based and primarily used to approximate ambient occlusion relationships. Its rendering accuracy lags behind that of strictly physically based algorithms, especially when depth texture resolution is low. Aliasing can still occur in the rendering results, but this is also an inherent issue with image-based algorithms.

[0064] 2. Detect the horizontal gradient Gy based on the Sobel vertical operator: detect the Alpha mutation in the horizontal direction (upper and lower edges).

[0065] S35: Calculate the comprehensive gradient intensity based on the horizontal gradient calculated in S33 and the vertical gradient calculated in S34. The comprehensive intensity calculation formula is: 1.0-the absolute value of the accumulated horizontal gradient-the absolute value of the accumulated vertical gradient.

[0066] float edge = 1.0 - abs(edgeX) - abs(edgeY).

[0067] 4.2 The smaller the integrated gradient, the closer it is to the edge of the rendered texture. The intensity of the integrated gradient determines whether the rendered color is the stroke color or the screen image obtained in step 1. In this embodiment, when the integrated gradient intensity is less than 0.1, the stroke color is drawn, thereby drawing the edge of the rendered texture as the stroke color; when the integrated gradient intensity is greater than or equal to 0.1, the screen image obtained in step 1 is drawn, thereby performing a mixed drawing effect on the screen image obtained in step 1 and the stroke style. The specific calculation process is: vec3 EColor = integrated gradient strength < 0.1; edgeColor: color.rgb; The closer the pixel is to the edge, the smaller the integrated gradient value is, resulting in a non-zero stroke width, and the integrated gradient strength in the non-edge area is 1.0.

[0068] The final effect: a stroke is generated at a certain width (stroke width) of the object outline.

[0069] The above description is merely a preferred embodiment of the present invention and does not limit the present invention in any other form. Any technician familiar with the present invention may use the technical content disclosed above to change or modify it into an equivalent embodiment with equivalent changes for application in other fields. However, any simple modification, equivalent change and modification made to the above embodiment based on the technical essence of the present invention without departing from the content of the technical solution of the present invention shall still fall within the scope of protection of the technical solution of the present invention.

Claims

1. A method for realizing prominent rendering and enhancement of a three-dimensional model based on off-screen rendering, characterized in that: Here are the steps: Step 1: 3D scene module: Based on the real scene, a virtual scene is restored in a 1:1 ratio in the 3D engine to obtain the screen image and the screen image texture sampling coordinates UV; Step 2: Off-screen rendering texture generation module: Create an off-screen rendering texture and render the selected model object onto the off-screen rendering texture with the specified material; Step 3: Edge detection module: Based on the acquired real-time stroke width data and the screen image texture sampling coordinates UV obtained in step 1, convolution sampling is performed on the off-screen rendered texture to obtain the texture stroke width; then, based on the Sobel algorithm combined with the texture stroke width, the horizontal and vertical edge information of the off-screen rendered texture is detected, the gradients in the two directions are obtained, and the comprehensive gradient strength of the off-screen rendered texture is calculated; Step 4: Post-processing real-time rendering and drawing module: obtain the color and brightness of the stroke in real time, perform quadrature calculation, obtain the color style of the stroke, and perform mixed drawing of the screen image and stroke style obtained in step 1 based on the comprehensive gradient intensity obtained in step 3, thereby achieving highly accurate and flexible 3D model highlight rendering and enhancement effects.

2. The method for realizing prominent rendering and enhancement of a three-dimensional model based on off-screen rendering according to claim 1, characterized in that: The specific steps in step 2 include: S21: Create an off-screen rendering texture to store the GPU rendering result as a texture; S22: Set the transparency of the off-screen rendering texture background color to 0; S23: Create material M1, and use the shader language to output the material's base color as black and its transparency as 1. This ensures that the model rendered based on this material is ultimately output as black, i.e. (0.0, 0.0, 0.0, 0.0). S24: assign the material M1 created in S23 to the selected model as a new model material; S25: Push the model rendered based on the M1 material obtained in S24 to the rendering queue of the off-screen rendering texture, and generate the final off-screen rendering texture of the selected model with the selected object being black and the background color being transparent.

3. The method for realizing prominent rendering and enhancement of a three-dimensional model based on off-screen rendering according to claim 1, characterized in that: The specific steps in step 3 include: S31: Obtain real-time stroke width data, combine it with the 9 positions of the 3x3 convolution kernel, and generate the corresponding offset UV coordinates; S32: Obtain an off-screen rendering texture, and sample the off-screen rendering texture using the offset UV coordinates generated in S31 to obtain the transparency of the pixel points, thereby obtaining the texture stroke width; S33: Apply the horizontal convolution kernel of the Sobel operator and the pixel transparency obtained in S31 to calculate the product and accumulate the horizontal gradient; S34: Apply the vertical convolution kernel of the Sobel operator and the pixel transparency obtained in S31 to calculate the product and accumulate the vertical gradient; S35: Calculate the comprehensive gradient intensity based on the horizontal gradient calculated in S33 and the vertical gradient calculated in S34. The comprehensive intensity calculation formula is: 1.0-the absolute value of the accumulated horizontal gradient-the absolute value of the accumulated vertical gradient.

4. The method for realizing prominent rendering and enhancement of a three-dimensional model based on off-screen rendering according to claim 1, characterized in that: The screen image texture sampling coordinates UV are used to locate the pixel position and obtain the width and height of the screen rendering canvas in real time. Regardless of how the screen resolution changes, UV is always in the range of [0, 1]. The entire screen viewport is normalized to a unit plane. The horizontal direction is the U axis, and the U value is the range from 0~1920 to 0.0 to 1.

0. The vertical direction is the V axis, and the V value is the range from 0~1080 to 0.0 to 1.

0. The screen viewport resolution will be dynamically obtained according to the actual viewport size, and the screen viewport will be dynamically normalized to a unit plane.

5. The method for realizing prominent rendering and enhancement of a three-dimensional model based on off-screen rendering according to claim 2, characterized in that: The steps to create an off-screen render texture include: 1.1 Create a frame buffer object in WebGL to buffer the real-time rendering results of the GPU; 1.2 Creating off-screen render textures in WebGL; 1.3 Allocate memory for the created off-screen rendering texture; 1.4 Attach the offscreen render texture to the FBO's color attachment.

Images