[HTML] Added ShadowMapping to HTML examples.

Also make sure combined texture samplers are selected for WebGL and not just for GL/GLES (RendererID).

docu/WebPage/Example_ShadowMapping/Example_ShadowMapping.data.js

@@ -0,0 +1,179 @@
+
+  var Module = typeof Module !== 'undefined' ? Module : {};
+
+  if (!Module.expectedDataFileDownloads) {
+    Module.expectedDataFileDownloads = 0;
+  }
+
+  Module.expectedDataFileDownloads++;
+  (function() {
+    // Do not attempt to redownload the virtual filesystem data when in a pthread or a Wasm Worker context.
+    if (Module['ENVIRONMENT_IS_PTHREAD'] || Module['$ww']) return;
+    var loadPackage = function(metadata) {
+
+      var PACKAGE_PATH = '';
+      if (typeof window === 'object') {
+        PACKAGE_PATH = window['encodeURIComponent'](window.location.pathname.toString().substring(0, window.location.pathname.toString().lastIndexOf('/')) + '/');
+      } else if (typeof process === 'undefined' && typeof location !== 'undefined') {
+        // web worker
+        PACKAGE_PATH = encodeURIComponent(location.pathname.toString().substring(0, location.pathname.toString().lastIndexOf('/')) + '/');
+      }
+      var PACKAGE_NAME = 'Example_ShadowMapping.data';
+      var REMOTE_PACKAGE_BASE = 'Example_ShadowMapping.data';
+      if (typeof Module['locateFilePackage'] === 'function' && !Module['locateFile']) {
+        Module['locateFile'] = Module['locateFilePackage'];
+        err('warning: you defined Module.locateFilePackage, that has been renamed to Module.locateFile (using your locateFilePackage for now)');
+      }
+      var REMOTE_PACKAGE_NAME = Module['locateFile'] ? Module['locateFile'](REMOTE_PACKAGE_BASE, '') : REMOTE_PACKAGE_BASE;
+var REMOTE_PACKAGE_SIZE = metadata['remote_package_size'];
+
+      function fetchRemotePackage(packageName, packageSize, callback, errback) {
+        if (typeof process === 'object' && typeof process.versions === 'object' && typeof process.versions.node === 'string') {
+          require('fs').readFile(packageName, function(err, contents) {
+            if (err) {
+              errback(err);
+            } else {
+              callback(contents.buffer);
+            }
+          });
+          return;
+        }
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', packageName, true);
+        xhr.responseType = 'arraybuffer';
+        xhr.onprogress = function(event) {
+          var url = packageName;
+          var size = packageSize;
+          if (event.total) size = event.total;
+          if (event.loaded) {
+            if (!xhr.addedTotal) {
+              xhr.addedTotal = true;
+              if (!Module.dataFileDownloads) Module.dataFileDownloads = {};
+              Module.dataFileDownloads[url] = {
+                loaded: event.loaded,
+                total: size
+              };
+            } else {
+              Module.dataFileDownloads[url].loaded = event.loaded;
+            }
+            var total = 0;
+            var loaded = 0;
+            var num = 0;
+            for (var download in Module.dataFileDownloads) {
+            var data = Module.dataFileDownloads[download];
+              total += data.total;
+              loaded += data.loaded;
+              num++;
+            }
+            total = Math.ceil(total * Module.expectedDataFileDownloads/num);
+            if (Module['setStatus']) Module['setStatus'](`Downloading data... (${loaded}/${total})`);
+          } else if (!Module.dataFileDownloads) {
+            if (Module['setStatus']) Module['setStatus']('Downloading data...');
+          }
+        };
+        xhr.onerror = function(event) {
+          throw new Error("NetworkError for: " + packageName);
+        }
+        xhr.onload = function(event) {
+          if (xhr.status == 200 || xhr.status == 304 || xhr.status == 206 || (xhr.status == 0 && xhr.response)) { // file URLs can return 0
+            var packageData = xhr.response;
+            callback(packageData);
+          } else {
+            throw new Error(xhr.statusText + " : " + xhr.responseURL);
+          }
+        };
+        xhr.send(null);
+      };
+
+      function handleError(error) {
+        console.error('package error:', error);
+      };
+
+      var fetchedCallback = null;
+      var fetched = Module['getPreloadedPackage'] ? Module['getPreloadedPackage'](REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE) : null;
+
+      if (!fetched) fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, function(data) {
+        if (fetchedCallback) {
+          fetchedCallback(data);
+          fetchedCallback = null;
+        } else {
+          fetched = data;
+        }
+      }, handleError);
+
+    function runWithFS() {
+
+      function assert(check, msg) {
+        if (!check) throw msg + new Error().stack;
+      }
+Module['FS_createPath']("/", "assets", true, true);
+
+      /** @constructor */
+      function DataRequest(start, end, audio) {
+        this.start = start;
+        this.end = end;
+        this.audio = audio;
+      }
+      DataRequest.prototype = {
+        requests: {},
+        open: function(mode, name) {
+          this.name = name;
+          this.requests[name] = this;
+          Module['addRunDependency'](`fp ${this.name}`);
+        },
+        send: function() {},
+        onload: function() {
+          var byteArray = this.byteArray.subarray(this.start, this.end);
+          this.finish(byteArray);
+        },
+        finish: function(byteArray) {
+          var that = this;
+          // canOwn this data in the filesystem, it is a slide into the heap that will never change
+          Module['FS_createDataFile'](this.name, null, byteArray, true, true, true);
+          Module['removeRunDependency'](`fp ${that.name}`);
+          this.requests[this.name] = null;
+        }
+      };
+
+      var files = metadata['files'];
+      for (var i = 0; i < files.length; ++i) {
+        new DataRequest(files[i]['start'], files[i]['end'], files[i]['audio'] || 0).open('GET', files[i]['filename']);
+      }
+
+      function processPackageData(arrayBuffer) {
+        assert(arrayBuffer, 'Loading data file failed.');
+        assert(arrayBuffer.constructor.name === ArrayBuffer.name, 'bad input to processPackageData');
+        var byteArray = new Uint8Array(arrayBuffer);
+        var curr;
+        // Reuse the bytearray from the XHR as the source for file reads.
+          DataRequest.prototype.byteArray = byteArray;
+          var files = metadata['files'];
+          for (var i = 0; i < files.length; ++i) {
+            DataRequest.prototype.requests[files[i].filename].onload();
+          }          Module['removeRunDependency']('datafile_Example_ShadowMapping.data');
+
+      };
+      Module['addRunDependency']('datafile_Example_ShadowMapping.data');
+
+      if (!Module.preloadResults) Module.preloadResults = {};
+
+      Module.preloadResults[PACKAGE_NAME] = {fromCache: false};
+      if (fetched) {
+        processPackageData(fetched);
+        fetched = null;
+      } else {
+        fetchedCallback = processPackageData;
+      }
+
+    }
+    if (Module['calledRun']) {
+      runWithFS();
+    } else {
+      if (!Module['preRun']) Module['preRun'] = [];
+      Module["preRun"].push(runWithFS); // FS is not initialized yet, wait for it
+    }
+
+    }
+    loadPackage({"files": [{"filename": "/assets/Scene.450core.frag", "start": 0, "end": 1020}, {"filename": "/assets/Scene.450core.vert", "start": 1020, "end": 1526}, {"filename": "/assets/Scene.frag", "start": 1526, "end": 3098}, {"filename": "/assets/Scene.vert", "start": 3098, "end": 3545}, {"filename": "/assets/ShadowMap.450core.vert", "start": 3545, "end": 3867}, {"filename": "/assets/ShadowMap.vert", "start": 3867, "end": 4193}, {"filename": "/assets/SimpleRoom.obj", "start": 4193, "end": 6216}, {"filename": "/assets/WiredBox.obj", "start": 6216, "end": 24138}], "remote_package_size": 24138});
+
+  })();

