Rendering method, device and equipment for virtual article occupied area and storage medium
By mapping the area occupied by virtual items to the screen texture coordinate system and using preset mask images for texture sampling and synthesis, the problems of high rendering complexity and high performance overhead in the existing technology are solved, and efficient and flexible visual identification of the edge of the occupied area is achieved.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- NETEASE (HANGZHOU) NETWORK CO LTD
- Filing Date
- 2026-01-06
- Publication Date
- 2026-05-12
AI Technical Summary
Existing technologies suffer from high production complexity, high performance overhead, and monotonous visual effects when rendering the area occupied by virtual objects, making it difficult to generate clear visual boundary markers flexibly and efficiently.
By mapping the area occupied by virtual objects to a preset texture coordinate system in screen space, using preset mask images for texture sampling, and synthesizing the sampling results with the original rendered image, edge visual features are rendered, avoiding complex 3D spatial calculations and model geometric data dependencies.
It simplifies the rendering process, reduces computational complexity and workload, and enables flexible edge marking for areas occupied by different sizes and shapes, maintaining visual consistency and rendering efficiency.
Smart Images

Figure CN122006232A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technology, specifically to a method, apparatus, device, and storage medium for rendering the area occupied by virtual items. Background Technology
[0002] With the booming development of the gaming industry and the increasing demands for user experience, the design of interactive systems in modern video games is paying more and more attention to detailed and intuitive visual feedback to enhance players' immersion and operational awareness. Among these, the display, storage, and management of items have become an important part of the gaming experience. To improve the clarity and aesthetics of the interaction, it is often necessary to visually render the area occupied by items in the placement area (such as backpack slots, display windows, building grids, etc.), and to clearly indicate their spatial position through highlighting, outlining, or other marking methods, thereby assisting players in placing items, adjusting layouts, and other operations.
[0003] However, current common methods for rendering the area occupied by objects often face some common technical limitations. For example, to achieve edge marking or highlighting effects for the occupied area, some methods rely on normal processing or geometric expansion of the object model itself. This not only increases the complexity of art asset production but may also incur performance overhead due to the introduction of additional rendering passes or post-processing steps. Furthermore, if a uniform texture or material is used for mesh rendering, it is difficult to flexibly and efficiently generate marking effects with clear visual boundaries based on the irregular shape actually occupied by the object, resulting in monotonous and insufficiently distinguishable prompts. Summary of the Invention
[0004] This application provides a rendering method, apparatus, device, and storage medium for the area occupied by virtual items, so as to improve the flexibility and effect of rendering the area occupied by virtual items.
[0005] In a first aspect, this application provides a method for rendering the area occupied by a virtual item, comprising: obtaining the area occupied by a virtual item in the item placement area in a game scene; mapping the occupied area to a preset texture coordinate system in screen space to obtain a first texture coordinate region corresponding to the occupied area; performing texture sampling on a preset mask image based on the first texture coordinate region to obtain a sampling result, wherein the edge of the preset mask image has target edge visual features; and synthesizing the sampling result with the original rendered image of the occupied area to obtain a rendered occupied area, wherein the edge of the rendered occupied area has target edge visual features.
[0006] In one optional implementation, obtaining the area occupied by a virtual item in the item placement area of the game scene includes: displaying the item placement area in the game scene; obtaining the bounding box information and placement position information of the virtual item; and determining the area occupied by the virtual item in the item placement area based on the bounding box information and placement position information.
[0007] In one optional implementation, the item placement area is an item grid placement area, which is composed of multiple first grid cells. The placement position information is the second grid cell in which the preset vertex of the virtual item is located in the item grid placement area. Based on the bounding box information and the placement position information, the area occupied by the virtual item in the item placement area is determined, including: based on the bounding box information and the second grid cells, determining at least one third grid cell covered by the virtual item in the item grid placement area; and determining the at least one third grid cell as the occupied area.
[0008] In one optional implementation, mapping the occupied area to a preset texture coordinate system in the screen space to obtain a first texture coordinate region corresponding to the occupied area includes: obtaining first position information of the item placement area in the screen space and size information of the screen space; determining a second texture coordinate region corresponding to the item placement area in the preset texture coordinate system based on the first position information and size information; determining the relative position ratio of the occupied area in the item placement area based on the second position information of the occupied area within the item placement area; and determining the first texture coordinate region corresponding to the occupied area in the preset texture coordinate system based on the relative position ratio and the second texture coordinate region.
[0009] In one optional implementation, the preset mask image is sampled based on the first texture coordinate region to obtain the sampling result, including: normalizing the texture coordinate values corresponding to the first texture coordinate region to obtain normalized target coordinate values; and sampling the preset mask image based on the target coordinate values to obtain the sampling result.
[0010] In one optional implementation, a preset mask image is used to render a highlight effect at the edge of the occupied area; the sampling result is combined with the original rendered image of the occupied area to obtain the rendered occupied area, including: pixel mixing of the sampling result and the original rendered image to obtain the occupied area with an edge highlight effect.
[0011] In one alternative implementation, in response to the operation of placing a virtual item in the item placement area, the edge highlighting rendering of the occupied area is stopped.
[0012] Secondly, this application provides a rendering apparatus for the area occupied by a virtual item, comprising: an acquisition module for acquiring the area occupied by a virtual item in a game scene within an item placement area; a mapping module for mapping the occupied area to a preset texture coordinate system in screen space to obtain a first texture coordinate region corresponding to the occupied area; a sampling module for performing texture sampling on a preset mask image based on the first texture coordinate region to obtain a sampling result, wherein the edge of the preset mask image has target edge visual features; and a compositing module for compositing the sampling result with the original rendered image of the occupied area to obtain a rendered occupied area, wherein the edge of the rendered occupied area has target edge visual features.
[0013] Thirdly, this application provides an electronic device, including: a memory and a processor, which are communicatively connected to each other. The memory stores computer instructions, and the processor executes the computer instructions to perform the rendering method of the virtual item occupied area of the first aspect or any corresponding embodiment described above.
[0014] Fourthly, this application provides a computer-readable storage medium storing computer instructions for causing a computer to execute the rendering method for the virtual item-occupied area of the first aspect or any corresponding embodiment described above.
[0015] Fifthly, this application provides a computer program product, including computer instructions for causing a computer to execute the rendering method for the virtual item-occupied area of the first aspect or any corresponding embodiment described above.
[0016] The rendering method for the virtual item's occupied area provided in this application maps the occupied area of the virtual item in the game scene to a preset texture coordinate system in screen space. This allows for direct processing based on two-dimensional screen coordinates, avoiding complex three-dimensional spatial calculations and model geometric data dependencies, making the calculation process simpler and more efficient. By using a preset mask image for texture sampling, the image's edges already have pre-defined target edge visual features, eliminating the need for real-time generation or dynamic calculation of edge effects during rendering. This ensures visual consistency and reduces the computational burden of real-time rendering. Furthermore, by synthesizing the sampling results with the original rendered image, enhanced edge marking of the occupied area is achieved without modifying the original model or material of the virtual item. This maintains minimal intrusion into the original rendering pipeline, facilitating integration into existing rendering pipelines. It also supports unified and flexible edge marking processing for occupied areas of different sizes and shapes. Attached Figure Description
[0017] To more clearly illustrate the technical solutions in the specific embodiments of this application or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.
[0018] Figure 1 This is a schematic diagram illustrating an application scenario according to an embodiment of this application; Figure 2 This is a schematic diagram of the first process of rendering the virtual item occupied area according to an embodiment of this application; Figure 3 This is a schematic diagram of a second process for rendering the virtual item occupied area according to an embodiment of this application; Figure 4 This is a schematic diagram of the display cabinet interface of the window storage system according to an embodiment of this application; Figure 5 This is a schematic diagram of a third process for rendering the virtual item occupied area according to an embodiment of this application; Figure 6 This is a schematic diagram of a preset masking image according to an embodiment of this application; Figure 7 This is a schematic diagram of an occupied area with edge highlighting effect according to an embodiment of this application; Figure 8 This is a structural block diagram of a rendering apparatus for the virtual item occupied area according to an embodiment of this application; Figure 9 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of this application. Detailed Implementation
[0019] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0020] It is understood that before using the technical solutions disclosed in the various embodiments of this application, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this application in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.
[0021] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this application, "multiple" means two or more, unless otherwise explicitly specified.
[0022] As one optional application scenario in this application embodiment, Figure 1 This diagram illustrates an application scenario of a rendering system for the area occupied by virtual items. For example... Figure 1 As shown, the system may include at least one terminal device and at least one server. Figure 1 The system is illustrated in the example, which includes a computer 101, a mobile terminal 102, and a server 103, and the terminal devices such as the computer 101 and the mobile terminal 102 are connected to the server 103 through a network 110.
[0023] Specifically, the terminal device can be a smartphone, tablet, laptop, PDA, desktop computer, game console, smart TV, smart wearable device, in-vehicle terminal, VR (Virtual Reality) device, AR (Augmented Reality) device, etc. Server 103 can be a standalone physical server, a server cluster, a distributed system, or a cloud server providing cloud services. Network 110 can be a wired or wireless network, examples of which include, but are not limited to, the Internet, corporate intranet, local area network, wide area network, mobile communication network, and combinations thereof.
[0024] Taking collection-based or role-playing games as an example, the terminal device has the corresponding game application installed. By running this application, a game scene with a virtual item display system can be rendered in the graphical user interface. For instance, players can visually display and manage their acquired items, equipment, or collectibles through a showcase collection system in the game. This system typically uses a grid layout, dividing the display space into regular rectangular or square cells, which players can drag and drop virtual items to display.
[0025] In such interactions, the system needs to dynamically calculate the area occupied by an item within the grid based on its actual size and provide clear visual feedback to the player to indicate the placeable area. However, in traditional implementations, because all grid cells use the same material and texture, it is difficult to achieve accurate highlight rendering of the specific area occupied by the item and its adjacent cells. Although there are post-processing solutions based on model normal expansion, their production process is complex and requires additional rendering passes, resulting in unnecessary performance overhead and making it difficult to achieve efficient rendering while ensuring visual quality.
[0026] The rendering method for the virtual item's occupied area provided in this application obtains the occupied area of the virtual item in the item placement area, maps it to the texture coordinate system of screen space, samples a preset edge mask image based on the mapping result, and synthesizes the sampled result with the original rendered image to finally achieve the display of the edge markings of the occupied area. This application does not rely on model normal processing or add extra rendering channels, thus improving rendering efficiency and system performance while ensuring visual effects.
[0027] According to an embodiment of this application, a rendering method for the area occupied by virtual items is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.
[0028] This embodiment provides a method for rendering the area occupied by virtual items, which can be used in electronic devices such as computer 101, mobile terminal 102, etc. Figure 2 This is a flowchart of a method for rendering the area occupied by virtual items according to an embodiment of this application, such as... Figure 2 As shown, the process includes the following steps: Step S201: Obtain the area occupied by virtual items in the item placement area in the game scene.
[0029] Virtual items refer to digital items that can be placed, displayed, or manipulated by players in a game scene. An item placement area refers to a fixed area in the game used to place virtual items, such as a gridded display space. The occupied area refers to the actual area occupied by a virtual item within the item placement area. Specifically, the virtual item (i.e., the object to be placed or manipulated) and its basic spatial attributes are identified. Based on the spatial organization rules followed by the item placement area, the spatial attributes of the virtual item are combined with the rules of that area for calculation. Through this calculation, the logical area range actually covered or occupied by the virtual item under the current rules can be derived. This process is essentially a mapping calculation from the object's own spatial description to the spatial rules of a specific container, the result of which is a mathematically or logically defined area used to identify the object's position and occupied area within the container.
[0030] Step S202: Map the occupied area to a preset texture coordinate system in the screen space to obtain the first texture coordinate region corresponding to the occupied area.
[0031] Screen space refers to the coordinate space after a 3D game scene is projected onto a 2D display screen. The preset texture coordinate system refers to a standardized texture coordinate system established in screen space, typically a UV coordinate system with the lower left corner of the screen at (0,0) and the upper right corner at (1,1). The first texture coordinate region refers to the UV coordinate range corresponding to the occupied area after mapping in the preset texture coordinate system. Specifically, a standardized texture coordinate system corresponding to the final displayed image is established or utilized, usually normalized based on the screen boundaries. Then, the calculated occupied area (whose coordinates are based on the logical space of the scene or item placement area) is transformed into the aforementioned screen texture coordinate system through a series of spatial transformations (such as view transformations, projection transformations, and other conventional graphics processing). This transformation process determines the precise range or proportional position of the occupied area on the final 2D display screen, thus obtaining a set of coordinate parameters in this standardized texture coordinate system, i.e., the first texture coordinate region.
[0032] Step S203: Based on the first texture coordinate region, perform texture sampling on the preset mask image to obtain the sampling result. The edge of the preset mask image has the visual features of the target edge.
[0033] A preset mask image refers to a pre-made texture image whose texture data is pre-designed to have certain recognizable feature values or patterns in the edge regions (i.e., around the edges of the texture image or around a specific shape outline). When this mask image is sampled and used in the rendering pipeline, this feature region guides the shader to generate a specific visual style for the edges of the occupied area on the final image, distinguishing it from non-edge regions. Target edge visual features refer to a pre-defined structured feature in the texture data of the preset mask image's edge regions, used to distinguish between edge and center regions. For example, this feature can be represented by a regular change in pixel values (such as alpha values or brightness) from the edge to the center (e.g., 1 at the edge, gradually decreasing to 0 inwards). It is not a direct visual effect itself, but a data marker. Specifically, an electronic device has a pre-made mask image whose key characteristic is that its texture data has designed, distinguishable numerical features in different regions (especially edges and the center). This feature is the target edge visual feature, which is itself a data marker used to indicate the shape and intensity distribution of subsequent effects. Using the first texture coordinate region obtained above as texture sampling coordinates, the mask image is queried (i.e., texture sampling). The sampling process is equivalent to retrieving pixel data (i.e., feature values) at the corresponding position in the mask image based on the region position on the screen. The resulting sampling result is a set of values that correspond one-to-one with the pixels in the screen-occupied area and contain visual feature information of the target edge. It is not the final visual effect itself, but rather a control signal used to drive the generation of the visual effect.
[0034] Step S204: The sampling result is combined with the original rendered image of the occupied area to obtain the rendered occupied area. The edges of the rendered occupied area have the visual features of the target edge.
[0035] The original rendered image refers to the intermediate rendered image generated by the conventional shading process for the occupied area before any specific visual compositing processing based on edge recognition is applied. Target edge visual features represent the visual identifiers presented at the edges of the object's occupied area after sampling from a preset mask image. These identifiers, such as glows, highlights, and outlines, are used to inform the user that the area has been occupied. Specifically, through image compositing operations (such as pixel-level operations like multiplication, addition, and screen blending), the sampling results (i.e., control signals) are blended pixel-by-pixel with the original rendered image corresponding to the occupied area. During this process, the target edge visual feature data in the sampling results (such as high values at the edges) controls the presentation of the corresponding pixels in the original image, for example, brightening colors, changing hues, or overlaying special textures. This synthesizes the desired visual style corresponding to the target edge visual features only in the target area (especially its edges), such as highlights, outlines, or other distinguishing markers. The final output rendered image of the occupied area clearly carries this visual identifier at its edges.
[0036] The rendering method for the virtual item's occupied area provided in this application maps the occupied area of the virtual item in the game scene to a preset texture coordinate system in screen space. This allows for direct processing based on two-dimensional screen coordinates, avoiding complex three-dimensional spatial calculations and model geometric data dependencies, making the calculation process simpler and more efficient. By using a preset mask image for texture sampling, the image's edges already have pre-defined target edge visual features, eliminating the need for real-time generation or dynamic calculation of edge effects during rendering. This ensures visual consistency and reduces the computational burden of real-time rendering. Furthermore, by synthesizing the sampling results with the original rendered image, enhanced edge marking of the occupied area is achieved without modifying the original model or material of the virtual item. This maintains minimal intrusion into the original rendering pipeline, facilitating integration into existing rendering pipelines. It also supports unified and flexible edge marking processing for occupied areas of different sizes and shapes.
[0037] This embodiment provides a method for rendering the area occupied by virtual items, which can be used in electronic devices such as computer 101, mobile terminal 102, etc. Figure 3 This is a flowchart of a method for rendering the area occupied by virtual items according to an embodiment of this application, such as... Figure 3 As shown, the process includes the following steps: Step S301: Obtain the area occupied by virtual items in the item placement area in the game scene.
[0038] Specifically, step S301 includes: Step S3011: Display the item placement area in the game scene.
[0039] Based on the game design, a logical area is defined to hold items. Then, the graphics rendering pipeline (such as the game engine's renderer) calls the corresponding resources (such as models, materials, textures, or UI components) and, according to the parameters of this logical area, draws its visual representation at a specified location on the screen. This process ensures that the area not only exists within the game logic but is also presented to the player as a clear visual entity, providing clear spatial guidance and visual background for subsequent item placement operations. For example, as... Figure 4 As shown, the item placement area serves as a display case interface for the showcase collection system, employing a uniform grid layout to display virtual items acquired by players, such as figurines, equipment, or collectibles. Players can drag and drop items into the grid cells of the display case for visual display.
[0040] In one alternative implementation, the electronic device continuously listens for player input events, such as mouse clicks, touches, or controller button presses. When a selection action (e.g., mouse click) is detected for a virtual item, a continuous tracking state is initiated. Throughout the dragging process (from when the item is picked up until the mouse or finger is released to confirm placement), the electronic device continuously updates the visual position of the virtual item in real time based on the current position of the input device (e.g., cursor position), making it appear as if the user is dragging it. Simultaneously, the electronic device continuously detects whether the item's current logical position (e.g., its anchor point or bounding box) is spatially associated with the item placement area. Once the association is established (e.g., the item enters or hovers above the placement area), a series of real-time calculations and rendering processes for the potential area occupied by the item within the placement area are immediately triggered. This mechanism provides the player with an immediate, dynamic visual preview until the player performs a release action to finally confirm placement.
[0041] Step S3012: Obtain the bounding box information and placement location information of the virtual item.
[0042] Bounding box information refers to simplified geometric data describing the extent of a virtual object in 3D space, typically a minimum axis-aligned cube that can completely enclose the object. Placement position information refers to the reference point or reference area information of the virtual object's final positioning within the object placement area after a dragging operation. Specifically, bounding box information is usually stored in resource files as an inherent attribute or pre-calculated data of the virtual object's 3D model. When a virtual object is loaded or needs to be calculated, the size parameters of its bounding box (such as the axis-aligned bounding box AABB) are directly read from its data structure. Placement position information is dynamically determined during interaction. When a virtual object is moved or hovered, the electronic device calculates its specific positioning information within that area based on its current position and the spatial rules of the object placement area.
[0043] Step S3013: Based on the bounding box information and placement location information, determine the area occupied by the virtual item in the item placement area.
[0044] Using the placement location information as the starting or reference point and the bounding box information as the dimensional basis, specifically, the placement location is used as the base point according to the spatial organization of the item placement area. Then, the dimensions of the bounding box are extended or projected in various directions (usually on a two-dimensional plane, such as length and width). By calculating the intersection of this area, with the placement point as the reference and the bounding box size as the range, with the space of the placement area, the logical area actually occupied by the virtual object within the item placement area can be accurately defined, i.e., the occupied area.
[0045] The rendering method for the virtual item's occupied area provided in this application significantly reduces the overhead and implementation complexity by acquiring the bounding box information of the virtual item and its specific position information in the placement area in real time. This is achieved directly based on these two types of data, without relying on the item's complex geometry or requiring additional model conversion. Furthermore, since the bounding box information is typically pre-calculated or standardized data directly provided by the engine, it can be combined with the determined placement position to quickly and accurately define the item's actual occupied area. This makes the area acquisition process stable and reliable, and easily reusable in different item and layout scenarios.
[0046] In some optional implementations, the item placement area is an item grid placement area, which is composed of multiple first grid cells, and the placement position information is the second grid cell in which the preset vertex of the virtual item is located within the item grid placement area; the above step S3013 includes: Step a1: Based on the bounding box information and the second grid cell, determine at least one third grid cell covered by the virtual item in the item grid placement area.
[0047] An item grid placement area refers to a region in a game scene divided into a regular, uniform array of cells, specifically used for the orderly placement of virtual items, such as the grid layout in a showcase system. The first grid unit refers to the basic spatial unit that constitutes the item grid placement area; it is the smallest, indivisible, regular area in the grid structure, typically a square or rectangle. The entire placement area is composed of multiple such units. Specifically, the item grid placement area consists of multiple fixed-position grid prefabs, each containing multiple sub-models, each associated with a material sphere of a different color. Visual feedback of the grid units is achieved by dynamically switching the display states of the sub-models.
[0048] A preset vertex refers to a specific corner point predefined on the virtual item model to represent its position, such as the bottom left corner, center point, or anchor point. The second grid cell refers to the specific first grid cell in the item's grid placement area where the preset vertex falls. The third grid cell refers to the set of all first grid cells completely or partially covered by the item, calculated after determining the second grid cell and combining it with the bounding box information (size) of the virtual item. This set collectively constitutes the actual area occupied by the item in the grid placement area. Specifically, the second grid cell is defined as the origin of the virtual item's coordinates in the item's grid placement area. Next, the bounding box information of the virtual item (length and width on a two-dimensional plane) is converted according to the physical size of the grid cells to obtain how many grid cells the virtual item needs to occupy in the row and column directions. Then, starting from the second grid cell, the calculation of the row and column occupancy is used to expand to adjacent grids, thereby identifying all grid cells covered by the virtual item. This set of covered cells constitutes at least one third grid cell; this process achieves a discretized transformation from object size to grid occupancy.
[0049] Step a2: Identify at least one third grid cell as the occupied area.
[0050] The calculated at least one third grid cell (usually in the form of grid coordinates, an index list, or a rectangular area) is encapsulated or marked, and the whole is regarded as an indivisible logical entity, i.e., the occupied area.
[0051] In the above implementation, by explicitly defining the item placement area as a grid structure composed of multiple first grid cells, and anchoring the placement position information of the virtual item to the second grid cell where a preset vertex (such as the lower left corner) is located, a normalized and discretized spatial reference system is established for calculating the occupied area. This simplifies the area determination process from complex continuous spatial judgment to indexing and statistics of normalized grid cells, greatly reducing the implementation complexity and computational overhead of the algorithm. Based on the grid position of the preset vertex and the bounding box information of the model, one or more third grid cells covered by the virtual item can be quickly and accurately derived through simple grid cell conversion, and these cells are directly identified as the occupied area. Furthermore, since the entire calculation is based entirely on a fixed grid coordinate system and pre-available data (such as bounding boxes, vertex positions, etc.), this application does not rely on real-time geometric queries or complex spatial intersection tests, and has good operational stability and performance predictability.
[0052] Step S302: Map the occupied area to a preset texture coordinate system in the screen space to obtain the first texture coordinate region corresponding to the occupied area.
[0053] Specifically, step S302 includes: Step S3021: Obtain the first position information of the item placement area in the screen space, as well as the size information of the screen space.
[0054] The first position information describes the location and extent of the item placement area within screen space (i.e., the final displayed 2D image). Size information refers to the physical or logical size data of the screen space. Specifically, the first position information can be obtained by querying the screen coordinate properties of the item placement UI component or rendered object (such as the pixel coordinates of the top-left and bottom-right corners), or by using a graphics API to perform viewport transformation calculations. The screen space size information refers to the scale of the displayed image itself, such as the screen resolution (e.g., 1920×1080 pixels), provided by the graphics API or the operating system / game engine's window system.
[0055] Step S3022: Based on the first position information and size information, determine the second texture coordinate region corresponding to the item placement area in the preset texture coordinate system.
[0056] The second texture coordinate region refers to the range of texture coordinates corresponding to the entire item placement area after it has been mapped to a preset texture coordinate system in screen space. Specifically, using the screen space dimensions (such as screen width W and height H) as the denominator and the first position information of the item placement area (such as its top-left corner pixel coordinates (X1, Y1) and bottom-right corner pixel coordinates (X2, Y2)) as the numerator, the pixel range of the placement area is converted into standardized texture coordinates within the range of 0 to 1 through a simple proportional calculation. For example, the texture coordinates of its left boundary on the U-axis can be calculated as X1 / W. By performing this calculation on each of its four boundaries, a rectangular range corresponding to the entire item placement area in the preset texture coordinate system can be obtained, which is the second texture coordinate region.
[0057] Step S3023: Based on the second location information of the occupied area within the item placement area, determine the relative position ratio of the occupied area within the item placement area.
[0058] The second location information describes the position of the occupied area within the item placement area. The relative location ratio is the proportional value obtained by calculating the second location information of the occupied area based on the overall size of the item placement area. Specifically, the second location information describes the local coordinates of the occupied area within its container item placement area. These local location parameters of the occupied area (such as the starting row / column index, the number of rows and columns occupied) are divided by the total size of the item placement area in that direction (such as the total number of rows and columns). The resulting set of proportional values (usually between 0 and 1) is the relative location ratio.
[0059] Step S3024: Based on the relative position ratio and the second texture coordinate region, determine the first texture coordinate region corresponding to the occupied area in the preset texture coordinate system.
[0060] The relative position ratio is considered as a coefficient for internal interpolation or scaling of the second texture coordinate region (i.e., the texture coordinate range corresponding to the entire item placement area). Specifically, the boundary values of the second texture coordinate region (such as U_min, U_max, V_min, V_max) are linearly combined with the relative position ratio for calculation. In this way, the relative position ratio can be accurately mapped back to the specific first texture coordinate region used for texture sampling.
[0061] The rendering method for the virtual item's occupied area provided in this application obtains the position information of the item placement area in screen space and the screen size information, and determines the overall area range of the item placement area in the texture coordinate system accordingly. This establishes a clear and stable mapping benchmark from the screen's physical area to standardized texture coordinates, ensuring that subsequent calculations are always based on a unified coordinate reference system, avoiding coordinate misalignment problems caused by changes in screen resolution or layout adjustments. By calculating the relative position ratio of the occupied area within the item placement area, and using this ratio in conjunction with the determined texture coordinate area, the specific texture coordinates of the occupied area are derived. This achieves coordinate mapping based on relative relationships, rather than relying on absolute pixel positions or complex view projection transformations, thereby significantly reducing computational complexity and dependence on the underlying graphics interface.
[0062] Step S303: Based on the first texture coordinate region, perform texture sampling on the preset mask image to obtain the sampling result. The edges of the preset mask image have the visual features of the target edge. For details, please refer to... Figure 2 Step S203 of the illustrated embodiment will not be described again here.
[0063] Step S304: The sampling result is combined with the original rendered image of the occupied area to obtain the rendered occupied area. The edges of the rendered occupied area have the visual features of the target edge. For details, please refer to [link to details]. Figure 2 Step S204 of the illustrated embodiment will not be described again here.
[0064] This embodiment provides a method for rendering the area occupied by virtual items, which can be used in electronic devices such as computer 101, mobile terminal 102, etc. Figure 5 This is a flowchart of a method for rendering the area occupied by virtual items according to an embodiment of this application, such as... Figure 5 As shown, the process includes the following steps: Step S501: Obtain the area occupied by virtual items in the item placement area within the game scene. For details, please refer to [link to details]. Figure 3 Step S301 of the illustrated embodiment will not be described again here.
[0065] Step S502: Map the occupied area to a preset texture coordinate system in screen space to obtain the first texture coordinate region corresponding to the occupied area. See details below. Figure 3 Step S302 of the illustrated embodiment will not be described again here.
[0066] Step S503: Based on the first texture coordinate region, perform texture sampling on the preset mask image to obtain the sampling result. The edge of the preset mask image has the visual features of the target edge.
[0067] Specifically, step S503 includes: Step S5031: Normalize the texture coordinate values corresponding to the first texture coordinate region to obtain the normalized target coordinate values.
[0068] Texture coordinates refer to the set of coordinate data corresponding to the occupied area in a preset texture coordinate system after coordinate mapping. It is typically represented as a coordinate range (e.g., a rectangular area defined by the U and V coordinates of its upper left and lower right corners). Target coordinates refer to the standardized coordinate data obtained after normalizing the texture coordinates, applicable to the current specific sampling and compositing operation. Specifically, the texture coordinates described by the first texture coordinate region characterize a specific interval occupied by the occupied area within the entire screen's normalized texture space (e.g., the complete range from the lower left corner (0,0) to the upper right corner (1,1)). Taking the horizontal direction (U direction) as an example, the range of this region is from U_min=0.3 to U_max=0.6. In order to subsequently use a preset mask image whose pattern and edge effects are strictly defined within its own [0, 1] coordinate system, the coordinate range of the currently occupied area must be normalized to the same [0, 1] range through linear mapping. This process typically involves two consecutive sub-operations: First, a translation transformation moves the starting point of the coordinate interval to zero, for example, (0.3, 0.6) becomes (0, 0.3) by subtracting the initial value 0.3; second, a scaling transformation scales the span of the translated interval to a unit length, that is, dividing each coordinate value in (0, 0.3) by its own span value of 0.3, thus finally obtaining the standard range of (0, 1). The coordinate values obtained after this translation and scaling normalization process are the target coordinate values. It establishes a standard local coordinate system with the occupied area itself as the boundary, so that regardless of the actual position and size of the original occupied area on the screen, the preset mask image can be correctly sampled through this set of unified target coordinate values, thereby ensuring that the patterns designed in the mask image (such as edge highlighting styles) can be accurately adapted and mapped to the corresponding edge positions of any occupied area, achieving a correct match between visual effects and spatial positions.
[0069] Step S5032: Sample the preset mask image based on the target coordinate values to obtain the sampling result.
[0070] The size of the preset mask image is adaptively adjusted according to the size of the virtual object's bounding box, ensuring that the mask image size matches the virtual object's projection size in screen space. This guarantees that the edge highlighting effect accurately adapts to the edges of different sized occupied areas. Specifically, the target coordinate values are used as input coordinates for the texture sampler. The sampler searches for these coordinates in the texture memory of the preset mask image. During the design and creation of the mask image, its texture data (such as RGB color values or alpha transparency values) is assigned significantly different feature values in the edge region (corresponding to areas with target coordinates close to 0 or 1) and the center region (corresponding to areas with target coordinates close to 0.5). This feature is the target edge visual feature. The sampling process returns the texture pixel value corresponding to each target coordinate point. Therefore, the sampling result is a data set that corresponds one-to-one with the pixels of the occupied area, containing the original values read from the mask image that reflect the distinction between edges and the center.
[0071] The rendering method for virtual item occupancy areas provided in this application normalizes the texture coordinate values corresponding to the first texture coordinate region, thus mapping the texture coordinate values corresponding to occupancy areas of different sizes and positions to a standardized numerical range (e.g., 0 to 1). This allows subsequent texture sampling to be performed on a unified and standardized coordinate reference, ensuring the universality and stability of the sampling logic and effectively avoiding sampling errors or inconsistent results that may be caused by differences in the original coordinate value range. The normalized target coordinate values provide a direct and accurate texture addressing basis for sampling the preset mask image, enabling the same preset mask image to be sampled stably and predictably using standard UV coordinates. This simplifies the implementation complexity of the sampling process, eliminating the need to customize special coordinate transformations or sampling logic for each different occupancy area.
[0072] Step S504: The sampling result is combined with the original rendered image of the occupied area to obtain the rendered occupied area. The edges of the rendered occupied area have the visual features of the target edge.
[0073] Specifically, the preset mask image is used to render a highlight effect at the edge of the occupied area; the above step S504 includes: mixing the sampling result with the original rendered image pixel by pixel to obtain the occupied area with the edge highlight effect.
[0074] The preset mask image is a pre-made static texture image whose edge regions have predefined target edge visual features used to control the shape of edge highlights. Specifically, the sampling result is mixed with the color value (RGB) of the corresponding pixel in the original rendered image, such as overlay, multiplication, linear interpolation, etc., without limitation. In a typical implementation, the sampling result value in the center region of the mask image is low (e.g., 0 or black), and the value in the edge region is high (e.g., 1 or white), such as... Figure 6 As shown. If pixel multiplication blending is performed, pixels in the central region of the original image are multiplied by a value close to 0, thus darkening them; while pixels in the edge regions are multiplied by a value close to 1, thus preserving or brightening them. In this way, the edge feature information contained in the sampling results is transformed into the visual contrast visible in the final image—the central region is suppressed, and the edge regions are highlighted, thereby achieving the visual effect of edge highlighting (or other preset effects), such as... Figure 7 The bold border shown.
[0075] The blending operation is specifically performed within the material shader associated with the virtual object or mesh unit, without requiring additional rendering passes or independent shaders. A preset highlight switch is provided in the material; when enabled, the sampled results are blended with the pixels of the original rendered image, brightening the edge areas and darkening the center areas to achieve the edge highlighting effect.
[0076] The rendering method for the virtual item's occupied area provided in this application embodiment, by pre-designing and using a mask image with specific edge highlighting effects, can solidify the visual style in the form of texture resources. This allows the expression of highlighting effects (such as glow and outline) to be precisely designed, flexibly adjusted, and highly consistent in advance. It eliminates the need to generate edge effects in real-time through complex shader programs or geometric processing during rendering, thus significantly reducing the complexity and performance overhead of real-time computation, while ensuring the controllability and artistic quality of the visual output. A pixel blending method is used to synthesize the sampled masking results with the original rendered image. This blending operation is performed in image space, is computationally simple and efficient, and consumes very little power. It can accurately superimpose highlighting effects on edge areas without affecting the main content of the original image.
[0077] In some alternative implementations, step S504 further includes: in response to the operation of placing a virtual item in the item placement area, stopping the highlight rendering of the edge of the occupied area.
[0078] Once a virtual item is placed, its corresponding highlight effect stops rendering. Specifically, the electronic device constantly monitors the player's interactive input. When a specific action that marks the placement of a virtual item is detected (such as releasing a mouse button, ending a touch, or issuing a confirmation command), the item's state logic is updated, marking it as placed or confirmed. Simultaneously, or immediately before the start of the next frame's rendering loop, the condition variables or state flags controlling the rendering process are modified. For example, it might disable the switch that triggers highlight calculations, stop performing the aforementioned coordinate mapping and sampling composition process for placed items, or directly instruct the shader to use a simplified version without highlight branches for rendering. Therefore, starting from the frame after the player performs the placement operation, the special edge rendering effects for the area occupied by the virtual item are no longer calculated and drawn, and its visual appearance reverts to a normal static image, clearly indicating to the user that the placement operation is complete.
[0079] In the above implementation, by accurately responding to the explicit user action of placing virtual items as a trigger condition to automatically stop the highlight rendering of the corresponding occupied area, strict synchronization between the interactive state and visual feedback is achieved, ensuring the high predictability and logical consistency of the system behavior. This allows players to immediately obtain clear visual confirmation after completing the placement action, i.e., the temporary guidance prompt (highlight) ends, thereby avoiding interference to the interface caused by invalid or outdated prompt information.
[0080] In some optional implementations, if the area occupied by a new virtual item overlaps with the area occupied by an already placed virtual item during dragging, the overlapping area can be marked with a preset color (such as red) in the interaction logic layer to indicate a placement conflict. This conflict indication does not affect the rendering effect of the outermost highlighted edge. For example, as... Figure 7 As shown, due to the overlap of virtual items, the area (6 squares) within the dashed frame can be marked in red (replaced by small circles in the image) to clearly indicate the placement conflict, without affecting the normal display of the outermost highlighted edge (thick border).
[0081] In the following embodiment, the rendering method of the area occupied by the above-mentioned virtual items will be described by way of example in the context of a game scene with a window-style grid display system.
[0082] When a player drags a virtual item (such as a figurine) from their inventory to a gridded display area, the system quickly calculates the specific set of grid cells it covers within the fixed grid layout, based on the figurine's axis-aligned bounding box size and its current dragged position (usually using the model's preset anchor point, such as the lower left corner). This calculation involves only simple two-dimensional planar projection and grid index conversion, without requiring access to the model's complex geometric data, making it extremely efficient.
[0083] Subsequently, the calculated occupied grid area is mapped to the normalized UV coordinate system of the screen space. Since the position and range of the display case's grid interface on the screen are predetermined and fixed, the texture coordinate range corresponding to this occupied area can be directly obtained through scaling (e.g., from U=0.3 to U=0.6, V=0.2 to V=0.5). Next, this coordinate range is normalized to fit a pre-made edge mask texture map (i.e., a highlight mask map). This map is carefully designed, with a dark (close to black) central area and a light (close to white) edge area, so that after sampling, it can naturally form a gradient effect from the center to the edge.
[0084] During the rendering compositing stage, a built-in highlight switch is enabled in the existing material shader of the item or mesh unit to perform pixel-level multiplication and blending with the original rendered image of the mesh area. After blending, the central part of the occupied area appears darker due to the lower multiplication value, while the edge parts appear brighter due to the higher multiplication value, thus forming a clear, soft, and well-fitting highlighted outline that conforms to the mesh boundary. This process is completed entirely within the existing rendering pipeline without the need for additional rendering passes or independent shaders, maximizing rendering efficiency.
[0085] Furthermore, if a player drags a new item that overlaps with the area occupied by an already placed item, the overlapping grid will be marked with a warning color (such as red) at the logical level, while the outermost edge will continue to be highlighted at the rendering layer. In this way, players can clearly perceive placement conflicts without affecting their intuitive judgment of the available placement area for the current item. Once the player releases the item and confirms placement, the corresponding highlight effect immediately stops rendering, the interface returns to a static display state, and the interactive feedback is clean and crisp.
[0086] The rendering method for virtual item-occupied areas provided in this application, through a lightweight technical path of "mesh mapping + UV sampling + material synthesis", greatly reduces the computational overhead of GPU and CPU while ensuring exquisite visual effects and real-time response. It is especially suitable for deployment on mobile devices or large-scale multiplayer online games, providing players with a smooth, intuitive and expressive item management experience, thereby achieving the best balance between improving game interaction quality and rendering performance.
[0087] This embodiment also provides a rendering device for the area occupied by virtual items. This device is used to implement the above embodiments and preferred embodiments, and details already described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the device described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.
[0088] This embodiment provides a rendering device for the area occupied by virtual items, such as... Figure 8 As shown, it includes: Module 801 is used to obtain the area occupied by virtual items in the item placement area in the game scene; The mapping module 802 is used to map the occupied area to a preset texture coordinate system in the screen space to obtain the first texture coordinate area corresponding to the occupied area; The sampling module 803 is used to perform texture sampling on the preset mask image based on the first texture coordinate region to obtain the sampling result. The edge of the preset mask image has the visual features of the target edge. The compositing module 804 is used to combine the sampling results with the original rendered image of the occupied area to obtain the rendered occupied area, and the edges of the rendered occupied area have the visual features of the target edge.
[0089] In some optional implementations, the acquisition module 801 includes: The display submodule is used to display the item placement area in the game scene; The first acquisition submodule is used to acquire the bounding box information and placement location information of virtual items; The determination submodule is used to determine the area occupied by virtual items in the item placement area based on bounding box information and placement location information.
[0090] In some optional implementations, the item placement area is an item grid placement area, which is composed of multiple first grid cells, and the placement position information is the second grid cell in which a preset vertex of the virtual item is located within the item grid placement area; the determining submodule includes: The first determining unit is used to determine, based on bounding box information and the second grid unit, at least one third grid unit covered by the virtual item in the item grid placement area; The second determining unit is used to determine at least one third grid cell as the occupied area.
[0091] In some alternative implementations, the mapping module 802 includes: The second acquisition submodule is used to acquire the first position information of the item placement area in the screen space, as well as the size information of the screen space; The third determining unit is used to determine the second texture coordinate region corresponding to the item placement area in the preset texture coordinate system based on the first position information and size information; The fourth determining unit is used to determine the relative position ratio of the occupied area in the item placement area based on the second position information of the occupied area within the item placement area; The fifth determining unit is used to determine the first texture coordinate region corresponding to the occupied area in the preset texture coordinate system based on the relative position ratio and the second texture coordinate region.
[0092] In some alternative implementations, the sampling module 803 includes: The processing submodule is used to normalize the texture coordinate values corresponding to the first texture coordinate region to obtain the normalized target coordinate values. The sampling submodule is used to sample a preset mask image based on the target coordinate values to obtain the sampling results.
[0093] In some optional implementations, a preset mask image is used to render a highlight effect at the edges of the occupied area; the compositing module 804 includes: The blending submodule is used to blend the sampled results with the original rendered image pixel by pixel to obtain an occupied area with edge highlighting effect.
[0094] In some alternative implementations, the synthesis module 804 further includes: The Stop submodule is used to stop highlighting the edges of the occupied area in response to the operation of placing a virtual item in the item placement area.
[0095] The rendering apparatus for virtual item occupancy areas provided in this application can execute the rendering method for virtual item occupancy areas provided in any embodiment of this application, and has the corresponding functional modules and beneficial effects for executing the method. Further functional descriptions of the above modules and units are the same as those in the corresponding embodiments described above, and will not be repeated here.
[0096] Figure 9 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.
[0097] The following is a detailed reference. Figure 9 This diagram illustrates a suitable structural schematic for implementing the electronic device described in the embodiments of this application. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 901, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 902 or a program loaded from memory 908 into random access memory (RAM) 903. The RAM 903 also stores various programs and data required for the operation of the electronic device. The processor 901, ROM 902, and RAM 903 are interconnected via a bus 904. An input / output (I / O) interface 905 is also connected to the bus 904.
[0098] Typically, the following devices can be connected to I / O interface 905: input devices 906 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 907 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 908 including, for example, magnetic tapes, hard disks, etc.; and communication devices 909. Communication device 909 allows electronic devices to exchange data via wireless or wired communication with other devices. Although Figure 9 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.
[0099] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 909, or installed from a memory 908, or installed from a ROM 902. When the computer program is executed by the processor 901, it performs the functions defined in the rendering method for the virtual item occupancy area of embodiments of this application.
[0100] Figure 9 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.
[0101] This application also provides a computer-readable storage medium. The methods described in this application can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded over a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and then stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the rendering method for the virtual item occupancy area shown in the above embodiments is implemented.
[0102] A portion of this application can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to this application through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, installation package files, etc. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions, or the computer compiling the instructions and then executing the corresponding compiled program, or the computer reading and executing the instructions, or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.
[0103] Although embodiments of this application have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of this application, and all such modifications and variations fall within the scope defined by the appended claims.
Claims
1. A method for rendering the area occupied by a virtual item, characterized in that, include: Get the area occupied by virtual items in the item placement area in the game scene; The occupied area is mapped to a preset texture coordinate system in the screen space to obtain the first texture coordinate region corresponding to the occupied area; Based on the first texture coordinate region, a preset mask image is sampled to obtain a sampling result, and the edge of the preset mask image has target edge visual features; The sampling result is combined with the original rendered image of the occupied area to obtain the rendered occupied area, and the edge of the rendered occupied area has the visual features of the target edge.
2. The method according to claim 1, characterized in that, The process of obtaining the area occupied by virtual items in the item placement area in the game scene includes: Displays the item placement area in the game scene; Obtain the bounding box information and placement location information of the virtual item; Based on the bounding box information and the placement location information, the area occupied by the virtual item in the item placement area is determined.
3. The method according to claim 2, characterized in that, The item placement area is an item grid placement area, which is composed of multiple first grid units. The placement position information is the second grid unit in which the preset vertex of the virtual item is located in the item grid placement area. The step of determining the area occupied by the virtual item in the item placement area based on the bounding box information and the placement location information includes: Based on the bounding box information and the second grid cell, at least one third grid cell is determined to be covered by the virtual item in the item grid placement area; At least one of the third grid cells is identified as the occupied area.
4. The method according to claim 1 or 2, characterized in that, The step of mapping the occupied area to a preset texture coordinate system in screen space to obtain the first texture coordinate region corresponding to the occupied area includes: Obtain the first position information of the item placement area in the screen space, and the size information of the screen space; Based on the first location information and the size information, the second texture coordinate region corresponding to the item placement area under the preset texture coordinate system is determined; Based on the second location information of the occupied area within the item placement area, the relative position ratio of the occupied area within the item placement area is determined; Based on the relative position ratio and the second texture coordinate region, the first texture coordinate region corresponding to the occupied region in the preset texture coordinate system is determined.
5. The method according to claim 1, characterized in that, The step of sampling the preset mask image based on the first texture coordinate region to obtain the sampling result includes: The texture coordinate values corresponding to the first texture coordinate region are normalized to obtain the normalized target coordinate values. The preset masking image is sampled based on the target coordinate values to obtain the sampling result.
6. The method according to claim 1 or 5, characterized in that, The preset mask image is used to render a highlight effect at the edge of the occupied area; The step of combining the sampling result with the original rendered image of the occupied area to obtain the rendered occupied area includes: The sampling results are pixel-blended with the original rendered image to obtain an occupied area with edge highlighting effect.
7. The method according to claim 6, characterized in that, The method further includes: In response to the operation of placing the virtual item in the item placement area, stop highlighting the edges of the occupied area.
8. A rendering device for the area occupied by a virtual item, characterized in that, The device includes: The acquisition module is used to acquire the area occupied by virtual items in the item placement area in the game scene; The mapping module is used to map the occupied area to a preset texture coordinate system in the screen space to obtain the first texture coordinate region corresponding to the occupied area; The sampling module is used to perform texture sampling on the preset mask image based on the first texture coordinate region to obtain the sampling result, wherein the edge of the preset mask image has target edge visual features; The compositing module is used to combine the sampling results with the original rendered image of the occupied area to obtain the rendered occupied area, wherein the edges of the rendered occupied area have target edge visual features.
9. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory stores computer instructions, and the processor executes the computer instructions to perform the rendering method for the virtual item occupied area according to any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a computer to execute the rendering method for the virtual item-occupied area as described in any one of claims 1 to 7.