Starting Sciter v.4.*.*.* series

Major changes:

SDK will include versions of Sciter with Skia graphics backend.

On Windows sciter is compiled as different DLLs having the same name sciter.dll locating in following folders:

  • bin/32/sciter.dll \
  • bin/64/sciter.dll – Direct2D and GDI+ backends as before
  • bin/skia32/sciter.dll \
  • bin/skia64/sciter.dll – Direct2D and Skia/OpenGL backends.

On MacOS sciter will include as CoreGraphics as Skia/OpenGL backends switchable by SciterSetOption() function.

On Linux I will have separate that will not use GTK at all . Instead it will expose SciterProcX function similar to SciterProcND. Basic purpose: to use Sciter with SDL, GLFW and the like environments.

Sciter assistant for Visual Studio Code

Early BETA of Sciter Assistant for Microsoft Visual Code by ConrLab.


Microsoft Visual Code, Sciter assistant in actions 

Supports syntax and editing of Sciter HTML and CSS flavours and TIScript.

Code completion in CSS including @mixin/@const constructs and script for this and variables starting from el....

If to update user settings (File->Preferences->User Settings) like this:

then by using Ctrl-K, Ctrl-S sequence you can run it in sciter.exe.

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 with Skia/OpenGL on MacOS

Skia backend is getting its shape on MacOS.

At the moment I can say that it is on-par with Windows/Direct2D backend. Even CSS filter property is working:

filter: drop-shadow() demo

filter: drop-shadow() demo

As of performance…

Here is a demo of full screen video rendering from camera in Sciter on Retina. With CoreGraphics backend it takes 50-60% of CPU. With Skia/OpenGL – 7-8%. Almost 10 times better (faster, less battery consuming, etc).

Sciter full screen Retina video.

Sciter full screen Retina video.

Sciter and DirectX

Sciter 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}/ demo project – it demonstrates all this.