Sciter and OpenGL

Sciter with Skia/OpenGL backend adds an ability to render HTML/CSS directly onto OpenGL window mixing HTML content with 3D content.

Here is a screen cast of one of one of stock GLFW demos with Sciter additions.

OpenGL integration uses the same approach as used in Sciter/DirectX – document in the window may contain two HTML layers with 3D scene in between:

sciter DOM layers on OpenGL window

Sciter and DirectX

Sciter 3.3.1.4 adds an ability to render HTML/CSS directly onto DirectX window:

Basic ideas:

  • Sciter engine is attached to the window where DirectX renders its 3D scene. WndProc uses SciterProcND delegation in Mixin integration mode.  Therefore Sciter sees all UI messages coming to the window and reacts on them. Instance is created by SciterCreateOnDirectXWindow API function.
  • Application calls SciterRenderOnDirectXWindow API function to render content when it is appropriate. With the function following rendering modes are supported:
    • Document is rendered on background of 3D scene;
    • Document is rendered in front of 3D scene (on top of it). In this case document should have transparent background and transparent element through which 3D scene can be seen;
    • Document may contain so called layers – dedicated DOM elements (<section>s, <div>s) representing background and foreground UI layers with 3D scene rendered in between. The screen cast above represents such type of rendering. Below is an illustration of such layers:

sciter DOM layers on DirectX window

Sciter’s DirectX API also contains SciterRenderOnDirectXTexture API function. It is used to render HTML/CSS content on DirectX 2D textures.

If your setup requires DOM layers then it makes sense to consider adding native behavior to DOM element on front layer that will establish view on 3D scene. Such a behavior will catch mouse and keyboard events and reroute them to view/model manipulations.

Scripts can also be used to manipulate 3D view/model variables. Check  {sciter-sdk}/demos.win/sciter-directx/ demo project – it demonstrates all this.