@pati_gallardo
Isolating GPU Access
in its own process
@pati_gallardo Patricia Aas
Foss-North, Gothenburg, Sweden, 2018
Patricia Aas - Vivaldi Browser
Programmer - mainly in C++
Currently : Vivaldi Technologies
Previously : Cisco Systems, Knowit, Opera Software
Master in Computer Science - main language Java
Twitter : @pati_gallardo
Building A Browser
@pati_gallardo
@pati_gallardo
Disclaimer: This Talk Is a bit Linux Focused ¯_(ツ)_/¯
- What is Chromium?
- Why have a GPU process?
- Communication Architecture
- Passing A Video Frame
- Can I Use?
@pati_gallardo
@pati_gallardoSome Browser Trivia
Konqueror Safari Chrome
Brave
Vivaldi
Opera
KHTML Webkit Blink
KDE Apple Google
Process Architecture
Browser
Gpu BrokerZygote
Renderer
GpuZygote Init
Renderer
Renderer
Process
Relationships
Tabs
Composition
The Browser Window is
composed of many views
produced by many
cooperating processes
@pati_gallardo
- What is Chromium?
- Why have a GPU process?
- Communication Architecture
- Passing A Video Frame
- Can I Use?
@pati_gallardo
@pati_gallardo
Why Not Do GPU Composition in The Browser Process?
Well, Actually… On Android It Does… But I Digress…
@pati_gallardo
1. Security
2. Robustness
3. Dependency Separation
@pati_gallardo
Security
@pati_gallardo
Example
Texture memory being leaked across processes
- From Other Programs on the Users Machine
- From Other Tabs
- From the Browser
@pati_gallardo
User : Lxgr
security.stackexchange.com
Robustness
@pati_gallardo
Graphics Drivers Crashing the Browser
- Prevent bugs in GPU drivers from crashing the browser
- Make sure graphics code in WebGL can’t crash the browser
- Compensate for Graphics Driver Bugs/Inconsistencies
@pati_gallardo
Dependency Separation
@pati_gallardo
Keep GPU Process Dependencies Out of the
Renderer process
- Minimize the renderer sandbox
- Can Have Different Dependencies
@pati_gallardo
Performance? ¯_(ツ)_/¯
@pati_gallardo
Before We Dive In - Deep Breath :D@pati_gallardo
“We can solve any problem by introducing an extra
level of indirection.
…except for the problem of too many levels of
indirection”
Fundamental theorem of software engineering
Andrew Koenig/Butler Lampson/David J. Wheeler
@pati_gallardo
- What is Chromium?
- Why have a GPU process?
- Communication Architecture
- Passing A Video Frame
- Can I Use?
@pati_gallardo
IPC, Commands & Synchronization
@pati_gallardo
Process Architecture
Browser
Gpu BrokerZygote
Renderer
GpuZygote Init
Renderer
Renderer
Process
Relationships
Tabs
Communication Architecture
Renderer
Gpu Process
Browser Renderer
IPC Channels
Shared Memory
Gpu Memory BuffersCommand Buffers
High Level Design
Client - Server Architecture
Emulates OpenGl ES2.0
Actual Graphics Implementation is Platform Specific
Composition in GPU Process
Page Composition Controlled From Renderer
@pati_gallardo
OpenGL ES2 calls are serialized into “Commands” That are
placed in a Ring Buffer in Shared Memory called a
“Command Buffer”. The GPU process de-serializes them,
does validation, maybe some workarounds, and executes
them using the Platform Graphics System.
@pati_gallardo
Implementation Design
Client
Renderer / Browser
- Write commands to
shared memory
- Update ‘put’ pointer
- Signal GPU process
@pati_gallardo
Server
GPU Process
- Read commands from
shared memory
- Validate command and
arguments
- Make actual call@pati_gallardo
Synchronization of Commands
@pati_gallardo
Gpu
Process
Command
Buffer
IPC Channel
Command
Stream
Ordering
Barrier
Unverified Sync Token
Wait Sync Token
Wait Sync TokenCommandCommand
Command
Command
Command Command
CommandVerified Sync TokenBrowser
Renderer
Renderer
Command
Command
CommandCommand
CommandCommand
Sync Token - Inserts a synchronization
fence into the command
stream
- Can be attached to a
resource (texture) that
cannot be used before all
previous commands have
been processed
@pati_gallardo
Mailbox Holder
1. Mailbox - unique name
2. SyncToken - fence
3. Texture Target Type (if
texture backed)
@pati_gallardo
- What is Chromium?
- Why have a GPU process?
- Communication Architecture
- Passing A Video Frame
- Can this work for you?
@pati_gallardo
Exploring Composition
@pati_gallardo
Compositing in Chromium
- Software Compositing is Done In the Browser Process
- Hardware/GPU Compositing is Done in the GPU Process
(Except on Android where there is a GPU thread in the Browser Process)
@pati_gallardo
Insert Some Hand Waving
The full architecture is
massive
We will follow one path
A software decoded video
frame
@pati_gallardo
Getting a Video Frame into the Page
@pati_gallardo
Software Decoded Video Frame
- Decoded Frame in Memory in RENDERER PROCESS
- GPU Composition is done in the GPU PROCESS
- The Frame needs to be uploaded to the GPU as a Texture
@pati_gallardo
“At a high enough level of
abstraction, everything looks the
same.”
Law of PowerPoint Architecture
Patricia Aas, 2018
@pati_gallardo
@pati_gallardo
Decode
Decoding Video
Browser Process
Network
stack
Renderer
Decoder*
VideoFrame
Memory Buffer
Y Plane
U Plane
V Plane
Internet
* Sometimes decodeing is done in the GPU process
@pati_gallardo
Texturize
texture_target
Mac
GL_TEXTURE_RECTANGLE_ARB
Android/Linux
GL_TEXTURE_EXTERNAL_OES
Fallback
GL_TEXTURE_2D
@pati_gallardo
OES_EGL_image_external
Extension that creates EGLImage texture targets from EGLImages
“Each TEXTURE_EXTERNAL_OES texture object may require up to 3
texture image units for each texture unit to which it is bound.”
@pati_gallardo
VideoFrame VideoFrame
Memory Buffer
V Plane
Y Plane
U Plane
Shared Memory Gpu ProcessRenderer
Transform the Video Frame into a GPU Resource
Y Plane Texture
UV Plane Texture
Plane Resources
Y Plane
GpuMemoryBufferUV Planes
GpuMemoryBuffer
MailboxHolder
SyncToken
MailboxMailbox
MailboxHolder
@pati_gallardo
Prepare
VideoFrame
Shared Memory
Gpu ProcessRenderer
Y Plane Texture
UV Plane Texture
Plane Resources
Y Plane
GpuMemoryBufferUV Planes
GpuMemoryBuffer
MailboxHolder
SyncToken
Mailbox
Mailbox
MailboxHolder
Transferrable
Resource
Texture filter
GL_LINEAR
Texture target
GL_TEXTURE_2D
Transferrable
Resource
Texture filter
GL_LINEAR
Texture target
GL_TEXTURE_2D
Id: 0
Id: 1
Move into a Transferrable Resource
@pati_gallardo
Add to Render
YUVVideoDrawQuad
Gpu ProcessRenderer
Y Plane Texture
UV Plane Texture
MailboxHolder
SyncToken
Mailbox
MailboxHolder
Mailbox
RenderPass
Resources
Id: 0 Id: 1
Transferrable
Resource
Texture filter
GL_LINEAR
Texture target
GL_TEXTURE_2D
Transferrable
Resource
Texture filter
GL_LINEAR
Texture target
GL_TEXTURE_2D
Id: 0
Id: 1
LayerTreeResourceProvider
@pati_gallardo
Render!
YUVVideoDrawQuad
Resources
Id: 0 Id: 1
Render The Frame!
GLRenderer::DrawYUVVideoQuad
clip_region
GLES2 Extensions
@pati_gallardo
Examples : Chromium GLES2 Extensions
● CHROMIUM_image
● CHROMIUM_texture_mailbox
● CHROMIUM_sync_point
@pati_gallardo
- What is Chromium?
- Why have a GPU process?
- Communication Architecture
- Passing A Video Frame
- Can I Use?
@pati_gallardo
Not Exactly Cut And Paste
@pati_gallardo
Three APIs are in use in the renderer
1. Opengl ES2
2. Chromium GL ES2 Extensions
3. Chromium APIs
@pati_gallardo
“All non-trivial abstractions, to
some degree, are leaky.”
Law of Leaky Abstractions
Joel Spolsky, 2002
@pati_gallardo
- Ok, but… Can I Use?
- Hm, don’t know…
Maybe? ¯_(ツ)_/¯
@pati_gallardo
@pati_gallardo
Make Everyone Feel Safe To Be Themselves
@pati_gallardo
Vivaldi Swag
Patricia Aas, Vivaldi Technologies
@pati_gallardo
Photos from pixabay.com
Appendix
@pati_gallardo
Copy Video Frame To GPU Memory Buffer
- CopyVideoFrameToGpuMemoryBuffers
- OutputFormat::NV12_SINGLE_GMB
- CopyRowsToNV12Buffer
- libyuv::I420ToNV12
- GpuMemoryBufferImplSharedMemory
@pati_gallardo
VideoFrame
FrameResources
gfx::Size
PlaneResource
Mailbox
Unique Name
SyncToken
MailboxHolder
PlaneResource
PlaneResource
2. CreateImageCHROMIUM
GpuMemoryBuffer
GpuMemoryBufferVideoFramePool
Resource lifetime
ownership
MailboxHolder
MailboxHolder
3. BindTexImage2DCHROMIUM
image_id
1. BindTexture
texture_target
texture_id
1 to 3
1 to 3
CHROMIUM_image
CreateImageCHROMIUM
ReleaseTexImage2DCHROMIUM
BindTexImage2DCHROMIUM
DestroyImageCHROMIUM
@pati_gallardo
VideoFrameProvider
Client
VideoFrameController
Client
InputHandler
Client
LayerTreeHostImpl VideoFrameCompositor
VideoRendererSink
OnBeginFrame
DidDrawFrame
UpdateCurrentFrame
GetCurrentFrame
PutCurrentFrame
VideoRendererImpl
Render
OnFrameDropped
VideoFrameProviderClientImplVideoFrameProviderClientImplVideoFrameProviderClientImpl
Video Frame Painting
VideoFrame
current_frame_
VideoLayerImpl
active_video_layer_
DecodersVideoResourceUpdater
Useful files to read
gpu_memory_buffer_video_frame_pool.cc
video_resource_updater.cc
gl_renderer.cc (GLRenderer::DrawYUVVideoQuad)
program_binding.cc (ProgramKey::YUVVideo)
@pati_gallardo
SyncToken
@pati_gallardo
SyncToken
CommandBufferNamespace
release_count_
CommandBufferId
Share Group
- Command Buffers in the same share group
must be in the same Command Stream
- gl::GLFence
- eglFenceSyncKHR (EGL_KHR_fence_sync)
- eglWaitSyncKHR (EGL_KHR_wait_sync)
@pati_gallardo
@pati_gallardo#oslove

Isolating GPU Access in its Own Process (Foss-North 2018)