docu/WebPage/Example_ShadowMapping/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+    <meta charset="utf-8">
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+    <title>LLGL - ShadowMapping</title>
+    <style>
+        canvas { 
+            display: block;
+            padding-left: 0;
+            padding-right: 0;
+            margin-left: auto;
+            margin-right: auto;
+            width: min(100%, 98vh * 4 / 3);
+            aspect-ratio: 4 / 3;
+        }
+    </style>
+</head>
+<body>
+    <!-- Create canvas that C++ code will draw into -->
+    <div style="text-align: center;">
+        <canvas id="canvas" oncontextmenu="event.preventDefault()" width="800" height="600"></canvas>
+    </div>
+
+    <!-- Define module to allow C++ code to access the canvas element -->
+    <script type="text/javascript">
+        var Module = {
+            print: function() {
+                var e = document.getElementById("output");
+                return e && (e.value = ""), (...t) => {
+                    var n = t.join(" ");
+                    console.log(n), e && (e.value += n + "\n", e.scrollTop = e.scrollHeight)
+                }
+            }(),
+            canvas: (() => {
+                var e = document.getElementById("canvas");
+                return e.addEventListener("webglcontextlost", (e => {
+                    alert("WebGL context lost. You will need to reload the page."), e.preventDefault()
+                }), !1), e
+            })()
+        };
+    </script>
+
+    <!-- Add JavaScript glue code generated by Emscripten -->
+    <script src=Example_ShadowMapping.data.js></script>
+    <script src=Example_ShadowMapping.js></script>
+</body>
+</html>

