Screen space halo method and system based on mobile platform
By adopting a screen space-based halo method on the mobile platform, using vertex and cell shaders to calculate the position and color of halo elements, the problems of insufficient performance and inflexible parameter configuration in the existing technology are solved, and efficient and flexible halo effects are achieved.
Patent Information
- Application Number
- CN202311235030.6
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-09-22
- Publication Date
- 2025-03-25
AI Technical Summary
When the prior art realizes the screen space halo effect on mobile platforms, the performance is insufficient and the parameter configuration is not flexible enough, making it difficult to meet the needs of different scenarios.
Using the screen space halo method based on mobile platform, by setting the halo model and texture map, the rotation angle and position of the halo element are calculated in the vertex shader, and the texture map is sampled in the celite shader to achieve the halo effect. This method provides a wealth of parameter configuration options, allowing customization of halo effects to be based on specific needs.
It realizes efficient halo effect on mobile platforms, and can run stably on both low-end devices and high-end devices without affecting the smoothness of the game. It also provides flexible parameter configuration options to meet the needs of different scenarios.
Smart Images

Figure CN119693522A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of image post-processing, and in particular to a screen space halo method and system based on a mobile platform. Background Art
[0002] In the field of image post-processing, the halo effect is a common visual effect used to enhance the attractiveness and artistic effect of images or videos. Currently, there are many methods for implementing screen space halo systems on mobile platforms. However, the existing technologies have some limitations in achieving efficient halo effects.
[0003] Disadvantages of the existing technology:
[0004] Insufficient performance: When implementing halo effects on mobile platforms, existing technologies often consume a lot of computing resources, resulting in poor performance and affecting user experience.
[0005] Inflexible: The parameter configurations of some existing methods are relatively fixed, making it difficult to flexibly adjust them according to different scenarios and needs, which limits their scope of application. Summary of the invention
[0006] In order to overcome the above problems, the purpose of the present invention is to provide a screen space halo method based on a mobile platform, which can customize the halo effect according to specific needs to meet the requirements of different scenes.
[0007] The present invention is implemented by the following scheme: a screen space halo method based on a mobile platform, the method comprising the following steps:
[0008] Step 1: prepare a halo model on a mobile platform. The halo model consists of multiple halo elements. The information of the halo elements includes vertex data and UV data.
[0009] Step 2: Prepare a texture map to simulate the halo effect;
[0010] Step 3: In the vertex shader, the rotation angle and position of the halo element and the final color of the halo element are obtained according to the vertex data;
[0011] Step 4: In the fragment shader, sample the texture map of the halo element, and color the halo element according to the output screen color obtained in the vertex shader to achieve the halo effect.
[0012] Further, the vertex data is used to describe the shape, size and position of the halo element; the halo element is a quadrilateral patch, the vertex data is stored in the vertex buffer, and the uv1 data ensFlaredata; uv2 data ensFlaredata1 are set, and the uv1 data ensFlaredata includes four components:
[0013] lensFlaredata.x: represents the offset, which is used to determine the position offset of the quadrilateral patch from the center of the light source;
[0014] lensFlaredata.y: represents the light color intensity, used to adjust the color intensity of the halo element;
[0015] lensFlaredata.z: indicates the width of the halo element after scaling;
[0016] lensFlaredata.w: indicates the height of the halo element after scaling;
[0017] The uv2 data ensFlaredata1 includes three components:
[0018] lensFlaredata1.x: represents the rotation angle, which is used to control the rotation of the halo element;
[0019] lensFlaredata1.z: represents the x direction value, 1 is the positive direction, -1 is the negative direction;
[0020] lensFlaredata1.w: represents the y direction value, 1 is the positive direction and -1 is the negative direction.
[0021] Furthermore, the step 3 is specifically as follows: Step 31, in the vertex shader, calculate the center position of the screen halfScreen:
[0022] halfScreen=float2(ScreenParams.x,ScreenParams.y)*0.5,
[0023] Among them: ScreenParams.x is the screen width;
[0024] ScreenParams.y is the screen height;
[0025] Step 32, calculate the coordinate offset realParamsOffset, that is, the offset between the position of the halo element on the screen and the center of the camera's field of view:
[0026] realParamsOffset=float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y)
[0027] Among them: FlareParams.x is the coordinate of the light source in the X direction of the screen;
[0028] FlareParams.y coordinate of the light source in the Y direction of the screen;
[0029] float2(x,y) creates a two-dimensional vector;
[0030] halfScreen.x screen center position X coordinate;
[0031] halfScreen.y screen center position Y coordinate;
[0032] Step 33, calculate the final coordinate offset realOffset, that is, the coordinate offset multiplied by lensFlaredata.x:
[0033] realOffset=realParamsOffset*lensFlaredata.x;
[0034] Step 34, calculate the screen space position of the halo element flareScreenPos:
[0035] flareScreenPos=float3(halfScreen.x+realOffset.x,halfScreen.y+realOffset.y,1):
[0036] By combining the values of halfScreen and realOffset, the screen space position of the halo element is calculated.
[0037] Among them: float3(x,y,z) creates a three-dimensional vector;
[0038] Step 35, calculate the deflection angle FlareAngle of the halo element:
[0039] FlareAngle=(180.0+SignedAngle(float2(0,1),float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y))) / 180*3.1415926;
[0040] Among them: SignedAngle is a common mathematical function, usually used to calculate the signed angle difference between two vectors;
[0041] Step 36: Obtain the world coordinate position, rotation angle, and final color of the halo element according to the screen space position flareScreenPos of the halo element and the deflection angle FlareAngle of the halo element.
[0042] The present invention also provides a screen space halo system based on a mobile platform, the system comprising: a halo model generation module, a texture map generation module, a vertex shader processing module, and a fragment shader processing module;
[0043] The halo model generation module is used to prepare a halo model on a mobile platform. The halo model is composed of a plurality of halo elements. The information of the halo elements includes vertex data and UV data.
[0044] The texture map generation module prepares a texture map for simulating a halo effect;
[0045] The vertex shader processing module, in the vertex shader, obtains the rotation angle and position of the halo element and the final color of the halo element according to the vertex data;
[0046] The fragment shader processing module samples the texture map of the halo element in the fragment shader, and colors the halo element according to the output screen color obtained in the vertex shader to achieve the halo effect.
[0047] Further, the vertex data is used to describe the shape, size and position of the halo element; the halo element is a quadrilateral patch, the vertex data is stored in the vertex buffer, and the uv1 data ensFlaredata; uv2 data ensFlaredata1 are set, and the uv1 data ensFlaredata includes four components:
[0048] lensFlaredata.x: represents the offset, which is used to determine the position offset of the quadrilateral patch from the center of the light source;
[0049] lensFlaredata.y: represents the light color intensity, used to adjust the color intensity of the halo element;
[0050] lensFlaredata.z: indicates the width of the halo element after scaling;
[0051] lensFlaredata.w: indicates the height of the halo element after scaling;
[0052] The uv2 data ensFlaredata1 includes three components:
[0053] lensFlaredata1.x: represents the rotation angle, which is used to control the rotation of the halo element;
[0054] lensFlaredata1.z: represents the x direction value, 1 is the positive direction, -1 is the negative direction;
[0055] lensFlaredata1.w: represents the y direction value, 1 is the positive direction and -1 is the negative direction.
[0056] Furthermore, the implementation of the vertex shader processing module is specifically as follows: Step 31, in the vertex shader, calculate the center position of the screen halfScreen:
[0057] halfScreen=float2(ScreenParams.x,ScreenParams.y)*0.5,
[0058] Among them: ScreenParams.x is the screen width;
[0059] ScreenParams.y is the screen height;
[0060] Step 32, calculate the coordinate offset realParamsOffset, that is, the offset between the position of the halo element on the screen and the center of the camera's field of view:
[0061] realParamsOffset=float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y)
[0062] Among them: FlareParams.x is the coordinate of the light source in the X direction of the screen;
[0063] FlareParams.y coordinate of the light source in the Y direction of the screen;
[0064] float2(x,y) creates a two-dimensional vector;
[0065] halfScreen.x screen center position X coordinate;
[0066] halfScreen.y screen center position Y coordinate;
[0067] Step 33, calculate the final coordinate offset realOffset, that is, the coordinate offset multiplied by lensFlaredata.x:
[0068] realOffset=realParamsOffset*lensFlaredata.x;
[0069] Step 34, calculate the screen space position of the halo element flareScreenPos:
[0070] flareScreenPos=float3(halfScreen.x+realOffset.x,halfScreen.y+realOffset.y,1):
[0071] By combining the values of halfScreen and realOffset, the screen space position of the halo element is calculated.
[0072] Among them: float3(x,y,z) creates a three-dimensional vector;
[0073] Step 35, calculate the deflection angle FlareAngle of the halo element:
[0074] FlareAngle=(180.0+SignedAngle(float2(0,1),float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y))) / 180*3.1415926;
[0075] Among them: SignedAngle is a common mathematical function, usually used to calculate the signed angle difference between two vectors;
[0076] Step 36: Obtain the world coordinate position, rotation angle, and final color of the halo element according to the screen space position flareScreenPos of the halo element and the deflection angle FlareAngle of the halo element.
[0077] The beneficial effects of the present invention are: 1. High performance: The system can achieve efficient halo effects on mobile platforms, and can run stably on both low-end and high-end devices without affecting the fluency of the game. That is, all calculations of the present invention are performed in the vertex shader. For example, if there are 4 halo elements, each with only 4 vertices, the vertex is only calculated 16 times; while the traditional halo effect is based on post-processing and is calculated in the fragment shader. Each pixel must be calculated according to the resolution, which causes device instability and affects the fluency of the game.
[0078] 2. Flexibility: The system provides a wealth of parameter configuration options, allowing users to customize the halo effect according to specific needs to meet the requirements of different scenes. That is, the present invention is configurable: the number of halo elements can be configured, the halo map can be configured, the halo effect can be configured, and the configured data is stored in the uv data, uv1 data, and uv2 data of the quadrilateral mesh; the performance of the present invention is optimized: the calculation is performed in the vertex shader, for example, there are 4 halo elements, each with only 4 vertices, and the vertex is only calculated 16 times. BRIEF DESCRIPTION OF THE DRAWINGS
[0079] Figure 1 It is a schematic flow chart of the method of the present invention.
[0080] Figure 2 It is a system principle block diagram of the present invention. DETAILED DESCRIPTION
[0081] The present invention will be further described below in conjunction with the accompanying drawings.
[0082] See also Figure 1 As shown, a screen space halo method based on a mobile platform of the present invention comprises the following steps:
[0083] Step 1: prepare a halo model on a mobile platform. The halo model consists of multiple halo elements. The information of the halo elements includes vertex data and UV data.
[0084] Step 2: Prepare a texture map to simulate the halo effect;
[0085] Step 3: In the vertex shader, the rotation angle and position of the halo element and the final color of the halo element are obtained according to the vertex data;
[0086] Step 4: In the fragment shader, sample the texture map of the halo element, and color the halo element according to the output screen color obtained in the vertex shader to achieve the halo effect.
[0087] The present invention will be further described below in conjunction with a specific embodiment:
[0088] The core of the technical solution of the present invention is to use the conversion of screen space and world space coordinates to draw a patch that is always facing the camera according to the configuration information to complete the rendering of the halo system. The following are the key steps:
[0089] A screen space halo method based on mobile platforms:
[0090] 1. Prepare the halo model: The halo model is composed of multiple halo elements. The halo element is a quadrilateral patch. The vertex data and uv data of the halo element are lensFlaredata, uv2 data lensFlaredata1:
[0091] 1) Vertex data:
[0092] Vertex data is used to define the shape and position of the halo elements. Typically, a patch consists of four vertices, which describe the position, size, and shape of the halo elements. You can store the coordinates of these vertices in a vertex buffer for use in the vertex shader.
[0093] 2) Texture sampling coordinates are stored in the uv data of the halo element
[0094] 3) lensFlaredata stores custom data in uv1 of the halo element, including four components:
[0095] lensFlaredata.x: represents the offset, which is used to determine the position offset of the quadrilateral from the center of the light source.
[0096] lensFlaredata.y: represents the light color intensity, which is used to adjust the color intensity of the halo element.
[0097] lensFlaredata.z: indicates the width of the flare element after scaling.
[0098] lensFlaredata.w: indicates the height of the flare element after scaling.
[0099] 4) lensFlaredata1 stores custom data 1 in uv2 of the halo element, including three components:
[0100] lensFlaredata1.x: represents the rotation angle, which is used to control the rotation of the halo element.
[0101] lensFlaredata1.z: represents the x-direction value, 1 is the positive direction and -1 is the negative direction.
[0102] lensFlaredata1.w: represents the y direction value, 1 is the positive direction and -1 is the negative direction.
[0103] 2. Prepare halo element map: a map that simulates the halo effect;
[0104] 3. Vertex shader processing: In the vertex shader, the rotation angle and position of the halo element, as well as the final color of the halo element, are calculated based on the vertex data. By considering the rotation direction and rotation angle, it is possible to ensure that the halo element is always facing the camera, enhancing the realism of the rendering effect.
[0105] (1) Calculate the center position of the screen (halfScreen):
[0106] halfScreen = float2(ScreenParams.x, ScreenParams.y)*0.5: Get half the size of the screen and store it in halfScreen.
[0107] in:
[0108] ScreenParams.x is the screen width;
[0109] ScreenParams.y is the screen height;
[0110] (2) Calculate the coordinate offset (realParamsOffset), that is, the offset between the position of the halo element on the screen and the center of the camera's field of view:
[0111] realParamsOffset=float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y);
[0112] in:
[0113] FlareParams.x coordinate of the light source in the X direction of the screen;
[0114] FlareParams.y coordinate of the light source in the Y direction of the screen;
[0115] float2(x,y) creates a two-dimensional vector;
[0116] halfScreen.x screen center position X coordinate;
[0117] halfScreen.y screen center position Y coordinate;
[0118] (3) Calculate the final coordinate offset (realOffset), which is the coordinate offset multiplied by lensFlaredata.x:
[0119] realOffset=realParamsOffset*lensFlaredata.x.
[0120] (4) Calculation of screen space position of halo elements:
[0121] flareScreenPos=float3(halfScreen.x+realOffset.x,halfScreen.y+realOffset.y,1):
[0122] By combining the values of halfScreen and realOffset, the world space of the halo element is calculated.
[0123] in:
[0124] float3(x,y,z) creates a three-dimensional vector
[0125] (5) Calculate the deflection angle of the halo element (FlareAngle)
[0126] FlareAngle=(180.0+SignedAngle(float2(0,1),float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y))) / 180*3.1415926;
[0127] Among them: SignedAngle is a common mathematical function, usually used to calculate the signed angle difference between two vectors;
[0128] (6) The world coordinate position calculation of the halo element and the rotation calculation method are as follows:
[0129] ① Calculate the distance from the point (lensFlaredata.z, lensFlaredata.w) to the center coordinate (0,0) of the halo element (quadrilateral):
[0130] distance=sqrt(lensFlaredata.z*lensFlaredata.z+lensFlaredata.w*lensFlaredata.w)
[0131] ②Construct the rotation matrix:
[0132] float2x2 rotationMatrix=float2x2(
[0133] cos(FlareAngle),-sin(FlareAngle),
[0134] sin(FlareAngle),cos(FlareAngle) );
[0136] Among them: sqrt square root, cos cosine function, sin sine function
[0137] float2x2 is a 2x2 matrix
[0138] ③ According to the calculated distance and rotation matrix, construct the vertex (lensFlaredata1.z*distance, lensFlaredata1.w*distance) to rotate around a circle with distance as the radius. The position after rotation is (rotateOffset):
[0139] rotateOffset=mul(rotationMatrix,float2(lensFlaredata1.z*distance,lensFlaredata1.w*distance))
[0140] in:
[0141] rotateOffset is a 2D vector, which is the position of the vertex after rotation. mul represents matrix multiplication.
[0142] for example:
[0143] The length of distance is 2, lensFlaredata1.z is 1, lensFlaredata1.w is 1, and the vertex (1*2, 1*2) is constructed to rotate clockwise around the point 0,0 with a circle of radius 2.
[0144] ④ Calculation of world coordinate position (positionOS) without rotating halo elements:
[0145] positionOS=float4(ScreenToWorldMatrix(float3(flareScreenPos.x+lensFlaredata1.z*lensFlaredata.z,
[0146] flareScreenPos.y+lensFlaredata1.w*lensFlaredata.w,flareScreenPos.z)),1);
[0147] Among them: ScreenToWorldMatrix is the function of converting screen to world coordinates;
[0148] float4 float4(x,y,z,w) creates a four-dimensional vector;
[0149] ⑤ Calculation of world coordinate position (positionOSR) with rotating halo element:
[0150] positionOSR=float4(ScreenToWorldMatrix(float3(flareScreenPos.x+rotateOffset.x,
[0151] flareScreenPos.y+rotateOffset.y,flareScreenPos.z)),1);
[0152] ⑥ Calculate according to the final world coordinate position (finalPositionOS) of the halo element:
[0153] finalPositionOS=positionOS*(1-step(1,lensFlaredata1.x))+step(1,lensFlaredata1.x)*positionOSR;
[0154] in:
[0155] step threshold function;
[0156] step(1,lensFlaredata1.x): if lensFlaredata1.x is greater than or equal to 1, then return 1.
[0157] The rotated world coordinate positionOSR;
[0158] If lensFlaredata1.x is less than 1, it returns 0 and selects the world coordinate positionOS without rotation.
[0159] (7) Calculation of the color (finalColor) of the halo element
[0160] finalColor=lensFlaredata.y*_MainLightColor;
[0161] Among them: _MainLightColor is the light color; that is, _MainLightColor is the color of the light itself;
[0162] 4. Fragment shader processing: In the fragment shader, the texture map of the halo element is sampled, and the halo element is colored according to the color (finalColor) and position information calculated in the vertex shader.
[0163] Output screen color = halo element map * finalColor.
[0164] See also Figure 2 As shown, a screen space halo system based on a mobile platform of the present invention comprises: a halo model generation module, a texture map generation module, a vertex shader processing module, and a fragment shader processing module;
[0165] The halo model generation module is used to prepare a halo model on a mobile platform. The halo model is composed of a plurality of halo elements. The information of the halo elements includes vertex data and UV data.
[0166] The texture map generation module prepares a texture map for simulating a halo effect;
[0167] The vertex shader processing module, in the vertex shader, obtains the rotation angle and position of the halo element and the final color of the halo element according to the vertex data;
[0168] The fragment shader processing module samples the texture map of the halo element in the fragment shader, and colors the halo element according to the output screen color obtained in the vertex shader to achieve the halo effect.
[0169] Further, the vertex data is used to describe the shape, size and position of the halo element; the halo element is a quadrilateral patch, the vertex data is stored in the vertex buffer, and the uv1 data ensFlaredata; uv2 data ensFlaredata1 are set, and the uv1 data ensFlaredata includes four components:
[0170] lensFlaredata.x: represents the offset, which is used to determine the position offset of the quadrilateral patch from the center of the light source;
[0171] lensFlaredata.y: represents the light color intensity, used to adjust the color intensity of the halo element;
[0172] lensFlaredata.z: indicates the width of the halo element after scaling;
[0173] lensFlaredata.w: indicates the height of the halo element after scaling;
[0174] The uv2 data ensFlaredata1 includes three components:
[0175] lensFlaredata1.x: represents the rotation angle, which is used to control the rotation of the halo element;
[0176] lensFlaredata1.z: represents the x direction value, 1 is the positive direction, -1 is the negative direction;
[0177] lensFlaredata1.w: represents the y direction value, 1 is the positive direction and -1 is the negative direction.
[0178] Furthermore, the implementation of the vertex shader processing module is specifically as follows: Step 31, in the vertex shader, calculate the center position of the screen halfScreen:
[0179] halfScreen=float2(ScreenParams.x,ScreenParams.y)*0.5,
[0180] Among them: ScreenParams.x is the screen width;
[0181] ScreenParams.y is the screen height;
[0182] Step 32, calculate the coordinate offset realParamsOffset, that is, the offset between the position of the halo element on the screen and the center of the camera's field of view:
[0183] realParamsOffset=float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y)
[0184] Among them: FlareParams.x is the coordinate of the light source in the X direction of the screen;
[0185] FlareParams.y coordinate of the light source in the Y direction of the screen;
[0186] float2(x,y) creates a two-dimensional vector;
[0187] halfScreen.x screen center position X coordinate;
[0188] halfScreen.y screen center position Y coordinate;
[0189] Step 33, calculate the final coordinate offset realOffset, that is, the coordinate offset multiplied by lensFlaredata.x:
[0190] realOffset=realParamsOffset*lensFlaredata.x;
[0191] Step 34, calculate the screen space position of the halo element flareScreenPos:
[0192] flareScreenPos=float3(halfScreen.x+realOffset.x,halfScreen.y+realOffset.y,1):
[0193] By combining the values of halfScreen and realOffset, the screen space position of the halo element is calculated.
[0194] Among them: float3(x,y,z) creates a three-dimensional vector;
[0195] Step 35, calculate the deflection angle FlareAngle of the halo element:
[0196] FlareAngle=(180.0+SignedAngle(float2(0,1),float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y))) / 180*3.1415926;
[0197] Among them: SignedAngle is a common mathematical function, usually used to calculate the signed angle difference between two vectors;
[0198] Step 36: Obtain the world coordinate position, rotation angle, and final color of the halo element according to the screen space position flareScreenPos of the halo element and the deflection angle FlareAngle of the halo element.
[0199] The step 36 is specifically as follows: ① Calculate the distance from the point (lensFlaredata.z, lensFlaredata.w) to the center coordinate (0,0) of the quadrilateral of the halo element:
[0200] distance=sqrt(lensFlaredata.z*lensFlaredata.z+lensFlaredata.w*lensFlaredata.w)
[0201] ②Construct the rotation matrix:
[0202] float2x2 rotationMatrix=float2x2(
[0203] cos(FlareAngle),-sin(FlareAngle),
[0204] sin(FlareAngle),cos(FlareAngle));
[0205] Among them: sqrt is the square root, cos is the cosine function, sin is the sine function, and float2x2 is a 2x2 matrix;
[0206] ③ According to the calculated distance and rotation matrix, construct the vertex (lensFlaredata1.z*distance, lensFlaredata1.w*distance) and rotate it around a circle with distance as the radius. The position of the rotated vertex is rotateOffset:
[0207] rotateOffset=mul(rotationMatrix,float2(lensFlaredata1.z*distance,lensFlaredata1.w*distance))
[0208] Among them: rotateOffset is a two-dimensional vector, which is the position of the vertex after rotation; mul represents matrix multiplication;
[0209] ④ Calculate the non-rotated world coordinate positionOS of the halo element:
[0210] positionOS=float4(ScreenToWorldMatrix(float3(flareScreenPos.x+lensFlaredata1.z*lensFlaredata.z,flareScreenPos.y+lensFlaredata1.w*lensFlaredata.w,flareScreenPos.z)),1);
[0211] Among them: ScreenToWorldMatrix is the screen to world coordinate function
[0212] float4(x,y,z,w) creates a four-dimensional vector;
[0213] ⑤Calculate the rotated world coordinate position positionOSR of the halo element:
[0214] positionOSR=float4(ScreenToWorldMatrix(float3(flareScreenPos.x+rotateOffset.x,flareScreenPos.y+rotateOffset.y,flareScreenPos.z)),1);
[0215] ⑥Calculate the final world coordinate position of the halo element finalPositionOS:
[0216] finalPositionOS=positionOS*(1-step(1,lensFlaredata1.x))+step(1,lensFlaredata1.x)*positionOSR;
[0217] in:
[0218] step threshold function;
[0219] step(1,lensFlaredata1.x): if lensFlaredata1.x is greater than or equal to 1, then return 1.
[0220] The rotated world coordinate positionOSR;
[0221] If lensFlaredata1.x is less than 1, it returns 0 and selects the world coordinate positionOS without rotation;
[0222] ⑦Calculate the finalColor color of the halo element:
[0223] finalColor=lensFlaredata.y*_MainLightColor;
[0224] Among them: _MainLightColor is the light color; that is, _MainLightColor is the color of the light itself;
[0225] Wherein, the output screen color = halo element map * finalColor; the halo element can be colored according to the final world coordinate position of the halo element and the output screen color to achieve a halo effect.
[0226] The application scenarios of the present invention are as follows:
[0227] In mobile game development, creating an open world game is a huge challenge because a large number of game world elements and environmental changes need to be processed. In order to improve the visual appeal and immersion of the game, as well as to adapt to the halo effect of different scenes, the "screen space halo system based on mobile platform" of the present invention can be applied. The following will describe the application process in the open world game of the mobile platform in combination with a specific application scenario.
[0228] Scene description: Open world adventure game
[0229] Assume that an open world adventure game is being developed, where players can freely explore, complete tasks and interact in a huge virtual world. This virtual world includes a variety of environments, such as forests, deserts, mountains, cities, etc., each with a unique light source and atmosphere. The following is the application process of the present invention in this game scenario:
[0230] 1. Prepare a halo model: There are many light sources in the game, including the sun, city lights, campfires, stars, etc. Each light source requires a halo model to produce appropriate halo effects in different environments. For example, in a city, city lights may produce a soft halo, while in a forest, stars and campfires may produce a warmer halo effect.
[0231] 2. Vertex shader processing: The halo elements in the game need to be rendered in real time based on the player's perspective and the position of the light source. In the vertex shader, the position, rotation angle, and color of each halo element are calculated. Given the vast nature of the virtual world, it is necessary to ensure that the appropriate halo effect is generated in different locations and at different times. For example, at dusk, the halo effect of the sun may be warmer and softer.
[0232] 3. Fragment shader processing: In the fragment shader, the halo elements are shaded with high quality, using high-resolution texture maps. These maps contain details and color variations of various halo effects. The color and brightness of the halo elements are dynamically adjusted according to the game time, weather, and light source properties to make the halo effect coordinated with the environment of the virtual world.
[0233] 4. In-game effects: In the game, players will be immersed in the open world, and the halo effect will enhance the atmosphere and visual appeal of the game. When players walk on the city streets, the city lights produce a soft halo, illuminating the surrounding buildings and streets. When players set up camp in the forest, the campfire will produce a soft halo, and the stars will twinkle in the night sky, creating a peaceful atmosphere.
[0234] 5. Performance and flexibility: The system of the present invention performs well on mobile platforms and provides a smooth gaming experience even in large open world environments. Game developers can easily adjust the parameters of the halo effect according to the different areas and plot requirements of the game to ensure that each scene has a unique visual charm.
[0235] In summary, by applying the screen space halo system of the present invention, the open world adventure game achieves fascinating visual effects on the mobile platform, allowing players to freely explore the huge virtual world and feel realistic halo in different environments.
[0236] The above description is only a preferred embodiment of the present invention. All equivalent changes and modifications made according to the scope of the patent application of the present invention should fall within the scope of the present invention.
Claims
1. A screen space halo method based on a mobile platform, characterized by: The method comprises the following steps: Step 1: prepare a halo model on a mobile platform. The halo model consists of multiple halo elements. The information of the halo elements includes vertex data and UV data. Step 2: Prepare a texture map to simulate the halo effect; Step 3: In the vertex shader, the rotation angle and position of the halo element and the final color of the halo element are obtained according to the vertex data; Step 4: In the fragment shader, sample the texture map of the halo element, and color the halo element according to the output screen color obtained in the vertex shader to achieve the halo effect.
2. The screen space halo method based on a mobile platform according to claim 1, characterized in that: The vertex data is used to describe the shape, size and position of the halo element; the halo element is a quadrilateral patch, the vertex data is stored in the vertex buffer, and the uv1 data ensFlaredata; uv2 data ensFlaredata1 are set, and the uv1 data ensFlaredata includes four components: lensFlaredata.x: represents the offset, which is used to determine the position offset of the quadrilateral patch from the center of the light source; lensFlaredata.y: represents the light color intensity, used to adjust the color intensity of the halo element; lensFlaredata.z: indicates the width of the halo element after scaling; lensFlaredata.w: indicates the height of the halo element after scaling; The uv2 data ensFlaredata1 includes three components: lensFlaredata1.x: represents the rotation angle, which is used to control the rotation of the halo element; lensFlaredata1.z: represents the x direction value, 1 is the positive direction, -1 is the negative direction; lensFlaredata1.w: represents the y direction value, 1 is the positive direction and -1 is the negative direction.
3. The screen space halo method based on a mobile platform according to claim 2, characterized in that: The step 3 is specifically as follows: Step 31, in the vertex shader, calculate the center position of the screen halfScreen: halfScreen=float2(ScreenParams.x,ScreenParams.y)*0.5, Among them: ScreenParams.x is the screen width; ScreenParams.y is the screen height; Step 32, calculate the coordinate offset realParamsOffset, that is, the offset between the position of the halo element on the screen and the center of the camera's field of view: realParamsOffset=float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y) Among them: FlareParams.x is the coordinate of the light source in the X direction of the screen; FlareParams.y coordinate of the light source in the Y direction of the screen; float2(x,y) creates a two-dimensional vector; halfScreen.x screen center position X coordinate; halfScreen.y screen center position Y coordinate; Step 33, calculate the final coordinate offset realOffset, that is, the coordinate offset multiplied by lensFlaredata.x: realOffset=realParamsOffset*lensFlaredata.x; Step 34, calculate the screen space position of the halo element flareScreenPos: flareScreenPos=float3(halfScreen.x+realOffset.x,halfScreen.y+realOffset.y,1): The screen space position of the halo element is calculated by combining the values of halfScreen and realOffset, where: float3(x, y, z) creates a three-dimensional vector; Step 35, calculate the deflection angle FlareAngle of the halo element: FlareAngle=(180.0+SignedAngle(float2(0,1),float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y))) / 180*3.1415926; Among them: SignedAngle is a common mathematical function, usually used to calculate the signed angle difference between two vectors; Step 36: Obtain the world coordinate position, rotation angle, and final color of the halo element according to the screen space position flareScreenPos of the halo element and the deflection angle FlareAngle of the halo element.
4. The screen space halo method based on a mobile platform according to claim 3, characterized in that: The step 36 is specifically as follows: ① Calculate the distance from the point (lensFlaredata.z, lensFlaredata.w) to the center coordinate (0,0) of the quadrilateral of the halo element: distance=sqrt(lensFlaredata.z*lensFlaredata.z+lensFlaredata.w*lensFlaredata.w) ②Construct the rotation matrix: float2x2 rotationMatrix=float2x2( cos(FlareAngle),-sin(FlareAngle), sin(FlareAngle),cos(FlareAngle)); Among them: sqrt is the square root, cos is the cosine function, sin is the sine function, and float2x2 is a 2x2 matrix; ③ According to the calculated distance and rotation matrix, construct the vertex (lensFlaredata1.z*distance, lensFlaredata1.w*distance) and rotate it around a circle with distance as the radius. The position of the rotated vertex is rotateOffset: rotateOffset=mul(rotationMatrix,float2(lensFlaredata1.z*distance,lensFlaredata1.w*distance)) Among them: rotateOffset is a two-dimensional vector, which is the position of the vertex after rotation; mul represents matrix multiplication; rotationMatrix is the rotation matrix, ④Calculate the world coordinate position without rotation positionOS: positionOS=float4(ScreenToWorldMatrix(float3(flareScreenPos.x+lensFlaredata1.z*lensFlaredata.z,flareScreenPos.y+lensFlaredata1.w*lensFlaredata.w,flareScreenPos.z)),1); Among them: ScreenToWorldMatrix is the screen to world coordinate function float4(x,y,z,w) creates a four-dimensional vector; ⑤Calculate the rotated world coordinate position positionOSR: positionOSR=float4(ScreenToWorldMatrix(float3(flareScreenPos.x+rotateOffset.x,flareScreenPos.y+rotateOffset.y,flareScreenPos.z)),1); ⑥Calculate the final world coordinate position of the halo element finalPositionOS: finalPositionOS=positionOS*(1-step(1,lensFlaredata1.x))+step(1,lensFlaredata1.x)*positionOSR; in: step threshold function; step(1,lensFlaredata1.x): if lensFlaredata1.x is greater than or equal to 1, it returns 1 and uses the rotated world coordinate positionOSR; If lensFlaredata1.x is less than 1, it returns 0 and selects the world coordinate positionOS without rotation; ⑦Calculate the finalColor color of the halo element: finalColor=lensFlaredata.y*_MainLightColor; Among them: _MainLightColor is the light color.
5. The screen space halo method based on a mobile platform according to claim 4, characterized in that: The output screen color = halo element map * finalColor; the halo element can be colored according to the final world coordinate position of the halo element and the output screen color to achieve a halo effect.
6. A screen space halo system based on a mobile platform, characterized by: The system comprises: a halo model generation module, a texture map generation module, a vertex shader processing module, and a fragment shader processing module; the halo model generation module is used to set and prepare a halo model on a mobile platform, the halo model is composed of a plurality of halo elements, and the information of the halo elements comprises: vertex data and UV data; The texture map generation module prepares a texture map for simulating a halo effect; The vertex shader processing module, in the vertex shader, obtains the rotation angle and position of the halo element and the final color of the halo element according to the vertex data; The fragment shader processing module samples the texture map of the halo element in the fragment shader, and colors the halo element according to the output screen color obtained in the vertex shader to achieve the halo effect.
7. The screen space halo system based on a mobile platform according to claim 6, characterized in that: The vertex data is used to describe the shape, size and position of the halo element; the halo element is a quadrilateral patch, the vertex data is stored in the vertex buffer, and the uv1 data ensFlaredata; uv2 data ensFlaredata1 are set, and the uv1 data ensFlaredata includes four components: lensFlaredata.x: represents the offset, which is used to determine the position offset of the quadrilateral patch from the center of the light source; lensFlaredata.y: represents the light color intensity, used to adjust the color intensity of the halo element; lensFlaredata.z: indicates the width of the halo element after scaling; lensFlaredata.w: indicates the height of the halo element after scaling; The uv2 data ensFlaredata1 includes three components: lensFlaredata1.x: represents the rotation angle, which is used to control the rotation of the halo element; lensFlaredata1.z: represents the x direction value, 1 is the positive direction, -1 is the negative direction; lensFlaredata1.w: represents the y direction value, 1 is the positive direction and -1 is the negative direction.
8. The screen space halo system based on a mobile platform according to claim 7, characterized in that: The implementation of the vertex shader processing module is specifically as follows: Step 31, in the vertex shader, calculate the screen center position halfScreen: halfScreen=float2(ScreenParams.x,ScreenParams.y)*0.5, Among them: ScreenParams.x is the screen width; ScreenParams.y is the screen height; Step 32, calculate the coordinate offset realParamsOffset, that is, the offset between the position of the halo element on the screen and the center of the camera's field of view: realParamsOffset=float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y) Among them: FlareParams.x is the coordinate of the light source in the X direction of the screen; FlareParams.y coordinate of the light source in the Y direction of the screen; float2(x,y) creates a two-dimensional vector; halfScreen.x screen center position X coordinate; halfScreen.y screen center position Y coordinate; Step 33, calculate the final coordinate offset realOffset, that is, the coordinate offset multiplied by lensFlaredata.x: realOffset=realParamsOffset*lensFlaredata.x; Step 34, calculate the screen space position of the halo element flareScreenPos: flareScreenPos=float3(halfScreen.x+realOffset.x,halfScreen.y+realOffset.y,1): By combining the values of halfScreen and realOffset, the screen space position of the halo element is calculated. Among them: float3(x,y,z) creates a three-dimensional vector; Step 35, calculate the deflection angle FlareAngle of the halo element: FlareAngle=(180.0+SignedAngle(float2(0,1),float2(FlareParams.x-halfScreen.x,FlareParams.y-halfScreen.y))) / 180*3.1415926; Among them: SignedAngle is a common mathematical function, usually used to calculate the signed angle difference between two vectors; Step 36: Obtain the world coordinate position, rotation angle, and final color of the halo element according to the screen space position flareScreenPos of the halo element and the deflection angle FlareAngle of the halo element.
9. The screen space halo system based on a mobile platform according to claim 8, characterized in that: The step 36 is specifically as follows: ① Calculate the distance from the point (lensFlaredata.z, lensFlaredata.w) to the center coordinate (0,0) of the quadrilateral of the halo element: distance=sqrt(lensFlaredata.z*lensFlaredata.z+lensFlaredata.w*lensFlaredata.w) ②Construct the rotation matrix: float2x2 rotationMatrix=float2x2( cos(FlareAngle),-sin(FlareAngle), sin(FlareAngle),cos(FlareAngle)); Among them: sqrt is the square root, cos is the cosine function, sin is the sine function, and float2x2 is a 2x2 matrix; ③ According to the calculated distance and rotation matrix, construct the vertex (lensFlaredata1.z*distance, lensFlaredata1.w*distance) and rotate it around a circle with distance as the radius. The position of the rotated vertex is rotateOffset: rotateOffset=mul(rotationMatrix,float2(lensFlaredata1.z*distance,lensFlaredata1.w*distance)) Among them: rotateOffset is a two-dimensional vector, which is the position of the vertex after rotation; mul represents matrix multiplication, and rotationMatrix is the rotation matrix. ④Calculate the world coordinate position without rotation positionOS: positionOS=float4(ScreenToWorldMatrix(float3(flareScreenPos.x+lensFlaredata1.z*lensFlaredata.z,flareScreenPos.y+lensFlaredata1.w*lensFlaredata.w,flareScreenPos.z)),1); Among them: ScreenToWorldMatrix is the screen to world coordinate function float4(x,y,z,w) creates a four-dimensional vector; ⑤Calculate the rotated world coordinate position positionOSR: positionOSR=float4(ScreenToWorldMatrix(float3(flareScreenPos.x+rotateOffset.x,flareScreenPos.y+rotateOffset.y,flareScreenPos.z)),1); ⑥Calculate the final world coordinate position of the halo element finalPositionOS: finalPositionOS=positionOS*(1-step(1,lensFlaredata1.x))+step(1,lensFlaredata1.x)*positionOSR; in: step threshold function; step(1,lensFlaredata1.x): if lensFlaredata1.x is greater than or equal to 1, it returns 1 and uses the rotated world coordinate positionOSR; If lensFlaredata1.x is less than 1, it returns 0 and selects the world coordinate positionOS without rotation; ⑦Calculate the finalColor color of the halo element: finalColor=lensFlaredata.y*_MainLightColor; Among them: _MainLightColor is the light color.
10. The screen space halo system based on a mobile platform according to claim 9, characterized in that: The output screen color = halo element map * finalColor; the halo element can be colored according to the final world coordinate position of the halo element and the output screen color to achieve a halo effect.