Add a Rust example that demonstrates GL rendering under a scene

Author: tronical

.github/workflows/nightly_snapshot.yaml

@@ -279,7 +279,7 @@ jobs:
             rm -rf snapshots/$target_branch/demos
             mkdir -p snapshots/$target_branch/demos
 
-            for demo_subdir in gallery, printerdemo,rust printerdemo_old,rust todo,rust slide_puzzle, memory, imagefilter, plotter,; do
+            for demo_subdir in gallery, printerdemo,rust printerdemo_old,rust todo,rust slide_puzzle, memory, imagefilter, plotter, opengl_underlay,; do
                 IFS=',' read demo subdir <<< "${demo_subdir}"
 
                 mkdir -p snapshots/$target_branch/demos/$demo

.github/workflows/wasm_demos.yaml

@@ -64,6 +64,11 @@ jobs:
         sed -i "s/#wasm# //" Cargo.toml
         wasm-pack build --release --target web
       working-directory: examples/plotter
+    - name: OpenGL underlay example WASM build
+      run: |
+        sed -i "s/#wasm# //" Cargo.toml
+        wasm-pack build --release --target web
+      working-directory: examples/opengl_underlay
     - name: "Upload Demo Artifacts"
       uses: actions/upload-artifact@v2
       with:

Cargo.toml

