Add Emscripten port

CMakeLists.txt

@@ -4,8 +4,12 @@ project( ES3_Book )
 include_directories( External/Include )
 include_directories( Common/Include )
 
-find_library( OPENGLES3_LIBRARY GLESv2 "OpenGL ES v3.0 library")
-find_library( EGL_LIBRARY EGL "EGL 1.4 library" )
+if( EMSCRIPTEN )
+    set( CMAKE_EXECUTABLE_SUFFIX_C ".html" )
+else()
+    find_library( OPENGLES3_LIBRARY GLESv2 "OpenGL ES v3.0 library" )
+    find_library( EGL_LIBRARY EGL "EGL 1.4 library" )
+endif()
 
 SUBDIRS( Common
          Chapter_2/Hello_Triangle
@@ -27,4 +31,4 @@ SUBDIRS( Common
          Chapter_14/ParticleSystemTransformFeedback 
          Chapter_14/Shadows 
          Chapter_14/TerrainRendering )	
-
+

Chapter_10/MultiTexture/CMakeLists.txt

@@ -1,6 +1,12 @@
 add_executable( MultiTexture MultiTexture.c )
 target_link_libraries( MultiTexture Common )
 
-configure_file(basemap.tga ${CMAKE_CURRENT_BINARY_DIR}/basemap.tga COPYONLY)
-configure_file(lightmap.tga ${CMAKE_CURRENT_BINARY_DIR}/lightmap.tga COPYONLY)
+if( EMSCRIPTEN )
+    target_link_options( MultiTexture PRIVATE
+        --preload-file=${CMAKE_CURRENT_LIST_DIR}/[email protected]
+        --preload-file=${CMAKE_CURRENT_LIST_DIR}/[email protected] )
+else()
+    configure_file(basemap.tga ${CMAKE_CURRENT_BINARY_DIR}/basemap.tga COPYONLY)
+    configure_file(lightmap.tga ${CMAKE_CURRENT_BINARY_DIR}/lightmap.tga COPYONLY)
+endif()
 

Chapter_14/ParticleSystem/CMakeLists.txt

@@ -1,5 +1,10 @@
 add_executable( ParticleSystem ParticleSystem.c )
 target_link_libraries( ParticleSystem Common )
 
-configure_file(smoke.tga ${CMAKE_CURRENT_BINARY_DIR}/smoke.tga COPYONLY)
+if( EMSCRIPTEN )
+    target_link_options( ParticleSystem
+        PRIVATE --preload-file=${CMAKE_CURRENT_LIST_DIR}/[email protected] )
+else()
+    configure_file(smoke.tga ${CMAKE_CURRENT_BINARY_DIR}/smoke.tga COPYONLY)
+endif()
 

Chapter_14/ParticleSystemTransformFeedback/CMakeLists.txt

@@ -1,5 +1,10 @@
 add_executable( ParticleSystemTransformFeedback ParticleSystemTransformFeedback.c Noise3D.c Noise3D.h )
 target_link_libraries( ParticleSystemTransformFeedback Common )
 
-configure_file(smoke.tga ${CMAKE_CURRENT_BINARY_DIR}/smoke.tga COPYONLY)
+if( EMSCRIPTEN )
+    target_link_options( ParticleSystemTransformFeedback
+        PRIVATE --preload-file=${CMAKE_CURRENT_LIST_DIR}/[email protected] )
+else()
+    configure_file(smoke.tga ${CMAKE_CURRENT_BINARY_DIR}/smoke.tga COPYONLY)
+endif()
 

Chapter_14/TerrainRendering/CMakeLists.txt

@@ -1,4 +1,9 @@
 add_executable( TerrainRendering TerrainRendering.c )
 target_link_libraries( TerrainRendering Common )
 
-configure_file(heightmap.tga ${CMAKE_CURRENT_BINARY_DIR}/heightmap.tga COPYONLY)
+if( EMSCRIPTEN )
+    target_link_options( TerrainRendering
+        PRIVATE --preload-file=${CMAKE_CURRENT_LIST_DIR}/[email protected] )
+else()
+    configure_file(heightmap.tga ${CMAKE_CURRENT_BINARY_DIR}/heightmap.tga COPYONLY)
+endif()

Common/CMakeLists.txt

@@ -4,8 +4,15 @@ set ( common_src Source/esShader.c
                  Source/esUtil.c )
 
 
-# Win32 Platform files
-if(WIN32)
+if( EMSCRIPTEN ) # Emscripten Platform files
+    set( common_platform_src Source/Emscripten/esUtil_Emscripten.c )
+    add_library( Common STATIC ${common_src} ${common_platform_src} )
+    set( common_platform_options -sMAX_WEBGL_VERSION=2 -sFULL_ES3=1 )
+    target_compile_options( Common PUBLIC ${common_platform_options} )
+    target_link_options( Common PUBLIC ${common_platform_options} 
+        -sEXPORTED_RUNTIME_METHODS='[\"ccall\"]'
+        --shell-file=${CMAKE_CURRENT_LIST_DIR}/Source/Emscripten/esUtil_Emscripten.html )
+elseif(WIN32) # Win32 Platform files
     set( common_platform_src Source/Win32/esUtil_win32.c )
     add_library( Common STATIC ${common_src} ${common_platform_src} )
     target_link_libraries( Common ${OPENGLES3_LIBRARY} ${EGL_LIBRARY} )

Common/Source/Emscripten/esUtil_Emscripten.c

@@ -0,0 +1,164 @@
+// The MIT License (MIT)
+//
+// Copyright (c) 2021 Konstantin Podsvirov
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+//
+// Book:      OpenGL(R) ES 3.0 Programming Guide, 2nd Edition
+// Authors:   Dan Ginsburg, Budirijanto Purnomo, Dave Shreiner, Aaftab Munshi
+// ISBN-10:   0-321-93388-5
+// ISBN-13:   978-0-321-93388-1
+// Publisher: Addison-Wesley Professional
+// URLs:      http://www.opengles-book.com
+//            http://my.safaribooksonline.com/book/animation-and-3d/9780133440133
+//
+// esUtil_Emscripten.c
+//
+//    This file contains the Emscripten implementation of the windowing functions.
+
+
+///
+// Includes
+//
+#include <emscripten.h>
+#include <emscripten/html5.h>
+#include <time.h>
+#include <stdio.h>
+#include <string.h>
+#include "esUtil.h"
+
+
+//////////////////////////////////////////////////////////////////
+//
+//  Private Functions
+//
+//
+
+///
+// GetCurrentTime()
+//
+static float GetCurrentTime()
+{
+   struct timespec clockRealTime;
+   clock_gettime ( CLOCK_MONOTONIC, &clockRealTime );
+   double curTimeInSeconds = clockRealTime.tv_sec + ( double ) clockRealTime.tv_nsec / 1e9;
+   return ( float ) curTimeInSeconds;
+}
+
+EM_JS(int, js_get_window_width, (), {
+    return window.innerWidth;
+});
+
+EM_JS(int, js_get_window_height, (), {
+    return window.innerHeight;
+});
+
+
+///
+//  Global extern.  The application must declare this function
+//  that runs the application.
+//
+extern int esMain ( ESContext *esContext );
+
+///
+//  Static Variables
+//
+
+static struct ESContext esContext;
+static float lastTime;
+
+
+//////////////////////////////////////////////////////////////////
+//
+//  Public Functions
+//
+//
+
+void EMSCRIPTEN_KEEPALIVE c_reshape_window() {
+   // Get actual window size
+   esContext.width = js_get_window_width();
+   esContext.height = js_get_window_height();
+   // Set canvas size
+   emscripten_set_canvas_element_size("canvas", esContext.width, esContext.height);
+};
+
+///
+//  main_loop()
+//
+void main_loop ( )
+{
+   // Call app update function
+   if ( esContext.updateFunc != NULL )
+   {
+      float curTime = GetCurrentTime();
+      float deltaTime =  ( curTime - lastTime );
+      lastTime = curTime;
+      esContext.updateFunc ( &esContext, deltaTime );
+   }
+
+   if ( esContext.drawFunc != NULL )
+   {
+      esContext.drawFunc ( &esContext );
+      eglSwapBuffers ( esContext.eglDisplay, esContext.eglSurface );
+   }
+}
+
+///
+//  main()
+//
+//
+
+int main()
+{
+   // Initialize the context
+   memset ( &esContext, 0, sizeof ( ESContext ) );
+
+   // Call the main entrypoint for the app
+   if ( esMain ( &esContext ) != GL_TRUE )
+   {
+      return EXIT_FAILURE;
+   }
+
+   lastTime = GetCurrentTime();
+
+   // This function call won't return, and will engage in an infinite loop, processing events from the browser, and dispatching them.
+   emscripten_set_main_loop_arg(main_loop, NULL, 0, 1);
+
+   return EXIT_SUCCESS;
+}
+
+///
+//  WinCreate()
+//
+//      Create window
+//
+GLboolean WinCreate ( ESContext *esContext, const char *title )
+{
+   // On Emscriptn, this does not need to do anything to create window (canvas).
+
+   // Set window title
+   emscripten_set_window_title(title);
+
+   // For Emscripten, get the width/height from the window rather than what the
+   // application requested.
+   c_reshape_window();
+
+   return GL_TRUE;
+}

Common/Source/Emscripten/esUtil_Emscripten.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>OpenGL ES 3.0 Programming Guide</title>
+    <style>
+      html, body {
+        width: 100%;
+        height: 100%;
+        margin: 0px;
+        border: 0;
+        overflow: hidden; /* Disable scrollbar */
+        display: block; /* No floating content on sides */
+      }
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body onresize="Module.ccall('c_reshape_window');">
+    <canvas id='canvas'></canvas>
+    <script type='text/javascript'>
+      var Module = {
+        canvas: (function() {
+          var canvas = document.getElementById('canvas');
+          return canvas;
+        })()
+      };
+    </script>
+    {{{ SCRIPT }}}
+  </body>
+</html>

README.md

@@ -3,6 +3,36 @@ OpenGL ES 3.0 Programming Guide
 
 This repository contains the sample code for the OpenGL ES 3.0 Programming Guide by Addison-Wesley Professional (http://www.opengles-book.com). 
 
+## Samples ##
+
+* Chapter 2
+  - [Hello_Triangle](https://podsvirov.github.io/opengles3-book/Chapter_2/Hello_Triangle/Hello_Triangle.html)
+* Chapter 6
+  - [Example_6_3](https://podsvirov.github.io/opengles3-book/Chapter_6/Example_6_3/Example_6_3.html)
+  - [MapBuffers](https://podsvirov.github.io/opengles3-book/Chapter_6/MapBuffers/MapBuffers.html)
+  - [VertexArrayObjects](https://podsvirov.github.io/opengles3-book/Chapter_6/VertexArrayObjects/VertexArrayObjects.html)
+  - [Example_6_6](https://podsvirov.github.io/opengles3-book/Chapter_6/Example_6_6/Example_6_6.html)
+  - [VertexBufferObjects](https://podsvirov.github.io/opengles3-book/Chapter_6/VertexBufferObjects/VertexBufferObjects.html)
+* Chapter 7
+  - [Instancing](https://podsvirov.github.io/opengles3-book/Chapter_7/Instancing/Instancing.html)
+* Chapter 8
+  - [Simple_VertexShader](https://podsvirov.github.io/opengles3-book/Chapter_8/Simple_VertexShader/Simple_VertexShader.html)
+* Chapter 9
+  - [TextureWrap](https://podsvirov.github.io/opengles3-book/Chapter_9/TextureWrap/TextureWrap.html)
+  - [Simple_TextureCubemap](https://podsvirov.github.io/opengles3-book/Chapter_9/Simple_TextureCubemap/Simple_TextureCubemap.html)
+  - [Simple_Texture2D](https://podsvirov.github.io/opengles3-book/Chapter_9/Simple_Texture2D/Simple_Texture2D.html)
+  - [MipMap2D](https://podsvirov.github.io/opengles3-book/Chapter_9/MipMap2D/MipMap2D.html)
+* Chapter 10
+  - [MultiTexture](https://podsvirov.github.io/opengles3-book/Chapter_10/MultiTexture/MultiTexture.html)
+* Chapter 11
+  - [MRTs](https://podsvirov.github.io/opengles3-book/Chapter_11/MRTs/MRTs.html)
+* Chapter 14
+  - [TerrainRendering](https://podsvirov.github.io/opengles3-book/Chapter_14/TerrainRendering/TerrainRendering.html)
+  - [Shadows](https://podsvirov.github.io/opengles3-book/Chapter_14/Shadows/Shadows.html)
+  - [ParticleSystem](https://podsvirov.github.io/opengles3-book/Chapter_14/ParticleSystem/ParticleSystem.html)
+  - [Noise3D](https://podsvirov.github.io/opengles3-book/Chapter_14/Noise3D/Noise3D.html)
+  - [ParticleSystemTransformFeedback](https://podsvirov.github.io/opengles3-book/Chapter_14/ParticleSystemTransformFeedback/ParticleSystemTransformFeedback.html)
+
 ## Platforms ##
 The sample code for the OpenGL ES 3.0 Programming Guide currently builds on the following platforms: