A light and shadow rendering method and device based on 2D image

Abstract

The present application belongs to the field of computer technology, and discloses a method and device for rendering light and shadow based on 2D images, the method comprising: obtaining 2D game image resources, screening out 2D images whose image type is a preset rendering type; extracting the pixel transparency of each pixel point in the 2D image; changing the pixel value of the pixel point whose pixel transparency is equal to the preset standard value to the preset pixel value; calculating the image transparency of the 2D image; performing Gaussian blur on the 2D image based on the image transparency to obtain a blurred image; performing staggered transformation on the blurred image based on the illumination angle to obtain a shadow image; rendering the shadow image to a layer below the layer where the 2D image is located. The present application can make the game scene have the visual effect of 3D rendering while retaining the advantages of small calculation amount and high operation efficiency of 2D rendering.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a light and shadow rendering method and device based on 2D images. Background Art

[0002] Graphics rendering is an important part of game development. Currently, many game scenes are produced using 2D graphics rendering. 2D rendering does not involve complex 3D geometric transformations and perspective projections, so the amount of calculation is relatively small. In addition, since 2D rendering usually uses fewer polygons and textures, this reduces the demand for memory and storage space, making it efficient and requiring less hardware platforms. At the same operating efficiency, the scene can be more refined than 3D rendering.

[0003] However, compared to 3D rendered game scenes, the player perspective of 2D games is fixed. In the current 2D graphics rendering process, there is an extreme lack of design for the lighting and shadows of each graphic in the game scene. Summary of the invention

[0004] The present application provides a light and shadow rendering method and device based on 2D images, which can make the game scene have the visual effect of 3D rendering while retaining the advantages of 2D rendering such as small calculation amount and high operation efficiency.

[0005] In a first aspect, an embodiment of the present application provides a light and shadow rendering method based on a 2D image, comprising:

[0006] Get 2D game image resources, and filter out 2D images whose image type is a preset rendering type;

[0007] Extract the pixel transparency of each pixel in the 2D image;

[0008] Change the pixel value of a pixel point whose pixel transparency is equal to a preset standard value to a preset pixel value;

[0009] Calculate image transparency of 2D images;

[0010] Gaussian blur is performed on the 2D image based on the image transparency to obtain a blurred image;

[0011] Perform shear transformation on the blurred image based on the illumination angle to obtain a shadow image;

[0012] Render the shadow image to a layer below the 2D image layer.

[0013] Furthermore, data storage formats of 2D images include png and jpg.

[0014] Furthermore, the preset standard value is 1; the preset pixel value is greater than or equal to 200 and less than or equal to 255.

[0015] Furthermore, the pixel value of the pixel point includes a red channel value, a green channel value, and a blue channel value.

[0016] Furthermore, the above-mentioned Gaussian blurring of the 2D image based on the image transparency to obtain a blurred image includes:

[0017] Calculation step: Calculate the standard deviation of the pixel values ​​of each pixel point within a preset pixel range of the target pixel point;

[0018] Input the standard deviation into the probability density function of the Gaussian distribution to obtain the Gaussian weight;

[0019] Multiply the Gaussian weight by the image transparency to get the target pixel value;

[0020] Change the pixel value of the target pixel point to the target pixel value;

[0021] The next pixel of the target pixel is taken as the target pixel and the calculation step is returned.

[0022] Furthermore, the preset pixel range is 5×5 pixels centered on the target pixel.

[0023] Furthermore, the above-mentioned shearing transformation of the blurred image based on the illumination angle to obtain the shadow image includes:

[0024] The tangent value of the illumination angle is used as the shear factor;

[0025] Multiply the vertical coordinate of the pixel point by the shear factor to obtain the shear change;

[0026] The sum of the horizontal coordinate of the pixel point and the shear variation is taken as the horizontal coordinate of the pixel point.

[0027] Furthermore, the above-mentioned shearing transformation of the blurred image based on the illumination angle to obtain the shadow image includes:

[0028] The tangent value of the illumination angle is used as the shear factor;

[0029] Multiply the horizontal coordinate of the pixel point by the shear factor to obtain the shear change;

[0030] The sum of the vertical coordinate of the pixel point and the shear variation is taken as the vertical coordinate of the pixel point.

[0031] Furthermore, the method further comprises:

[0032] Input the system time into the shading file to obtain the lighting shading parameters corresponding to the system time;

[0033] Renders each pixel of a 2D image based on lighting shading parameters.

[0034] Furthermore, the method further comprises:

[0035] In response to the creation instruction, obtaining model normal and material information corresponding to the 3D model;

[0036] Add model normals and material information to the shading file;

[0037] Get different system times and corresponding lighting shading parameters, and add shading files.

[0038] Furthermore, the method further comprises:

[0039] Before performing the shear transformation, the light source coordinates are obtained according to the system time;

[0040] The illumination angle is calculated based on the center coordinates of the 2D image and the light source coordinates.

[0041] Furthermore, the method further comprises:

[0042] Get different preset shading weathers and corresponding weather shading parameters, and add shading files.

[0043] Furthermore, the method further comprises:

[0044] Get the current weather data and determine whether the current weather data belongs to the preset colored weather;

[0045] If yes, then the current weather data is input into the shading file to obtain the corresponding weather shading parameters;

[0046] Generate current shading parameters according to lighting shading parameters and weather shading parameters;

[0047] Renders each pixel of a 2D image based on the current shading parameters.

[0048] Furthermore, the method further comprises:

[0049] When it is detected that the master image overlaps with the 2D image, obtaining the attribute of the 2D image;

[0050] Determine whether the attribute of the 2D image is a preset occlusion attribute;

[0051] If so, set the master image as a layer between the 2D image and the shadow image.

[0052] In a second aspect, an embodiment of the present application provides a light and shadow rendering device based on a 2D image, comprising:

[0053] A screening module is used to obtain 2D game image resources and screen out 2D images whose image types are preset rendering types;

[0054] An acquisition module is used to extract the pixel transparency of each pixel in the 2D image;

[0055] A judgment module, used for changing the pixel value of a pixel point whose pixel transparency is equal to a preset standard value to a preset pixel value;

[0056] Image transparency module, used to calculate the image transparency of 2D images;

[0057] A blur module is used to perform Gaussian blur on a 2D image based on image transparency to obtain a shadow image;

[0058] A shearing module is used to perform a shearing transformation on the blurred image based on the illumination angle to obtain a shadow image;

[0059] The rendering module is used to render the shadow image to a layer below the layer where the 2D image is located.

[0060] Furthermore, the device also includes a lighting module, which is used to input the system time into the shading file to obtain the lighting shading parameters corresponding to the system time; the rendering module is also used to render each pixel of the 2D image based on the lighting shading parameters.

[0061] Furthermore, the device also includes:

[0062] A model normal module, for obtaining model normal and material information corresponding to the 3D model in response to a creation instruction;

[0063] The file generation module is used to add the model normal and material information to the shading file; and obtain different system times and corresponding lighting shading parameters and add them to the shading file.

[0064] Furthermore, the device also includes:

[0065] The light source module is used to obtain the light source coordinates according to the system time before performing the shear transformation;

