a73957a590
* Refactor web examples and tutorials - Consolidate web/docs and web/samples into web/examples - Remove literal programming blocks from Markdown tutorials - Replace tutorial_template.html with a fully embedded template in serve.py - Move serve.py to web/examples/serve.py and update dependency rules - Update filament-js wrapper to expose _malloc, _free and set GEN_MIPMAPPABLE usage - Update sample materials and WebGL asset generation within web/examples/CMakeLists.txt - Add python venv instructions and usage details to web/README.md - Remove obsolete examples, Pipfile, and demo templates * Transfer web tutorials and samples to docs_src - Introduce copy_web_docs.py api to deploy and rewrite web sample outputs into the docs output tree - Hook copy_web_docs into docs_src/build/run.py natively - Configure duplicates.json to map WebGL outputs to embedded .md docs - Strip html skeleton out of examples in run.py so they map into markdown cleanly - Update update-docs workflow to pre-build the WebGL target - Remove obsolete remote docs path from src_raw - Add explanatory comments to copy_web_docs.py and run.py - Add index page with thumbnails for Web Tutorials and samples
Web Samples and Tutorials
This directory contains the web-based samples, tutorials, and the JavaScript wrapper for Filament.
Structure
-
examples/Contains the source for the WebGL tutorials, HTML samples, materials, and assets. These examples usefilament.jsandfilament.wasmto demonstrate various features of the engine. -
filament-js/Contains the JavaScript bindings for Filament, generated via Emscripten.
Building the Web Examples
To build the WebGL targets and compile all required materials and assets, you will need the Emscripten SDK installed and activated.
-
Activate Emscripten SDK: Make sure you have
EMSDKin your environment.cd path/to/emsdk ./emsdk activate latest source ./emsdk_env.sh -
Run the Build Script: From the root directory of the repository, execute the build script targeting WebGL:
./build.sh -p webgl releaseThis will:
- Compile the C++ engine to
filament.wasmandfilament.js. - Build all materials (
.matto.filamat) and process textures required by the examples. - Output everything into
out/cmake-webgl-release/examples/.
- Compile the C++ engine to
Running the Examples
Because of CORS restrictions and the need to serve WebAssembly files with the correct MIME type, you must serve the files via a local web server.
-
Install Python Requirements: The serve script dynamically renders Markdown tutorials on-the-fly using
mistletoe. It is highly recommended to use a Python virtual environment to install dependencies.python3 -m venv .venv source .venv/bin/activate pip install -r web/examples/requirements.txt -
Start the Server: From the root of the repository, run the
serve.pyscript:./web/examples/serve.py -
View the Examples: Open your browser and navigate to
http://localhost:8000. You will see an index page listing all the generated tutorials and samples.
Python Script: serve.py
The custom serve.py script in the web/examples/ directory performs the following:
- Automatically detects the built files in the
out/directory. - Generates a main entry
index.htmllisting all the available samples and tutorials. - Handles server-side rendering of
.mdtutorial files into HTML using an embedded template.