Method, device, equipment, storage medium and program product for rendering bullet screen characters

Abstract

The present application provides a method, apparatus, device, storage medium and program product for rendering barrage characters; the method comprises: determining whether there is a signed distance field texture of the barrage character to be rendered in a signed distance field texture set; when the signed distance field texture of the barrage character exists in the signed distance field texture set, obtaining the signed distance field texture from the signed distance field texture set, and, when the signed distance field texture of the barrage character does not exist in the signed distance field texture set, generating the signed distance field texture of the barrage character; determining the texture coordinates of each vertex in the barrage character, and extracting the vertex texture information of each vertex from the signed distance field texture based on the texture coordinates of each vertex; rendering the barrage character based on the vertex texture information of each vertex to obtain the rendered barrage character; through the present application, the rendering efficiency and rendering effect of the barrage character can be improved.

Description

Technical Field

[0001] The present application relates to the field of Internet technology, and in particular to a method, device, equipment, storage medium and program product for rendering bullet screen characters. Background Art

[0002] With the rapid development of the Internet, users can express their personal opinions by posting barrages when watching or listening to media information (such as video, audio). Therefore, it is necessary to render and display the barrage characters. In the related art, for the rendering of barrage characters, the canvas component provided by the operating system is used to call the system interface to draw the corresponding bitmap, thereby obtaining a bitmap character. However, since it is a bitmap character, each barrage character needs to draw the corresponding bitmap in real time, which will lead to excessive occupation and waste of device resources, resulting in stuck situations, and poor rendering effect of barrage characters. Summary of the Invention

[0003] The embodiments of the present application provide a method, device, electronic device, computer-readable storage medium and computer program product for rendering barrage characters, which can improve the rendering efficiency and rendering effect of barrage characters.

[0004] The technical solution of the embodiment of the present application is implemented as follows:

[0005] The present application provides a method for rendering bullet screen characters, including:

[0006] Determine whether there is a signed distance field texture of the bullet chat character to be rendered in the signed distance field texture set;

[0007] When the signed distance field texture of the bullet chat character exists in the signed distance field texture set, acquiring the signed distance field texture from the signed distance field texture set; and, when the signed distance field texture of the bullet chat character does not exist in the signed distance field texture set, generating the signed distance field texture of the bullet chat character;

[0008] Determining the texture coordinates of each vertex in the bullet screen character, and extracting vertex texture information of each vertex from the signed distance field texture based on the texture coordinates of each vertex;

[0009] The barrage characters are rendered based on the vertex texture information of each vertex to obtain rendered barrage characters.

[0010] The present application also provides a device for rendering bullet screen characters, including:

[0011] A determination module, configured to determine whether there is a signed distance field texture of a bullet chat character to be rendered in the signed distance field texture set;

[0012] an acquisition module, configured to, when the signed distance field texture of the bullet chat character exists in the signed distance field texture set, acquire the signed distance field texture from the signed distance field texture set; and, when the signed distance field texture of the bullet chat character does not exist in the signed distance field texture set, generate the signed distance field texture of the bullet chat character;

[0013] An extraction module, configured to determine the texture coordinates of each vertex in the bullet screen character, and extract vertex texture information of each vertex from the signed distance field texture based on the texture coordinates of each vertex;

[0014] The rendering module is used to render the barrage characters based on the vertex texture information of each vertex to obtain rendered barrage characters.

[0015] An embodiment of the present application further provides an electronic device, including:

[0016] a memory for storing computer-executable instructions;

[0017] The processor is used to implement the method for rendering barrage characters provided in the embodiment of the present application when executing the computer executable instructions stored in the memory.

[0018] An embodiment of the present application also provides a computer-readable storage medium storing computer-executable instructions. When the computer-executable instructions are executed by a processor, the method for rendering barrage characters provided in an embodiment of the present application is implemented.

[0019] An embodiment of the present application also provides a computer program product, including computer-executable instructions. When the computer-executable instructions are executed by a processor, the method for rendering barrage characters provided in the embodiment of the present application is implemented.

[0020] The embodiments of the present application have the following beneficial effects:

[0021] Applying the above-mentioned embodiment of the present application, it is first determined whether there is a signed distance field texture of the barrage character to be rendered in the signed distance field texture set; when the signed distance field texture of the barrage character exists in the signed distance field texture set, the signed distance field texture is obtained from the signed distance field texture set, and, when the signed distance field texture of the barrage character does not exist in the signed distance field texture set, the signed distance field texture of the barrage character is generated; then, the texture coordinates of each vertex in the barrage character are determined, and based on the texture coordinates of each vertex, the vertex texture information of each vertex is extracted from the signed distance field texture; finally, based on the vertex texture information of each vertex, the barrage character is rendered to obtain the rendered barrage character.

[0022] Here, the signed distance field textures of some barrage characters are pre-stored through a signed distance field texture set. When rendering barrage characters, if the signed distance field texture of the barrage character exists in the signed distance field texture set, the signed distance field texture of the barrage character can be directly obtained from the signed distance field texture set. If the signed distance field texture of the barrage character does not exist in the signed distance field texture set, the signed distance field texture of the barrage character is generated. In this way, 1) the device resources required to generate the signed distance field texture of the barrage character each time can be reduced, thereby improving the rendering efficiency of the barrage characters; 2) the signed distance field texture of the barrage characters that is missing from the signed distance field texture set can be compensated by generating it in real time; thus, the rendering effect of the barrage characters is improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] Figure 1 This is a schematic diagram of the architecture of the bullet screen character rendering system provided in an embodiment of the present application;

[0024] Figure 2 is a structural diagram of an electronic device provided in an embodiment of the present application;

[0025] Figure 3 This is a flowchart of a method for rendering bullet screen characters provided in an embodiment of the present application;

[0026] Figure 4 This is a schematic diagram of displaying rendered bullet screen characters provided by an embodiment of the present application;

[0027] Figure 5 This is a flowchart of a method for rendering bullet screen characters provided in an embodiment of the present application;

[0028] Figure 6 Schematic diagram of the character bitmap of the bullet screen characters provided in the embodiment of the present application;

[0029] Figure 7 This is a schematic diagram of a process for determining a signed distance field texture provided by an embodiment of the present application;

[0030] Figure 8 This is a schematic diagram of a process for determining a signed distance field texture provided by an embodiment of the present application;

[0031] Figure 9 This is a schematic diagram of a process for determining a signed distance field texture provided by an embodiment of the present application;

[0032] Figure 10 This is a schematic diagram of a process for determining a signed distance field texture provided by an embodiment of the present application;

[0033] Figure 11 This is a schematic diagram of a process for determining a signed distance field texture provided by an embodiment of the present application;

[0034] Figure 12 This is a schematic diagram of a process for determining a signed distance field texture provided by an embodiment of the present application;

[0035] Figure 13 is a schematic diagram showing a signed distance field texture provided by an embodiment of the present application;

[0036] Figure 14 This is a schematic diagram of the vertices of the bullet screen characters provided in an embodiment of the present application. DETAILED DESCRIPTION

[0037] In order to make the purpose, technical solutions and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limiting this application. All other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0038] In the following description, reference is made to “some embodiments”, which describes a subset of all possible embodiments, but it will be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0039] In the following description, the terms "first\second\third" involved are merely used to distinguish similar objects and do not represent a specific ordering of the objects. It can be understood that "first\second\third" can be interchanged with a specific order or sequence where permitted, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein.

[0040] In the embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program that has a predetermined function and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.

[0041] Unless otherwise defined, all technical and scientific terms used in the embodiments of the present application have the same meanings as those commonly understood by those skilled in the art. The terms used in the embodiments of the present application are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0042] Before further describing the embodiments of the present application in detail, the nouns and terms involved in the embodiments of the present application are explained. The nouns and terms involved in the embodiments of the present application are subject to the following interpretations.

[0043] 1) Client: An application running in a terminal to provide various services, such as a client that supports the playback of media information (such as audio and video).

[0044] 2) In response to: used to indicate the conditions or states on which the executed operations depend. When the dependent conditions or states are met, one or more operations executed can be in real time or with a set delay. Unless otherwise specified, there is no restriction on the order in which the multiple operations executed are executed.

[0045] 3) Signed Distance Field (SDF): A signed distance field is a bitmap that marks the distance from each pixel to the nearest edge of a geometric object. If the pixel is inside the geometric object, the distance is positive; if the pixel is outside the geometric object, the distance is negative; if the pixel is exactly on the edge, the distance is 0.

[0046] 4) Static SDF atlas (i.e., the signed distance field texture set in this application): an atlas and text file generated by the user using a bitmap font tool on an electronic device, containing an SDF texture atlas and a character information file. The SDF texture atlas stores SDF bitmaps (SDF textures) of several characters. The bitmap format is RGBA, which is a color space model. RGBA represents red, green, blue, and alpha channels. Usually the distance information is stored in the alpha channel. The character information file contains the position information of the characters appearing in the SDF bitmap, such as the width, height, coordinates, etc. of the characters in the bitmap. The advantage is that there is no need to generate character SDF textures during runtime, and it is only necessary to obtain the texture information of the corresponding characters from the SDF texture based on the character information.

[0047] 5) Dynamic SDF atlas (also referred to as a dynamic signed distance field texture set in this application): This atlas is dynamically generated by the program at runtime based on character input. Similar to a static SDF atlas, it consists of an SDF texture atlas containing several characters and a mapping table of their character information (the primary key is the character's Unicode code, and the value is the character information for that character). It typically exists only in memory to facilitate dynamic addition and deletion.

[0048] 6) Anti-aliasing: This technique uses color grading to smooth out the jagged edges of graphics. Due to resolution limitations, the edges of objects will always appear jagged to some degree. Anti-aliasing softens these edges, making them appear smoother and closer to the real thing.