@@ -14,6 +14,7 @@ members = [
     'examples/gallery',
     'examples/imagefilter',
     'examples/memory',
+    'examples/opengl_underlay',
     'examples/plotter',
     'examples/printerdemo_old/rust',
     'examples/printerdemo/rust',

cmake/FindOpenGLES2.cmake

@@ -0,0 +1,52 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
+
+include(CheckCXXSourceCompiles)
+
+find_path(OPENGLES2_INCLUDE_DIR NAMES "GLES2/gl2.h" "OpenGLES/ES2/gl.h" DOC "The path where the OpenGL ES 2.0 headers are located")
+find_library(OPENGLES2_LIBRARY NAMES GLESv2 OpenGLES)
+
+# Sometimes EGL linkage is required, so look it up and always use if available.
+find_package(OpenGL COMPONENTS EGL)
+
+# See if we can compile some example code with what we've found.
+set(saved_libraries "${CMAKE_REQUIRED_LIBRARIES}")
+set(saved_includes "${CMAKE_REQUIRED_INCLUDES}")
+
+if (OPENGLES2_LIBRARY)
+    list(APPEND CMAKE_REQUIRED_INCLUDES "${OPENGLES2_INCLUDE_DIR}")
+    list(APPEND CMAKE_REQUIRED_LIBRARIES "${OPENGLES2_LIBRARY}")
+endif()
+
+if(OPENGL_egl_LIBRARY)
+    list(APPEND CMAKE_REQUIRED_INCLUDES "${OPENGL_EGL_INCLUDE_DIRS}")
+    list(APPEND CMAKE_REQUIRED_LIBRARIES "${OPENGL_egl_LIBRARY}")
+endif()
+
+check_cxx_source_compiles("
+#include <GLES2/gl2.h>
+#include <GLES2/gl2platform.h>
+
+int main(int argc, char *argv[]) {
+    glClear(GL_STENCIL_BUFFER_BIT);
+    glUseProgram(0);
+}" HAVE_OPENGLES2)
+
+set(CMAKE_REQUIRED_INCLUDES "${saved_includes}")
+set(CMAKE_REQUIRED_LIBRARIES "${saved_libraries}")
+
+# Standard CMake package dance
+set(package_args OPENGLES2_INCLUDE_DIR OPENGLES2_LIBRARY HAVE_OPENGLES2)
+include(FindPackageHandleStandardArgs)
+find_package_handle_standard_args(OpenGLES2 DEFAULT_MSG ${package_args})
+mark_as_advanced(${package_args})
+
+# Create a convenience target for linkage
+if (OPENGLES2_FOUND AND NOT TARGET OpenGLES2::OpenGLES2)
+    add_library(OpenGLES2::OpenGLES2 UNKNOWN IMPORTED)
+    set_property(TARGET OpenGLES2::OpenGLES2 PROPERTY INTERFACE_INCLUDE_DIRECTORIES "${OPENGLES2_INCLUDE_DIR}")
+    set_property(TARGET OpenGLES2::OpenGLES2 PROPERTY IMPORTED_LOCATION "${OPENGLES2_LIBRARY}")
+    if (TARGET OpenGL::EGL)
+        target_link_libraries(OpenGLES2::OpenGLES2 INTERFACE OpenGL::EGL)
+    endif()
+endif()

examples/CMakeLists.txt

@@ -3,6 +3,10 @@
 cmake_minimum_required(VERSION 3.19)
 project(SixtyFPSExamples LANGUAGES CXX)
 
+list(PREPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/../cmake")
+
+find_package(OpenGLES2 QUIET)
+
 if (NOT TARGET SixtyFPS::SixtyFPS)
     find_package(SixtyFPS REQUIRED)
     include(FetchContent)
@@ -22,3 +26,6 @@ endif()
 if (SIXTYFPS_FEATURE_INTERPRETER)
     add_subdirectory(iot-dashboard/)
 endif()
+if (OpenGLES2_FOUND AND SIXTYFPS_FEATURE_BACKEND_GL)
+    add_subdirectory(opengl_underlay)
+endif()

examples/README.md

@@ -91,6 +91,16 @@ graph and integrate the result into SixtyFPS.
 
 Some examples of how to use the `sixtyfps-viewer` to add a GUI to shell scripts.
 
+### [`opengl_underlay`](./opengl_underlay)
+
+A Rust and C++ example that shows how render SixtyFPS on top of graphical effect rendered using custom OpenGL code. For more details check out the [Readme](./opengl_underlay).
+
+| `.60` Design | Rust Source | C++ Source | Online wasm Preview |
+| --- | --- | --- | --- |
+| [`scene.60`](./opengl_underlay/scene.60) | [`main.rs`](./opengl_underlay/main.rs) | [`main.cpp`](./opengl_underlay/main.cpp) | [Online simulation](https://sixtyfps.io/snapshots/master/demos/opengl_underlay/) |
+
+![Screenshot of the OpenGL Underlay Example on Windows](https://sixtyfps.io/resources/opengl_underlay_screenshot.png "OpenGL Underlay")
+
 ### External examples
 
 * [Cargo UI](https://github.com/sixtyfpsui/cargo-ui): A rust application that makes use of threads in the background.

examples/opengl_underlay/CMakeLists.txt

@@ -0,0 +1,13 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
+
+cmake_minimum_required(VERSION 3.14)
+project(opengl_cpp_underlay LANGUAGES CXX)
+
+if (NOT TARGET SixtyFPS::SixtyFPS)
+    find_package(SixtyFPS REQUIRED)
+endif()
+
+add_executable(opengl_underlay main.cpp)
+target_link_libraries(opengl_underlay PRIVATE SixtyFPS::SixtyFPS OpenGLES2::OpenGLES2)
+sixtyfps_target_60_sources(opengl_underlay scene.60)

examples/opengl_underlay/Cargo.toml

@@ -0,0 +1,38 @@
+# Copyright © SixtyFPS GmbH <[email protected]>
+# SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
+
+[package]
+name = "opengl_underlay"
+version = "0.1.6"
+authors = ["SixtyFPS <[email protected]>"]
+edition = "2021"
+build = "build.rs"
+license = "(GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)"
+publish = false
+
+[[bin]]
+path = "main.rs"
+name = "opengl_underlay"
+
+[dependencies]
+sixtyfps = { path = "../../api/sixtyfps-rs" }
+glow = { version = "0.11" }
+instant = { version = "0.1", features = [ "now" ] }
+
+[build-dependencies]
+sixtyfps-build = { path = "../../api/rs/build" }
+
+# Remove the `#wasm#` to uncomment the wasm build.
+# This is commented out by default because we don't want to build it as a library by default
+# The CI has a script that does sed "s/#wasm# //" to generate the wasm build.
+
+#wasm# [lib]
+#wasm# crate-type = ["cdylib"]
+#wasm# path = "main.rs"
+#wasm#
+#wasm# [target.'cfg(target_arch = "wasm32")'.dependencies]
+#wasm# wasm-bindgen = { version = "0.2" }
+#wasm# web-sys = { version = "0.3", features=["console"] }
+#wasm# console_error_panic_hook = "0.1.5"
+#wasm# instant = { version = "0.1", features = [ "wasm-bindgen" ] }
+

examples/opengl_underlay/README.md

@@ -0,0 +1,10 @@
+# OpenGL Underlay Example
+
+This example application demonstrates how layer two scenes together in a window:
+
+1. First a graphical effect is rendered using low-level OpenGL code (underlay).
+2. A scene of SixtyFPS elements is rendered above.
+
+This is implemented using the `set_rendering_notifier` function on the `sixtyfps::Window` type. It takes a callback as a parameter and that is invoked during different phases of the rendering. In this example the invocation during the setup phase is used to prepare the pipeline for OpenGL rendering later. Then the `BeforeRendering` phase is used to render the graphical effect with OpenGL. Afterwards, SixtyFPS will render the scene of elements into the same back-buffer as the previous OpenGL code rendered into.
+
+Since the graphical effect is continuous, the code in the callback requests a redraw of the contents by calling `sixtyfps::Window::request_redraw()`.

examples/opengl_underlay/build.rs

@@ -0,0 +1,6 @@
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: (GPL-3.0-only OR LicenseRef-SixtyFPS-commercial)
+
+fn main() {
+    sixtyfps_build::compile("scene.60").unwrap();
+}