[0066] Angle module, used to calculate the lighting angle based on the center coordinates of the 2D image and the light source coordinates.

[0067] In a third aspect, an embodiment of the present application provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the processor performs the steps of a light and shadow rendering method based on 2D images as in any of the above embodiments.

[0068] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the steps of a light and shadow rendering method based on a 2D image as in any of the above embodiments are implemented.

[0069] In summary, compared with the prior art, the technical solution provided in the embodiment of the present application has at least the following beneficial effects:

[0070] The embodiment of the present application provides a method for rendering light and shadow based on a 2D image, which generates a shadow image of the 2D image under the lighting angle based on the image transparency of the 2D image and the pixel transparency of each pixel point, and renders it into the shadow of the 2D image. The above method can realize the rendering of light and shadow of the 2D image in a 2D game scene with a fixed player perspective, so that the game scene has the visual effect of 3D rendering while retaining the advantages of 2D rendering such as small calculation amount and high operation efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0071] Figure 1 A flowchart of a light and shadow rendering method based on a 2D image is provided for an exemplary embodiment of the present application.

[0072] Figure 2 A flowchart of the Gaussian blur step is provided for an exemplary embodiment of the present application.

[0073] Figure 3 A flow chart of horizontal shearing steps is provided for an exemplary embodiment of the present application.

[0074] Figure 4 A flow chart of a vertical shearing method provided for an exemplary embodiment of the present application.

[0075] Figure 5 A flowchart of lighting rendering steps is provided for an exemplary embodiment of the present application.

[0076] Figure 6 A structural diagram of the steps of generating a shading file provided for an exemplary embodiment of the present application.

[0077] Figure 7 A flowchart of weather rendering steps is provided for an exemplary embodiment of the present application.

[0078] Figure 8 A structural diagram of a light and shadow rendering device based on 2D images is provided as an exemplary embodiment of the present application.

[0079] Fig. 9 A structural diagram of the fuzzy module 105 provided for an exemplary embodiment of the present application. DETAILED DESCRIPTION

[0080] The technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all of the embodiments.

[0081] Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making any creative work shall fall within the scope of protection of this application.

[0082] Terminology explanation:

[0083] 1) Transparency: usually refers to the opacity or visibility of each pixel in the image. In digital images, transparency is a numerical value used to indicate the degree of visibility of the pixel when displayed. Transparency values ​​are usually between 0 and 1, or expressed as 0% to 100%, where: 0 or 0% means completely transparent, that is, the pixel is completely invisible, allowing the background or the pixels below to show through. 1 or 100% means completely opaque, that is, the pixel is completely visible, covering all the pixels below.

[0084] Transparency, also known as the Alpha channel, is an additional channel in the image color model. The traditional RGB color model includes three channels: red, green, and blue. The value of each channel determines the intensity of the color. The RGBA model adds an Alpha channel to RGB to indicate transparency.

[0085] In image editing and processing, transparency is an important property that allows designers and developers to create images with transparent backgrounds that can be placed on different backgrounds without showing unnatural edges. Transparency has a wide range of applications in fields such as web design, animation, game development, and video production. For example, in web design, using images with transparency can create richer visual effects, such as buttons, icons, or background images that can blend seamlessly with the rest of the web page. In animation and video production, transparency can be used to achieve complex overlay and blending effects.

[0086] 2) GPU (Graphics Processing Unit) is an electronic device specially designed for processing graphics and image calculations. It was originally designed to accelerate the rendering of graphics, especially in 3D graphics and video games, but with the development of technology, the application of GPU has far exceeded the scope of graphics rendering.

[0087] The main features of GPU include: GPU has a large number of parallel processing cores and can handle multiple computing tasks at the same time, which makes it very efficient in processing graphics rendering and parallel computing tasks; GPU was originally designed to accelerate graphics rendering, and it can quickly perform graphics-related calculations such as transformation, lighting, and texture mapping; modern GPU has a high-performance floating-point unit that can quickly perform floating-point operations, which is very important for fields such as scientific computing and engineering simulation; GPU contains dedicated hardware accelerators such as texture units and geometry engines, which provide additional optimization for graphics processing; Compared with CPU, GPU is generally more energy efficient when performing parallel computing tasks; GPU programming models, such as CUDA (Compute Unified Device Architecture, developed by NVIDIA) and OpenCL (Open Computing Language), allow developers to write programs that can be executed on GPU; GPU has a high-bandwidth memory system, which is essential for processing large amounts of data and quickly accessing texture information. The application areas of GPU include video games, scientific computing, machine learning, graphic design and video editing, computational finance, virtual reality and augmented reality.

[0088] 3) Layers: In game development, layers are a mechanism for organizing and rendering game elements. Layers are used to display different game objects and visual effects in layers according to specific orders and rules. Through layers, developers can control the visual order of different objects. Objects with higher layer numbers are displayed on top of objects with lower numbers. The rendering order determines the order in which game elements are drawn. Typically, layers are rendered from back to front, that is, the background layer is rendered first, then the middle layer, and finally the foreground layer. Layers make it easier to organize and manage a large number of game objects. Developers can assign objects to different layers based on their function or role in the scene. Special effects and filters such as blur, color adjustment, lighting effects, etc. can be applied to the entire layer without having to operate on each object individually. In many game engines, the camera can be set to only render objects in a specific layer, which can optimize rendering performance and create specific visual effects. By using layers properly, rendering efficiency can be improved. For example, placing objects that do not change frequently on a separate layer can reduce unnecessary redrawing. When building game scenes, layers can help developers create complex scene structures while keeping the scenes clear and manageable. User interface (UI) elements are often placed on separate layers to ensure that they always appear above the game world. In some games, the properties of layers (such as visibility, transparency) can be dynamically adjusted according to the game logic to achieve special visual effects or game mechanics. The layer system is an important tool in game design, which provides a flexible way to control the visual appearance and performance of the game. Different game engines may have different implementations and functions, but the core concept of layers is similar in most game development.

[0089] 4) 2D Games: 2D games are video games that focus on two-dimensional visual and gameplay elements. The game world and characters are two-dimensional, with no depth information, like a drawing on a piece of paper. Players usually view the game from a fixed perspective, such as a side-scrolling, top-down, or isometric projection. Characters and objects move on a two-dimensional plane, with no displacement on the Z axis (depth). 2D games can adopt a variety of art styles, from retro pixel art to modern hand-drawn styles, or even pseudo-3D styles that simulate 3D effects. 2D games tend to focus on level design, with each level having its own unique layout and challenges. The gameplay mechanics of 2D games are usually designed around platform jumping, puzzle solving, shooting, fighting, etc. The user interface (UI) elements of 2D games, such as life bars, scores, power-ups, etc., are usually also two-dimensional and match the visual style of the game world. Compared with 3D games, 2D games are usually less expensive and complex to develop, and have lower hardware requirements, which allows them to run on a variety of platforms, including mobile devices, personal computers, and game consoles.

[0090] See also Figure 1 , the embodiment of the present application provides a light and shadow rendering method based on a 2D image, which may specifically include:

[0091] Step S11, obtaining 2D game image resources, and filtering out 2D images whose image type is a preset rendering type.