[0049] 7) Shader: It is a computer program that was originally used for image shading (calculating the lighting, brightness, color, etc. in the image). However, recently, it has also been used to complete tasks in many different fields, such as processing CG special effects, performing film post-processing unrelated to shading, and even used in some other fields unrelated to computer graphics. Unlike ordinary programs, it runs on a graphics processing unit (GPU). There are many types of shaders, such as vertex shaders and fragment shaders. The vertex shader converts each vertex in the model into a pixel on the screen (such as coordinate transformation), and the fragment shader converts each pixel on the model into a pixel on the screen (such as lighting calculation, texture sampling, etc.). Developers can modify the vertex information and pixel information of the graphics through custom shaders to achieve different effects.

[0050] 8) Bitmap fonts (or bitmap characters): Also called dot-matrix fonts, each glyph is represented by a set of two-dimensional pixels. Because they are bitmapped, dot-matrix fonts are difficult to scale. A specific dot-matrix font can only be clearly displayed at a specific font size. Otherwise, the text will be forcibly enlarged, which will damage the glyph shape and produce mosaic-like jagged edges.

[0051] 9) Texture sampling: The process of getting the color of the corresponding position in the texture image based on the texture coordinates of the fragment. The texture sampling process is similar to sampling on an image. When an electronic device needs to render a texture on the surface of a three-dimensional model, it will obtain the color value of the corresponding position from the texture image based on the texture coordinates of each vertex on the model surface (that is, the position of each vertex on the texture image). This process is called texture sampling. The texture coordinates are on the x and y axes and range from 0 to 1. During the texture sampling process, electronic devices usually use an interpolation algorithm to determine the color values ​​between the texture coordinates.

[0052] Based on the above description of the nouns and terms involved in the embodiments of this application, the embodiments of this application are described in detail below. The embodiments of this application provide a method, device, electronic device, computer-readable storage medium and computer program product for rendering barrage characters, which can improve the rendering efficiency and rendering effect of barrage characters.

[0053] It should be noted that the collection and processing of relevant data in this application should be strictly in accordance with the requirements of relevant laws and regulations when applied in practice, and the informed consent or separate consent of the personal information subject should be obtained. Subsequent data use and processing should be carried out within the scope of authorization of laws and regulations and the personal information subject.

[0054] The following describes the rendering system of the bullet screen characters provided by the embodiment of the present application. Figure 1 , Figure 11 is a schematic diagram of the architecture of a bullet-screen character rendering system provided in an embodiment of the present application. To support an exemplary application, the bullet-screen character rendering system 100 includes: a server 200, a network 300, and a terminal 400. The terminal 400 is connected to the server 200 via the network 300. The network 300 can be a wide area network, a local area network, or a combination of the two, using wireless or wired links for data transmission.

[0055] Here, the terminal 400 (for example, a client running a device supporting the playback of media information (such as audio and video)) sends a rendering request for the barrage characters to the server 200 in response to a publishing instruction for the barrage characters; the server 200 receives the rendering request for the barrage characters sent by the terminal 400; in response to the rendering request, it is determined whether there is a directed distance field texture of the barrage characters to be rendered in the directed distance field texture set; when there is a directed distance field texture of the barrage characters in the directed distance field texture set, the directed distance field texture is obtained from the directed distance field texture set. Also, when there is no signed distance field texture of the barrage character in the signed distance field texture set, a signed distance field texture of the barrage character is generated; the texture coordinates of each vertex in the barrage character are determined, and based on the texture coordinates of each vertex, the vertex texture information of each vertex is extracted from the signed distance field texture; the vertex texture information of each vertex is returned to the terminal 400; the terminal 400 receives the vertex texture information of each vertex returned by the server 200; the barrage character is rendered based on the vertex texture information of each vertex to obtain the rendered barrage character; and the rendered barrage character is displayed.

[0056] In some embodiments, the method for rendering bullet screen characters provided in the embodiments of the present application is implemented by an electronic device, for example, it can be implemented by a terminal alone, it can also be implemented by a server alone, or it can be implemented by a terminal and a server in collaboration. The embodiments of the present application can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, smart transportation, assisted driving, audio and video, instant messaging, games, live broadcasts, etc.

[0057] In some embodiments, the electronic device for implementing the rendering method of bullet screen characters provided in the embodiments of the present application may be various types of terminals or servers. Among them, the server (such as server 200) may be an independent physical server, or it may be a server cluster or distributed system composed of multiple physical servers. The terminal (such as terminal 400) may be a laptop, a tablet computer, a desktop computer, a smart phone, an intelligent voice interaction device (such as a smart speaker), a smart home appliance (such as a smart TV), a smart watch, a car terminal, a wearable device, a virtual reality (VR) device, an aircraft, etc., but is not limited thereto. The terminal and the server may be directly or indirectly connected via wired or wireless communication, and the embodiments of the present application do not limit this.

[0058] In some embodiments, the rendering method of the barrage characters provided in the embodiments of the present application can be implemented with the aid of cloud technology. Cloud technology refers to a hosting technology that unifies a series of resources such as hardware, software, and network in a wide area network or a local area network to realize the calculation, storage, processing, and sharing of data. Cloud technology is a general term for network technology, information technology, integration technology, management platform technology, and application technology based on the cloud computing business model application. It can form a resource pool that is used on demand and is flexible and convenient. Cloud computing technology will become an important support. The background services of the technical network system require a large amount of computing resources and storage resources. As an example, the server (such as server 200) can also be a cloud server that provides cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDN), and basic cloud computing services such as big data and artificial intelligence platforms.

[0059] In some embodiments, the terminal or server can implement the rendering method of the barrage characters provided in the embodiment of the present application by running various computer executable instructions or computer programs. For example, computer executable instructions can be microprogram-level commands, machine instructions or software instructions. The computer program can be a native program or software module in the operating system; it can be a local (Native) application (Application, APP), that is, a program that needs to be installed in the operating system to run, such as a client that supports media information playback; it can also be a small program that can be embedded in any APP, that is, a program that can be run only by downloading it to a browser environment. In short, the above-mentioned computer executable instructions can be instructions in any form, and the above-mentioned computer program can be an application, module or plug-in in any form.

[0060] The following describes an electronic device that implements a method for rendering bullet screen characters provided by an embodiment of the present application. Figure 2 , Figure 2 Schematic diagram of the structure of the electronic device provided in the embodiment of the present application. The electronic device 500 provided in the embodiment of the present application can be a terminal or a server. Figure 2 As shown, the electronic device 500 includes: at least one processor 510, a memory 550, at least one network interface 520 and a user interface 530. The various components in the electronic device 500 are coupled together via a bus system 540. It is understood that the bus system 540 is used to achieve connection and communication between these components. In addition to the data bus, the bus system 540 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, the bus system 540 is not described in detail. Figure 2Various buses are labeled as bus system 540 .

[0061] The processor 510 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0062] The user interface 530 includes one or more output devices 531 that enable presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 530 also includes one or more input devices 532, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0063] The memory 550 may be removable, non-removable, or a combination thereof. The memory 550 may include one or more storage devices physically remote from the processor 510. The memory 550 includes volatile memory or non-volatile memory, or may include both volatile memory and non-volatile memory. The non-volatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM). The memory 550 described in the embodiments of the present application is intended to include any suitable type of memory.

[0064] In some embodiments, the memory 550 can store data to support various operations, examples of which include programs, modules, and data structures, or a subset or superset thereof, as exemplified below.

[0065] Operating system 551, including system programs for processing various basic system services and performing hardware-related tasks, such as the framework layer, core library layer, driver layer, etc., for implementing various basic services and processing hardware-based tasks;

[0066] A network communication module 552 for reaching other electronic devices via one or more (wired or wireless) network interfaces 520 , exemplary network interfaces 520 including Bluetooth, Wi-Fi, and Universal Serial Bus (USB);

[0067] a presentation module 553 for enabling presentation of information via one or more output devices 531 (e.g., a display screen, a speaker, etc.) associated with the user interface 530 (e.g., a user interface for operating peripheral devices and displaying content and information);

[0068] The input processing module 554 is configured to detect one or more user inputs or interactions from one of the one or more input devices 532 and to translate the detected inputs or interactions.

[0069] In some embodiments, the rendering device of the bullet screen characters provided in the embodiments of the present application can be implemented in software. Figure 2 A rendering device 555 of barrage characters stored in a memory 550 is shown, which can be software in the form of programs and plug-ins, including the following software modules: a determination module 5551, an acquisition module 5552, an extraction module 5553 and a rendering module 5554. These modules are logical, so they can be arbitrarily combined or further split according to the functions implemented. The functions of each module will be explained below.

[0070] The following describes the method for rendering the bullet screen characters provided by the embodiment of the present application. As mentioned above, the method for rendering the bullet screen characters provided by the embodiment of the present application is implemented by an electronic device, for example, it can be implemented by a server or a terminal alone, or by a server and a terminal in collaboration. Therefore, the execution body of each step will not be repeated below. See Figure 3 , Figure 3 : is a flowchart of a method for rendering barrage characters provided in an embodiment of the present application. The method for rendering barrage characters provided in an embodiment of the present application includes:

[0071] Step 101: Determine whether there is a signed distance field texture of the bullet screen character to be rendered in the signed distance field texture set.

