All Projects → daktronics → cef-mixer

daktronics / cef-mixer

Licence: MIT license
High Performance off-screen rendering (OSR) demo using CEF

Programming Languages

36643 projects - #6 most used programming language
9771 projects
75241 projects

Projects that are alternatives of or similar to cef-mixer

Xray 16
Improved version of the X-Ray Engine, the game engine used in the world-famous S.T.A.L.K.E.R. game series by GSC Game World. Join OpenXRay! ;)
Stars: ✭ 1,806 (+886.89%)
Mutual labels:  directx, d3d11, directx11
A modern cross-platform low-level graphics library and rendering framework
Stars: ✭ 2,142 (+1070.49%)
Mutual labels:  directx, d3d11, directx11
Hello DoGUI: (not yet completed) Bloat-free Graphical User interface for C++ with minimal dependencies and a sleek default design
Stars: ✭ 19 (-89.62%)
Mutual labels:  directx, d3d
Luna Engine is DirectX 11 based engine that i am trying to make.
Stars: ✭ 35 (-80.87%)
Mutual labels:  directx, directx11
Low Level Graphics Library (LLGL) is a thin abstraction layer for the modern graphics APIs OpenGL, Direct3D, Vulkan, and Metal
Stars: ✭ 1,011 (+452.46%)
Mutual labels:  directx, d3d11
BrowserAutomationStudio can automate everything that Chrome can.
Stars: ✭ 203 (+10.93%)
Mutual labels:  chromium, cef
Build HTML Desktop Apps on .NET/.NET Core/.NET 5 using native GUI, HTML5, JavaScript, CSS
Stars: ✭ 2,728 (+1390.71%)
Mutual labels:  chromium, cef
🎮 GameOverlay using CEF with support for common rendering backends
Stars: ✭ 32 (-82.51%)
Mutual labels:  directx, cef
Chromium widget for SWT
Stars: ✭ 105 (-42.62%)
Mutual labels:  chromium, cef
Glide/DirectX implementation on D3D11/12
Stars: ✭ 137 (-25.14%)
Mutual labels:  directx, d3d11
Python bindings for the Chromium Embedded Framework (CEF)
Stars: ✭ 2,498 (+1265.03%)
Mutual labels:  chromium, cef
Stars: ✭ 220 (+20.22%)
Mutual labels:  directx, d3d11
Nim pc demo
云信Windows(PC) C/C++ Demo源码仓库
Stars: ✭ 147 (-19.67%)
Mutual labels:  chromium, cef
🥪 Examples of how to use CrossWindow for things like rendering graphics, listening to events, etc.
Stars: ✭ 48 (-73.77%)
Mutual labels:  directx, directx11
Pandomium is the JCEF (Java Chromium Embedded Framework) implementation dedicated for the Maven based projects
Stars: ✭ 146 (-20.22%)
Mutual labels:  chromium, cef
RenderDoc is a stand-alone graphics debugging tool.
Stars: ✭ 5,969 (+3161.75%)
Mutual labels:  directx, d3d11
CEF4Delphi is an open source project to embed Chromium-based browsers in applications made with Delphi or Lazarus/FPC for Windows, Linux and MacOS.
Stars: ✭ 785 (+328.96%)
Mutual labels:  chromium, cef
JCEF-powered cross-platform web browser
Stars: ✭ 68 (-62.84%)
Mutual labels:  chromium, cef
Cross-platform, graphics API agnostic, "Bring Your Own Engine/Framework" style rendering library.
Stars: ✭ 10,252 (+5502.19%)
Mutual labels:  directx, d3d11
Sample projects demonstrating the usage of Diligent Engine
Stars: ✭ 138 (-24.59%)
Mutual labels:  directx, d3d11

CEF Offscreen-Rendering (OSR) Mixer Demo

A sample application to demonstrate how to use the proposed OnAcceleratedPaint() callback when using CEF for HTML off-screen rendering. This application uses D3D11 shared textures for CEF which improves the OSR rendering performance.

Build Instructions

  1. If you don't have it already - install CMake and Visual Studio 2017

    • VS 2017 Community Edition is fine - just make sure to install C/C++ development tools
  2. Download latest CEF to create a custom build or use an example binary distribution