[0092] Among them, 2D game image resources include background images (such as the sky, mountains), interactive object images (such as treasure chests, weapons, keys), environment images (including trees, rocks, buildings), special effect images (magic effects, explosions, flames, smoke and other visual effects), etc. Image type is the content tag of each image during the production process of 2D game images, for example, the image type of the flame image is "special effect", the image type of the tree image is "environment", etc.

[0093] Specifically, in a 2D game scene, since different images represent different contents, the requirements for light and shadow rendering are also different. For example, images of buildings, trees, characters, etc., which are entities in the game, will produce shadows due to the light source, while images of special effects, status (poisoning, vulnerability), etc. will not produce shadows; therefore, this application uses a preset rendering type to screen out 2D images that will produce shadows due to lighting for light and shadow rendering.

[0094] Preset render types can include Object, Environment, and People.

[0095] Step S12: extracting the pixel transparency of each pixel in the 2D image.

[0096] Specifically, the 2D image in step S11 is a copy of the original 2D image.

[0097] Step S13, changing the pixel value of the pixel point whose pixel transparency is equal to the preset standard value to the preset pixel value;

[0098] Among them, the preset standard value is a transparency threshold used to control which 2D images can produce shadows. By setting the preset standard value, some 2D images in the game scene that cannot produce shadows, such as special effect images, can be screened out.

[0099] Step S14, calculating the image transparency of the 2D image.

[0100] Specifically, in the process of image generation and production, each pixel has a corresponding pixel alpha value. Pixels of different colors form a 2D image. During the game development process, developers can use the engine to reassign the overall color change to the entire 2D image, that is, the 2D image also has an overall image alpha value.

[0101] Obtaining the transparency (alpha channel) of individual pixels in an image or the entire image can be achieved in a variety of ways: 1) Programming language: Through programming languages ​​such as Python (using the Pillow library), JavaScript (using the Canvas API), etc., you can read and modify the transparency of an image. 2) Image processing library: Many programming languages ​​have image processing libraries that provide functions for reading and modifying image transparency. For example: Python's Pillow library, Java's BufferedImage class, graphics APIs such as OpenGL, DirectX, etc. allow reading and setting the transparency of pixels during rendering.

[0102] Step S15, performing Gaussian blur on the 2D image based on the image transparency to obtain a blurred image.

[0103] Specifically, the present application incorporates image transparency as a weight, establishes a convolution kernel as edge detection and blurring, and makes the edges of the 2D image blurred and feathered, thereby achieving approximate shadow edge simulation.

[0104] Furthermore, in addition to the Gaussian blur processing method, custom shaders, percentage proximity filtering, screen space ambient occlusion and other technologies can also be used to achieve the production and generation of shadow graphics.

[0105] Among them, percentage close filtering refers to a technique for applying blur effects based on relative thresholds of pixel values. First, determine a percentage threshold that defines which pixels will be blurred, such as selecting pixels in the image whose brightness values ​​are within 20% above and below the average brightness for blurring. Then traverse each pixel of the image to check whether the pixel value is within the percentage threshold range. If so, these pixels will be selected as targets for blurring. Apply a blur algorithm to the selected pixels, such as mean blur, median blur, etc. The blur algorithm will affect the color value of the pixel and its surrounding pixels, thereby producing a blur effect. Blend the blurred pixels with the original image to create a smooth transition effect. Finally, output a blurred and feathered image.

[0106] Screen Space Ambient Occlusion (SSAO) is a commonly used technique in 3D graphics rendering to simulate the occlusion effect of ambient light on the surface of an object, thereby enhancing the depth and realism of the scene. Although SSAO is mainly used for 3D rendering, its principles and effects can be borrowed from the blur feathering processing of 2D images: First, edge detection is performed on the 2D image through the Sobel operator or the Canny operator to identify significant edges in the image. Near the edge, the depth of each pixel relative to the observer is estimated by analyzing the direction and intensity of the edge. Then, the ambient occlusion factor is calculated based on the depth of the pixels and their position relative to the surrounding pixels. The selected area of ​​the image is blurred using a blur algorithm. The intensity of the blur can be controlled by the ambient occlusion factor, with lower blur near the edge and areas with large depth changes, and higher blur away from the edge. Smooth transitions are created between edge and non-edge areas by adjusting the transparency of the blurred area or using a feathering algorithm. The blurred image is blended with the original image to retain the details of the image while increasing the sense of depth. Finally, a blurred image processed with the concept of screen space ambient light is output.

[0107] Step S16, performing a shear transformation on the blurred image based on the illumination angle to obtain a shadow image.

[0108] The illumination angle can be a preset illumination angle or can be randomly generated by an algorithm; when the illumination angle is a preset illumination angle, the corresponding light source is also fixed, for example, fixed to the right, and in the game, the light is emitted from right to left to different buildings. At this time, the illumination angle is preset to 25°. If the illumination angle is generated by an algorithm, the amount of calculation will increase, and it is generally used in PC game development.

[0109] Shearing transform, also known as displacement transform or skew transform, is a geometric transformation that changes the shape of an image by moving each row or column of the image in a certain direction without changing the size of the image.

[0110] In practical applications, shearing is often used to simulate perspective effects, for example, making distant objects appear smaller when the viewer's position changes. In animation and visual effects, shearing can be used to simulate the movement of objects, such as tilting or rotating.

[0111] The present application adopts shear transformation to transform the blurred image, thereby achieving the simulation of the light source direction.

[0112] Step S17, rendering the shadow image to a layer below the layer where the 2D image is located.

[0113] Specifically, during rendering, it is also necessary to ensure that the bottom edge of the shadow image is aligned with the bottom edge of the 2D image.

[0114] The above embodiment provides a method for rendering light and shadow based on a 2D image, which generates a shadow image of the 2D image under the lighting angle based on the image transparency of the 2D image and the pixel transparency of each pixel point, and renders it into the shadow of the 2D image. The above method can realize the rendering of light and shadow of the 2D image in a 2D game scene with a fixed player perspective, thereby making the game scene have the visual effect of 3D rendering while retaining the advantages of 2D rendering such as small calculation amount and high operation efficiency.

[0115] In some embodiments, the data storage formats of the 2D images include png and jpg.

[0116] Specifically, the data storage formats of 2D images also include BMP, TIFF, PSD, RAW, etc., but BMP files are usually large, uncompressed, and do not support transparency or animation; TIFF files are also large and not suitable for network transmission; PSD files are large and are mainly used for editing rather than final image storage; RAW files are very large and require specific software to process.

[0117] Therefore, in order to ensure that the advantages of 2D rendering, such as low storage pressure and high operating efficiency, are retained while achieving light and shadow rendering, this application specifically selects png and jpg formats to store the 2D images to be rendered.

[0118] The PNG format uses a lossless compression algorithm, which means that the image does not lose any quality during the compression process; and the PNG format supports transparency (Alpha channel), which can create images with transparent backgrounds. Almost all web browsers, image editing software, and operating systems support the PNG format. In addition, due to its lossless compression characteristics, PNG is very suitable for web images that require high fidelity, such as icons, logos, and web page elements. PNG also supports grayscale images and multiple color depths, including 24-bit true color and 48-bit high-resolution images. Although the JPG format uses lossy compression technology, this can significantly reduce the file size and is suitable for scenes that need to store a large number of images; for example, it is very suitable for storing photos of natural scenes with rich colors and details. Almost all image viewers and editing software support the JPG format and have very good compatibility; due to the small file size, JPG images load faster on web pages, which helps improve web page performance.