[0072] In step 101, for the barrage characters to be rendered, determine whether there is a signed distance field texture of the barrage characters in the signed distance field texture set. Here, the signed distance field texture set is pre-constructed, and the signed distance field texture set includes signed distance field textures of multiple target barrage characters. The signed distance field texture is also called a signed distance field texture map (or a signed distance field bitmap), which is in RGBA format. RGBA is a color space model. RGBA represents red, green, blue and alpha channels. The distance information of the signed distance field texture is stored in the alpha channel. Barrage characters may include but are not limited to text, emoticons, emoticons, emojis, specific graphics, pictures, and other characters used for barrage.

[0073] In some embodiments, before determining whether a signed distance field texture of a bullet screen character to be rendered exists in a signed distance field texture set, the following steps may be performed: determining multiple target bullet screen characters for the bullet screen; generating a target signed distance field texture for each target bullet screen character; and constructing a signed distance field texture set based on each target signed distance field texture.

[0074] Here, when constructing a signed distance field texture set, a plurality of target barrage characters for barrage are first determined. For example, the target barrage character may be a barrage character whose usage frequency reaches a frequency threshold, may be a barrage character related to audio and video being played recently, may be a special character that may be used but is not used frequently, and so on. Then a target signed distance field texture is generated for each target barrage character. Finally, based on each target signed distance field texture, a signed distance field texture set is constructed. In practical applications, when constructing a signed distance field texture set based on each target signed distance field texture, for each target signed distance field texture, character information of the target barrage character in the target signed distance field texture may also be associated and stored. The character information may include the size of the target barrage character (including height and width), the position information of the target barrage character in the target signed distance field texture, etc. The position information may be the vertex coordinates (x, y) of a vertex or certain vertices in the target barrage character in the target signed distance field texture.

[0075] In some embodiments, a signed distance field texture of a target barrage character can be generated by executing the following steps: generating a character bitmap of the target barrage character; determining the closest distance between each pixel in the character bitmap and the character edge of the target barrage character; normalizing the closest distance corresponding to each pixel to obtain a normalized result corresponding to each pixel; filling the transparency channel value of each pixel with the normalized result, and filling the red, green, and blue (RGB) channel values ​​of each pixel with 1 to obtain a signed distance field texture of the target barrage character.

[0076] Here, first generate the character bitmap of the target barrage character. For example, you can call the system drawing interface to draw the character bitmap of the target barrage character. Then determine the closest distance between each pixel in the character bitmap and the character edge of the target barrage character. For example, you can use a signed distance field algorithm to determine the closest distance between each pixel in the character bitmap and the character edge of the target barrage character. Then normalize the closest distance corresponding to each pixel to obtain the normalized result corresponding to each pixel. Finally, fill the transparency channel value of each pixel with the normalized result, and fill the red, green, and blue RGB channel values ​​of each pixel with 1 to obtain the signed distance field texture of the target barrage character.

[0077] It should be noted that the signed distance field texture set can also be updated according to preset update conditions. For example, every once in a while, the signed distance field textures with a usage frequency below a threshold can be filtered out; new signed distance field textures can also be added based on the audio and video being played recently; new signed distance field textures can also be added based on the barrage characters recently entered by the user, and so on.

[0078] Step 102: When the signed distance field texture of the bullet chat characters exists in the signed distance field texture set, obtaining the signed distance field texture from the signed distance field texture set; and, when the signed distance field texture of the bullet chat characters does not exist in the signed distance field texture set, generating the signed distance field texture of the bullet chat characters.

[0079] In step 102, if it is determined that a signed distance field texture for the bullet chat characters exists in the signed distance field texture set, then the signed distance field texture can be directly obtained from the signed distance field texture set so that the bullet chat characters can be rendered based on the signed distance field texture in subsequent steps. If it is determined that a signed distance field texture for the bullet chat characters does not exist in the signed distance field texture set, then a signed distance field texture for the bullet chat characters is generated immediately. In actual applications, the generated signed distance field texture can also be associated with and stored with the character information of the bullet chat characters in the signed distance field texture. This character information may include the size of the bullet chat characters (including height and width), the position information of the bullet chat characters in the signed distance field texture, etc. The position information may be the vertex coordinates (x, y) of a vertex or vertices of the bullet chat characters in the signed distance field texture.

[0080] The adoption of steps 101-102 is based on the consideration that the barrage characters involved in the barrage scene are often diverse. Therefore, the embodiment of the present application adopts a method of combining dynamic and static characters, namely: pre-constructing a signed distance field texture set of the target barrage characters (corresponding to static characters). If the signed distance field texture set has the signed distance field texture of the barrage characters to be rendered, it is directly used, thereby reducing the equipment resources required to generate the signed distance field texture of the barrage characters each time, reducing the performance overhead of the barrage character rendering, and improving the efficiency of the barrage character rendering; and if the signed distance field texture set does not have the signed distance field texture of the barrage characters to be rendered, the signed distance field texture of the barrage characters (corresponding to dynamic characters) is generated immediately, thereby achieving the effect of compensating for the lack of static characters by generating characters in an instant manner, thereby improving the rendering success rate of the barrage characters. In this way, the rendering efficiency and rendering success rate of the barrage characters are balanced, the performance overhead of the barrage character rendering is reduced, and the equipment resources are reduced.

[0081] In some embodiments, when the signed distance field texture for the bullet chat characters does not exist in the signed distance field texture set, after generating the signed distance field texture for the bullet chat characters, the following steps may be further performed: determining whether there is an idle area in the dynamic signed distance field texture set; when the dynamic signed distance field texture set has an idle area, adding the signed distance field texture to the idle area of ​​the dynamic signed distance field texture set; when the dynamic signed distance field texture set does not have an idle area, generating a target signed distance field texture set, wherein the capacity of the target signed distance field texture set is greater than that of the dynamic signed distance field texture set; and adding the signed distance field texture and the dynamic signed distance field texture in the dynamic signed distance field texture set to the target signed distance field texture set.

[0082] Here, for the instantly generated signed distance field textures of the bullet chat characters, the signed distance field textures of the bullet chat characters can be stored in a dynamic signed distance field texture set for subsequent reuse. Specifically, it is first determined whether there is an idle area in the dynamic signed distance field texture set. If so, the signed distance field textures of the bullet chat characters are directly stored in the dynamic signed distance field texture set. If not, a target signed distance field texture set is generated, the capacity of which is greater than that of the dynamic signed distance field texture set. Then, the signed distance field textures of the bullet chat characters and the original dynamic signed distance field textures in the dynamic signed distance field texture set are added to the target signed distance field texture set. In this way, the capacity of the dynamic signed distance field texture set is expanded.

[0083] In some embodiments, after adding the signed distance field texture and the dynamic signed distance field texture in the dynamic signed distance field texture set to the target signed distance field texture set, the following steps may be performed: adding the dynamic signed distance field texture set to a queue of texture sets to be destroyed; and, subsequently, the following steps may be performed: determining the number of components of the components rendered based on the dynamic signed distance field texture set; and when the number of components reaches zero, destroying the dynamic signed distance field texture set.

[0084] Here, since all existing dynamic signed distance field textures in the dynamic signed distance field texture set are added to the newly generated target signed distance field texture set, the dynamic signed distance field texture set can be added to the queue of texture sets to be destroyed. Based on this, the number of components used to render bullet screen characters based on the dynamic signed distance field texture set in the queue of texture sets to be destroyed can be detected in real time or periodically. When the number of components is detected to be zero, the dynamic signed distance field texture set can be destroyed to free up storage space.

[0085] In some embodiments, the signed distance field texture of the bullet-screen characters can be generated by executing the following steps: generating a character bitmap of the bullet-screen characters; determining the closest distance between each pixel in the character bitmap and the character edge of the bullet-screen characters; normalizing the closest distance corresponding to each pixel to obtain a normalized result corresponding to each pixel; filling the transparency channel value of each pixel with the normalized result, and filling the red, green, and blue (RGB) channel values ​​of each pixel with 1 to obtain the signed distance field texture of the bullet-screen characters.

[0086] Here, first generate the character bitmap of the bullet screen character, for example, you can call the system drawing interface to draw the character bitmap of the bullet screen character. Then determine the closest distance between each pixel in the character bitmap and the character edge of the bullet screen character, for example, you can use a signed distance field algorithm to determine the closest distance between each pixel in the character bitmap and the character edge of the bullet screen character. Then normalize the closest distance corresponding to each pixel to obtain the normalized result corresponding to each pixel. Finally, fill the transparency channel value of each pixel with the normalized result, and fill the red, green, and blue RGB channel values ​​of each pixel with 1 to obtain the signed distance field texture of the bullet screen character. In actual applications, for the generated signed distance field texture, you can also associate and store the character information of the bullet screen character in the signed distance field texture. The character information may include the size of the bullet screen character (including height and width), the position information of the bullet screen character in the signed distance field texture, etc. The position information may be the vertex coordinates (x, y) of a vertex or certain vertices in the bullet screen character in the signed distance field texture.

[0087] In some embodiments, after the transparency (alpha) channel value of each pixel in the character bitmap of the barrage character is filled with the normalized result of the nearest distance corresponding to each pixel, the barrage character can be rendered based on the vertex texture information of each vertex to obtain the rendered barrage character: determine the target pixel whose transparency channel value among the pixel points of the barrage character is higher than the transparency threshold; based on the vertex texture information of each vertex, render the target pixel point of the barrage character to obtain the rendered barrage character.

[0088] Here, a transparency threshold (e.g., 0.1) can be pre-set. Then, the target pixel whose transparency channel value is higher than the transparency threshold can be determined. Thus, when rendering the barrage character, the target pixel of the barrage character can be rendered based on the vertex texture information of each vertex to obtain the rendered barrage character. In this way, the rendering efficiency of the barrage character is improved.

[0089] Step 103: Determine the texture coordinates of each vertex in the bullet screen character, and extract the vertex texture information of each vertex from the signed distance field texture based on the texture coordinates of each vertex.