Note: The above sample distributions are not supported official builds - they are intended for testing/demo purposes.

  1. From a command prompt set the environment variable CEF_ROOT to the location of your CEF binary distribution. Then run the gen_vs2017.bat script.
> set CEF_ROOT=<path\to\cef\binary-distribution>
> gen_vs2017.bat

Note: if you're building for x86 you will need to modify gen_vs2017.bat to specify the correct generator for CMake

  1. Open the build/cefmixer.sln solution in Visual Studio

If using one of the sample binary distributions from step 2 - make sure to change the build configuration to Release since the distributions above do not contain Debug versions

  1. Build the ALL_BUILD project

  2. Run the cefmixer.exe application


Once the cefmixer.exe is built, it can be run without any arguments - in which case it will automatically navigate to

In addition to rendering an HTML view off-screen, the demo application will also create an overlay layer using a PNG image file (the red DEMO graphic in the screenshots below).

The following screenshot was taken when running on a gaming monitor at 144Hz:

VSync On

The url for the HTML layer can be specified as a command line argument: (width x height for the window size are also supported on the command-line)

cefmixer.exe --width=960 --height=540

Pressing Ctrl+V will allow the HTML view to run unthrottled with no v-sync:

VSync Off

Obviously, there are not many use cases to render frames completely unthrottled - but the point is to let the integrating application control all timing aspects. This demo application uses the new SendExternalBeginFrame method to issue BeginFrame requests to Chromium to synchronize HTML updates with its render loop.

Multiple Views

The application can tile a url into layers arranged in a grid to test multiple HTML browser instances. Each layer is an independent CEF Browser instance. The following example uses the --grid command-line switch to specify a 2 x 2 grid:

cefmixer.exe --grid=2x2


Custom Layering

The command-line examples above work to get something running quickly. However, it is also possible to define the layers using a simple JSON file.

For example, if the following is saved to a file called composition.json :

  "layers": [

Note: layer positions are in normalized 0..1 units where 0,0 is the top-left corner and 1,1 is the bottom-right corner.

We can run cefmixer using the above JSON layer description:

cefmixer.exe c:\examples\composition.json


The application uses the handy utility method CefParseJSON in CEF to parse JSON strings.


The update to CEF proposes the following changes to the API for application integration.

  1. Enable the use of shared textures when using window-less rendering (OSR).
CefWindowInfo info;
info.shared_texture_enabled = true;
  1. Override the new OnAcceleratedPaint method in a CefRenderHandler derived class:
void OnAcceleratedPaint(
		CefRefPtr<CefBrowser> browser,
		PaintElementType type,
		const RectList& dirtyRects,
		void* share_handle) override

OnAcceleratedPaint will be invoked rather than the existing OnPaint when shared_texture_enabled is set to true and Chromium is able to create a shared D3D11 texture for the HTML view.

  1. Optionally enable the ability to issue BeginFrame requests
CefWindowInfo info;
info.shared_texture_enabled = true;
info.external_begin_frame_enabled = true;

At an interval suitable for your application, make the following call (see web_layer.cpp for a full example) :


When using SendExternalBeginFrame, the default timing in CEF is disabled and the windowless_frame_rate setting is ignored.

Room for Improvement

A future update could include the following

  • Allow the client application to perform SendBeginFrame by adding a new method to CEF's public interface.
    • Chromium already supports an External BeginFrame source - CEF currently does not expose it directly.
    • Update this is now supported in the latest revision
  • Update OffscreenBrowserCompositorOutputSurface class to handle both the Reflector and a shared texture
    • This was attempted originally but ran into issues creating a complete FBO on the Reflector texture
    • Not a big deal for CEF applications, since CEF does not use the Reflector concept in Chromium anyway.
  • Take the Chromium changes directly to the Chromium team
    • We can get the job done with the patching system built into CEF to apply Chromium changes, but rather the shared texture FBO probably makes more sense as a pull request on Chromium itself. Seems only reasonable applications that use Headless-mode in Chromium could also benefit from shared textures.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].