[0119] In some embodiments, the preset standard value is 1; the preset pixel value is greater than or equal to 200 and less than or equal to 255.

[0120] Specifically, in 2D games, not all pixels in a 2D image will cast shadows due to lighting; taking a key image as an example, a circle of status effects is usually set around the key body. Different colors of the effects indicate the rarity of the key, and this status effect is included in the key image. When rendering light and shadow, only the key body needs to be rendered, and there is no need to render the status effects. At this time, it is necessary to screen based on the transparency of the pixels.

[0121] This application sets the preset standard value to 1. A transparency of 1 means that the pixel is completely opaque, that is, it will completely cover all other pixels below it without any transparency effect, so the pixel is completely visible. In image synthesis or image editing, a pixel with a transparency of 1 will completely cover the underlying pixels without any blending effect. Therefore, when the preset standard value is set to 1, it can not only avoid the partial rendering of pixels that do not need to be rendered, but also ensure the display effect of the rendered shadow image, and the shadow image will not penetrate the original 2D image.

[0122] Secondly, in a 2D game scene, assuming that the light source is directly above, the distance between the entity represented by the 2D image and the light source determines the depth of its shadow. If the blurred images of different 2D images are set to the same pixel value, the difference in distance from the light source cannot be reflected, the game screen is stiff, and it is difficult for players to immerse themselves in the game.

[0123] Therefore, the preset pixel value adjustment range of the present application is 200-255. By limiting the pixel value of the shadow to between 200-255, it is possible to avoid using lighter pixel values, increase the contrast of the image, and make the shadow appear more obvious. Moreover, avoiding the use of low pixel values ​​in the shadow area can retain more details. When performing image synthesis, using the preset pixel value range of 200-255 can more easily blend with the background and create a more natural effect.

[0124] In some embodiments, the pixel value of a pixel point includes a red channel value, a green channel value, and a blue channel value.

[0125] ARGB color mode is a color mode that adds an Alpha (transparency) channel to the RGB color mode. R (Red) stands for red, and the red channel is used to store the red information in the image. G (Green) stands for green, and the green channel is used to store the green information in the image. B (Blue) stands for blue. The blue channel is used to store the blue information in the image.

[0126] If you only select the values ​​of 1-2 channels for setting, when the values ​​of the unadjusted channels are large, the color of the pixel point will not reach the color corresponding to the preset pixel value, resulting in a poor shadow effect.

[0127] Therefore, the present application simultaneously adjusts the red channel, green channel and blue channel in the pixel value, that is, adjusts the RGB channels of the image, which can correct the color deviation of the image and ensure the accuracy and consistency of the color.

[0128] See also Figure 2 In some embodiments, the Gaussian blurring of the 2D image based on the image transparency to obtain the blurred image may specifically include the following steps:

[0129] Step S151, calculation step: calculating the standard deviation of the pixel values ​​of each pixel point within a preset pixel range of the target pixel point.

[0130] Step S152, input the standard deviation into the probability density function of the Gaussian distribution to obtain the Gaussian weight.

[0131] Among them, the probability density function of Gaussian distribution is:

[0132]

[0133] Where μ is the mean of the pixel values ​​of each pixel, but in Gaussian blur, it is usually assumed that these means are zero (that is, the center of the Gaussian function is at the origin of the coordinate system); σ is the standard deviation, which determines the degree of Gaussian blur. The larger the standard deviation, the more obvious the blur effect; x is the target pixel; f(x,μ,σ 2 ) is the Gaussian weight.

[0134] Step S153, multiplying the Gaussian weight and the image transparency to obtain the target pixel value.

[0135] Step S154, changing the pixel value of the target pixel point to the target pixel value.

[0136] Step S155, taking the next pixel of the target pixel as the target pixel and returning to the calculation step.

[0137] Specifically, when switching the target pixel points, the pixel points can be traversed horizontally or vertically: horizontal traversal is to add 1 to the horizontal coordinate of the target pixel point until the horizontal coordinate reaches the number of columns corresponding to the resolution of the 2D image, add 1 to the vertical coordinate and reset the horizontal coordinate, and continue the operation of adding 1 to the horizontal coordinate until the vertical coordinate reaches the number of rows corresponding to the resolution of the 2D image; vertical traversal is to add 1 to the vertical coordinate of the target pixel point until the vertical coordinate reaches the number of rows corresponding to the resolution of the 2D image, add 1 to the horizontal coordinate and reset the vertical coordinate, and continue the operation of adding 1 to the horizontal coordinate until the horizontal coordinate reaches the number of columns corresponding to the resolution of the 2D image.

[0138] After the above traversal and update of the target pixel value, the new pixel value of each pixel point is the weighted average of the pixel values ​​within its preset pixel range, thereby achieving a blurring effect and generating a qualified blurred image.

[0139] In the specific implementation process, if the edge of the shadow is too clear and sharp, not only will the blurred image be too strongly separated from the surrounding map environment after rendering, it may also distract the player's attention and reduce the gaming experience; the existing custom shaders need to be adjusted for different hardware and platforms, and 2D rendering is widely used because of its low requirements for hardware platforms. Therefore, the blur method of custom shaders will affect the advantages of 2D rendering itself and is not applicable; percentage close filtering may introduce additional noise, resulting in the inability to completely eliminate the jagged edges of the shadow; SSAO increases the sense of depth of the scene by simulating the occlusion of ambient light, but will introduce visual artifacts, such as unnatural dark areas or excessive blur, and has a high computational cost.

[0140] In contrast, the Gaussian blur algorithm used in this application can produce a very smooth transition effect, reducing jaggedness and noise. At the same time, since the degree of blur can be controlled by adjusting the standard deviation of the Gaussian kernel, the blur effect of the blurred image can be made more flexible. Secondly, compared with SSAO, Gaussian blur can be implemented relatively efficiently, especially when using a fast convolution algorithm. Finally, Gaussian blur can also be applied to a variety of different hardware platforms and scenarios, and has good versatility.

[0141] The above embodiment uses the Gaussian blur algorithm to blur and feather the 2D image after the pixel value is unified, which can make the edge of the blurred image softer and avoid overly sharp edges, so that the shadow looks more natural. At the same time, at the edge of the blurred image, especially when the contrast between the shadow and the background color is high, blurring can reduce the jagged effect, that is, reduce the unevenness of the image edge. In addition, the blurred shadow can also better blend into the background and reduce visual interference.

[0142] In some embodiments, the preset pixel range is 5×5 pixels centered on the target pixel.

[0143] Among them, the target pixel point is taken as the center, that is, the target pixel point is taken as the pixel point in the third row and third column of 5×5 pixels; the preset pixel range is the size of the convolution kernel of Gaussian blur, and the convolution kernel used in this application is 5×5.