[0090] In step 103, after obtaining the signed distance field texture of the bullet screen characters, the texture coordinates of each vertex in the bullet screen characters in the signed distance field texture are determined, so that the vertex texture information of each vertex can be extracted from the signed distance field texture based on the texture coordinates of each vertex for use in rendering the bullet screen characters in subsequent steps.

[0091] In some embodiments, the texture coordinates of each vertex in the bullet screen character can be determined by executing the following steps: obtaining the vertex coordinates of the target character vertex of the target character in the signed distance field texture, and the character size of the target character; obtaining the texture size of the signed distance field texture; based on the vertex coordinates, texture size, and character size of the target character vertex, determining the vertex coordinates of each character vertex in the target character; for each character vertex, determining the vertex coordinates of the character vertex as the texture coordinates of the vertex of the corresponding character vertex in the bullet screen character.

[0092] Here, first obtain the vertex coordinates of the target character vertices of the target character in the signed distance field texture, and the character size of the target character. It should be noted that the target character is the character used when generating the signed distance field texture. The target character and the barrage character are the same in content (that is, the same character), but the size of the target character and the barrage character may be different. For example, the font size of the target character (such as text) used when generating the signed distance field texture may be 24, and the font size of the barrage character to be rendered may be 32. Since the character information of the target character is often stored when generating the signed distance field texture of a target character, the character information may include the size of the target character (including the height and width of the target character), the position information of the target character in the signed distance field texture, etc. For example, the position information may be the vertex coordinates (x, y) of a vertex or certain vertices in the target character in the signed distance field texture. Therefore, when obtaining the vertex coordinates of the target character vertex of the target character in the signed distance field texture and the character size of the target character, the character information of the target character can be obtained, so that the vertex coordinates of the target character vertex (for example, the vertex in the upper left corner) of the target character and the character size of the target character can be extracted from the character information.

[0093] Continuing, it is also necessary to obtain the texture size of the signed distance field texture (including the width and height of the signed distance field texture). The texture size of the signed distance field texture can also be stored when the signed distance field texture of the target character is generated. Thus, the vertex coordinates of each character vertex in the target character can be determined based on the vertex coordinates of the target character vertex, the texture size, and the character size. For example, the vertex coordinates of the target character vertex are (x, y) and the target character vertex is the vertex in the upper left corner of the target character, and the character size is width*height. Then the vertex coordinates of the character vertex in the upper right corner of the target character can be (x+width, y), the vertex coordinates of the vertex in the lower left corner of the target character can be (x, y+height), and the vertex coordinates of the character vertex in the lower right corner of the target character can be (x+width, y+height). It should be noted that the texture size obtained here is used to ensure that the vertex coordinates of each character vertex calculated are all on the signed distance field texture. Finally, for each character vertex, the vertex coordinates of the character vertex are determined as the texture coordinates of the vertex of the corresponding character vertex in the bullet screen character.

[0094] Step 104: Render the bullet screen characters based on the vertex texture information of each vertex to obtain rendered bullet screen characters.

[0095] In step 104 , after obtaining vertex texture information of each vertex in the bullet-screen character, the bullet-screen character is rendered based on the vertex texture information of each vertex to obtain a rendered bullet-screen character.

[0096] In some embodiments, before rendering the barrage characters based on the vertex texture information of each vertex to obtain the rendered barrage characters, the following steps can also be performed: determine the vertex coordinates of each vertex; based on this, based on the vertex texture information of each vertex, the barrage characters can be rendered by performing the following steps to obtain the rendered barrage characters: based on the vertex coordinates of each vertex and the vertex texture information of each vertex, the barrage characters are rendered to obtain the rendered barrage characters.

[0097] Here, when rendering the bullet chat characters, it is necessary to determine the vertex coordinates of each vertex in the bullet chat characters to determine the position at which to render the vertex of the bullet chat characters. In some embodiments, the vertex coordinates of each vertex can be determined by performing the following steps: obtaining a first size of the bullet chat character, obtaining a second size of the target character in the signed distance field texture, and the vertex coordinates of each character vertex in the target character; determining a size ratio between the first size and the second size, and determining the vertex coordinates of each vertex based on the vertex coordinates of each character vertex and the size ratio.

[0098] It should be noted that the target character is the character used when generating the signed distance field texture. The target character and the bullet character are the same in content (that is, the same character), but the size of the target character and the bullet character may be different. For example, the font size of the target character (such as text) used when generating the signed distance field texture may be 24, and the font size of the bullet character to be rendered may be 32. Therefore, when determining the vertex coordinates of each vertex in the bullet character, first obtain the first size of the bullet character, and obtain the second size of the target character in the signed distance field texture, as well as the vertex coordinates of each character vertex in the target character; then determine the size ratio of the first size and the second size, and thus determine the vertex coordinates of each vertex based on the vertex coordinates of each character vertex and the size ratio, for example, multiply the vertex coordinates of each character vertex by the size ratio to obtain the vertex coordinates of the corresponding vertex. In this way, by calculating the ratio between the first size of the barrage character to be rendered and the second size of the target character in the signed distance field texture used to render the barrage character, the rendered barrage character can be reduced or enlarged; and since the signed distance field texture stores distance information (that is, the closest distance from each pixel point in the character bitmap of the above-mentioned barrage character to the character edge of the barrage character), for the rendering of the enlarged barrage character, the distance information of the new pixel point generated by the enlargement will be interpolated and calculated during texture sampling, so lossless enlargement can be achieved; and scaling the barrage character only requires calculating the size ratio of the barrage character and the vertex coordinates of the vertex, and will not add additional overhead.

[0099] Based on this, when rendering the bullet screen characters, the bullet screen characters are rendered based on the vertex coordinates of each vertex and the vertex texture information of each vertex to obtain the rendered bullet screen characters. For example, the vertex texture of the vertex located at the corresponding vertex coordinate can be drawn based on the vertex texture information of each vertex; the texture information of the pixel points between any two vertices can be obtained by interpolating the vertex texture information of the two vertices, and the pixel coordinates of the pixel points between any two vertices can also be obtained by interpolating the vertex coordinates of the two vertices. In this way, the pixel texture of the pixel points located at the corresponding pixel coordinates is drawn using the texture information of the pixel points between any two vertices.

[0100] In some embodiments, before rendering the barrage characters based on the vertex texture information of each vertex to obtain the rendered barrage characters, the following steps can also be performed: obtaining the vertex color of each vertex and the special effects information of the barrage characters; based on this, based on the vertex coordinates of each vertex and the vertex texture information of each vertex, the barrage characters can be rendered by performing the following steps to obtain the rendered barrage characters: drawing the character texture of the barrage characters based on the vertex coordinates of each vertex and the vertex texture information of each vertex; color drawing the character texture based on the vertex color of each vertex to obtain the middle barrage characters; performing special effects processing on the middle barrage characters based on the special effects information of the barrage characters to obtain the rendered barrage characters.

[0101] Here, when rendering the barrage characters, it is also necessary to obtain the vertex color of each vertex in the barrage characters, as well as the special effects information of the barrage characters. Based on this, first, based on the vertex coordinates of each vertex and the vertex texture information of each vertex, the character texture of the barrage characters is drawn. For example, based on the vertex texture information of each vertex, the vertex texture of the vertex located at the corresponding vertex coordinate can be drawn; for the texture information of the pixel points between any two vertices, it can be obtained by interpolating the vertex texture information of the two vertices, and for the pixel coordinates of the pixel points between any two vertices, it can also be obtained by interpolating the vertex coordinates of the two vertices. In this way, the texture information of the pixel points between any two vertices is used to draw the pixel texture of the pixel points located at the corresponding pixel coordinates.

[0102] Then, based on the vertex colors of each vertex, the character texture is colored to obtain the intermediate bullet screen characters. For example, the color of the vertex character texture can be modified based on the vertex colors of each vertex; the pixel color of the pixel between any two vertices can be obtained by interpolating the vertex colors of the two vertices. In this way, the pixel color of the pixel between any two vertices is used to modify the color of the character texture of the corresponding pixel.

[0103] Finally, based on the special effect information of the bullet screen characters, special effects processing is performed on the middle bullet screen characters to obtain the rendered bullet screen characters. For example, special effects processing can include stroke effects, gradient effects, shadow effects, etc.

[0104] In some embodiments, there are multiple barrage characters, and the multiple barrage characters are arranged in sequence from the starting position to the ending position; the special effect of the barrage characters is a gradient color effect from the starting position to the ending position. Based on this, based on the special effect information of the barrage characters, the middle barrage characters can be processed with special effects by executing the following steps to obtain the rendered barrage characters: determine the character vertex coordinates of each vertex in each barrage character when arranged; obtain the starting color of the starting position of the barrage character at the starting position, and the ending color of the ending position of the barrage character at the ending position; determine the character special effect color of each vertex in each barrage character based on the character vertex coordinates, starting color, and ending color of each vertex in each barrage character; use the character special effect color of each vertex in each barrage character as the character special effect color of each vertex in the middle barrage character corresponding to each barrage character, and based on the character special effect color of each vertex in each barrage character, perform special effect processing on the middle barrage characters corresponding to each barrage character to obtain the rendered barrage characters.

[0105] Here, it is the special effects processing process of the gradient color special effects. First, determine the character vertex coordinates of each vertex in each barrage character when it is arranged. For example, the multiple barrage characters in the arrangement are arranged horizontally, and the width of the area occupied is W and the height is H. Starting from the first barrage character, first obtain the height h and width w of the barrage character, and use the upper left vertex of the barrage character as the origin of the coordinate axis (0, 0). Therefore, the character vertex coordinates of the upper left vertex of the barrage character are (0, 0), the character vertex coordinates of the upper right vertex are (the distance between the upper right vertex and the origin in the x direction / width W, 0), the character vertex coordinates of the lower left vertex are (0, the distance between the lower left vertex and the origin in the y direction / height H), and the character vertex coordinates of the lower right vertex are (the distance between the upper right vertex and the origin in the x direction / width W, 0).

