[Wasm] Updated Animation and Fonts HTML examples.

Also updated README.md document for Wasm platform.
LukasBanana · Aug 27, 2024 · 97f4868 · 97f4868
1 parent f31eb23
commit 97f4868
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 26 deletions.
diff --git a/docu/README.md b/docu/README.md
@@ -66,17 +66,15 @@ Use `$ ./BuildMsys2.sh -h` in a command prompt for more details.
 
 ## WebAssembly (Wasm)
 
-LLGL can be build for the web using [Emscripten](https://emscripten.org/), [WebAssembly](https://webassembly.org/), and [WebGL 2](https://www.khronos.org/webgl/).
-This is in an **experimental** state and requires [Google Chrome](https://www.google.com/chrome/) to be launched with the following arguments to enable web assembly:
-```
-chrome --js-flags=--experimental-wasm-threads --enable-features=WebAssembly,SharedArrayBuffer
-```
-When building on Windows, it is recommended to use the [Windows Subsystem for Linux (WSL)](https://ubuntu.com/desktop/wsl) to run the *BuildWasm.sh* script.
+*- This is in an experimental state -*
+
+LLGL can be built for the web using [Emscripten](https://emscripten.org/), [WebAssembly](https://webassembly.org/), and [WebGL 2](https://www.khronos.org/webgl/).
+When building on Windows, it is recommended to use the [Windows Subsystem for Linux (WSL)](https://ubuntu.com/desktop/wsl) to run the *BuildWasm.sh* bash script.
 The generated example projects can be tested by running a local web server from the output folder, for instance with [Node.js](https://nodejs.org/) or Python `http.server` module:
 ```
 $ python -m http.server
 ```
-Then run your browser of choice at URL http://localhost:8000/.
+Then launch your web browser of choice and open the URL http://localhost:8000/.
 
 <p align="center">
     <img src="Showcase/Showcase_Build_Wasm.png" alt="Screenshot missing: HTML5 Example Showcase" style="max-width:600px;width:70%;height:auto;">

diff --git a/docu/WebPage/Example_Animation/Example_Animation.js b/docu/WebPage/Example_Animation/Example_Animation.js
diff --git a/docu/WebPage/Example_Animation/Example_Animation.wasm b/docu/WebPage/Example_Animation/Example_Animation.wasm
diff --git a/docu/WebPage/Example_Animation/index.html b/docu/WebPage/Example_Animation/index.html
@@ -5,21 +5,21 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - Animation</title>
     <style>
-        h1 {
-            font-family: Arial, Helvetica, sans-serif;
-        }
         canvas { 
             display: block;
-            padding: 0;
-            margin: auto;
-            width: 70%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            height: 100%;
+            width: 100%;
         }
     </style>
 </head>
 <body>
     <!-- Create canvas that C++ code will draw into -->
     <div style="text-align: center;">
-        <h1>WebGL Example with LLGL</h1>
         <canvas id="canvas" oncontextmenu="event.preventDefault()" width="800" height="600"></canvas>
     </div>
 
@@ -46,4 +46,4 @@ <h1>WebGL Example with LLGL</h1>
     <script src=Example_Animation.data.js></script>
     <script src=Example_Animation.js></script>
 </body>
-</html>
+</html>
diff --git a/docu/WebPage/Example_Fonts/Example_Fonts.data b/docu/WebPage/Example_Fonts/Example_Fonts.data
diff --git a/docu/WebPage/Example_Fonts/Example_Fonts.data.js b/docu/WebPage/Example_Fonts/Example_Fonts.data.js
@@ -176,6 +176,6 @@ Module['FS_createPath']("/", "assets", true, true);
     }
 
     }
-    loadPackage({"files": [{"filename": "/assets/Example.450core.frag", "start": 0, "end": 397}, {"filename": "/assets/Example.450core.vert", "start": 397, "end": 1132}, {"filename": "/assets/Example.frag", "start": 1132, "end": 1410}, {"filename": "/assets/Example.vert", "start": 1410, "end": 2023}, {"filename": "/assets/FontAtlas_CourierNew_Bold_16.png", "start": 2023, "end": 6743}, {"filename": "/assets/FontAtlas_LucidaConsole_Bold_32.png", "start": 6743, "end": 19031}, {"filename": "/assets/IcoSphere.obj", "start": 19031, "end": 36197}, {"filename": "/assets/Logo_LLGL.png", "start": 36197, "end": 51867}, {"filename": "/assets/PenroseStairs-Bottom.obj", "start": 51867, "end": 61179}, {"filename": "/assets/PenroseStairs-Top.obj", "start": 61179, "end": 70253}, {"filename": "/assets/TilesGray512.jpg", "start": 70253, "end": 284611}], "remote_package_size": 284611});
+    loadPackage({"files": [{"filename": "/assets/Example.450core.frag", "start": 0, "end": 397}, {"filename": "/assets/Example.450core.vert", "start": 397, "end": 1132}, {"filename": "/assets/Example.frag", "start": 1132, "end": 1410}, {"filename": "/assets/Example.vert", "start": 1410, "end": 2023}, {"filename": "/assets/FontAtlas_CourierNew_Bold_16.png", "start": 2023, "end": 6743}, {"filename": "/assets/FontAtlas_LucidaConsole_Bold_32.png", "start": 6743, "end": 19031}], "remote_package_size": 19031});
 
   })();
diff --git a/docu/WebPage/Example_Fonts/Example_Fonts.js b/docu/WebPage/Example_Fonts/Example_Fonts.js
diff --git a/docu/WebPage/Example_Fonts/Example_Fonts.wasm b/docu/WebPage/Example_Fonts/Example_Fonts.wasm
diff --git a/docu/WebPage/Example_Fonts/index.html b/docu/WebPage/Example_Fonts/index.html
@@ -5,21 +5,21 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     <title>LLGL - Fonts</title>
     <style>
-        h1 {
-            font-family: Arial, Helvetica, sans-serif;
-        }
         canvas { 
             display: block;
-            padding: 0;
-            margin: auto;
-            width: 70%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            height: 100%;
+            width: 100%;
         }
     </style>
 </head>
 <body>
     <!-- Create canvas that C++ code will draw into -->
     <div style="text-align: center;">
-        <h1>WebGL Example with LLGL</h1>
         <canvas id="canvas" oncontextmenu="event.preventDefault()" width="800" height="600"></canvas>
     </div>
 
@@ -46,4 +46,4 @@ <h1>WebGL Example with LLGL</h1>
     <script src=Example_Fonts.data.js></script>
     <script src=Example_Fonts.js></script>
 </body>
-</html>
+</html>