[0144] Specifically, if the convolution kernel used is smaller than 5×5, the blurring effect is too light and the edge feathering of the shadow figure is not obvious. The blurring effect of the 5×5 convolution kernel is more natural because 5×5 is closer to the human eye's perception of blur.

[0145] If a convolution kernel larger than 5×5 is used, too many pixels will need to be processed when calculating the standard deviation, resulting in an increase in the amount of calculation and a slower processing speed. Compared with larger convolution kernels, a 5×5 convolution kernel requires fewer pixels to be processed, which can reduce the amount of calculation and increase the processing speed; especially in applications that require real-time processing, such as video games or real-time video editing, a 5×5 convolution kernel can provide a fast enough processing speed to meet the requirements of real-time performance.

[0146] The above embodiment adopts a preset pixel range of 5×5, which is not only the value closest to the blur perception of the human eye, but also can ensure a sufficiently fast processing speed while achieving a better blur effect.

[0147] See also Figure 3 In some embodiments, the above-mentioned shearing transformation of the blurred image based on the illumination angle to obtain the shadow image may specifically include the following steps:

[0148] Step S1611, taking the tangent value of the illumination angle as the shear factor.

[0149] Step S1612, multiplying the vertical coordinate of the pixel point by the shear factor to obtain the shear variation.

[0150] Step S1613, taking the sum of the horizontal coordinate of the pixel point and the shear variation as the horizontal coordinate of the pixel point.

[0151] Specifically, the above calculation process is a horizontal shear transformation. For any pixel point (x0, y0) on the original image, after the shear transformation, the pixel point will move to a new position (x, y). The formula for the horizontal shear transformation is:

[0152] x=x0+βy0, y=y0, β=tanθ

[0153] Among them, θ is the illumination angle and β is the shear factor.

[0154] Furthermore, the above horizontal shear transformation can also be implemented by matrix operation:

[0155]

[0156] The horizontal shearing transformation adopted in the above embodiment has a small amount of calculation and can quickly process blurred images. At the same time, since the shearing factor in the horizontal shearing transformation is related to the illumination angle, the shearing factor can be adjusted by adjusting the illumination angle to control the degree of shearing, simulate light sources in various positions, and improve the flexibility of light and shadow rendering.

[0157] See also Figure 4 In some embodiments, the above-mentioned shearing transformation of the blurred image based on the illumination angle to obtain the shadow image may specifically include the following steps:

[0158] Step S1621, taking the tangent value of the illumination angle as the shear factor.

[0159] Step S1622, multiplying the horizontal coordinate of the pixel point by the shear factor to obtain the shear variation.

[0160] Step S1623, taking the sum of the vertical coordinate of the pixel point and the shear variation as the vertical coordinate of the pixel point.

[0161] Specifically, the above calculation process is a vertical shear transformation. For any pixel point (x0, y0) on the original image, after the shear transformation, the pixel point will move to a new position (x, y). The formula for the vertical shear transformation is:

[0162] x=x0, y=y0+βx0, β=tanθ

[0163] Among them, θ is the illumination angle and β is the shear factor.

[0164] Furthermore, the above horizontal shear transformation can also be implemented by matrix operation:

[0165]

[0166] The vertical shearing transformation adopted in the above embodiment has a small amount of calculation and can quickly process blurred images. At the same time, since the shearing factor in the vertical shearing transformation is related to the illumination angle, the shearing factor can be adjusted by adjusting the illumination angle to control the degree of shearing, simulate light sources in various positions, and improve the flexibility of light and shadow rendering.

[0167] Furthermore, according to actual business needs, the above-mentioned horizontal shearing transformation and vertical shearing transformation can be used at the same time. When used at the same time, the order does not interfere with the actual result. The two shearings are performed independently, acting in different coordinate directions, and do not interfere with each other.

[0168] In the specific implementation process, the vertical or horizontal shearing transformation may cause some pixels to be mistakenly moved outside the boundary of the blurred image. In this case, the following methods can be used to deal with it: 1) Make the pixels outside the boundary not displayed (that is, adjust the transparency to 0); 2) Expand the image boundary to accommodate the sheared pixels; 3) Use interpolation methods to estimate the pixel values ​​outside the boundary.

[0169] Among them, the interpolation estimation of pixel values ​​outside the boundary can be completed using Python:

[0170] sheared_image=np.empty_like(image)

[0171] for i in range(h):

[0172] for j in range(w):

[0173] # Find the closest integer coordinate

[0174] x_idx=int(round(x_sheared[i,j]))

[0175] y_idx = int(round(y[i,j]))

[0176] # Make sure the coordinates are within the image range

[0177] if 0<=x_idx <w and 0<=y_idx<h:

[0178] sheared_image[y_idx,x_idx]=image[i,j]

[0179] #Assume 'image' is an already loaded image array, 'shear_factor' is the shear factor

[0180] #sheared_image=shear_horizontal(image,shear_factor)

[0181] The above program example is the nearest neighbor interpolation algorithm. The nearest neighbor interpolation algorithm process is simple. Although the operation speed is fast, it may cause the image quality to deteriorate. In actual application, more advanced interpolation methods can be used to obtain smoother results.

[0182] Furthermore, in addition to the shear transformation, affine transformation, perspective transformation, Hough transformation, etc. can also be used to achieve similar deformation effects; among them, affine transformation is a linear transformation from two-dimensional coordinates to two-dimensional coordinates, which maintains the straight line relationship and parallel line relationship between points in the image, but affine transformation does not maintain angles and areas, which may cause distortion of the image shape, especially in scaling and rotation operations. Perspective transformation is a geometric transformation that simulates human visual perception. It is used to create a three-dimensional space visual effect on a two-dimensional plane, but perspective transformation usually involves complex mathematical operations and has a slow processing speed. It is not suitable for situations where a large number of objects need to be rendered in real time. In addition, due to the high requirements for computing resources, some hardware platforms cannot perform perspective transformation and have poor applicability. The Hough transform needs to map each point in the image to the parameter space, which usually involves a lot of calculations. Especially when using the standard Hough transform to detect circles, because each point is mapped to a surface in the parameter space, the amount of calculation increases dramatically. At the same time, due to the need to store the accumulator array of the parameter space, the Hough transform also requires a large memory space, which is particularly obvious when processing large-scale image data. It can be seen that due to the calculation and memory requirements, the Hough transform cannot achieve real-time or near real-time processing.

[0183] Compared with other transformation methods, the shear transformation adopted in this application has a simple operation process, small amount of calculation, and fast processing speed. It is very suitable for application scenarios such as games or real-time video editing that have high requirements for real-time performance.

[0184] See also Figure 5 In some embodiments, the method further comprises:

[0185] Step S01, input the system time into the shading file to obtain the lighting shading parameters corresponding to the system time.

[0186] Among them, Shader is a small program running on the GPU, which is used to control vertex processing and pixel processing in the graphics rendering pipeline. Shader files include vertex shaders, fragment shaders, samplers, etc.