[0106] Then, obtain the starting color of the starting position of the bullet screen character at the starting position, and the ending color of the ending position of the bullet screen character at the ending position. In actual applications, what is obtained is the color value of the starting color of the starting position, and the color value of the ending color of the ending position. The starting position is actually a vertex of the bullet screen character, and the ending position is also a vertex of the bullet screen character. Based on the character vertex coordinates, starting color, and ending color of each vertex in each bullet screen character, determine the character special effect color of each vertex in each bullet screen character. Specifically, for the character special effect color of each vertex between the two vertices (the two vertices corresponding to the starting position and the ending position), it can be obtained by interpolating the character special effect colors of the two vertices (including the starting color of the starting position and the ending color of the ending position). It should be noted that the vertices of the barrage characters and the middle barrage characters are one-to-one corresponding. In this way, the character special effect color of each vertex in each barrage character can be used as the character special effect color of each vertex in the middle barrage characters corresponding to each barrage character. Based on the character special effect color of each vertex in each barrage character, the middle barrage characters corresponding to each barrage character are processed with special effects to obtain the rendered barrage characters.

[0107] Applying the above-mentioned embodiment of the present application, it is first determined whether there is a signed distance field texture of the barrage character to be rendered in the signed distance field texture set; when the signed distance field texture of the barrage character exists in the signed distance field texture set, the signed distance field texture is obtained from the signed distance field texture set, and, when the signed distance field texture of the barrage character does not exist in the signed distance field texture set, the signed distance field texture of the barrage character is generated; then, the texture coordinates of each vertex in the barrage character are determined, and based on the texture coordinates of each vertex, the vertex texture information of each vertex is extracted from the signed distance field texture; finally, based on the vertex texture information of each vertex, the barrage character is rendered to obtain the rendered barrage character.

[0108] Here, the signed distance field textures of some barrage characters are pre-stored through a signed distance field texture set. When rendering barrage characters, if the signed distance field texture of the barrage character exists in the signed distance field texture set, the signed distance field texture of the barrage character can be directly obtained from the signed distance field texture set. If the signed distance field texture of the barrage character does not exist in the signed distance field texture set, the signed distance field texture of the barrage character is generated. In this way, 1) the device resources required to generate the signed distance field texture of the barrage character each time can be reduced, thereby improving the rendering efficiency of the barrage characters; 2) the signed distance field texture of the barrage characters that is missing from the signed distance field texture set can be compensated by generating it in real time; thus, the rendering effect of the barrage characters is improved.

[0109] The following describes an exemplary application of an embodiment of the present application in an actual application scenario. In the related art, for the drawing (rendering) of bullet screen characters, the canvas component provided by the operating system is used to call the system interface to draw the corresponding bitmap characters, which is relatively simple to implement. However, since the drawn characters are bitmap characters, there are often obvious edge jagged when the characters are scaled, and the rendering effect of the bullet screen characters is poor.

[0110] Based on this, the embodiment of the present application provides a method for rendering bullet screen characters to at least solve the above-mentioned problems. In the embodiment of the present application, a new bullet screen rendering solution is proposed for the differences in bullet screen rendering solutions on different platforms (Android / iOS / Mac / Windows / Web), which smooths out the differences in multi-terminal bullet screen rendering solutions and optimizes the performance cost of bullet screen scaling. It can (1) implement a text rendering component based on a directed distance field for drawing bullet screens and solving edge jagged problems, such as Figure 4 As shown in (1), the upper character "AB" is the bullet screen character drawn by this application, without edge jaggedness, and the lower character "AB" is a bitmap character with obvious edge jaggedness. (2) It supports the coexistence of static atlas (including pre-generated SDF texture and character position information in SDF texture according to the input characters) and dynamic atlas (dynamically generating SDF texture and character position information in SDF texture according to the required characters at runtime), taking into account the low time consumption of static SDF atlas loading characters and solving the problem of missing characters. (3) The characters in the atlas are only related to the font, not the font size, etc. Modifying the font size of the bullet screen character does not require regenerating the SDF texture of the corresponding font size, which minimizes the memory and CPU usage of the texture. (4) It supports mixed text and image typesetting, such as Figure 4 As shown in (2), it supports mixed arrangement of text, operational configuration pictures and emoji expressions. (5) It supports dynamic atlas expansion, lossless amplification, stroke, shadow, outer glow, gradient and other text effects, such as Figure 4 The gradient text effect shown in (3) supports three gradient modes (horizontal gradient, vertical gradient, mixed gradient) and custom gradient colors. (6) Reduce memory and CPU usage.

[0111] The following is a detailed description. Figure 5, the rendering method of the barrage characters provided in the embodiment of the present application includes: 1. Whether the barrage characters to be rendered (for example, the barrage character A in the "Songti" format and the font size of 32) exist in the static SDF atlas, if not, execute 2, if so, execute 5. 2. Call the drawing interface of the operating system (for example, Android, Web, Windows, iOS, Mac) to generate a character bitmap based on the target character for generating the SDF texture (for example, the target character A in the "Songti" format and the font size of 24). 3. Generate the SDF texture of the barrage characters based on the character bitmap. 4. Store the SDF texture of the barrage characters in the dynamic SDF atlas. 5. Obtain the SDF texture and character information from the SDF atlas (including the static SDF atlas and the dynamic SDF atlas). 6. Calculate the scaling ratio of the font size of the barrage characters to be rendered and the font size of the target characters in the SDF texture. 7. Calculate the vertex coordinates of each vertex in the rendered barrage characters. 8. Write vertex data such as vertex coordinates, SDF texture, character information, vertex color, character special effect information, etc. into the shader. 9. The shader renders the bullet screen characters.

[0112] above Figure 5 This describes the process of drawing a bullet character A in size 32 using Songti font. During drawing, the system first checks whether the bullet character already exists in the static SDF atlas. If so, the SDF texture and character information for the bullet character are directly retrieved from the static SDF atlas. If not, the runtime operating system's drawing interface is called to generate a character bitmap for the bullet character. Based on the character bitmap, the SDF texture for the bullet character is then generated and stored in the dynamic SDF atlas along with the character information (such as character height and width). Because the font size used when generating the SDF texture for the bullet character (size 24) may not match the font size of the bullet character to be rendered (size 32), a scaling ratio must be calculated. This ratio is then used to recalculate the size of the bullet character to determine the vertex coordinates of each vertex in the bullet character, and these vertex coordinates are then added to the character's vertex data. The SDF texture, vertex data, and character special effects information are all submitted to the GPU for rendering. During the rendering process, the shader samples the corresponding texture from the SDF texture based on the vertex's texture coordinates; scales the character texture based on the vertex's coordinates; modifies the color of the character texture based on the vertex's vertex color; and applies special effects to the bullet-screen characters, such as strokes and gradients, based on the character's special effects information. Ultimately, the desired bullet-screen character effect is rendered. It should be noted that since the SDF texture stores distance information, after zooming in on the character, the GPU interpolates and calculates the distance data in the new pixel when sampling the texture, allowing for lossless zooming. Scaling characters only requires recalculating their size, and does not incur any additional overhead.

[0113] (I) Explain the generation of SDF texture. (1) Generate character bitmap: Use the text drawing interface provided by different operating systems, such as the fillText() method of the canvas on Android, to draw the character bitmap of the bullet screen characters. The character bitmap is a black and white picture, such as Figure 6 The following is the character bitmap of the bullet screen character A. (2) Based on the character bitmap, the SDF texture of the bullet screen character is obtained by processing it through the SDF algorithm.

[0114] This section describes the SDF algorithm. Essentially, the SDF algorithm calculates the distance from a pixel to the nearest edge of an object. In the case of characters, this involves calculating the distance from a pixel in a character image to the nearest character edge (stroke edge). To reduce computational time, the 8SSEDT algorithm, part of the Euclidean distance transform (EDT) algorithm, can be used to calculate the SDF distance in linear time (computational time increases linearly with image size). The core idea of ​​the 8SSEDT algorithm is to calculate the nearest distance to a pixel using its eight neighboring points. For each pixel, a 3x3 template is used to calculate the distance to the nearest edge. This template contains information about the current pixel and its eight surrounding pixels, allowing it to determine whether the pixel is on an edge and the distance from the current pixel to the edge. The distance from each pixel to the nearest contour line is calculated by iterating through the surrounding pixels and finding the smallest of the known nearest distances to the surrounding pixels plus the distance from the pixel to the surrounding pixels.

[0115] Specifically, the traversal of the eight directions is divided into two PASSes (in order to ensure that the values ​​of the neighbors in the corresponding directions have been calculated). (1) PASS0: Start traversing from the upper left corner, traverse row by row, and calculate the four directions in the upper left each time. (2) PASS1: Start traversing from the lower right corner, traverse row by row, and calculate the four directions in the lower right each time. The nearest distance to the upper left half of each pixel point is obtained by traversing from the upper left to the lower right, and the nearest distance to the lower right half of each pixel point is obtained by scanning from the lower right to the upper left. Combined together, the nearest distance from each pixel point to the contour line in all directions is obtained. Figure 7 As shown in the figure, during the first traversal, the distance x between the pixel point and its left, upper left, upper, and upper right pixels is calculated, and the minimum value of x and the sum of the distances between these pixels and the character edge is taken. During the second traversal, the distance x between the pixel point and its right, lower right, lower, and lower left pixels is calculated, and the minimum value of x and the sum of the distances between these pixels and the character edge is taken.

