Files
filament/web/filament-js
Powei Feng a73957a590 web: refactor examples and tutorials (#9833)
* 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
2026-03-25 23:52:48 +00:00
..
2026-03-02 16:46:07 -08:00
2026-03-24 10:00:22 -07:00

Filament for Web

Filament is a mobile-first library for physically based rendering. It has a lightweight C++ core made available to web developers via a WebAssembly module. The WASM file is bundled with a first-class JavaScript API.

See the web docs for more information.

Publishing to npm

See Versioning.md for a description of Filament's three-tier versioning scheme.

By pushing Filament's WebAssembly build to the npm registry, we can simplify the workflow for web developers due to tools like yarn. This also has the benefit of making Filament available on CDN servers like unpkg and jsdelivr.

To publish a new package to npm, do the following.

  1. Follow the instructions in the toplevel README for installing Emscripten.
  2. Make sure you have an npm account and that your npm account belongs to the Google team.
  3. Edit the version number in package.json. You cannot publish the same version more than once.
  4. From the root folder in your Filament repo, do:
./build.sh -ap webgl release
./build.sh -ap all release
  1. Make a commit and a tag whose label is the 3-tiered version number prefixed with a v:
git commit && git tag -a v{XX}.{YY}.{ZZ}
  1. Push your change to GitHub, then make a GitHub Release associated with your new tag.
  2. Perform a "dry run" of the npm packaging process:
‼️ If there is a material change, be sure to update the live demos!
cd out/cmake-webgl-release/web/filament-js
npm publish --dry-run
  1. If the output of the dry run looks okay to you (double check the version number!), then finally do npm publish.
  1. Update the live drag-and-drop viewer as follows:

    1. Edit the pinned Filament version in the <script> tag in docs/viewer/index.html.
    2. Push the change to GitHub and test the site: https://google.github.io/filament/viewer/.