To help you get started, we've collected the most common ways that filament is being used within popular public projects.

google / filament / web / samples / webpack / src / app.ts View on Github

* you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import * as Filament from "filament";
import * as glm from "gl-matrix";

Filament.init([], () => {
    window["vec3"] = glm.vec3;
    window["app"] = new App(document.getElementsByTagName('canvas')[0]);
});

class App {
    public readonly camera: Filament.Camera;
    private canvas: HTMLCanvasElement;
    private engine: Filament.Engine;
    private scene: Filament.Scene;
    private view: Filament.View;
    private swapChain: Filament.SwapChain;
    private renderer: Filament.Renderer;
    private bgcolor: number[];

    constructor(canvas) {
      this.canvas = canvas;

View more ways to use filament

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

5. 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}

6. Push your change to GitHub, then make a GitHub Release associated with your new tag.
7. Perform a "dry run" of the npm packaging process:

cd out/cmake-webgl-release/web/filament-js
npm publish --dry-run

8. If the output of the dry run looks okay to you (double check the version number!), then finally do npm publish.

9. Update the live drag-and-drop viewer as follows:

   1. Edit the pinned Filament version in the `