[0116] For example, if Figure 8As shown in (1), there is a 5x5 (width by height) black and white image. The black pixels in the image are marked as 1 and the white pixels are marked as 0. Two tables are established to determine whether the pixel is inside or outside the bullet screen character (black part). (1) One table is used to calculate the distance from the outside of the character to the edge of the character: the distance of the white pixel can be initialized to 0, and the distance of the black pixel is infinite. This table is recorded as Table A. (2) One table is used to calculate the distance from the inside of the character to the edge of the character: the distance of the black pixel is initialized to 0, and the distance of the white pixel is infinite. This table is recorded as Table B.

[0117] The initial state of table A is as follows:

[0118] 0 0 ∞ ∞ 0 0 ∞ ∞ ∞ ∞ 0 0 ∞ ∞ 0 0 ∞ ∞ 0 ∞ ∞ 0 0 0 0

[0119] Start the first calculation, traverse from the upper left corner, from left to right, from top to bottom, traverse row by row, and calculate the minimum value of (the distance between the point and the object + the distance between itself and it) in the four directions of the upper left corner each time. Specifically, establish a coordinate system on Table A, with the origin at the upper left corner of Table A, the horizontal direction is the x-axis, the right is the positive direction, the vertical direction is the y-axis, and the downward direction is the positive direction. Assuming that the coordinates of the pixel point A to be calculated are (x, y), it is necessary to take the distances between the four pixel points (x-1, y), (x-1, y-1), (x, y-1), and (x+1, y-1) and the edge of the character, and calculate the distances corresponding to the four pixel points, the sum of the distances between the pixel point A and the four pixel points, and take the minimum value. Table A after the first calculation is as follows:

[0120] 0 0 1 2 0 0 1 square root of 2 square root of 2 1 0 0 1 2 0 0 1 square root of 2 0 1 1 0 0 0 0

[0121] The second calculation begins, starting from the lower right corner, traversing from right to left, bottom to top, and row by row, each time calculating the minimum value of "the distance between the pixel to be calculated in the four directions below and to the right of the pixel to be calculated and the edge of the character + the distance between the pixel to be calculated and the pixels in the four directions". Table A after the second calculation is as follows:

[0122] 0 0 1 1 0 0 1 square root of 2 square root of 2 1 0 0 1 1 0 0 1 1 0 1 1 0 0 0 0

[0123] The initial state of Table B is as follows:

[0124] ∞ ∞ 0 0 ∞ ∞ 0 0 0 0 ∞ ∞ 0 0 ∞ ∞ 0 0 ∞ 0 0 ∞ ∞ ∞ ∞

[0125] Similarly, perform two calculations, starting from the upper left corner and traversing from left to right, top to bottom, row by row. The minimum value of "the distance between the pixel to be calculated in the four directions above and to the left of the pixel to be calculated and the edge of the character + the distance between the pixel to be calculated and the pixels in the four directions" is calculated. Table B after the first calculation is as follows:

[0126] ∞ ∞ 0 0 1 ∞ 0 0 0 0 square root of 2 1 0 0 1 1 + square root of 2 0 0 1 0 0 1 1 square root of 2 1

[0127] Then, we start from the lower right corner, traverse from right to left, bottom to top, and row by row, calculating the minimum value of "the distance between the pixel to be calculated and the edge of the character in the four directions below the pixel to be calculated + the distance between the pixel to be calculated and the pixels in the four directions". Table B after the second calculation is as follows:

[0128] square root of 2 1 0 0 1 1 0 0 0 0 square root of 2 1 0 0 1 1 0 0 1 0 0 1 1 square root of 2 1

[0129] Subtract Table B from Table A to get Figure 8 The result shown in (2) is shown in the figure. The area composed of positive numbers is the area of ​​the original image (i.e., the 5x5 black and white image). The positive data can represent the distance between the pixel points inside the character and the edge of the character, and the negative data can represent the distance between the pixel points outside the character and the edge of the character.

[0130] However, since pixels are discrete points, when the edge of a character passes through a pixel, it does not necessarily pass through it completely. Figure 9 As shown, the pixels near the edge of the circle have different grayscale values. If, during rendering, only 0 is used as the threshold, pixels with grayscale values ​​greater than 0 are rendered, and the others are discarded, then the actual effect will be that there will be a lot of jagged edges. There are many types of Chinese strokes, and many characters will have this situation. Therefore, it is necessary to perform anti-aliasing on the generated SDF texture so that the calculated distance reflects the actual distance as much as possible and ensures that the edges of the characters are as smooth as possible. In actual implementation, anti-aliasing is performed for two situations:

[0131] (1) Figure 10 As shown, if the edge passes through a pixel horizontally or vertically, the grayscale value of this pixel can represent the distance d corresponding to the pixel. f =0.5-b. Where, d f is the distance, and b is the grayscale value of the pixel.

[0132] (2) Figure 11 As shown in Figure 1, if the contour line passes through the pixel point obliquely, it needs to be calculated based on the gradient of the contour line. Figure 11 The three squares shown represent the three cases where the contour line crosses the pixel obliquely. The shaded and unshaded areas have different grayscale values, and the parallelogram area in the middle can be considered the strokes of the character. The above three cases are represented by the following formula (b is the grayscale value of the pixel):

[0133] b<b1;

[0134] b1<b<b1+b2;

[0135] b1+b2≤b<1;

[0136] like Figure 12 As shown, several constants are defined, including: b1: the edge passes through the area to the left of the pixel and passes through the point at the edge of the pixel; b2: the middle area. Figure 12 The following constants can be found:

[0137]

[0138] b2=1-2b1; (2)

[0139]

[0140]

[0141] So, d f It can be obtained by the following formula:

[0142]

[0143] Among them, g x and g y are the gradients of the pixel in the x and y directions respectively. In actual implementation, the 3x3 Isotropic operator can be used to calculate g x and g y .

[0144] After substituting into the above formula (5), we can find d f , which is the closest distance we are looking for. So far, the closest distance corresponding to each pixel in the character bitmap has been calculated. After obtaining the closest distance from each pixel to the nearest character edge through the SDF algorithm, the closest distance is converted to a value between 0 and 1 and stored in the alpha channel of the image, i.e. transparency, and the other channels are filled with 1. Therefore, the displayed effect is as follows Figure 13 As shown, the characters are white, and there is a diffuse, blurred shadow around the edge, indicating that the alpha value is gradually decreasing (indicating that it is getting farther and farther away from the edge of the character).

[0145] When rendering, the vertex data of each character is submitted to the GPU. Each character image is a rectangle composed of two triangles, such as Figure 14As shown. Therefore, a character has four vertices, namely the upper left, upper right, lower left, and lower right. The vertex data of each vertex can include the position information (vertex coordinates), texture information, pixel color, etc. of the vertex. During rendering, based on the x, y, width, height in the character information and the height and width of the entire SDF texture, the coordinates of the four vertices in the barrage character in the entire SDF texture are calculated and recorded as texture coordinates, and are passed to the GPU as vertex data together with the vertex color (character color). When the GPU renders, the area of ​​the character on the SDF texture is determined based on the texture coordinates of the four vertices, and texture sampling is performed to obtain texture information. The stroke, shadow and other effects are superimposed in the fragment shader for processing. Specifically, the alpha threshold can be set for rendering. For example, pixels with alpha values ​​greater than the alpha threshold (such as 0.1) are rendered, and the others are discarded.

[0146] (2) Explain the combination of static SDF atlas and dynamic SDF atlas.

[0147] If the program relies entirely on dynamically generating SDF textures based on characters during runtime, the initial rendering of a large number of characters will consume a large number of character SDF textures, consuming significant CPU resources and causing noticeable lag. Therefore, you can first input the fonts and commonly used characters into bitmap font generation software (such as Hiero) on your electronic device to generate a text file with the SDF texture and character information.

[0148] The character information text file is a JSON string that contains information about each character, as follows:

[0149]

[0150] Among them, size represents the font size of the barrage characters used when drawing the SDF texture, and padding represents the spacing between adjacent characters in the SDF texture atlas. "scaleW" represents the width of the SDF texture atlas, and "scaleH" represents the height of the SDF texture atlas. charData is an array that contains information about all characters in the SDF texture. Id is the unicode code of the character, x and y represent the vertex coordinates of the upper left corner of the character in the SDF texture, and width and height represent the width and height of the character. Xoffset and yoffset respectively indicate how many pixels the character needs to be offset to the right or downward when drawing. Xdvanceb represents the distance the current position needs to be advanced backward after drawing the character (that is, the starting position of the next character). When the program is initialized, the generated SDF texture and character information text file are input into the program for parsing, so that the texture data of each character can be known.

[0151] When encountering characters that do not exist in the static SDF atlas, the SDF texture and character information of the character are dynamically generated. First, call the interface of the operating system for drawing characters to draw the character bitmap and save its character information. Then, after processing by the SDF algorithm, the SDF texture of the character is obtained based on the character bitmap, and the SDF texture is added to the free area of the dynamic SDF atlas. If the dynamic SDF atlas is full, a texture atlas of a larger size is generated, the data on the old texture atlas is copied to the new texture atlas, and the SDF texture just generated is added to the new texture atlas. The old texture atlas is added to the queue to be destroyed. Each dynamic atlas has a count indicating how many TextMeshPro components use this dynamic atlas to render text. When the TextMeshPro component is destroyed, the dynamic atlas it holds is released, and the count of the dynamic atlas is also decreased by one. When the count of the dynamic atlas is reduced to 0, if it is in the queue to be destroyed, the texture of the dynamic atlas is destroyed. <> <>