[0187] The vertex shader includes vertex coordinates, transformation matrix, texture coordinates, normal vectors and tangents. Vertex coordinates are used to define the position of each vertex of the geometric shape; transformation matrix is ​​used to convert the vertex from model space to clip space, including rotation, scaling, translation, etc.; texture coordinates are the texture coordinates of each vertex; normal vectors and tangents are the normal vectors and tangents of the vertex. The fragment shader includes pixel values ​​and texture sampling. If a texture is used, the fragment shader samples the color from the texture image according to the texture coordinates.

[0188] In addition to the above parameters, the Shader file of this application also includes lighting shading parameters corresponding to different time variables, including light source coordinates, light source color, light intensity and attenuation factor; this application uses the built-in method (DateTime.Now) of the NET framework to obtain the system time of the computer, and inputs the system time as the value of the time variable into the shading file to obtain the lighting shading parameters corresponding to the system time.

[0189] Step S02: Rendering each pixel of the 2D image based on the lighting shading parameters.

[0190] Specifically, the rendering process of the shader file includes the application stage, the geometry stage, and the rasterization stage.

[0191] Application Stage:

[0192] First, you need to prepare the scene data, such as the camera position, the view cone, which models are included in the scene, which light sources are used, etc. You also need to set the rendering state of each model, including the material, diffuse color, specular color, texture, and the shader itself. The main output of this stage is the geometric information required for rendering, that is, the rendering primitives (such as points, lines, surfaces, etc.), which will be passed to the geometry stage.

[0193] Geometry Stage:

[0194] This stage is controlled by the GPU and mainly handles all matters related to the drawn geometry. At this stage, the vertex shader performs transformation operations on each vertex, including conversion from model space to world space, world space to view space, and view space to clip space. The geometry shader performs further processing on the primitives, such as generating new vertices or primitives. The clipping operation removes primitives that are not in the camera's field of view to ensure that only visible primitives are passed to the rasterization stage. Screen mapping (or projection) maps the coordinates of the primitives from the clip space to the screen coordinate system.

[0195] Rasterization Stage:

[0196] This stage is also controlled by the GPU and is mainly responsible for generating screen pixels and rendering the final image. Triangle Setup calculates the information needed to rasterize a triangle mesh based on the vertex data output by the geometry stage. The fragment shader processes the generated fragments and outputs the color of one or more pixels. The depth test checks whether the newly generated pixel is closer than the current pixel on the screen. If so, it replaces the current pixel. The final pixel is written to the frame buffer and waits to be displayed on the screen. The entire process is completed by the CPU and GPU in collaboration, realizing the conversion from three-dimensional data to two-dimensional images.

[0197] In the above rendering process, lighting shading parameters mainly play a role in the geometry stage and rasterization stage.

[0198] Geometry stage: In the vertex shader, the lighting shading parameters do not directly affect the position or color of the vertex, but will indirectly affect the calculation of vertex attributes, that is, the lighting effect of each vertex is calculated according to the vertex normal vector and lighting shading parameters. This includes the calculation of diffuse reflection and specular reflection.

[0199] Rasterization stage: In the fragment shader, the lighting shading parameters play a core role. In this stage, the GPU performs the final lighting calculation for each pixel according to the lighting shading parameters, including mixing the lighting shading parameters with the texture color, ambient light, and object color; and then, according to the lighting model (such as Phong or Gouraud), the lighting calculation results are mixed with the initial color attributes of each pixel of the 2D image to obtain the final pixel value.

[0200] The above embodiment sets the illumination shading parameters corresponding to different system times in the shading file, so that the pixel value of the 2D image itself changes with the system time, simulating different illumination environments at different system times.

[0201] See also Figure 6 In some embodiments, the method further comprises:

[0202] Step S001, in response to a creation instruction, obtaining model normals and material information corresponding to the 3D model.

[0203] The 2D image is the result of 2D rendering of the 3D model.

[0204] Step S002, adding the model normal and material information to the shading file.

[0205] Among them, material information is an important resource for describing the surface details of 3D objects. Material information can define the color, metallicity, smoothness, transparency, bumps and other properties of the object. These properties together determine the visual performance of the object in the game world. Model normals and material information are the various parameters in the vertex shader and fragment shader mentioned above.

[0206] Step S003, obtaining different system times and corresponding lighting shading parameters, and adding shading files.

[0207] Specifically, lighting shading parameters can be changed on an hourly basis.

[0208] The generation process of the shading file provided in the above embodiment ensures accurate light and shadow rendering of the 2D image.

[0209] In some embodiments, the method further comprises:

[0210] Before performing the shear transformation, the light source coordinates are obtained according to the system time.

[0211] The illumination angle is calculated based on the center coordinates of the 2D image and the light source coordinates.

[0212] Among them, the lighting shading parameters corresponding to the system time include the light source coordinates.

[0213] Specifically, the vector between the center coordinates and the light source coordinates is first calculated, and the vector is standardized so that its length is 1. The angle between the standardized vector and the horizontal positive direction is calculated by the inverse tangent function to obtain the illumination angle.

[0214] The above embodiment allows the illumination angle to change with the system time, so that the shadow of the 2D image also changes with the system time, further improving the authenticity of light and shadow rendering.

[0215] In some embodiments, the method further comprises:

[0216] Get different preset shading weathers and corresponding weather shading parameters, and add shading files.

[0217] Among them, the weather coloring parameter is the influence of the preset coloring weather on the light coloring parameter. Taking foggy day as an example, when the preset coloring weather is heavy fog, the corresponding weather coloring parameters are the light source color absorption, light intensity attenuation and attenuation factor change.

[0218] At present, the design of weather systems in 3D games is becoming more and more perfect, but for 2D games, since they usually run on resource-constrained platforms, adding independent weather effects not only requires redesigning the corresponding pixels to keep consistent with the overall artistic style of the game, but also increases the computing burden, affecting game performance and frame rate, and even over-consuming memory or processing power.

[0219] This application sets different preset shading weathers and corresponding weather shading parameters in the shading file to achieve light and shadow simulation of different weathers in the rendering process of 2D images without adding an additional weather system, which greatly reduces the amount of calculation.

[0220] See also Figure 7 In some embodiments, the method further comprises:

[0221] Step S21, obtaining current weather data, and determining whether the current weather data belongs to preset colored weather.

[0222] Specifically, not all weather will affect lighting. For example, strong winds will not affect the light and shadow effects. Therefore, this application sets a preset coloring weather, which is limited to setting weather coloring parameters for weather that affects lighting.

[0223] Step S22: If yes, input the current weather data into the coloring file to obtain the corresponding weather coloring parameters.

[0224] Step S23, generating current shading parameters according to the illumination shading parameters and the weather shading parameters.

[0225] Specifically, each influencing amount in the illumination shading parameter and the weather shading parameter is calculated, and if the influencing amount is expressed as an integer, a subtraction operation is performed, and if it is expressed as a negative number, an addition operation is performed, so as to obtain the current shading parameter.

[0226] Step S24: Render each pixel of the 2D image based on the current shading parameters.

[0227] In the specific implementation process, the light-facing side and the backlight side of each 2D image can also be determined according to the light source coordinates, and different lighting shading parameters can be designed for the pixels of the light-facing side and the backlight side to increase the realism of light and shadow rendering.