docu/WebPage/index.html

@@ -25,6 +25,7 @@ <h2>Examples:</h2>
         <li><a href="Example_Animation/index.html">Animation</a></li>
         <li><a href="Example_Fonts/index.html">Fonts</a></li>
         <li><a href="Example_RenderTarget/index.html">RenderTarget</a></li>
+        <li><a href="Example_ShadowMapping/index.html">ShadowMapping</a></li>
         <li><a href="Example_StencilBuffer/index.html">StencilBuffer</a></li>
     </ul>
 </body>

examples/Cpp/ExampleBase/ExampleBase.cpp

@@ -994,8 +994,9 @@ bool ExampleBase::IsOpenGL() const
 {
     return
     (
-        renderer->GetRendererID() == LLGL::RendererID::OpenGL ||
-        renderer->GetRendererID() == LLGL::RendererID::OpenGLES
+        renderer->GetRendererID() == LLGL::RendererID::OpenGL   ||
+        renderer->GetRendererID() == LLGL::RendererID::OpenGLES ||
+        renderer->GetRendererID() == LLGL::RendererID::WebGL
     );
 }
 

examples/Cpp/PostProcessing/Example.cpp

@@ -337,6 +337,7 @@ class Example_PostProcessing : public ExampleBase
             pipelineDescScene.rasterizer.multiSampleEnabled = (GetSampleCount() > 1);
         }
         pipelineScene = renderer->CreatePipelineState(pipelineDescScene);
+        ReportPSOErrors(pipelineScene);
 
         // Create graphics pipeline for blur post-processor
         LLGL::GraphicsPipelineDescriptor pipelineDescPP;
@@ -347,6 +348,7 @@ class Example_PostProcessing : public ExampleBase
             pipelineDescPP.pipelineLayout   = layoutBlur;
         }
         pipelineBlur = renderer->CreatePipelineState(pipelineDescPP);
+        ReportPSOErrors(pipelineBlur);
 
         // Create graphics pipeline for final post-processor
         LLGL::GraphicsPipelineDescriptor pipelineDescFinal;
@@ -358,6 +360,7 @@ class Example_PostProcessing : public ExampleBase
             pipelineDescFinal.rasterizer.multiSampleEnabled = (GetSampleCount() > 1);
         }
         pipelineFinal = renderer->CreatePipelineState(pipelineDescFinal);
+        ReportPSOErrors(pipelineFinal);
     }
 
     void CreateResourceHeaps()

examples/Cpp/ShadowMapping/Example.cpp

@@ -164,7 +164,8 @@ class Example_ShadowMapping : public ExampleBase
         LLGL::SamplerDescriptor shadowSamplerDesc;
         {
             // Clamp-to-border sampler address mode requires GLES 3.2, so use standard clamp mode in case hardware only supports GLES 3.0
-            if (renderer->GetRendererID() == LLGL::RendererID::OpenGLES)
+            if (renderer->GetRendererID() == LLGL::RendererID::OpenGLES ||
+                renderer->GetRendererID() == LLGL::RendererID::WebGL)
             {
                 shadowSamplerDesc.addressModeU      = LLGL::SamplerAddressMode::Clamp;
                 shadowSamplerDesc.addressModeV      = LLGL::SamplerAddressMode::Clamp;