[0152] (III) Explain the mixed layout of text and graphics. As <> Figure 4 shown in (2) below, for bullet screen characters such as pictures and emoticons, the same rendering method as above is adopted, and the mixed layout effect of text and graphics in the bullet screen can be achieved. <> <>

[0153] (IV) Explain the support for gradient color special effects. The basic idea of gradient implementation is: determine the color values at the left and right ends of the character. For example, the left color is pink and the right color is yellow, and the color values of the pixels in the middle character are obtained by means of linear interpolation, etc. Specifically, the left (starting) color is split into four channels of RGBA, and the right (ending) color is also split into four channels of RGBA. A linear function is constructed for each of the four channels (the value of the left color channel is used as the ordinate of the starting point, and the corresponding pixel coordinate position is used as the abscissa, and the same for the right color). Then, the middle pixel substitutes its own position into this linear function to find the color values corresponding to the four channels, and after merging, it is the final color of this pixel. <> <>

[0154] As <> Figure 4 shown in (3) below, if these two characters are sorted in sequence on the same picture, the top - left vertex of "是" is (0, y), then the top - left vertex of "我" may be (0.3, y). However, since this solution stores all characters on one texture to save memory space and optimize performance, the texture coordinates of each character are calculated based on the texture of the atlas. Therefore, the vertex coordinates of the character cannot reflect the position of the character in the entire text. For example, for the first character "是" in the above example, its top - left vertex may be (0.5, 0.3), and the top - left vertex of the second character "我" may be (0.2, 0.4). In this way, the color value of the character "我" cannot be accurately calculated. Therefore, it is necessary to calculate the normalized coordinates of each vertex in the character by itself. <>

[0155] For an example, assume that Figure 4 the width of the text segment shown in (3) is 540 and the height is 40. The width of the first character '是' is 30 and the height is 40. Assuming that the origin of the coordinate axis is at the upper left corner, calculate the normalized coordinates of the four vertices of the character '是': Upper left vertex: (0, 0), overlapping with the origin; Upper right vertex: (0.06, 0), the distance in the x direction between the upper right corner and the origin / the width of the entire text segment = 30 / 540 = 0.0555... approximately equal to 0.06; Lower left vertex: (0, 1), the distance in the y direction between the bottom of the character and the origin / the height of this text segment = 40 / 40 = 1; Lower right vertex: (0.06, 1).

[0156] After calculating the first character, then calculate the second character until the normalized coordinates of all character vertices are calculated. Using these normalized coordinates, based on the color values at both ends of the character, the color value of each vertex can be interpolated and calculated in the fragment shader; while the color values of the pixels between any two vertices are calculated by the GPU based on the interpolation of the color values of the pixels between these two vertices.

[0157] Applying the above embodiments of the present application can (1) implement a text rendering component based on the signed distance field for drawing bullet screens and solve the problem of edge aliasing; (2) support the coexistence of static atlases (including pre-generated SDF textures and the position information of characters in the SDF textures according to the input characters) and dynamic atlases (dynamically generating SDF textures and the position information of characters in the SDF textures at runtime), taking into account both the small time consumption of loading characters in the static SDF atlas and solving the problem of character missing. (3) The characters in the atlas are only related to the font and have nothing to do with the font size, etc. Modifying the font size of the bullet screen characters does not require regenerating the corresponding SDF texture for the font size, minimizing the memory and CPU occupation of the texture to the greatest extent. (4) Support the mixing of text and graphics. (5) Support the expansion of the dynamic atlas and support text effects such as lossless magnification, stroke, shadow, outer glow, and gradient.

[0158] Next, continue to describe the exemplary structure of the implementation of the bullet screen character rendering device 555 provided by the embodiments of the present application as software modules. In some embodiments, such as Figure 2As shown, the software modules in the rendering device 555 of the barrage characters stored in the memory 550 may include: a determination module 5551, used to determine whether there is a signed distance field texture of the barrage characters to be rendered in the signed distance field texture set; an acquisition module 5552, used to obtain the signed distance field texture from the signed distance field texture set when the signed distance field texture of the barrage characters exists in the signed distance field texture set, and to generate the signed distance field texture of the barrage characters when the signed distance field texture of the barrage characters does not exist in the signed distance field texture set; an extraction module 5553, used to determine the texture coordinates of each vertex in the barrage characters, and extract the vertex texture information of each vertex from the signed distance field texture based on the texture coordinates of each vertex; a rendering module 5554, used to render the barrage characters based on the vertex texture information of each vertex to obtain the rendered barrage characters.

[0159] In some embodiments, the determination module 5551 is further used to determine multiple target barrage characters for the barrage before determining whether there is a signed distance field texture of the barrage character to be rendered in the signed distance field texture set; generate a target signed distance field texture for each of the target barrage characters; and construct the signed distance field texture set based on each of the target signed distance field textures.

[0160] In some embodiments, the acquisition module 5552 is further configured to, after generating the signed distance field texture of the bullet chat character when the signed distance field texture of the bullet chat character does not exist in the signed distance field texture set, determine whether there is a free area in the dynamic signed distance field texture set; if the dynamic signed distance field texture set has a free area, add the signed distance field texture to the free area of ​​the dynamic signed distance field texture set; if the dynamic signed distance field texture set does not have a free area, generate a target signed distance field texture set, wherein the capacity of the target signed distance field texture set is greater than the capacity of the dynamic signed distance field texture set; and add the signed distance field texture and the dynamic signed distance field texture in the dynamic signed distance field texture set to the target signed distance field texture set.

[0161] In some embodiments, the acquisition module 5552 is further configured to, after adding the signed distance field texture and the dynamic signed distance field texture in the dynamic signed distance field texture set to the target signed distance field texture set, add the dynamic signed distance field texture set to a queue of texture sets to be destroyed. Accordingly, the acquisition module 5552 is further configured to determine the number of components rendered based on the dynamic signed distance field texture set; and when the number of components reaches zero, destroy the dynamic signed distance field texture set.

[0162] In some embodiments, the acquisition module 5552 is also used to generate a character bitmap of the barrage character; determine the closest distance between each pixel point in the character bitmap and the character edge of the barrage character; normalize the closest distance corresponding to each pixel point to obtain a normalized result corresponding to each pixel point; fill the transparency channel value of each pixel point with the normalized result, and fill the red, green, and blue (RGB) channel value of each pixel point with 1 to obtain a signed distance field texture of the barrage character.

[0163] In some embodiments, the rendering module 5554 is also used to determine the target pixel points among the pixel points of the barrage character whose transparency channel value is higher than the transparency threshold; based on the vertex texture information of each vertex, the target pixel points of the barrage character are rendered to obtain the rendered barrage character.

[0164] In some embodiments, the extraction module 5553 is also used to obtain the vertex coordinates of the target character vertices of the target character in the signed distance field texture, and the character size of the target character; obtain the texture size of the signed distance field texture; determine the vertex coordinates of each character vertex in the target character based on the vertex coordinates of the target character vertices, the texture size, and the character size; for each of the character vertices, determine the vertex coordinates of the character vertex as the texture coordinates of the vertex corresponding to the character vertex in the barrage character.

[0165] In some embodiments, the rendering module 5554 is also used to determine the vertex coordinates of each vertex before rendering the barrage characters based on the vertex texture information of each vertex to obtain the rendered barrage characters; accordingly, the rendering module 5554 is also used to render the barrage characters based on the vertex coordinates of each vertex and the vertex texture information of each vertex to obtain the rendered barrage characters.

[0166] In some embodiments, the rendering module 5554 is also used to obtain the first size of the barrage character, and obtain the second size of the target character in the signed distance field texture, and the vertex coordinates of each character vertex in the target character; determine the size ratio of the first size and the second size, and determine the vertex coordinates of each vertex based on the vertex coordinates of each character vertex and the size ratio.

[0167] In some embodiments, the rendering module 5554 is also used to render the barrage characters based on the vertex texture information of each vertex, and obtain the vertex color of each vertex and the special effect information of the barrage characters before obtaining the rendered barrage characters; accordingly, the rendering module 5554 is also used to draw the character texture of the barrage characters based on the vertex coordinates of each vertex and the vertex texture information of each vertex; based on the vertex color of each vertex, the character texture is color-drawn to obtain the intermediate barrage characters; based on the special effect information of the barrage characters, the intermediate barrage characters are special effect processed to obtain the rendered barrage characters.

[0168] In some embodiments, there are multiple barrage characters, and multiple barrage characters are arranged in sequence from the starting position to the ending position; the special effect of the barrage characters is a gradient color effect from the starting position to the ending position; the rendering module 5554 is also used to determine the character vertex coordinates of each vertex in each barrage character during arrangement; obtain the starting color of the starting position of the barrage character located at the starting position, and the ending color of the ending position of the barrage character located at the ending position; determine the character special effect color of each vertex in each barrage character based on the character vertex coordinates, the starting color, and the ending color of each vertex in each barrage character; use the character special effect color of each vertex in each barrage character as the character special effect color of each vertex in the middle barrage character corresponding to each barrage character, and based on the character special effect color of each vertex in each barrage character, perform special effect processing on the middle barrage character corresponding to each barrage character to obtain the rendered barrage characters.

[0169] It should be noted that the description of the device embodiment in this application is similar to the description of the method embodiment above, and has similar beneficial effects as the method embodiment, and will not be repeated here. The unfinished technical details of the device for rendering barrage characters provided in the embodiment of this application can be understood based on the description of the technical details in the method embodiment above.

[0170] The present application also provides a computer program product including computer-executable instructions stored in a computer-readable storage medium. A processor of an electronic device reads the computer-executable instructions from the computer-readable storage medium and executes the computer-executable instructions, causing the electronic device to perform the method for rendering bullet screen characters provided in the present application.