[0228] The above embodiment combines weather shading parameters and lighting shading parameters before rendering, and renders the 2D image after determining the current shading parameters, which greatly improves the simulation efficiency of lighting changes under different weather conditions.

[0229] In some embodiments, the method further comprises:

[0230] Step S31 : when it is detected that the main control image overlaps with the 2D image, the attribute of the 2D image is obtained.

[0231] Among them, the main control image is a 2D image of the character controlled by the player in the game scene.

[0232] Step S32, determining whether the attribute of the 2D image is a preset occlusion attribute.

[0233] First, the attributes of the 2D image are added according to the content of the 2D image, for example, the attribute of the building image is the ground attribute, the attribute of the plot image is the foundation attribute, and the attribute of the character image that can be controlled to move is the movement attribute.

[0234] Then the preset occlusion attribute is to define the image attribute that has an occlusion effect on the person, such as the ground attribute.

[0235] An image detection area of ​​ground attributes and foundation attributes is established to detect whether the image of the mobile attribute overlaps with the image detection area of ​​the ground attributes and foundation attributes. If so, step S33 is executed.

[0236] Specifically, a collision detection algorithm can be used to detect whether there is overlap. The collision detection algorithm is a technique for determining whether two or more objects intersect or touch. In the present application, when the image of the mobile attribute touches the image detection area of ​​the ground attribute, an event is triggered or the state of the object is changed. This usually involves using some form of bounding box (such as a rectangle, circle, or polygon) to represent the shape of the object and checking whether these bounding boxes intersect.

[0237] Step S33: If yes, the master image is set in a layer between the 2D image and the shadow image.

[0238] This application can quickly achieve the masking effect by switching the layer where the main control image is located, and there will be no delayed penetration.

[0239] Among them, for the overlap between the images of ground attributes, the result can be obtained by sorting them in order according to the current status.

[0240] The above-mentioned embodiment realizes the dynamic occlusion change of simulated objects based on depth in the 2D game scene, so that the 2D game scene can simulate the front and back occlusion effects of 3D games without adding a large amount of computing burden.

[0241] See also Figure 8 Another embodiment of the present application provides a light and shadow rendering device based on a 2D image, comprising:

[0242] The screening module 101 is used to obtain 2D game image resources and screen out 2D images whose image type is a preset rendering type.

[0243] The extraction module 102 is used to extract the pixel transparency of each pixel in the 2D image.

[0244] The judgment module 103 is used to change the pixel value of the pixel point whose pixel transparency is equal to the preset standard value to a preset pixel value.

[0245] The image transparency module 104 is used to calculate the image transparency of the 2D image.

[0246] The blur module 105 is used to perform Gaussian blur on the 2D image based on the image transparency to obtain a blurred image.

[0247] The shearing module 106 is used to perform a shearing transformation on the blurred image based on the illumination angle to obtain a shadow image.

[0248] The rendering module 107 is used to render the shadow image to a layer below the layer where the 2D image is located.

[0249] See also Fig. 9 In some embodiments, the fuzzy module 105 includes:

[0250] The calculation unit 51 is used to calculate the standard deviation of the pixel values ​​of each pixel point within a preset pixel range of the target pixel point.

[0251] The weight unit 52 is used to input the standard deviation into the probability density function of the Gaussian distribution to obtain the Gaussian weight.

[0252] The target pixel unit 53 is used to multiply the Gaussian weight and the image transparency to obtain a target pixel value.

[0253] The pixel updating unit 54 is used to change the pixel value of the target pixel point to the target pixel value.

[0254] The circulation unit 55 is used to take the next pixel point of the target pixel point as the target pixel point and return it to the calculation unit.

[0255] In some embodiments, the shear module 106 includes:

[0256] The horizontal shearing unit is used to use the tangent value of the illumination angle as a shearing factor; multiply the ordinate of the pixel point by the shearing factor to obtain a shearing variation; and use the sum of the abscissa of the pixel point and the shearing variation as the abscissa of the pixel point.

[0257] In some embodiments, the shear module 106 includes:

[0258] The vertical shearing unit is used to use the tangent value of the illumination angle as a shearing factor; multiply the horizontal coordinate of the pixel point by the shearing factor to obtain a shearing variation; and use the sum of the vertical coordinate of the pixel point and the shearing variation as the vertical coordinate of the pixel point.

[0259] In some embodiments, the device further includes a lighting module for inputting the system time into the shading file to obtain lighting shading parameters corresponding to the system time; the rendering module 107 is further used to render each pixel of the 2D image based on the lighting shading parameters.

[0260] In some embodiments, the apparatus further comprises:

[0261] A model normal module, for obtaining model normal and material information corresponding to the 3D model in response to a creation instruction;

[0262] The file generation module is used to add the model normal and material information to the shading file; and obtain different system times and corresponding lighting shading parameters and add them to the shading file.

[0263] In some embodiments, the apparatus further comprises:

[0264] The light source module is used to obtain the light source coordinates according to the system time before performing the shear transformation;

[0265] Angle module, used to calculate the lighting angle based on the center coordinates of the 2D image and the light source coordinates.

[0266] In some embodiments, the above-mentioned file generation module is also used to obtain different preset coloring weathers and corresponding weather coloring parameters, and add them to the coloring file.

[0267] In some embodiments, the apparatus further comprises:

[0268] The weather judgment module is used to obtain the current weather data and judge whether the current weather data belongs to the preset colored weather.

[0269] The weather parameter module is used to input the current weather data into the shading file to obtain the corresponding weather shading parameters.

[0270] The current parameter module is used to generate current shading parameters according to the lighting shading parameters and the weather shading parameters.

[0271] The rendering module 107 is further configured to render each pixel of the 2D image based on the current shading parameters.

[0272] In some embodiments, the apparatus further comprises:

[0273] The overlap detection module is used to obtain the properties of the 2D image when it is detected that the main control image overlaps with the 2D image.

[0274] The attribute judgment module is used to judge whether the attribute of the 2D image is a preset occlusion attribute.

[0275] The occlusion module is used to set the master image as a layer between the 2D image and the shadow image.

[0276] For the specific limitations of a light and shadow rendering device based on 2D images provided in this embodiment, please refer to the embodiment of a light and shadow rendering method based on 2D images above, which will not be repeated here. Each module in the above-mentioned light and shadow rendering device based on 2D images can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0277] In the embodiments disclosed in the present application, it should be understood that the disclosed products (including but not limited to systems, devices, etc.) can be implemented in other ways. For example, the device embodiments described above are only schematic, for example, the division of the modules is only a logical function division, and there may be other division methods in actual implementation, such as multiple modules or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point, the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, the indirect coupling or communication connection of the modules, which can be electrical, mechanical or other forms. The modules described as separate components may or may not be physically separated, and the components displayed as modules may or may not be physical modules, that is, they may be located in one place, or they may be distributed on multiple network modules. Some or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of this embodiment. In addition, the functional modules in the various embodiments of the present invention can be integrated in a processing module, or each module can exist physically alone, or two or more modules can be integrated in one module.

[0278] The embodiment of the present application provides a computer device, which may include a processor, a memory, a network interface and a database connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, the processor executes the steps of a light and shadow rendering method based on a 2D image as in any of the above embodiments.

