1# Surface<a name="EN-US_TOPIC_0000001078362030"></a>
2
3-   [Introduction](#section11660541593)
4-   [Directory Structure](#section161941989596)
5-   [Compilation and Building](#section137768191623)
6-   [Description](#section1312121216216)
7    -   [Process Description](#section1551164914237)
8    -   [Usage](#section129654513264)
9
10-   [Repositories Involved](#section1371113476307)
11
12## Introduction<a name="section11660541593"></a>
13
14A surface is used to manage and transfer the shared memory of graphics and media. Specific use cases include graphics display and composition, and media playback and recording.
15
16A surface transfers data across processes through control structures such as Inter-Process Communication \(IPC\) handles \(with copies\), and transfers graphics and media data \(zero-copy\) through shared memory. The following figure shows the position where a surface works in the system architecture. The elements in green blocks are surface buffers.
17
18**Figure  1**  Position of a surface (known as Screen buffer in the following figure) in the system architecture<a name="fig584223343312"></a>
19![](figures/position-of-a-surface-in-the-system-architecture.png "position-of-a-surface-in-the-system-architecture")
20
21## Directory Structure<a name="section161941989596"></a>
22
23```
24/foundation/graphic/graphic_surface
25├── surface             # Framework code
26│   ├── include         # Header
27│   ├── src             # Source Code
28│   └── test            # Test code
29│       ├── fuzztest    # Fuzzing
30│       └── unittest    # Unit testing
31├── interfaces          # APIs
32│   ├── innerkits       # APIs between modules
33│   └── kits            # External APIs
34├── buffer_handle       # widget storage
35└── scoped_bytrace      # widget storage
36```
37
38## Compilation and Building<a name="section137768191623"></a>
39
40```
41# Generate the surface.so file in the out directory of the product folder through GN compilation.
42hb build graphic_surface
43```
44
45## Description<a name="section1312121216216"></a>
46
47### Process Description<a name="section1551164914237"></a>
48
49Take the interaction between Window Manager Service \(WMS\) and UI as an example. UI works as a producer, and WMS works as a consumer.
50
51The producer obtains a buffer from the free queue, draws the UI content into the buffer, and places the buffer in the dirty queue.
52
53The consumer obtains the buffer from the dirty queue, synthesizes graphics data, and places the buffer in the free queue again.
54
55**Figure  2**  Surface rotation process<a name="fig126141128261"></a>
56![](figures/surface-rotation-process.png "surface-rotation-process")
57
58>![](figures/icon-notice.gif) **NOTICE:**
59>1.  A shared memory is used for data transfer, and the process of creating a surface of the first time should be responsible for task of managing the shared memory. If the process is abnormal and is not recycled, severe memory leakage occurs. Therefore, pay special attention to the process.
60>2.  Surfaces are generally used for cross-process transfers of large memory blocks \(such as display data\) in graphics or media. Especially, when continuous physical memory is used, the transfer rate can be greatly improved. It is not recommended that surfaces be used in small-memory transfer scenarios. Otherwise, memory fragmentation may occur, which affects the performance in typical scenarios.
61
62### Usage<a name="section129654513264"></a>
63
64For details, see lite  [WMS](https://gitee.com/openharmony/window_window_manager_lite/blob/master/README.md).
65
66## Repositories Involved<a name="section1371113476307"></a>
67
68[Graphic subsystem](https://gitee.com/openharmony/docs/blob/master/en/readme/graphics.md)
69
70[window_window_manager](https://gitee.com/openharmony/window_window_manager/blob/master/README.md)
71