[0171] An embodiment of the present application also provides a computer-readable storage medium, which stores computer-executable instructions. When the computer-executable instructions are executed by a processor, the processor will execute the method for rendering barrage characters provided in an embodiment of the present application.

[0172] In some embodiments, the computer-readable storage medium may be a memory such as RAM, ROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or may be various devices including one or any combination of the above memories.

[0173] In some embodiments, computer-executable instructions may be in the form of a program, software, software module, script, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine, or other unit suitable for use in a computing environment.

[0174] As an example, computer-executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file that stores other programs or data, such as in one or more scripts in a HyperText Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinating files (e.g., files storing one or more modules, subroutines, or code portions).

[0175] By way of example, computer-executable instructions may be deployed to be executed on one electronic device, or on multiple electronic devices located at one site, or on multiple electronic devices distributed across multiple sites and interconnected by a communication network.

[0176] The above description is merely an embodiment of the present application and is not intended to limit the scope of protection of the present application. Any modifications, equivalent replacements, and improvements made within the spirit and scope of the present application are included in the scope of protection of the present application.

Claims

1. A method for rendering barrage characters, characterized in that: The method comprises: Determining whether there is a signed distance field texture of a bullet chat character to be rendered in the signed distance field texture set; wherein the bullet chat character includes text and image; When the directed distance field texture of the bullet screen character exists in the directed distance field texture set, the directed distance field texture is obtained from the directed distance field texture set, and when the directed distance field texture of the bullet screen character does not exist in the directed distance field texture set, a character bitmap of the bullet screen character is generated; the closest distance between each pixel point in the character bitmap and the character edge of the bullet screen character is determined; the closest distance corresponding to each pixel point is normalized to obtain a normalized result corresponding to each pixel point; the transparency channel value of each pixel point is filled with the normalized result, and the red, green, and blue RGB channels of each pixel point are normalized. Filling the channel value with 1 to obtain the signed distance field texture of the bullet screen character; determining whether there is an idle area in the dynamic signed distance field texture set; when the dynamic signed distance field texture set has an idle area, adding the signed distance field texture to the idle area of ​​the dynamic signed distance field texture set; when the dynamic signed distance field texture set does not have an idle area, generating a target signed distance field texture set, wherein the capacity of the target signed distance field texture set is greater than the capacity of the dynamic signed distance field texture set; adding the signed distance field texture and the dynamic signed distance field texture in the dynamic signed distance field texture set to the target signed distance field texture set; Determining the texture coordinates of each vertex in the bullet screen character, and extracting vertex texture information of each vertex from the signed distance field texture based on the texture coordinates of each vertex; Obtaining the vertex color of each vertex and the special effect information of the bullet screen character; Based on the vertex texture information of each vertex, the vertex color of each vertex and the special effect information of the barrage character, the barrage character is rendered to obtain a rendered barrage character; wherein the rendering includes color drawing and special effect processing.

2. The method according to claim 1, wherein Before determining whether there is a signed distance field texture of the bullet screen character to be rendered in the signed distance field texture set, the method further includes: Determining multiple target barrage characters for barrage; Generating a target signed distance field texture for each target bullet screen character; The signed distance field texture set is constructed based on each of the target signed distance field textures.

3. The method according to claim 1, wherein After adding the signed distance field texture and the dynamic signed distance field texture in the dynamic signed distance field texture set to the target signed distance field texture set, the method further includes: Adding the dynamic signed distance field texture set to a queue of texture sets to be destroyed; The method further comprises: determining a component count of a component to be rendered based on the dynamic signed distance field texture set; When the number of components reaches zero, the dynamic signed distance field texture set is destroyed.

4. The method according to claim 1, wherein The rendering of the bullet screen characters based on the vertex texture information of each vertex, the vertex color of each vertex, and the special effect information of the bullet screen characters to obtain the rendered bullet screen characters includes: Determine a target pixel point whose transparency channel value is higher than a transparency threshold among the pixel points of the bullet screen character; Based on the vertex texture information of each vertex, the target pixel point of the bullet screen character is rendered to obtain the rendered bullet screen character.

5. The method according to claim 1, wherein Determining the texture coordinates of each vertex in the bullet screen character includes: Obtaining vertex coordinates of a target character vertex of a target character in the signed distance field texture and a character size of the target character; Obtaining the texture size of the signed distance field texture; Determining the vertex coordinates of each character vertex in the target character based on the vertex coordinates of the target character vertices, the texture size, and the character size; For each of the character vertices, the vertex coordinates of the character vertex are determined as the texture coordinates of the vertex corresponding to the character vertex in the bullet screen character.

6. The method according to claim 1, wherein Before rendering the barrage characters based on the vertex texture information of each vertex, the vertex color of each vertex, and the special effect information of the barrage characters to obtain the rendered barrage characters, the method further includes: determining the vertex coordinates of each vertex; The rendering of the bullet screen characters based on the vertex texture information of each vertex, the vertex color of each vertex, and the special effect information of the bullet screen characters to obtain the rendered bullet screen characters includes: Based on the vertex coordinates of each vertex, the vertex color of each vertex, the special effect information of the barrage character, and the vertex texture information of each vertex, the barrage character is rendered to obtain a rendered barrage character.

7. The method according to claim 6, wherein Determining the vertex coordinates of each vertex includes: Obtaining a first size of the bullet screen character, and obtaining a second size of the target character in the signed distance field texture, and vertex coordinates of each character vertex in the target character; A size ratio between the first size and the second size is determined, and the vertex coordinates of each vertex of the character are determined based on the vertex coordinates of each vertex of the character and the size ratio.

8. The method according to claim 6, wherein The rendering of the bullet screen characters based on the vertex coordinates of each vertex, the vertex color of each vertex, the special effect information of the bullet screen characters, and the vertex texture information of each vertex to obtain the rendered bullet screen characters includes: Drawing the character texture of the bullet screen character based on the vertex coordinates of each vertex and the vertex texture information of each vertex; Based on the vertex color of each vertex, the character texture is color-drawn to obtain the middle bullet screen character; Based on the special effect information of the barrage characters, special effect processing is performed on the intermediate barrage characters to obtain the rendered barrage characters.

9. The method according to claim 8, wherein There are multiple barrage characters, and the multiple barrage characters are arranged in sequence from the starting position to the ending position; the special effect of the barrage characters is a gradient color effect from the starting position to the ending position; The performing special effects processing on the intermediate bullet-screen characters based on the special effects information of the bullet-screen characters to obtain the rendered bullet-screen characters includes: Determining the character vertex coordinates of each vertex in each of the bullet screen characters during arrangement; Obtaining the starting color of the starting position of the bullet screen character at the starting position and the ending color of the ending position of the bullet screen character at the ending position; Determining a character special effect color of each vertex in each barrage character based on the character vertex coordinates of each vertex in each barrage character, the starting color, and the ending color; The character special effect color of each vertex in each barrage character is used as the character special effect color of each vertex in the middle barrage character corresponding to each barrage character, and Based on the character special effect color of each vertex in each of the barrage characters, special effect processing is performed on the middle barrage characters corresponding to each of the barrage characters to obtain the rendered barrage characters.

10. A device for rendering barrage characters, characterized in that: The device comprises: A determination module, configured to determine whether a signed distance field texture of a bullet chat character to be rendered exists in a signed distance field texture set; wherein the bullet chat character includes text and images; An acquisition module is configured to, when the directed distance field texture of the barrage character exists in the directed distance field texture set, acquire the directed distance field texture from the directed distance field texture set, and, when the directed distance field texture of the barrage character does not exist in the directed distance field texture set, generate a character bitmap of the barrage character; determine the closest distance between each pixel point in the character bitmap and the character edge of the barrage character; normalize the closest distance corresponding to each pixel point to obtain a normalized result corresponding to each pixel point; fill the transparency channel value of each pixel point with the normalized result, and convert the red, green, blue, and red values ​​of each pixel point into the normalized value; The GB channel value is filled with 1 to obtain the signed distance field texture of the bullet screen character; determining whether there is an idle area in the dynamic signed distance field texture set; when the dynamic signed distance field texture set has an idle area, adding the signed distance field texture to the idle area of ​​the dynamic signed distance field texture set; when the dynamic signed distance field texture set does not have an idle area, generating a target signed distance field texture set, wherein the capacity of the target signed distance field texture set is greater than the capacity of the dynamic signed distance field texture set; adding the signed distance field texture and the dynamic signed distance field texture in the dynamic signed distance field texture set to the target signed distance field texture set; An extraction module, configured to determine the texture coordinates of each vertex in the bullet screen character, and extract vertex texture information of each vertex from the signed distance field texture based on the texture coordinates of each vertex; A rendering module is used to obtain the vertex color of each of the vertices and the special effect information of the barrage characters; based on the vertex texture information of each of the vertices, the vertex color of each of the vertices and the special effect information of the barrage characters, the barrage characters are rendered to obtain rendered barrage characters; wherein the rendering includes color drawing and special effect processing.

11. An electronic device, characterized in that: The electronic device comprises: a memory for storing computer-executable instructions; The processor is used to implement the method for rendering barrage characters described in any one of claims 1 to 9 when executing the computer-executable instructions stored in the memory.

12. A computer-readable storage medium storing computer-executable instructions, characterized in that: When the computer executable instructions are executed by the processor, the method for rendering barrage characters described in any one of claims 1 to 9 is implemented.

13. A computer program product comprising computer executable instructions, characterized in that: When the computer executable instructions are executed by the processor, the method for rendering barrage characters described in any one of claims 1 to 9 is implemented.

Images