[0279] The working process, working details and technical effects of the computer device provided in this embodiment can be found in the above embodiment of a light and shadow rendering method based on 2D images, which will not be described in detail here.

[0280] The embodiment of the present application provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the steps of a light and shadow rendering method based on 2D images as in any of the above embodiments are implemented. Wherein, the computer-readable storage medium refers to a carrier for storing data, which may include but is not limited to a floppy disk, an optical disk, a hard disk, a flash memory, a USB flash drive and / or a memory stick (Memory Stick), etc., and the computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The working process, working details and technical effects of the computer-readable storage medium provided in this embodiment can be found in the above embodiment of a light and shadow rendering method based on 2D images, which will not be repeated here.

[0281] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in the present application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0282] The technical features of the above embodiments may be arbitrarily combined. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0283] The above-mentioned embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the attached claims.

Claims

1. A light and shadow rendering method based on 2D images, characterized in that: include: Get 2D game image resources, and filter out 2D images whose image type is a preset rendering type; Extracting the pixel transparency of each pixel in the 2D image; Change the pixel value of the pixel point whose pixel transparency is equal to the preset standard value to a preset pixel value; wherein the preset standard value is 1; and the preset pixel value is greater than or equal to 200 and less than or equal to 255; Calculating the image transparency of the 2D image; Based on the image transparency, the 2D image is Gaussian blurred to obtain a blurred image; specifically, a calculation step is performed: the standard deviation of the pixel values ​​of each pixel point within a preset pixel range of the target pixel point is calculated; the standard deviation is input into the probability density function of the Gaussian distribution to obtain a Gaussian weight; the Gaussian weight is multiplied by the image transparency to obtain a target pixel value; the pixel value of the target pixel point is changed to the target pixel value; the next pixel point of the target pixel point is used as the target pixel point, and the calculation step is returned; Performing shear transformation on the blurred image based on the illumination angle to obtain a shadow image; The shadow image is rendered to a layer below the layer where the 2D image is located.

2. The light and shadow rendering method based on 2D images according to claim 1, characterized in that: The data storage formats of the 2D image include png and jpg.

3. The light and shadow rendering method based on 2D images according to claim 1, characterized in that: The pixel value of the pixel point includes a red channel value, a green channel value and a blue channel value.

4. The light and shadow rendering method based on 2D images according to claim 1, characterized in that: The preset pixel range is 5×5 pixels centered on the target pixel.

5. The light and shadow rendering method based on 2D images according to claim 1, characterized in that: The step of performing a shear transformation on the blurred image based on the illumination angle to obtain a shadow image includes: Taking the tangent value of the illumination angle as the shear factor; Multiplying the vertical coordinate of the pixel point by the shearing factor to obtain a shearing variation; The sum of the horizontal coordinate of the pixel point and the shear variation is used as the horizontal coordinate of the pixel point.

6. The light and shadow rendering method based on 2D images according to claim 1, characterized in that: The step of performing a shear transformation on the blurred image based on the illumination angle to obtain a shadow image includes: Taking the tangent value of the illumination angle as the shear factor; Multiplying the horizontal coordinate of the pixel point by the shearing factor to obtain a shearing variation; The sum of the ordinate of the pixel point and the shear variation is used as the ordinate of the pixel point.

7. The light and shadow rendering method based on 2D images according to claim 1, characterized in that: Also includes: Input the system time into the shading file to obtain the lighting shading parameters corresponding to the system time; Render each pixel of the 2D image based on the lighting shading parameters.

8. The light and shadow rendering method based on 2D images according to claim 7, characterized in that: Also includes: In response to the creation instruction, obtaining model normal and material information corresponding to the 3D model; adding the model normal and the material information to the shading file; Obtain different system times and corresponding lighting shading parameters, and add them to the shading file.

9. The light and shadow rendering method based on 2D images according to claim 8, characterized in that: Also includes: Before performing the shear transformation, the light source coordinates are obtained according to the system time; The illumination angle is calculated according to the center coordinates of the 2D image and the light source coordinates.

10. The light and shadow rendering method based on 2D images according to claim 8, characterized in that: Also includes: Get different preset shading weathers and corresponding weather shading parameters, and add the shading files.

11. The light and shadow rendering method based on 2D images according to claim 10, characterized in that: Also includes: Obtain current weather data, and determine whether the current weather data belongs to the preset colored weather; If yes, the current weather data is input into the coloring file to obtain corresponding weather coloring parameters; Generate current shading parameters according to the illumination shading parameters and the weather shading parameters; Rendering each pixel of the 2D image based on the current shading parameter.

12. The light and shadow rendering method based on 2D images according to claim 1, characterized in that: Also includes: When it is detected that the main control image overlaps with the 2D image, acquiring the attribute of the 2D image; Determining whether the attribute of the 2D image is a preset occlusion attribute; If so, the master image is set as a layer between the 2D image and the shadow image.

13. A light and shadow rendering device based on 2D images, characterized in that: include: A screening module is used to obtain 2D game image resources and screen out 2D images whose image types are preset rendering types; An extraction module, used to extract the pixel transparency of each pixel point in the 2D image; A judgment module, used to change the pixel value of the pixel point whose pixel transparency is equal to the preset standard value to a preset pixel value; wherein the preset standard value is 1; and the preset pixel value is greater than or equal to 200 and less than or equal to 255; An image transparency module, used for calculating the image transparency of the 2D image; A blur module is used to perform Gaussian blur on the 2D image based on the image transparency to obtain a blurred image; specifically, the blur module is used to perform a calculation step: calculate the standard deviation of the pixel values ​​of each pixel point within a preset pixel range of the target pixel point; input the standard deviation into the probability density function of the Gaussian distribution to obtain a Gaussian weight; multiply the Gaussian weight by the image transparency to obtain a target pixel value; change the pixel value of the target pixel point to the target pixel value; use the next pixel point of the target pixel point as the target pixel point, and return to the calculation step; A shearing module, used for shearing the blurred image based on the illumination angle to obtain a shadow image; A rendering module is used to render the shadow image to a layer below the layer where the 2D image is located.

14. The light and shadow rendering device based on 2D images according to claim 13, characterized in that: It also includes a lighting module, which is used to input the system time into the shading file to obtain the lighting shading parameters corresponding to the system time; The rendering module is further used to render each pixel of the 2D image based on the lighting shading parameters.

15. The light and shadow rendering device based on 2D images according to claim 14, characterized in that: Also includes: A model normal module, for obtaining model normal and material information corresponding to the 3D model in response to a creation instruction; The file generation module is used to add the model normal and the material information to the shading file; and obtain different system times and corresponding lighting shading parameters and add them to the shading file.

16. The light and shadow rendering device based on 2D images according to claim 15, characterized in that: Also includes: A light source module, used for obtaining light source coordinates according to the system time before performing the shear transformation; An angle module is used to calculate the illumination angle according to the center coordinates of the 2D image and the light source coordinates.

17. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the steps of the 2D image-based light and shadow rendering method as described in any one of claims 1 to 12 are implemented.

18. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the 2D image-based light and shadow rendering method as claimed in any one of claims 1 to 12 are implemented.

Images